refactor(napi/playground): use napi-rs wasm for playground (#9803)

playground side PR: oxc-project/playground#71

I went ahead testing out this. Let me know if this is not the plan.

I think the benefit is that this allows rust-side playground code to
reuse some code from other napi crates, for example, `oxc_napi` and
`oxc_parser_napi`. For now, I started as mostly copying paste it and
replacing `#[wasm_bindgen]` with `#[napi]`, but I also used `oxc_napi`
for `OxcError` which replaced diagnostic serialization code from
playground.

---------

Co-authored-by: Boshen <[email protected]>

Author: hi-ogawa

.github/workflows/ci.yml

@@ -111,37 +111,12 @@ jobs:
       - run: pnpm napi build --target wasm32-wasip1-threads --manifest-path ./napi/parser/Cargo.toml
       - run: pnpm napi build --target wasm32-wasip1-threads --manifest-path ./napi/transform/Cargo.toml
       - run: pnpm napi build --target wasm32-wasip1-threads --manifest-path ./napi/minify/Cargo.toml
+      - run: pnpm napi build --target wasm32-wasip1-threads --manifest-path ./napi/playground/Cargo.toml
       # Fix `index.d.ts`
       - run: node napi/parser/scripts/fix-wasm-dts.mjs
       - run: cargo test --target wasm32-wasip1-threads ${TEST_FLAGS}
       - run: git diff --exit-code # Must commit everything
 
-  test-wasm32-unknown-unknown:
-    name: Check wasm32-unknown-unknown
-    runs-on: ubuntu-latest
-    steps:
-      - uses: taiki-e/checkout-action@b13d20b7cda4e2f325ef19895128f7ff735c0b3d # v1.3.1
-
-      - uses: oxc-project/setup-rust@cd82e1efec7fef815e2c23d296756f31c7cdc03d # v1.0.0
-        with:
-          cache-key: wasm
-          save-cache: ${{ github.ref_name == 'main' }}
-          tools: wasm-pack,just
-      - name: Check
-        run: |
-          rustup target add wasm32-unknown-unknown
-          cargo check -p oxc_wasm --target wasm32-unknown-unknown
-      - uses: ./.github/actions/pnpm
-
-      - run: just build-wasm debug
-      - working-directory: npm/oxc-wasm
-        run: pnpm run check
-
-      - working-directory: wasm/parser
-        run: pnpm run build
-      - working-directory: npm/parser-wasm
-        run: pnpm run check
-
   typos:
     name: Spell Check
     runs-on: ubuntu-latest
@@ -319,6 +294,7 @@ jobs:
         if: steps.filter.outputs.src == 'true'
       - if: steps.filter.outputs.src == 'true'
         run: |
+          rustup target add wasm32-wasip1-threads
           pnpm run build
           pnpm run test
           pnpm --filter e2e run test

Cargo.lock

@@ -17,13 +17,13 @@
     "**/CHANGELOG.md",
     "pnpm-workspace.yaml",
     "pnpm-lock.yaml",
-    "napi/{transform,minify}/index.js",
-    "napi/{parser,transform,minify}/index.d.ts",
-    "napi/{parser,transform,minify}/*.wasi-browser.js",
-    "napi/{parser,transform,minify}/*.wasi.cjs",
-    "napi/{parser,transform,minify}/wasi-worker-browser.mjs",
-    "napi/{parser,transform,minify}/wasi-worker.mjs",
-    "napi/{parser,transform,minify}/browser.js",
+    "napi/{transform,minify,playground}/index.js",
+    "napi/{parser,transform,minify,playground}/index.d.ts",
+    "napi/{parser,transform,minify,playground}/*.wasi-browser.js",
+    "napi/{parser,transform,minify,playground}/*.wasi.cjs",
+    "napi/{parser,transform,minify,playground}/wasi-worker-browser.mjs",
+    "napi/{parser,transform,minify,playground}/wasi-worker.mjs",
+    "napi/{parser,transform,minify,playground}/browser.js",
     "napi/parser/bindings.js",
     "npm/*/package.json",
     "npm/oxlint/configuration_schema.json",

dprint.json

@@ -154,14 +154,11 @@ test-estree *args='':
 install-wasm:
   cargo binstall wasm-pack
 
-watch-wasm:
-  just watch 'just build-wasm dev'
-
-build-wasm mode="release":
-  wasm-pack build crates/oxc_wasm --no-pack --target web --scope oxc --out-dir ../../npm/oxc-wasm --{{mode}}
-  cp crates/oxc_wasm/package.json npm/oxc-wasm/package.json
-  rm npm/oxc-wasm/.gitignore
-  node ./crates/oxc_wasm/update-bindings.mjs
+watch-playground:
+  just watch 'pnpm --filter oxc-playground dev'
+
+build-playground mode="release":
+  pnpm --filter oxc-playground build
 
 # Generate the JavaScript global variables. See `tasks/javascript_globals`
 javascript-globals:

justfile

@@ -0,0 +1,40 @@
+[package]
+name = "oxc_playground_napi"
+version = "0.0.1"
+authors.workspace = true
+categories.workspace = true
+edition.workspace = true
+homepage.workspace = true
+include = ["/src", "build.rs"]
+keywords.workspace = true
+license.workspace = true
+publish = false
+repository.workspace = true
+rust-version.workspace = true
+description.workspace = true
+
+[lints]
+workspace = true
+
+[lib]
+crate-type = ["cdylib", "lib"]
+test = false
+doctest = false
+
+[dependencies]
+oxc = { workspace = true, features = ["ast_visit", "codegen", "minifier", "semantic", "serialize", "transformer", "isolated_declarations"] }
+oxc_index = { workspace = true }
+oxc_linter = { workspace = true }
+oxc_napi = { workspace = true }
+oxc_prettier = { workspace = true }
+
+napi = { workspace = true }
+napi-derive = { workspace = true }
+serde = { workspace = true }
+serde_json = { workspace = true }
+
+[package.metadata.cargo-shear]
+ignored = ["napi"]
+
+[build-dependencies]
+napi-build = { workspace = true }

napi/playground/Cargo.toml

@@ -0,0 +1 @@
+export * from '@oxc-playground/binding-wasm32-wasi'

napi/playground/browser.js

@@ -0,0 +1,3 @@
+fn main() {
+    napi_build::setup();
+}

napi/playground/build.rs

@@ -0,0 +1,127 @@
+/* auto-generated by NAPI-RS */
+/* eslint-disable */
+export declare class Oxc {
+  astJson: string
+  ir: string
+  controlFlowGraph: string
+  symbolsJson: string
+  scopeText: string
+  codegenText: string
+  codegenSourcemapText?: string
+  formattedText: string
+  prettierFormattedText: string
+  prettierIrText: string
+  constructor()
+  getDiagnostics2(): Array<OxcError>
+  getDiagnostics(): Array<OxcDiagnostic>
+  getComments(): Array<Comment>
+  /**
+   * # Errors
+   * Serde serialization error
+   */
+  run(sourceText: string, options: OxcOptions): void
+}
+
+export interface Comment {
+  type: CommentType
+  value: string
+  start: number
+  end: number
+}
+
+export declare const enum CommentType {
+  Line = 0,
+  Block = 1
+}
+
+export interface ErrorLabel {
+  message?: string
+  start: number
+  end: number
+}
+
+export interface OxcCodegenOptions {
+  indentation?: number
+  enableTypescript?: boolean
+  enableSourcemap?: boolean
+}
+
+export interface OxcCompressOptions {
+  booleans: boolean
+  dropDebugger: boolean
+  dropConsole: boolean
+  evaluate: boolean
+  joinVars: boolean
+  loops: boolean
+  typeofs: boolean
+}
+
+export interface OxcControlFlowOptions {
+  verbose?: boolean
+}
+
+export interface OxcDiagnostic {
+  start: number
+  end: number
+  severity: string
+  message: string
+}
+
+export interface OxcError {
+  severity: Severity
+  message: string
+  labels: Array<ErrorLabel>
+  helpMessage?: string
+}
+
+export interface OxcLinterOptions {
+
+}
+
+export interface OxcMinifierOptions {
+  whitespace?: boolean
+  mangle?: boolean
+  compress?: boolean
+  compressOptions?: OxcCompressOptions
+}
+
+export interface OxcOptions {
+  run?: OxcRunOptions
+  parser?: OxcParserOptions
+  linter?: OxcLinterOptions
+  transformer?: OxcTransformerOptions
+  codegen?: OxcCodegenOptions
+  minifier?: OxcMinifierOptions
+  controlFlow?: OxcControlFlowOptions
+}
+
+export interface OxcParserOptions {
+  allowReturnOutsideFunction?: boolean
+  preserveParens?: boolean
+  allowV8Intrinsics?: boolean
+  sourceType?: string
+  sourceFilename?: string
+}
+
+export interface OxcRunOptions {
+  syntax?: boolean
+  lint?: boolean
+  format?: boolean
+  prettierFormat?: boolean
+  prettierIr?: boolean
+  transform?: boolean
+  typeCheck?: boolean
+  scope?: boolean
+  symbol?: boolean
+}
+
+export interface OxcTransformerOptions {
+  target?: string
+  isolatedDeclarations?: boolean
+}
+
+export declare const enum Severity {
+  Error = 'Error',
+  Warning = 'Warning',
+  Advice = 'Advice'
+}