feat: use rust for wasm

.prettierignore

@@ -1,2 +1,3 @@
 /build
-src/wasm
+/src/wasm
+/wasm

package.json

@@ -6,12 +6,14 @@
     "build:wasm": "./scripts/build/wasm.sh",
     "test": "jest",
     "prepare": "husky install .husky",
-    "format": "redrun format:eslint format:prettier",
-    "format:eslint": "eslint --fix --ext .js --ext .svelte .",
-    "format:prettier": "prettier --write --plugin-search-dir=. './**/*.{js,svelte}'",
-    "format:check": "redrun format:check:eslint format:check:prettier",
+    "format": "redrun format:run:*",
+    "format:run:eslint": "eslint --fix --ext .js --ext .svelte .",
+    "format:run:prettier": "prettier --write --plugin-search-dir=. './**/*.{js,svelte}'",
+    "format:run:rust": "cd wasm && cargo fmt",
+    "format:check": "redrun format:check:*",
     "format:check:eslint": "eslint --ext .js --ext .svelte .",
-    "format:check:prettier": "prettier --check --plugin-search-dir=. './**/*.{js,svelte}'"
+    "format:check:prettier": "prettier --check --plugin-search-dir=. './**/*.{js,svelte}'",
+    "format:check:rust": "cd wasm && cargo fmt --check"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37",
@@ -35,6 +37,7 @@
     "svelte-preprocess": "^4.10.3",
     "svelte-storages": "^0.0.2",
     "tailwindcss": "^3.0.18",
-    "vite": "^2.8.4"
+    "vite": "^2.8.4",
+    "vite-plugin-wasm": "^0.0.2"
   }
 }

src/components/App.svelte

@@ -7,7 +7,10 @@
 	let width, height
 </script>
 
-<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
+<svelte:window
+	bind:innerWidth={width}
+	bind:innerHeight={height}
+	on:resize={() => window.location.reload()} />
 
 <Settings />
 

src/components/Canvas.svelte

@@ -68,6 +68,12 @@
 		drawLine(0, xpix, width, xpix)
 	}
 
+	/**
+	 * @param  {Number} sx Start `x`
+	 * @param  {Number} sy Start `y`
+	 * @param  {Number} ex End `x`
+	 * @param  {Number} ey End `y`
+	 */
 	function drawLine(sx, sy, ex, ey) {
 		gl.beginPath()
 		gl.moveTo(sx, sy)

src/stores/draw.js

@@ -1,3 +1,11 @@
 import { sessionStore } from 'svelte-storages'
 
-export const settings = sessionStore('draw-settings', { lx: -3, rx: 1 })
+/**
+ * left `x`, right `x`, top `y`, bottom `y`
+ */
+export const settings = sessionStore('draw-settings', {
+	lx: -3,
+	rx: 1,
+	ty: null,
+	by: null,
+})

src/utils/canvas/draw.js

@@ -1,64 +1,35 @@
-import { default as MandelbrotModule } from 'src/wasm/mandelbrot.js'
+import { Mandelbrot } from 'src/wasm'
+import { memory } from 'src/wasm/mandelbrot_wasm_bg.wasm'
 
-let Module
-let calcPlane
-
-let ModulePromise = MandelbrotModule()
-
-// https://stackoverflow.com/a/53384917
-function init(mod) {
-	Module = mod
-	calcPlane = mod.cwrap('calcPlane', null, [
-		'number',
-		'number',
-		'number',
-		'number',
-		'array',
-	])
-}
+/** @type {Mandelbrot} */
+let mandelbrot = null
 
 /**
  * Draw mandelbrot on image
  *
  * @param  {ImageData}          image Image from canvas
  * @param  {number}             lx    Left x of complex plane
- * @param  {number}             rx    Right x of compmlex plane
+ * @param  {number}             rx    Right x of complex plane
  * @return {Promise<ImageData>}       Promise with resulting image
  */
-export async function drawMandelbrot(image, lx, rx) {
-	if (ModulePromise !== null) {
-		init(await ModulePromise)
-
-		ModulePromise = null
-	}
-
+export function drawMandelbrot(image, lx, rx) {
 	let w = image.width,
 		h = image.height
-
 	const len = w * h
 
-	// Work with arrays
-	// https://stackoverflow.com/a/23917034
-	// https://stackoverflow.com/a/41878939
-	// https://emscripten.org/docs/api_reference/preamble.js.html#getValue
-	let buffer = Module._malloc(len)
-	Module.HEAP16.set(new Uint16Array(Array(len)).buffer)
-
-	calcPlane(lx, rx, w, h, buffer)
-
-	let result = []
-	for (let i = 0; i < len; i++) {
-		// I don't know why, maybe it depends on type of array elements
-		// but multiply i by 2 helps to get right array from wasm
-		result.push(Module.getValue(buffer + i * 2))
+	if (mandelbrot === null) {
+		mandelbrot = Mandelbrot.new(len)
 	}
 
-	Module._free(buffer)
+	mandelbrot.calc(lx, rx, w, h, len)
+
+	const pixelsPtr = mandelbrot.pixels()
+	const pixels = new Uint8Array(memory.buffer, pixelsPtr, len)
 
 	let color
 
 	for (let i = 0, j = 0; i < len; i++, j += 4) {
-		color = result[i] * 255
+		color = pixels[i]
 
 		image.data[j] = color
 		image.data[j + 1] = color

vite.config.js

@@ -1,22 +1,14 @@
 import postcss from './postcss.config.js'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import wasm from 'vite-plugin-wasm'
 
 import path from 'path'
 
-/**
- * @return {import('vite').ProxyOptions}
- */
-/*const singleProxy = (path, port) => ({
-	target: 'http://localhost:' + port,
-	changeOrigin: true,
-	rewrite: (url) => url.replace(new RegExp(`^/${path}`), ''),
-})*/
-
 /**
  * @type {import('vite').UserConfig}
  */
 const config = {
-	plugins: [svelte()],
+	plugins: [svelte(), wasm()],
 	css: { postcss },
 	resolve: {
 		alias: {
@@ -29,9 +21,6 @@ const config = {
 	clearScreen: false,
 	server: {
 		port: 8080,
-		proxy: {
-			// '/api': singleProxy('api', 4000),
-		},
 	},
 	build: {
 		sourcemap: true,

wasm/.gitignore

@@ -1,2 +1 @@
 /target
-Cargo.lock