Add browser support via conditional exports

.github/workflows/ci.yml

@@ -34,13 +34,15 @@ jobs:
       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
     - uses: pnpm/action-setup@v2
       with:
         version: 8
+    - name: Install wasm-opt
+      run: cargo install wasm-opt
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
         cache: 'pnpm'
-    - run: pnpm install
+    - run: ./build.sh
     - run: pnpm test
+    - run: pnpm lint

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
         node-version: 20
         cache: 'pnpm'
         registry-url: https://registry.npmjs.org
-    - run: pnpm install
+    - run: ./build.sh
     - run: pnpm publish
       working-directory: pkg
       env:

CONTRIBUTING.md

@@ -16,11 +16,11 @@ Tests:
 
 `cargo test`:
 
-Build wasm package:
+Build the package:
 
 `pnpm build`
 
-which will output your wasm package in `./pkg`
+which will output your wasm package in `./pkg`, which is its own workspace, used for local testing as well as the publishable assets.
 
 ## Running against a local copy of SWC
 

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,34 @@ npm install content-tag
 
 ## Usage
 
-```js
+### 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 { Preprocessor } from 'content-tag';
+let p = new Preprocessor();
+let output = p.process('<template>Hi</template>');
+
 console.log(output);
 ```
 

build.sh

@@ -3,12 +3,14 @@
 # we need npm packages for the post-wasm phase
 pnpm install
 
-rm -rf pkg
+rm -rf pkg/node
+rm -rf pkg/standalone
 
 # 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

build/post-wasm-build.mjs

@@ -16,11 +16,14 @@ const manifest = {
     type: "git",
     url: "https://github.com/embroider-build/content-tag",
   },
-  files: ["node"],
+  files: ["standalone", "node"],
   type: "module",
   exports: {
     ".": {
-      types: "index.d.ts",
+      types: "./index.d.ts",
+      browser: {
+        import: "./standalone/standalone.js",
+      },
       default: "./node/content_tag.cjs",
     },
   },

package.json

@@ -5,8 +5,9 @@
     "url": "git@github.com:embroider-build/content-tag.git"
   },
   "scripts": {
-    "build": "./build.sh",
-    "test": "pnpm --filter '*' test"
+    "test": "pnpm --filter '*' test",
+    "lint": "pnpm --filter '*' lint",
+    "build": "./build.sh"
   },
   "devDependencies": {
     "@release-it-plugins/lerna-changelog": "^6.0.0",

pkg/README.md

@@ -12,10 +12,34 @@ npm install content-tag
 
 ## Usage
 
-```js
+### 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 { Preprocessor } from 'content-tag';
+let p = new Preprocessor();
+let output = p.process('<template>Hi</template>');
+
 console.log(output);
 ```
 

pkg/index.d.cts

@@ -0,0 +1,48 @@
+/*
+ * wasm-pack doesn't give us correct enough types.
+ */
+
+
+
+interface Parsed {
+  type: 'expression' | 'class-member';
+  tagName: 'template';
+  contents: string;
+  range: {
+    start: number;
+    end: number;
+  };
+  contentRange: {
+    start: number;
+    end: number;
+  };
+  startRange: {
+    end: number;
+    start: number;
+  };
+  endRange: {
+    start: number;
+    end: number;
+  };
+}
+
+class Preprocessor {
+  free(): void;
+/**
+*/
+  constructor();
+/**
+* @param {string} src
+* @param {string | undefined} filename
+* @returns {string}
+*/
+  process(src: string, filename?: string): string;
+/**
+* @param {string} src
+* @param {string | undefined} filename
+* @returns {any}
+*/
+  parse(src: string, filename?: string): Parsed;
+}
+
+module.exports = { Preprocessor };

pkg/package.json

@@ -7,14 +7,38 @@
     "type": "git",
     "url": "https://github.com/embroider-build/content-tag"
   },
+  "scripts": {
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:package": "publint",
+    "lint:published-types": "attw --pack --ignore-rules cjs-resolves-to-esm"
+  },
   "files": [
-    "node"
+    "index.d.ts",
+    "index.d.cts",
+    "standalone.js",
+    "standalone/*",
+    "node/*"
   ],
   "type": "module",
   "exports": {
     ".": {
-      "types": "index.d.ts",
-      "default": "./node/content_tag.cjs"
+      "browser": {
+        "types": "./index.d.ts",
+        "import": "./standalone.js"
+      },
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./node/content_tag.cjs"
+      },
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./node/content_tag.cjs"
+      }
     }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.13.2",
+    "concurrently": "^8.2.2",
+    "publint": "^0.2.6"
   }
-}
+}

pkg/standalone.js

@@ -0,0 +1,5 @@
+import init from "./standalone/content_tag.js";
+
+await init();
+
+export { Preprocessor } from "./standalone/content_tag.js";