fix: support jsx by default

closes #198
vue-macros · Jan 6, 2023 · af9978b · af9978b
1 parent 230c80e
commit af9978b
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 21 deletions.
diff --git a/.changeset/loud-crews-hide.md b/.changeset/loud-crews-hide.md
@@ -0,0 +1,6 @@
+---
+'unplugin-vue-define-options': patch
+'@vue-macros/common': patch
+---
+
+support jsx by default
diff --git a/packages/common/src/ast.ts b/packages/common/src/ast.ts
@@ -1,6 +1,6 @@
 import { babelParse as _babelParse, walkIdentifiers } from '@vue/compiler-sfc'
 import { walk } from 'estree-walker'
-import { REGEX_JSX_FILE } from './constants'
+import { REGEX_LANG_JSX } from './constants'
 import { isTs } from './lang'
 import type {
   CallExpression,
@@ -21,10 +21,10 @@ export function babelParse(
   options: ParserOptions = {}
 ): Program {
   const plugins: ParserPlugin[] = []
-  if (lang) {
-    if (isTs(lang)) plugins.push('typescript')
-    if (REGEX_JSX_FILE.test(lang)) plugins.push('jsx')
-  }
+  if (isTs(lang)) {
+    plugins.push('typescript')
+    if (REGEX_LANG_JSX.test(lang!)) plugins.push('jsx')
+  } else plugins.push('jsx')
   const { program } = _babelParse(code, {
     sourceType: 'module',
     plugins,

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
@@ -13,8 +13,9 @@ export const REPO_ISSUE_URL =
   'https://github.com/sxzz/unplugin-vue-macros/issues'
 
 export const REGEX_SRC_FILE = /\.[cm]?[jt]sx?$/
-export const REGEX_TS_FILE = /^[cm]?tsx?$/
-export const REGEX_JSX_FILE = /^[cm]?[jt]sx$/
 export const REGEX_SETUP_SFC = /\.setup\.[cm]?[jt]sx?$/
 export const REGEX_VUE_SFC = /\.vue$/
 export const REGEX_VUE_SUB = /\.vue\?vue&/
+
+export const REGEX_LANG_TS = /^[cm]?tsx?$/
+export const REGEX_LANG_JSX = /^[cm]?[jt]sx$/
diff --git a/packages/common/src/lang.ts b/packages/common/src/lang.ts
@@ -1,10 +1,10 @@
 import path from 'node:path'
-import { REGEX_TS_FILE } from './constants'
+import { REGEX_LANG_TS } from './constants'
 
 export function getLang(filename: string) {
   return path.extname(filename).replace(/^\./, '')
 }
 
 export function isTs(lang?: string) {
-  return lang && REGEX_TS_FILE.test(lang)
+  return lang && REGEX_LANG_TS.test(lang)
 }
diff --git a/packages/define-options/tests/__snapshots__/rollup.test.ts.snap b/packages/define-options/tests/__snapshots__/rollup.test.ts.snap
@@ -180,17 +180,17 @@ export { empty as default };
 "
 `;
 
-exports[`Rollup > fixtures > tests/fixtures/error1.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: \`defineOptions()\` in <script setup> cannot reference locally declared variables (name) because it will be hoisted outside of the setup() function.]`;
+exports[`Rollup > fixtures > tests/fixtures/error1.vue 1`] = `"unplugin-vue-define-options SyntaxError: \`defineOptions()\` in <script setup> cannot reference locally declared variables (name) because it will be hoisted outside of the setup() function."`;
 
-exports[`Rollup > fixtures > tests/fixtures/error2.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: \`defineOptions()\` in <script setup> cannot reference locally declared variables (foo) because it will be hoisted outside of the setup() function.]`;
+exports[`Rollup > fixtures > tests/fixtures/error2.vue 1`] = `"unplugin-vue-define-options SyntaxError: \`defineOptions()\` in <script setup> cannot reference locally declared variables (foo) because it will be hoisted outside of the setup() function."`;
 
-exports[`Rollup > fixtures > tests/fixtures/error3.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: defineOptions cannot be used with default export within <script>.]`;
+exports[`Rollup > fixtures > tests/fixtures/error3.vue 1`] = `"unplugin-vue-define-options SyntaxError: defineOptions cannot be used with default export within <script>."`;
 
-exports[`Rollup > fixtures > tests/fixtures/error4.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead.]`;
+exports[`Rollup > fixtures > tests/fixtures/error4.vue 1`] = `"unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead."`;
 
-exports[`Rollup > fixtures > tests/fixtures/error5.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead.]`;
+exports[`Rollup > fixtures > tests/fixtures/error5.vue 1`] = `"unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead."`;
 
-exports[`Rollup > fixtures > tests/fixtures/error6.vue 1`] = `[RollupError: unplugin-vue-define-options SyntaxError: duplicate defineOptions() call]`;
+exports[`Rollup > fixtures > tests/fixtures/error6.vue 1`] = `"unplugin-vue-define-options SyntaxError: duplicate defineOptions() call"`;
 
 exports[`Rollup > fixtures > tests/fixtures/function.vue 1`] = `
 "var _function = \`<script lang=\\"ts\\">
@@ -266,6 +266,23 @@ export { js as default };
 "
 `;
 
+exports[`Rollup > fixtures > tests/fixtures/jsx.vue 1`] = `
+"var jsx = \`<script>
+import { defineComponent as DO_defineComponent } from 'vue';
+export default /*#__PURE__*/ DO_defineComponent({
+  name: 'Jsx',
+});
+</script>
+<script setup>
+
+console.log(<h1>jsx</h1>)
+</script>
+\`;
+
+export { jsx as default };
+"
+`;
+
 exports[`Rollup > fixtures > tests/fixtures/no-transform.vue 1`] = `
 "var noTransform = \`<script setup>
 console.log('setup')

diff --git a/packages/define-options/tests/fixtures/jsx.vue b/packages/define-options/tests/fixtures/jsx.vue
@@ -0,0 +1,6 @@
+<script setup>
+defineOptions({
+  name: 'Jsx',
+})
+console.log(<h1>jsx</h1>)
+</script>
diff --git a/packages/define-options/tests/rollup.test.ts b/packages/define-options/tests/rollup.test.ts
@@ -15,12 +15,13 @@ describe('Rollup', () => {
     for (const file of files) {
       it(file.replace(/\\/g, '/'), async () => {
         const filepath = resolve(root, file)
-
-        const code = await rollupBuild(filepath, [
-          VueDefineOptions({}),
-          RollupToStringPlugin(),
-        ]).catch((err) => err)
-        expect(code).toMatchSnapshot()
+        const exec = () =>
+          rollupBuild(filepath, [VueDefineOptions({}), RollupToStringPlugin()])
+        if (file.includes('error')) {
+          await expect(exec()).rejects.toThrowErrorMatchingSnapshot()
+        } else {
+          await expect(exec()).resolves.toMatchSnapshot()
+        }
       })
     }
   })