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

Commit 30a8702

Browse files
codebender828codebender828
committed
chore: remove templates - REMEMBER THIS COMMIT
1 parent 8d658d4 commit 30a8702

File tree

11 files changed

+127
-103
lines changed

11 files changed

+127
-103
lines changed

‎modules/nuxt/package.json

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,13 @@
1717
"author": "Jonathan Bakebwa [email protected]",
1818
"license": "MIT",
1919
"scripts": {
20-
"build": "tsup --onSuccess 'cp -a src/templates dist' && pnpm build:types",
21-
"build:fast": "tsup",
22-
"dev": "tsup --watch",
2320
"clean": "rimraf dist .turbo",
24-
"nuxt:build": "nuxt-module-build",
25-
"nuxt:build:fast": "nuxt-module-build",
26-
"nuxt:dev:build": "nuxi build playground",
27-
"nuxt:dev": "NODE_OPTIONS --experimental-specifier-resolution=node nuxi dev playground",
21+
"build": "nuxt-module-build",
22+
"build:fast": "nuxt-module-build",
23+
"dev:build": "nuxi build playground",
24+
"dev": "nuxi dev playground",
2825
"types:check": "tsc --noEmit",
29-
"build:types": "tsup src --dts-only"
26+
"build:types": "echo 'noop -> @chakra-ui/nuxt-next types already built'"
3027
},
3128
"dependencies": {
3229
"@chakra-ui/c-color-mode": "workspace:*",

‎modules/nuxt/playground/app.vue

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,32 @@
11
<template>
2-
<div>
3-
<div :class="styles.root">
4-
Nuxt module playground!
5-
</div>
6-
<button :class="styles.button">
7-
Hello World
8-
</button>
9-
</div>
2+
<c-h-stack
3+
display="flex"
4+
min-h="600px"
5+
justify-content="center"
6+
align-items="center"
7+
>
8+
<!-- <CButton>Hello Chakra</CButton> -->
9+
<chakra.button
10+
@click="toggleColorMode"
11+
px="4"
12+
py="3"
13+
bg="red"
14+
color="white"
15+
font-weight="bold"
16+
>
17+
Click me to toggle | {{ colorMode }}
18+
</chakra.button>
19+
20+
<!-- <c-avatar name="Jonathan Bakebwa" /> -->
21+
22+
<chakra.button px="4" py="3" bg="$brand" font-weight="bold">
23+
Extended Component
24+
</chakra.button>
25+
</c-h-stack>
1026
</template>
1127

1228
<script lang="ts" setup>
13-
import { css } from '@emotion/css'
29+
import { chakra, useColorMode } from "@chakra-ui/vue-next"
1430
15-
const styles = reactive({
16-
root: css({
17-
paddingInline: '16px',
18-
paddingBlock: '12px',
19-
fontSize: '1rem',
20-
fontFamily: 'system ui',
21-
color: 'white',
22-
borderRadius: '20px',
23-
backgroundColor: 'indigo'
24-
}),
25-
button: css({
26-
padding: '13px 18px',
27-
position: 'relative',
28-
display: 'inline-flex',
29-
alignItems: 'center',
30-
justifyContent: 'center',
31-
whiteSpace: 'pre',
32-
borderRadius: '9999px',
33-
borderWidth: '2px',
34-
borderColor: 'transparent',
35-
backgroundColor: 'rgb(245 245 240)',
36-
fontSize: '15px',
37-
fontWeight: '400',
38-
lineHeight: '21px',
39-
letterSpacing: '.011em',
40-
cursor: 'pointer',
41-
transitionProperty:
42-
'color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter',
43-
transitionTimingFunction: 'cubic-bezier(.4,0,.2,1)',
44-
transitionDuration: '.15s',
45-
'&:hover': {
46-
backgroundColor: 'rgb(79 77 77)',
47-
color: 'rgb(245 245 240)'
48-
}
49-
})
50-
})
31+
const { colorMode, toggleColorMode } = useColorMode()
5132
</script>

‎modules/nuxt/playground/nuxt.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,13 @@ import chakraModule from "../src/module"
33
import type * as NuxtSchema from "@nuxt/schema"
44

55
export default defineNuxtConfig({
6+
ssr: true,
67
modules: [chakraModule],
8+
// chakra: {
9+
// extendTheme: {
10+
// colors: {
11+
// $brand: "#f5f",
12+
// },
13+
// },
14+
// },
715
})

‎modules/nuxt/playground/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"private": true,
3-
"name": "@chakra-ui/nuxt-next-playground"
3+
"name": "@chakra-ui/nuxt-next-playground",
4+
"dependencies": {
5+
"@chakra-ui/nuxt-next": "workspace:*"
6+
}
47
}

