Update the 42-wasm example

Author: ije

examples/42-wasm/aleph.config.ts

@@ -1,7 +1,6 @@
-import sass from '../../plugins/sass.ts'
-import wasm from '../../plugins/wasm.ts'
+import wasm from './wasm_loader.ts'
 import type { Config } from '../../types.ts'
 
 export default (): Config => ({
-  plugins: [sass(), wasm()]
+  plugins: [wasm()]
 })

examples/42-wasm/pages/index.tsx

@@ -2,11 +2,26 @@ import React from 'react'
 // @ts-expect-error
 import wasm from '../lib/42.wasm'
 
+const fontSize = 240
+
 export default function Home() {
   return (
-    <>
-      <link rel="stylesheet" href="../style/style.scss" />
+    <main>
+      <style>{`
+        body {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100vw;
+          height: 100vh;
+          overflow: hidden;
+        }
+
+        h1 {
+          font-size: ${fontSize}px;
+        }
+      `}</style>
       <h1>{wasm.main()}</h1>
-    </>
+    </main>
   )
 }

examples/42-wasm/style/style.scss

@@ -0,0 +1,15 @@
+import type { LoaderPlugin } from '../../types.ts'
+
+export default (): LoaderPlugin => ({
+  name: 'wasm-loader',
+  type: 'loader',
+  test: /\.wasm$/i,
+  transform: ({ content }) => ({
+    code: [
+      `const wasmBytes = new Uint8Array([${content.join(',')}])`,
+      'const wasmModule = new WebAssembly.Module(wasmBytes)',
+      'const { exports } = new WebAssembly.Instance(wasmModule)',
+      'export default exports',
+    ].join('\n')
+  })
+})