test with hydratable: true and hydratable: false

pull/649/head
Rich Harris 8 years ago
parent 98a877df04
commit b47e2527b3

@ -243,15 +243,17 @@ export default class Block {
`);
}
if (this.builders.claim.isEmpty()) {
properties.addBlock(`claim: ${this.generator.helper('noop')},`);
} else {
properties.addBlock(deindent`
claim: function ( nodes ) {
${this.builders.claim}
${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
},
`);
if (this.generator.hydratable) {
if (this.builders.claim.isEmpty()) {
properties.addBlock(`claim: ${this.generator.helper('noop')},`);
} else {
properties.addBlock(deindent`
claim: function ( nodes ) {
${this.builders.claim}
${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
},
`);
}
}
if (!this.builders.hydrate.isEmpty()) {

@ -18,6 +18,8 @@ export class DomGenerator extends Generator {
readonly: Set<string>;
metaBindings: string[];
hydratable: boolean;
hasIntroTransitions: boolean;
hasOutroTransitions: boolean;
hasComplexBindings: boolean;
@ -34,6 +36,8 @@ export class DomGenerator extends Generator {
this.readonly = new Set();
this.hydratable = options.hydratable;
// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
this.metaBindings = [];
}
@ -236,9 +240,15 @@ export default function dom(
)}( this._state, this );
if ( options.target ) {
var nodes = ${generator.helper('children')}( options.target );
this._fragment.claim( nodes );
nodes.forEach( ${generator.helper('detachNode')} );
${generator.hydratable ?
deindent`
var nodes = ${generator.helper('children')}( options.target );
options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
nodes.forEach( ${generator.helper('detachNode')} );
` :
deindent`
this._fragment.create();
`}
this._fragment.mount( options.target, null );
}

@ -52,10 +52,13 @@ export default function visitElement(
block.addVariable(name);
block.builders.create.addLine(`${name} = ${getRenderStatement(generator, childState.namespace, node.name)};`);
block.builders.claim.addBlock(deindent`
${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
var ${childState.parentNodes} = ${generator.helper('children')}( ${name} );
`);
if (generator.hydratable) {
block.builders.claim.addBlock(deindent`
${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
var ${childState.parentNodes} = ${generator.helper('children')}( ${name} );
`);
}
if (state.parentNode) {
block.builders.mount.addLine(`${block.generator.helper('appendNode')}( ${name}, ${state.parentNode} );`);
@ -63,24 +66,6 @@ export default function visitElement(
block.builders.mount.addLine(`${block.generator.helper('insertNode')}( ${name}, ${block.target}, anchor );`);
}
// block.addVariable(name);
// block.builders.create.addLine(
// `${name} = ${getRenderStatement(
// generator,
// childState.namespace,
// node.name
// )};`
// );
// block.builders.claim.addLine(
// `${name} = ${getClaimStatement(
// generator,
// childState.namespace,
// node.name
// )};`
// );
// add CSS encapsulation attribute
if (generator.cssId && (!generator.cascade || state.isTopLevel)) {
block.builders.hydrate.addLine(

@ -19,7 +19,7 @@ export default function visitMustacheTag(
block.addElement(
name,
`${generator.helper('createText')}( ${value} = ${snippet} )`,
`${generator.helper('claimText')}( ${state.parentNodes}, ${value} = ${snippet} )`,
generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${value} = ${snippet} )` : '',
state.parentNode,
true
);

@ -13,7 +13,7 @@ export default function visitText(
block.addElement(
node._state.name,
`${generator.helper('createText')}( ${JSON.stringify(node.data)} )`,
`${generator.helper('claimText')}( ${state.parentNodes}, ${JSON.stringify(node.data)} )`,
generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${JSON.stringify(node.data)} )` : '',
state.parentNode,
node.usedAsAnchor
);

@ -41,6 +41,7 @@ export interface CompileOptions {
dev?: boolean;
shared?: boolean | string;
cascade?: boolean;
hydratable?: boolean;
onerror?: (error: Error) => void;
onwarn?: (warning: Warning) => void;

@ -27,7 +27,7 @@ describe('hydration', () => {
require.extensions['.html'] = function(module, filename) {
const options = Object.assign(
{ filename, name: getName(filename) },
{ filename, name: getName(filename), hydratable: true },
compileOptions
);
let { code } = svelte.compile(fs.readFileSync(filename, 'utf-8'), options);
@ -76,6 +76,7 @@ describe('hydration', () => {
const component = new SvelteComponent({
target,
hydrate: true,
data: config.data
});

@ -49,7 +49,7 @@ describe("runtime", () => {
const failed = new Set();
function runTest(dir, shared) {
function runTest(dir, shared, hydrate) {
if (dir[0] === ".") return;
const config = loadConfig(`./runtime/samples/${dir}/_config.js`);
@ -61,13 +61,14 @@ describe("runtime", () => {
(config.skip ? it.skip : config.solo ? it.only : it)(`${dir} (${shared ? 'shared' : 'inline'} helpers)`, () => {
if (failed.has(dir)) {
// this makes debugging easier, by only printing compiled output once
throw new Error('skipping inline helpers test');
throw new Error('skipping test, already failed');
}
const cwd = path.resolve(`test/runtime/samples/${dir}`);
compileOptions = config.compileOptions || {};
compileOptions.shared = shared;
compileOptions.hydratable = hydrate;
compileOptions.dev = config.dev;
// check that no ES2015+ syntax slipped in
@ -157,6 +158,7 @@ describe("runtime", () => {
const component = new SvelteComponent({
target,
hydrate,
data: config.data
});
@ -208,8 +210,9 @@ describe("runtime", () => {
const shared = path.resolve("shared.js");
fs.readdirSync("test/runtime/samples").forEach(dir => {
runTest(dir, shared);
runTest(dir, null);
runTest(dir, shared, false);
runTest(dir, shared, true);
runTest(dir, null, false);
});
it("fails if options.target is missing in dev mode", () => {

Loading…
Cancel
Save