feat(nuxt): programmatically install emotion

codebender828 · codebender828 · commit a1ffdaa45487 · 2023-01-26T23:07:24.000+08:00
diff --git a/examples/nuxt-app/.gitignore b/examples/nuxt-app/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
diff --git a/examples/nuxt-app/.npmrc b/examples/nuxt-app/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/examples/nuxt-app/.nuxtrc b/examples/nuxt-app/.nuxtrc
@@ -0,0 +1,2 @@
+imports.autoImport=false
+typescript.includeWorkspace=true
diff --git a/examples/nuxt-app/README.md b/examples/nuxt-app/README.md
@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/examples/nuxt-app/app.vue b/examples/nuxt-app/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>
diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  modules: ["@chakra-ui/nuxt-next"],
+})
diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@chakra-ui/nuxt-next": "workspace:*",
+    "nuxt": "^3.1.0"
+  }
+}
diff --git a/examples/nuxt-app/tsconfig.json b/examples/nuxt-app/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "@chakra-ui/utils": "2.0.14",
     "@chakra-ui/vue-auto-import": "workspace:*",
     "@chakra-ui/vue-next": "workspace:*",
+    "@chakra-ui/nuxt-next": "workspace:*",
     "@chakra-ui/vue-styled": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-test-utils": "workspace:*",
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -1,10 +1,6 @@
 import { computed, Plugin, ref, UnwrapRef } from "vue"
 import { theme as defaultTheme, baseTheme, Theme } from "@chakra-ui/theme"
-import {
-  AppColorModeContextSymbol,
-  ColorModeRef,
-  setupColorModeContext,
-} from "@chakra-ui/c-color-mode"
+import { ColorModeRef, setupColorModeContext } from "@chakra-ui/c-color-mode"
 import { toCSSVar, WithCSSVar } from "@chakra-ui/styled-system"
 import { chakra, injectGlobal } from "@chakra-ui/vue-system"
 import {
diff --git a/packages/nuxt/.nuxtrc b/packages/nuxt/.nuxtrc
@@ -1,2 +1,2 @@
-imports.autoImport=true
-typescript.includeWorkspace=true
+imports.autoImport=false
+typescript.includeWorkspace=false
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -31,7 +31,8 @@
   "dependencies": {
     "@chakra-ui/vue-next": "workspace:*",
     "@emotion/css": "^11.10.5",
-    "@emotion/server": "^11.10.0"
+    "@emotion/server": "^11.10.0",
+    "@nuxtjs/emotion": "1.0.0"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./module"
+import type * as ThemeTypes from "@chakra-ui/theme"
 
 import { default as ChakraUIModule } from "./module"
 
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -3,43 +3,27 @@ import {
   addPlugin,
   createResolver,
   addServerPlugin,
+  installModule,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
 
-declare global {
-  interface Window {
-    /** Serialized SSR IDs for emotion */
-    $emotionSSRIds: string[]
-  }
-}
-
 export default defineNuxtModule({
   meta: {
-    name: "@nuxtjs/emotion",
-    configKey: "emotion",
+    name: "@chakra-ui/nuxt-nect",
+    configKey: "chakra",
     compatibilty: ">=3.0.0",
   },
   setup(_, nuxt) {
-    // ensure `nitro.plugins` is initialized
-    nuxt.options.nitro.plugins = nuxt.options.nitro.plugins || []
-
-    nuxt.hook("nitro:config", (config) => {
-      // Prevent inlining emotion (+ the crucial css cache!) in dev mode
-      if (nuxt.options.dev) {
-        if (config.externals) {
-          config.externals.external ||= []
-          config.externals.external.push("@emotion/server")
-        }
-      }
-    })
-
+    console.log("chakra-ui-nuxt:module")
     /**
      * Register emotion plugin
      */
+
+    installModule("@nuxtjs/emotion")
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = resolve("./runtime")
     nuxt.options.build.transpile.push(runtimeDir)
-    addServerPlugin(resolve(runtimeDir, "emotion.server"))
-    addPlugin(resolve(runtimeDir, "emotion.client"))
+    addServerPlugin(resolve(runtimeDir, "chakra.server"))
+    addPlugin(resolve(runtimeDir, "chakra.client"))
   },
 })
diff --git a/packages/nuxt/src/runtime/chakra.client.ts b/packages/nuxt/src/runtime/chakra.client.ts
@@ -0,0 +1,7 @@
+import type * as NuxtAppTypes from "nuxt/app"
+import { defineNuxtPlugin } from "#imports"
+import { ChakraPluginOptions } from "@chakra-ui/vue-next"
+
+export default defineNuxtPlugin((_) => {
+  console.log("chakra-ui-nuxt:client_runtime")
+})
diff --git a/packages/nuxt/src/runtime/chakra.server.ts b/packages/nuxt/src/runtime/chakra.server.ts
@@ -1,4 +1,3 @@
-import { extractCritical } from "@emotion/server"
 import type { NitroApp } from "nitropack"
 
 /**
@@ -23,13 +22,5 @@ export function defineNitroPlugin(def: NitroAppPlugin): NitroAppPlugin {
 }
 
 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook("render:html", (html) => {
-    const { ids, css } = extractCritical(html.body)
-    html.head.push(`<style data-emotion="${ids.join(" ")}">${css}</style>`)
-    html.head.push(
-      `<script data-emotion="${ids.join(
-        " "
-      )}">window.$emotionSSRIds=${JSON.stringify(ids)}</script>`
-    )
-  })
+  console.log("chakra-ui-nuxt:server_runtime")
 })
diff --git a/packages/nuxt/src/runtime/emotion.client.ts b/packages/nuxt/src/runtime/emotion.client.ts
diff --git a/packages/nuxt/tsconfig.json b/packages/nuxt/tsconfig.json
@@ -1,4 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  // "extends": "../../tsconfig.json",
+  "extends": "./playground/.nuxt/tsconfig.json",
   "include": ["src", "./index.tsx", "./index.ts"]
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,8 @@ @@
 +node_modules
 +*.log*
 +.nuxt
 +.nitro
 +.cache
 +.output
 +.env
 +dist
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+shamefully-hoist=true`
	`2`	`+strict-peer-dependencies=false`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+imports.autoImport=false`
	`2`	`+typescript.includeWorkspace=true`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default defineNuxtConfig({`
	`2`	`+ modules: ["@chakra-ui/nuxt-next"],`
	`3`	`+})`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "./.nuxt/tsconfig.json"`
	`3`	`+}`