chore: attempt to resolve types

Author: codebender828

package.json

@@ -100,6 +100,7 @@
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vue/server-renderer": "^3.2.29",
     "@vue/test-utils": "^2.0.0-rc.6",
+    "@vue/tsconfig": "^0.1.3",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
     "@vueuse/core": "4.9.1",
@@ -150,11 +151,9 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
-    "motion": "^10.12.0",
     "object-assign": "^4.1.1",
     "prettier": "^2.1.2",
     "pretty": "^2.0.0",
-    "react": "^17.0.1",
     "recursive-readdir": "^2.2.2",
     "shelljs": "^0.8.4",
     "size-limit": "^5.0.3",
@@ -163,14 +162,14 @@
     "ts-node": "^9.0.0",
     "typescript": "4.6.4",
     "unplugin-vue-components": "^0.14.0",
-    "vite": "^2.8.6",
+    "vite": "^3.0.7",
     "vite-plugin-mdx-vue": "^1.6.0",
     "vite-plugin-pages": "^0.20.1",
     "vite-plugin-vue-layouts": "^0.5.0",
     "vite-ssg": "^0.17.2",
-    "vitepress": "^0.20.9",
+    "vitepress": "^1.0.0-draft.8",
     "vitest": "^0.18.0",
-    "vue": "^3.2.29",
+    "vue": "^3.2.37",
     "vue-jest": "^5.0.0-alpha.7",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.12",

packages/c-button/src/icon-button.tsx

@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType } from "vue"
+import { h, defineComponent, PropType, VNode } from "vue"
 import CButton from "./button"
 import { ButtonProps } from "./button.utils"
 import { CIcon } from "@chakra-ui/c-icon"
@@ -50,3 +50,12 @@ const CIconButton: ComponentWithProps<DeepPartial<CIconButtonProps>> =
   })
 
 export default CIconButton
+
+export const Foo = defineComponent((props, { slots }) => {
+  return () => (
+    <div>
+      <span data-foo>Hello</span>
+      {slots}
+    </div>
+  )
+})

packages/c-button/src/index.tsx

@@ -1,3 +1,11 @@
+import { defineComponent } from "vue"
+
 export { default as CButton } from "./button"
 export { default as CButtonGroup } from "./button-group"
 export { default as CIconButton } from "./icon-button"
+import { Foo } from "./icon-button"
+export { Foo }
+
+const Bar = defineComponent((_, { slots }) => {
+  return () => <Foo>{slots}</Foo>
+})

packages/c-form-control/src/c-form-control.tsx

@@ -45,40 +45,39 @@ export const formControlProps = {
   id: String as PropType<CFormControlProps["id"]>,
 }
 
