fix: dynamic import module to avoid breaking in browser

jest.js

@@ -15,8 +15,8 @@ function requireVueJest() {
 }
 
 module.exports = {
-  process(source, filename, ...args) {
-    const transformed = transform(source, filename)
+  async process(source, filename, ...args) {
+    const transformed = await transform(source, filename)
     const code = transformed ? transformed.code : source
     return requireVueJest().process.call(this, code, filename, ...args)
   },

package.json

@@ -49,11 +49,6 @@
       "require": "./dist/webpack.js",
       "import": "./dist/webpack.mjs",
       "types": "./webpack.d.ts"
-    },
-    "./lib": {
-      "require": "./dist/lib.js",
-      "import": "./dist/lib.mjs",
-      "types": "./lib.d.ts"
     }
   },
   "main": "dist/index.js",

rollup.config.js

@@ -13,8 +13,7 @@ const entries = [
   'src/vite.ts',
   'src/rollup.ts',
   'src/esbuild.ts',
-  'src/nuxt.ts',
-  'src/lib.ts',
+  'src/nuxt.ts'
 ]
 
 const dtsEntries = [

src/core/parseSFC.ts

@@ -1,6 +1,5 @@
 /* eslint-disable one-var */
 /* eslint-disable @typescript-eslint/no-namespace */
-import { createRequire } from 'module'
 import { notNullish, partition } from '@antfu/utils'
 import type { Program } from '@babel/types'
 import type { ParserPlugin } from '@babel/parser'
@@ -83,12 +82,12 @@ const BUILD_IN_DIRECTIVES = new Set([
   // 'ref',
 ])
 
-function getRequire() {
-  return (
-    (typeof require === 'function')
-      ? require
-      : createRequire(import.meta.url)
-  )
+async function getRequire() {
+  if (typeof require === 'function')
+    return require
+
+  const { default: { createRequire } } = await import('module')
+  return createRequire(import.meta.url)
 }
 
 function getComponents(node: TemplateChildNode): string[] {
@@ -282,11 +281,11 @@ function getBabelParserOptions(lang: string | null | undefined) {
     plugins,
   }
 }
-export function parseSFC(
+export async function parseSFC(
   code: string,
   id?: string,
   options?: ScriptSetupTransformOptions,
-): ParsedSFC {
+): Promise<ParsedSFC> {
   const elementChildren = baseParse(code, parserOptions).children.flatMap(x =>
     x.type === NodeTypes.ELEMENT && x.tagType === ElementTypes.ELEMENT
       ? [x]
@@ -376,7 +375,7 @@ export function parseSFC(
             && p.value.content === 'pug',
       )
         ? baseParse(
-          getRequire()('pug').compile(
+          (await getRequire())('pug').compile(
             templateNode.children.map(x => x.loc.source).join(''),
             {
               filename: id,

src/core/transform.ts

@@ -15,7 +15,7 @@ export function shouldTransform(code: string, id: string, options?: ScriptSetupT
   return (options?.reactivityTransform && shouldTransformRefSugar(code)) || scriptSetupRE.test(code)
 }
 
-export function transform(input: string, id: string, options?: ScriptSetupTransformOptions): TransformResult {
+export async function transform(input: string, id: string, options?: ScriptSetupTransformOptions): Promise<TransformResult> {
   if (!shouldTransform(input, id, options))
     return null
   const resolved = resolveOptions(options)
@@ -36,10 +36,10 @@ function transformNonVue(input: string, id: string, options: ResolvedOptions): T
   return null
 }
 
-function transformVue(input: string, id: string, options: ResolvedOptions): TransformResult {
+async function transformVue(input: string, id: string, options: ResolvedOptions): Promise<TransformResult> {
   const s = new MagicString(input)
 
-  const sfc = parseSFC(input, id)
+  const sfc = await parseSFC(input, id)
 
   if (options.reactivityTransform)
     transformSfcRefSugar(sfc, options)

src/index.ts

@@ -17,9 +17,9 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}) => {
     transformInclude(id) {
       return filter(id)
     },
-    transform(code, id) {
+    async transform(code, id) {
       try {
-        return transform(code, id, options)
+        return await transform(code, id, options)
       }
       catch (e: any) {
         this.error(e)

test/transform.test.ts

@@ -18,10 +18,10 @@ describe('transform', () => {
     for (const file of files) {
       it(file.replace(/\\/g, '/'), async() => {
         const fixture = await fs.readFile(resolve(root, file), 'utf-8')
-        const result = transform(fixture, file, { reactivityTransform: true })?.code || fixture
+        const result = (await transform(fixture, file, { reactivityTransform: true }))?.code || fixture
         expect(result).toMatchSnapshot()
 
-        const result2 = transform(result, file, { reactivityTransform: true })?.code || result
+        const result2 = (await transform(result, file, { reactivityTransform: true }))?.code || result
         expect(result).toEqual(result2)
       })
     }