chore: Rework WASM (#301)

* chore: Rework WASM

* chore: update

* chore: update everything

* chore: update everything

* chore: update

* chore: update

* chore: update

* chore: update

Author: Stranger6667

.github/dependabot.yml

@@ -21,6 +21,6 @@ updates:
     schedule:
       interval: "daily"
   - package-ecosystem: "cargo"
-    directory: "/bindings/wasm"
+    directory: "/bindings/javascript"
     schedule:
       interval: "daily"

.github/workflows/build.yml

@@ -87,9 +87,6 @@ jobs:
       - run: cargo fmt --all -- --check
         working-directory: ./bindings/ruby
 
-      - run: cargo fmt --all -- --check
-        working-directory: ./bindings/wasm
-
   clippy:
     name: Clippy
     runs-on: ubuntu-22.04
@@ -107,7 +104,6 @@ jobs:
             bindings/javascript
             bindings/python
             bindings/ruby
-            bindings/wasm
             bindings/c
             bindings/profiler
 
@@ -131,10 +127,6 @@ jobs:
         run: cargo clippy -- -D warnings
         working-directory: ./bindings/ruby
 
-      - name: WASM
-        run: cargo clippy -- -D warnings
-        working-directory: ./bindings/wasm
-
       - name: C
         run: cargo clippy -- -D warnings
         working-directory: ./bindings/c
@@ -403,41 +395,23 @@ jobs:
         working-directory: ./bindings/ruby
 
   test-wasm:
-    name: Tests for WASM crate
+    name: WASM module tests
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
 
-      - uses: dtolnay/rust-toolchain@stable
-
-      - uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: bindings/wasm
-          cache-all-crates: "true"
-
-      - name: Install wasm-pack
-        uses: actions-rs/cargo@v1
+      - name: Setup node
+        uses: actions/setup-node@v4
         with:
-          command: install
-          args: wasm-pack
-
-      - name: Run tests
-        run: wasm-pack test --node --release
-        working-directory: ./bindings/wasm
-
-  test-wasm-typescript:
-    name: TypeScript tests for WASM crate
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
+          node-version: "20"
+          cache: yarn
+          cache-dependency-path: bindings/javascript/yarn.lock
 
       - uses: dtolnay/rust-toolchain@stable
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: |
-            css-inline
-            bindings/wasm
+          workspaces: bindings/javascript
           cache-all-crates: "true"
 
       - name: Install wasm-pack
@@ -446,20 +420,20 @@ jobs:
           command: install
           args: wasm-pack
 
-      - name: Build package
-        run: wasm-pack build -t nodejs
-        working-directory: ./bindings/wasm
-
       - name: Install dependencies
-        run: npm install
-        working-directory: ./bindings/wasm
+        run: yarn install
+        working-directory: ./bindings/javascript
 
-      - name: Run tests
-        run: npm run test
-        working-directory: ./bindings/wasm
+      - name: Build Wasm
+        run: yarn build:wasm
+        working-directory: ./bindings/javascript
+
+      - name: Test Wasm
+        run: yarn test:wasm
+        working-directory: ./bindings/javascript
 
   test-c:
-    name: Tests for C crate
+    name: C bindings tests
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4

.github/workflows/javascript-release.yml

@@ -148,11 +148,52 @@ jobs:
           path: bindings/javascript/${{ env.APP_NAME }}.*.node
           if-no-files-found: error
 
+  artifacts-wasm:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: yarn
+          cache-dependency-path: bindings/javascript/yarn.lock
+
+      - uses: dtolnay/rust-toolchain@stable
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: bindings/javascript
+          cache-all-crates: "true"
+
+      - name: Install wasm-pack
+        uses: actions-rs/cargo@v1
+        with:
+          command: install
+          args: wasm-pack
+
+      - name: Install dependencies
+        run: yarn install
+        working-directory: ./bindings/javascript
+
+      - name: Build Wasm
+        run: yarn build:wasm
+        working-directory: ./bindings/javascript
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: bindings-wasm32
+          path: bindings/javascript/wasm/dist/*.wasm
+          if-no-files-found: error
+
   release:
     name: Release
     runs-on: ubuntu-22.04
     needs:
       - artifacts
+      - artifacts-wasm
     if: "startsWith(github.ref, 'refs/tags/')"
     steps:
       - uses: actions/checkout@v4
@@ -181,6 +222,9 @@ jobs:
         with:
           path: artifacts
 
+      - name: Move Wasm artifacts
+        run: mv -f ./artifacts/wasm32/*.wasm ./wasm
+
       - name: Move Node.js artifacts
         run: yarn artifacts
         working-directory: bindings/javascript
@@ -189,6 +233,8 @@ jobs:
         run: |
           echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" >> ~/.npmrc
           npm publish --access public --provenance
+          cd wasm
+          npm publish --access public
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.pre-commit-config.yaml

@@ -17,7 +17,7 @@ repos:
     rev: v3.1.0
     hooks:
       - id: prettier
-        exclude: index.d.ts|index.js|README.md|example.html
+        exclude: index.d.ts|index.js|README.md|example.html|index.min.js|index.mjs|index_bg.wasm|js-binding.*
 
   - repo: https://github.com/jorisroovers/gitlint
     rev: v0.19.1

README.md

@@ -40,7 +40,7 @@ into:
 - Resolves external stylesheets (including local files)
 - Works on Linux, Windows, and macOS
 - Supports HTML5 & CSS3
-- Bindings for [Python](https://github.com/Stranger6667/css-inline/tree/master/bindings/python), [Ruby](https://github.com/Stranger6667/css-inline/tree/master/bindings/ruby), [WebAssembly](https://github.com/Stranger6667/css-inline/tree/master/bindings/wasm) and [C](https://github.com/Stranger6667/css-inline/tree/master/bindings/c)
+- Bindings for [Python](https://github.com/Stranger6667/css-inline/tree/master/bindings/python), [Ruby](https://github.com/Stranger6667/css-inline/tree/master/bindings/ruby), [JavaScript](https://github.com/Stranger6667/css-inline/tree/master/bindings/javascript), [C](https://github.com/Stranger6667/css-inline/tree/master/bindings/c), and [WebAssembly](https://github.com/Stranger6667/css-inline/tree/master/bindings/javascript) module to run in browsers.
 
 ## Installation
 

bindings/javascript/Cargo.toml

@@ -1,15 +1,30 @@
 [package]
-edition = "2021"
 name = "css-inline-js"
 version = "0.11.2"
+authors = ["Dmitry Dygalo <dmitry@dygalo.dev>"]
+edition = "2021"
+readme = "README.md"
+description = "High-performance library for inlining CSS into HTML 'style' attributes"
+repository = "https://github.com/Stranger6667/css-inline"
+keywords = ["css", "html", "email", "stylesheet", "inlining"]
+categories = ["web-programming"]
+license = "MIT"
+rust-version = "1.65"
+include = ["src/*.rs", "LICENSE", "README.md", "CHANGELOG.md"]
 
 [lib]
 crate-type = ["cdylib"]
 
-[dependencies]
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 napi = { version = "2.14.1", default-features = false, features = ["napi4"] }
 napi-derive = "2.14.4"
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen = "0.2.87"
+serde-wasm-bindgen = "0.6"
+getrandom = { version = "0.2", features = ["js"] }
+serde = { version = "1", features = ["derive"], default-features = false }
+
 [dependencies.css-inline]
 path = "../../css-inline"
 version = "*"
@@ -21,3 +36,5 @@ napi-build = "2.1.0"
 
 [profile.release]
 lto = true
+opt-level = "z"
+codegen-units = 1

bindings/javascript/README.md

@@ -1,7 +1,7 @@
 # css-inline
 
 [<img alt="build status" src="https://img.shields.io/github/actions/workflow/status/Stranger6667/css-inline/build.yml?style=flat-square&labelColor=555555&logo=github" height="20">](https://github.com/Stranger6667/css-inline/actions/workflows/build.yml)
-[<img alt="npm" src="https://img.shields.io/npm/v/css-inline?style=flat-square" height="20">](https://www.npmjs.com/package/css-inline)
+[<img alt="npm" src="https://img.shields.io/npm/v/@css-inline/css-inline.svg?style=flat-square" height="20">](https://www.npmjs.com/package/@css-inline/css-inline)
 [<img alt="codecov.io" src="https://img.shields.io/codecov/c/gh/Stranger6667/css-inline?logo=codecov&style=flat-square&token=tOzvV4kDY0" height="20">](https://app.codecov.io/github/Stranger6667/css-inline)
 [<img alt="gitter" src="https://img.shields.io/gitter/room/Stranger6667/css-inline?style=flat-square" height="20">](https://gitter.im/Stranger6667/css-inline)
 
@@ -72,13 +72,13 @@ var inlined = inline(
 
 ### Configuration
 
-- `inline_style_tags`. Specifies whether to inline CSS from "style" tags. Default: `true`
-- `keep_style_tags`. Specifies whether to keep "style" tags after inlining. Default: `false`
-- `keep_link_tags`. Specifies whether to keep "link" tags after inlining. Default: `false`
-- `base_url`. The base URL used to resolve relative URLs. If you'd like to load stylesheets from your filesystem, use the `file://` scheme. Default: `null`
-- `load_remote_stylesheets`. Specifies whether remote stylesheets should be loaded. Default: `true`
-- `extra_css`. Extra CSS to be inlined. Default: `null`
-- `preallocate_node_capacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
+- `inlineStyleTags`. Specifies whether to inline CSS from "style" tags. Default: `true`
+- `keepStyleTags`. Specifies whether to keep "style" tags after inlining. Default: `false`
+- `keepLinkTags`. Specifies whether to keep "link" tags after inlining. Default: `false`
+- `baseUrl`. The base URL used to resolve relative URLs. If you'd like to load stylesheets from your filesystem, use the `file://` scheme. Default: `null`
+- `loadRemoteStylesheets`. Specifies whether remote stylesheets should be loaded. Default: `true`
+- `extraCss`. Extra CSS to be inlined. Default: `null`
+- `preallocateNodeCapacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it:
 
@@ -105,6 +105,29 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+## WebAssembly
+
+`css-inline` also ships a WebAssembly module built with `wasm-bindgen` to run in browsers.
+
+```html
+<script src="https://unpkg.com/@css-inline/css-inline-wasm"></script>
+<script>
+    // Initialize the WASM module first
+    cssInline.initWasm(fetch('https://unpkg.com/@css-inline/css-inline-wasm/index_bg.wasm'));
+
+    const inlinedHtml = cssInline.inline(`<html>
+  <head>
+    <style>h1 { color:blue; }</style>
+  </head>
+  <body>
+    <h1>Big Text</h1>
+  </body>
+</html>`);
+
+    document.getElementById('output').src = inlinedHtml
+</script>
+```
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://opensource.org/licenses/MIT).

…dings/javascript/__test__/index.spec.mjs …ndings/javascript/__test__/index.spec.tsbindings/javascript/__test__/index.spec.mjs renamed to bindings/javascript/__test__/index.spec.ts bindings/javascript/__test__/index.spec.mjs renamed to bindings/javascript/__test__/index.spec.ts

@@ -0,0 +1,52 @@
+import { promises as fs } from "fs";
+import { join } from "path";
+
+import test from "ava";
+
+import { inline, initWasm } from "../wasm";
+
+test.before(async () => {
+  await initWasm(fs.readFile(join(__dirname, "../wasm/index_bg.wasm")));
+});
+
+test("default inlining", (t) => {
+  t.is(
+    inline(
+      "<html><head><style>h1 { color:red; }</style></head><body><h1>Test</h1></body></html>",
+    ),
+    '<html><head></head><body><h1 style="color: red;">Test</h1></body></html>',
+  );
+});
+
+test("keep style tag", (t) => {
+  t.is(
+    inline(
+      "<html><head><style>h1 { color:red; }</style></head><body><h1>Test</h1></body></html>",
+      { keepStyleTags: true },
+    ),
+    '<html><head><style>h1 { color:red; }</style></head><body><h1 style="color: red;">Test</h1></body></html>',
+  );
+});
+
+test("valid baseURL", (t) => {
+  t.is(
+    inline(
+      "<html><head><style>h1 { color:red; }</style></head><body><h1>Test</h1></body></html>",
+      { baseUrl: "http://127.0.0.1" },
+    ),
+    '<html><head></head><body><h1 style="color: red;">Test</h1></body></html>',
+  );
+});
+
+test("invalid baseURL", (t) => {
+  const error = t.throws(
+    () => {
+      inline(
+        "<html><head><style>h1 { color:red; }</style></head><body><h1>Test</h1></body></html>",
+        { baseUrl: "invalid" },
+      );
+    },
+    { any: true },
+  );
+  t.is(error, "relative URL without a base");
+});

bindings/javascript/__test__/wasm.spec.ts

@@ -0,0 +1,28 @@
+// @ts-check
+const { buildSync } = require("esbuild");
+
+/** @type {import('esbuild').BuildOptions} */
+const commonOptions = {
+  bundle: true,
+  logLevel: "error",
+  entryPoints: ["wasm-binding.ts"],
+  define: { "import.meta.url": "undefined" },
+};
+
+buildSync({
+  ...commonOptions,
+  format: "cjs",
+  outfile: "wasm/index.js",
+});
+buildSync({
+  ...commonOptions,
+  format: "esm",
+  outfile: "wasm/index.mjs",
+});
+buildSync({
+  ...commonOptions,
+  format: "iife",
+  minify: true,
+  globalName: "cssInline",
+  outfile: "wasm/index.min.js",
+});