test: sync code

playground/src/button-types.ts

@@ -1,7 +1,9 @@
-import { Color } from './other-types';
+import { Color, Size } from './other-types';
 export { ButtonProps } from './other-types';
 
-export interface InputProps {
+type A = {} & {};
+
+export interface InputProps extends A {
     name: Color;
 }
 

playground/src/components/Button.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { ButtonProps } from '~/button-types';
+// import { ButtonProps } from '~/button-types';
+
+interface Size {
+    small: 'sm';
+    medium: 'md';
+    large: 'lg';
+}
+
+interface ButtonProps {
+    color: string;
+    size: Size;
+}
 
 const props = defineProps<ButtonProps>();
 </script>

playground/src/other-types.ts

@@ -1,7 +1,14 @@
 import { MoreColors } from '~/test';
 
+export enum Size {
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+}
+
 export type Color = 'blue' | 'red' | MoreColors;
 
 export interface ButtonProps {
     color: Color;
+    size: Size;
 }

playground/vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
     },
     plugins: [
         Vue(),
-        VueTypeImports(),
+        // VueTypeImports(),
         Unocss({
             presets: [presetUno(), presetIcons(), presetAttributify()],
         }),

src/core/ast.ts

@@ -252,20 +252,20 @@ export async function extractTypesFromSource(
                 break;
             }
         }
-    };
+    }
 
     /**
      * Extract ts types by name.
      */
-    const extractTypeByName = (name: string) => {
+    function extractTypeByName(name: string, extendInterfaceIndex: number) {
         const node = nodeMap.get(name);
         if (node) {
             _ExtractTypeByName(node);
         } else {
             missingTypes.push(name);
             console.log('Missing types:', missingTypes);
         }
-    };
+    }
 
     // Recursively calls this function to find types from other modules.
     const extractTypesFromModule = async (modulePath: string, types: string[]) => {
@@ -293,10 +293,15 @@ export async function extractTypesFromSource(
      * Extract ts type interfaces. Should also check top-level properties
      * in the interface to look for types to extract
      */
-    const extractTypesFromInterface = (node: TSInterfaceDeclaration) => {
-        extractedTypes.push([node.id.name, extractFromPosition(node.start, node.end)]);
+    const extractTypesFromInterface = (node: TSInterfaceDeclaration, extendInterfaceIndex: number) => {
+        const extractedTypesLength = extractedTypes.push([
+            node.id.name,
+            extractFromPosition(node.body.start! + 1, node.body.end! - 1),
+        ]);
 
         if (node.extends) {
+            const interfaceIndex = extractedTypesLength - 1;
+
             for (const extend of node.extends) {
                 if (extend.expression.type === 'Identifier') extractTypeByName(extend.expression.name);
             }
@@ -310,6 +315,7 @@ export async function extractTypesFromSource(
                     prop.typeAnnotation?.typeAnnotation.type === 'TSTypeReference' &&
                     prop.typeAnnotation.typeAnnotation.typeName.type === 'Identifier'
                 )
+                    // TODO: Need to filter, since Vue only transform the type of nested objects to 'Object'
                     extractTypeByName(prop.typeAnnotation.typeAnnotation.typeName.name);
             }
         }
@@ -318,7 +324,7 @@ export async function extractTypesFromSource(
     /**
      * Extract types from TSTypeAlias
      */
-    const extractTypesFromTypeAlias = (node: TSTypeAliasDeclaration) => {
+    const extractTypesFromTypeAlias = (node: TSTypeAliasDeclaration, extendInterfaceIndex?: number) => {
         extractedTypes.push([node.id.name, extractFromPosition(node.start, node.end)]);
 
         if (node.typeAnnotation.type === 'TSUnionType') extractTypesFromTSUnionType(node.typeAnnotation);
@@ -330,6 +336,8 @@ export async function extractTypesFromSource(
     /**
      * Extract enum types. Since I don't believe these can depend on any other
      * types we just want to extract the string itself.
+     *
+     * Zorin: Since Vue can't handle Enum types right now, would it be better to remove it?
      */
     const extractTypesFromEnum = (node: TSEnumDeclaration) => {
         extractedTypes.push([node.id.name, extractFromPosition(node.start, node.end)]);

src/core/index.ts

@@ -109,15 +109,15 @@ export async function transform(code: string, { id, aliases }: TransformOptions)
 
     console.log(resolvedTypes);
 
-    if (resolvedTypes.length) {
-        const name = resolvedTypes[resolvedTypes.length - 1][0];
-        const interfaceCodes = resolvedTypes.map(([_, interfaceCode]) => interfaceCode).join('');
-        const result = mergeInterfaceCode(interfaceCodes);
+    // if (resolvedTypes.length) {
+    //     const name = resolvedTypes[resolvedTypes.length - 1][0];
+    //     const interfaceCodes = resolvedTypes.map(([_, interfaceCode]) => interfaceCode).join('');
+    //     const result = mergeInterfaceCode(interfaceCodes);
 
-        if (result) resolvedTypes = [[name, `interface ${name} {${result}}`]];
-    }
+    //     if (result) resolvedTypes = [[name, `interface ${name} {${result}}`]];
+    // }
 
-    // console.log(resolvedTypes);
+    console.log(resolvedTypes);
 
     const inlinedTypes = resolvedTypes.map((x) => x[1]).join('\n');
 

src/core/utils.ts

@@ -52,7 +52,7 @@ export function resolvePath(path: string, from: string, aliases: ((AliasOptions
     }
 
     // Result is a typescript file. e.g. 'vue/macros-global.d.ts'
-    if (extname(resolved_path) === 'ts') {
+    if (extname(resolved_path) === '.ts') {
         return resolved_path;
     }
     // Not a typescript file, find declaration file

test.ts

@@ -0,0 +1,10 @@
+const code = `type A = {} & {};
+
+export interface InputProps extends A<A> {
+  prop: string;
+
+
+  props: string;
+}`;
+
+console.log(code.slice(61, 97));