‎modules/nuxt/src/module.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
addComponent,
99
} from "@nuxt/kit"
1010
import type * as NuxtSchema from "@nuxt/schema"
11+
import type * as Theme from "@chakra-ui/theme"
1112
import {
1213
ChakraPluginOptions,
1314
extendTheme as _extendTheme,
@@ -81,7 +82,6 @@ export default defineNuxtModule<ChakraModuleOptions>({
8182
const { resolve } = createResolver(import.meta.url)
8283
const runtimeDir = resolve("./runtime")
8384
nuxt.options.build.transpile.push(runtimeDir)
84-
const templatesDir = resolve("./templates")
8585

8686
for (const Component of getChakraComponents()) {
8787
addComponent({
@@ -92,22 +92,22 @@ export default defineNuxtModule<ChakraModuleOptions>({
9292
}
9393

9494
// Resolve template and inject plugin
95+
addPlugin(resolve(runtimeDir, "chakra"))
9596
addServerPlugin(resolve(runtimeDir, "chakra.server"))
96-
addPlugin(resolve(runtimeDir, "chakra.factory.universal"))
97-
addPluginTemplate(
98-
{
99-
src: resolve(templatesDir, "chakra.universal.t.js"),
100-
options: {
101-
extendTheme,
102-
cssReset,
103-
icons,
104-
emotionCacheOptions,
105-
isBaseTheme,
106-
} as ChakraPluginOptions,
107-
},
108-
{
109-
append: true,
110-
}
111-
)
97+
// addPluginTemplate(
98+
// {
99+
// src: resolve(runtimeDir, "templates/chakra.universal.t.js"),
100+
// options: {
101+
// extendTheme,
102+
// cssReset,
103+
// icons,
104+
// emotionCacheOptions,
105+
// isBaseTheme,
106+
// } as ChakraPluginOptions,
107+
// },
108+
// {
109+
// append: true,
110+
// }
111+
// )
112112
},
113113
})

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type * as NuxtAppTypes from "nuxt/app"
2+
import { defineNuxtPlugin } from "#imports"
3+
import Chakra, {
4+
chakra,
5+
cookieStorageManagerSSR,
6+
extendChakra,
7+
ColorModeConstants,
8+
extendTheme,
9+
ColorModeScriptProps,
10+
} from "@chakra-ui/vue-next"
11+
import { domElements } from "@chakra-ui/vue-system"
12+
import { parseCookies } from "h3"
13+
14+
type AllowedSSRColorMode = Exclude<
15+
ColorModeScriptProps["initialColorMode"],
16+
"system"
17+
>
18+
19+
export default defineNuxtPlugin((nuxtApp) => {
20+
const app = nuxtApp.vueApp
21+
const isBrowser = typeof document !== "undefined"
22+
23+
// SSR Color Mode Handling
24+
let ssrColorMode
25+
const event = nuxtApp.ssrContext?.event
26+
27+
if (event) {
28+
const parsedCookies = parseCookies(event)
29+
const colorMode = parsedCookies[ColorModeConstants.CookieStorageKey]
30+
if (colorMode) {
31+
ssrColorMode = colorMode
32+
} else {
33+
// TODO: Replace with options color mode
34+
ssrColorMode = "light"
35+
}
36+
}
37+
38+
// Install plugin
39+
app.use(
40+
Chakra,
41+
extendChakra({
42+
cssReset: true,
43+
extendTheme: extendTheme({
44+
colors: {
45+
$brand: "#f5f",
46+
},
47+
}),
48+
colorModeManager: cookieStorageManagerSSR(
49+
ColorModeConstants.CookieStorageKey
50+
),
51+
})
52+
)
53+
54+
domElements.forEach((tag) => {
55+
app.component(`chakra.${tag}`, chakra(tag))
56+
})
57+
})

‎modules/nuxt/src/runtime/templates/chakra.universal.t.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ import Chakra, {
33
cookieStorageManagerSSR,
44
extendChakra,
55
ColorModeConstants,
6-
extendBaseTheme
76
} from "@chakra-ui/vue-next"
87
import { parseCookies } from "h3"
9-
import { baseTheme } from "@chakra-ui/theme"
10-
118

129
const extendedTheme = <%= (function() {
1310
// keep a list of serialized functions
@@ -63,13 +60,15 @@ export default defineNuxtPlugin((nuxtApp) => {
6360

6461
const pluginOptions = {
6562
cssReset,
66-
extendTheme: extendBaseTheme(extendedTheme, {
63+
extendTheme: {
64+
...extendedTheme,
6765
config: {
66+
...extendedTheme.config,
6867
initialColorMode: isBrowser
6968
? window.$chakraSSRContext?.theme?.ssrColorMode
7069
: ssrColorMode,
7170
},
72-
}),
71+
},
7372
...(icons !== "NULL" && {
7473
icons,
7574
}),

‎modules/nuxt/test/basic.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { fileURLToPath } from "url"
22
import { setup, $fetch } from "@nuxt/test-utils"
3-
describe("nust emotion ssr", async () => {
3+
describe("nuxt emotion ssr", async () => {
44
await setup({
55
rootDir: fileURLToPath(new URL("../playground", import.meta.url)),
66
})

‎modules/nuxt/test/fixture/nuxt.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineNuxtConfig } from "nuxt/config"
2-
import chakraModule from "../.."
2+
import chakraModule from "../../src"
33

44
export default defineNuxtConfig({
55
modules: [chakraModule],

0 commit comments

Comments
 (0)