2024-01-29 09:26:07 +08:00

48 lines
1.2 KiB
JavaScript

import { inject } from 'vue';
const ssrContextKey = Symbol('@css-render/vue3-ssr');
function createStyleString(id, style) {
return `<style cssr-id="${id}">\n${style}\n</style>`;
}
function ssrAdapter(id, style) {
const ssrContext = inject(ssrContextKey, null);
if (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
if (ids.has(id))
return;
if (styles !== null) {
ids.add(id);
styles.push(createStyleString(id, style));
}
}
const isBrowser = typeof document !== 'undefined';
export function useSsrAdapter() {
if (isBrowser)
return undefined;
const context = inject(ssrContextKey, null);
if (context === null)
return undefined;
return {
adapter: ssrAdapter,
context
};
}
export function setup(app) {
const styles = [];
const ssrContext = {
styles,
ids: new Set()
};
app.provide(ssrContextKey, ssrContext);
return {
collect() {
const res = styles.join('\n');
styles.length = 0;
return res;
}
};
}