✨ Add with-webassembly example

Author: GuiDevloper

Diff for: README.md

@@ -13,4 +13,5 @@ Some examples in Nullstack full-stack framework 🗃️ 💖 🚀
 |[with-dotenv](./examples/with-dotenv)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-dotenv?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-dotenv)|
 |[with-mdx](./examples/with-mdx)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-mdx?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-mdx)|
 |[with-tailwind](./examples/with-tailwind)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-tailwind?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-tailwind)|
-|[with-videojs](./examples/with-videojs)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-videojs?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-videojs)|
+|[with-videojs](./examples/with-videojs)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-videojs?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-videojs)|
+|[with-webassembly](./examples/with-webassembly)|[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-webassembly?vercel)|[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-webassembly)|

Diff for: examples/with-webassembly/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: 'plugin:nullstack/recommended',
+  rules: {
+    'nullstack/prettier': [
+      'warn',
+      {
+        // More options at https://prettier.io/docs/en/options
+        trailingComma: 'all',
+        tabWidth: 2,
+        semi: false,
+        singleQuote: true,
+        printWidth: 80,
+      },
+      {
+        usePrettierrc: false,
+      },
+    ],
+  },
+}

Diff for: examples/with-webassembly/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+
+# vercel
+.vercel
+
+# bundle folders
+.development/
+.production/

Diff for: examples/with-webassembly/README.md

@@ -0,0 +1,50 @@
+# WebAssembly example
+
+This example shows how to import WebAssembly files (`.wasm`) and use them inside of a Nullstack component in both server and client environments. In the case of this example we're showing [Rust](https://rust-lang.org/) and [Go](https://go.dev/) compiled to WebAssembly.
+
+## Deploy your own
+
+Deploy it now with [Vercel](https://vercel.com) or preview on [StackBlitz](https://stackblitz.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://nullstack-new.vercel.app/with-webassembly?vercel)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://nullstack-new.vercel.app/with-webassembly)
+
+## How to use
+
+Execute [`nulla create`](https://github.com/GuiDevloper/nulla) with [npm](https://docs.npmjs.com/cli/init):
+
+```bash
+npx nulla create --example with-webassembly with-webassembly-app
+```
+
+Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-netlify.md).
+
+## Compiling to WASM
+
+### Rust
+
+The WASM file is included in the example, but to compile your own Rust code you'll have to [install](https://www.rust-lang.org/learn/get-started) Rust.
+
+To compile `src/rust/src/main.rs` to `src/rust/main.wasm` run:
+
+```bash
+npm run build:rust
+# or
+yarn build:rust
+# or
+pnpm build:rust
+```
+
+### Go
+
+The WASM file is included in the example, but to compile your own Go code you'll have to install both [Go](https://go.dev/doc/install) and [TinyGo](https://tinygo.org/getting-started/install/) (used to generate optimized Go binaries).
+
+To compile `src/go/src/main.rs` to `src/go/main.wasm` run:
+
+```bash
+npm run build:go
+# or
+yarn build:go
+# or
+pnpm build:go
+```

Diff for: examples/with-webassembly/client.ts

@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)

Diff for: examples/with-webassembly/package.json

@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.2.3",
+    "nullstack": "0.20.0"
+  },
+  "scripts": {
+    "start": "npx nullstack start",
+    "build": "npx nullstack build",
+    "build:go": "tinygo build -o ./src/go/main.wasm -target=wasi ./src/go/src/main.go && node ./src/go/update-bindings.js",
+    "build:rust": "rustc --target wasm32-unknown-unknown -O --crate-type=cdylib src/rust/src/main.rs -o src/rust/main.wasm",
+    "vercel-build": "npm run build && npx nullstack-adapt-vercel"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm i [email protected] -D && nullstack-adapt-babel && npm start",
+    "compileTrigger": "save"
+  }
+}

Diff for: examples/with-webassembly/public/favicon-96x96.png

@@ -0,0 +1,14 @@
+import Nullstack, { NullstackServerContext } from 'nullstack'
+
+import type { Request, Response } from 'express'
+
+import Application from './src/Application'
+import { readWASMFile } from './src/go/load-wasm'
+
+const context = Nullstack.start(Application) as NullstackServerContext
+
+context.server.get('/:id.wasm', (req: Request, res: Response) => {
+  res.send(readWASMFile(`${req.params.id}.wasm`))
+})
+
+export default context

Diff for: examples/with-webassembly/server.ts

@@ -0,0 +1,28 @@
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #111827;
+  color: #fff;
+  font-family: 'Roboto', sans-serif;
+}
+
+main {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 5vh;
+}
+
+a {
+  color: #f15d9f;
+  margin-left: .3em;
+}
+
+.multiplier {
+  margin-bottom: 2rem;
+}

Diff for: examples/with-webassembly/src/Application.css

@@ -0,0 +1,20 @@
+import './Application.css'
+import Nullstack from 'nullstack'
+
+import MultiplyGo from './MultiplyGo'
+import MultiplyRust from './MultiplyRust'
+
+class Application extends Nullstack {
+
+  render() {
+    return (
+      <main>
+        <MultiplyGo />
+        <MultiplyRust />
+      </main>
+    )
+  }
+
+}
+
+export default Application

Diff for: examples/with-webassembly/src/Application.tsx

