6 |
9 |
10 | svelte-worker-store
7 |stores go brrrrrr
8 |9 |
11 | svelte-worker-store is a set of highly performant Web Worker-based
12 | Svelte stores.
13 |
15 | Svelte Apps that do resource-intensive tasks (e.g., image manipulation, code 16 | transpilation, number crunching, etc.) can potentially benefit from this 17 | library greatly in performance as well as reducing the complexity of your 18 | code. 19 |
20 |21 | Check it out on GitHub 25 | or on the 26 | NPM Registry. 29 |
30 |Demos
31 |
32 |
43 |
44 |
--------------------------------------------------------------------------------
/src/routes/_components/Canvas.svelte:
--------------------------------------------------------------------------------
1 |
100 |
101 | 76 | Julia Set 77 |
78 |79 | This demo executes the Julia Set fractal algorithm on 4 worker threads 80 | simultaneously, creating a total of 4 different images that will be displayed 81 | below on the left. 82 |
83 |84 | On the right is an interactive canvas that you can draw on while the images 85 | generate (if you can draw on the canvas, the main thread is not being 86 | blocked.) 87 |
88 |89 |
Click on "Generate Fractals" to get started!
90 | 91 |
94 |
139 |
95 |
132 |
96 |
126 | Execution Context:
97 |
98 |
111 |
124 |
125 |
127 | {#each Array(4) as _, i}
128 | ![]()
129 | {/each}
130 |
131 |
133 |
138 | Drawing Canvas
134 |
135 |
136 |
137 |
140 |
149 |
150 |
151 |
159 |
--------------------------------------------------------------------------------
/src/routes/demos/julia-set/juliaSet.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/ban-ts-comment */
2 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3 |
4 | import { workerInit } from "../../../lib/index.js";
5 |
6 | /**
7 | * @param {number} value
8 | * @param {number} start1
9 | * @param {number} stop1
10 | * @param {number} start2
11 | * @param {number} stop2
12 | */
13 | function map(value, start1, stop1, start2, stop2) {
14 | return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
15 | }
16 |
17 | class Complex {
18 | /**
19 | * @param {number} real
20 | * @param {number} imaginary
21 | */
22 | constructor(real, imaginary) {
23 | this.real = real;
24 | this.imaginary = imaginary;
25 | }
26 | /**
27 | * @param {Complex} other
28 | */
29 | add(other) {
30 | return new Complex(this.real + other.real, this.imaginary + other.imaginary);
31 | }
32 | /**
33 | * @param {Complex} other
34 | */
35 | multiply(other) {
36 | return new Complex(this.real * other.real - this.imaginary * other.imaginary, this.real * other.imaginary + this.imaginary * other.real);
37 | }
38 | magnitude() {
39 | return Math.sqrt(this.real * this.real + this.imaginary * this.imaginary);
40 | }
41 | }
42 |
43 | const MAX_ITERATIONS = 20000;
44 | const c = new Complex(-0.8, 0.156); // for Julia set
45 |
46 | // Color palette
47 | const palette = [
48 | [66, 30, 15],
49 | [25, 7, 26],
50 | [9, 1, 47],
51 | [4, 4, 73],
52 | [0, 7, 100],
53 | [12, 44, 138],
54 | [24, 82, 177],
55 | [57, 125, 209],
56 | [134, 181, 229],
57 | [211, 236, 248],
58 | [241, 233, 191],
59 | [248, 201, 95],
60 | [255, 170, 0],
61 | [204, 128, 0],
62 | [153, 87, 0],
63 | [106, 52, 3]
64 | ];
65 |
66 | /**
67 | * @param {number} width
68 | * @param {number} height
69 | * @param {number} x
70 | * @param {number} y
71 | */
72 | function juliaSet(width, height, x, y) {
73 | let zx = map(x, 0, width, -1.5, 1.5);
74 | let zy = map(y, 0, height, -1.5, 1.5);
75 | let z = new Complex(zx, zy);
76 | let iterations = 0;
77 |
78 | while (iterations < MAX_ITERATIONS && z.magnitude() < 2.0) {
79 | z = z.multiply(z).add(c);
80 | iterations++;
81 | }
82 |
83 | if (iterations < MAX_ITERATIONS) {
84 | let log_zn = Math.log(z.real * z.real + z.imaginary * z.imaginary) / 2;
85 | let nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
86 | iterations = iterations + 1 - nu;
87 | }
88 |
89 | return iterations;
90 | }
91 |
92 | /**
93 | * @param {number} width
94 | * @param {number} height
95 | */
96 | export async function generateJuliaSet(width, height) {
97 | const canvas = new OffscreenCanvas(width, height);
98 | const context = canvas.getContext("2d");
99 | // @ts-ignore
100 | width = ~~width;
101 | // @ts-ignore
102 | height = ~~height;
103 | // @ts-ignore
104 | canvas.width = width;
105 | canvas.height = height;
106 | // @ts-ignore
107 | const imageData = context.createImageData(width, height);
108 |
109 | const data = imageData.data;
110 | for (let y = 0; y < height; y++) {
111 | for (let x = 0; x < width; x++) {
112 | let value = juliaSet(width, height, x, y);
113 | let color = palette[Math.floor(value) % palette.length]; // color from the palette
114 |
115 | let pix = (x + y * width) * 4;
116 | data[pix + 0] = color[0];
117 | data[pix + 1] = color[1];
118 | data[pix + 2] = color[2];
119 | data[pix + 3] = 255; // fully opaque
120 | }
121 | }
122 |
123 |
124 | context?.putImageData(imageData, 0, 0);
125 | return await canvas.convertToBlob();
126 | }
127 |
128 | // eslint-disable-next-line no-undef
129 | export default workerInit(globalThis, async (/** @type {[width: number, height: number]} args */ ...args ) => await generateJuliaSet(...args));
130 |
131 |
--------------------------------------------------------------------------------
/src/routes/docs/+layout.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
17 |
18 |
35 |
--------------------------------------------------------------------------------
/src/routes/docs/+page.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
29 |
31 |
39 |
40 |
41 |
58 |
81 |
82 |
83 | { return a + b }, 2);
97 |
98 | await store.send(1, 2) // returns 3
99 | $store // returns 3`}
100 | >
101 |
103 |
104 |
105 |
106 |
107 |
121 |
123 |
133 |
135 |
148 |
150 |
155 |
156 |
157 |
193 |
--------------------------------------------------------------------------------
/src/routes/docs/+page.ts:
--------------------------------------------------------------------------------
1 | export const ssr = false;
2 |
--------------------------------------------------------------------------------
/src/routes/docs/codeblocks.ts:
--------------------------------------------------------------------------------
1 | export const viteExampleCode = [
2 | `
3 | // worker.js
4 | import { toUppercase } from '$lib/utils';
5 | import { workerInit } from 'svelte-worker-store';
6 |
7 | workerInit(globalThis, (input) => toUppercase(input));
8 |
9 | export {};
10 |
11 | `,
12 | `
13 | Documentation
30 |Installation
32 |
33 |
34 | pnpm add -D svelte-worker-store
35 | npm add -D svelte-worker-store
36 |
37 |
38 | 40 |
Concepts
42 |Stores as Channels
43 |44 | This library heavily relies on the idea of "stores as channels", which 45 | means that you aren't the source of truth for your data. Rather, 46 | your code directly is. 47 |
48 |49 |51 |What does that mean, exactly?
50 |
52 | Using shorthand $store = 5 doesn't work as you'd expect (this
53 | library uses is as an alias for .send). If you call
54 | store.set(5), the store's value does not explicitly update to
55 | 5 (depending on your handler, of course!)
56 |
58 |
59 | The benefits for this approach (simplicity, readability, reliability) are 60 | most likely will be more noticable in larger apps that handle a lot of 61 | data, but still want to maintain reactivity. 62 |
63 |
64 | Essentially, it's a multi-producer (.set,
65 | .send) /
66 | single-consumer (the worker) approach. This flow of data reduces
67 | the cognitive overhead of keeping track of how and where your store is
68 | used
69 |
Transferable Objects
72 |TBD
73 |74 | For more information, please visit the MDN Web Docs 79 |
80 |Usage
84 |API
85 |Channel
86 |87 | A basic store which updates it's value based on the returned output from 88 | the provided Handler 89 |
90 |106 |
Vite
108 |Using a script file
109 |110 | When using Vite with svelte-worker-store & using file-based Worker scripts 111 | you may encounter a problem that results in your script's imports not 112 | working. 113 |
114 |Assume we have the following Worker script ./worker.js:
124 | Trying to import the URL for the script will point to the correct file, 125 | even in production. However it will not run the file through the build 126 | step. 127 |
128 |136 | This will lead to problems since none of your imports will be transformed 137 | to point to the proper path once built. 138 |
139 |
140 | To fix this, you need to import the URL using &worker?url as the
141 | import query.
142 |
151 | Importing the script with &worker?url will run the file through
152 | Vite's build step, and the file will now work as expected.
153 |