feat: remove internal icons logs

codebender828 · codebender828 · commit 250039c3e715 · 2023-02-25T23:13:36.000+08:00
diff --git a/@types/components.d.ts b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/components.d.ts b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/package.json b/package.json
@@ -82,7 +82,6 @@
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-auto-import": "workspace:*",
     "@chakra-ui/vue-next": "workspace:*",
-    "@chakra-ui/vue-styled": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-test-utils": "workspace:*",
     "@changesets/changelog-github": "^0.3.0",
diff --git a/packages/c-accordion/src/index.tsx b/packages/c-accordion/src/index.tsx
@@ -4,7 +4,6 @@ export {
   CAccordionIcon,
   CAccordionItem,
   CAccordionPanel,
-  ExpandedValues,
 } from "./accordion"
 
 export type {
@@ -15,4 +14,5 @@ export type {
   CAccordionItemProps,
   CAccordionPanelProps,
   CAccordionProps,
+  ExpandedValues,
 } from "./accordion"
diff --git a/packages/c-popper/package.json b/packages/c-popper/package.json
@@ -30,7 +30,7 @@
     "build:fast": "tsup",
     "types:check": "tsc --noEmit",
     "dev": "tsup --watch",
-    "build:types": "tsup src --dts-only"
+    "build:types": "tsup --dts-only"
   },
   "dependencies": {
     "@chakra-ui/utils": "2.0.15",
diff --git a/packages/c-popper/src/create-popper.ts b/packages/c-popper/src/create-popper.ts
@@ -15,7 +15,7 @@ import {
   positionArrow,
   transformOrigin,
 } from "./modifiers"
-import { getEventListenerOptions } from "./utils"
+import { getEventListenerOptions } from "./dom.utils"
 
 /* -------------------------------------------------------------------------------------------------
   We're initializing our own `createPopper` function with our opinionated defaults to
diff --git a/packages/c-popper/src/dom.utils.ts b/packages/c-popper/src/dom.utils.ts
diff --git a/packages/c-popper/src/index.tsx b/packages/c-popper/src/index.tsx
@@ -1,4 +1,4 @@
 export { Placement, usePopper } from "./use-popper"
-export { popperCSSVars } from "./utils"
+export { popperCSSVars } from "./dom.utils"
 
 export type { UsePopperOptions, UsePopperReturn } from "./use-popper"
diff --git a/packages/c-popper/src/modifiers.ts b/packages/c-popper/src/modifiers.ts
@@ -4,7 +4,7 @@ import {
   getBoxShadow,
   toTransformOrigin,
   popperCSSVars as cssVars,
-} from "./utils"
+} from "./dom.utils"
 
 /* -------------------------------------------------------------------------------------------------
  The match width modifier sets the popper width to match the reference.
@@ -30,7 +30,7 @@ export const matchWidth: Modifier<"matchWidth", any> = {
 /* -------------------------------------------------------------------------------------------------
   The transform origin modifier sets the css `transformOrigin` value of the popper
   based on the dynamic placement state of the popper.
-  
+
   Useful when we need to animate/transition the popper.
 * -----------------------------------------------------------------------------------------------*/
 
diff --git a/packages/system/package.json b/packages/system/package.json
@@ -29,7 +29,6 @@
     "@chakra-ui/styled-system": "2.5.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@emotion/css": "^11.10.5",
     "@emotion/serialize": "1.1.1",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
@@ -41,6 +40,7 @@
     "vue": "3.2.47"
   },
   "peerDependencies": {
+    "@emotion/css": "^11.10.0",
     "vue": "3.2.47"
   },
   "publishConfig": {
diff --git a/packages/vue/src/create-chakra.ts b/packages/vue/src/create-chakra.ts
@@ -0,0 +1,164 @@
+import { computed, ref, createVNode, render, UnwrapRef } from "vue"
+import { localStorageManager } from "@chakra-ui/c-color-mode"
+import mergeWith from "lodash.mergewith"
+import { theme as defaultTheme, baseTheme, Theme } from "@chakra-ui/theme"
+import { canUseDOM } from "@chakra-ui/utils"
+import { toCSSVar } from "@chakra-ui/styled-system"
+import { mode } from "@chakra-ui/theme-tools"
+import {
+  injectGlobal,
+  chakra,
+  createCache,
+  chakraEmotionCache,
+  domElements,
+} from "@chakra-ui/vue-system"
+
+import { setupColorModeContext } from "@chakra-ui/c-color-mode"
+import { injectResetStyles, injectThemeGlobalStyles } from "./helpers/css-reset"
+import { EmotionCacheInjectionSymbol } from "@chakra-ui/vue-styled"
+
+import {
+  ToastContainerId,
+  CToastContainer,
+  ToastContextSymbol,
+  toastContext,
+} from "@chakra-ui/c-toast"
+
+import internalIcons from "./icon.internals"
+import { MergedIcons, parseIcons } from "./parse-icons"
+
+// Type imports
+import type { Plugin } from "vue"
+import type { Dict } from "@chakra-ui/utils"
+import type { EmotionCache } from "@emotion/cache"
+import type { WithCSSVar } from "@chakra-ui/styled-system"
+import type { ThemeOverride } from "@chakra-ui/theme-utils"
+import type { ColorModeRef } from "@chakra-ui/c-color-mode"
+import type { ChakraPluginOptions } from "./helpers/plugin.types"
+
+const defaultPluginOptions: ChakraPluginOptions = {
+  cssReset: true,
+  isBaseTheme: false,
+  colorModeManager: localStorageManager,
+  experimental: {
+    disableFactoryComponents: false,
+  },
+}
+
+/**
+ * Helper function to extend Chakra plugin with options
+ * It just returns its arguments with typescript types added
+ */
+export function extendChakra(options = defaultPluginOptions) {
+  return options
+}
+
+export function createChakra(_options: ChakraPluginOptions) {
+  const ChakraUIVuePlugin: Plugin = {
+    install(app) {
+      const options = mergeWith(
+        {},
+        defaultPluginOptions,
+        _options
+      ) as ChakraPluginOptions
+      // 1. Get theme value
+      // 2. Parse theme tokens to CSS variables
+      // 3. Inject all CSS variables as theme object
+      const theme =
+        options.extendTheme! ||
+        ((options.isBaseTheme ? baseTheme : defaultTheme) as any as
+          | Theme
+          | (Omit<Theme, "components"> & { components: Dict }))
+      const computedTheme = computed<WithCSSVar<ThemeOverride>>(() =>
+        toCSSVar(theme)
+      )
+
+      const colorModeManager = options.colorModeManager || localStorageManager
+      // Inject Chakra CSS variables
+      injectGlobal({
+        ":root": computedTheme.value.__cssVars,
+      })
+
+      // Initialize color mode
+      const colorMode: UnwrapRef<ColorModeRef> =
+        theme.config?.initialColorMode || "light"
+
+      const colorModeRef = ref(colorMode) as ColorModeRef
+
+      setupColorModeContext(app, {
+        _colorMode: colorModeRef,
+        colorModeManager,
+        useSystemColorMode: theme.config?.useSystemColorMode || false,
+        initialColorMode: colorMode,
+        disableTransitionOnChange:
+          theme.config?.disableTransitionOnChange || false,
+      })
+
+      if (options.cssReset) {
+        injectResetStyles()
+      }
+
+      let libraryIcons = options.icons?.library || {}
+      let extendedIcons = options.icons?.extend || {}
+
+      // Bind theme to application global properties and provide to application
+      app.config.globalProperties.$chakraTheme = computedTheme.value
+      app.config.globalProperties.$chakraTheme = computedTheme.value
+      app.provide("$chakraTheme", computedTheme.value as ThemeOverride)
+
+      let emotionCache: EmotionCache
+      // Provide emotion cache
+      if (options.emotionCacheOptions) {
+        emotionCache = createCache(options.emotionCacheOptions)
+        app.provide(EmotionCacheInjectionSymbol, emotionCache)
+      }
+
+      emotionCache ||= chakraEmotionCache
+
+      // Inject `styles.global` in document
+      injectThemeGlobalStyles(computedTheme.value, emotionCache, colorModeRef)
+
+      libraryIcons = parseIcons(libraryIcons)
+
+      // Factory components
+      if (!options.experimental?.disableFactoryComponents) {
+        domElements.forEach((tag) => {
+          app.component(`chakra.${tag}`, chakra(tag))
+        })
+      }
+
+      // Merge internal icons and library icons
+      const mergedIcons: MergedIcons = {
+        ...internalIcons,
+        ...libraryIcons,
+        ...extendedIcons,
+      }
+
+      app.provide("$chakraIcons", mergedIcons)
+
+      // Set color mode property
+      app.config.globalProperties.$mode = mode
+
+      app.provide(ToastContextSymbol, toastContext)
+
+      // Setup toast container component
+      if (canUseDOM()) {
+        const toastContainer =
+          document.getElementById(ToastContainerId) ||
+          document.createElement("div")
+        toastContainer.id = ToastContainerId
+        toastContainer.setAttribute("data-chakra-toast-container", "")
+
+        if (!document.body.contains(toastContainer)) {
+          document.body.insertAdjacentElement("afterend", toastContainer)
+        }
+
+        const vnode = createVNode(CToastContainer)
+        vnode.appContext = app._context
+        render(vnode, toastContainer)
+      }
+    },
+  }
+
+  return ChakraUIVuePlugin
+}
diff --git a/packages/vue/src/helpers/css-reset.ts b/packages/vue/src/helpers/css-reset.ts
@@ -1,4 +1,4 @@
-import { injectGlobal } from "@chakra-ui/vue-system"
+import { injectGlobal, createCache } from "@chakra-ui/vue-system"
 import { css } from "@chakra-ui/styled-system"
 import { cssResetStyles } from "@chakra-ui/c-reset"
 import { ThemeOverride } from "@chakra-ui/theme-utils"
@@ -9,7 +9,6 @@ import type { EmotionCache } from "@emotion/cache"
 import { serializeStyles } from "@emotion/serialize"
 import { StyleSheet } from "@emotion/sheet"
 import { insertStyles, SerializedStyles } from "@emotion/utils"
-import { createCache } from "@chakra-ui/vue-styled"
 
 /** Injects CSS reset styles */
 export function injectResetStyles() {
diff --git a/packages/vue/src/helpers/plugin.types.ts b/packages/vue/src/helpers/plugin.types.ts
@@ -13,11 +13,16 @@ interface IconsOptions {
   library?: {}
   extend?: Record<string, ExtendIconsPath>
 }
+
+export interface ExperimentalOptions {
+  disableFactoryComponents?: boolean
+}
 export interface ChakraPluginOptions {
   cssReset?: boolean
   extendTheme?: ThemeOverride
   icons?: IconsOptions
   colorModeManager?: StorageManager
   emotionCacheOptions?: Options
   isBaseTheme?: boolean
+  experimental?: ExperimentalOptions
 }
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
diff --git a/playground/src/chakra.ts b/playground/src/chakra.ts
diff --git a/playground/src/main.ts b/playground/src/main.ts

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`*`
`7`	`7`	`* This is a generated file. Do not edit it's contents.`
`8`	`8`	`*`
`9`		`- * This file was generated on 2023-02-25T05:49:19.660Z`
	`9`	`+ * This file was generated on 2023-02-25T15:12:13.221Z`
`10`	`10`	`*/`
`11`	`11`
`12`	`12`	`import { ChakraProps, chakra } from "@chakra-ui/vue-system"`