forked from tusen-ai/naive-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ssr): experimental ssr, simple static demo.
- Loading branch information
Showing
11 changed files
with
105 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| const express = require('express') | ||
| const { h, createSSRApp } = require('vue') | ||
| const { renderToString } = require('@vue/server-renderer') | ||
| const { setup } = require('@css-render/vue3-ssr') | ||
| const { NButton } = require('../lib') | ||
| const { NSsrProvider } = require('../lib/ssr') | ||
|
|
||
| const app = express() | ||
| const vueAppOptions = { | ||
| render () { | ||
| return h(NSsrProvider, null, { | ||
| default: () => h(NButton, null, { default: () => 'btn' }) | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| app.use((req, res) => { | ||
| const ssrApp = createSSRApp(vueAppOptions) | ||
| const { collect } = setup(ssrApp) | ||
| res.write('<!doctype html><html><head><title>SSR Test</title></head><body>') | ||
| renderToString(ssrApp).then((html) => { | ||
| res.write(collect() + html) | ||
| res.write('</body></html>') | ||
| res.end() | ||
| }) | ||
| }) | ||
|
|
||
| app.listen(8086) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // replace lodash-es | ||
| const { replaceDefine, srcDir } = require('../utils') | ||
|
|
||
| ;(async () => { | ||
| await replaceDefine([srcDir], { | ||
| "'lodash\\-es'": "'lodash'" | ||
| }) | ||
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 5 additions & 13 deletions
18
scripts/post-build/replace-define.js → scripts/utils/replace-define.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,22 @@ | ||
| const fs = require('fs').promises | ||
| const { walk, outDirs } = require('../utils') | ||
| const { walk } = require('.') | ||
|
|
||
| const define = { | ||
| __DEV__: "process.env.NODE_ENV !== 'production'" | ||
| } | ||
|
|
||
| exports.replaceDefine = async () => { | ||
| const defineKeys = Object.keys(define) | ||
| exports.replaceDefine = async (dirs, defines) => { | ||
| const defineKeys = Object.keys(defines) | ||
| const patterns = {} | ||
| defineKeys.forEach((key) => { | ||
| patterns[key] = new RegExp(key, 'g') | ||
| }) | ||
| for (const dir of outDirs) { | ||
| for (const dir of dirs) { | ||
| for await (const p of walk(dir)) { | ||
| const code = await fs.readFile(p, 'utf-8') | ||
| for (const key of defineKeys) { | ||
| const pattern = patterns[key] | ||
| if (pattern.test(code)) { | ||
| const outCode = code.replace(pattern, define[key]) | ||
| const outCode = code.replace(pattern, defines[key]) | ||
| await fs.writeFile(p, outCode) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (require.main === module) { | ||
| exports.replaceDefine() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,38 @@ | ||
| import { CNode } from 'css-render' | ||
| import { Ref, onBeforeMount } from 'vue' | ||
| import { Ref, onBeforeMount, inject } from 'vue' | ||
| import globalStyle from '../_styles/global/index.cssr' | ||
|
|
||
| globalStyle.mount({ | ||
| id: 'naive-ui-global', | ||
| head: true | ||
| }) | ||
| import { ssrInjectionKey } from '../ssr/context' | ||
| import { throwError } from '../_utils' | ||
|
|
||
| export default function useStyle ( | ||
| mountId: string, | ||
| style: CNode, | ||
| clsPrefixRef?: Ref<string | undefined> | ||
| ): void { | ||
| onBeforeMount(() => { | ||
| if (!style) { | ||
| if (__DEV__) throwError('use-style', 'No style is specified.') | ||
| return | ||
| } | ||
| const ssrAdapter = inject(ssrInjectionKey, undefined) | ||
| const mountStyle = (): void => { | ||
| const clsPrefix = clsPrefixRef?.value | ||
| style.mount({ | ||
| id: clsPrefix === undefined ? mountId : clsPrefix + mountId, | ||
| head: true, | ||
| props: { | ||
| bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined | ||
| } | ||
| }, | ||
| ssr: ssrAdapter | ||
| }) | ||
| globalStyle.mount({ | ||
| id: 'naive-ui/global', | ||
| head: true, | ||
| ssr: ssrAdapter | ||
| }) | ||
| }) | ||
| } | ||
| if (ssrAdapter) { | ||
| mountStyle() | ||
| } else { | ||
| onBeforeMount(mountStyle) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters