Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 202b1a9

Browse files
codebender828codebender828
authored
Merge pull request #274 from chakra-ui/develop
release: `@chakra-ui/[email protected]`
2 parents db36374 + c5310b9 commit 202b1a9

File tree

44 files changed

+568
-452
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+568
-452
lines changed

‎.changeset/beige-ants-beg.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
"@chakra-ui/c-visually-hidden": patch
3+
"@chakra-ui/c-close-button": patch
4+
"@chakra-ui/c-accordion": patch
5+
"@chakra-ui/c-pin-input": patch
6+
"@chakra-ui/c-checkbox": patch
7+
"@chakra-ui/c-skip-nav": patch
8+
"@chakra-ui/c-avatar": patch
9+
"@chakra-ui/c-popper": patch
10+
"@chakra-ui/c-input": patch
11+
"@chakra-ui/c-code": patch
12+
"@chakra-ui/c-icon": patch
13+
"@chakra-ui/vue-layout": patch
14+
"@chakra-ui/vue-styled": patch
15+
"@chakra-ui/vue-system": patch
16+
"@chakra-ui/c-tag": patch
17+
"@chakra-ui/nuxt-next": patch
18+
"@chakra-ui/vue-next": patch
19+
---
20+
21+
Normalize emotion cache options

‎.changeset/blue-penguins-swim.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@chakra-ui/c-visually-hidden": patch
3+
"@chakra-ui/vue-accessibilty": patch
4+
"@chakra-ui/vue-styled": patch
5+
"@chakra-ui/vue-system": patch
6+
"@chakra-ui/nuxt-next": patch
7+
"@chakra-ui/vue-next": patch
8+
---
9+
10+
Resolve @emotion/css package dependency

‎.github/composite-actions/install/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,6 @@ runs:
4949
- name: Install dependencies
5050
shell: bash
5151
run: |
52-
pnpm install --frozen-lockfile
52+
pnpm install --no-frozen-lockfile
5353
npx cypress verify
5454
npx cypress info

‎@types/components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-02-25T05:49:19.660Z
9+
* This file was generated on 2023-02-25T15:12:13.221Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"

‎components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-02-25T05:49:19.660Z
9+
* This file was generated on 2023-02-25T15:12:13.221Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"

