Enable browser / cross-platform support

.github/workflows/ci.yml

@@ -32,12 +32,15 @@ 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: ./build.sh
+
     - run: npm test

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
       run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
     # remove scope or update it once we decide exactly where we want to deploy this thing
-    - run: wasm-pack build --target nodejs
+    - run: npm run build
     - uses: actions/setup-node@v3
       with:
         node-version: 20

.gitignore

@@ -1,2 +1,3 @@
+pkg/
 /target
-/node_modules
+/node_modules

CONTRIBUTING.md

@@ -18,7 +18,7 @@ Tests:
 
 Build wasm package:
 
-`wasm-pack build --target=nodejs`
+`npm run build`
 
 which will output your wasm package in `./pkg`
 
@@ -36,4 +36,4 @@ and replace:
 
 ```
 $1 = { path = "../swc/crates/$1"
-```
+```

Cargo.toml

@@ -9,6 +9,11 @@ edition = "2021"
 [lib]
 crate-type = ["cdylib", "rlib"]
 
+[profile.release]
+lto = true
+opt-level = 'z'
+codegen-units = 1
+
 [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" }

README.md

@@ -12,10 +12,33 @@ 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)
+
+```js
+import { Preprocessor } from 'content-tag';
+let p = new Preprocessor();
+let output = p.process('<template>Hi</template>');
+
+console.log(output);
+```
+
+### Browser (ESM)
+
+```js
+import { createPreprocessor } from 'content-tag/standalone';
+let p = await createPreprocessor();
+let output = p.process('<template>Hi</template>');
+
 console.log(output);
 ```
 

build.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# we need npm packages for the post-wasm phase
+npm install
+
+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/standalone --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 ./build/post-wasm-build.mjs
+
+# ---------
+cp LICENSE pkg/LICENSE
+cp README.md pkg/README.md

build/post-wasm-build.mjs

@@ -0,0 +1,47 @@
+// This post-wasm-build.js script is called from build.sh
+import fs from "node:fs/promises";
+import path from "node:path";
+import url from "node:url";
+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: ["standalone", "node"],
+  type: "module",
+  exports: {
+    ".": {
+      types: "./node/content_tag.d.ts",
+      default: "./node/content_tag.cjs",
+    },
+    "./standalone": {
+      types: "./standalone/standalone.d.ts",
+      import: "./standalone/standalone.js",
+    },
+  },
+};
+
+const content = JSON.stringify(manifest, null, 2);
+
+const here = url.fileURLToPath(new URL(".", import.meta.url));
+const root = path.join(here, "..");
+const output = path.join(root, "pkg");
+
+await fs.writeFile(path.join(output, "package.json"), content);
+await fs.copyFile(
+  path.join(here, "src/standalone.js"),
+  path.join(output, "standalone/standalone.js")
+);
+await fs.copyFile(
+  path.join(here, "src/standalone.d.ts"),
+  path.join(output, "standalone/standalone.d.ts")
+);

build/src/standalone.d.ts

@@ -0,0 +1,5 @@
+import type { Preprocessor } from './content_tag';
+
+export * from "./content_tag";
+
+export function createPreprocessor(): Promise<Preprocessor>;

build/src/standalone.js

@@ -0,0 +1,12 @@
+export * from "./content_tag.js";
+
+import init, { Preprocessor } from "./content_tag.js";
+
+export async function createPreprocessor() {
+  // This no-ops if it's already ran
+  await init();
+
+  let processor = new Preprocessor();
+
+  return processor;
+}

index.html

@@ -0,0 +1,25 @@
+<html>
+
+<!-- View this file with `npm run web` -->
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+  <script type="module">
+    import {createPreprocessor} from './pkg/standalone/standalone.js';
+
+    async function run() {
+      const p = await createPreprocessor();
+      const output = p.process('<template>Hi from createPreprocessor</template>');
+
+      document.querySelector('#output').innerHTML = output;
+    }
+
+    run();
+  </script>
+</head>
+
+<body>
+  <pre id="output"></pre>
+</body>
+
+</html>

package.json

@@ -5,15 +5,19 @@
     "url": "git@github.com:embroider-build/content-tag.git"
   },
   "scripts": {
+    "web": "npx html-pages . --no-cache",
+    "build": "./build.sh",
     "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": {

test/node-api-esm.mjs

@@ -0,0 +1,65 @@
+import chai from "chai";
+import { codeEquality } from "code-equality-assertions/chai";
+
+chai.use(codeEquality);
+
+const { expect } = chai;
+
+import { Preprocessor } from "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);
+  });
+});

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";