-export const CFormControl: ComponentWithProps<
-  DeepPartial<CFormControlProps>
-> = defineComponent({
-  props: {
-    as: {
-      type: [Object, String] as PropType<DOMElements>,
-      default: "div",
+export const CFormControl: ComponentWithProps<DeepPartial<CFormControlProps>> =
+  defineComponent({
+    props: {
+      as: {
+        type: [Object, String] as PropType<DOMElements>,
+        default: "div",
+      },
+      ...formControlProps,
     },
-    ...formControlProps,
-  },
-  setup(_props, { slots, attrs }) {
-    const { as, ...props } = toRefs(_props)
-    const ownProps = computed(() => props)
-    const styles = useMultiStyleConfig("Form", props)
-    const { rootProps, ..._context } = useFormControlProvider(ownProps.value)
+    setup(_props, { slots, attrs }) {
+      const { as, ...props } = toRefs(_props)
+      const ownProps = computed(() => props)
+      const styles = useMultiStyleConfig("Form", props)
+      const { rootProps, ..._context } = useFormControlProvider(ownProps.value)
 
-    const context: CFormControlProviderContext = computed(() => _context)
+      const context: CFormControlProviderContext = computed(() => _context)
 
-    FormControlProvider(context)
-    StylesProvider(styles)
+      FormControlProvider(context)
+      StylesProvider(styles)
 
-    return () => (
-      <chakra.div
-        as={as.value}
-        {...rootProps.value}
-        __css={styles.value.container}
-        __label="form"
-        {...attrs}
-      >
-        {slots}
-      </chakra.div>
-    )
-  },
-})
+      return () => (
+        <chakra.div
+          as={as.value}
+          {...rootProps.value}
+          __css={styles.value.container}
+          __label="form"
+          {...attrs}
+        >
+          {slots}
+        </chakra.div>
+      )
+    },
+  })
 
 export interface CHelpTextProps extends HTMLChakraProps<"div"> {}
 /**
@@ -88,23 +87,22 @@ export interface CHelpTextProps extends HTMLChakraProps<"div"> {}
  * about the field, such as how it will be used and what
  * types in values should be provided.
  */
-export const CFormHelperText: ComponentWithProps<
-  DeepPartial<CHelpTextProps>
-> = defineComponent((props, { attrs, slots }) => {
-  const field = useFormControlContext()
-  const styles = useStyles()
-  const handleVNodeMounted = () => {
-    field.value.hasHelpText.value = true
-  }
+export const CFormHelperText: ComponentWithProps<DeepPartial<CHelpTextProps>> =
+  defineComponent((props, { attrs, slots }) => {
+    const field = useFormControlContext()
+    const styles = useStyles()
+    const handleVNodeMounted = () => {
+      field.value.hasHelpText.value = true
+    }
 
-  return () => (
-    <chakra.div
-      __label="form__helper-text"
-      onVnodeBeforeMount={handleVNodeMounted}
-      {...field.value.helperTextProps.value}
-      __css={styles.value.helperText}
-    >
-      {slots}
-    </chakra.div>
-  )
-})
+    return () => (
+      <chakra.div
+        __label="form__helper-text"
+        onVnodeBeforeMount={handleVNodeMounted}
+        {...field.value.helperTextProps.value}
+        __css={styles.value.helperText}
+      >
+        {slots}
+      </chakra.div>
+    )
+  })

packages/c-form-control/src/c-form-label.tsx

@@ -2,9 +2,7 @@ import { defineComponent, computed, h } from "vue"
 import {
   chakra,
   ComponentWithProps,
-  DeepPartial,
   HTMLChakraProps,
-  omitThemingProps,
   ThemingProps,
   useStyleConfig,
   useStyles,
@@ -21,7 +19,6 @@ export const CFormLabel = defineComponent({
   props: vueThemingProps,
   setup(props, { attrs, slots }) {
     const styles = useStyleConfig("FormLabel", props)
-    const _props = omitThemingProps(props)
     const field = useFormControlContext()
     const requiredIndicator = computed(() => {
       if (slots.indicator) {
@@ -55,8 +52,8 @@ export interface CRequiredIndicatorProps extends HTMLChakraProps<"span"> {}
  * Used to show a "required" text or an asterisks (*) to indicate that
  * a field is required.
  */
-export const CRequiredIndicator: ComponentWithProps<CRequiredIndicatorProps> = defineComponent(
-  {
+export const CRequiredIndicator: ComponentWithProps<CRequiredIndicatorProps> =
+  defineComponent({
     name: "CRequiredIndicator",
     setup(_, { attrs }) {
       const field = useFormControlContext()
@@ -75,5 +72,4 @@ export const CRequiredIndicator: ComponentWithProps<CRequiredIndicatorProps> = d
         </chakra.span>
       )
     },
-  }
-)
+  })

packages/core/src/helpers/css-reset.ts

@@ -5,7 +5,7 @@ import { get, runIfFn } from "@chakra-ui/utils"
 import { ColorModeRef } from "@chakra-ui/c-color-mode"
 import { serializeStyles } from "@emotion/serialize"
 import { StyleSheet } from "@emotion/sheet"
-import { computed, getCurrentInstance, ref, watch, watchEffect } from "vue"
+import { computed, ref, watch, watchEffect } from "vue"
 import createCache, { EmotionCache } from "@emotion/cache"
 import { insertStyles, SerializedStyles } from "@emotion/utils"
 
@@ -40,11 +40,8 @@ export function injectThemeGlobalStyles(
     serializeStyles([_globalStyles.value], cache.registered, theme)
   )
 
-  const id = ref(0)
   const sheetRef = ref<[sheet: StyleSheet, hydrating: boolean]>()
 
-  console.log(cache)
-
   watch(
     () => cache,
     () => {
@@ -105,6 +102,7 @@ export function injectThemeGlobalStyles(
       sheet.flush()
     }
 
+    /* @ts-expect-error Sheet type not correctly assigned*/
     cache.insert(``, serializedStyles.value, sheet, false)
   })
 }

packages/system/src/chakra.ts

@@ -17,15 +17,13 @@ import {
   SystemProps,
   SystemStyleObject,
 } from "@chakra-ui/styled-system"
-import _styled, { useEmotionTheme } from "@chakra-ui/vue-styled"
+import _styled from "@chakra-ui/vue-styled"
 
 import {
   isFunction,
   objectFilter,
   isObject,
   memoizedGet as get,
-  runIfFn,
-  filterUndefined,
   Dict,
 } from "@chakra-ui/utils"
 import { cx, css as _css, CSSObject } from "@emotion/css"
@@ -398,12 +396,16 @@ export type ChakraFactoryProps = ChakraProps &
 type UserProvidedProps = { [key: string]: any }
 
 type IChakraFactory = {
-  [key in DOMElements]: DefineComponent | ComponentWithProps<ChakraFactoryProps>
+  [key in DOMElements]:
+    | DefineComponent<ChakraFactoryProps>
+    | ComponentWithProps<ChakraFactoryProps>
 } & {
   (
     tag: ChakraTagOrComponent,
     options?: StyleResolverOptions & UserProvidedProps
-  ): DefineComponent | ComponentWithProps<ChakraFactoryProps>
+  ):
+    | DefineComponent<ChakraFactoryProps>
+    | ComponentWithProps<ChakraFactoryProps>
 }
 
 domElements.forEach((tag) => {

packages/system/src/system.types.ts

@@ -27,9 +27,7 @@ export type ComponentWithProps<P> = {
   new (): {
     $props: AllowedComponentProps &
       ComponentCustomProps &
-      VNodeProps &
-      { props?: Record<keyof P, any> } &
-      P & {
+      VNodeProps & { props?: Record<keyof P, any> } & P & {
         [key: string]: unknown
       }
   }
@@ -44,18 +42,6 @@ export type Tag =
   | typeof Suspense
   | Component
 
-export interface ThemingProps<ThemeComponent extends string = string> {
-  variant?: ThemeComponent extends keyof ThemeTypings["components"]
-    ? ThemeTypings["components"][ThemeComponent]["variants"] | (string & {})
-    : string
-  size?: ThemeComponent extends keyof ThemeTypings["components"]
-    ? ThemeTypings["components"][ThemeComponent]["sizes"] | (string & {})
-    : string
-  colorScheme?: ThemeTypings["colorSchemes"] | (string & {})
-  orientation?: "vertical" | "horizontal"
-  styleConfig?: Dict
-}
-
 export interface ChakraProps extends SystemProps, StyleResolverProps {
   /**
    * apply layer styles defined in `theme.layerStyles`

packages/system/src/system.utils.ts

@@ -82,8 +82,4 @@ export type ToPropType<T> = {
   [P in keyof T]?: PropType<T[P]>
 }
 
-export function omitThemingProps<T extends ThemingProps>(props: T) {
-  return omit(props, ["styleConfig", "size", "variant", "colorScheme"])
-}
-
 export { keyframes, injectGlobal }

tsconfig.json

@@ -1,38 +1,42 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.node.json",
   "compilerOptions": {
     "target": "ES2015",                     /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "resolveJsonModule": true,
     "preserveSymlinks": true,
+    "composite": true,
     "lib": [ "es5", "esnext", "dom" ],
-    "types": ["node", "jest", "vite/client", "vite-plugin-pages/client", "vitest/globals", "cypress", "components.d.ts"],
+    "types": ["node", "dom.iterable", "vue", "jest", "vite/client", "components.d.ts"],
     "declaration": true,
     "declarationMap": true,
     "allowJs": true,
     "sourceMap": true,
     "moduleResolution": "node",
-    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }],
     "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "strict": true,                        /* Enable all strict type-checking options. */  
-    "baseUrl": ".",                    
+    "strict": true,                        /* Enable all strict type-checking options. */
+    "baseUrl": ".",
     "noFallthroughCasesInSwitch": true,
     "suppressImplicitAnyIndexErrors": true,
     "strictFunctionTypes": true,
     "strictNullChecks": true,
+    "importsNotUsedAsValues": "preserve",
     "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
   },
   "include": [
     "./components.d.ts",
-    "packages",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
     "playground/**/*.ts",
-    "playground/**/*.d.ts",
     "playground/**/*.tsx",
+    "playground/**/*.d.ts",
     "playground/**/*.vue",
     "tests/index.d.ts",
+    "**/*.d.ts",
     "vite.config.ts",
   ],
   "exclude": ["node_modules", "./@types", "dist", "packages/**/*.test.ts"],