See if the 'web' build target is actually cross platform for our use …

…case Shrink generate WASM by 25% Save 9KB Set up web test Add more scripts Restore node testing Without wee_alloc, we grow ~ 450KB With no allocator, we get down to 540KB, but the thing doesn't run Back up to 1.2MB, but working in the browser With no changes to the allocator, we are at 1.2MB Give up on custom allocators since they all have problems Switch to dual build Update the README and document how to use Browser (ESM), Node (ESM) and Node (CJS) Update ci.yml Determine that it's simpler to not use a custom allocator -- there must be other ways to get the wasm size down tho Remove browser test experiments
embroider-build · Nov 3, 2023 · 2ebc973 · 2ebc973
1 parent a396fcf
commit 2ebc973
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 6 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -32,12 +32,18 @@ jobs:
           debug-${{ runner.os }}-
     - name: Run tests
       run: cargo test --verbose
+
     - name: Install wasm-pack
       run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-    - run: wasm-pack build --target nodejs
+    - name: Install wasm-opt
+      run: cargo install wasm-opt
     - uses: actions/setup-node@v3
       with:
         node-version: 16
         cache: 'npm'
-    - run: npm ci
+    - run: npm install
+
+    # requires node generating package.json
+    - run: ./build.sh
+
     - run: npm test
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
+pkg/
 /target
-/node_modules
+/node_modules
diff --git a/Cargo.toml b/Cargo.toml
@@ -9,6 +9,10 @@ edition = "2021"
 [lib]
 crate-type = ["cdylib", "rlib"]
 
+[profile.release]
+lto = true
+opt-level = 'z'
+
 [dependencies]
 swc_common = { git = "https://github.com/ef4/swc.git", branch = "content-tag", features=["tty-emitter"] }
 swc = { git = "https://github.com/ef4/swc.git", branch = "content-tag" }

diff --git a/README.md b/README.md
@@ -12,10 +12,43 @@ npm install content-tag
 
 ## Usage
 
+### Node (CommonJS)
+
 ```js
 let { Preprocessor } = require('content-tag');
 let p = new Preprocessor();
 let output = p.process('<template>Hi</template>');
+
+console.log(output);
+```
+
+### Node (ESM)
+
+wasm-pack (the tool used to build the wasm module), does not support node with ESM, so in node ESM, you still need to use require.
+
+```js
+import { createRequire } from 'node:module';
+
+let require = createRequire(import.meta.url);
+
+let { Preprocessor } = require('content-tag');
+let p = new Preprocessor();
+let output = p.process('<template>Hi</template>');
+
+console.log(output);
+```
+
+### Browser (ESM)
+
+```js
+import init, { Preprocessor } from 'content-tag';
+
+await init();
+
+let { Preprocessor } = require('content-tag');
+let p = new Preprocessor();
+let output = p.process('<template>Hi</template>');
+
 console.log(output);
 ```
 

