Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 2x 2x 2x 2x 2x 2x 2x 2x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import { inject, InjectionKey, App } from 'vue' interface CssrSsrContext { styles: string[] ids: Set<string> } const ssrContextKey: InjectionKey<CssrSsrContext> = Symbol( '@css-render/vue3-ssr' ) function createStyleString (id: string, style: string): string { return `<style cssr-id="${id}">\n${style}\n</style>` } function ssrAdapter (id: string, style: string): void { const ssrContext = inject(ssrContextKey, null) Iif (ssrContext === null) { console.error('[css-render/vue3-ssr]: no ssr context found.') return } const { styles, ids } = ssrContext // we need to impl other options to make it behaves the same as the client side Iif (ids.has(id)) return Eif (styles !== null) { ids.add(id) styles.push(createStyleString(id, style)) } } const isBrowser = typeof document !== 'undefined' export function useSsrAdapter (): | { adapter: typeof ssrAdapter context: CssrSsrContext } | undefined { Iif (isBrowser) return undefined const context = inject(ssrContextKey, null) Iif (context === null) return undefined return { adapter: ssrAdapter, context } } interface SsrHandle { collect: () => string } export function setup (app: App): SsrHandle { const styles: string[] = [] const ssrContext: CssrSsrContext = { styles, ids: new Set<string>() } app.provide(ssrContextKey, ssrContext) return { collect () { const res = styles.join('\n') styles.length = 0 return res } } } |