fix: improve type resolution

Author: codebender828

components.d.ts

@@ -6,14 +6,30 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-07-16T15:27:15.568Z
+ * This file was generated on 2022-08-31T15:33:17.883Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
-import { VNodeChild, HTMLAttributes } from "vue"
+import { VNodeChild, VNode, HTMLAttributes } from "vue"
 
 export type JsxNode = VNodeChild | JSX.Element
 
+declare global {
+  namespace h.JSX {
+    interface Element extends VNode {}
+    interface ElementClass {
+      $props: {}
+    }
+    interface ElementAttributesProperty {
+      $props: {}
+    }
+
+    interface IntrinsicAttributes
+      extends Omit<HTMLAttributes, "color">,
+        ChakraProps {}
+  }
+}
+
 type EventHandler = (...args: any[]) => void
 
 export interface SlotDirective {
@@ -46,7 +62,6 @@ declare module "@vue/runtime-core" {
   /* Global component types for Volar auto-complete */
   export interface GlobalComponents {
     chakra: typeof import("@chakra-ui/vue-next")["chakra"]
-
     CAccordion: typeof import("@chakra-ui/vue-next")["CAccordion"]
     CAccordionButton: typeof import("@chakra-ui/vue-next")["CAccordionButton"]
     CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]

packages/c-accordion/src/accordion.tsx

@@ -256,12 +256,7 @@ export const CAccordionPanel: ComponentWithProps<CAccordionPanelProps> =
         })
         return (
           <CCollapse isOpen={isOpen.value}>
-            <chakra.div
-              {...contentProps}
-              __cs
-              s={styles.value.panel}
-              {...attrs}
-            >
+            <chakra.div {...contentProps} __css={styles.value.panel} {...attrs}>
               {getValidChildren(slots)}
             </chakra.div>
           </CCollapse>

scripts/generate-global-types.ts

@@ -12,26 +12,7 @@ const ChakraComponents = require("@chakra-ui/vue-next")
 type ComponentsImport = typeof ChakraComponents
 
 async function generateComponents() {
-  let code = `
-    import type { HTMLAttributes, VNode } from "vue";
-    import type { ChakraProps } from "@chakra-ui/vue-system";
-
-    declare global {
-      namespace h.JSX {
-        interface Element extends VNode {}
-        interface ElementClass {
-          $props: {}
-        }
-        interface ElementAttributesProperty {
-          $props: {}
-        }
-    
-        interface IntrinsicAttributes
-          extends Omit<HTMLAttributes, "color">,
-            ChakraProps {}
-      }
-    }
-  `
+  let code = ``
 
   for (const component in ChakraComponents) {
     /**
@@ -65,9 +46,25 @@ async function generateComponents() {
    */
 
    import { ChakraProps, chakra } from '@chakra-ui/vue-system'
-   import { VNodeChild, HTMLAttributes } from 'vue'
+   import { VNodeChild, VNode, HTMLAttributes } from 'vue'
    
    export type JsxNode = VNodeChild | JSX.Element
+   
+   declare global {
+      namespace h.JSX {
+        interface Element extends VNode {}
+        interface ElementClass {
+          $props: {}
+        }
+        interface ElementAttributesProperty {
+          $props: {}
+        }
+    
+        interface IntrinsicAttributes
+          extends Omit<HTMLAttributes, "color">,
+            ChakraProps {}
+      }
+    }
 
    type EventHandler = (...args: any[]) => void;
    

tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "types": ["dom.iterable", "vue", "jest", "components.d.ts"],
+    "types": ["node", "dom.iterable", "vue", "jest", "components.d.ts", "env.d.ts"],
     "lib": ["dom", "esnext"],
     "composite": true,
     "declaration": true,