‎modules/nuxt/src/module.ts

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ import {
88
import type * as NuxtSchema from "@nuxt/schema"
99
import type * as Theme from "@chakra-ui/theme"
1010
import type * as ChakraUI from "@chakra-ui/vue-next"
11-
import * as Chakra from "@chakra-ui/vue-next"
11+
import {
12+
ChakraComponents,
13+
extendTheme as _extendTheme,
14+
} from "@chakra-ui/vue-next"
1215
import mergeWith from "lodash.mergewith"
1316
import { defu } from "defu"
1417

15-
const { extendTheme: _extendTheme } = Chakra
16-
const ChakraPlugin = Chakra.default
18+
// const { extendTheme: _extendTheme } = Chakra
1719

1820
/** Chakra UI Vue SSR Context State */
1921
export interface ChakraUISSRContext {
@@ -77,26 +79,29 @@ export default defineNuxtModule<ChakraModuleOptions>({
7779

7880
// Transpile
7981
nuxt.options.build.transpile.push("@chakra-ui/vue-next")
82+
nuxt.options.build.transpile.push("@emotion/server")
83+
nuxt.options.build.transpile.push("@emotion/css")
84+
nuxt.options.build.transpile.push("@emotion/css/create-instance")
8085

8186
// Auto-import components
82-
for (const component in Chakra) {
87+
for (const component in ChakraComponents) {
8388
/**
8489
* Group of strict checks to make sure that
8590
* we only generate types for components.
8691
*/
8792
if (
8893
component.startsWith("C") &&
8994
// @ts-ignore
90-
Chakra[component]?.name &&
95+
ChakraComponents[component]?.name &&
9196
// @ts-ignore
92-
Chakra[component]?.setup &&
97+
ChakraComponents[component]?.setup &&
9398
// @ts-ignore
94-
typeof Chakra[component]?.setup === "function"
99+
typeof ChakraComponents[component]?.setup === "function"
95100
) {
96101
addComponent({
97102
name: component,
98103
// @ts-ignore
99-
export: Chakra[component]?.name,
104+
export: ChakraComponents[component]?.name,
100105
filePath: "@chakra-ui/vue-next",
101106
})
102107
}
@@ -121,7 +126,13 @@ export default defineNuxtModule<ChakraModuleOptions>({
121126
const viteConfig = nuxt.options.vite || {}
122127
const extendedViteConfigOptions = {
123128
optimizeDeps: {
124-
include: ["lodash.mergewith", "lodash.camelcase", "lodash.memoize"],
129+
include: [
130+
"lodash.mergewith",
131+
"lodash.camelcase",
132+
"lodash.memoize",
133+
"@emotion/server",
134+
"@emotion/css",
135+
],
125136
},
126137
}
127138
const finalViteConfig = defu(viteConfig, extendedViteConfigOptions)

‎modules/nuxt/src/runtime/chakra.ts

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import type * as NuxtAppTypes from "nuxt/app"
22
import { defineNuxtPlugin, useAppConfig } from "#imports"
3-
import Chakra, {
4-
chakra,
3+
import {
54
cookieStorageManagerSSR,
6-
extendChakra,
75
ColorModeConstants,
86
extendTheme,
97
ColorModeScriptProps,
10-
domElements,
8+
createChakra,
119
} from "@chakra-ui/vue-next"
1210
import { parseCookies } from "h3"
1311
import type { ChakraModuleOptions } from "../module"
@@ -45,36 +43,30 @@ export default defineNuxtPlugin((nuxtApp) => {
4543
}
4644
}
4745

48-
// Install plugin
49-
app.use(
50-
// TODO: Fix type for Chakra plugin
51-
Chakra as any,
52-
extendChakra({
53-
...(chakraConfig.emotionCacheOptions && {
54-
emotionCacheOptions: chakraConfig.emotionCacheOptions,
55-
}),
56-
...(chakraConfig.cssReset && {
57-
cssReset: chakraConfig.cssReset,
58-
}),
59-
extendTheme: extendTheme({
60-
...(chakraConfig.extendTheme && chakraConfig.extendTheme),
61-
config: {
62-
...(chakraConfig.extendTheme?.config && {
63-
extendTheme: chakraConfig.extendTheme.config,
64-
}),
65-
initialColorMode: isBrowser
66-
? window.$chakraSSRContext?.theme?.ssrColorMode
67-
: ssrColorMode,
68-
},
69-
}),
70-
colorModeManager: cookieStorageManagerSSR(
71-
ColorModeConstants.CookieStorageKey
72-
),
73-
icons: chakraConfig.icons,
74-
})
75-
)
76-
77-
domElements.forEach((tag) => {
78-
app.component(`chakra.${tag}`, chakra(tag))
46+
const chakra = createChakra({
47+
...(chakraConfig.emotionCacheOptions && {
48+
emotionCacheOptions: chakraConfig.emotionCacheOptions,
49+
}),
50+
...(chakraConfig.cssReset && {
51+
cssReset: chakraConfig.cssReset,
52+
}),
53+
extendTheme: extendTheme({
54+
...(chakraConfig.extendTheme && chakraConfig.extendTheme),
55+
config: {
56+
...(chakraConfig.extendTheme?.config && {
57+
extendTheme: chakraConfig.extendTheme.config,
58+
}),
59+
initialColorMode: isBrowser
60+
? window.$chakraSSRContext?.theme?.ssrColorMode
61+
: ssrColorMode,
62+
},
63+
}),
64+
colorModeManager: cookieStorageManagerSSR(
65+
ColorModeConstants.CookieStorageKey
66+
),
67+
icons: chakraConfig.icons,
7968
})
69+
70+
// Install plugin
71+
app.use(chakra)
8072
})

‎modules/nuxt/src/runtime/emotion.client.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { hydrate } from "@emotion/css"
1+
import { hydrate } from "@chakra-ui/vue-system"
22
import { defineNuxtPlugin } from "#imports"
33

44
export default defineNuxtPlugin((_) => {

‎modules/nuxt/src/runtime/emotion.server.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import { extractCritical } from "@emotion/server"
21
import { NitroApp } from "nitropack"
32

3+
import createEmotionServer from "@emotion/server/create-instance"
4+
import { cache } from "@chakra-ui/vue-system"
5+
6+
const { extractCritical } = createEmotionServer(cache)
7+
48
/**
59
* Why are we declaring types for `defineNitroPlugin`?
610
*

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282
"@chakra-ui/utils": "2.0.15",
8383
"@chakra-ui/vue-auto-import": "workspace:*",
8484
"@chakra-ui/vue-next": "workspace:*",
85-
"@chakra-ui/vue-styled": "workspace:*",
8685
"@chakra-ui/vue-system": "workspace:*",
8786
"@chakra-ui/vue-test-utils": "workspace:*",
8887
"@changesets/changelog-github": "^0.3.0",

0 commit comments

Comments
 (0)