Skip to content

refactor: use oxc-parser directly #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Brooooooklyn wants to merge 1 commit into from
Closed

refactor: use oxc-parser directly #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"clsx": "^2.1.1",
"fflate": "^0.8.2",
"monaco-editor": "^0.52.2",
"oxc-parser": "^0.56.5",
"radix-vue": "^1.9.15",
"tailwind-merge": "^3.0.1",
"vue": "^3.5.13"
Expand Down
161 changes: 161 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 13 additions & 0 deletions src/composables/oxc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import initWasm, { Oxc, type OxcOptions } from '@oxc/oxc_wasm'
import { createGlobalState } from '@vueuse/core'
import { parseAsync } from 'oxc-parser'
import {
computed,
ref,
Expand All @@ -18,6 +19,18 @@ async function initialize(): Promise<Oxc> {
return new Oxc()
}

parseAsync(
'test.tsx',
`
const a = 1
const b: number = 2
const c = a + b
console.log(c)
`,
).then((ast) => {
console.log(ast)
})

export const loadingOxc = ref(true)
export const oxcPromise = initialize().finally(() => (loadingOxc.value = false))

Expand Down
27 changes: 26 additions & 1 deletion vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
optimizeDeps: {
esbuildOptions: {
target: 'esnext',
},
// Suppress the warning: The file does not exist at "oxc-playground/node_modules/.vite/deps/@oxc-parser/binding-wasm32-wasi/wasi-worker-browser.mjs?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
// Need to resolve
exclude: ['@oxc-parser/binding-wasm32-wasi'],
Copy link
Member Author

@Brooooooklyn Brooooooklyn Mar 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't know why need this, it works fine in NAPI-RS playground: https://github.com/napi-rs/node-rs-playground/blob/main/vite.config.ts

Copy link
Contributor

@hi-ogawa hi-ogawa Mar 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the difference is that node-rs-playground example doesn't use worker, so it doesn't hit the code new Worker(new URL(..., import.meta.url)), but parseAsync uses a worker. Unfortunately, Vite's optimizer (esbuild) doesn't support new URL rewriting etc..., so Vite dev requires dependencies with new URL(...) and alike to be specified in optimizeDeps.exclude vitejs/vite#8427

Side note: Contrary to what I thought, I just realized ?url is supported by Vite optimized deps, so changing that into new URL napi-rs/napi-rs#2511 can affect non-worker use case, which didn't require optimizeDeps.exclude workaround 🤔

Copy link
Contributor

@hi-ogawa hi-ogawa Mar 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, actually optimizeDeps.exclude is not necessary if @oxc-parser/binding-wasm32-wasi is explicitly installed locally as project dependency. This is probably because wasi-browser.js has new URL("@oxc-parser/binding-wasm32-wasi/wasi-worker-browser.mjs", import.meta.url), so Vite can resolve it properly as long as @oxc-parser/binding-wasm32-wasi is visible from project node_modules.

node-rs-playground uses yarn's flat node_modules, so node_modules/@oxc-parser/binding-wasm32-wasi is visible even if it's installed as optional architecture dep.

},
build: {
target: 'esnext',
},
resolve: {
alias: {
'~': path.resolve(__dirname, './src'),
Expand All @@ -15,5 +26,19 @@ export default defineConfig({
allow: [__dirname, '../oxc/npm/oxc-wasm'],
},
},
plugins: [Vue(), UnoCSS()],
plugins: [
Vue(),
UnoCSS(),
{
name: 'configure-response-headers',
enforce: 'pre',
configureServer: (server) => {
server.middlewares.use((_req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
next()
})
},
},
],
})
Loading