Move worker init to index page
This commit is contained in:
parent
96599cb2c8
commit
5144f8d6e1
@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import React, { useContext, useEffect, useRef } from "react";
|
||||
|
||||
import { WorkerContext } from "../pages/index";
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import {
|
||||
addPluginInOrder,
|
||||
@ -21,35 +22,12 @@ export const excludedPlugins = [
|
||||
type Props = {};
|
||||
|
||||
const DataDirPicker: React.FC<Props> = () => {
|
||||
const workerRef = useRef<Worker>();
|
||||
const worker = useContext(WorkerContext);
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadWorker() {
|
||||
const { default: Worker } = await import(
|
||||
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
|
||||
);
|
||||
console.log(Worker);
|
||||
workerRef.current = new Worker();
|
||||
workerRef.current.onmessage = (evt: { data: PluginFile }) => {
|
||||
const { data } = evt;
|
||||
console.log(`WebWorker Response =>`);
|
||||
dispatch(decrementPending(1));
|
||||
console.log(data.parsed);
|
||||
dispatch(addPluginInOrder(data));
|
||||
};
|
||||
}
|
||||
loadWorker();
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate();
|
||||
}
|
||||
};
|
||||
}, [dispatch]);
|
||||
|
||||
const onDataDirButtonClick = async () => {
|
||||
if (!workerRef.current) {
|
||||
if (!worker) {
|
||||
return alert("Worker not loaded yet");
|
||||
}
|
||||
const dirHandle = await (
|
||||
@ -81,7 +59,7 @@ const DataDirPicker: React.FC<Props> = () => {
|
||||
console.log(file.lastModifiedDate);
|
||||
const contents = new Uint8Array(await file.arrayBuffer());
|
||||
try {
|
||||
workerRef.current.postMessage(
|
||||
worker.postMessage(
|
||||
{
|
||||
skipParsing: excludedPlugins.includes(plugin.name),
|
||||
filename: plugin.name,
|
||||
@ -102,7 +80,7 @@ const DataDirPicker: React.FC<Props> = () => {
|
||||
To see all of the cell edits and conflicts for your current mod load
|
||||
order select your <code>Data</code> directory below to load the plugins.
|
||||
</p>
|
||||
<button onClick={onDataDirButtonClick}>
|
||||
<button onClick={onDataDirButtonClick} disabled={!worker}>
|
||||
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
|
||||
</button>
|
||||
</>
|
||||
|
||||
@ -1,13 +1,46 @@
|
||||
import { createContext, useEffect, useRef, useState } from "react";
|
||||
import type { NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import "mapbox-gl/dist/mapbox-gl.css";
|
||||
|
||||
import Map from "../components/Map";
|
||||
import { useAppDispatch } from "../lib/hooks";
|
||||
import {
|
||||
addPluginInOrder,
|
||||
decrementPending,
|
||||
PluginFile,
|
||||
} from "../slices/plugins";
|
||||
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
|
||||
|
||||
export const WorkerContext = createContext<Worker | null>(null);
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [worker, setWorker] = useState<Worker | null>(null);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
async function loadWorker() {
|
||||
const { default: Worker } = await import(
|
||||
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
|
||||
);
|
||||
const newWorker = new Worker();
|
||||
newWorker.onmessage = (evt: { data: PluginFile }) => {
|
||||
const { data } = evt;
|
||||
dispatch(decrementPending(1));
|
||||
console.log(data.parsed);
|
||||
dispatch(addPluginInOrder(data));
|
||||
};
|
||||
setWorker(newWorker);
|
||||
}
|
||||
loadWorker();
|
||||
return () => {
|
||||
if (worker) {
|
||||
worker.terminate();
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@ -56,31 +89,31 @@ const Home: NextPage = () => {
|
||||
<meta name="twitter:site" content="@tyhallada" />
|
||||
<meta name="twitter:creator" content="@tyhallada" />
|
||||
</Head>
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
onDragOver={(evt) => {
|
||||
console.log("drag over!");
|
||||
evt.preventDefault();
|
||||
}}
|
||||
onDrop={async (evt) => {
|
||||
console.log("drop!");
|
||||
evt.preventDefault();
|
||||
<WorkerContext.Provider value={worker}>
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
onDragOver={(evt) => {
|
||||
evt.preventDefault();
|
||||
}}
|
||||
onDrop={async (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
|
||||
const file = evt.dataTransfer.items[0].getAsFile();
|
||||
if (file) {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
|
||||
const file = evt.dataTransfer.items[0].getAsFile();
|
||||
if (file) {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Map />
|
||||
</div>
|
||||
}}
|
||||
>
|
||||
<Map />
|
||||
</div>
|
||||
</WorkerContext.Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -66,7 +66,7 @@ export const selectPlugins = (state: AppState) => state.plugins
|
||||
|
||||
export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
|
||||
const { plugins, pluginsTxt } = getState();
|
||||
console.log("applying load order!", pluginsTxt);
|
||||
console.log("applying load order!");
|
||||
const originalPlugins = [...plugins.plugins];
|
||||
console.log(originalPlugins);
|
||||
console.log(originalPlugins[0] && originalPlugins[0].filename);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user