From 97bc288520bc8e68c487ab2917df38782ed684f2 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 12 Jun 2021 18:16:23 +0800 Subject: [PATCH] refactor(ssr): remove ssr-provider & use new hook from @css-render/vue3-ssr --- package.json | 6 +- playground/ssr/app.js | 27 +- playground/ssr/pre-build.sh | 6 +- playground/ssr/readme.md | 9 + src/_mixins/use-rtl.ts | 6 +- src/_mixins/use-style.ts | 6 +- src/_mixins/use-theme.ts | 4 +- src/components.ts | 1 - src/ssr/SsrProvider.tsx | 17 - src/ssr/context.ts | 4 - src/ssr/index.ts | 1 - src/ssr/tests/SsrProvider.spec.ts | 25 -- .../__snapshots__/SsrProvider.spec.ts.snap | 307 ------------------ 13 files changed, 35 insertions(+), 384 deletions(-) delete mode 100644 src/ssr/SsrProvider.tsx delete mode 100644 src/ssr/context.ts delete mode 100644 src/ssr/index.ts delete mode 100644 src/ssr/tests/SsrProvider.spec.ts delete mode 100644 src/ssr/tests/__snapshots__/SsrProvider.spec.ts.snap diff --git a/package.json b/package.json index b8d6a8ff3..948a54688 100644 --- a/package.json +++ b/package.json @@ -108,12 +108,12 @@ "vite": "^2.1.3" }, "dependencies": { - "@css-render/plugin-bem": "^0.15.2", - "@css-render/vue3-ssr": "^0.15.2", + "@css-render/plugin-bem": "^0.15.3", + "@css-render/vue3-ssr": "^0.15.3", "@types/lodash": "^4.14.170", "@types/lodash-es": "^4.17.4", "async-validator": "^3.5.1", - "css-render": "^0.15.2", + "css-render": "^0.15.3", "date-fns": "^2.19.0", "evtd": "^0.2.2", "highlight.js": "^11.0.1", diff --git a/playground/ssr/app.js b/playground/ssr/app.js index 09fb84560..418e402f9 100644 --- a/playground/ssr/app.js +++ b/playground/ssr/app.js @@ -1,5 +1,5 @@ import { h, defineComponent, ref } from 'vue' -import { NButton, NSsrProvider } from 'naive-ui' +import { NButton } from 'naive-ui' const App = defineComponent({ setup () { @@ -8,22 +8,15 @@ const App = defineComponent({ } }, render () { - return h( - NSsrProvider, - { - ssr: typeof window === 'undefined' - }, - { - default: () => - h( - NButton, - { - onClick: () => this.count++ - }, - { default: () => this.count } - ) - } - ) + return [ + h( + NButton, + { + onClick: () => this.count++ + }, + { default: () => this.count } + ) + ] } }) diff --git a/playground/ssr/pre-build.sh b/playground/ssr/pre-build.sh index 411f0490b..938ebc567 100755 --- a/playground/ssr/pre-build.sh +++ b/playground/ssr/pre-build.sh @@ -1 +1,5 @@ -./../../scripts/pre-build-site/pre-build-site.sh +# make sure cwd is the sh's dir + +cd ./../../ + +./scripts/pre-build-site/pre-build-site.sh diff --git a/playground/ssr/readme.md b/playground/ssr/readme.md index c1c1c00e9..138b5b94e 100644 --- a/playground/ssr/readme.md +++ b/playground/ssr/readme.md @@ -1 +1,10 @@ You need to install `webpack` & `webpack-cli` globally. + +``` +./pre-build.sh +./build.sh + +node dist/server.js + +# browse localhost:8086 +``` diff --git a/src/_mixins/use-rtl.ts b/src/_mixins/use-rtl.ts index 475beccbb..8ae0df295 100644 --- a/src/_mixins/use-rtl.ts +++ b/src/_mixins/use-rtl.ts @@ -1,5 +1,5 @@ -import { Ref, onBeforeMount, inject, watchEffect, computed } from 'vue' -import { ssrInjectionKey } from '../ssr/context' +import { Ref, onBeforeMount, watchEffect, computed } from 'vue' +import { useSsrAdapter } from '@css-render/vue3-ssr' import { RtlEnabledState, RtlItem @@ -15,7 +15,7 @@ export default function useRtl ( clsPrefixRef: Ref ): Ref | undefined { if (!rtlStateRef) return undefined - const ssrAdapter = inject(ssrInjectionKey, undefined) + const ssrAdapter = useSsrAdapter() const componentRtlStateRef = computed(() => { const { value: rtlState } = rtlStateRef if (!rtlState) { diff --git a/src/_mixins/use-style.ts b/src/_mixins/use-style.ts index 15d40fcff..5e019a861 100644 --- a/src/_mixins/use-style.ts +++ b/src/_mixins/use-style.ts @@ -1,7 +1,7 @@ import { CNode } from 'css-render' -import { Ref, onBeforeMount, inject } from 'vue' +import { Ref, onBeforeMount } from 'vue' +import { useSsrAdapter } from '@css-render/vue3-ssr' import globalStyle from '../_styles/global/index.cssr' -import { ssrInjectionKey } from '../ssr/context' import { throwError } from '../_utils' export default function useStyle ( @@ -13,7 +13,7 @@ export default function useStyle ( if (__DEV__) throwError('use-style', 'No style is specified.') return } - const ssrAdapter = inject(ssrInjectionKey, undefined) + const ssrAdapter = useSsrAdapter() const mountStyle = (): void => { const clsPrefix = clsPrefixRef?.value style.mount({ diff --git a/src/_mixins/use-theme.ts b/src/_mixins/use-theme.ts index f555503cc..69dc13ce1 100644 --- a/src/_mixins/use-theme.ts +++ b/src/_mixins/use-theme.ts @@ -8,12 +8,12 @@ import { PropType } from 'vue' import { merge } from 'lodash-es' +import { useSsrAdapter } from '@css-render/vue3-ssr' import globalStyle from '../_styles/global/index.cssr' import { CNode } from 'css-render' import type { GlobalTheme } from '../config-provider' import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider' import type { ThemeCommonVars } from '../_styles/common' -import { ssrInjectionKey } from '../ssr/context' export interface Theme { name: N @@ -91,7 +91,7 @@ function useTheme ( props: UseThemeProps>, clsPrefixRef?: Ref ): ComputedRef>> { - const ssrAdapter = inject(ssrInjectionKey, undefined) + const ssrAdapter = useSsrAdapter() if (style) { const mountStyle = (): void => { const clsPrefix = clsPrefixRef?.value diff --git a/src/components.ts b/src/components.ts index 89db70743..569f47177 100644 --- a/src/components.ts +++ b/src/components.ts @@ -60,7 +60,6 @@ export * from './skeleton' export * from './slider' export * from './space' export * from './spin' -export * from './ssr' export * from './statistic' export * from './steps' export * from './switch' diff --git a/src/ssr/SsrProvider.tsx b/src/ssr/SsrProvider.tsx deleted file mode 100644 index 479ccbc1f..000000000 --- a/src/ssr/SsrProvider.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { defineComponent, provide } from 'vue' -import { ssrAdapter } from '@css-render/vue3-ssr' -import { ssrInjectionKey } from './context' - -export default defineComponent({ - name: 'SsrProvider', - props: { - ssr: { - type: Boolean, - default: true - } - }, - setup ({ ssr }, { slots }) { - ssr && provide(ssrInjectionKey, ssrAdapter) - return () => slots.default?.() - } -}) diff --git a/src/ssr/context.ts b/src/ssr/context.ts deleted file mode 100644 index 060f7892c..000000000 --- a/src/ssr/context.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { InjectionKey } from 'vue' -import { ssrAdapter } from '@css-render/vue3-ssr' - -export const ssrInjectionKey: InjectionKey = Symbol('ssr') diff --git a/src/ssr/index.ts b/src/ssr/index.ts deleted file mode 100644 index bb5a70ad4..000000000 --- a/src/ssr/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NSsrProvider } from './SsrProvider' diff --git a/src/ssr/tests/SsrProvider.spec.ts b/src/ssr/tests/SsrProvider.spec.ts deleted file mode 100644 index 4a3d0393a..000000000 --- a/src/ssr/tests/SsrProvider.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { h, createSSRApp } from 'vue' -import { renderToString } from '@vue/server-renderer' -import { NSsrProvider } from '../index' -import { NButton } from '../../index' -import { setup } from '@css-render/vue3-ssr' - -describe('n-ssr-provider', () => { - it('should work with import on demand', (done) => { - const app = createSSRApp({ - render () { - return h(NSsrProvider, null, { - default: () => - h(NButton, null, { - default: () => 'btn' - }) - }) - } - }) - const { collect } = setup(app) - renderToString(app).then((v) => { - expect(collect() + '\n' + v).toMatchSnapshot() - done() - }) - }) -}) diff --git a/src/ssr/tests/__snapshots__/SsrProvider.spec.ts.snap b/src/ssr/tests/__snapshots__/SsrProvider.spec.ts.snap deleted file mode 100644 index 9f3f1b8ce..000000000 --- a/src/ssr/tests/__snapshots__/SsrProvider.spec.ts.snap +++ /dev/null @@ -1,307 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`n-ssr-provider should work with import on demand 1`] = ` -" - - -" -`;