feat: support browser

Author: zhiyuanzmj

.github/workflows/unit-test.yml

@@ -34,7 +34,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        node: [18, 20]
+        node: [20, 22]
       fail-fast: false
 
     steps:

package.json

@@ -52,6 +52,10 @@
       "require": "./dist/volar.cjs",
       "import": "./dist/volar.js"
     },
+    "./volar-browser": {
+      "require": "./dist/volar-browser.cjs",
+      "import": "./dist/volar-browser.js"
+    },
     "./raw": {
       "require": "./dist/raw.cjs",
       "import": "./dist/raw.js"

playground/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { type Ref, inject, provide, toRefs, watch } from 'vue'
+import { type Ref, inject, provide, ref, toRefs, watch } from 'vue'
 import { useBase64 } from '@vueuse/core'
 import { useUserStore } from '../store/user'
 

playground/src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="vue/macros-global" />

src/core/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable node/prefer-global/process */
 import { walk } from 'estree-walker'
 import type { Node } from 'oxc-parser'
 import type { Reference, Scope } from '@typescript-eslint/scope-manager'
@@ -65,3 +66,32 @@ export function transformFunctionReturn(node: Node, refs: Node[]) {
     }
   }
 }
+
+let require: NodeJS.Require | undefined
+export function getRequire() {
+  if (require) return require
+
+  try {
+    // @ts-expect-error check api
+    if (globalThis.process?.getBuiltinModule) {
+      const module = process.getBuiltinModule('module')
+      // unenv has implemented `getBuiltinModule` but has yet to support `module.createRequire`
+      if (module?.createRequire) {
+        return (require = module.createRequire(import.meta.url))
+      }
+    }
+  } catch {}
+}
+
+let parseSync: typeof import('oxc-parser').parseSync
+export async function getOxcParser() {
+  if (!parseSync) {
+    parseSync = await import(
+      // @ts-ignore
+      typeof window !== 'undefined'
+        ? 'https://cdn.jsdelivr.net/npm/@oxc-parser/binding-wasm32-wasi/browser-bundle.mjs'
+        : 'oxc-parser'
+    ).then((mod) => mod.parseSync)
+  }
+  return parseSync
+}

src/global.d.ts

@@ -0,0 +1,12 @@
+declare module 'estree-walker' {
+  export function walk<T>(
+    root: T,
+    options: {
+      enter?: (node: T, parent: T | null) => any
+      leave?: (node: T, parent: T | null) => any
+      exit?: (node: T) => any
+    } & ThisType<{ skip: () => void }>,
+  )
+}
+
+declare let __BROWSER__: boolean

src/raw.ts

@@ -10,37 +10,38 @@ import {
   parseSFC,
 } from '@vue-macros/common'
 import { analyze } from '@typescript-eslint/scope-manager'
-import { type IdentifierName, type Node, parseSync } from 'oxc-parser'
-// @ts-ignore
 import { walk } from 'estree-walker'
 import { type Options, resolveOption } from './core/options'
 import {
   collectRefs,
+  getOxcParser,
   getReferences,
   transformFunctionReturn,
 } from './core/utils'
+import type { IdentifierName, Node } from 'oxc-parser'
 import type { UnpluginOptions } from 'unplugin'
 
-export function transformReactivityFunction(
+export async function transformReactivityFunction(
   code: string,
   ignore: string[],
   s: MagicStringAST,
 ) {
+  const parseSync = await getOxcParser()
   const { program } = parseSync('index.tsx', code, {
     sourceType: 'module',
   })
 
   const unrefs: IdentifierName[] = []
   const refs: Node[] = []
   let index = 0
-  walk(program, {
-    leave(node: Node, parent: Node) {
+  walk<Node>(program, {
+    leave(node, parent) {
       // @ts-ignore
       node.parent = parent
       // @ts-ignore
       node.range = [node.start, node.end]
     },
-    enter(node: Node, parent: Node) {
+    enter(node, parent) {
       if (node.type === 'TSNonNullExpression') {
         node = node.expression
       }

src/volar.ts

@@ -5,14 +5,15 @@ import {
   replaceSourceRange,
 } from 'ts-macro'
 import { analyze } from '@typescript-eslint/scope-manager'
-// @ts-ignore
 import { walk } from 'estree-walker'
-import { type IdentifierName, type Node, parseSync } from 'oxc-parser'
 import {
   collectRefs,
+  getOxcParser,
   getReferences,
+  getRequire,
   transformFunctionReturn,
 } from './core/utils'
+import type { IdentifierName, Node } from 'oxc-parser'
 
 const HELPER_PREFIX = '__MACROS_'
 
@@ -28,7 +29,7 @@ const plugin = createPlugin<{ ignore?: string[] } | undefined>(
     const ignore = (options?.ignore || []).map((str) => str.slice(1))
     return {
       name: 'vue-reactivity-function',
-      resolveVirtualCode({ filePath, ast, source, codes }) {
+      resolveVirtualCode({ ast, source, codes }) {
         if (!ast.text.includes('$')) return
         try {
           transformReactivityFunction({
@@ -45,6 +46,16 @@ const plugin = createPlugin<{ ignore?: string[] } | undefined>(
 
 export default plugin
 
+let parseSync: typeof import('oxc-parser').parseSync
+if (__BROWSER__) {
+  parseSync = await getOxcParser()
+} else {
+  const require = getRequire()
+  if (require) {
+    parseSync = require('oxc-parser').parseSync
+  }
+}
+
 function transformReactivityFunction(options: {
   codes: Code[]
   source?: string
@@ -58,14 +69,14 @@ function transformReactivityFunction(options: {
   const unrefs: IdentifierName[] = []
   const refs: Node[] = []
   let index = 0
-  walk(program, {
-    leave(node: Node, parent: Node) {
+  walk<Node>(program, {
+    leave(node, parent) {
       // @ts-ignore
       node.parent = parent
       // @ts-ignore
       node.range = [node.start, node.end]
     },
-    enter(node: Node, parent: Node) {
+    enter(node, parent) {
       if (node.type === 'TSNonNullExpression') {
         node = node.expression
       }

tsdown.config.ts

@@ -1,10 +1,22 @@
 import { defineConfig } from 'tsdown'
 
-export default defineConfig({
-  entry: ['./src/*.ts', '!./src/*.d.ts'],
-  format: ['cjs', 'esm'],
-  dts: true,
-  outputOptions: {
-    exports: 'named',
+export default defineConfig([
+  {
+    define: {
+      __BROWSER__: 'true',
+    },
+    entry: {
+      'volar-browser': './src/volar.ts',
+    },
+    format: 'esm',
+    dts: true,
   },
-})
+  {
+    define: {
+      __BROWSER__: 'false',
+    },
+    entry: ['./src/*.ts', '!./src/*.d.ts'],
+    format: ['cjs', 'esm'],
+    dts: true,
+  },
+])

tsm.config.ts

@@ -1,4 +1,4 @@
-import reactivityFunction from './src/volar'
+import reactivityFunction from './dist/volar.js'
 
 export default {
   plugins: [reactivityFunction()],