thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move worker init to index page

Browse Source
This commit is contained in:
Tyler Hallada 2022-03-02 23:53:20 -05:00
parent 96599cb2c8
commit 5144f8d6e1
3 changed files with 63 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/DataDirPicker.tsx
View File

@ -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 { useAppSelector, useAppDispatch } from "../lib/hooks";
import { import {
addPluginInOrder, addPluginInOrder,
@ -21,35 +22,12 @@ export const excludedPlugins = [
type Props = {}; type Props = {};
const DataDirPicker: React.FC<Props> = () => { const DataDirPicker: React.FC<Props> = () => {
const workerRef = useRef<Worker>(); const worker = useContext(WorkerContext);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const plugins = useAppSelector((state) => state.plugins.plugins); 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 () => { const onDataDirButtonClick = async () => {
if (!workerRef.current) { if (!worker) {
return alert("Worker not loaded yet"); return alert("Worker not loaded yet");
} }
const dirHandle = await ( const dirHandle = await (
@ -81,7 +59,7 @@ const DataDirPicker: React.FC<Props> = () => {
console.log(file.lastModifiedDate); console.log(file.lastModifiedDate);
const contents = new Uint8Array(await file.arrayBuffer()); const contents = new Uint8Array(await file.arrayBuffer());
try { try {
workerRef.current.postMessage( worker.postMessage(
{ {
skipParsing: excludedPlugins.includes(plugin.name), skipParsing: excludedPlugins.includes(plugin.name),
filename: 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 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. order select your <code>Data</code> directory below to load the plugins.
</p> </p>
<button onClick={onDataDirButtonClick}> <button onClick={onDataDirButtonClick} disabled={!worker}>
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory {plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
</button> </button>
</> </>

79
pages/index.tsx
View File

@ -1,13 +1,46 @@
import { createContext, useEffect, useRef, useState } from "react";
import type { NextPage } from "next"; import type { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import "mapbox-gl/dist/mapbox-gl.css"; import "mapbox-gl/dist/mapbox-gl.css";
import Map from "../components/Map"; import Map from "../components/Map";
import { useAppDispatch } from "../lib/hooks"; import { useAppDispatch } from "../lib/hooks";
import {
addPluginInOrder,
decrementPending,
PluginFile,
} from "../slices/plugins";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt"; import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
export const WorkerContext = createContext<Worker | null>(null);
const Home: NextPage = () => { const Home: NextPage = () => {
const [worker, setWorker] = useState<Worker | null>(null);
const dispatch = useAppDispatch(); 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 ( return (
<> <>
<Head> <Head>
@ -56,31 +89,31 @@ const Home: NextPage = () => {
<meta name="twitter:site" content="@tyhallada" /> <meta name="twitter:site" content="@tyhallada" />
<meta name="twitter:creator" content="@tyhallada" /> <meta name="twitter:creator" content="@tyhallada" />
</Head> </Head>
<div <WorkerContext.Provider value={worker}>
style={{ <div
margin: 0, style={{
padding: 0, margin: 0,
width: "100%", padding: 0,
height: "100%", width: "100%",
}} height: "100%",
onDragOver={(evt) => { }}
console.log("drag over!"); onDragOver={(evt) => {
evt.preventDefault(); evt.preventDefault();
}} }}
onDrop={async (evt) => { onDrop={async (evt) => {
console.log("drop!"); evt.preventDefault();
evt.preventDefault();
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) { if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
const file = evt.dataTransfer.items[0].getAsFile(); const file = evt.dataTransfer.items[0].getAsFile();
if (file) { if (file) {
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text())); dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
}
} }
} }}
}} >
> <Map />
<Map /> </div>
</div> </WorkerContext.Provider>
</> </>
); );
}; };

2
slices/plugins.ts
View File

@ -66,7 +66,7 @@ export const selectPlugins = (state: AppState) => state.plugins
export const applyLoadOrder = (): AppThunk => (dispatch, getState) => { export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
const { plugins, pluginsTxt } = getState(); const { plugins, pluginsTxt } = getState();
console.log("applying load order!", pluginsTxt); console.log("applying load order!");
const originalPlugins = [...plugins.plugins]; const originalPlugins = [...plugins.plugins];
console.log(originalPlugins); console.log(originalPlugins);
console.log(originalPlugins[0] && originalPlugins[0].filename); console.log(originalPlugins[0] && originalPlugins[0].filename);