mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-11-21 01:13:16 +08:00
refactor(ssr): remove ssr-provider & use new hook from @css-render/vue3-ssr
This commit is contained in:
07akioni
parent
832c759524
commit
97bc288520
@ -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",
|
||||
|
||||
@ -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 }
|
||||
)
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1 +1,10 @@
|
||||
You need to install `webpack` & `webpack-cli` globally.
|
||||
|
||||
```
|
||||
./pre-build.sh
|
||||
./build.sh
|
||||
|
||||
node dist/server.js
|
||||
|
||||
# browse localhost:8086
|
||||
```
|
||||
|
||||
@ -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<string>
|
||||
): Ref<RtlItem | undefined> | undefined {
|
||||
if (!rtlStateRef) return undefined
|
||||
const ssrAdapter = inject(ssrInjectionKey, undefined)
|
||||
const ssrAdapter = useSsrAdapter()
|
||||
const componentRtlStateRef = computed(() => {
|
||||
const { value: rtlState } = rtlStateRef
|
||||
if (!rtlState) {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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<N, T = {}, R = any> {
|
||||
name: N
|
||||
@ -91,7 +91,7 @@ function useTheme<N, T, R> (
|
||||
props: UseThemeProps<Theme<N, T, R>>,
|
||||
clsPrefixRef?: Ref<string | undefined>
|
||||
): ComputedRef<MergedTheme<Theme<N, T, R>>> {
|
||||
const ssrAdapter = inject(ssrInjectionKey, undefined)
|
||||
const ssrAdapter = useSsrAdapter()
|
||||
if (style) {
|
||||
const mountStyle = (): void => {
|
||||
const clsPrefix = clsPrefixRef?.value
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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?.()
|
||||
}
|
||||
})
|
||||
@ -1,4 +0,0 @@
|
||||
import { InjectionKey } from 'vue'
|
||||
import { ssrAdapter } from '@css-render/vue3-ssr'
|
||||
|
||||
export const ssrInjectionKey: InjectionKey<typeof ssrAdapter> = Symbol('ssr')
|
||||
@ -1 +0,0 @@
|
||||
export { default as NSsrProvider } from './SsrProvider'
|
||||
@ -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()
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -1,307 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`n-ssr-provider should work with import on demand 1`] = `
|
||||
"<style cssr-id=\\"nButton\\">
|
||||
.n-button {
|
||||
|
||||
font-weight: var(--font-weight);
|
||||
line-height: 1;
|
||||
font-family: inherit;
|
||||
padding: var(--padding);
|
||||
height: var(--height);
|
||||
font-size: var(--font-size);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-color);
|
||||
background-color: var(--color);
|
||||
width: var(--width);
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color .3s var(--bezier),
|
||||
background-color .3s var(--bezier),
|
||||
opacity .3s var(--bezier),
|
||||
border-color .3s var(--bezier);
|
||||
|
||||
}
|
||||
|
||||
.n-button.n-button--color .n-button__border {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.n-button.n-button--color.n-button--disabled .n-button__border {
|
||||
border-color: var(--border-color-disabled);
|
||||
}
|
||||
|
||||
.n-button.n-button--color:not(.n-button--disabled):focus .n-button__state-border {
|
||||
border-color: var(--border-color-focus);
|
||||
}
|
||||
|
||||
.n-button.n-button--color:not(.n-button--disabled):hover .n-button__state-border {
|
||||
border-color: var(--border-color-hover);
|
||||
}
|
||||
|
||||
.n-button.n-button--color:not(.n-button--disabled):active .n-button__state-border {
|
||||
border-color: var(--border-color-pressed);
|
||||
}
|
||||
|
||||
.n-button.n-button--color:not(.n-button--disabled).n-button--pressed .n-button__state-border {
|
||||
border-color: var(--border-color-pressed);
|
||||
}
|
||||
|
||||
.n-button.n-button--disabled {
|
||||
background-color: var(--color-disabled);
|
||||
color: var(--text-color-disabled);
|
||||
}
|
||||
|
||||
.n-button.n-button--disabled .n-button__border {
|
||||
border: var(--border-disabled);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):focus {
|
||||
background-color: var(--color-focus);
|
||||
color: var(--text-color-focus);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):focus .n-button__state-border {
|
||||
border: var(--border-focus);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):hover {
|
||||
background-color: var(--color-hover);
|
||||
color: var(--text-color-hover);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):hover .n-button__state-border {
|
||||
border: var(--border-hover);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):active {
|
||||
background-color: var(--color-pressed);
|
||||
color: var(--text-color-pressed);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled):active .n-button__state-border {
|
||||
border: var(--border-pressed);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled).n-button--pressed {
|
||||
background-color: var(--color-pressed);
|
||||
color: var(--text-color-pressed);
|
||||
}
|
||||
|
||||
.n-button:not(.n-button--disabled).n-button--pressed .n-button__state-border {
|
||||
border: var(--border-pressed);
|
||||
}
|
||||
|
||||
.n-button .n-base-wave {
|
||||
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: var(--ripple-duration);
|
||||
animation-timing-function: var(--bezier-ease-out), var(--bezier-ease-out);
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-base-wave.n-base-wave--active {
|
||||
z-index: 1;
|
||||
animation-name: button-wave-spread, button-wave-opacity;
|
||||
}
|
||||
|
||||
.n-button .n-button__border, .n-button .n-button__state-border {
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
transition: border-color .3s var(--bezier);
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__border {
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.n-button .n-button__state-border {
|
||||
border: var(--border);
|
||||
border-color: #0000;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.n-button .n-button__icon {
|
||||
|
||||
margin: var(--icon-margin);
|
||||
margin-left: 0;
|
||||
height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
max-width: var(--icon-size);
|
||||
font-size: var(--icon-size);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__icon .n-icon-slot {
|
||||
|
||||
height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-from, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-to {
|
||||
transform: translateY(-50%) scale(0.75);
|
||||
left: 0;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-to, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-from {
|
||||
transform: scale(1) translateY(-50%);
|
||||
left: 0;
|
||||
top: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-active, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-active {
|
||||
transform-origin: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
||||
}
|
||||
|
||||
.n-button .n-button__icon.fade-in-width-expand-transition-leave-from, .n-button .n-button__icon.fade-in-width-expand-transition-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.n-button .n-button__icon.fade-in-width-expand-transition-leave-to, .n-button .n-button__icon.fade-in-width-expand-transition-enter-from {
|
||||
|
||||
opacity: 0!important;
|
||||
margin-left: 0!important;
|
||||
margin-right: 0!important;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__icon.fade-in-width-expand-transition-leave-active {
|
||||
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity .2s cubic-bezier(.4, 0, .2, 1),
|
||||
max-width .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
||||
margin-left .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
||||
margin-right .2s cubic-bezier(.4, 0, .2, 1) .1s;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__icon.fade-in-width-expand-transition-enter-active {
|
||||
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
||||
max-width .2s cubic-bezier(.4, 0, .2, 1),
|
||||
margin-left .2s cubic-bezier(.4, 0, .2, 1),
|
||||
margin-right .2s cubic-bezier(.4, 0, .2, 1);
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__content {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.n-button .n-button__content ~ .n-button__icon {
|
||||
margin: var(--icon-margin);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.n-button.n-button--block {
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.n-button.n-button--dashed .n-button__border, .n-button.n-button--dashed .n-button__state-border {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
.n-button.n-button--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
@keyframes button-wave-spread {
|
||||
from {
|
||||
box-shadow: 0 0 0.5px 0 var(--ripple-color);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 0.5px 4.5px var(--ripple-color);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes button-wave-opacity {
|
||||
from {
|
||||
opacity: var(--wave-opacity);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style cssr-id=\\"naive-ui/global\\">
|
||||
body {
|
||||
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";
|
||||
line-height: 1.6;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
}
|
||||
|
||||
body input {
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
}
|
||||
</style>
|
||||
<style cssr-id=\\"nBaseWave\\">
|
||||
.n-base-wave {
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
|
||||
}
|
||||
</style>
|
||||
<!--[--><button class=\\"n-button n-button--default-type\\" tabindex=\\"0\\" type=\\"button\\" style=\\"--bezier:cubic-bezier(.4, 0, .2, 1);--bezier-ease-out:cubic-bezier(0, 0, .2, 1);--ripple-duration:.6s;--opacity-disabled:0.5;--wave-opacity:0.6;font-weight:400;--color:#0000;--color-hover:#0000;--color-pressed:#0000;--color-focus:#0000;--color-disabled:#0000;--ripple-color:#18a058;--text-color:rgb(51, 54, 57);--text-color-hover:#36ad6a;--text-color-pressed:#0c7a43;--text-color-focus:#36ad6a;--text-color-disabled:rgb(51, 54, 57);--border:1px solid rgb(224, 224, 230);--border-hover:1px solid #36ad6a;--border-pressed:1px solid #0c7a43;--border-focus:1px solid #36ad6a;--border-disabled:1px solid rgb(224, 224, 230);--width:initial;--height:34px;--font-size:14px;--padding:0 14px;--icon-size:18px;--icon-margin:6px;--border-radius:3px;\\"><!----><!----><span class=\\"n-button__content\\">btn</span><div aria-hidden=\\"true\\" class=\\"n-base-wave\\"></div><div aria-hidden=\\"true\\" class=\\"n-button__border\\" style=\\"\\"></div><div aria-hidden=\\"true\\" class=\\"n-button__state-border\\" style=\\"\\"></div></button><!--]-->"
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user