diff --git a/build.sh b/build.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+rm -rf pkg
+
+# wasm-pack knows to use wasm-opt, when present
+# NOTE: wasm-pack does not support multi-target building
+#       so we'll build twice, and then tweak package.json
+#       "exports" to point at the correct build depending on node or browser
+wasm-pack build --target web --out-dir pkg/browser --weak-refs --no-pack --release
+wasm-pack build --target nodejs --out-dir pkg/node --weak-refs --no-pack --release
+
+# Rename the node js file to cjs, because we emit type=module
+mv pkg/node/content_tag.js pkg/node/content_tag.cjs
+
+# generate the rest of the package for npm, since
+# we disabled package.json generation above with --no-pack.
+# this needs to be done because we're targeting
+# both browser and node, which wasm-packg doesn't natively support.
+node ./post-wasm-build.mjs
+
+# ---------
+cp LICENSE pkg/LICENSE
+cp README.md pkg/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+    <script type="module">
+      import init, { Preprocessor } from './pkg/browser/content_tag.js';
+
+      async function run() {
+        await init();
+
+        const p = new Preprocessor();
+        const output = p.process('<template>Hi</template>');
+
+        document.querySelector('#output').innerHTML = output;
+      }
+
+      run();
+    </script>
+  </head>
+  <body>
+    <pre id="output"></pre>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -5,15 +5,18 @@
     "url": "[email protected]:embroider-build/content-tag.git"
   },
   "scripts": {
+    "web": "npx html-pages . --no-cache",
     "test": "mocha"
   },
   "devDependencies": {
     "@release-it-plugins/lerna-changelog": "^6.0.0",
     "@release-it/bumper": "^5.1.0",
     "chai": "^4.3.7",
     "code-equality-assertions": "github:mansona/code-equality-assertions#add-chai-build",
+    "content-tag": "file:./pkg",
     "eslint": "^8.44.0",
     "mocha": "^10.2.0",
+    "toml": "^3.0.0",
     "release-it": "^16.2.1"
   },
   "publishConfig": {

diff --git a/post-wasm-build.mjs b/post-wasm-build.mjs
@@ -0,0 +1,37 @@
+// This post-wasm-build.js script is called from build.sh
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import toml from 'toml';
+
+let cargo = await fs.readFile('Cargo.toml', 'utf8');
+let config = toml.parse(cargo);
+
+
+const manifest = {
+  "name": config.package.name,
+  "description": config.package.description,
+  "version": config.package.version,
+  "license": config.package.license,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embroider-build/content-tag"
+  },
+  "files": [
+    "browser",
+    "node"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./browser/content_tag.js",
+      "require": "./node/content_tag.cjs",
+      "types": "./browser/content_tag.d.ts"
+    }
+  }
+};
+
+
+
+const content = JSON.stringify(manifest, null, 2);
+
+await fs.writeFile('pkg/package.json', content);
diff --git a/test/node-api-esm.mjs b/test/node-api-esm.mjs
@@ -0,0 +1,60 @@
+import { createRequire } from 'node:module';
+import chai from 'chai';
+import { codeEquality } from "code-equality-assertions/chai";
+
+chai.use(codeEquality)
+
+const { expect } = chai;
+
+const require = createRequire(import.meta.url);
+
+const { Preprocessor } = require('content-tag');
+const p = new Preprocessor();
+
+describe("Node ESM", function() {
+  it("works for a basic example", function() {
+    let output = p.process('<template>Hi</template>');
+
+    expect(output).to.equalCode(`import { template } from "@ember/template-compiler";
+    export default template("Hi", {
+        eval () {
+            return eval(arguments[0]);
+        }
+    });`);
+  });
+
+  it("Emits parse errors with anonymous file", function() {
+    expect(function() {
+      p.process(`const thing = "face";
+  <template>Hi`);
+    }).to.throw(`Parse Error at <anon>:2:15: 2:15`);
+  });
+
+  it("Emits parse errors with real file", function() {
+    expect(function() {
+      p.process(`const thing = "face";
+  <template>Hi`, "path/to/my/component.gjs");
+    }).to.throw(`Parse Error at path/to/my/component.gjs:2:15: 2:15`);
+  });
+
+  it("Offers source_code snippet on parse errors", function() {
+    let parseError;
+    try {
+      p.process(`class {`)
+    } catch (err) {
+      parseError = err;
+    }
+    expect(parseError).to.have.property("source_code").matches(/Expected ident.*class \{/s);
+  });
+
+  it("Offers source_code_color snippet on parse errors", function() {
+    let parseError;
+    try {
+      p.process(`class {`)
+    } catch (err) {
+      parseError = err;
+    }
+    // eslint-disable-next-line no-control-regex
+    expect(parseError).to.have.property("source_code_color").matches(/Expected ident.*[\u001b].*class \{/s);
+  });
+})
diff --git a/test/node-api.js b/test/node-api.js
@@ -1,4 +1,4 @@
-const { Preprocessor } = require("../pkg");
+const { Preprocessor } = require("content-tag");
 const chai = require("chai");
 const { codeEquality } = require("code-equality-assertions/chai");
 
@@ -217,10 +217,8 @@ describe("process", function () {
            }
        };`
     );
-
   });
 
-
   it("Emits parse errors with anonymous file", function () {
     expect(function () {
       p.process(`const thing = "face";