Improved JS bundling (wasmerio#352)

* Multiple fixes and improvements * Small hack for devmode * Improved bundling * Added module and unpkg back * Multiple fixes * Fix styles * Removed the pnpm-lock.yaml file and updated package-lock.json * Moved new rollup dependencies to the "dev-dependencies" section * Fixed API doc builds * Fixed a broken `@link` --------- Co-authored-by: Michael-F-Bryan <michael@wasmer.io>
rust-wasi-web · Dec 13, 2023 · 75c4bf1 · 75c4bf1
1 parent 54ed7dd
commit 75c4bf1
Show file tree

Hide file tree

Showing 13 changed files with 2,324 additions and 210 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        ["@babel/env", { "useBuiltIns": "usage", "corejs": 3 }]
+    ]
+}
diff --git a/examples/markdown-editor-improved/index.ts b/examples/markdown-editor-improved/index.ts
@@ -1,4 +1,4 @@
-import { init, Wasmer, Command } from "@wasmer/sdk";
+import { init, Wasmer, Command } from "@wasmer/sdk/dist/WasmerSDKBundled.js";
 
 async function initialize() {
     await init();

diff --git a/examples/markdown-editor/index.ts b/examples/markdown-editor/index.ts
@@ -1,4 +1,4 @@
-import { init, runWasix } from "@wasmer/sdk";
+import { init, runWasix } from "@wasmer/sdk/dist/WasmerSDKBundled.js";
 import markdownRendererUrl from "./markdown-renderer/target/wasm32-wasi/release/markdown-renderer.wasm?url";
 
 async function initialize() {

diff --git a/examples/wasmer.sh/index.html b/examples/wasmer.sh/index.html
@@ -6,6 +6,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wasmer Shell</title>
     <script type="module" defer src="./index.ts"></script>
+    <style>
+        html, body {
+            padding: 0;
+            margin:0;
+            overflow: hidden;
+            background: black;
+        }
+        html, body, #terminal {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
 </head>
 
 <body>

diff --git a/examples/wasmer.sh/index.ts b/examples/wasmer.sh/index.ts
@@ -1,6 +1,6 @@
 import "xterm/css/xterm.css";
 
-import { Wasmer, init, initializeLogger, Instance } from "@wasmer/sdk";
+import { Wasmer, init, initializeLogger, Instance } from "@wasmer/sdk/dist/WasmerSDKBundled.js";
 import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 
@@ -16,9 +16,9 @@ async function main() {
     term.open(document.getElementById("terminal")!);
     fit.fit();
 
-    const pkg = await Wasmer.fromRegistry("sharrattj/bash");
     term.writeln("Starting...");
-
+    const pkg = await Wasmer.fromRegistry("sharrattj/bash");
+    term.reset();
     const instance = await pkg.entrypoint!.run();
     connectStreams(instance, term);
 }

diff --git a/lib.ts b/lib.ts
@@ -1,105 +1,19 @@
-import { Buffer } from "buffer";
 export * from "./pkg/wasmer_js";
 // @ts-ignore
-import load, { ThreadPoolWorker } from "./pkg/wasmer_js";
+import load, { InitInput, InitOutput, ThreadPoolWorker } from "./pkg/wasmer_js";
 import wasm_bytes from "./pkg/wasmer_js_bg.wasm";
 
-interface MimeBuffer extends Buffer {
-    type: string;
-    typeFull: string;
-    charset: string;
-}
-
-/**
- * Returns a `Buffer` instance from the given data URI `uri`.
- *
- * @param {String} uri Data URI to turn into a Buffer instance
- * @returns {Buffer} Buffer instance from Data URI
- * @api public
- */
-function dataUriToBuffer(uri: string): MimeBuffer {
-    if (!/^data:/i.test(uri)) {
-        throw new TypeError(
-            '`uri` does not appear to be a Data URI (must begin with "data:")',
-        );
-    }
-
-    // strip newlines
-    uri = uri.replace(/\r?\n/g, "");
-
-    // split the URI up into the "metadata" and the "data" portions
-    const firstComma = uri.indexOf(",");
-    if (firstComma === -1 || firstComma <= 4) {
-        throw new TypeError("malformed data: URI");
-    }
-
-    // remove the "data:" scheme and parse the metadata
-    const meta = uri.substring(5, firstComma).split(";");
-
-    let charset = "";
-    let base64 = false;
-    const type = meta[0] || "text/plain";
-    let typeFull = type;
-    for (let i = 1; i < meta.length; i++) {
-        if (meta[i] === "base64") {
-            base64 = true;
-        } else {
-            typeFull += `;${meta[i]}`;
-            if (meta[i].indexOf("charset=") === 0) {
-                charset = meta[i].substring(8);
-            }
-        }
-    }
-    // defaults to US-ASCII only if type is not provided
-    if (!meta[0] && !charset.length) {
-        typeFull += ";charset=US-ASCII";
-        charset = "US-ASCII";
-    }
-
-    // get the encoded data portion and decode URI-encoded chars
-    const encoding = base64 ? "base64" : "ascii";
-    const data = unescape(uri.substring(firstComma + 1));
-    const buffer = Buffer.from(data, encoding) as MimeBuffer;
-
-    // set `.type` and `.typeFull` properties to MIME type
-    buffer.type = type;
-    buffer.typeFull = typeFull;
-
-    // set the `.charset` property
-    buffer.charset = charset;
-
-    return buffer;
-}
-
-export type InitInput =
-    | RequestInfo
-    | URL
-    | Response
-    | BufferSource
-    | WebAssembly.Module;
-
-let inited: Promise<any> | null = null;
-
 /**
  * Initialize the underlying WebAssembly module.
  */
-export const init = async (
-    input?: InitInput | Promise<InitInput>,
-    maybe_memory?: WebAssembly.Memory,
-    force?: boolean,
-) => {
-    if (inited === null || force === true) {
-        if (!input) {
-            input = await WebAssembly.compile(
-                dataUriToBuffer(wasm_bytes as any as string),
-            );
-        }
-        inited = load(input, maybe_memory);
-    }
-    await inited;
-};
+export const init = load;
 
 // HACK: We save these to the global scope because it's the most reliable way to
 // make sure worker.js gets access to them. Normal exports are removed when
 // using a bundler.
 (globalThis as any)["__WASMER_INTERNALS__"] = { ThreadPoolWorker, init };
+
+// HACK: some bundlers such as webpack uses this on dev mode.
+// We add this functions to allow dev mode work in those bundlers.
+(globalThis as any).$RefreshReg$ = (globalThis as any).$RefreshReg$ || function () {/**/ };
+(globalThis as any).$RefreshSig$ = (globalThis as any).$RefreshSig$ || function () { return function () { } };
diff --git a/lib_bundled.ts b/lib_bundled.ts
@@ -0,0 +1,18 @@
+export * from "./lib";
+// @ts-ignore
+import { init as load, InitInput, InitOutput, ThreadPoolWorker } from "./lib";
+// @ts-ignore
+import wasm_bytes from "./pkg/wasmer_js_bg.wasm";
+
+
+/**
+ * Initialize the underlying WebAssembly module.
+ */
+
+export const init = async (module_or_path?: InitInput | Promise<InitInput>, maybe_memory?: WebAssembly.Memory): Promise<InitOutput> => {
+    if (!module_or_path) {
+        // @ts-ignore
+        module_or_path = await wasm_bytes();
+    }
+    return load(module_or_path, maybe_memory);
+}