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

refactor

Browse Source
pull/6898/head
Yuichiro Yamashita 5 years ago
parent 75621dc88b
commit 42e465635e
5 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File

17
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -19,6 +19,8 @@ import { INode } from './interfaces';
import { TemplateNode } from '../../interfaces';
import Component from '../Component';
import Expression from './shared/Expression';
import { string_literal } from '../utils/stringify';
import { Literal } from 'estree';
import compiler_warnings from '../compiler_warnings';
import compiler_errors from '../compiler_errors';
@ -133,18 +135,25 @@ export default class Element extends Node {
children: INode[];
namespace: string;
needs_manual_style_scoping: boolean;
dynamic_tag_expr?: Expression = null;
tag_expr: Expression;
is_dynamic_element() {
return this.name === 'svelte:element';
}
constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
super(component, parent, scope, info);
this.name = info.name;
if (this.name === 'svelte:element') {
if (info.name === 'svelte:element') {
if (typeof info.tag === 'string') {
this.name = info.tag;
this.tag_expr = new Expression(component, this, scope, string_literal(info.tag) as Literal);
} else {
this.dynamic_tag_expr = new Expression(component, this, scope, info.tag);
this.tag_expr = new Expression(component, this, scope, info.tag);
}
} else {
this.tag_expr = new Expression(component, this, scope, string_literal(info.name) as Literal);
}
this.namespace = get_namespace(parent as Element, this, component.namespace);
@ -252,7 +261,7 @@ export default class Element extends Node {
this.scope = scope;
this.children = map_children(component, this, this.scope, info.children);
if (this.dynamic_tag_expr) {
if (this.is_dynamic_element()) {
this.validate_dynamic_element(info);
}
this.validate();

28
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -165,7 +165,7 @@ export default class ElementWrapper extends Wrapper {
name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
};
if (node.dynamic_tag_expr) {
if (node.is_dynamic_element()) {
if (block.type !== 'child_dynamic_element') {
this.not_static_content();
this.child_dynamic_element_block = block.child({
@ -225,6 +225,8 @@ export default class ElementWrapper extends Wrapper {
block.add_animation();
}
block.add_dependencies(node.tag_expr.dependencies);
// add directive and handler dependencies
[node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => {
if (directive && directive.expression) {
@ -238,10 +240,6 @@ export default class ElementWrapper extends Wrapper {
}
});
if (node.dynamic_tag_expr) {
block.add_dependencies(node.dynamic_tag_expr.dependencies);
}
if (this.parent) {
if (node.actions.length > 0 ||
node.animation ||
@ -283,11 +281,11 @@ export default class ElementWrapper extends Wrapper {
b`${node} = ${render_statement};`
);
if (this.node.dynamic_tag_expr && this.renderer.options.dev) {
block.chunks.create.push(b`@validate_dynamic_element(${this.node.dynamic_tag_expr.manipulate(block)});`);
if (this.node.is_dynamic_element() && this.renderer.options.dev) {
block.chunks.create.push(b`@validate_dynamic_element(${this.node.tag_expr.manipulate(block)});`);
if (renderer.options.hydratable) {
block.chunks.claim.push(b`@validate_dynamic_element(${this.node.dynamic_tag_expr.manipulate(block)});`);
block.chunks.claim.push(b`@validate_dynamic_element(${this.node.tag_expr.manipulate(block)});`);
}
}
@ -402,8 +400,8 @@ export default class ElementWrapper extends Wrapper {
);
}
if (this.node.dynamic_tag_expr) {
const dependencies = this.node.dynamic_tag_expr.dynamic_dependencies();
if (this.node.is_dynamic_element()) {
const dependencies = this.node.tag_expr.dynamic_dependencies();
if (dependencies.length) {
const condition = block.renderer.dirty(
dependencies
@ -414,7 +412,7 @@ export default class ElementWrapper extends Wrapper {
if (${condition}) {
@detach(${node});
${node} = ${render_statement};
@validate_dynamic_element(${this.node.dynamic_tag_expr.manipulate(block)});
@validate_dynamic_element(${this.node.tag_expr.manipulate(block)});
${block.chunks.hydrate}
${block.event_listeners.length && b`${mounted} = false`};
${staticChildren}
@ -432,7 +430,7 @@ export default class ElementWrapper extends Wrapper {
);
const previous_tag = block.get_unique_name('previous_tag');
const snippet = this.node.dynamic_tag_expr.manipulate(block);
const snippet = this.node.tag_expr.manipulate(block);
block.add_variable(previous_tag, snippet);
block.chunks.init.push(b`
@ -497,7 +495,7 @@ export default class ElementWrapper extends Wrapper {
}
get_render_statement(block: Block) {
const { name, namespace } = this.node;
const { name, namespace, tag_expr } = this.node;
if (namespace === namespaces.svg) {
return x`@svg_element("${name}")`;
@ -512,7 +510,7 @@ export default class ElementWrapper extends Wrapper {
return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
}
const reference = this.node.dynamic_tag_expr ? this.node.dynamic_tag_expr.manipulate(block) : `"${name}"`;
const reference = tag_expr.manipulate(block);
return x`@element(${reference})`;
}
@ -524,7 +522,7 @@ export default class ElementWrapper extends Wrapper {
const name = this.node.namespace
? this.node.name
: this.node.name.toUpperCase();
const reference = this.node.dynamic_tag_expr ? this.node.dynamic_tag_expr.manipulate(block) : `"${name}"`;
const reference = this.node.is_dynamic_element() ? this.node.tag_expr.manipulate(block) : `"${name}"`;
if (this.node.namespace === namespaces.svg) {
return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;

18
src/compiler/compile/render_ssr/handlers/Element.ts
Unescape View File

@ -23,12 +23,8 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
node.attributes.some((attribute) => attribute.name === 'contenteditable')
);
if (node.dynamic_tag_expr) {
renderer.add_string('<');
renderer.add_expression(node.dynamic_tag_expr.node as ESExpression);
} else {
renderer.add_string(`<${node.name}`);
}
renderer.add_string('<');
renderer.add_expression(node.tag_expr.node as ESExpression);
const class_expression_list = node.classes.map(class_directive => {
const { expression, name } = class_directive;
@ -165,13 +161,9 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
function add_close_tag() {
if (!is_void(node.name)) {
if (node.dynamic_tag_expr) {
renderer.add_string('</');
renderer.add_expression(node.dynamic_tag_expr.node as ESExpression);
renderer.add_string('>');
} else {
renderer.add_string(`</${node.name}>`);
}
renderer.add_string('</');
renderer.add_expression(node.tag_expr.node as ESExpression);
renderer.add_string('>');
}
}
}

6
test/js/samples/debug-ssr-foo/expected.js
Unescape View File

@ -7,10 +7,10 @@ const Component = create_ssr_component(($$result, $$props, $$bindings, slots) =>
if ($$props.things === void 0 && $$bindings.things && things !== void 0) $$bindings.things(things);
if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
return `${each(things, thing => `<span>${escape(thing.name)}</span>
return `${each(things, thing => `<${"span"}>${escape(thing.name)}</${"span"}>
${debug(null, 7, 2, { foo })}`)}
<p>foo: ${escape(foo)}</p>`;
<${"p"}>foo: ${escape(foo)}</${"p"}>`;
});
export default Component;
export default Component;

4
test/js/samples/ssr-preserve-comments/expected.js
Unescape View File

@ -2,9 +2,9 @@
import { create_ssr_component } from "svelte/internal";
const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<div>content</div>
return `<${"div"}>content</${"div"}>
<!-- comment -->
<div>more content</div>`;
<${"div"}>more content</${"div"}>`;
});
export default Component;

Write Preview
Loading…
Cancel
Save