Merge pull request #36 from markthree/main

feat: add extractStyle
vueComponent · Jan 10, 2024 · 8525fc9 · 8525fc9
2 parents 7c43723 + 48db824
commit 8525fc9
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,24 @@ If you wish to add automatically import content from Ant Design Vue, you can add
 If there are components that are not imported automatically from @ant-design/icons-vue, you need to add the component name here.
 
 
+### extractStyle
+
+* Type: `boolean`
+
+> Solve page css flicker problem
+
+Extracts and injects css on demand, defaults to false
+
+```vue
+<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
+<template>
+  <a-extract-style>
+    <!-- Your page or component -->
+  </a-extract-style>
+</template>
+```
+
+
 ## Development
 
 ```bash

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,81 +1,83 @@
 <template>
-  <a-config-provider :theme="theme">
-    <div class="container">
-      <div>
+  <a-extract-style>
+    <a-config-provider :theme="theme">
+      <div class="container">
+        <div>
+          <a-space>
+            <a-button @click="changeTheme('dark')">
+              dark
+            </a-button>
+            <a-button @click="changeTheme('light')">
+              light
+            </a-button>
+          </a-space>
+        </div>
+        <a-alert
+          message="Success Text"
+          type="success"
+        />
+        <div>
+          icon:
+          <AlertFilled />
+          <LoadingOutlined />
+        </div>
+        <a-table v-bind="tableProps" />
         <a-space>
-          <a-button @click="changeTheme('dark')">
-            dark
+          <a-button
+            type="primary"
+            @click="handleMessage('success')"
+          >
+            message success 
           </a-button>
-          <a-button @click="changeTheme('light')">
-            light
+          <a-button @click="handleMessage('info')">
+            message info
           </a-button>
         </a-space>
-      </div>
-      <a-alert
-        message="Success Text"
-        type="success"
-      />
-      <div>
-        icon:
-        <AlertFilled />
-        <LoadingOutlined />
-      </div>
-      <a-table v-bind="tableProps" />
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleMessage('success')"
-        >
-          message success 
-        </a-button>
-        <a-button @click="handleMessage('info')">
-          message info
-        </a-button>
-      </a-space>
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleModal('success')"
-        >
-          modal success
-        </a-button>
-        <a-button @click="handleModal('info')">
-          modal info
-        </a-button>
-      </a-space>
-      <a-space>
-        <a-button
-          type="primary"
-          @click="handleNotification('success')"
+        <a-space>
+          <a-button
+            type="primary"
+            @click="handleModal('success')"
+          >
+            modal success
+          </a-button>
+          <a-button @click="handleModal('info')">
+            modal info
+          </a-button>
+        </a-space>
+        <a-space>
+          <a-button
+            type="primary"
+            @click="handleNotification('success')"
+          >
+            notification success
+          </a-button>
+          <a-button @click="handleNotification('info')">
+            notification info
+          </a-button>
+        </a-space>
+        <a-flex
+          gap="middle"
+          vertical
         >
-          notification success
-        </a-button>
-        <a-button @click="handleNotification('info')">
-          notification info
-        </a-button>
-      </a-space>
-      <a-flex
-        gap="middle"
-        vertical
-      >
-        <a-radio-group v-model:value="value">
-          <a-radio value="horizontal">
-            horizontal
-          </a-radio>
-          <a-radio value="vertical">
-            vertical
-          </a-radio>
-        </a-radio-group>
-        <a-flex :vertical="value === 'vertical'">
-          <div
-            v-for="(item, index) in new Array(4)"
-            :key="item"
-            :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
-          />
+          <a-radio-group v-model:value="value">
+            <a-radio value="horizontal">
+              horizontal
+            </a-radio>
+            <a-radio value="vertical">
+              vertical
+            </a-radio>
+          </a-radio-group>
+          <a-flex :vertical="value === 'vertical'">
+            <div
+              v-for="(item, index) in new Array(4)"
+              :key="item"
+              :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
+            />
+          </a-flex>
         </a-flex>
-      </a-flex>
-    </div>
-  </a-config-provider>
+      </div>
+    </a-config-provider>
+  </a-extract-style>
 </template>
 
 <script setup lang="ts">

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  antd: {},
+  antd: {
+    extractStyle: true
+  },
   imports:{
     autoImport:true
   },

diff --git a/src/config.ts b/src/config.ts
@@ -14,5 +14,6 @@ export { allComponents } from "./antdv"
 export const defaults:Options = {
   components: allComponents,
   icons: allIcons,
-  imports: allImports
+  imports: allImports,
+  extractStyle: false
 }
diff --git a/src/module.ts b/src/module.ts
@@ -1,4 +1,4 @@
-import { defineNuxtModule } from '@nuxt/kit'
+import { addComponent, createResolver, defineNuxtModule, useNuxt } from '@nuxt/kit'
 import { libraryName,defaults } from "./config"
 import { resolveComponents,resolveImports } from "./core"
 import type { Options } from './types'
@@ -18,9 +18,33 @@ export default defineNuxtModule<Partial<Options>>({
     nuxt.options.imports.autoImport !== false && resolveImports(options)
     nuxt.options.components !== false && resolveComponents(options)
 
+    if (options.extractStyle) {
+      extractStyle()
+    }
 
     // const resolver = createResolver(import.meta.url)
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     // addPlugin(resolver.resolve('./runtime/plugin'))
   }
 })
+
+function extractStyle() {
+  const nuxt = useNuxt()
+  // The spa does not need to be injected with css.
+  if (!nuxt.options.ssr) {
+    return;
+  }
+  // When generating, replace process.env.NODE_ENV to production (defaults to prerender).
+  // And antd relies on process.env.NODE_ENV when generating css prefixes.
+  if (nuxt.options.dev === false && nuxt.options.nitro.static) {
+    nuxt.options.nitro.replace ??= {};
+    nuxt.options.nitro.replace["process.env.NODE_ENV"] = "'production'";
+  }
+
+  // Adding auxiliary components
+  const resolver = createResolver(import.meta.url)
+  addComponent({
+    name: 'AExtractStyle',
+    filePath: resolver.resolve('./runtime/components/AExtractStyle.vue')
+  })
+}
diff --git a/src/runtime/components/AExtractStyle.vue b/src/runtime/components/AExtractStyle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { createCache, extractStyle, StyleProvider } from "ant-design-vue"
+
+const cache = createCache()
+
+const app = useNuxtApp()
+
+// Real-time style extraction at ssr
+// Pre-rendered extraction styles for ssg
+app.hook('app:rendered', () => {
+  useHead({
+    style: [extractStyle(cache, true)]
+  })
+})
+</script>
+
+<template>
+  <StyleProvider :cache="cache">
+    <slot />
+  </StyleProvider>
+</template>
diff --git a/src/types.ts b/src/types.ts
@@ -5,6 +5,7 @@ export interface Options {
   icons: false | PresetImport[]
   components: false | PresetImport[]
   imports: PresetImport[]
+  extractStyle: boolean
 }