@@ -0,0 +1,49 @@
+import Nullstack from 'nullstack'
+
+import loadWASM from './go/load-wasm'
+
+class MultiplyGo extends Nullstack {
+
+  messageClient: number
+  messageServer: number
+  amount = 12
+  static serverAmount = 12
+
+  static async multiplyWASM({ x }: { x: number }) {
+    return (await loadWASM()).multiply(x, ++MultiplyGo.serverAmount)
+  }
+
+  async hydrate() {
+    await this.multiplyAtServer()
+    await this.multiplyAtClient()
+  }
+
+  async multiplyAtServer() {
+    this.messageServer = await MultiplyGo.multiplyWASM({ x: 10 })
+  }
+
+  async multiplyAtClient() {
+    this.messageClient = (await loadWASM()).multiply(10, ++this.amount)
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Golang</h1>
+        <section class="multiplier">
+          <h3>Call at server</h3>
+          <h2>{this.messageServer}</h2>
+          <button onclick={this.multiplyAtServer}>Multiply!</button>
+        </section>
+        <section class="multiplier">
+          <h3>Call at client</h3>
+          <h2>{this.messageClient}</h2>
+          <button onclick={this.multiplyAtClient}>Multiply!</button>
+        </section>
+      </div>
+    )
+  }
+
+}
+
+export default MultiplyGo

Diff for: examples/with-webassembly/src/MultiplyGo.tsx

@@ -0,0 +1,49 @@
+import Nullstack from 'nullstack'
+
+import loadWASM from './rust/load-wasm'
+
+class MultiplyRust extends Nullstack {
+
+  messageClient: number
+  messageServer: number
+  amount = 12
+  static serverAmount = 12
+
+  static async multiplyWASM({ x }: { x: number }) {
+    return (await loadWASM()).multiply(x, ++MultiplyRust.serverAmount)
+  }
+
+  async hydrate() {
+    await this.multiplyAtServer()
+    await this.multiplyAtClient()
+  }
+
+  async multiplyAtServer() {
+    this.messageServer = await MultiplyRust.multiplyWASM({ x: 10 })
+  }
+
+  async multiplyAtClient(context?: never) {
+    this.messageClient = (await loadWASM(context)).multiply(10, ++this.amount)
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Rust</h1>
+        <section class="multiplier">
+          <h3>Call at server</h3>
+          <h2>{this.messageServer}</h2>
+          <button onclick={this.multiplyAtServer}>Multiply!</button>
+        </section>
+        <section class="multiplier">
+          <h3>Call at client</h3>
+          <h2>{this.messageClient}</h2>
+          <button onclick={this.multiplyAtClient}>Multiply!</button>
+        </section>
+      </div>
+    )
+  }
+
+}
+
+export default MultiplyRust

Diff for: examples/with-webassembly/src/MultiplyRust.tsx

@@ -0,0 +1,34 @@
+import fs from 'fs'
+import path from 'path'
+
+require('./wasm_exec')
+const GO = new Go()
+
+// eslint-disable-next-line import/no-unresolved
+import mainWASM from './main.wasm?resource'
+import type { GoModuleExports } from './types'
+
+let wasmBuffer
+let wasmModule
+
+export function readWASMFile(filename: string) {
+  const pureFilename = filename.replace(/\?resource$/, '')
+  return fs.readFileSync(path.join(__dirname, pureFilename))
+}
+
+async function saveBuffer() {
+  if (window?.document) {
+    wasmBuffer = await (await fetch(mainWASM)).arrayBuffer()
+  } else {
+    wasmBuffer = readWASMFile(mainWASM)
+  }
+}
+
+export default async function () {
+  if (!wasmBuffer) await saveBuffer()
+  if (!wasmModule) {
+    wasmModule = await WebAssembly.instantiate(wasmBuffer, GO.importObject)
+    GO.run(wasmModule.instance)
+  }
+  return wasmModule.instance.exports as GoModuleExports
+}

Diff for: examples/with-webassembly/src/go/load-wasm.ts

@@ -0,0 +1,3 @@
+module github.com/GuiDevloper/tst-overlay
+
+go 1.20

Diff for: examples/with-webassembly/src/go/main.wasm

@@ -0,0 +1,10 @@
+package main
+
+func main() {
+	println("Golang executed!")
+}
+
+//export multiply
+func multiply(x int16, y int16) int16 {
+	return x * y
+}

Diff for: examples/with-webassembly/src/go/src/go.mod

@@ -0,0 +1,13 @@
+/* eslint-disable */
+declare global {
+  class Go {
+    run(instance: WebAssembly.WebAssemblyInstantiatedSource['instance']): void
+    importObject: Record<string, any>
+  }
+}
+
+export type GoModuleExports = {
+  multiply(x: number, y: number): number
+}
+
+export {}

Diff for: examples/with-webassembly/src/go/src/main.go

@@ -0,0 +1,11 @@
+const { spawnSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+const GOROOT = spawnSync('tinygo', ['env', 'TINYGOROOT'], {
+  encoding: 'utf8',
+}).stdout.replace('\n', '')
+
+fs.copyFileSync(
+  path.join(GOROOT, '/targets/wasm_exec.js'),
+  path.join(__dirname, 'wasm_exec.js'),
+)