fix(api): resolve json file

closes #381

.changeset/tasty-cars-check.md

@@ -0,0 +1,8 @@
+---
+'@vue-macros/better-define': patch
+'@vue-macros/test-utils': patch
+'@vue-macros/common': patch
+'@vue-macros/api': patch
+---
+
+resolve json file

packages/api/src/ts/namespace.ts

@@ -35,7 +35,7 @@ export async function resolveTSNamespace(scope: TSScope): Promise<void> {
   scope.declarations = declarations
 
   const { body, file } = resolveTSScope(scope)
-  for (const stmt of body) {
+  for (const stmt of body || []) {
     if (
       stmt.type === 'ExportDefaultDeclaration' &&
       isTSDeclaration(stmt.declaration)

packages/api/src/ts/scope.ts

@@ -1,6 +1,10 @@
 import { readFile } from 'node:fs/promises'
 import { type Statement, type TSModuleBlock } from '@babel/types'
-import { babelParse, getFileCodeAndLang } from '@vue-macros/common'
+import {
+  REGEX_SUPPORTED_EXT,
+  babelParse,
+  getFileCodeAndLang,
+} from '@vue-macros/common'
 import { type TSNamespace } from './namespace'
 
 export interface TSScopeBase {
@@ -12,7 +16,8 @@ export interface TSFile extends TSScopeBase {
   kind: 'file'
   filePath: string
   content: string
-  ast: Statement[]
+  /** could be undefined if it's a JSON file */
+  ast: Statement[] | undefined
 }
 
 export interface TSModule extends TSScopeBase {
@@ -28,19 +33,21 @@ export async function getTSFile(filePath: string): Promise<TSFile> {
   if (tsFileCache[filePath]) return tsFileCache[filePath]
   const content = await readFile(filePath, 'utf-8')
   const { code, lang } = getFileCodeAndLang(content, filePath)
-  const program = babelParse(code, lang)
+
   return (tsFileCache[filePath] = {
     kind: 'file',
     filePath,
     content,
-    ast: program.body,
+    ast: REGEX_SUPPORTED_EXT.test(filePath)
+      ? babelParse(code, lang).body
+      : undefined,
   })
 }
 
 interface ResolvedTSScope {
   isFile: boolean
   file: TSFile
-  body: Statement[]
+  body: Statement[] | undefined
   exports?: TSNamespace
   declarations?: TSNamespace
 }

packages/api/tests/ts.test.ts

@@ -68,7 +68,7 @@ type Base2 = {
     )
     const interfaceProperties = await resolveTSProperties({
       scope: file,
-      type: file.ast[0] as TSInterfaceDeclaration,
+      type: file.ast![0] as TSInterfaceDeclaration,
     })
 
     expect(hideAstLocation(interfaceProperties)).toMatchInlineSnapshot(`
@@ -156,7 +156,7 @@ type Base2 = {
 
     const intersectionProperties = await resolveTSProperties({
       scope: file,
-      type: (file.ast[1] as TSTypeAliasDeclaration)
+      type: (file.ast![1] as TSTypeAliasDeclaration)
         .typeAnnotation as TSIntersectionType,
     })
     expect(hideAstLocation(intersectionProperties)).toMatchInlineSnapshot(`
@@ -201,7 +201,7 @@ type Base2 = {
 type AliasString2 = AliasString1
 type Foo = AliasString`
     )
-    const node = file.ast[1] as TSTypeAliasDeclaration
+    const node = file.ast![1] as TSTypeAliasDeclaration
     const result = (await resolveTSReferencedType({
       scope: file,
       type: node.typeAnnotation,

packages/better-define/tests/__snapshots__/fixtures.test.ts.snap

@@ -568,6 +568,52 @@ export { issue362 as default };
 "
 `;
 
+exports[`fixtures > tests/fixtures/json-resolve.vue > isProduction = false 1`] = `
+"import { defineComponent } from 'vue';
+import _export_sfc from '/plugin-vue/export-helper';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: \\"json-resolve\\",
+  props: {
+    \\"foo\\": { type: String, required: true },
+    \\"bar\\": { type: Object, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return () => {
+    };
+  }
+});
+
+var jsonResolve = /* @__PURE__ */ _export_sfc(_sfc_main, [__FILE__]);
+
+export { jsonResolve as default };
+"
+`;
+
+exports[`fixtures > tests/fixtures/json-resolve.vue > isProduction = true 1`] = `
+"import { defineComponent } from 'vue';
+import _export_sfc from '/plugin-vue/export-helper';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: \\"json-resolve\\",
+  props: {
+    \\"foo\\": null,
+    \\"bar\\": null
+  },
+  setup(__props) {
+    const props = __props;
+    return () => {
+    };
+  }
+});
+
+var jsonResolve = /* @__PURE__ */ _export_sfc(_sfc_main, [__FILE__]);
+
+export { jsonResolve as default };
+"
+`;
+
 exports[`fixtures > tests/fixtures/namespace.vue > isProduction = false 1`] = `
 "import { defineComponent } from 'vue';
 import _export_sfc from '/plugin-vue/export-helper';

packages/better-define/tests/fixtures.test.ts

@@ -2,6 +2,7 @@ import { resolve } from 'node:path'
 import { describe } from 'vitest'
 import {
   RollupEsbuildPlugin,
+  RollupJson,
   RollupRemoveVueFilePathPlugin,
   RollupVue,
   RollupVueJsx,
@@ -19,6 +20,7 @@ describe('fixtures', async () => {
         RollupVue(),
         RollupVueJsx(),
         RollupRemoveVueFilePathPlugin(),
+        RollupJson(),
         RollupEsbuildPlugin({
           target: 'esnext',
         }),

packages/better-define/tests/fixtures/json-resolve.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import pkg from './json.json'
+const props = defineProps<{
+  foo: string
+  bar?: Record<string, any>
+}>()
+</script>

packages/better-define/tests/fixtures/json.json

@@ -0,0 +1,3 @@
+{
+  "foo": "bar"
+}

packages/common/src/constants.ts

@@ -20,6 +20,7 @@ export const REGEX_VUE_SFC = /\.vue$/
 export const REGEX_VUE_SUB = /\.vue\?vue&type=script/
 export const REGEX_DTS = /\.d\.[cm]?ts$/
 export const REGEX_NODE_MODULES = /node_modules/
+export const REGEX_SUPPORTED_EXT = /\.([cm]?[jt]sx?|vue)$/
 
 export const REGEX_LANG_TS = /^[cm]?tsx?$/
 export const REGEX_LANG_JSX = /^[cm]?[jt]sx$/

packages/common/src/vue.ts

@@ -65,7 +65,13 @@ export function getFileCodeAndLang(
   code: string,
   id: string
 ): { code: string; lang: string } {
-  if (!REGEX_VUE_SFC.test(id)) return { code, lang: getLang(id) }
+  if (!REGEX_VUE_SFC.test(id)) {
+    return {
+      code,
+      lang: getLang(id),
+    }
+  }
+
   const sfc = parseSFC(code, id)
   const scriptCode = sfc.script?.content ?? ''
   return {

packages/test-utils/package.json

@@ -59,6 +59,7 @@
     "unplugin-vue": "^4.1.0"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^6.0.0",
     "vite": "^4.3.8",
     "vue": "^3.3.4"
   },

packages/test-utils/src/rollup.ts

@@ -9,6 +9,8 @@ export { default as RollupVue } from 'unplugin-vue/rollup'
 export { default as RollupVue2 } from '@vitejs/plugin-vue2'
 export const RollupVueJsx = ViteVueJsx as (options?: VueJsxOptions) => Plugin
 
+export { default as RollupJson } from '@rollup/plugin-json'
+
 export const RollupToStringPlugin = (): Plugin => {
   return {
     name: 'to-string',