diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 71e5260a9e..ba66d83ffb 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -277,7 +277,12 @@ export default class ElementWrapper extends Wrapper { render(block: Block, parent_node: Identifier, parent_nodes: Identifier) { const { renderer } = this; - if (this.node.name === 'noscript') return; + if (this.node.name === 'noscript') { + if (renderer.options.hydratable) { + block.chunks.claim.push(b`@claim_noscript(${parent_nodes});`); + } + return; + } if (this.slot_block) { block = this.slot_block; diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts index 3b13e6c68a..8856f17a5a 100644 --- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts @@ -53,7 +53,11 @@ export default class RawMustacheTagWrapper extends Tag { const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null'; - block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`); + block.chunks.create.push(b`${html_tag} = new @HtmlTag(${init});`); + if (this.renderer.options.hydratable) { + block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${init}, ${_parent_nodes});`); + } + block.chunks.hydrate.push(b`${html_tag}.b(${update_anchor})`); block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : 'anchor'});`); if (needs_anchor) { diff --git a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts index 2a46da2fc6..fb3f288115 100644 --- a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts +++ b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts @@ -2,5 +2,7 @@ import Renderer, { RenderOptions } from '../Renderer'; import RawMustacheTag from '../../nodes/RawMustacheTag'; export default function(node: RawMustacheTag, renderer: Renderer, _options: RenderOptions) { + renderer.add_string(''); renderer.add_expression(node.expression.node); + renderer.add_string(''); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 9ab9a4395f..a16570377c 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -184,6 +184,33 @@ export function claim_space(nodes) { return claim_text(nodes, ' '); } +export function claim_noscript(nodes) { + detach(claim_element(nodes, 'NOSCRIPT', {}, false)); +} + +function find_comment(nodes, text, start) { + for (let i = start; i < nodes.length; i += 1) { + const node = nodes[i]; + if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) { + return i; + } + } + return nodes.length; +} + +export function claim_html_tag(html: string, nodes) { + // find html opening tag + const start_index = find_comment(nodes, 'HTML_TAG_START', 0); + const end_index = find_comment(nodes, 'HTML_TAG_END', start_index); + if (start_index === end_index) { + return new HtmlTag(html); + } + const html_tag_nodes = nodes.splice(start_index, end_index + 1); + detach(html_tag_nodes[0]); + detach(html_tag_nodes[html_tag_nodes.length - 1]); + return new HtmlTag(html_tag_nodes.slice(1, html_tag_nodes.length - 1)); +} + export function set_data(text, data) { data = '' + data; if (text.data !== data) text.data = data; @@ -288,10 +315,17 @@ export class HtmlTag { t: HTMLElement; a: HTMLElement; - constructor(html: string, anchor: HTMLElement = null) { + constructor(html: string | ChildNode[]) { this.e = element('div'); + if (Array.isArray(html)) { + this.n = html; + } else { + this.u(html); + } + } + + b(anchor: HTMLElement = null) { this.a = anchor; - this.u(html); } m(target: HTMLElement, anchor: HTMLElement = null) { diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 5d88032b87..2030fe268d 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -52,8 +52,9 @@ function create_each_block(ctx) { t4 = text(t4_value); t5 = text(" ago:"); t6 = space(); + html_tag = new HtmlTag(raw_value); attr(span, "class", "meta"); - html_tag = new HtmlTag(raw_value, null); + html_tag.b(null); attr(div, "class", "comment"); }, m(target, anchor) { diff --git a/test/runtime/samples/component-namespaced/_config.js b/test/runtime/samples/component-namespaced/_config.js index b91795d6c8..d412a7fda8 100644 --- a/test/runtime/samples/component-namespaced/_config.js +++ b/test/runtime/samples/component-namespaced/_config.js @@ -9,10 +9,6 @@ export default {

foo 1

`, - before_test() { - delete require.cache[path.resolve(__dirname, 'components.js')]; - }, - test({ assert, component, target }) { component.a = 2; assert.htmlEqual(target.innerHTML, ` diff --git a/test/runtime/samples/component-namespaced/components.js b/test/runtime/samples/component-namespaced/components.js deleted file mode 100644 index 832d2412ee..0000000000 --- a/test/runtime/samples/component-namespaced/components.js +++ /dev/null @@ -1,3 +0,0 @@ -import Foo from './Foo.svelte'; - -export default { Foo }; \ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/components.svelte b/test/runtime/samples/component-namespaced/components.svelte new file mode 100644 index 0000000000..5b9a6c5167 --- /dev/null +++ b/test/runtime/samples/component-namespaced/components.svelte @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/main.svelte b/test/runtime/samples/component-namespaced/main.svelte index 541b68e47e..25862cf6f2 100644 --- a/test/runtime/samples/component-namespaced/main.svelte +++ b/test/runtime/samples/component-namespaced/main.svelte @@ -1,5 +1,5 @@ diff --git a/test/runtime/samples/deconflict-builtins-2/_config.js b/test/runtime/samples/deconflict-builtins-2/_config.js index 5870ff073b..3e5aa8f378 100644 --- a/test/runtime/samples/deconflict-builtins-2/_config.js +++ b/test/runtime/samples/deconflict-builtins-2/_config.js @@ -1,4 +1,8 @@ export default { - html: `hello world`, + html: ` + + hello world + + `, preserveIdentifiers: true, }; \ No newline at end of file diff --git a/test/runtime/samples/deconflict-builtins-2/main.svelte b/test/runtime/samples/deconflict-builtins-2/main.svelte index 82f9213045..db10a81c74 100644 --- a/test/runtime/samples/deconflict-builtins-2/main.svelte +++ b/test/runtime/samples/deconflict-builtins-2/main.svelte @@ -1,5 +1,6 @@ - -{foo} \ No newline at end of file + + {foo} + \ No newline at end of file diff --git a/test/runtime/samples/raw-mustaches/_config.js b/test/runtime/samples/raw-mustaches/_config.js index cc9999aa34..17d2b4f90f 100644 --- a/test/runtime/samples/raw-mustaches/_config.js +++ b/test/runtime/samples/raw-mustaches/_config.js @@ -1,5 +1,4 @@ export default { - skip_if_ssr: true, props: { raw: 'raw html!!!\\o/'