Add visitor support to WASM build via napi-wasm (parcel-bundler#373)

Author: devongovett

.cargo/config.toml

@@ -8,3 +8,6 @@ linker = "arm-linux-gnueabihf-gcc"
 [target.aarch64-unknown-linux-musl]
 linker = "aarch64-linux-musl-gcc"
 rustflags = ["-C", "target-feature=-crt-static"]
+
+[target.wasm32-unknown-unknown]
+rustflags = ["-C", "link-arg=--export-table"]

.github/workflows/release.yml

@@ -179,15 +179,28 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 14
-      - name: Install wasm-pack
-        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+      - name: Install Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+          profile: minimal
+          override: true
+          target: wasm32-unknown-unknown
+      - name: Install wasm-opt
+        run: |
+          curl -L -O https://github.com/WebAssembly/binaryen/releases/download/version_111/binaryen-version_111-x86_64-linux.tar.gz
+          tar -xf binaryen-version_111-x86_64-linux.tar.gz
       - name: Build wasm
-        run: yarn wasm-browser:build-release
+        run: yarn wasm:build-release
+      - name: Optimize wasm
+        run: |
+          ./binaryen-version_111/bin/wasm-opt wasm/lightningcss_node.wasm -Oz -o wasm/lightningcss_node.opt.wasm
+          mv wasm/lightningcss_node.opt.wasm wasm/lightningcss_node.wasm
       - name: Upload artifacts
         uses: actions/upload-artifact@v2
         with:
           name: wasm
-          path: node/pkg
+          path: wasm/lightningcss_node.wasm
 
   release:
     runs-on: ubuntu-latest
@@ -207,6 +220,7 @@ jobs:
       - name: Build npm packages
         run: |
           node scripts/build-npm.js
+          cp artifacts/wasm/* wasm/.
           node scripts/build-wasm.js
       - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > ~/.npmrc
         env:
@@ -219,6 +233,10 @@ jobs:
             npm publish;
             cd ../..;
           done
+          cd wasm
+          echo "Publishing lightningcss-wasm...";
+          npm publish
+          cd ..
           cd cli
           echo "Publishing lightningcss-cli...";
           npm publish

Cargo.lock

@@ -16,20 +16,13 @@ lightningcss = { path = "../", features = ["nodejs", "serde", "visitor"] }
 parcel_sourcemap = { version = "2.1.1", features = ["json"] }
 serde-detach = "*"
 smallvec = { version = "1.7.0", features = ["union"] }
-
-[target.'cfg(target_os = "macos")'.dependencies]
-jemallocator = { version = "0.3.2", features = ["disable_initial_exec_tls"] }
-
-[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 napi = {version = "2.10.0", default-features = false, features = ["napi4", "napi5", "compat-mode", "serde-json"]}
 napi-derive = "2"
 crossbeam-channel = "0.5.6"
 rayon = "1.5.1"
 
-[target.'cfg(target_arch = "wasm32")'.dependencies]
-js-sys = "0.3"
-serde-wasm-bindgen = "0.3.0"
-wasm-bindgen = "0.2"
+[target.'cfg(target_os = "macos")'.dependencies]
+jemallocator = { version = "0.3.2", features = ["disable_initial_exec_tls"] }
 
 [target.'cfg(not(target_arch = "wasm32"))'.build-dependencies]
 napi-build = "1"

node/Cargo.toml

@@ -18,54 +18,13 @@ use std::path::{Path, PathBuf};
 use std::str::FromStr;
 use std::sync::{Arc, Mutex, RwLock};
 
-#[cfg(not(target_arch = "wasm32"))]
 use transformer::JsVisitor;
 
 #[cfg(not(target_arch = "wasm32"))]
 mod threadsafe_function;
-#[cfg(not(target_arch = "wasm32"))]
 mod transformer;
 
-// ---------------------------------------------
-
-#[cfg(target_arch = "wasm32")]
-use serde_wasm_bindgen::{from_value, Serializer};
-#[cfg(target_arch = "wasm32")]
-use wasm_bindgen::prelude::*;
-
-#[cfg(target_arch = "wasm32")]
-struct JsVisitor;
-
-#[cfg(target_arch = "wasm32")]
-impl<'i> lightningcss::visitor::Visitor<'i> for JsVisitor {
-  const TYPES: lightningcss::visitor::VisitTypes = lightningcss::visitor::VisitTypes::empty();
-}
-
-#[cfg(target_arch = "wasm32")]
-#[wasm_bindgen]
-pub fn transform(config_val: JsValue) -> Result<JsValue, JsValue> {
-  let config: Config = from_value(config_val).map_err(JsValue::from)?;
-  let code = unsafe { std::str::from_utf8_unchecked(&config.code) };
-  let res = compile(code, &config, &mut None)?;
-  let serializer = Serializer::new().serialize_maps_as_objects(true);
-  res.serialize(&serializer).map_err(JsValue::from)
-}
-
-#[cfg(target_arch = "wasm32")]
-#[wasm_bindgen(js_name = "transformStyleAttribute")]
-pub fn transform_style_attribute(config_val: JsValue) -> Result<JsValue, JsValue> {
-  let config: AttrConfig = from_value(config_val).map_err(JsValue::from)?;
-  let code = unsafe { std::str::from_utf8_unchecked(&config.code) };
-  let res = compile_attr(code, &config, &mut None)?;
-  let serializer = Serializer::new().serialize_maps_as_objects(true);
-  res.serialize(&serializer).map_err(JsValue::from)
-}
-
-// ---------------------------------------------
-
-#[cfg(not(target_arch = "wasm32"))]
 use napi::{CallContext, Env, JsObject, JsUnknown};
-#[cfg(not(target_arch = "wasm32"))]
 use napi_derive::{js_function, module_exports};
 
 #[derive(Serialize)]
@@ -81,7 +40,6 @@ struct TransformResult<'i> {
   warnings: Vec<Warning<'i>>,
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 impl<'i> TransformResult<'i> {
   fn into_js(self, env: Env) -> napi::Result<JsUnknown> {
     // Manually construct buffers so we avoid a copy and work around
@@ -106,7 +64,6 @@ impl<'i> TransformResult<'i> {
   }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 #[js_function(1)]
 fn transform(ctx: CallContext) -> napi::Result<JsUnknown> {
   use transformer::JsVisitor;
@@ -134,7 +91,6 @@ fn transform(ctx: CallContext) -> napi::Result<JsUnknown> {
   }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 #[js_function(1)]
 fn transform_style_attribute(ctx: CallContext) -> napi::Result<JsUnknown> {
   use transformer::JsVisitor;
@@ -370,7 +326,6 @@ mod bundle {
     handle_error(tx, read_on_js_thread(ctx))
   }
 
-  #[cfg(not(target_arch = "wasm32"))]
   #[js_function(1)]
   pub fn bundle_async(ctx: CallContext) -> napi::Result<JsObject> {
     use transformer::JsVisitor;
@@ -488,17 +443,53 @@ mod bundle {
   }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
-#[module_exports]
+#[cfg_attr(not(target_arch = "wasm32"), module_exports)]
 fn init(mut exports: JsObject) -> napi::Result<()> {
   exports.create_named_method("transform", transform)?;
   exports.create_named_method("transformStyleAttribute", transform_style_attribute)?;
-  exports.create_named_method("bundle", bundle::bundle)?;
-  exports.create_named_method("bundleAsync", bundle::bundle_async)?;
+
+  #[cfg(not(target_arch = "wasm32"))]
+  {
+    exports.create_named_method("bundle", bundle::bundle)?;
+    exports.create_named_method("bundleAsync", bundle::bundle_async)?;
+  }
 
   Ok(())
 }
 
+#[cfg(target_arch = "wasm32")]
+#[no_mangle]
+pub unsafe fn napi_register_wasm_v1(raw_env: napi::sys::napi_env, raw_exports: napi::sys::napi_value) {
+  use napi::{Env, JsObject, NapiValue};
+
+  let env = Env::from_raw(raw_env);
+  let exports = JsObject::from_raw_unchecked(raw_env, raw_exports);
+  init(exports);
+}
+
+#[cfg(target_arch = "wasm32")]
+#[no_mangle]
+pub extern "C" fn napi_wasm_malloc(size: usize) -> *mut u8 {
+  use std::alloc::{alloc, Layout};
+  use std::mem;
+
+  let align = mem::align_of::<usize>();
+  if let Ok(layout) = Layout::from_size_align(size, align) {
+    unsafe {
+      if layout.size() > 0 {
+        let ptr = alloc(layout);
+        if !ptr.is_null() {
+          return ptr;
+        }
+      } else {
+        return align as *mut u8;
+      }
+    }
+  }
+
+  std::process::abort();
+}
+
 // ---------------------------------------------
 
 #[derive(Debug, Deserialize)]
@@ -705,7 +696,6 @@ fn compile<'i>(
   })
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 fn compile_bundle<'i, 'o, P: SourceProvider, F: FnOnce(&mut StyleSheet<'i, 'o>) -> napi::Result<()>>(
   fs: &'i P,
   config: &'o BundleConfig,
@@ -827,7 +817,6 @@ struct AttrResult<'i> {
   warnings: Vec<Warning<'i>>,
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 impl<'i> AttrResult<'i> {
   fn into_js(self, ctx: CallContext) -> napi::Result<JsUnknown> {
     // Manually construct buffers so we avoid a copy and work around
@@ -906,7 +895,6 @@ enum CompileError<'i, E: std::error::Error> {
   SourceMapError(parcel_sourcemap::SourceMapError),
   BundleError(Error<BundleErrorKind<'i, E>>),
   PatternError(PatternParseError),
-  #[cfg(not(target_arch = "wasm32"))]
   JsError(napi::Error),
 }
 
@@ -919,14 +907,12 @@ impl<'i, E: std::error::Error> std::fmt::Display for CompileError<'i, E> {
       CompileError::BundleError(err) => err.kind.fmt(f),
       CompileError::PatternError(err) => err.fmt(f),
       CompileError::SourceMapError(err) => write!(f, "{}", err.to_string()), // TODO: switch to `fmt::Display` once parcel_sourcemap supports this
-      #[cfg(not(target_arch = "wasm32"))]
       CompileError::JsError(err) => std::fmt::Debug::fmt(&err, f),
     }
   }
 }
 
 impl<'i, E: std::error::Error> CompileError<'i, E> {
-  #[cfg(not(target_arch = "wasm32"))]
   fn throw(self, env: Env, code: Option<&str>) -> napi::Result<JsUnknown> {
     let reason = self.to_string();
     let data = match &self {
@@ -999,7 +985,6 @@ impl<'i, E: std::error::Error> From<Error<BundleErrorKind<'i, E>>> for CompileEr
   }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
 impl<'i, E: std::error::Error> From<CompileError<'i, E>> for napi::Error {
   fn from(e: CompileError<'i, E>) -> napi::Error {
     match e {
@@ -1011,17 +996,6 @@ impl<'i, E: std::error::Error> From<CompileError<'i, E>> for napi::Error {
   }
 }
 
-#[cfg(target_arch = "wasm32")]
-impl<'i, E: std::error::Error> From<CompileError<'i, E>> for wasm_bindgen::JsValue {
-  fn from(e: CompileError<'i, E>) -> wasm_bindgen::JsValue {
-    match e {
-      CompileError::SourceMapError(e) => js_sys::Error::new(&e.to_string()).into(),
-      CompileError::PatternError(e) => js_sys::Error::new(&e.to_string()).into(),
-      _ => js_sys::Error::new(&e.to_string()).into(),
-    }
-  }
-}
-
 #[derive(Serialize)]
 struct Warning<'i> {
   message: String,

node/src/lib.rs

@@ -41,15 +41,21 @@
     "detect-libc": "^1.0.3"
   },
   "devDependencies": {
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/lint": "^6.1.0",
+    "@codemirror/theme-one-dark": "^6.1.0",
     "@mdn/browser-compat-data": "^5.1.6",
     "@napi-rs/cli": "^2.6.2",
     "autoprefixer": "^10.4.8",
     "caniuse-lite": "^1.0.30001373",
+    "codemirror": "^6.0.1",
     "cssnano": "^5.0.8",
     "esbuild": "^0.13.10",
     "flowgen": "^1.21.0",
     "jest-diff": "^27.4.2",
     "json-schema-to-typescript": "^11.0.2",
+    "napi-wasm": "^1.0.1",
     "node-fetch": "^3.1.0",
     "parcel": "^2.7.0",
     "patch-package": "^6.5.0",
@@ -66,13 +72,11 @@
     "build": "node scripts/build.js && node scripts/build-flow.js",
     "build-release": "node scripts/build.js --release && node scripts/build-flow.js",
     "prepublishOnly": "node scripts/build-flow.js",
-    "wasm:build": "wasm-pack build node --target nodejs",
-    "wasm:build-release": "wasm-pack build node --target nodejs --release",
-    "wasm-browser:build": "wasm-pack build node --target web",
-    "wasm-browser:build-release": "wasm-pack build node --target web --release",
+    "wasm:build": "cargo build --target wasm32-unknown-unknown -p lightningcss_node && cp target/wasm32-unknown-unknown/debug/lightningcss_node.wasm wasm/. && node scripts/build-wasm.js",
+    "wasm:build-release": "cargo build --target wasm32-unknown-unknown -p lightningcss_node --release && cp target/wasm32-unknown-unknown/release/lightningcss_node.wasm wasm/. && node scripts/build-wasm.js",
     "website:start": "parcel website/index.html website/playground/index.html",
-    "website:build": "yarn wasm-browser:build-release && parcel build website/index.html website/playground/index.html",
+    "website:build": "yarn wasm:build-release && parcel build website/index.html website/playground/index.html",
     "build-ast": "cargo run --example schema --features jsonschema && node scripts/build-ast.js",
     "test": "uvu node/test"
   }
-}
+}