Web worker draft

palette-switcher-v2/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@solid-primitives/workers": "^0.2.6",
     "@solidjs/router": "^0.10.9",
     "flowbite": "^2.2.1",
     "solid-fa": "^0.2.0",

palette-switcher-v2/pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@fortawesome/free-solid-svg-icons':
     specifier: ^6.5.1
     version: 6.5.1
+  '@solid-primitives/workers':
+    specifier: ^0.2.6
+    version: 0.2.6(solid-js@1.8.11)
   '@solidjs/router':
     specifier: ^0.10.9
     version: 0.10.9(solid-js@1.8.11)
@@ -875,6 +878,14 @@ packages:
       solid-js: 1.8.11
     dev: true
 
+  /@solid-primitives/workers@0.2.6(solid-js@1.8.11):
+    resolution: {integrity: sha512-GvEvxzfNcFbjunvpSlZtMATmrLIbWUnviaUQ+GwrN4NA4UTogYcVCTQmJZrPhPVTs5MJ6QEapPZzWrPLrSanWg==}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      solid-js: 1.8.11
+    dev: false
+
   /@solidjs/router@0.10.9(solid-js@1.8.11):
     resolution: {integrity: sha512-TmipgAI2cU7A94fBO1MOEx7j9OYoKtddoOonSFb2221w5I1xxdjLk9W4CZDdyOVdO5z80f70KGJvNq83WFX/Qg==}
     peerDependencies:

palette-switcher-v2/src/lib/ditherer.ts

@@ -0,0 +1,18 @@
+import { createSignal } from "solid-js";
+import { createSignaledWorker } from "@solid-primitives/workers";
+import { Job } from "./job";
+
+const [job, setJob] = createSignal<Job>();
+const [image, setImage] = createSignal<string>();
+
+const [start, stop] = createSignaledWorker({
+  input: job,
+  output: setImage,
+  func: function process(job: Job) {
+    console.log(job);
+    return "OK ?";
+  },
+  concurrency: 10,
+});
+
+export { setJob, image };

palette-switcher-v2/src/lib/job.ts

@@ -0,0 +1,21 @@
+type Color = string;
+
+interface BaseJob {
+  kind: string;
+  image: ArrayBuffer;
+  palette: Color[];
+}
+
+interface FloydSteinberg extends BaseJob {
+  kind: "FLOYD_STEINBERG";
+}
+
+interface Bayer extends BaseJob {
+  kind: "BAYER";
+}
+
+interface PixelMapper extends BaseJob {
+  kind: "PIXEL_MAPPER";
+}
+
+export type Job = FloydSteinberg | Bayer | PixelMapper;

palette-switcher-v2/src/pages/Switcher.tsx

@@ -1,8 +1,23 @@
 import { Component } from "solid-js";
+import { setJob, image } from "../lib/ditherer";
+import { Job } from "../lib/job";
 
-const Switcher: Component = () =>
+const Switcher: Component = () => {
+  const handler = () => {
+    const job: Job = {
+      kind: "FLOYD_STEINBERG",
+      image: new ArrayBuffer(1),
+      palette: ["FFFFFF"],
+    };
+
+    setJob(job);
+  };
+  return (
     <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
-        CONTENT
+      {image()}
+      <button onClick={() => handler()}>Click Me</button>
     </div>
+  );
+};
 
 export default Switcher;