|
|
|
|
@ -17,9 +17,15 @@ export default function ssr(component, options) {
|
|
|
|
|
});
|
|
|
|
|
const { name } = component;
|
|
|
|
|
// create $$render function
|
|
|
|
|
renderer.render(trim(component.fragment.children), Object.assign({
|
|
|
|
|
renderer.render(
|
|
|
|
|
trim(component.fragment.children),
|
|
|
|
|
Object.assign(
|
|
|
|
|
{
|
|
|
|
|
locate: component.locate
|
|
|
|
|
}, options));
|
|
|
|
|
},
|
|
|
|
|
options
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
// TODO put this inside the Renderer class
|
|
|
|
|
const literal = renderer.pop();
|
|
|
|
|
// TODO concatenate CSS maps
|
|
|
|
|
@ -35,7 +41,9 @@ export default function ssr(component, options) {
|
|
|
|
|
: null;
|
|
|
|
|
const uses_slots = component.var_lookup.has('$$slots');
|
|
|
|
|
const slots = uses_slots ? b`let $$slots = @compute_slots(#slots);` : null;
|
|
|
|
|
const reactive_stores = component.vars.filter((variable) => variable.name[0] === '$' && variable.name[1] !== '$');
|
|
|
|
|
const reactive_stores = component.vars.filter(
|
|
|
|
|
(variable) => variable.name[0] === '$' && variable.name[1] !== '$'
|
|
|
|
|
);
|
|
|
|
|
const reactive_store_subscriptions = reactive_stores
|
|
|
|
|
.filter((store) => {
|
|
|
|
|
const variable = component.var_lookup.get(store.name.slice(1));
|
|
|
|
|
@ -48,7 +56,9 @@ export default function ssr(component, options) {
|
|
|
|
|
${`$$unsubscribe_${store_name}`} = @subscribe(${store_name}, #value => ${name} = #value)
|
|
|
|
|
`;
|
|
|
|
|
});
|
|
|
|
|
const reactive_store_unsubscriptions = reactive_stores.map(({ name }) => b `${`$$unsubscribe_${name.slice(1)}`}()`);
|
|
|
|
|
const reactive_store_unsubscriptions = reactive_stores.map(
|
|
|
|
|
({ name }) => b`${`$$unsubscribe_${name.slice(1)}`}()`
|
|
|
|
|
);
|
|
|
|
|
const reactive_store_declarations = reactive_stores.map(({ name }) => {
|
|
|
|
|
const store_name = name.slice(1);
|
|
|
|
|
const store = component.var_lookup.get(store_name);
|
|
|
|
|
@ -79,16 +89,20 @@ export default function ssr(component, options) {
|
|
|
|
|
const to_invalidate = new Set();
|
|
|
|
|
for (const name of names) {
|
|
|
|
|
const variable = component.var_lookup.get(name);
|
|
|
|
|
if (variable &&
|
|
|
|
|
if (
|
|
|
|
|
variable &&
|
|
|
|
|
!variable.hoistable &&
|
|
|
|
|
!variable.global &&
|
|
|
|
|
!variable.module &&
|
|
|
|
|
(variable.subscribable || variable.name[0] === '$')) {
|
|
|
|
|
(variable.subscribable || variable.name[0] === '$')
|
|
|
|
|
) {
|
|
|
|
|
to_invalidate.add(variable.name);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (to_invalidate.size) {
|
|
|
|
|
this.replace(invalidate(/** @type {any} */ ({ component }), scope, node, to_invalidate, true));
|
|
|
|
|
this.replace(
|
|
|
|
|
invalidate(/** @type {any} */ ({ component }), scope, node, to_invalidate, true)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -118,7 +132,7 @@ export default function ssr(component, options) {
|
|
|
|
|
return variable.injected;
|
|
|
|
|
});
|
|
|
|
|
const reactive_declarations = component.reactive_declarations.map((d) => {
|
|
|
|
|
const body = ( /** @type {import('estree').LabeledStatement} */(d.node)).body;
|
|
|
|
|
const body = /** @type {import('estree').LabeledStatement} */ (d.node).body;
|
|
|
|
|
let statement = b`${body}`;
|
|
|
|
|
if (!d.declaration) {
|
|
|
|
|
// TODO do not add label if it's not referenced
|
|
|
|
|
@ -162,13 +176,15 @@ export default function ssr(component, options) {
|
|
|
|
|
].filter(Boolean);
|
|
|
|
|
const css_sourcemap_enabled = check_enable_sourcemap(options.enableSourcemap, 'css');
|
|
|
|
|
const js = b`
|
|
|
|
|
${css.code
|
|
|
|
|
${
|
|
|
|
|
css.code
|
|
|
|
|
? b`
|
|
|
|
|
const #css = {
|
|
|
|
|
code: "${css.code}",
|
|
|
|
|
map: ${css_sourcemap_enabled && css.map ? string_literal(css.map.toString()) : 'null'}
|
|
|
|
|
};`
|
|
|
|
|
: null}
|
|
|
|
|
: null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
${component.extract_javascript(component.ast.module)}
|
|
|
|
|
|
|
|
|
|
@ -186,24 +202,16 @@ function trim(nodes) {
|
|
|
|
|
let start = 0;
|
|
|
|
|
for (; start < nodes.length; start += 1) {
|
|
|
|
|
const node = /** @type {import('../nodes/Text.js').default} */ (nodes[start]);
|
|
|
|
|
if (node.type !== 'Text')
|
|
|
|
|
break;
|
|
|
|
|
if (node.type !== 'Text') break;
|
|
|
|
|
node.data = node.data.replace(/^\s+/, '');
|
|
|
|
|
if (node.data)
|
|
|
|
|
break;
|
|
|
|
|
if (node.data) break;
|
|
|
|
|
}
|
|
|
|
|
let end = nodes.length;
|
|
|
|
|
for (; end > start; end -= 1) {
|
|
|
|
|
const node = /** @type {import('../nodes/Text.js').default} */ (nodes[end - 1]);
|
|
|
|
|
if (node.type !== 'Text')
|
|
|
|
|
break;
|
|
|
|
|
if (node.type !== 'Text') break;
|
|
|
|
|
node.data = node.data.trimRight();
|
|
|
|
|
if (node.data)
|
|
|
|
|
break;
|
|
|
|
|
if (node.data) break;
|
|
|
|
|
}
|
|
|
|
|
return nodes.slice(start, end);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|