msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Lint and format src/compiler/compile/render_dom/index.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 055ee59339
commit ae3c8ed08b
1 changed files with 501 additions and 425 deletions
Show Stats Download Patch File Download Diff File

242
src/compiler/compile/render_dom/index.js
Unescape View File

@ -26,13 +26,18 @@ export default function dom(component, options) {
const css = component.stylesheet.render(options.filename);
const css_sourcemap_enabled = check_enable_sourcemap(options.enableSourcemap, 'css');
if (css_sourcemap_enabled) {
css.map = apply_preprocessor_sourcemap(options.filename, css.map,
/** @type {string | import('@ampproject/remapping').RawSourceMap | import('@ampproject/remapping').DecodedSourceMap} */ (options.sourcemap));
}
else {
css.map = apply_preprocessor_sourcemap(
options.filename,
css.map,
/** @type {string | import('@ampproject/remapping').RawSourceMap | import('@ampproject/remapping').DecodedSourceMap} */ (
options.sourcemap
)
);
} else {
css.map = null;
}
const styles = css_sourcemap_enabled && component.stylesheet.has_styles && options.dev
const styles =
css_sourcemap_enabled && component.stylesheet.has_styles && options.dev
? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */`
: css.code;
const add_css = component.get_unique_name('add_css');
@ -47,15 +52,20 @@ export default function dom(component, options) {
// fix order
// TODO the deconflicted names of blocks are reversed... should set them here
const blocks = renderer.blocks.slice().reverse();
push_array(body, blocks.map((block) => {
push_array(
body,
blocks.map((block) => {
// TODO this is a horrible mess — renderer.blocks
// contains a mixture of Blocks and Nodes
if (( /** @type {import('./Block.js').default} */(block)).render)
return ( /** @type {import('./Block.js').default} */(block)).render();
if (/** @type {import('./Block.js').default} */ (block).render)
return /** @type {import('./Block.js').default} */ (block).render();
return block;
}));
})
);
if (options.dev && !options.hydratable) {
block.chunks.claim.push(b `throw new @_Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`);
block.chunks.claim.push(
b`throw new @_Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`
);
}
const uses_slots = component.var_lookup.has('$$slots');
@ -79,18 +89,37 @@ export default function dom(component, options) {
let $$restProps = ${compute_rest};
`
: null;
const set = uses_props || uses_rest || writable_props.length > 0 || component.slots.size > 0
const set =
uses_props || uses_rest || writable_props.length > 0 || component.slots.size > 0
? x`
${$$props} => {
${uses_props &&
renderer.invalidate('$$props', x `$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`)}
${uses_rest &&
${
uses_props &&
renderer.invalidate(
'$$props',
x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`
)
}
${
uses_rest &&
!uses_props &&
x `$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`}
x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`
}
${uses_rest && renderer.invalidate('$$restProps', x`$$restProps = ${compute_rest}`)}
${writable_props.map((prop) => b `if ('${prop.export_name}' in ${$$props}) ${renderer.invalidate(prop.name, x `${prop.name} = ${$$props}.${prop.export_name}`)};`)}
${component.slots.size > 0 &&
b `if ('$$scope' in ${$$props}) ${renderer.invalidate('$$scope', x `$$scope = ${$$props}.$$scope`)};`}
${writable_props.map(
(prop) =>
b`if ('${prop.export_name}' in ${$$props}) ${renderer.invalidate(
prop.name,
x`${prop.name} = ${$$props}.${prop.export_name}`
)};`
)}
${
component.slots.size > 0 &&
b`if ('$$scope' in ${$$props}) ${renderer.invalidate(
'$$scope',
x`$$scope = ${$$props}.$$scope`
)};`
}
}
`
: null;
@ -116,13 +145,14 @@ export default function dom(component, options) {
kind: 'get',
key: { type: 'Identifier', name: prop.export_name },
value: x`function() {
return ${prop.hoistable
return ${
prop.hoistable
? prop.name
: x `this.$$.ctx[${renderer.context_lookup.get(prop.name).index}]`}
: x`this.$$.ctx[${renderer.context_lookup.get(prop.name).index}]`
}
}`
});
}
else if (component.compile_options.dev) {
} else if (component.compile_options.dev) {
accessors.push({
type: 'MethodDefinition',
kind: 'get',
@ -143,8 +173,7 @@ export default function dom(component, options) {
@flush();
}`
});
}
else if (component.compile_options.dev) {
} else if (component.compile_options.dev) {
accessors.push({
type: 'MethodDefinition',
kind: 'set',
@ -154,8 +183,7 @@ export default function dom(component, options) {
}`
});
}
}
else if (component.compile_options.dev) {
} else if (component.compile_options.dev) {
accessors.push({
type: 'MethodDefinition',
kind: 'set',
@ -191,8 +219,7 @@ export default function dom(component, options) {
return ${name}
}`
});
}
else if (component.compile_options.dev) {
} else if (component.compile_options.dev) {
accessors.push({
type: 'MethodDefinition',
kind: 'get',
@ -210,24 +237,38 @@ export default function dom(component, options) {
if (expected.length) {
missing_props_check = b`
$$self.$$.on_mount.push(function () {
${expected.map((prop) => b `
${expected.map(
(prop) => b`
if (${prop.name} === undefined && !(('${prop.export_name}' in $$props) || $$self.$$.bound[$$self.$$.props['${prop.export_name}']])) {
@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
}`)}
}`
)}
});
`;
}
const capturable_vars = component.vars.filter((v) => !v.internal && !v.global && !v.name.startsWith('$$'));
const capturable_vars = component.vars.filter(
(v) => !v.internal && !v.global && !v.name.startsWith('$$')
);
if (capturable_vars.length > 0) {
capture_state = x`() => ({ ${capturable_vars.map((prop) => p`${prop.name}`)} })`;
}
const injectable_vars = capturable_vars.filter((v) => !v.module && v.writable && v.name[0] !== '$');
const injectable_vars = capturable_vars.filter(
(v) => !v.module && v.writable && v.name[0] !== '$'
);
if (uses_props || injectable_vars.length > 0) {
inject_state = x`
${$$props} => {
${uses_props &&
renderer.invalidate('$$props', x `$$props = @assign(@assign({}, $$props), $$new_props)`)}
${injectable_vars.map((v) => b `if ('${v.name}' in $$props) ${renderer.invalidate(v.name, x `${v.name} = ${$$props}.${v.name}`)};`)}
${
uses_props &&
renderer.invalidate('$$props', x`$$props = @assign(@assign({}, $$props), $$new_props)`)
}
${injectable_vars.map(
(v) =>
b`if ('${v.name}' in $$props) ${renderer.invalidate(
v.name,
x`${v.name} = ${$$props}.${v.name}`
)};`
)}
}
`;
props_inject = b`
@ -251,10 +292,11 @@ export default function dom(component, options) {
if (!execution_context && !scope.block) {
execution_context = node;
}
}
else if (!execution_context &&
} else if (
!execution_context &&
node.type === 'LabeledStatement' &&
node.label.name === '$') {
node.label.name === '$'
) {
execution_context = node;
}
},
@ -279,7 +321,8 @@ export default function dom(component, options) {
component.rewrite_props(({ name, reassigned, export_name }) => {
const value = `$${name}`;
const i = renderer.context_lookup.get(`$${name}`).index;
const insert = reassigned || export_name
const insert =
reassigned || export_name
? b`${`$$subscribe_${name}`}()`
: b`@component_subscribe($$self, ${name}, #value => $$invalidate(${i}, ${value} = #value))`;
if (component.compile_options.dev) {
@ -289,15 +332,15 @@ export default function dom(component, options) {
});
}
const args = [x`$$self`];
const has_invalidate = props.length > 0 ||
const has_invalidate =
props.length > 0 ||
component.has_reactive_assignments ||
component.slots.size > 0 ||
capture_state ||
inject_state;
if (has_invalidate) {
args.push(x`$$props`, x`$$invalidate`);
}
else if (component.compile_options.dev) {
} else if (component.compile_options.dev) {
// $$props arg is still needed for unknown prop check
args.push(x`$$props`);
}
@ -317,13 +360,15 @@ export default function dom(component, options) {
`);
const filtered_props = props.filter((prop) => {
const variable = component.var_lookup.get(prop.name);
if (variable.hoistable)
return false;
if (variable.hoistable) return false;
return prop.name[0] !== '$';
});
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 instance_javascript = component.extract_javascript(component.ast.instance);
const has_definition = component.compile_options.dev ||
const has_definition =
component.compile_options.dev ||
(instance_javascript && instance_javascript.length > 0) ||
filtered_props.length > 0 ||
uses_props ||
@ -340,10 +385,14 @@ export default function dom(component, options) {
const variable = component.var_lookup.get(store.name.slice(1));
return !variable || variable.hoistable;
})
.map(({ name }) => b `
.map(
({ name }) => b`
${component.compile_options.dev && b`@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
@component_subscribe($$self, ${name.slice(1)}, $$value => $$invalidate(${renderer.context_lookup.get(name).index}, ${name} = $$value));
`);
@component_subscribe($$self, ${name.slice(1)}, $$value => $$invalidate(${
renderer.context_lookup.get(name).index
}, ${name} = $$value));
`
);
const resubscribable_reactive_store_unsubscribers = reactive_stores
.filter((store) => {
const variable = component.var_lookup.get(store.name.slice(1));
@ -351,7 +400,6 @@ export default function dom(component, options) {
})
.map(({ name }) => b`$$self.$$.on_destroy.push(() => ${`$$unsubscribe_${name.slice(1)}`}());`);
if (has_definition) {
/** @type {import('estree').Node | import('estree').Node[]} */
const reactive_declarations = [];
@ -364,14 +412,16 @@ export default function dom(component, options) {
const variable = component.var_lookup.get(n);
return variable && (variable.export_name || variable.mutated || variable.reassigned);
});
const condition = !uses_rest_or_props && writable.length > 0 && renderer.dirty(writable, true);
const condition =
!uses_rest_or_props && writable.length > 0 && renderer.dirty(writable, true);
let statement = d.node; // TODO remove label (use d.node.body) if it's not referenced
if (condition)
statement = /** @type {import('estree').Statement} */ (b `if (${condition}) { ${statement} }`[0]);
statement = /** @type {import('estree').Statement} */ (
b`if (${condition}) { ${statement} }`[0]
);
if (condition || uses_rest_or_props) {
reactive_declarations.push(statement);
}
else {
} else {
fixed_reactive_declarations.push(statement);
}
});
@ -398,16 +448,21 @@ export default function dom(component, options) {
unknown_props_check = b`
const writable_props = [${writable_props.map((prop) => x`'${prop.export_name}'`)}];
@_Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') @_console.warn(\`<${
component.tag
}> was created with unknown prop '\${key}'\`);
});
`;
}
const return_value = {
type: 'ArrayExpression',
elements: renderer.initial_context.map((member) => ( /** @type {import('estree').Expression} */({
elements: renderer.initial_context.map(
(member) =>
/** @type {import('estree').Expression} */ ({
type: 'Identifier',
name: member.name
})))
})
)
};
body.push(b`
function ${definition}(${args}) {
@ -421,13 +476,17 @@ export default function dom(component, options) {
${resubscribable_reactive_store_unsubscribers}
${component.slots.size || component.compile_options.dev || uses_slots
${
component.slots.size || component.compile_options.dev || uses_slots
? b`let { $$slots: #slots = {}, $$scope } = $$props;`
: null}
${component.compile_options.dev &&
: null
}
${
component.compile_options.dev &&
b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()]
.map((key) => `'${key}'`)
.join(',')}]);`}
.join(',')}]);`
}
${compute_slots}
${instance_javascript}
@ -435,8 +494,10 @@ export default function dom(component, options) {
${missing_props_check}
${unknown_props_check}
${renderer.binding_groups.size > 0 &&
b `const $$binding_groups = [${[...renderer.binding_groups.keys()].map((_) => x `[]`)}];`}
${
renderer.binding_groups.size > 0 &&
b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map((_) => x`[]`)}];`
}
${component.partly_hoisted}
@ -448,12 +509,14 @@ export default function dom(component, options) {
${/* before reactive declarations */ props_inject}
${reactive_declarations.length > 0 &&
${
reactive_declarations.length > 0 &&
b`
$$self.$$.update = () => {
${reactive_declarations}
};
`}
`
}
${fixed_reactive_declarations}
@ -463,11 +526,13 @@ export default function dom(component, options) {
}
`);
}
const prop_indexes = /** @type {import('estree').ObjectExpression} */ (x `{
const prop_indexes = /** @type {import('estree').ObjectExpression} */ (
x`{
${props
.filter((v) => v.export_name && !v.module)
.map((v) => p`${v.export_name}: ${renderer.context_lookup.get(v.name).index}`)}
}`);
}`
);
let dirty;
if (renderer.context_overflow) {
dirty = x`[]`;
@ -482,23 +547,28 @@ export default function dom(component, options) {
const optional_parameters = [];
if (should_add_css) {
optional_parameters.push(add_css);
}
else if (dirty) {
} else if (dirty) {
optional_parameters.push(x`null`);
}
if (dirty) {
optional_parameters.push(dirty);
}
const declaration = /** @type {import('estree').ClassDeclaration} */ (b `
const declaration = /** @type {import('estree').ClassDeclaration} */ (
b`
class ${name} extends ${superclass} {
constructor(options) {
super(${options.dev && 'options'});
@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
${options.dev &&
b `@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
@init(this, options, ${definition}, ${
has_create_fragment ? 'create_fragment' : 'null'
}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
${
options.dev &&
b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`
}
}
}
`[0]);
`[0]
);
push_array(declaration.body.body, accessors);
body.push(declaration);
if (options.customElement) {
@ -515,17 +585,23 @@ export default function dom(component, options) {
.filter((accessor) => !writable_props.some((prop) => prop.export_name === accessor.key.name))
.map((accessor) => `"${accessor.key.name}"`)
.join(',');
const use_shadow_dom = component.component_options.customElement?.shadow !== 'none' ? 'true' : 'false';
const use_shadow_dom =
component.component_options.customElement?.shadow !== 'none' ? 'true' : 'false';
if (component.component_options.customElement?.tag) {
body.push(b `@_customElements.define("${component.component_options.customElement.tag}", @create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom}));`);
}
else {
body.push(b `@create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom});`);
body.push(
b`@_customElements.define("${
component.component_options.customElement.tag
}", @create_custom_element(${name}, ${JSON.stringify(
props_str
)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom}));`
);
} else {
body.push(
b`@create_custom_element(${name}, ${JSON.stringify(
props_str
)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom});`
);
}
}
return { js: flatten(body), css };
}

Write Preview
Loading…
Cancel
Save