mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
commit
5dcd568c8c
@ -1,20 +1,18 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
compiler
|
||||
ssr
|
||||
shared.js
|
||||
scratch
|
||||
!test/compiler
|
||||
!test/ssr
|
||||
.nyc_output
|
||||
coverage
|
||||
coverage.lcov
|
||||
test/sourcemaps/samples/*/output.js
|
||||
test/sourcemaps/samples/*/output.js.map
|
||||
_actual.*
|
||||
_actual-bundle.*
|
||||
src/generators/dom/shared.ts
|
||||
package-lock.json
|
||||
.idea/
|
||||
*.iml
|
||||
store.umd.js
|
||||
node_modules
|
||||
/cli/
|
||||
/compiler/
|
||||
/ssr/
|
||||
/shared.js
|
||||
/scratch/
|
||||
/coverage/
|
||||
/coverage.lcov/
|
||||
/test/cli/samples/*/actual
|
||||
/test/sourcemaps/samples/*/output.js
|
||||
/test/sourcemaps/samples/*/output.js.map
|
||||
/src/compile/shared.ts
|
||||
/package-lock.json
|
||||
/store.umd.js
|
||||
/yarn-error.log
|
||||
_actual*.*
|
||||
@ -0,0 +1,118 @@
|
||||
import { Node, Warning } from './interfaces';
|
||||
import Compiler from './compile/Compiler';
|
||||
|
||||
const now = (typeof process !== 'undefined' && process.hrtime)
|
||||
? () => {
|
||||
const t = process.hrtime();
|
||||
return t[0] * 1e3 + t[1] / 1e6;
|
||||
}
|
||||
: () => window.performance.now();
|
||||
|
||||
type Timing = {
|
||||
label: string;
|
||||
start: number;
|
||||
end: number;
|
||||
children: Timing[];
|
||||
}
|
||||
|
||||
function collapseTimings(timings) {
|
||||
const result = {};
|
||||
timings.forEach(timing => {
|
||||
result[timing.label] = Object.assign({
|
||||
total: timing.end - timing.start
|
||||
}, timing.children && collapseTimings(timing.children));
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
export default class Stats {
|
||||
onwarn: (warning: Warning) => void;
|
||||
|
||||
startTime: number;
|
||||
currentTiming: Timing;
|
||||
currentChildren: Timing[];
|
||||
timings: Timing[];
|
||||
stack: Timing[];
|
||||
warnings: Warning[];
|
||||
|
||||
constructor({ onwarn }: {
|
||||
onwarn: (warning: Warning) => void
|
||||
}) {
|
||||
this.startTime = now();
|
||||
this.stack = [];
|
||||
this.currentChildren = this.timings = [];
|
||||
|
||||
this.onwarn = onwarn;
|
||||
|
||||
this.warnings = [];
|
||||
}
|
||||
|
||||
start(label) {
|
||||
const timing = {
|
||||
label,
|
||||
start: now(),
|
||||
end: null,
|
||||
children: []
|
||||
};
|
||||
|
||||
this.currentChildren.push(timing);
|
||||
this.stack.push(timing);
|
||||
|
||||
this.currentTiming = timing;
|
||||
this.currentChildren = timing.children;
|
||||
}
|
||||
|
||||
stop(label) {
|
||||
if (label !== this.currentTiming.label) {
|
||||
throw new Error(`Mismatched timing labels`);
|
||||
}
|
||||
|
||||
this.currentTiming.end = now();
|
||||
this.stack.pop();
|
||||
this.currentTiming = this.stack[this.stack.length - 1];
|
||||
this.currentChildren = this.currentTiming ? this.currentTiming.children : this.timings;
|
||||
}
|
||||
|
||||
render(compiler: Compiler) {
|
||||
const timings = Object.assign({
|
||||
total: now() - this.startTime
|
||||
}, collapseTimings(this.timings));
|
||||
|
||||
// TODO would be good to have this info even
|
||||
// if options.generate is false
|
||||
const imports = compiler && compiler.imports.map(node => {
|
||||
return {
|
||||
source: node.source.value,
|
||||
specifiers: node.specifiers.map(specifier => {
|
||||
return {
|
||||
name: (
|
||||
specifier.type === 'ImportDefaultSpecifier' ? 'default' :
|
||||
specifier.type === 'ImportNamespaceSpecifier' ? '*' :
|
||||
specifier.imported.name
|
||||
),
|
||||
as: specifier.local.name
|
||||
};
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const hooks: Record<string, boolean> = compiler && {
|
||||
oncreate: !!compiler.templateProperties.oncreate,
|
||||
ondestroy: !!compiler.templateProperties.ondestroy,
|
||||
onstate: !!compiler.templateProperties.onstate,
|
||||
onupdate: !!compiler.templateProperties.onupdate
|
||||
};
|
||||
|
||||
return {
|
||||
timings,
|
||||
warnings: this.warnings,
|
||||
imports,
|
||||
hooks
|
||||
};
|
||||
}
|
||||
|
||||
warn(warning) {
|
||||
this.warnings.push(warning);
|
||||
this.onwarn(warning);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
import * as svelte from 'svelte';
|
||||
import error from './error.js';
|
||||
|
||||
function mkdirp(dir) {
|
||||
const parent = path.dirname(dir);
|
||||
if (dir === parent) return;
|
||||
|
||||
mkdirp(parent);
|
||||
if (!fs.existsSync(dir)) fs.mkdirSync(dir);
|
||||
}
|
||||
|
||||
export function compile(input, opts) {
|
||||
if (opts._.length > 0) {
|
||||
error(`Can only compile a single file or directory`);
|
||||
}
|
||||
|
||||
const output = opts.output;
|
||||
|
||||
const stats = fs.statSync(input);
|
||||
const isDir = stats.isDirectory();
|
||||
|
||||
if (isDir) {
|
||||
if (!output) {
|
||||
error(`You must specify an --output (-o) option when compiling a directory of files`);
|
||||
}
|
||||
|
||||
if (opts.name || opts.amdId) {
|
||||
error(`Cannot specify --${opts.name ? 'name' : 'amdId'} when compiling a directory`);
|
||||
}
|
||||
}
|
||||
|
||||
const globals = {};
|
||||
if (opts.globals) {
|
||||
opts.globals.split(',').forEach(pair => {
|
||||
const [key, value] = pair.split(':');
|
||||
globals[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
const options = {
|
||||
name: opts.name,
|
||||
format: opts.format,
|
||||
sourceMap: opts.sourcemap,
|
||||
globals,
|
||||
css: opts.css !== false,
|
||||
dev: opts.dev,
|
||||
immutable: opts.immutable,
|
||||
generate: opts.generate || 'dom',
|
||||
customElement: opts.customElement,
|
||||
store: opts.store
|
||||
};
|
||||
|
||||
if (isDir) {
|
||||
mkdirp(output);
|
||||
compileDirectory(input, output, options);
|
||||
} else {
|
||||
compileFile(input, output, options);
|
||||
}
|
||||
}
|
||||
|
||||
function compileDirectory(input, output, options) {
|
||||
fs.readdirSync(input).forEach(file => {
|
||||
const src = path.resolve(input, file);
|
||||
const dest = path.resolve(output, file);
|
||||
|
||||
if (path.extname(file) === '.html') {
|
||||
compileFile(
|
||||
src,
|
||||
dest.substring(0, dest.lastIndexOf('.html')) + '.js',
|
||||
options
|
||||
);
|
||||
} else {
|
||||
const stats = fs.statSync(src);
|
||||
if (stats.isDirectory()) {
|
||||
compileDirectory(src, dest, options);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let SOURCEMAPPING_URL = 'sourceMa';
|
||||
SOURCEMAPPING_URL += 'ppingURL';
|
||||
|
||||
function compileFile(input, output, options) {
|
||||
console.error(`compiling ${path.relative(process.cwd(), input)}...`); // eslint-disable-line no-console
|
||||
|
||||
options = Object.assign({}, options);
|
||||
if (!options.name) options.name = getName(input);
|
||||
|
||||
options.filename = input;
|
||||
options.outputFilename = output;
|
||||
|
||||
const { sourceMap } = options;
|
||||
const inline = sourceMap === 'inline';
|
||||
|
||||
let source = fs.readFileSync(input, 'utf-8');
|
||||
if (source[0] === 0xfeff) source = source.slice(1);
|
||||
|
||||
let compiled;
|
||||
|
||||
try {
|
||||
compiled = svelte.compile(source, options);
|
||||
} catch (err) {
|
||||
error(err);
|
||||
}
|
||||
|
||||
const { js } = compiled;
|
||||
|
||||
if (sourceMap) {
|
||||
js.code += `\n//# ${SOURCEMAPPING_URL}=${inline || !output
|
||||
? js.map.toUrl()
|
||||
: `${path.basename(output)}.map`}\n`;
|
||||
}
|
||||
|
||||
if (output) {
|
||||
const outputDir = path.dirname(output);
|
||||
mkdirp(outputDir);
|
||||
fs.writeFileSync(output, js.code);
|
||||
console.error(`wrote ${path.relative(process.cwd(), output)}`); // eslint-disable-line no-console
|
||||
if (sourceMap && !inline) {
|
||||
fs.writeFileSync(`${output}.map`, js.map);
|
||||
console.error(`wrote ${path.relative(process.cwd(), `${output}.map`)}`); // eslint-disable-line no-console
|
||||
}
|
||||
} else {
|
||||
process.stdout.write(js.code);
|
||||
}
|
||||
}
|
||||
|
||||
function getName(input) {
|
||||
return path
|
||||
.basename(input)
|
||||
.replace(path.extname(input), '')
|
||||
.replace(/[^a-zA-Z_$0-9]+/g, '_')
|
||||
.replace(/^_/, '')
|
||||
.replace(/_$/, '')
|
||||
.replace(/^(\d)/, '_$1');
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import clorox from 'clorox';
|
||||
|
||||
function stderr(msg) {
|
||||
console.error(msg); // eslint-disable-line no-console
|
||||
}
|
||||
|
||||
export default function error(err) {
|
||||
stderr(`${clorox.red(err.message || err)}`);
|
||||
|
||||
if (err.frame) {
|
||||
stderr(err.frame); // eslint-disable-line no-console
|
||||
} else if (err.stack) {
|
||||
stderr(`${clorox.grey(err.stack)}`);
|
||||
}
|
||||
|
||||
process.exit(1);
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import sade from 'sade';
|
||||
import * as pkg from '../../package.json';
|
||||
|
||||
const prog = sade('svelte').version(pkg.version);
|
||||
|
||||
prog
|
||||
.command('compile <input>')
|
||||
|
||||
.option('-o, --output', 'Output (if absent, prints to stdout)')
|
||||
.option('-f, --format', 'Type of output (amd, cjs, es, iife, umd)')
|
||||
.option('-g, --globals', 'Comma-separate list of `module ID:Global` pairs')
|
||||
.option('-n, --name', 'Name for IIFE/UMD export (inferred from filename by default)')
|
||||
.option('-m, --sourcemap', 'Generate sourcemap (`-m inline` for inline map)')
|
||||
.option('-d, --dev', 'Add dev mode warnings and errors')
|
||||
.option('--amdId', 'ID for AMD module (default is anonymous)')
|
||||
.option('--generate', 'Change generate format between `dom` and `ssr`')
|
||||
.option('--no-css', `Don't include CSS (useful with SSR)`)
|
||||
.option('--immutable', 'Support immutable data structures')
|
||||
|
||||
.example('compile App.html > App.js')
|
||||
.example('compile src -o dest')
|
||||
.example('compile -f umd MyComponent.html > MyComponent.js')
|
||||
|
||||
.action((input, opts) => {
|
||||
import('./compile.js').then(({ compile }) => {
|
||||
compile(input, opts);
|
||||
});
|
||||
})
|
||||
|
||||
.parse(process.argv);
|
||||
@ -0,0 +1,360 @@
|
||||
import MagicString from 'magic-string';
|
||||
import isReference from 'is-reference';
|
||||
import { parseExpressionAt } from 'acorn';
|
||||
import annotateWithScopes from '../../utils/annotateWithScopes';
|
||||
import { walk } from 'estree-walker';
|
||||
import deindent from '../../utils/deindent';
|
||||
import { stringify, escape } from '../../utils/stringify';
|
||||
import CodeBuilder from '../../utils/CodeBuilder';
|
||||
import globalWhitelist from '../../utils/globalWhitelist';
|
||||
import reservedNames from '../../utils/reservedNames';
|
||||
import Compiler from '../Compiler';
|
||||
import Stylesheet from '../../css/Stylesheet';
|
||||
import Stats from '../../Stats';
|
||||
import Block from './Block';
|
||||
import { test } from '../../config';
|
||||
import { Ast, CompileOptions, Node } from '../../interfaces';
|
||||
|
||||
export class DomTarget {
|
||||
blocks: (Block|string)[];
|
||||
readonly: Set<string>;
|
||||
metaBindings: string[];
|
||||
|
||||
hasIntroTransitions: boolean;
|
||||
hasOutroTransitions: boolean;
|
||||
hasComplexBindings: boolean;
|
||||
|
||||
constructor() {
|
||||
this.blocks = [];
|
||||
this.readonly = new Set();
|
||||
|
||||
// initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
|
||||
this.metaBindings = [];
|
||||
}
|
||||
}
|
||||
|
||||
export default function dom(
|
||||
ast: Ast,
|
||||
source: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions,
|
||||
stats: Stats
|
||||
) {
|
||||
const format = options.format || 'es';
|
||||
|
||||
const target = new DomTarget();
|
||||
const compiler = new Compiler(ast, source, options.name || 'SvelteComponent', stylesheet, options, stats, true, target);
|
||||
|
||||
const {
|
||||
computations,
|
||||
name,
|
||||
templateProperties,
|
||||
namespace,
|
||||
} = compiler;
|
||||
|
||||
compiler.fragment.build();
|
||||
const { block } = compiler.fragment;
|
||||
|
||||
// prevent fragment being created twice (#1063)
|
||||
if (options.customElement) block.builders.create.addLine(`this.c = @noop;`);
|
||||
|
||||
const builder = new CodeBuilder();
|
||||
const computationBuilder = new CodeBuilder();
|
||||
const computationDeps = new Set();
|
||||
|
||||
if (computations.length) {
|
||||
computations.forEach(({ key, deps }) => {
|
||||
if (target.readonly.has(key)) {
|
||||
// <svelte:window> bindings
|
||||
throw new Error(
|
||||
`Cannot have a computed value '${key}' that clashes with a read-only property`
|
||||
);
|
||||
}
|
||||
|
||||
target.readonly.add(key);
|
||||
|
||||
if (deps) {
|
||||
deps.forEach(dep => {
|
||||
computationDeps.add(dep);
|
||||
});
|
||||
|
||||
const condition = `${deps.map(dep => `changed.${dep}`).join(' || ')}`;
|
||||
const statement = `if (this._differs(state.${key}, (state.${key} = %computed-${key}(state)))) changed.${key} = true;`;
|
||||
|
||||
computationBuilder.addConditional(condition, statement);
|
||||
} else {
|
||||
// computed property depends on entire state object —
|
||||
// these must go at the end
|
||||
computationBuilder.addLine(
|
||||
`if (this._differs(state.${key}, (state.${key} = %computed-${key}(state)))) changed.${key} = true;`
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (compiler.javascript) {
|
||||
builder.addBlock(compiler.javascript);
|
||||
}
|
||||
|
||||
const css = compiler.stylesheet.render(options.filename, !compiler.customElement);
|
||||
const styles = compiler.stylesheet.hasStyles && stringify(options.dev ?
|
||||
`${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` :
|
||||
css.code, { onlyEscapeAtSymbol: true });
|
||||
|
||||
if (styles && compiler.options.css !== false && !compiler.customElement) {
|
||||
builder.addBlock(deindent`
|
||||
function @add_css() {
|
||||
var style = @createElement("style");
|
||||
style.id = '${compiler.stylesheet.id}-style';
|
||||
style.textContent = ${styles};
|
||||
@appendNode(style, document.head);
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
target.blocks.forEach(block => {
|
||||
builder.addBlock(block.toString());
|
||||
});
|
||||
|
||||
const sharedPath: string = options.shared === true
|
||||
? 'svelte/shared.js'
|
||||
: options.shared || '';
|
||||
|
||||
const proto = sharedPath
|
||||
? `@proto`
|
||||
: deindent`
|
||||
{
|
||||
${['destroy', 'get', 'fire', 'on', 'set', '_set', '_mount', '_differs']
|
||||
.map(n => `${n}: @${n}`)
|
||||
.join(',\n')}
|
||||
}`;
|
||||
|
||||
const debugName = `<${compiler.customElement ? compiler.tag : name}>`;
|
||||
|
||||
// generate initial state object
|
||||
const expectedProperties = Array.from(compiler.expectedProperties);
|
||||
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
|
||||
const storeProps = expectedProperties.filter(prop => prop[0] === '$');
|
||||
const initialState = [];
|
||||
|
||||
if (globals.length > 0) {
|
||||
initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
|
||||
}
|
||||
|
||||
if (storeProps.length > 0) {
|
||||
initialState.push(`this.store._init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`);
|
||||
}
|
||||
|
||||
if (templateProperties.data) {
|
||||
initialState.push(`%data()`);
|
||||
} else if (globals.length === 0 && storeProps.length === 0) {
|
||||
initialState.push('{}');
|
||||
}
|
||||
|
||||
initialState.push(`options.data`);
|
||||
|
||||
const hasInitHooks = !!(templateProperties.oncreate || templateProperties.onstate || templateProperties.onupdate);
|
||||
|
||||
const constructorBody = deindent`
|
||||
${options.dev && `this._debugName = '${debugName}';`}
|
||||
${options.dev && !compiler.customElement &&
|
||||
`if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");`}
|
||||
@init(this, options);
|
||||
${templateProperties.store && `this.store = %store();`}
|
||||
${compiler.usesRefs && `this.refs = {};`}
|
||||
this._state = ${initialState.reduce((state, piece) => `@assign(${state}, ${piece})`)};
|
||||
${storeProps.length > 0 && `this.store._add(this, [${storeProps.map(prop => `"${prop.slice(1)}"`)}]);`}
|
||||
${target.metaBindings}
|
||||
${computations.length && `this._recompute({ ${Array.from(computationDeps).map(dep => `${dep}: 1`).join(', ')} }, this._state);`}
|
||||
${options.dev &&
|
||||
Array.from(compiler.expectedProperties).map(prop => {
|
||||
if (globalWhitelist.has(prop)) return;
|
||||
if (computations.find(c => c.key === prop)) return;
|
||||
|
||||
const message = compiler.components.has(prop) ?
|
||||
`${debugName} expected to find '${prop}' in \`data\`, but found it in \`components\` instead` :
|
||||
`${debugName} was created without expected data property '${prop}'`;
|
||||
|
||||
const conditions = [`!('${prop}' in this._state)`];
|
||||
if (compiler.customElement) conditions.push(`!('${prop}' in this.attributes)`);
|
||||
|
||||
return `if (${conditions.join(' && ')}) console.warn("${message}");`
|
||||
})}
|
||||
${compiler.bindingGroups.length &&
|
||||
`this._bindingGroups = [${Array(compiler.bindingGroups.length).fill('[]').join(', ')}];`}
|
||||
|
||||
${templateProperties.onstate && `this._handlers.state = [%onstate];`}
|
||||
${templateProperties.onupdate && `this._handlers.update = [%onupdate];`}
|
||||
|
||||
${(templateProperties.ondestroy || storeProps.length) && (
|
||||
`this._handlers.destroy = [${
|
||||
[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
|
||||
}];`
|
||||
)}
|
||||
|
||||
${compiler.slots.size && `this._slotted = options.slots || {};`}
|
||||
|
||||
${compiler.customElement ?
|
||||
deindent`
|
||||
this.attachShadow({ mode: 'open' });
|
||||
${css.code && `this.shadowRoot.innerHTML = \`<style>${escape(css.code, { onlyEscapeAtSymbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
|
||||
` :
|
||||
(compiler.stylesheet.hasStyles && options.css !== false &&
|
||||
`if (!document.getElementById("${compiler.stylesheet.id}-style")) @add_css();`)
|
||||
}
|
||||
|
||||
${(hasInitHooks || compiler.hasComponents || target.hasComplexBindings || target.hasIntroTransitions) && deindent`
|
||||
if (!options.root) {
|
||||
this._oncreate = [];
|
||||
${(compiler.hasComponents || target.hasComplexBindings) && `this._beforecreate = [];`}
|
||||
${(compiler.hasComponents || target.hasIntroTransitions) && `this._aftercreate = [];`}
|
||||
}
|
||||
`}
|
||||
|
||||
${compiler.slots.size && `this.slots = {};`}
|
||||
|
||||
this._fragment = @create_main_fragment(this, this._state);
|
||||
|
||||
${hasInitHooks && deindent`
|
||||
this.root._oncreate.push(() => {
|
||||
${templateProperties.onstate && `%onstate.call(this, { changed: @assignTrue({}, this._state), current: this._state });`}
|
||||
${templateProperties.oncreate && `%oncreate.call(this);`}
|
||||
this.fire("update", { changed: @assignTrue({}, this._state), current: this._state });
|
||||
});
|
||||
`}
|
||||
|
||||
${compiler.customElement ? deindent`
|
||||
this._fragment.c();
|
||||
this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
|
||||
|
||||
if (options.target) this._mount(options.target, options.anchor);
|
||||
` : deindent`
|
||||
if (options.target) {
|
||||
${compiler.options.hydratable
|
||||
? deindent`
|
||||
var nodes = @children(options.target);
|
||||
options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
|
||||
nodes.forEach(@detachNode);
|
||||
` :
|
||||
deindent`
|
||||
${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
|
||||
this._fragment.c();
|
||||
`}
|
||||
this._mount(options.target, options.anchor);
|
||||
|
||||
${(compiler.hasComponents || target.hasComplexBindings || hasInitHooks || target.hasIntroTransitions) && deindent`
|
||||
${compiler.hasComponents && `this._lock = true;`}
|
||||
${(compiler.hasComponents || target.hasComplexBindings) && `@callAll(this._beforecreate);`}
|
||||
${(compiler.hasComponents || hasInitHooks) && `@callAll(this._oncreate);`}
|
||||
${(compiler.hasComponents || target.hasIntroTransitions) && `@callAll(this._aftercreate);`}
|
||||
${compiler.hasComponents && `this._lock = false;`}
|
||||
`}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
if (compiler.customElement) {
|
||||
const props = compiler.props || Array.from(compiler.expectedProperties);
|
||||
|
||||
builder.addBlock(deindent`
|
||||
class ${name} extends HTMLElement {
|
||||
constructor(options = {}) {
|
||||
super();
|
||||
${constructorBody}
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ${JSON.stringify(props)};
|
||||
}
|
||||
|
||||
${props.map(prop => deindent`
|
||||
get ${prop}() {
|
||||
return this.get().${prop};
|
||||
}
|
||||
|
||||
set ${prop}(value) {
|
||||
this.set({ ${prop}: value });
|
||||
}
|
||||
`).join('\n\n')}
|
||||
|
||||
${compiler.slots.size && deindent`
|
||||
connectedCallback() {
|
||||
Object.keys(this._slotted).forEach(key => {
|
||||
this.appendChild(this._slotted[key]);
|
||||
});
|
||||
}`}
|
||||
|
||||
attributeChangedCallback(attr, oldValue, newValue) {
|
||||
this.set({ [attr]: newValue });
|
||||
}
|
||||
|
||||
${(compiler.hasComponents || target.hasComplexBindings || templateProperties.oncreate || target.hasIntroTransitions) && deindent`
|
||||
connectedCallback() {
|
||||
${compiler.hasComponents && `this._lock = true;`}
|
||||
${(compiler.hasComponents || target.hasComplexBindings) && `@callAll(this._beforecreate);`}
|
||||
${(compiler.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
|
||||
${(compiler.hasComponents || target.hasIntroTransitions) && `@callAll(this._aftercreate);`}
|
||||
${compiler.hasComponents && `this._lock = false;`}
|
||||
}
|
||||
`}
|
||||
}
|
||||
|
||||
@assign(${name}.prototype, ${proto});
|
||||
${templateProperties.methods && `@assign(${name}.prototype, %methods);`}
|
||||
@assign(${name}.prototype, {
|
||||
_mount(target, anchor) {
|
||||
target.insertBefore(this, anchor);
|
||||
}
|
||||
});
|
||||
|
||||
customElements.define("${compiler.tag}", ${name});
|
||||
`);
|
||||
} else {
|
||||
builder.addBlock(deindent`
|
||||
function ${name}(options) {
|
||||
${constructorBody}
|
||||
}
|
||||
|
||||
@assign(${name}.prototype, ${proto});
|
||||
${templateProperties.methods && `@assign(${name}.prototype, %methods);`}
|
||||
`);
|
||||
}
|
||||
|
||||
const immutable = templateProperties.immutable ? templateProperties.immutable.value.value : options.immutable;
|
||||
|
||||
builder.addBlock(deindent`
|
||||
${options.dev && deindent`
|
||||
${name}.prototype._checkReadOnly = function _checkReadOnly(newState) {
|
||||
${Array.from(target.readonly).map(
|
||||
prop =>
|
||||
`if ('${prop}' in newState && !this._updatingReadonlyProperty) throw new Error("${debugName}: Cannot set read-only property '${prop}'");`
|
||||
)}
|
||||
};
|
||||
`}
|
||||
|
||||
${computations.length ? deindent`
|
||||
${name}.prototype._recompute = function _recompute(changed, state) {
|
||||
${computationBuilder}
|
||||
}
|
||||
` : (!sharedPath && `${name}.prototype._recompute = @noop;`)}
|
||||
|
||||
${templateProperties.setup && `%setup(${name});`}
|
||||
|
||||
${templateProperties.preload && `${name}.preload = %preload;`}
|
||||
|
||||
${immutable && `${name}.prototype._differs = @_differsImmutable;`}
|
||||
`);
|
||||
|
||||
let result = builder.toString();
|
||||
|
||||
const filename = options.filename && (
|
||||
typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename
|
||||
);
|
||||
|
||||
return compiler.generate(result, options, {
|
||||
banner: `/* ${filename ? `${filename} ` : ``}generated by Svelte v${"__VERSION__"} */`,
|
||||
sharedPath,
|
||||
name,
|
||||
format,
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Node from './shared/Node';
|
||||
import Expression from './shared/Expression';
|
||||
|
||||
export default class Action extends Node {
|
||||
type: 'Action';
|
||||
name: string;
|
||||
expression: Expression;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.name = info.name;
|
||||
|
||||
this.expression = info.expression
|
||||
? new Expression(compiler, this, scope, info.expression)
|
||||
: null;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,200 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import PendingBlock from './PendingBlock';
|
||||
import ThenBlock from './ThenBlock';
|
||||
import CatchBlock from './CatchBlock';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
import Expression from './shared/Expression';
|
||||
import { SsrTarget } from '../ssr';
|
||||
|
||||
export default class AwaitBlock extends Node {
|
||||
expression: Expression;
|
||||
value: string;
|
||||
error: string;
|
||||
|
||||
pending: PendingBlock;
|
||||
then: ThenBlock;
|
||||
catch: CatchBlock;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.expression = new Expression(compiler, this, scope, info.expression);
|
||||
const deps = this.expression.dependencies;
|
||||
|
||||
this.value = info.value;
|
||||
this.error = info.error;
|
||||
|
||||
this.pending = new PendingBlock(compiler, this, scope, info.pending);
|
||||
this.then = new ThenBlock(compiler, this, scope.add(this.value, deps), info.then);
|
||||
this.catch = new CatchBlock(compiler, this, scope.add(this.error, deps), info.catch);
|
||||
}
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
this.var = block.getUniqueName('await_block');
|
||||
block.addDependencies(this.expression.dependencies);
|
||||
|
||||
let isDynamic = false;
|
||||
let hasIntros = false;
|
||||
let hasOutros = false;
|
||||
|
||||
['pending', 'then', 'catch'].forEach(status => {
|
||||
const child = this[status];
|
||||
|
||||
child.block = block.child({
|
||||
comment: createDebuggingComment(child, this.compiler),
|
||||
name: this.compiler.getUniqueName(`create_${status}_block`)
|
||||
});
|
||||
|
||||
child.initChildren(child.block, stripWhitespace, nextSibling);
|
||||
this.compiler.target.blocks.push(child.block);
|
||||
|
||||
if (child.block.dependencies.size > 0) {
|
||||
isDynamic = true;
|
||||
block.addDependencies(child.block.dependencies);
|
||||
}
|
||||
|
||||
if (child.block.hasIntroMethod) hasIntros = true;
|
||||
if (child.block.hasOutroMethod) hasOutros = true;
|
||||
});
|
||||
|
||||
this.pending.block.hasUpdateMethod = isDynamic;
|
||||
this.then.block.hasUpdateMethod = isDynamic;
|
||||
this.catch.block.hasUpdateMethod = isDynamic;
|
||||
|
||||
this.pending.block.hasIntroMethod = hasIntros;
|
||||
this.then.block.hasIntroMethod = hasIntros;
|
||||
this.catch.block.hasIntroMethod = hasIntros;
|
||||
|
||||
this.pending.block.hasOutroMethod = hasOutros;
|
||||
this.then.block.hasOutroMethod = hasOutros;
|
||||
this.catch.block.hasOutroMethod = hasOutros;
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const name = this.var;
|
||||
|
||||
const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
const { snippet } = this.expression;
|
||||
|
||||
const info = block.getUniqueName(`info`);
|
||||
const promise = block.getUniqueName(`promise`);
|
||||
|
||||
block.addVariable(promise);
|
||||
|
||||
block.maintainContext = true;
|
||||
|
||||
const infoProps = [
|
||||
block.alias('component') === 'component' ? 'component' : `component: #component`,
|
||||
'ctx',
|
||||
'current: null',
|
||||
this.pending.block.name && `pending: ${this.pending.block.name}`,
|
||||
this.then.block.name && `then: ${this.then.block.name}`,
|
||||
this.catch.block.name && `catch: ${this.catch.block.name}`,
|
||||
this.then.block.name && `value: '${this.value}'`,
|
||||
this.catch.block.name && `error: '${this.error}'`,
|
||||
this.pending.block.hasOutroMethod && `blocks: Array(3)`
|
||||
].filter(Boolean);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
let ${info} = {
|
||||
${infoProps.join(',\n')}
|
||||
};
|
||||
`);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
@handlePromise(${promise} = ${snippet}, ${info});
|
||||
`);
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
${info}.block.c();
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
${info}.block.l(${parentNodes});
|
||||
`);
|
||||
}
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
${info}.block.${this.pending.block.hasIntroMethod ? 'i' : 'm'}(${initialMountNode}, ${info}.anchor = ${anchorNode});
|
||||
${info}.mount = () => ${updateMountNode};
|
||||
`);
|
||||
|
||||
const conditions = [];
|
||||
if (this.expression.dependencies.size > 0) {
|
||||
conditions.push(
|
||||
`(${[...this.expression.dependencies].map(dep => `'${dep}' in changed`).join(' || ')})`
|
||||
);
|
||||
}
|
||||
|
||||
conditions.push(
|
||||
`${promise} !== (${promise} = ${snippet})`,
|
||||
`@handlePromise(${promise}, ${info})`
|
||||
);
|
||||
|
||||
block.builders.update.addLine(
|
||||
`${info}.ctx = ctx;`
|
||||
);
|
||||
|
||||
if (this.pending.block.hasUpdateMethod) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${conditions.join(' && ')}) {
|
||||
// nothing
|
||||
} else {
|
||||
${info}.block.p(changed, @assign(@assign({}, ctx), ${info}.resolved));
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
${conditions.join(' && ')}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
${info}.block.d(${parentNode ? '' : 'detach'});
|
||||
${info} = null;
|
||||
`);
|
||||
|
||||
[this.pending, this.then, this.catch].forEach(status => {
|
||||
status.children.forEach(child => {
|
||||
child.build(status.block, null, 'nodes');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ssr() {
|
||||
const target: SsrTarget = <SsrTarget>this.compiler.target;
|
||||
const { snippet } = this.expression;
|
||||
|
||||
target.append('${(function(__value) { if(@isPromise(__value)) return `');
|
||||
|
||||
this.pending.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
|
||||
target.append('`; return function(ctx) { return `');
|
||||
|
||||
this.then.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
|
||||
target.append(`\`;}(Object.assign({}, ctx, { ${this.value}: __value }));}(${snippet})) }`);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
|
||||
export default class CatchBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.children = mapChildren(compiler, parent, scope, info.children);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class Comment extends Node {
|
||||
type: 'Comment';
|
||||
data: string;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.data = info.data;
|
||||
}
|
||||
|
||||
ssr() {
|
||||
// Allow option to preserve comments, otherwise ignore
|
||||
if (this.compiler.options.preserveComments) {
|
||||
this.compiler.target.append(`<!--${this.data}-->`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,619 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import flattenReference from '../../utils/flattenReference';
|
||||
import validCalleeObjects from '../../utils/validCalleeObjects';
|
||||
import stringifyProps from '../../utils/stringifyProps';
|
||||
import CodeBuilder from '../../utils/CodeBuilder';
|
||||
import getTailSnippet from '../../utils/getTailSnippet';
|
||||
import getObject from '../../utils/getObject';
|
||||
import quoteIfNecessary from '../../utils/quoteIfNecessary';
|
||||
import { escape, escapeTemplate, stringify } from '../../utils/stringify';
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import Attribute from './Attribute';
|
||||
import usesThisOrArguments from '../../validate/js/utils/usesThisOrArguments';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
import Binding from './Binding';
|
||||
import EventHandler from './EventHandler';
|
||||
import Expression from './shared/Expression';
|
||||
import { AppendTarget } from '../../interfaces';
|
||||
import addToSet from '../../utils/addToSet';
|
||||
|
||||
export default class Component extends Node {
|
||||
type: 'Component';
|
||||
name: string;
|
||||
expression: Expression;
|
||||
attributes: Attribute[];
|
||||
bindings: Binding[];
|
||||
handlers: EventHandler[];
|
||||
children: Node[];
|
||||
ref: string;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
compiler.hasComponents = true;
|
||||
|
||||
this.name = info.name;
|
||||
|
||||
this.expression = this.name === 'svelte:component'
|
||||
? new Expression(compiler, this, scope, info.expression)
|
||||
: null;
|
||||
|
||||
this.attributes = [];
|
||||
this.bindings = [];
|
||||
this.handlers = [];
|
||||
|
||||
info.attributes.forEach(node => {
|
||||
switch (node.type) {
|
||||
case 'Attribute':
|
||||
case 'Spread':
|
||||
this.attributes.push(new Attribute(compiler, this, scope, node));
|
||||
break;
|
||||
|
||||
case 'Binding':
|
||||
this.bindings.push(new Binding(compiler, this, scope, node));
|
||||
break;
|
||||
|
||||
case 'EventHandler':
|
||||
this.handlers.push(new EventHandler(compiler, this, scope, node));
|
||||
break;
|
||||
|
||||
case 'Ref':
|
||||
// TODO catch this in validation
|
||||
if (this.ref) throw new Error(`Duplicate refs`);
|
||||
|
||||
compiler.usesRefs = true
|
||||
this.ref = node.name;
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Not implemented: ${node.type}`);
|
||||
}
|
||||
});
|
||||
|
||||
this.children = mapChildren(compiler, this, scope, info.children);
|
||||
}
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
this.attributes.forEach(attr => {
|
||||
block.addDependencies(attr.dependencies);
|
||||
});
|
||||
|
||||
this.bindings.forEach(binding => {
|
||||
block.addDependencies(binding.value.dependencies);
|
||||
});
|
||||
|
||||
this.handlers.forEach(handler => {
|
||||
block.addDependencies(handler.dependencies);
|
||||
});
|
||||
|
||||
this.var = block.getUniqueName(
|
||||
(
|
||||
this.name === 'svelte:self' ? this.compiler.name :
|
||||
this.name === 'svelte:component' ? 'switch_instance' :
|
||||
this.name
|
||||
).toLowerCase()
|
||||
);
|
||||
|
||||
if (this.children.length) {
|
||||
this._slots = new Set(['default']);
|
||||
|
||||
this.children.forEach(child => {
|
||||
child.init(block, stripWhitespace, nextSibling);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const { compiler } = this;
|
||||
|
||||
const name = this.var;
|
||||
|
||||
const componentInitProperties = [`root: #component.root`];
|
||||
|
||||
if (this.children.length > 0) {
|
||||
const slots = Array.from(this._slots).map(name => `${quoteIfNecessary(name)}: @createFragment()`);
|
||||
componentInitProperties.push(`slots: { ${slots.join(', ')} }`);
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.build(block, `${this.var}._slotted.default`, 'nodes');
|
||||
});
|
||||
}
|
||||
|
||||
const statements: string[] = [];
|
||||
|
||||
const name_initial_data = block.getUniqueName(`${name}_initial_data`);
|
||||
const name_changes = block.getUniqueName(`${name}_changes`);
|
||||
let name_updating: string;
|
||||
let beforecreate: string = null;
|
||||
|
||||
const updates: string[] = [];
|
||||
|
||||
const usesSpread = !!this.attributes.find(a => a.isSpread);
|
||||
|
||||
const attributeObject = usesSpread
|
||||
? '{}'
|
||||
: stringifyProps(
|
||||
this.attributes.map(attr => `${attr.name}: ${attr.getValue()}`)
|
||||
);
|
||||
|
||||
if (this.attributes.length || this.bindings.length) {
|
||||
componentInitProperties.push(`data: ${name_initial_data}`);
|
||||
}
|
||||
|
||||
if ((!usesSpread && this.attributes.filter(a => a.isDynamic).length) || this.bindings.length) {
|
||||
updates.push(`var ${name_changes} = {};`);
|
||||
}
|
||||
|
||||
if (this.attributes.length) {
|
||||
if (usesSpread) {
|
||||
const levels = block.getUniqueName(`${this.var}_spread_levels`);
|
||||
|
||||
const initialProps = [];
|
||||
const changes = [];
|
||||
|
||||
const allDependencies = new Set();
|
||||
|
||||
this.attributes.forEach(attr => {
|
||||
addToSet(allDependencies, attr.dependencies);
|
||||
});
|
||||
|
||||
this.attributes.forEach(attr => {
|
||||
const { name, dependencies } = attr;
|
||||
|
||||
const condition = dependencies.size > 0 && (dependencies.size !== allDependencies.size)
|
||||
? [...dependencies].map(d => `changed.${d}`).join(' || ')
|
||||
: null;
|
||||
|
||||
if (attr.isSpread) {
|
||||
const value = attr.expression.snippet;
|
||||
initialProps.push(value);
|
||||
|
||||
changes.push(condition ? `${condition} && ${value}` : value);
|
||||
} else {
|
||||
const obj = `{ ${quoteIfNecessary(name)}: ${attr.getValue()} }`;
|
||||
initialProps.push(obj);
|
||||
|
||||
changes.push(condition ? `${condition} && ${obj}` : obj);
|
||||
}
|
||||
});
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${levels} = [
|
||||
${initialProps.join(',\n')}
|
||||
];
|
||||
`);
|
||||
|
||||
statements.push(deindent`
|
||||
for (var #i = 0; #i < ${levels}.length; #i += 1) {
|
||||
${name_initial_data} = @assign(${name_initial_data}, ${levels}[#i]);
|
||||
}
|
||||
`);
|
||||
|
||||
const conditions = [...allDependencies].map(dep => `changed.${dep}`).join(' || ');
|
||||
|
||||
updates.push(deindent`
|
||||
var ${name_changes} = ${allDependencies.size === 1 ? `${conditions}` : `(${conditions})`} && @getSpreadUpdate(${levels}, [
|
||||
${changes.join(',\n')}
|
||||
]);
|
||||
`);
|
||||
} else {
|
||||
this.attributes
|
||||
.filter((attribute: Attribute) => attribute.isDynamic)
|
||||
.forEach((attribute: Attribute) => {
|
||||
if (attribute.dependencies.size > 0) {
|
||||
updates.push(deindent`
|
||||
if (${[...attribute.dependencies]
|
||||
.map(dependency => `changed.${dependency}`)
|
||||
.join(' || ')}) ${name_changes}.${attribute.name} = ${attribute.getValue()};
|
||||
`);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (this.bindings.length) {
|
||||
compiler.target.hasComplexBindings = true;
|
||||
|
||||
name_updating = block.alias(`${name}_updating`);
|
||||
block.addVariable(name_updating, '{}');
|
||||
|
||||
let hasLocalBindings = false;
|
||||
let hasStoreBindings = false;
|
||||
|
||||
const builder = new CodeBuilder();
|
||||
|
||||
this.bindings.forEach((binding: Binding) => {
|
||||
let { name: key } = getObject(binding.value.node);
|
||||
|
||||
let setFromChild;
|
||||
|
||||
if (binding.isContextual) {
|
||||
const computed = isComputed(binding.value.node);
|
||||
const tail = binding.value.node.type === 'MemberExpression' ? getTailSnippet(binding.value.node) : '';
|
||||
|
||||
const head = block.bindings.get(key);
|
||||
|
||||
const lhs = binding.value.node.type === 'MemberExpression'
|
||||
? binding.value.snippet
|
||||
: `${head}${tail} = childState.${binding.name}`;
|
||||
|
||||
setFromChild = deindent`
|
||||
${lhs} = childState.${binding.name};
|
||||
|
||||
${[...binding.value.dependencies]
|
||||
.map((name: string) => {
|
||||
const isStoreProp = name[0] === '$';
|
||||
const prop = isStoreProp ? name.slice(1) : name;
|
||||
const newState = isStoreProp ? 'newStoreState' : 'newState';
|
||||
|
||||
if (isStoreProp) hasStoreBindings = true;
|
||||
else hasLocalBindings = true;
|
||||
|
||||
return `${newState}.${prop} = ctx.${name};`;
|
||||
})}
|
||||
`;
|
||||
}
|
||||
|
||||
else {
|
||||
const isStoreProp = key[0] === '$';
|
||||
const prop = isStoreProp ? key.slice(1) : key;
|
||||
const newState = isStoreProp ? 'newStoreState' : 'newState';
|
||||
|
||||
if (isStoreProp) hasStoreBindings = true;
|
||||
else hasLocalBindings = true;
|
||||
|
||||
if (binding.value.node.type === 'MemberExpression') {
|
||||
setFromChild = deindent`
|
||||
${binding.value.snippet} = childState.${binding.name};
|
||||
${newState}.${prop} = ctx.${key};
|
||||
`;
|
||||
}
|
||||
|
||||
else {
|
||||
setFromChild = `${newState}.${prop} = childState.${binding.name};`;
|
||||
}
|
||||
}
|
||||
|
||||
statements.push(deindent`
|
||||
if (${binding.prop} in ${binding.obj}) {
|
||||
${name_initial_data}.${binding.name} = ${binding.value.snippet};
|
||||
${name_updating}.${binding.name} = true;
|
||||
}`
|
||||
);
|
||||
|
||||
builder.addConditional(
|
||||
`!${name_updating}.${binding.name} && changed.${binding.name}`,
|
||||
setFromChild
|
||||
);
|
||||
|
||||
updates.push(deindent`
|
||||
if (!${name_updating}.${binding.name} && ${[...binding.value.dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
|
||||
${name_changes}.${binding.name} = ${binding.value.snippet};
|
||||
${name_updating}.${binding.name} = true;
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
block.maintainContext = true; // TODO put this somewhere more logical
|
||||
|
||||
const initialisers = [
|
||||
hasLocalBindings && 'newState = {}',
|
||||
hasStoreBindings && 'newStoreState = {}',
|
||||
].filter(Boolean).join(', ');
|
||||
|
||||
// TODO use component.on('state', ...) instead of _bind
|
||||
componentInitProperties.push(deindent`
|
||||
_bind: function(changed, childState) {
|
||||
var ${initialisers};
|
||||
${builder}
|
||||
${hasStoreBindings && `#component.store.set(newStoreState);`}
|
||||
${hasLocalBindings && `#component._set(newState);`}
|
||||
${name_updating} = {};
|
||||
}
|
||||
`);
|
||||
|
||||
beforecreate = deindent`
|
||||
#component.root._beforecreate.push(function() {
|
||||
${name}._bind({ ${this.bindings.map(b => `${b.name}: 1`).join(', ')} }, ${name}.get());
|
||||
});
|
||||
`;
|
||||
}
|
||||
|
||||
this.handlers.forEach(handler => {
|
||||
handler.var = block.getUniqueName(`${this.var}_${handler.name}`); // TODO this is hacky
|
||||
handler.render(compiler, block, false); // TODO hoist when possible
|
||||
if (handler.usesContext) block.maintainContext = true; // TODO is there a better place to put this?
|
||||
});
|
||||
|
||||
if (this.name === 'svelte:component') {
|
||||
const switch_value = block.getUniqueName('switch_value');
|
||||
const switch_props = block.getUniqueName('switch_props');
|
||||
|
||||
const { dependencies, snippet } = this.expression;
|
||||
|
||||
const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${switch_value} = ${snippet};
|
||||
|
||||
function ${switch_props}(ctx) {
|
||||
${(this.attributes.length || this.bindings.length) && deindent`
|
||||
var ${name_initial_data} = ${attributeObject};`}
|
||||
${statements}
|
||||
return {
|
||||
${componentInitProperties.join(',\n')}
|
||||
};
|
||||
}
|
||||
|
||||
if (${switch_value}) {
|
||||
var ${name} = new ${switch_value}(${switch_props}(ctx));
|
||||
|
||||
${beforecreate}
|
||||
}
|
||||
|
||||
${this.handlers.map(handler => deindent`
|
||||
function ${handler.var}(event) {
|
||||
${handler.snippet}
|
||||
}
|
||||
|
||||
if (${name}) ${name}.on("${handler.name}", ${handler.var});
|
||||
`)}
|
||||
`);
|
||||
|
||||
block.builders.create.addLine(
|
||||
`if (${name}) ${name}._fragment.c();`
|
||||
);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addLine(
|
||||
`if (${name}) ${name}._fragment.l(${parentNodes});`
|
||||
);
|
||||
}
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
if (${name}) {
|
||||
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
|
||||
${this.ref && `#component.refs.${this.ref} = ${name};`}
|
||||
}
|
||||
`);
|
||||
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
if (updates.length) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
${updates}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${switch_value} !== (${switch_value} = ${snippet})) {
|
||||
if (${name}) ${name}.destroy();
|
||||
|
||||
if (${switch_value}) {
|
||||
${name} = new ${switch_value}(${switch_props}(ctx));
|
||||
${name}._fragment.c();
|
||||
|
||||
${this.children.map(child => child.remount(name))}
|
||||
${name}._mount(${updateMountNode}, ${anchor});
|
||||
|
||||
${this.handlers.map(handler => deindent`
|
||||
${name}.on("${handler.name}", ${handler.var});
|
||||
`)}
|
||||
|
||||
${this.ref && `#component.refs.${this.ref} = ${name};`}
|
||||
}
|
||||
|
||||
${this.ref && deindent`
|
||||
else if (#component.refs.${this.ref} === ${name}) {
|
||||
#component.refs.${this.ref} = null;
|
||||
}`}
|
||||
}
|
||||
`);
|
||||
|
||||
if (updates.length) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
else if (${switch_value}) {
|
||||
${name}._set(${name_changes});
|
||||
${this.bindings.length && `${name_updating} = {};`}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addLine(`if (${name}) ${name}.destroy(${parentNode ? '' : 'detach'});`);
|
||||
} else {
|
||||
const expression = this.name === 'svelte:self'
|
||||
? compiler.name
|
||||
: `%components-${this.name}`;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
${(this.attributes.length || this.bindings.length) && deindent`
|
||||
var ${name_initial_data} = ${attributeObject};`}
|
||||
${statements}
|
||||
var ${name} = new ${expression}({
|
||||
${componentInitProperties.join(',\n')}
|
||||
});
|
||||
|
||||
${beforecreate}
|
||||
|
||||
${this.handlers.map(handler => deindent`
|
||||
${name}.on("${handler.name}", function(event) {
|
||||
${handler.snippet || `#component.fire("${handler.name}", event);`}
|
||||
});
|
||||
`)}
|
||||
|
||||
${this.ref && `#component.refs.${this.ref} = ${name};`}
|
||||
`);
|
||||
|
||||
block.builders.create.addLine(`${name}._fragment.c();`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addLine(
|
||||
`${name}._fragment.l(${parentNodes});`
|
||||
);
|
||||
}
|
||||
|
||||
block.builders.mount.addLine(
|
||||
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
|
||||
);
|
||||
|
||||
if (updates.length) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
${updates}
|
||||
${name}._set(${name_changes});
|
||||
${this.bindings.length && `${name_updating} = {};`}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addLine(deindent`
|
||||
${name}.destroy(${parentNode ? '' : 'detach'});
|
||||
${this.ref && `if (#component.refs.${this.ref} === ${name}) #component.refs.${this.ref} = null;`}
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
remount(name: string) {
|
||||
return `${this.var}._mount(${name}._slotted.default, null);`;
|
||||
}
|
||||
|
||||
ssr() {
|
||||
function stringifyAttribute(chunk: Node) {
|
||||
if (chunk.type === 'Text') {
|
||||
return escapeTemplate(escape(chunk.data));
|
||||
}
|
||||
|
||||
return '${@escape( ' + chunk.snippet + ')}';
|
||||
}
|
||||
|
||||
const bindingProps = this.bindings.map(binding => {
|
||||
const { name } = getObject(binding.value.node);
|
||||
const tail = binding.value.node.type === 'MemberExpression'
|
||||
? getTailSnippet(binding.value.node)
|
||||
: '';
|
||||
|
||||
return `${binding.name}: ctx.${name}${tail}`;
|
||||
});
|
||||
|
||||
function getAttributeValue(attribute) {
|
||||
if (attribute.isTrue) return `true`;
|
||||
if (attribute.chunks.length === 0) return `''`;
|
||||
|
||||
if (attribute.chunks.length === 1) {
|
||||
const chunk = attribute.chunks[0];
|
||||
if (chunk.type === 'Text') {
|
||||
return stringify(chunk.data);
|
||||
}
|
||||
|
||||
return chunk.snippet;
|
||||
}
|
||||
|
||||
return '`' + attribute.chunks.map(stringifyAttribute).join('') + '`';
|
||||
}
|
||||
|
||||
const usesSpread = this.attributes.find(attr => attr.isSpread);
|
||||
|
||||
const props = usesSpread
|
||||
? `Object.assign(${
|
||||
this.attributes
|
||||
.map(attribute => {
|
||||
if (attribute.isSpread) {
|
||||
return attribute.expression.snippet;
|
||||
} else {
|
||||
return `{ ${attribute.name}: ${getAttributeValue(attribute)} }`;
|
||||
}
|
||||
})
|
||||
.concat(bindingProps.map(p => `{ ${p} }`))
|
||||
.join(', ')
|
||||
})`
|
||||
: `{ ${this.attributes
|
||||
.map(attribute => `${attribute.name}: ${getAttributeValue(attribute)}`)
|
||||
.concat(bindingProps)
|
||||
.join(', ')} }`;
|
||||
|
||||
const isDynamicComponent = this.name === 'svelte:component';
|
||||
|
||||
const expression = (
|
||||
this.name === 'svelte:self' ? this.compiler.name :
|
||||
isDynamicComponent ? `((${this.expression.snippet}) || @missingComponent)` :
|
||||
`%components-${this.name}`
|
||||
);
|
||||
|
||||
this.bindings.forEach(binding => {
|
||||
const conditions = [];
|
||||
|
||||
let node = this;
|
||||
while (node = node.parent) {
|
||||
if (node.type === 'IfBlock') {
|
||||
// TODO handle contextual bindings...
|
||||
conditions.push(`(${node.expression.snippet})`);
|
||||
}
|
||||
}
|
||||
|
||||
conditions.push(`!('${binding.name}' in ctx)`);
|
||||
|
||||
const { name } = getObject(binding.value.node);
|
||||
|
||||
this.compiler.target.bindings.push(deindent`
|
||||
if (${conditions.reverse().join('&&')}) {
|
||||
tmp = ${expression}.data();
|
||||
if ('${name}' in tmp) {
|
||||
ctx.${binding.name} = tmp.${name};
|
||||
settled = false;
|
||||
}
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
let open = `\${${expression}._render(__result, ${props}`;
|
||||
|
||||
const options = [];
|
||||
options.push(`store: options.store`);
|
||||
|
||||
if (this.children.length) {
|
||||
const appendTarget: AppendTarget = {
|
||||
slots: { default: '' },
|
||||
slotStack: ['default']
|
||||
};
|
||||
|
||||
this.compiler.target.appendTargets.push(appendTarget);
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
|
||||
const slotted = Object.keys(appendTarget.slots)
|
||||
.map(name => `${name}: () => \`${appendTarget.slots[name]}\``)
|
||||
.join(', ');
|
||||
|
||||
options.push(`slotted: { ${slotted} }`);
|
||||
|
||||
this.compiler.target.appendTargets.pop();
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
open += `, { ${options.join(', ')} }`;
|
||||
}
|
||||
|
||||
this.compiler.target.append(open);
|
||||
this.compiler.target.append(')}');
|
||||
}
|
||||
}
|
||||
|
||||
function isComputed(node: Node) {
|
||||
while (node.type === 'MemberExpression') {
|
||||
if (node.computed) return true;
|
||||
node = node.object;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
@ -0,0 +1,483 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import ElseBlock from './ElseBlock';
|
||||
import Block from '../dom/Block';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
import Expression from './shared/Expression';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
import TemplateScope from './shared/TemplateScope';
|
||||
import unpackDestructuring from '../../utils/unpackDestructuring';
|
||||
|
||||
export default class EachBlock extends Node {
|
||||
type: 'EachBlock';
|
||||
|
||||
block: Block;
|
||||
expression: Expression;
|
||||
|
||||
iterations: string;
|
||||
index: string;
|
||||
context: string;
|
||||
key: Expression;
|
||||
scope: TemplateScope;
|
||||
contexts: Array<{ name: string, tail: string }>;
|
||||
|
||||
children: Node[];
|
||||
else?: ElseBlock;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.expression = new Expression(compiler, this, scope, info.expression);
|
||||
this.context = info.context.name || 'each'; // TODO this is used to facilitate binding; currently fails with destructuring
|
||||
this.index = info.index;
|
||||
|
||||
this.scope = scope.child();
|
||||
|
||||
this.contexts = [];
|
||||
unpackDestructuring(this.contexts, info.context, '');
|
||||
|
||||
this.contexts.forEach(context => {
|
||||
this.scope.add(context.key.name, this.expression.dependencies);
|
||||
});
|
||||
|
||||
this.key = info.key
|
||||
? new Expression(compiler, this, this.scope, info.key)
|
||||
: null;
|
||||
|
||||
if (this.index) {
|
||||
// index can only change if this is a keyed each block
|
||||
const dependencies = this.key ? this.expression.dependencies : [];
|
||||
this.scope.add(this.index, dependencies);
|
||||
}
|
||||
|
||||
this.children = mapChildren(compiler, this, this.scope, info.children);
|
||||
|
||||
this.else = info.else
|
||||
? new ElseBlock(compiler, this, this.scope, info.else)
|
||||
: null;
|
||||
}
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
this.var = block.getUniqueName(`each`);
|
||||
this.iterations = block.getUniqueName(`${this.var}_blocks`);
|
||||
this.get_each_context = this.compiler.getUniqueName(`get_${this.var}_context`);
|
||||
|
||||
const { dependencies } = this.expression;
|
||||
block.addDependencies(dependencies);
|
||||
|
||||
this.block = block.child({
|
||||
comment: createDebuggingComment(this, this.compiler),
|
||||
name: this.compiler.getUniqueName('create_each_block'),
|
||||
key: this.key,
|
||||
|
||||
bindings: new Map(block.bindings)
|
||||
});
|
||||
|
||||
this.each_block_value = this.compiler.getUniqueName('each_value');
|
||||
|
||||
const indexName = this.index || this.compiler.getUniqueName(`${this.context}_index`);
|
||||
|
||||
this.contexts.forEach(prop => {
|
||||
this.block.bindings.set(prop.key.name, `ctx.${this.each_block_value}[ctx.${indexName}]${prop.tail}`);
|
||||
});
|
||||
|
||||
if (this.index) {
|
||||
this.block.getUniqueName(this.index); // this prevents name collisions (#1254)
|
||||
}
|
||||
|
||||
this.contextProps = this.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`);
|
||||
|
||||
// TODO only add these if necessary
|
||||
this.contextProps.push(
|
||||
`child_ctx.${this.each_block_value} = list;`,
|
||||
`child_ctx.${indexName} = i;`
|
||||
);
|
||||
|
||||
this.compiler.target.blocks.push(this.block);
|
||||
this.initChildren(this.block, stripWhitespace, nextSibling);
|
||||
block.addDependencies(this.block.dependencies);
|
||||
this.block.hasUpdateMethod = this.block.dependencies.size > 0;
|
||||
|
||||
if (this.else) {
|
||||
this.else.block = block.child({
|
||||
comment: createDebuggingComment(this.else, this.compiler),
|
||||
name: this.compiler.getUniqueName(`${this.block.name}_else`),
|
||||
});
|
||||
|
||||
this.compiler.target.blocks.push(this.else.block);
|
||||
this.else.initChildren(
|
||||
this.else.block,
|
||||
stripWhitespace,
|
||||
nextSibling
|
||||
);
|
||||
this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
|
||||
}
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
if (this.children.length === 0) return;
|
||||
|
||||
const { compiler } = this;
|
||||
|
||||
const each = this.var;
|
||||
|
||||
const create_each_block = this.block.name;
|
||||
const iterations = this.iterations;
|
||||
|
||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
||||
const anchor = needsAnchor
|
||||
? block.getUniqueName(`${each}_anchor`)
|
||||
: (this.next && this.next.var) || 'null';
|
||||
|
||||
// hack the sourcemap, so that if data is missing the bug
|
||||
// is easy to find
|
||||
let c = this.start + 2;
|
||||
while (compiler.source[c] !== 'e') c += 1;
|
||||
compiler.code.overwrite(c, c + 4, 'length');
|
||||
const length = `[✂${c}-${c+4}✂]`;
|
||||
|
||||
const mountOrIntro = this.block.hasIntroMethod ? 'i' : 'm';
|
||||
const vars = {
|
||||
each,
|
||||
create_each_block,
|
||||
length,
|
||||
iterations,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
};
|
||||
|
||||
const { snippet } = this.expression;
|
||||
|
||||
block.builders.init.addLine(`var ${this.each_block_value} = ${snippet};`);
|
||||
|
||||
this.compiler.target.blocks.push(deindent`
|
||||
function ${this.get_each_context}(ctx, list, i) {
|
||||
const child_ctx = Object.create(ctx);
|
||||
${this.contextProps}
|
||||
return child_ctx;
|
||||
}
|
||||
`);
|
||||
|
||||
if (this.key) {
|
||||
this.buildKeyed(block, parentNode, parentNodes, snippet, vars);
|
||||
} else {
|
||||
this.buildUnkeyed(block, parentNode, parentNodes, snippet, vars);
|
||||
}
|
||||
|
||||
if (needsAnchor) {
|
||||
block.addElement(
|
||||
anchor,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
parentNode
|
||||
);
|
||||
}
|
||||
|
||||
if (this.else) {
|
||||
const each_block_else = compiler.getUniqueName(`${each}_else`);
|
||||
|
||||
block.builders.init.addLine(`var ${each_block_else} = null;`);
|
||||
|
||||
// TODO neaten this up... will end up with an empty line in the block
|
||||
block.builders.init.addBlock(deindent`
|
||||
if (!${this.each_block_value}.${length}) {
|
||||
${each_block_else} = ${this.else.block.name}(#component, ctx);
|
||||
${each_block_else}.c();
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
if (${each_block_else}) {
|
||||
${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || `${anchor}.parentNode`;
|
||||
|
||||
if (this.else.block.hasUpdateMethod) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (!${this.each_block_value}.${length} && ${each_block_else}) {
|
||||
${each_block_else}.p(changed, ctx);
|
||||
} else if (!${this.each_block_value}.${length}) {
|
||||
${each_block_else} = ${this.else.block.name}(#component, ctx);
|
||||
${each_block_else}.c();
|
||||
${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
|
||||
} else if (${each_block_else}) {
|
||||
${each_block_else}.d(1);
|
||||
${each_block_else} = null;
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${this.each_block_value}.${length}) {
|
||||
if (${each_block_else}) {
|
||||
${each_block_else}.d(1);
|
||||
${each_block_else} = null;
|
||||
}
|
||||
} else if (!${each_block_else}) {
|
||||
${each_block_else} = ${this.else.block.name}(#component, ctx);
|
||||
${each_block_else}.c();
|
||||
${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
if (${each_block_else}) ${each_block_else}.d(${parentNode ? '' : 'detach'});
|
||||
`);
|
||||
}
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.build(this.block, null, 'nodes');
|
||||
});
|
||||
|
||||
if (this.else) {
|
||||
this.else.children.forEach((child: Node) => {
|
||||
child.build(this.else.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
buildKeyed(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
snippet: string,
|
||||
{
|
||||
each,
|
||||
create_each_block,
|
||||
length,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
}
|
||||
) {
|
||||
const get_key = block.getUniqueName('get_key');
|
||||
const blocks = block.getUniqueName(`${each}_blocks`);
|
||||
const lookup = block.getUniqueName(`${each}_lookup`);
|
||||
|
||||
block.addVariable(blocks, '[]');
|
||||
block.addVariable(lookup, `@blankObject()`);
|
||||
|
||||
if (this.children[0].isDomNode()) {
|
||||
this.block.first = this.children[0].var;
|
||||
} else {
|
||||
this.block.first = this.block.getUniqueName('first');
|
||||
this.block.addElement(
|
||||
this.block.first,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
const ${get_key} = ctx => ${this.key.snippet};
|
||||
|
||||
for (var #i = 0; #i < ${this.each_block_value}.${length}; #i += 1) {
|
||||
let child_ctx = ${this.get_each_context}(ctx, ${this.each_block_value}, #i);
|
||||
let key = ${get_key}(child_ctx);
|
||||
${blocks}[#i] = ${lookup}[key] = ${create_each_block}(#component, key, child_ctx);
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].c();
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].l(${parentNodes});
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
|
||||
`);
|
||||
|
||||
const dynamic = this.block.hasUpdateMethod;
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${this.each_block_value} = ${snippet};
|
||||
|
||||
${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
|
||||
`);
|
||||
}
|
||||
|
||||
buildUnkeyed(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
snippet: string,
|
||||
{
|
||||
create_each_block,
|
||||
length,
|
||||
iterations,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
}
|
||||
) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${iterations} = [];
|
||||
|
||||
for (var #i = 0; #i < ${this.each_block_value}.${length}; #i += 1) {
|
||||
${iterations}[#i] = ${create_each_block}(#component, ${this.get_each_context}(ctx, ${this.each_block_value}, #i));
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].c();
|
||||
}
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].l(${parentNodes});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
|
||||
}
|
||||
`);
|
||||
|
||||
const allDependencies = new Set(this.block.dependencies);
|
||||
const { dependencies } = this.expression;
|
||||
dependencies.forEach((dependency: string) => {
|
||||
allDependencies.add(dependency);
|
||||
});
|
||||
|
||||
// TODO do this for keyed blocks as well
|
||||
const condition = Array.from(allDependencies)
|
||||
.map(dependency => `changed.${dependency}`)
|
||||
.join(' || ');
|
||||
|
||||
if (condition !== '') {
|
||||
const forLoopBody = this.block.hasUpdateMethod
|
||||
? this.block.hasIntroMethod
|
||||
? deindent`
|
||||
if (${iterations}[#i]) {
|
||||
${iterations}[#i].p(changed, child_ctx);
|
||||
} else {
|
||||
${iterations}[#i] = ${create_each_block}(#component, child_ctx);
|
||||
${iterations}[#i].c();
|
||||
}
|
||||
${iterations}[#i].i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (${iterations}[#i]) {
|
||||
${iterations}[#i].p(changed, child_ctx);
|
||||
} else {
|
||||
${iterations}[#i] = ${create_each_block}(#component, child_ctx);
|
||||
${iterations}[#i].c();
|
||||
${iterations}[#i].m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`
|
||||
: deindent`
|
||||
${iterations}[#i] = ${create_each_block}(#component, child_ctx);
|
||||
${iterations}[#i].c();
|
||||
${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
|
||||
|
||||
const outro = block.getUniqueName('outro');
|
||||
const destroy = this.block.hasOutroMethod
|
||||
? deindent`
|
||||
function ${outro}(i) {
|
||||
if (${iterations}[i]) {
|
||||
${iterations}[i].o(function() {
|
||||
${iterations}[i].d(1);
|
||||
${iterations}[i] = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
|
||||
`
|
||||
: deindent`
|
||||
for (; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].d(1);
|
||||
}
|
||||
${iterations}.length = ${this.each_block_value}.${length};
|
||||
`;
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${condition}) {
|
||||
${this.each_block_value} = ${snippet};
|
||||
|
||||
for (var #i = ${start}; #i < ${this.each_block_value}.${length}; #i += 1) {
|
||||
const child_ctx = ${this.get_each_context}(ctx, ${this.each_block_value}, #i);
|
||||
|
||||
${forLoopBody}
|
||||
}
|
||||
|
||||
${destroy}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
|
||||
}
|
||||
|
||||
remount(name: string) {
|
||||
// TODO consider keyed blocks
|
||||
return `for (var #i = 0; #i < ${this.iterations}.length; #i += 1) ${this.iterations}[#i].m(${name}._slotted.default, null);`;
|
||||
}
|
||||
|
||||
ssr() {
|
||||
const { compiler } = this;
|
||||
const { snippet } = this.expression;
|
||||
|
||||
const props = this.contexts.map(prop => `${prop.key.name}: item${prop.tail}`);
|
||||
|
||||
const getContext = this.index
|
||||
? `(item, i) => Object.assign({}, ctx, { ${props.join(', ')}, ${this.index}: i })`
|
||||
: `item => Object.assign({}, ctx, { ${props.join(', ')} })`;
|
||||
|
||||
const open = `\${ ${this.else ? `${snippet}.length ? ` : ''}@each(${snippet}, ${getContext}, ctx => \``;
|
||||
compiler.target.append(open);
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
|
||||
const close = `\`)`;
|
||||
compiler.target.append(close);
|
||||
|
||||
if (this.else) {
|
||||
compiler.target.append(` : \``);
|
||||
this.else.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
compiler.target.append(`\``);
|
||||
}
|
||||
|
||||
compiler.target.append('}');
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
|
||||
export default class ElseBlock extends Node {
|
||||
type: 'ElseBlock';
|
||||
children: Node[];
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.children = mapChildren(compiler, this, scope, info.children);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,94 @@
|
||||
import Node from './shared/Node';
|
||||
import Expression from './shared/Expression';
|
||||
import addToSet from '../../utils/addToSet';
|
||||
import flattenReference from '../../utils/flattenReference';
|
||||
import validCalleeObjects from '../../utils/validCalleeObjects';
|
||||
|
||||
export default class EventHandler extends Node {
|
||||
name: string;
|
||||
dependencies: Set<string>;
|
||||
expression: Node;
|
||||
callee: any; // TODO
|
||||
|
||||
usesComponent: boolean;
|
||||
usesContext: boolean;
|
||||
isCustomEvent: boolean;
|
||||
shouldHoist: boolean;
|
||||
|
||||
insertionPoint: number;
|
||||
args: Expression[];
|
||||
snippet: string;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.name = info.name;
|
||||
this.dependencies = new Set();
|
||||
|
||||
if (info.expression) {
|
||||
this.callee = flattenReference(info.expression.callee);
|
||||
this.insertionPoint = info.expression.start;
|
||||
|
||||
this.usesComponent = !validCalleeObjects.has(this.callee.name);
|
||||
this.usesContext = false;
|
||||
|
||||
this.args = info.expression.arguments.map(param => {
|
||||
const expression = new Expression(compiler, this, scope, param);
|
||||
addToSet(this.dependencies, expression.dependencies);
|
||||
if (expression.usesContext) this.usesContext = true;
|
||||
return expression;
|
||||
});
|
||||
|
||||
this.snippet = `[✂${info.expression.start}-${info.expression.end}✂];`;
|
||||
} else {
|
||||
this.callee = null;
|
||||
this.insertionPoint = null;
|
||||
|
||||
this.args = null;
|
||||
this.usesComponent = true;
|
||||
this.usesContext = false;
|
||||
|
||||
this.snippet = null; // TODO handle shorthand events here?
|
||||
}
|
||||
|
||||
this.isCustomEvent = compiler.events.has(this.name);
|
||||
this.shouldHoist = !this.isCustomEvent && parent.hasAncestor('EachBlock');
|
||||
}
|
||||
|
||||
render(compiler, block, hoisted) { // TODO hoist more event handlers
|
||||
if (this.insertionPoint === null) return; // TODO handle shorthand events here?
|
||||
|
||||
if (!validCalleeObjects.has(this.callee.name)) {
|
||||
const component = hoisted ? `component` : block.alias(`component`);
|
||||
|
||||
// allow event.stopPropagation(), this.select() etc
|
||||
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
||||
if (this.callee.name[0] === '$' && !compiler.methods.has(this.callee.name)) {
|
||||
compiler.code.overwrite(
|
||||
this.insertionPoint,
|
||||
this.insertionPoint + 1,
|
||||
`${component}.store.`
|
||||
);
|
||||
} else {
|
||||
compiler.code.prependRight(
|
||||
this.insertionPoint,
|
||||
`${component}.`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isCustomEvent) {
|
||||
this.args.forEach(arg => {
|
||||
arg.overwriteThis(this.parent.var);
|
||||
});
|
||||
|
||||
if (this.callee && this.callee.name === 'this') {
|
||||
const node = this.callee.nodes[0];
|
||||
compiler.code.overwrite(node.start, node.end, this.parent.var, {
|
||||
storeName: true,
|
||||
contentOnly: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import Node from './shared/Node';
|
||||
import Compiler from '../Compiler';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
import Block from '../dom/Block';
|
||||
import TemplateScope from './shared/TemplateScope';
|
||||
|
||||
export default class Fragment extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
scope: TemplateScope;
|
||||
|
||||
constructor(compiler: Compiler, info: any) {
|
||||
const scope = new TemplateScope();
|
||||
super(compiler, null, scope, info);
|
||||
|
||||
this.scope = scope;
|
||||
this.children = mapChildren(compiler, this, scope, info.children);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.block = new Block({
|
||||
compiler: this.compiler,
|
||||
name: '@create_main_fragment',
|
||||
key: null,
|
||||
|
||||
bindings: new Map(),
|
||||
|
||||
dependencies: new Set(),
|
||||
});
|
||||
|
||||
this.compiler.target.blocks.push(this.block);
|
||||
this.initChildren(this.block, true, null);
|
||||
|
||||
this.block.hasUpdateMethod = true;
|
||||
}
|
||||
|
||||
build() {
|
||||
this.init();
|
||||
|
||||
this.children.forEach(child => {
|
||||
child.build(this.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,495 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import ElseBlock from './ElseBlock';
|
||||
import Compiler from '../Compiler';
|
||||
import Block from '../dom/Block';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
import Expression from './shared/Expression';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
|
||||
function isElseIf(node: ElseBlock) {
|
||||
return (
|
||||
node && node.children.length === 1 && node.children[0].type === 'IfBlock'
|
||||
);
|
||||
}
|
||||
|
||||
function isElseBranch(branch) {
|
||||
return branch.block && !branch.condition;
|
||||
}
|
||||
|
||||
export default class IfBlock extends Node {
|
||||
type: 'IfBlock';
|
||||
expression: Expression;
|
||||
children: any[];
|
||||
else: ElseBlock;
|
||||
|
||||
block: Block;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.expression = new Expression(compiler, this, scope, info.expression);
|
||||
this.children = mapChildren(compiler, this, scope, info.children);
|
||||
|
||||
this.else = info.else
|
||||
? new ElseBlock(compiler, this, scope, info.else)
|
||||
: null;
|
||||
}
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
const { compiler } = this;
|
||||
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
const blocks: Block[] = [];
|
||||
let dynamic = false;
|
||||
let hasIntros = false;
|
||||
let hasOutros = false;
|
||||
|
||||
function attachBlocks(node: IfBlock) {
|
||||
node.var = block.getUniqueName(`if_block`);
|
||||
|
||||
block.addDependencies(node.expression.dependencies);
|
||||
|
||||
node.block = block.child({
|
||||
comment: createDebuggingComment(node, compiler),
|
||||
name: compiler.getUniqueName(`create_if_block`),
|
||||
});
|
||||
|
||||
blocks.push(node.block);
|
||||
node.initChildren(node.block, stripWhitespace, nextSibling);
|
||||
|
||||
if (node.block.dependencies.size > 0) {
|
||||
dynamic = true;
|
||||
block.addDependencies(node.block.dependencies);
|
||||
}
|
||||
|
||||
if (node.block.hasIntroMethod) hasIntros = true;
|
||||
if (node.block.hasOutroMethod) hasOutros = true;
|
||||
|
||||
if (isElseIf(node.else)) {
|
||||
attachBlocks(node.else.children[0]);
|
||||
} else if (node.else) {
|
||||
node.else.block = block.child({
|
||||
comment: createDebuggingComment(node.else, compiler),
|
||||
name: compiler.getUniqueName(`create_if_block`),
|
||||
});
|
||||
|
||||
blocks.push(node.else.block);
|
||||
node.else.initChildren(
|
||||
node.else.block,
|
||||
stripWhitespace,
|
||||
nextSibling
|
||||
);
|
||||
|
||||
if (node.else.block.dependencies.size > 0) {
|
||||
dynamic = true;
|
||||
block.addDependencies(node.else.block.dependencies);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
attachBlocks(this);
|
||||
|
||||
blocks.forEach(block => {
|
||||
block.hasUpdateMethod = dynamic;
|
||||
block.hasIntroMethod = hasIntros;
|
||||
block.hasOutroMethod = hasOutros;
|
||||
});
|
||||
|
||||
compiler.target.blocks.push(...blocks);
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const name = this.var;
|
||||
|
||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
||||
const anchor = needsAnchor
|
||||
? block.getUniqueName(`${name}_anchor`)
|
||||
: (this.next && this.next.var) || 'null';
|
||||
|
||||
const branches = this.getBranches(block, parentNode, parentNodes, this);
|
||||
|
||||
const hasElse = isElseBranch(branches[branches.length - 1]);
|
||||
const if_name = hasElse ? '' : `if (${name}) `;
|
||||
|
||||
const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
|
||||
const hasOutros = branches[0].hasOutroMethod;
|
||||
|
||||
const vars = { name, anchor, if_name, hasElse };
|
||||
|
||||
if (this.else) {
|
||||
if (hasOutros) {
|
||||
this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
|
||||
} else {
|
||||
this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
|
||||
}
|
||||
} else {
|
||||
this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
|
||||
}
|
||||
|
||||
block.builders.create.addLine(`${if_name}${name}.c();`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addLine(
|
||||
`${if_name}${name}.l(${parentNodes});`
|
||||
);
|
||||
}
|
||||
|
||||
if (needsAnchor) {
|
||||
block.addElement(
|
||||
anchor,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
parentNode
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
buildCompound(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
branches,
|
||||
dynamic,
|
||||
{ name, anchor, hasElse, if_name }
|
||||
) {
|
||||
const select_block_type = this.compiler.getUniqueName(`select_block_type`);
|
||||
const current_block_type = block.getUniqueName(`current_block_type`);
|
||||
const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${select_block_type}(ctx) {
|
||||
${branches
|
||||
.map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`)
|
||||
.join('\n')}
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${current_block_type} = ${select_block_type}(ctx);
|
||||
var ${name} = ${current_block_type_and}${current_block_type}(#component, ctx);
|
||||
`);
|
||||
|
||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
block.builders.mount.addLine(
|
||||
`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
const changeBlock = deindent`
|
||||
${hasElse
|
||||
? deindent`
|
||||
${name}.d(1);
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${name}.d(1);
|
||||
}`}
|
||||
${name} = ${current_block_type_and}${current_block_type}(#component, ctx);
|
||||
${if_name}${name}.c();
|
||||
${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
if (dynamic) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${current_block_type} === (${current_block_type} = ${select_block_type}(ctx)) && ${name}) {
|
||||
${name}.p(changed, ctx);
|
||||
} else {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${current_block_type} !== (${current_block_type} = ${select_block_type}(ctx))) {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addLine(`${if_name}${name}.d(${parentNode ? '' : 'detach'});`);
|
||||
}
|
||||
|
||||
// if any of the siblings have outros, we need to keep references to the blocks
|
||||
// (TODO does this only apply to bidi transitions?)
|
||||
buildCompoundWithOutros(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
branches,
|
||||
dynamic,
|
||||
{ name, anchor, hasElse }
|
||||
) {
|
||||
const select_block_type = block.getUniqueName(`select_block_type`);
|
||||
const current_block_type_index = block.getUniqueName(`current_block_type_index`);
|
||||
const previous_block_index = block.getUniqueName(`previous_block_index`);
|
||||
const if_block_creators = block.getUniqueName(`if_block_creators`);
|
||||
const if_blocks = block.getUniqueName(`if_blocks`);
|
||||
|
||||
const if_current_block_type_index = hasElse
|
||||
? ''
|
||||
: `if (~${current_block_type_index}) `;
|
||||
|
||||
block.addVariable(current_block_type_index);
|
||||
block.addVariable(name);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${if_block_creators} = [
|
||||
${branches.map(branch => branch.block).join(',\n')}
|
||||
];
|
||||
|
||||
var ${if_blocks} = [];
|
||||
|
||||
function ${select_block_type}(ctx) {
|
||||
${branches
|
||||
.map(({ condition, block }, i) => `${condition ? `if (${condition}) ` : ''}return ${block ? i : -1};`)
|
||||
.join('\n')}
|
||||
}
|
||||
`);
|
||||
|
||||
if (hasElse) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
${current_block_type_index} = ${select_block_type}(ctx);
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
||||
`);
|
||||
} else {
|
||||
block.builders.init.addBlock(deindent`
|
||||
if (~(${current_block_type_index} = ${select_block_type}(ctx))) {
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addLine(
|
||||
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
const destroyOldBlock = deindent`
|
||||
${name}.o(function() {
|
||||
${if_blocks}[ ${previous_block_index} ].d(1);
|
||||
${if_blocks}[ ${previous_block_index} ] = null;
|
||||
});
|
||||
`;
|
||||
|
||||
const createNewBlock = deindent`
|
||||
${name} = ${if_blocks}[${current_block_type_index}];
|
||||
if (!${name}) {
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
||||
${name}.c();
|
||||
}
|
||||
${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
const changeBlock = hasElse
|
||||
? deindent`
|
||||
${destroyOldBlock}
|
||||
|
||||
${createNewBlock}
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${destroyOldBlock}
|
||||
}
|
||||
|
||||
if (~${current_block_type_index}) {
|
||||
${createNewBlock}
|
||||
} else {
|
||||
${name} = null;
|
||||
}
|
||||
`;
|
||||
|
||||
if (dynamic) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${previous_block_index} = ${current_block_type_index};
|
||||
${current_block_type_index} = ${select_block_type}(ctx);
|
||||
if (${current_block_type_index} === ${previous_block_index}) {
|
||||
${if_current_block_type_index}${if_blocks}[${current_block_type_index}].p(changed, ctx);
|
||||
} else {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${previous_block_index} = ${current_block_type_index};
|
||||
${current_block_type_index} = ${select_block_type}(ctx);
|
||||
if (${current_block_type_index} !== ${previous_block_index}) {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addLine(deindent`
|
||||
${if_current_block_type_index}{
|
||||
${if_blocks}[${current_block_type_index}].d(${parentNode ? '' : 'detach'});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
buildSimple(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
branch,
|
||||
dynamic,
|
||||
{ name, anchor, if_name }
|
||||
) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${name} = (${branch.condition}) && ${branch.block}(#component, ctx);
|
||||
`);
|
||||
|
||||
const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addLine(
|
||||
`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
const enter = dynamic
|
||||
? branch.hasIntroMethod
|
||||
? deindent`
|
||||
if (${name}) {
|
||||
${name}.p(changed, ctx);
|
||||
} else {
|
||||
${name} = ${branch.block}(#component, ctx);
|
||||
if (${name}) ${name}.c();
|
||||
}
|
||||
|
||||
${name}.i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${name}.p(changed, ctx);
|
||||
} else {
|
||||
${name} = ${branch.block}(#component, ctx);
|
||||
${name}.c();
|
||||
${name}.m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`
|
||||
: branch.hasIntroMethod
|
||||
? deindent`
|
||||
if (!${name}) {
|
||||
${name} = ${branch.block}(#component, ctx);
|
||||
${name}.c();
|
||||
}
|
||||
${name}.i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (!${name}) {
|
||||
${name} = ${branch.block}(#component, ctx);
|
||||
${name}.c();
|
||||
${name}.m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`;
|
||||
|
||||
// no `p()` here — we don't want to update outroing nodes,
|
||||
// as that will typically result in glitching
|
||||
const exit = branch.hasOutroMethod
|
||||
? deindent`
|
||||
${name}.o(function() {
|
||||
${name}.d(1);
|
||||
${name} = null;
|
||||
});
|
||||
`
|
||||
: deindent`
|
||||
${name}.d(1);
|
||||
${name} = null;
|
||||
`;
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${branch.condition}) {
|
||||
${enter}
|
||||
} else if (${name}) {
|
||||
${exit}
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.destroy.addLine(`${if_name}${name}.d(${parentNode ? '' : 'detach'});`);
|
||||
}
|
||||
|
||||
getBranches(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
node: IfBlock
|
||||
) {
|
||||
const branches = [
|
||||
{
|
||||
condition: node.expression.snippet,
|
||||
block: node.block.name,
|
||||
hasUpdateMethod: node.block.hasUpdateMethod,
|
||||
hasIntroMethod: node.block.hasIntroMethod,
|
||||
hasOutroMethod: node.block.hasOutroMethod,
|
||||
},
|
||||
];
|
||||
|
||||
this.visitChildren(block, node);
|
||||
|
||||
if (isElseIf(node.else)) {
|
||||
branches.push(
|
||||
...this.getBranches(block, parentNode, parentNodes, node.else.children[0])
|
||||
);
|
||||
} else {
|
||||
branches.push({
|
||||
condition: null,
|
||||
block: node.else ? node.else.block.name : null,
|
||||
hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
|
||||
hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
|
||||
hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
|
||||
});
|
||||
|
||||
if (node.else) {
|
||||
this.visitChildren(block, node.else);
|
||||
}
|
||||
}
|
||||
|
||||
return branches;
|
||||
}
|
||||
|
||||
ssr() {
|
||||
const { compiler } = this;
|
||||
const { snippet } = this.expression;
|
||||
|
||||
compiler.target.append('${ ' + snippet + ' ? `');
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
|
||||
compiler.target.append('` : `');
|
||||
|
||||
if (this.else) {
|
||||
this.else.children.forEach((child: Node) => {
|
||||
child.ssr();
|
||||
});
|
||||
}
|
||||
|
||||
compiler.target.append('` }');
|
||||
}
|
||||
|
||||
visitChildren(block: Block, node: Node) {
|
||||
node.children.forEach((child: Node) => {
|
||||
child.build(node.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
|
||||
export default class PendingBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.children = mapChildren(compiler, parent, scope, info.children);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import mapChildren from './shared/mapChildren';
|
||||
|
||||
export default class ThenBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.children = mapChildren(compiler, parent, scope, info.children);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Node from './shared/Node';
|
||||
import Expression from './shared/Expression';
|
||||
|
||||
export default class Transition extends Node {
|
||||
type: 'Transition';
|
||||
name: string;
|
||||
expression: Expression;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.name = info.name;
|
||||
|
||||
this.expression = info.expression
|
||||
? new Expression(compiler, this, scope, info.expression)
|
||||
: null;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,224 @@
|
||||
import CodeBuilder from '../../utils/CodeBuilder';
|
||||
import deindent from '../../utils/deindent';
|
||||
import { stringify } from '../../utils/stringify';
|
||||
import flattenReference from '../../utils/flattenReference';
|
||||
import isVoidElementName from '../../utils/isVoidElementName';
|
||||
import validCalleeObjects from '../../utils/validCalleeObjects';
|
||||
import reservedNames from '../../utils/reservedNames';
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import Binding from './Binding';
|
||||
import EventHandler from './EventHandler';
|
||||
|
||||
const associatedEvents = {
|
||||
innerWidth: 'resize',
|
||||
innerHeight: 'resize',
|
||||
outerWidth: 'resize',
|
||||
outerHeight: 'resize',
|
||||
|
||||
scrollX: 'scroll',
|
||||
scrollY: 'scroll',
|
||||
};
|
||||
|
||||
const properties = {
|
||||
scrollX: 'pageXOffset',
|
||||
scrollY: 'pageYOffset'
|
||||
};
|
||||
|
||||
const readonly = new Set([
|
||||
'innerWidth',
|
||||
'innerHeight',
|
||||
'outerWidth',
|
||||
'outerHeight',
|
||||
'online',
|
||||
]);
|
||||
|
||||
export default class Window extends Node {
|
||||
type: 'Window';
|
||||
handlers: EventHandler[];
|
||||
bindings: Binding[];
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
|
||||
this.handlers = [];
|
||||
this.bindings = [];
|
||||
|
||||
info.attributes.forEach(node => {
|
||||
if (node.type === 'EventHandler') {
|
||||
this.handlers.push(new EventHandler(compiler, this, scope, node));
|
||||
} else if (node.type === 'Binding') {
|
||||
this.bindings.push(new Binding(compiler, this, scope, node));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const { compiler } = this;
|
||||
|
||||
const events = {};
|
||||
const bindings: Record<string, string> = {};
|
||||
|
||||
this.handlers.forEach(handler => {
|
||||
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
||||
compiler.addSourcemapLocations(handler.expression);
|
||||
|
||||
const isCustomEvent = compiler.events.has(handler.name);
|
||||
|
||||
let usesState = handler.dependencies.size > 0;
|
||||
|
||||
handler.render(compiler, block, false); // TODO hoist?
|
||||
|
||||
const handlerName = block.getUniqueName(`onwindow${handler.name}`);
|
||||
const handlerBody = deindent`
|
||||
${usesState && `var ctx = #component.get();`}
|
||||
${handler.snippet};
|
||||
`;
|
||||
|
||||
if (isCustomEvent) {
|
||||
// TODO dry this out
|
||||
block.addVariable(handlerName);
|
||||
|
||||
block.builders.hydrate.addBlock(deindent`
|
||||
${handlerName} = %events-${handler.name}.call(#component, window, function(event) {
|
||||
${handlerBody}
|
||||
});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addLine(deindent`
|
||||
${handlerName}.destroy();
|
||||
`);
|
||||
} else {
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
${handlerBody}
|
||||
}
|
||||
window.addEventListener("${handler.name}", ${handlerName});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("${handler.name}", ${handlerName});
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
this.bindings.forEach(binding => {
|
||||
// in dev mode, throw if read-only values are written to
|
||||
if (readonly.has(binding.name)) {
|
||||
compiler.target.readonly.add(binding.value.node.name);
|
||||
}
|
||||
|
||||
bindings[binding.name] = binding.value.node.name;
|
||||
|
||||
// bind:online is a special case, we need to listen for two separate events
|
||||
if (binding.name === 'online') return;
|
||||
|
||||
const associatedEvent = associatedEvents[binding.name];
|
||||
const property = properties[binding.name] || binding.name;
|
||||
|
||||
if (!events[associatedEvent]) events[associatedEvent] = [];
|
||||
events[associatedEvent].push(
|
||||
`${binding.value.node.name}: this.${property}`
|
||||
);
|
||||
|
||||
// add initial value
|
||||
compiler.target.metaBindings.push(
|
||||
`this._state.${binding.value.node.name} = window.${property};`
|
||||
);
|
||||
});
|
||||
|
||||
const lock = block.getUniqueName(`window_updating`);
|
||||
const clear = block.getUniqueName(`clear_window_updating`);
|
||||
const timeout = block.getUniqueName(`window_updating_timeout`);
|
||||
|
||||
Object.keys(events).forEach(event => {
|
||||
const handlerName = block.getUniqueName(`onwindow${event}`);
|
||||
const props = events[event].join(',\n');
|
||||
|
||||
if (event === 'scroll') {
|
||||
// TODO other bidirectional bindings...
|
||||
block.addVariable(lock, 'false');
|
||||
block.addVariable(clear, `function() { ${lock} = false; }`);
|
||||
block.addVariable(timeout);
|
||||
}
|
||||
|
||||
const handlerBody = deindent`
|
||||
${event === 'scroll' && deindent`
|
||||
if (${lock}) return;
|
||||
${lock} = true;
|
||||
`}
|
||||
${compiler.options.dev && `component._updatingReadonlyProperty = true;`}
|
||||
|
||||
#component.set({
|
||||
${props}
|
||||
});
|
||||
|
||||
${compiler.options.dev && `component._updatingReadonlyProperty = false;`}
|
||||
${event === 'scroll' && `${lock} = false;`}
|
||||
`;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
${handlerBody}
|
||||
}
|
||||
window.addEventListener("${event}", ${handlerName});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("${event}", ${handlerName});
|
||||
`);
|
||||
});
|
||||
|
||||
// special case... might need to abstract this out if we add more special cases
|
||||
if (bindings.scrollX || bindings.scrollY) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
#component.on("state", ({ changed, current }) => {
|
||||
if (${
|
||||
[bindings.scrollX, bindings.scrollY].map(
|
||||
binding => binding && `changed["${binding}"]`
|
||||
).filter(Boolean).join(' || ')
|
||||
}) {
|
||||
${lock} = true;
|
||||
clearTimeout(${timeout});
|
||||
window.scrollTo(${
|
||||
bindings.scrollX ? `current["${bindings.scrollX}"]` : `window.pageXOffset`
|
||||
}, ${
|
||||
bindings.scrollY ? `current["${bindings.scrollY}"]` : `window.pageYOffset`
|
||||
});
|
||||
${timeout} = setTimeout(${clear}, 100);
|
||||
}
|
||||
});
|
||||
`);
|
||||
}
|
||||
|
||||
// another special case. (I'm starting to think these are all special cases.)
|
||||
if (bindings.online) {
|
||||
const handlerName = block.getUniqueName(`onlinestatuschanged`);
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
#component.set({ ${bindings.online}: navigator.onLine });
|
||||
}
|
||||
window.addEventListener("online", ${handlerName});
|
||||
window.addEventListener("offline", ${handlerName});
|
||||
`);
|
||||
|
||||
// add initial value
|
||||
compiler.target.metaBindings.push(
|
||||
`this._state.${bindings.online} = navigator.onLine;`
|
||||
);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("online", ${handlerName});
|
||||
window.removeEventListener("offline", ${handlerName});
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
ssr() {
|
||||
// noop
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,171 @@
|
||||
import Compiler from '../../Compiler';
|
||||
import { walk } from 'estree-walker';
|
||||
import isReference from 'is-reference';
|
||||
import flattenReference from '../../../utils/flattenReference';
|
||||
import { createScopes } from '../../../utils/annotateWithScopes';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
const binaryOperators: Record<string, number> = {
|
||||
'**': 15,
|
||||
'*': 14,
|
||||
'/': 14,
|
||||
'%': 14,
|
||||
'+': 13,
|
||||
'-': 13,
|
||||
'<<': 12,
|
||||
'>>': 12,
|
||||
'>>>': 12,
|
||||
'<': 11,
|
||||
'<=': 11,
|
||||
'>': 11,
|
||||
'>=': 11,
|
||||
'in': 11,
|
||||
'instanceof': 11,
|
||||
'==': 10,
|
||||
'!=': 10,
|
||||
'===': 10,
|
||||
'!==': 10,
|
||||
'&': 9,
|
||||
'^': 8,
|
||||
'|': 7
|
||||
};
|
||||
|
||||
const logicalOperators: Record<string, number> = {
|
||||
'&&': 6,
|
||||
'||': 5
|
||||
};
|
||||
|
||||
const precedence: Record<string, (node?: Node) => number> = {
|
||||
Literal: () => 21,
|
||||
Identifier: () => 21,
|
||||
ParenthesizedExpression: () => 20,
|
||||
MemberExpression: () => 19,
|
||||
NewExpression: () => 19, // can be 18 (if no args) but makes no practical difference
|
||||
CallExpression: () => 19,
|
||||
UpdateExpression: () => 17,
|
||||
UnaryExpression: () => 16,
|
||||
BinaryExpression: (node: Node) => binaryOperators[node.operator],
|
||||
LogicalExpression: (node: Node) => logicalOperators[node.operator],
|
||||
ConditionalExpression: () => 4,
|
||||
AssignmentExpression: () => 3,
|
||||
YieldExpression: () => 2,
|
||||
SpreadElement: () => 1,
|
||||
SequenceExpression: () => 0
|
||||
};
|
||||
|
||||
export default class Expression {
|
||||
compiler: Compiler;
|
||||
node: any;
|
||||
snippet: string;
|
||||
|
||||
usesContext: boolean;
|
||||
references: Set<string>;
|
||||
dependencies: Set<string>;
|
||||
|
||||
thisReferences: Array<{ start: number, end: number }>;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
// TODO revert to direct property access in prod?
|
||||
Object.defineProperties(this, {
|
||||
compiler: {
|
||||
value: compiler
|
||||
}
|
||||
});
|
||||
|
||||
this.node = info;
|
||||
this.thisReferences = [];
|
||||
|
||||
this.snippet = `[✂${info.start}-${info.end}✂]`;
|
||||
|
||||
this.usesContext = false;
|
||||
|
||||
const dependencies = new Set();
|
||||
|
||||
const { code, helpers } = compiler;
|
||||
|
||||
let { map, scope: currentScope } = createScopes(info);
|
||||
|
||||
const isEventHandler = parent.type === 'EventHandler';
|
||||
const expression = this;
|
||||
const isSynthetic = parent.isSynthetic;
|
||||
|
||||
walk(info, {
|
||||
enter(node: any, parent: any, key: string) {
|
||||
// don't manipulate shorthand props twice
|
||||
if (key === 'value' && parent.shorthand) return;
|
||||
|
||||
code.addSourcemapLocation(node.start);
|
||||
code.addSourcemapLocation(node.end);
|
||||
|
||||
if (map.has(node)) {
|
||||
currentScope = map.get(node);
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.type === 'ThisExpression') {
|
||||
expression.thisReferences.push(node);
|
||||
}
|
||||
|
||||
if (isReference(node, parent)) {
|
||||
const { name, nodes } = flattenReference(node);
|
||||
|
||||
if (currentScope.has(name) || (name === 'event' && isEventHandler)) return;
|
||||
|
||||
if (compiler.helpers.has(name)) {
|
||||
let object = node;
|
||||
while (object.type === 'MemberExpression') object = object.object;
|
||||
|
||||
const alias = compiler.templateVars.get(`helpers-${name}`);
|
||||
if (alias !== name) code.overwrite(object.start, object.end, alias);
|
||||
return;
|
||||
}
|
||||
|
||||
expression.usesContext = true;
|
||||
|
||||
if (!isSynthetic) {
|
||||
// <option> value attribute could be synthetic — avoid double editing
|
||||
code.prependRight(node.start, key === 'key' && parent.shorthand
|
||||
? `${name}: ctx.`
|
||||
: 'ctx.');
|
||||
}
|
||||
|
||||
if (scope.names.has(name)) {
|
||||
scope.dependenciesForName.get(name).forEach(dependency => {
|
||||
dependencies.add(dependency);
|
||||
});
|
||||
} else {
|
||||
dependencies.add(name);
|
||||
compiler.expectedProperties.add(name);
|
||||
}
|
||||
|
||||
if (node.type === 'MemberExpression') {
|
||||
nodes.forEach(node => {
|
||||
code.addSourcemapLocation(node.start);
|
||||
code.addSourcemapLocation(node.end);
|
||||
});
|
||||
}
|
||||
|
||||
this.skip();
|
||||
}
|
||||
},
|
||||
|
||||
leave(node: Node, parent: Node) {
|
||||
if (map.has(node)) currentScope = currentScope.parent;
|
||||
}
|
||||
});
|
||||
|
||||
this.dependencies = dependencies;
|
||||
}
|
||||
|
||||
getPrecedence() {
|
||||
return this.node.type in precedence ? precedence[this.node.type](this.node) : 0;
|
||||
}
|
||||
|
||||
overwriteThis(name) {
|
||||
this.thisReferences.forEach(ref => {
|
||||
this.compiler.code.overwrite(ref.start, ref.end, name, {
|
||||
storeName: true
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
import Node from './Node';
|
||||
import Expression from './Expression';
|
||||
import Block from '../../dom/Block';
|
||||
|
||||
export default class Tag extends Node {
|
||||
expression: Expression;
|
||||
shouldCache: boolean;
|
||||
|
||||
constructor(compiler, parent, scope, info) {
|
||||
super(compiler, parent, scope, info);
|
||||
this.expression = new Expression(compiler, this, scope, info.expression);
|
||||
|
||||
this.shouldCache = (
|
||||
info.expression.type !== 'Identifier' ||
|
||||
(this.expression.dependencies.size && scope.names.has(info.expression.name))
|
||||
);
|
||||
}
|
||||
|
||||
init(block: Block) {
|
||||
this.cannotUseInnerHTML();
|
||||
this.var = block.getUniqueName(this.type === 'MustacheTag' ? 'text' : 'raw');
|
||||
block.addDependencies(this.expression.dependencies);
|
||||
}
|
||||
|
||||
renameThisMethod(
|
||||
block: Block,
|
||||
update: ((value: string) => string)
|
||||
) {
|
||||
const { snippet, dependencies } = this.expression;
|
||||
|
||||
const value = this.shouldCache && block.getUniqueName(`${this.var}_value`);
|
||||
const content = this.shouldCache ? value : snippet;
|
||||
|
||||
if (this.shouldCache) block.addVariable(value, snippet);
|
||||
|
||||
if (dependencies.size) {
|
||||
const changedCheck = (
|
||||
(block.hasOutroMethod ? `#outroing || ` : '') +
|
||||
[...dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')
|
||||
);
|
||||
|
||||
const updateCachedValue = `${value} !== (${value} = ${snippet})`;
|
||||
|
||||
const condition = this.shouldCache ?
|
||||
(dependencies.size ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
|
||||
changedCheck;
|
||||
|
||||
block.builders.update.addConditional(
|
||||
condition,
|
||||
update(content)
|
||||
);
|
||||
}
|
||||
|
||||
return { init: content };
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
export default class TemplateScope {
|
||||
names: Set<string>;
|
||||
dependenciesForName: Map<string, string>;
|
||||
|
||||
constructor(parent?: TemplateScope) {
|
||||
this.names = new Set(parent ? parent.names : []);
|
||||
this.dependenciesForName = new Map(parent ? parent.dependenciesForName : []);
|
||||
}
|
||||
|
||||
add(name, dependencies) {
|
||||
this.names.add(name);
|
||||
this.dependenciesForName.set(name, dependencies);
|
||||
return this;
|
||||
}
|
||||
|
||||
child() {
|
||||
return new TemplateScope(this);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
import AwaitBlock from '../AwaitBlock';
|
||||
import Comment from '../Comment';
|
||||
import Component from '../Component';
|
||||
import EachBlock from '../EachBlock';
|
||||
import Element from '../Element';
|
||||
import Head from '../Head';
|
||||
import IfBlock from '../IfBlock';
|
||||
import MustacheTag from '../MustacheTag';
|
||||
import RawMustacheTag from '../RawMustacheTag';
|
||||
import Slot from '../Slot';
|
||||
import Text from '../Text';
|
||||
import Title from '../Title';
|
||||
import Window from '../Window';
|
||||
import Node from './Node';
|
||||
|
||||
function getConstructor(type): typeof Node {
|
||||
switch (type) {
|
||||
case 'AwaitBlock': return AwaitBlock;
|
||||
case 'Comment': return Comment;
|
||||
case 'Component': return Component;
|
||||
case 'EachBlock': return EachBlock;
|
||||
case 'Element': return Element;
|
||||
case 'Head': return Head;
|
||||
case 'IfBlock': return IfBlock;
|
||||
case 'MustacheTag': return MustacheTag;
|
||||
case 'RawMustacheTag': return RawMustacheTag;
|
||||
case 'Slot': return Slot;
|
||||
case 'Text': return Text;
|
||||
case 'Title': return Title;
|
||||
case 'Window': return Window;
|
||||
default: throw new Error(`Not implemented: ${type}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default function mapChildren(compiler, parent, scope, children: any[]) {
|
||||
let last = null;
|
||||
return children.map(child => {
|
||||
const constructor = getConstructor(child.type);
|
||||
const node = new constructor(compiler, parent, scope, child);
|
||||
|
||||
if (last) last.next = node;
|
||||
node.prev = last;
|
||||
last = node;
|
||||
|
||||
return node;
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Compiler from '../Compiler';
|
||||
import Stats from '../../Stats';
|
||||
import Stylesheet from '../../css/Stylesheet';
|
||||
import { removeNode, removeObjectKey } from '../../utils/removeNode';
|
||||
import getName from '../../utils/getName';
|
||||
import globalWhitelist from '../../utils/globalWhitelist';
|
||||
import { Ast, Node, CompileOptions } from '../../interfaces';
|
||||
import { AppendTarget } from '../../interfaces';
|
||||
import { stringify } from '../../utils/stringify';
|
||||
|
||||
export class SsrTarget {
|
||||
bindings: string[];
|
||||
renderCode: string;
|
||||
appendTargets: AppendTarget[];
|
||||
|
||||
constructor() {
|
||||
this.bindings = [];
|
||||
this.renderCode = '';
|
||||
this.appendTargets = [];
|
||||
}
|
||||
|
||||
append(code: string) {
|
||||
if (this.appendTargets.length) {
|
||||
const appendTarget = this.appendTargets[this.appendTargets.length - 1];
|
||||
const slotName = appendTarget.slotStack[appendTarget.slotStack.length - 1];
|
||||
appendTarget.slots[slotName] += code;
|
||||
} else {
|
||||
this.renderCode += code;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function ssr(
|
||||
ast: Ast,
|
||||
source: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions,
|
||||
stats: Stats
|
||||
) {
|
||||
const format = options.format || 'cjs';
|
||||
|
||||
const target = new SsrTarget();
|
||||
const compiler = new Compiler(ast, source, options.name || 'SvelteComponent', stylesheet, options, stats, false, target);
|
||||
|
||||
const { computations, name, templateProperties } = compiler;
|
||||
|
||||
// create main render() function
|
||||
trim(compiler.fragment.children).forEach((node: Node) => {
|
||||
node.ssr();
|
||||
});
|
||||
|
||||
const css = compiler.customElement ?
|
||||
{ code: null, map: null } :
|
||||
compiler.stylesheet.render(options.filename, true);
|
||||
|
||||
// generate initial state object
|
||||
const expectedProperties = Array.from(compiler.expectedProperties);
|
||||
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
|
||||
const storeProps = expectedProperties.filter(prop => prop[0] === '$');
|
||||
|
||||
const initialState = [];
|
||||
if (globals.length > 0) {
|
||||
initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
|
||||
}
|
||||
|
||||
if (storeProps.length > 0) {
|
||||
const initialize = `_init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`
|
||||
initialState.push(`options.store.${initialize}`);
|
||||
}
|
||||
|
||||
if (templateProperties.data) {
|
||||
initialState.push(`%data()`);
|
||||
} else if (globals.length === 0 && storeProps.length === 0) {
|
||||
initialState.push('{}');
|
||||
}
|
||||
|
||||
initialState.push('ctx');
|
||||
|
||||
const helpers = new Set();
|
||||
|
||||
// TODO concatenate CSS maps
|
||||
const result = deindent`
|
||||
${compiler.javascript}
|
||||
|
||||
var ${name} = {};
|
||||
|
||||
${options.filename && `${name}.filename = ${stringify(options.filename)}`};
|
||||
|
||||
${name}.data = function() {
|
||||
return ${templateProperties.data ? `%data()` : `{}`};
|
||||
};
|
||||
|
||||
${name}.render = function(state, options = {}) {
|
||||
var components = new Set();
|
||||
|
||||
function addComponent(component) {
|
||||
components.add(component);
|
||||
}
|
||||
|
||||
var result = { head: '', addComponent };
|
||||
var html = ${name}._render(result, state, options);
|
||||
|
||||
var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\\n');
|
||||
|
||||
return {
|
||||
html,
|
||||
head: result.head,
|
||||
css: { code: cssCode, map: null },
|
||||
toString() {
|
||||
return html;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
${name}._render = function(__result, ctx, options) {
|
||||
${templateProperties.store && `options.store = %store();`}
|
||||
__result.addComponent(${name});
|
||||
|
||||
ctx = Object.assign(${initialState.join(', ')});
|
||||
|
||||
${computations.map(
|
||||
({ key }) => `ctx.${key} = %computed-${key}(ctx);`
|
||||
)}
|
||||
|
||||
${target.bindings.length &&
|
||||
deindent`
|
||||
var settled = false;
|
||||
var tmp;
|
||||
|
||||
while (!settled) {
|
||||
settled = true;
|
||||
|
||||
${target.bindings.join('\n\n')}
|
||||
}
|
||||
`}
|
||||
|
||||
return \`${target.renderCode}\`;
|
||||
};
|
||||
|
||||
${name}.css = {
|
||||
code: ${css.code ? stringify(css.code) : `''`},
|
||||
map: ${css.map ? stringify(css.map.toString()) : 'null'}
|
||||
};
|
||||
|
||||
var warned = false;
|
||||
|
||||
${templateProperties.preload && `${name}.preload = %preload;`}
|
||||
`;
|
||||
|
||||
return compiler.generate(result, options, { name, format });
|
||||
}
|
||||
|
||||
function trim(nodes) {
|
||||
let start = 0;
|
||||
for (; start < nodes.length; start += 1) {
|
||||
const node = nodes[start];
|
||||
if (node.type !== 'Text') break;
|
||||
|
||||
node.data = node.data.replace(/^\s+/, '');
|
||||
if (node.data) break;
|
||||
}
|
||||
|
||||
let end = nodes.length;
|
||||
for (; end > start; end -= 1) {
|
||||
const node = nodes[end - 1];
|
||||
if (node.type !== 'Text') break;
|
||||
|
||||
node.data = node.data.replace(/\s+$/, '');
|
||||
if (node.data) break;
|
||||
}
|
||||
|
||||
return nodes.slice(start, end);
|
||||
}
|
||||
@ -1,466 +0,0 @@
|
||||
import MagicString from 'magic-string';
|
||||
import { parseExpressionAt } from 'acorn';
|
||||
import annotateWithScopes from '../../utils/annotateWithScopes';
|
||||
import isReference from '../../utils/isReference';
|
||||
import { walk } from 'estree-walker';
|
||||
import deindent from '../../utils/deindent';
|
||||
import { stringify, escape } from '../../utils/stringify';
|
||||
import CodeBuilder from '../../utils/CodeBuilder';
|
||||
import globalWhitelist from '../../utils/globalWhitelist';
|
||||
import reservedNames from '../../utils/reservedNames';
|
||||
import shared from './shared';
|
||||
import Generator from '../Generator';
|
||||
import Stylesheet from '../../css/Stylesheet';
|
||||
import Block from './Block';
|
||||
import { test } from '../../config';
|
||||
import { Parsed, CompileOptions, Node } from '../../interfaces';
|
||||
|
||||
export class DomGenerator extends Generator {
|
||||
blocks: (Block|string)[];
|
||||
readonly: Set<string>;
|
||||
metaBindings: string[];
|
||||
|
||||
hydratable: boolean;
|
||||
legacy: boolean;
|
||||
|
||||
hasIntroTransitions: boolean;
|
||||
hasOutroTransitions: boolean;
|
||||
hasComplexBindings: boolean;
|
||||
|
||||
needsEncapsulateHelper: boolean;
|
||||
|
||||
constructor(
|
||||
parsed: Parsed,
|
||||
source: string,
|
||||
name: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions
|
||||
) {
|
||||
super(parsed, source, name, stylesheet, options, true);
|
||||
this.blocks = [];
|
||||
|
||||
this.readonly = new Set();
|
||||
|
||||
this.hydratable = options.hydratable;
|
||||
this.legacy = options.legacy;
|
||||
this.needsEncapsulateHelper = false;
|
||||
|
||||
// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
|
||||
this.metaBindings = [];
|
||||
}
|
||||
|
||||
getUniqueNameMaker(params: string[]) {
|
||||
const localUsedNames = new Set(params);
|
||||
|
||||
function add(name: string) {
|
||||
localUsedNames.add(name);
|
||||
}
|
||||
|
||||
reservedNames.forEach(add);
|
||||
this.userVars.forEach(add);
|
||||
for (const name in shared) {
|
||||
localUsedNames.add(test ? `${name}$` : name);
|
||||
}
|
||||
|
||||
return (name: string) => {
|
||||
if (test) name = `${name}$`;
|
||||
let alias = name;
|
||||
for (
|
||||
let i = 1;
|
||||
this.usedNames.has(alias) ||
|
||||
localUsedNames.has(alias);
|
||||
alias = `${name}_${i++}`
|
||||
);
|
||||
localUsedNames.add(alias);
|
||||
return alias;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default function dom(
|
||||
parsed: Parsed,
|
||||
source: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions
|
||||
) {
|
||||
const format = options.format || 'es';
|
||||
|
||||
const generator = new DomGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options);
|
||||
|
||||
const {
|
||||
computations,
|
||||
name,
|
||||
templateProperties,
|
||||
namespace,
|
||||
} = generator;
|
||||
|
||||
parsed.html.build();
|
||||
const { block } = parsed.html;
|
||||
|
||||
// prevent fragment being created twice (#1063)
|
||||
if (options.customElement) block.builders.create.addLine(`this.c = @noop;`);
|
||||
|
||||
generator.stylesheet.warnOnUnusedSelectors(options.onwarn);
|
||||
|
||||
const builder = new CodeBuilder();
|
||||
const computationBuilder = new CodeBuilder();
|
||||
const computationDeps = new Set();
|
||||
|
||||
if (computations.length) {
|
||||
computations.forEach(({ key, deps }) => {
|
||||
deps.forEach(dep => {
|
||||
computationDeps.add(dep);
|
||||
});
|
||||
|
||||
if (generator.readonly.has(key)) {
|
||||
// <:Window> bindings
|
||||
throw new Error(
|
||||
`Cannot have a computed value '${key}' that clashes with a read-only property`
|
||||
);
|
||||
}
|
||||
|
||||
generator.readonly.add(key);
|
||||
|
||||
const condition = `${deps.map(dep => `changed.${dep}`).join(' || ')}`;
|
||||
|
||||
const statement = `if (@differs(state.${key}, (state.${key} = %computed-${key}(${deps
|
||||
.map(dep => `state.${dep}`)
|
||||
.join(', ')})))) changed.${key} = true;`;
|
||||
|
||||
computationBuilder.addConditional(condition, statement);
|
||||
});
|
||||
}
|
||||
|
||||
if (generator.javascript) {
|
||||
builder.addBlock(generator.javascript);
|
||||
}
|
||||
|
||||
if (generator.needsEncapsulateHelper) {
|
||||
builder.addBlock(deindent`
|
||||
function @encapsulateStyles(node) {
|
||||
@setAttribute(node, "${generator.stylesheet.id}", "");
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const { css, cssMap } = generator.stylesheet.render(options.filename, !generator.customElement);
|
||||
const styles = generator.stylesheet.hasStyles && stringify(options.dev ?
|
||||
`${css}\n/*# sourceMappingURL=${cssMap.toUrl()} */` :
|
||||
css, { onlyEscapeAtSymbol: true });
|
||||
|
||||
if (styles && generator.options.css !== false && !generator.customElement) {
|
||||
builder.addBlock(deindent`
|
||||
function @add_css() {
|
||||
var style = @createElement("style");
|
||||
style.id = '${generator.stylesheet.id}-style';
|
||||
style.textContent = ${styles};
|
||||
@appendNode(style, document.head);
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
generator.blocks.forEach(block => {
|
||||
builder.addBlock(block.toString());
|
||||
});
|
||||
|
||||
const sharedPath: string = options.shared === true
|
||||
? 'svelte/shared.js'
|
||||
: options.shared || '';
|
||||
|
||||
const prototypeBase =
|
||||
`${name}.prototype` +
|
||||
(templateProperties.methods ? `, %methods` : '');
|
||||
const proto = sharedPath
|
||||
? `@proto`
|
||||
: deindent`
|
||||
{
|
||||
${['destroy', 'get', 'fire', 'observe', 'on', 'set', 'teardown', '_set', '_mount', '_unmount']
|
||||
.map(n => `${n}: @${n === 'teardown' ? 'destroy' : n}`)
|
||||
.join(',\n')}
|
||||
}`;
|
||||
|
||||
const debugName = `<${generator.customElement ? generator.tag : name}>`;
|
||||
|
||||
// generate initial state object
|
||||
const expectedProperties = Array.from(generator.expectedProperties);
|
||||
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
|
||||
const storeProps = options.store || templateProperties.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
|
||||
const initialState = [];
|
||||
|
||||
if (globals.length > 0) {
|
||||
initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
|
||||
}
|
||||
|
||||
if (storeProps.length > 0) {
|
||||
initialState.push(`this.store._init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`);
|
||||
}
|
||||
|
||||
if (templateProperties.data) {
|
||||
initialState.push(`%data()`);
|
||||
} else if (globals.length === 0 && storeProps.length === 0) {
|
||||
initialState.push('{}');
|
||||
}
|
||||
|
||||
initialState.push(`options.data`);
|
||||
|
||||
const constructorBody = deindent`
|
||||
${options.dev && `this._debugName = '${debugName}';`}
|
||||
${options.dev && !generator.customElement &&
|
||||
`if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");`}
|
||||
@init(this, options);
|
||||
${templateProperties.store && `this.store = %store();`}
|
||||
${generator.usesRefs && `this.refs = {};`}
|
||||
this._state = @assign(${initialState.join(', ')});
|
||||
${storeProps.length > 0 && `this.store._add(this, [${storeProps.map(prop => `"${prop.slice(1)}"`)}]);`}
|
||||
${generator.metaBindings}
|
||||
${computations.length && `this._recompute({ ${Array.from(computationDeps).map(dep => `${dep}: 1`).join(', ')} }, this._state);`}
|
||||
${options.dev &&
|
||||
Array.from(generator.expectedProperties).map(prop => {
|
||||
const message = generator.components.has(prop) ?
|
||||
`${debugName} expected to find '${prop}' in \`data\`, but found it in \`components\` instead` :
|
||||
`${debugName} was created without expected data property '${prop}'`;
|
||||
return `if (!('${prop}' in this._state)) console.warn("${message}");`
|
||||
})}
|
||||
${generator.bindingGroups.length &&
|
||||
`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
|
||||
|
||||
${(templateProperties.ondestroy || storeProps.length) && (
|
||||
`this._handlers.destroy = [${
|
||||
[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
|
||||
}];`
|
||||
)}
|
||||
|
||||
${generator.slots.size && `this._slotted = options.slots || {};`}
|
||||
|
||||
${generator.customElement ?
|
||||
deindent`
|
||||
this.attachShadow({ mode: 'open' });
|
||||
${css && `this.shadowRoot.innerHTML = \`<style>${escape(css, { onlyEscapeAtSymbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${cssMap.toUrl()} */` : ''}</style>\`;`}
|
||||
` :
|
||||
(generator.stylesheet.hasStyles && options.css !== false &&
|
||||
`if (!document.getElementById("${generator.stylesheet.id}-style")) @add_css();`)
|
||||
}
|
||||
|
||||
${templateProperties.oncreate && `var _oncreate = %oncreate.bind(this);`}
|
||||
|
||||
${(templateProperties.oncreate || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
|
||||
if (!options.root) {
|
||||
this._oncreate = [];
|
||||
${(generator.hasComponents || generator.hasComplexBindings) && `this._beforecreate = [];`}
|
||||
${(generator.hasComponents || generator.hasIntroTransitions) && `this._aftercreate = [];`}
|
||||
}
|
||||
`}
|
||||
|
||||
${generator.slots.size && `this.slots = {};`}
|
||||
|
||||
this._fragment = @create_main_fragment(this._state, this);
|
||||
|
||||
${(templateProperties.oncreate) && deindent`
|
||||
this.root._oncreate.push(_oncreate);
|
||||
`}
|
||||
|
||||
${generator.customElement ? deindent`
|
||||
this._fragment.c();
|
||||
this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
|
||||
|
||||
if (options.target) this._mount(options.target, options.anchor || null);
|
||||
` : deindent`
|
||||
if (options.target) {
|
||||
${generator.hydratable
|
||||
? deindent`
|
||||
var nodes = @children(options.target);
|
||||
options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
|
||||
nodes.forEach(@detachNode);
|
||||
` :
|
||||
deindent`
|
||||
${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
|
||||
this._fragment.c();
|
||||
`}
|
||||
this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(options.target, options.anchor || null);
|
||||
|
||||
${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
|
||||
${generator.hasComponents && `this._lock = true;`}
|
||||
${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
|
||||
${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
|
||||
${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
|
||||
${generator.hasComponents && `this._lock = false;`}
|
||||
`}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
if (generator.customElement) {
|
||||
const props = generator.props || Array.from(generator.expectedProperties);
|
||||
|
||||
builder.addBlock(deindent`
|
||||
class ${name} extends HTMLElement {
|
||||
constructor(options = {}) {
|
||||
super();
|
||||
${constructorBody}
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ${JSON.stringify(props)};
|
||||
}
|
||||
|
||||
${props.map(prop => deindent`
|
||||
get ${prop}() {
|
||||
return this.get('${prop}');
|
||||
}
|
||||
|
||||
set ${prop}(value) {
|
||||
this.set({ ${prop}: value });
|
||||
}
|
||||
`).join('\n\n')}
|
||||
|
||||
${generator.slots.size && deindent`
|
||||
connectedCallback() {
|
||||
Object.keys(this._slotted).forEach(key => {
|
||||
this.appendChild(this._slotted[key]);
|
||||
});
|
||||
}`}
|
||||
|
||||
attributeChangedCallback(attr, oldValue, newValue) {
|
||||
this.set({ [attr]: newValue });
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("${generator.tag}", ${name});
|
||||
@assign(${prototypeBase}, ${proto}, {
|
||||
_mount(target, anchor) {
|
||||
target.insertBefore(this, anchor);
|
||||
},
|
||||
|
||||
_unmount() {
|
||||
this.parentNode.removeChild(this);
|
||||
}
|
||||
});
|
||||
`);
|
||||
} else {
|
||||
builder.addBlock(deindent`
|
||||
function ${name}(options) {
|
||||
${constructorBody}
|
||||
}
|
||||
|
||||
@assign(${prototypeBase}, ${proto});
|
||||
`);
|
||||
}
|
||||
|
||||
builder.addBlock(deindent`
|
||||
${options.dev && deindent`
|
||||
${name}.prototype._checkReadOnly = function _checkReadOnly(newState) {
|
||||
${Array.from(generator.readonly).map(
|
||||
prop =>
|
||||
`if ('${prop}' in newState && !this._updatingReadonlyProperty) throw new Error("${debugName}: Cannot set read-only property '${prop}'");`
|
||||
)}
|
||||
};
|
||||
`}
|
||||
|
||||
${computations.length ? deindent`
|
||||
${name}.prototype._recompute = function _recompute(changed, state) {
|
||||
${computationBuilder}
|
||||
}
|
||||
` : (!sharedPath && `${name}.prototype._recompute = @noop;`)}
|
||||
|
||||
${templateProperties.setup && `%setup(${name});`}
|
||||
|
||||
${templateProperties.preload && `${name}.preload = %preload;`}
|
||||
`);
|
||||
|
||||
const usedHelpers = new Set();
|
||||
|
||||
let result = builder
|
||||
.toString()
|
||||
.replace(/(%+|@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
|
||||
if (sigil === '@') {
|
||||
if (name in shared) {
|
||||
if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
|
||||
usedHelpers.add(name);
|
||||
}
|
||||
|
||||
return generator.alias(name);
|
||||
}
|
||||
|
||||
if (sigil === '%') {
|
||||
return generator.templateVars.get(name);
|
||||
}
|
||||
|
||||
return sigil.slice(1) + name;
|
||||
});
|
||||
|
||||
let helpers;
|
||||
|
||||
if (sharedPath) {
|
||||
if (format !== 'es' && format !== 'cjs') {
|
||||
throw new Error(`Components with shared helpers must be compiled with \`format: 'es'\` or \`format: 'cjs'\``);
|
||||
}
|
||||
const used = Array.from(usedHelpers).sort();
|
||||
helpers = used.map(name => {
|
||||
const alias = generator.alias(name);
|
||||
return { name, alias };
|
||||
});
|
||||
} else {
|
||||
let inlineHelpers = '';
|
||||
|
||||
usedHelpers.forEach(key => {
|
||||
const str = shared[key];
|
||||
const code = new MagicString(str);
|
||||
const expression = parseExpressionAt(str, 0);
|
||||
|
||||
let { scope } = annotateWithScopes(expression);
|
||||
|
||||
walk(expression, {
|
||||
enter(node: Node, parent: Node) {
|
||||
if (node._scope) scope = node._scope;
|
||||
|
||||
if (
|
||||
node.type === 'Identifier' &&
|
||||
isReference(node, parent) &&
|
||||
!scope.has(node.name)
|
||||
) {
|
||||
if (node.name in shared) {
|
||||
// this helper function depends on another one
|
||||
const dependency = node.name;
|
||||
usedHelpers.add(dependency);
|
||||
|
||||
const alias = generator.alias(dependency);
|
||||
if (alias !== node.name)
|
||||
code.overwrite(node.start, node.end, alias);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
leave(node: Node) {
|
||||
if (node._scope) scope = scope.parent;
|
||||
},
|
||||
});
|
||||
|
||||
if (key === 'transitionManager') {
|
||||
// special case
|
||||
const global = `_svelteTransitionManager`;
|
||||
|
||||
inlineHelpers += `\n\nvar ${generator.alias('transitionManager')} = window.${global} || (window.${global} = ${code});\n\n`;
|
||||
} else {
|
||||
const alias = generator.alias(expression.id.name);
|
||||
if (alias !== expression.id.name)
|
||||
code.overwrite(expression.id.start, expression.id.end, alias);
|
||||
|
||||
inlineHelpers += `\n\n${code}`;
|
||||
}
|
||||
});
|
||||
|
||||
result += inlineHelpers;
|
||||
}
|
||||
|
||||
const filename = options.filename && (
|
||||
typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename
|
||||
);
|
||||
|
||||
return generator.generate(result, options, {
|
||||
banner: `/* ${filename ? `${filename} ` : ``}generated by Svelte v${"__VERSION__"} */`,
|
||||
sharedPath,
|
||||
helpers,
|
||||
name,
|
||||
format,
|
||||
});
|
||||
}
|
||||
@ -1,215 +0,0 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import { DomGenerator } from '../dom/index';
|
||||
import Block from '../dom/Block';
|
||||
import PendingBlock from './PendingBlock';
|
||||
import ThenBlock from './ThenBlock';
|
||||
import CatchBlock from './CatchBlock';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
|
||||
export default class AwaitBlock extends Node {
|
||||
value: string;
|
||||
error: string;
|
||||
expression: Node;
|
||||
|
||||
pending: PendingBlock;
|
||||
then: ThenBlock;
|
||||
catch: CatchBlock;
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
this.var = block.getUniqueName('await_block');
|
||||
block.addDependencies(this.metadata.dependencies);
|
||||
|
||||
let dynamic = false;
|
||||
|
||||
[
|
||||
['pending', null],
|
||||
['then', this.value],
|
||||
['catch', this.error]
|
||||
].forEach(([status, arg]) => {
|
||||
const child = this[status];
|
||||
|
||||
const context = block.getUniqueName(arg || '_'); // TODO can we remove the extra param from pending blocks?
|
||||
const contexts = new Map(block.contexts);
|
||||
contexts.set(arg, context);
|
||||
|
||||
const contextTypes = new Map(block.contextTypes);
|
||||
contextTypes.set(arg, status);
|
||||
|
||||
child.block = block.child({
|
||||
comment: createDebuggingComment(child, this.generator),
|
||||
name: this.generator.getUniqueName(`create_${status}_block`),
|
||||
params: block.params.concat(context),
|
||||
context,
|
||||
contexts,
|
||||
contextTypes
|
||||
});
|
||||
|
||||
child.initChildren(child.block, stripWhitespace, nextSibling);
|
||||
this.generator.blocks.push(child.block);
|
||||
|
||||
if (child.block.dependencies.size > 0) {
|
||||
dynamic = true;
|
||||
block.addDependencies(child.block.dependencies);
|
||||
}
|
||||
});
|
||||
|
||||
this.pending.block.hasUpdateMethod = dynamic;
|
||||
this.then.block.hasUpdateMethod = dynamic;
|
||||
this.catch.block.hasUpdateMethod = dynamic;
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const name = this.var;
|
||||
|
||||
const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
|
||||
const params = block.params.join(', ');
|
||||
|
||||
block.contextualise(this.expression);
|
||||
const { snippet } = this.metadata;
|
||||
|
||||
const promise = block.getUniqueName(`promise`);
|
||||
const resolved = block.getUniqueName(`resolved`);
|
||||
const await_block = block.getUniqueName(`await_block`);
|
||||
const await_block_type = block.getUniqueName(`await_block_type`);
|
||||
const token = block.getUniqueName(`token`);
|
||||
const await_token = block.getUniqueName(`await_token`);
|
||||
const handle_promise = block.getUniqueName(`handle_promise`);
|
||||
const replace_await_block = block.getUniqueName(`replace_await_block`);
|
||||
const old_block = block.getUniqueName(`old_block`);
|
||||
const value = block.getUniqueName(`value`);
|
||||
const error = block.getUniqueName(`error`);
|
||||
const create_pending_block = this.pending.block.name;
|
||||
const create_then_block = this.then.block.name;
|
||||
const create_catch_block = this.catch.block.name;
|
||||
|
||||
block.addVariable(await_block);
|
||||
block.addVariable(await_block_type);
|
||||
block.addVariable(await_token);
|
||||
block.addVariable(promise);
|
||||
block.addVariable(resolved);
|
||||
|
||||
// the `#component.root.set({})` below is just a cheap way to flush
|
||||
// any oncreate handlers. We could have a dedicated `flush()` method
|
||||
// but it's probably not worth it
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${replace_await_block}(${token}, type, ${value}, ${params}) {
|
||||
if (${token} !== ${await_token}) return;
|
||||
|
||||
var ${old_block} = ${await_block};
|
||||
${await_block} = (${await_block_type} = type)(${params}, ${resolved} = ${value}, #component);
|
||||
|
||||
if (${old_block}) {
|
||||
${old_block}.u();
|
||||
${old_block}.d();
|
||||
${await_block}.c();
|
||||
${await_block}.m(${updateMountNode}, ${anchor});
|
||||
|
||||
#component.root.set({});
|
||||
}
|
||||
}
|
||||
|
||||
function ${handle_promise}(${promise}, ${params}) {
|
||||
var ${token} = ${await_token} = {};
|
||||
|
||||
if (@isPromise(${promise})) {
|
||||
${promise}.then(function(${value}) {
|
||||
var state = #component.get();
|
||||
${replace_await_block}(${token}, ${create_then_block}, ${value}, ${params});
|
||||
}, function (${error}) {
|
||||
var state = #component.get();
|
||||
${replace_await_block}(${token}, ${create_catch_block}, ${error}, ${params});
|
||||
});
|
||||
|
||||
// if we previously had a then/catch block, destroy it
|
||||
if (${await_block_type} !== ${create_pending_block}) {
|
||||
${replace_await_block}(${token}, ${create_pending_block}, null, ${params});
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
${resolved} = ${promise};
|
||||
if (${await_block_type} !== ${create_then_block}) {
|
||||
${replace_await_block}(${token}, ${create_then_block}, ${resolved}, ${params});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${handle_promise}(${promise} = ${snippet}, ${params});
|
||||
`);
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
${await_block}.c();
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
${await_block}.l(${parentNodes});
|
||||
`);
|
||||
}
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
${await_block}.m(${initialMountNode}, ${anchorNode});
|
||||
`);
|
||||
|
||||
const conditions = [];
|
||||
if (this.metadata.dependencies) {
|
||||
conditions.push(
|
||||
`(${this.metadata.dependencies.map(dep => `'${dep}' in changed`).join(' || ')})`
|
||||
);
|
||||
}
|
||||
|
||||
conditions.push(
|
||||
`${promise} !== (${promise} = ${snippet})`,
|
||||
`${handle_promise}(${promise}, ${params})`
|
||||
);
|
||||
|
||||
if (this.pending.block.hasUpdateMethod) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${conditions.join(' && ')}) {
|
||||
// nothing
|
||||
} else {
|
||||
${await_block}.p(changed, ${params}, ${resolved});
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${conditions.join(' && ')}) {
|
||||
${await_block}.c();
|
||||
${await_block}.m(${anchor}.parentNode, ${anchor});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.unmount.addBlock(deindent`
|
||||
${await_block}.u();
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
${await_token} = null;
|
||||
${await_block}.d();
|
||||
`);
|
||||
|
||||
[this.pending, this.then, this.catch].forEach(status => {
|
||||
status.children.forEach(child => {
|
||||
child.build(status.block, null,'nodes');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
|
||||
export default class CatchBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class Comment extends Node {
|
||||
type: 'Comment'
|
||||
}
|
||||
@ -1,588 +0,0 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import ElseBlock from './ElseBlock';
|
||||
import { DomGenerator } from '../dom/index';
|
||||
import Block from '../dom/Block';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
|
||||
export default class EachBlock extends Node {
|
||||
type: 'EachBlock';
|
||||
|
||||
block: Block;
|
||||
expression: Node;
|
||||
|
||||
iterations: string;
|
||||
index: string;
|
||||
context: string;
|
||||
key: string;
|
||||
destructuredContexts: string[];
|
||||
|
||||
children: Node[];
|
||||
else?: ElseBlock;
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
this.var = block.getUniqueName(`each`);
|
||||
this.iterations = block.getUniqueName(`${this.var}_blocks`);
|
||||
|
||||
const { dependencies } = this.metadata;
|
||||
block.addDependencies(dependencies);
|
||||
|
||||
const indexNames = new Map(block.indexNames);
|
||||
const indexName =
|
||||
this.index || block.getUniqueName(`${this.context}_index`);
|
||||
indexNames.set(this.context, indexName);
|
||||
|
||||
const listNames = new Map(block.listNames);
|
||||
const listName = block.getUniqueName(
|
||||
(this.expression.type === 'MemberExpression' && !this.expression.computed) ? this.expression.property.name :
|
||||
this.expression.type === 'Identifier' ? this.expression.name :
|
||||
`each_value`
|
||||
);
|
||||
listNames.set(this.context, listName);
|
||||
|
||||
const contextTypes = new Map(block.contextTypes);
|
||||
contextTypes.set(this.context, 'each');
|
||||
|
||||
const context = block.getUniqueName(this.context);
|
||||
const contexts = new Map(block.contexts);
|
||||
contexts.set(this.context, context);
|
||||
|
||||
const indexes = new Map(block.indexes);
|
||||
if (this.index) indexes.set(this.index, this.context);
|
||||
|
||||
const changeableIndexes = new Map(block.changeableIndexes);
|
||||
if (this.index) changeableIndexes.set(this.index, this.key);
|
||||
|
||||
if (this.destructuredContexts) {
|
||||
for (let i = 0; i < this.destructuredContexts.length; i += 1) {
|
||||
contexts.set(this.destructuredContexts[i], `${context}[${i}]`);
|
||||
}
|
||||
}
|
||||
|
||||
this.block = block.child({
|
||||
comment: createDebuggingComment(this, this.generator),
|
||||
name: this.generator.getUniqueName('create_each_block'),
|
||||
context: this.context,
|
||||
key: this.key,
|
||||
|
||||
contexts,
|
||||
contextTypes,
|
||||
indexes,
|
||||
changeableIndexes,
|
||||
|
||||
listName,
|
||||
indexName,
|
||||
|
||||
indexNames,
|
||||
listNames,
|
||||
params: block.params.concat(listName, context, indexName),
|
||||
});
|
||||
|
||||
this.generator.blocks.push(this.block);
|
||||
this.initChildren(this.block, stripWhitespace, nextSibling);
|
||||
block.addDependencies(this.block.dependencies);
|
||||
this.block.hasUpdateMethod = this.block.dependencies.size > 0;
|
||||
|
||||
if (this.else) {
|
||||
this.else.block = block.child({
|
||||
comment: createDebuggingComment(this.else, this.generator),
|
||||
name: this.generator.getUniqueName(`${this.block.name}_else`),
|
||||
});
|
||||
|
||||
this.generator.blocks.push(this.else.block);
|
||||
this.else.initChildren(
|
||||
this.else.block,
|
||||
stripWhitespace,
|
||||
nextSibling
|
||||
);
|
||||
this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
|
||||
}
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const { generator } = this;
|
||||
|
||||
const each = this.var;
|
||||
|
||||
const create_each_block = this.block.name;
|
||||
const each_block_value = this.block.listName;
|
||||
const iterations = this.iterations;
|
||||
const params = block.params.join(', ');
|
||||
|
||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
||||
const anchor = needsAnchor
|
||||
? block.getUniqueName(`${each}_anchor`)
|
||||
: (this.next && this.next.var) || 'null';
|
||||
|
||||
// hack the sourcemap, so that if data is missing the bug
|
||||
// is easy to find
|
||||
let c = this.start + 3;
|
||||
while (generator.source[c] !== 'e') c += 1;
|
||||
generator.code.overwrite(c, c + 4, 'length');
|
||||
const length = `[✂${c}-${c+4}✂]`;
|
||||
|
||||
const mountOrIntro = this.block.hasIntroMethod ? 'i' : 'm';
|
||||
const vars = {
|
||||
each,
|
||||
create_each_block,
|
||||
each_block_value,
|
||||
length,
|
||||
iterations,
|
||||
params,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
};
|
||||
|
||||
block.contextualise(this.expression);
|
||||
const { snippet } = this.metadata;
|
||||
|
||||
block.builders.init.addLine(`var ${each_block_value} = ${snippet};`);
|
||||
|
||||
if (this.key) {
|
||||
this.buildKeyed(block, parentNode, parentNodes, snippet, vars);
|
||||
} else {
|
||||
this.buildUnkeyed(block, parentNode, parentNodes, snippet, vars);
|
||||
}
|
||||
|
||||
if (needsAnchor) {
|
||||
block.addElement(
|
||||
anchor,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
parentNode
|
||||
);
|
||||
}
|
||||
|
||||
if (this.else) {
|
||||
const each_block_else = generator.getUniqueName(`${each}_else`);
|
||||
|
||||
block.builders.init.addLine(`var ${each_block_else} = null;`);
|
||||
|
||||
// TODO neaten this up... will end up with an empty line in the block
|
||||
block.builders.init.addBlock(deindent`
|
||||
if (!${each_block_value}.${length}) {
|
||||
${each_block_else} = ${this.else.block.name}(${params}, #component);
|
||||
${each_block_else}.c();
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
if (${each_block_else}) {
|
||||
${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || `${anchor}.parentNode`;
|
||||
|
||||
if (this.else.block.hasUpdateMethod) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (!${each_block_value}.${length} && ${each_block_else}) {
|
||||
${each_block_else}.p( changed, ${params} );
|
||||
} else if (!${each_block_value}.${length}) {
|
||||
${each_block_else} = ${this.else.block.name}(${params}, #component);
|
||||
${each_block_else}.c();
|
||||
${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
|
||||
} else if (${each_block_else}) {
|
||||
${each_block_else}.u();
|
||||
${each_block_else}.d();
|
||||
${each_block_else} = null;
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${each_block_value}.${length}) {
|
||||
if (${each_block_else}) {
|
||||
${each_block_else}.u();
|
||||
${each_block_else}.d();
|
||||
${each_block_else} = null;
|
||||
}
|
||||
} else if (!${each_block_else}) {
|
||||
${each_block_else} = ${this.else.block.name}(${params}, #component);
|
||||
${each_block_else}.c();
|
||||
${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.unmount.addLine(
|
||||
`if (${each_block_else}) ${each_block_else}.u()`
|
||||
);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
if (${each_block_else}) ${each_block_else}.d();
|
||||
`);
|
||||
}
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.build(this.block, null, 'nodes');
|
||||
});
|
||||
|
||||
if (this.else) {
|
||||
this.else.children.forEach((child: Node) => {
|
||||
child.build(this.else.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
buildKeyed(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
snippet: string,
|
||||
{
|
||||
each,
|
||||
create_each_block,
|
||||
each_block_value,
|
||||
length,
|
||||
params,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
}
|
||||
) {
|
||||
const key = block.getUniqueName('key');
|
||||
const lookup = block.getUniqueName(`${each}_lookup`);
|
||||
const iteration = block.getUniqueName(`${each}_iteration`);
|
||||
const head = block.getUniqueName(`${each}_head`);
|
||||
const last = block.getUniqueName(`${each}_last`);
|
||||
const expected = block.getUniqueName(`${each}_expected`);
|
||||
|
||||
block.addVariable(lookup, `@blankObject()`);
|
||||
block.addVariable(head);
|
||||
block.addVariable(last);
|
||||
|
||||
if (this.children[0].isDomNode()) {
|
||||
this.block.first = this.children[0].var;
|
||||
} else {
|
||||
this.block.first = this.block.getUniqueName('first');
|
||||
this.block.addElement(
|
||||
this.block.first,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${each_block_value}.${length}; #i += 1) {
|
||||
var ${key} = ${each_block_value}[#i].${this.key};
|
||||
var ${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
|
||||
|
||||
if (${last}) ${last}.next = ${iteration};
|
||||
${iteration}.last = ${last};
|
||||
${last} = ${iteration};
|
||||
|
||||
if (#i === 0) ${head} = ${iteration};
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
var ${iteration} = ${head};
|
||||
while (${iteration}) {
|
||||
${iteration}.c();
|
||||
${iteration} = ${iteration}.next;
|
||||
}
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
var ${iteration} = ${head};
|
||||
while (${iteration}) {
|
||||
${iteration}.l(${parentNodes});
|
||||
${iteration} = ${iteration}.next;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
var ${iteration} = ${head};
|
||||
while (${iteration}) {
|
||||
${iteration}.${mountOrIntro}(${initialMountNode}, ${anchorNode});
|
||||
${iteration} = ${iteration}.next;
|
||||
}
|
||||
`);
|
||||
|
||||
const dynamic = this.block.hasUpdateMethod;
|
||||
|
||||
let destroy;
|
||||
if (this.block.hasOutroMethod) {
|
||||
const fn = block.getUniqueName(`${each}_outro`);
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${fn}(iteration) {
|
||||
iteration.o(function() {
|
||||
iteration.u();
|
||||
iteration.d();
|
||||
${lookup}[iteration.key] = null;
|
||||
});
|
||||
}
|
||||
`);
|
||||
|
||||
destroy = deindent`
|
||||
while (${expected}) {
|
||||
${fn}(${expected});
|
||||
${expected} = ${expected}.next;
|
||||
}
|
||||
|
||||
for (#i = 0; #i < discard_pile.length; #i += 1) {
|
||||
if (discard_pile[#i].discard) {
|
||||
${fn}(discard_pile[#i]);
|
||||
}
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
const fn = block.getUniqueName(`${each}_destroy`);
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${fn}(iteration) {
|
||||
iteration.u();
|
||||
iteration.d();
|
||||
${lookup}[iteration.key] = null;
|
||||
}
|
||||
`);
|
||||
|
||||
destroy = deindent`
|
||||
while (${expected}) {
|
||||
${fn}(${expected});
|
||||
${expected} = ${expected}.next;
|
||||
}
|
||||
|
||||
for (#i = 0; #i < discard_pile.length; #i += 1) {
|
||||
var ${iteration} = discard_pile[#i];
|
||||
if (${iteration}.discard) {
|
||||
${fn}(${iteration});
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${each_block_value} = ${snippet};
|
||||
|
||||
var ${expected} = ${head};
|
||||
var ${last} = null;
|
||||
|
||||
var discard_pile = [];
|
||||
|
||||
for (#i = 0; #i < ${each_block_value}.${length}; #i += 1) {
|
||||
var ${key} = ${each_block_value}[#i].${this.key};
|
||||
var ${iteration} = ${lookup}[${key}];
|
||||
|
||||
${dynamic &&
|
||||
`if (${iteration}) ${iteration}.p(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);`}
|
||||
|
||||
if (${expected}) {
|
||||
if (${key} === ${expected}.key) {
|
||||
${expected} = ${expected}.next;
|
||||
} else {
|
||||
if (${iteration}) {
|
||||
// probably a deletion
|
||||
while (${expected} && ${expected}.key !== ${key}) {
|
||||
${expected}.discard = true;
|
||||
discard_pile.push(${expected});
|
||||
${expected} = ${expected}.next;
|
||||
};
|
||||
|
||||
${expected} = ${expected} && ${expected}.next;
|
||||
${iteration}.discard = false;
|
||||
${iteration}.last = ${last};
|
||||
|
||||
if (!${expected}) ${iteration}.m(${updateMountNode}, ${anchor});
|
||||
} else {
|
||||
// key is being inserted
|
||||
${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
|
||||
${iteration}.c();
|
||||
${iteration}.${mountOrIntro}(${updateMountNode}, ${expected}.first);
|
||||
|
||||
${expected}.last = ${iteration};
|
||||
${iteration}.next = ${expected};
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// we're appending from this point forward
|
||||
if (${iteration}) {
|
||||
${iteration}.discard = false;
|
||||
${iteration}.next = null;
|
||||
${iteration}.m(${updateMountNode}, ${anchor});
|
||||
} else {
|
||||
${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
|
||||
${iteration}.c();
|
||||
${iteration}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
}
|
||||
}
|
||||
|
||||
if (${last}) ${last}.next = ${iteration};
|
||||
${iteration}.last = ${last};
|
||||
${this.block.hasIntroMethod && `${iteration}.i(${updateMountNode}, ${anchor});`}
|
||||
${last} = ${iteration};
|
||||
}
|
||||
|
||||
if (${last}) ${last}.next = null;
|
||||
|
||||
${destroy}
|
||||
|
||||
${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${this.key}];
|
||||
`);
|
||||
|
||||
if (!parentNode) {
|
||||
block.builders.unmount.addBlock(deindent`
|
||||
var ${iteration} = ${head};
|
||||
while (${iteration}) {
|
||||
${iteration}.u();
|
||||
${iteration} = ${iteration}.next;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
var ${iteration} = ${head};
|
||||
while (${iteration}) {
|
||||
${iteration}.d();
|
||||
${iteration} = ${iteration}.next;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
buildUnkeyed(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
snippet: string,
|
||||
{
|
||||
create_each_block,
|
||||
each_block_value,
|
||||
length,
|
||||
iterations,
|
||||
params,
|
||||
anchor,
|
||||
mountOrIntro,
|
||||
}
|
||||
) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${iterations} = [];
|
||||
|
||||
for (var #i = 0; #i < ${each_block_value}.${length}; #i += 1) {
|
||||
${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
|
||||
}
|
||||
`);
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.create.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].c();
|
||||
}
|
||||
`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].l(${parentNodes});
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.mount.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
|
||||
}
|
||||
`);
|
||||
|
||||
const allDependencies = new Set(this.block.dependencies);
|
||||
const { dependencies } = this.metadata;
|
||||
dependencies.forEach((dependency: string) => {
|
||||
allDependencies.add(dependency);
|
||||
});
|
||||
|
||||
// TODO do this for keyed blocks as well
|
||||
const condition = Array.from(allDependencies)
|
||||
.map(dependency => `changed.${dependency}`)
|
||||
.join(' || ');
|
||||
|
||||
if (condition !== '') {
|
||||
const forLoopBody = this.block.hasUpdateMethod
|
||||
? this.block.hasIntroMethod
|
||||
? deindent`
|
||||
if (${iterations}[#i]) {
|
||||
${iterations}[#i].p(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);
|
||||
} else {
|
||||
${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
|
||||
${iterations}[#i].c();
|
||||
}
|
||||
${iterations}[#i].i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (${iterations}[#i]) {
|
||||
${iterations}[#i].p(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);
|
||||
} else {
|
||||
${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
|
||||
${iterations}[#i].c();
|
||||
${iterations}[#i].m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`
|
||||
: deindent`
|
||||
${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
|
||||
${iterations}[#i].c();
|
||||
${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
|
||||
|
||||
const outro = block.getUniqueName('outro');
|
||||
const destroy = this.block.hasOutroMethod
|
||||
? deindent`
|
||||
function ${outro}(i) {
|
||||
if (${iterations}[i]) {
|
||||
${iterations}[i].o(function() {
|
||||
${iterations}[i].u();
|
||||
${iterations}[i].d();
|
||||
${iterations}[i] = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
|
||||
`
|
||||
: deindent`
|
||||
for (; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].u();
|
||||
${iterations}[#i].d();
|
||||
}
|
||||
${iterations}.length = ${each_block_value}.${length};
|
||||
`;
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${each_block_value} = ${snippet};
|
||||
|
||||
if (${condition}) {
|
||||
for (var #i = ${start}; #i < ${each_block_value}.${length}; #i += 1) {
|
||||
${forLoopBody}
|
||||
}
|
||||
|
||||
${destroy}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.unmount.addBlock(deindent`
|
||||
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
|
||||
${iterations}[#i].u();
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(`@destroyEach(${iterations});`);
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
|
||||
export default class ElseBlock extends Node {
|
||||
type: 'ElseBlock';
|
||||
children: Node[];
|
||||
block: Block;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class EventHandler extends Node {
|
||||
name: string;
|
||||
value: Node[]
|
||||
expression: Node
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import { DomGenerator } from '../dom/index';
|
||||
import Block from '../dom/Block';
|
||||
|
||||
export default class Fragment extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
|
||||
init() {
|
||||
this.block = new Block({
|
||||
generator: this.generator,
|
||||
name: '@create_main_fragment',
|
||||
key: null,
|
||||
|
||||
contexts: new Map(),
|
||||
indexes: new Map(),
|
||||
changeableIndexes: new Map(),
|
||||
|
||||
params: ['state'],
|
||||
indexNames: new Map(),
|
||||
listNames: new Map(),
|
||||
|
||||
dependencies: new Set(),
|
||||
});
|
||||
|
||||
this.generator.blocks.push(this.block);
|
||||
this.initChildren(this.block, true, null);
|
||||
|
||||
this.block.hasUpdateMethod = true;
|
||||
}
|
||||
|
||||
build() {
|
||||
this.init();
|
||||
|
||||
this.children.forEach(child => {
|
||||
child.build(this.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,500 +0,0 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Node from './shared/Node';
|
||||
import ElseBlock from './ElseBlock';
|
||||
import { DomGenerator } from '../dom/index';
|
||||
import Block from '../dom/Block';
|
||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||
|
||||
function isElseIf(node: ElseBlock) {
|
||||
return (
|
||||
node && node.children.length === 1 && node.children[0].type === 'IfBlock'
|
||||
);
|
||||
}
|
||||
|
||||
function isElseBranch(branch) {
|
||||
return branch.block && !branch.condition;
|
||||
}
|
||||
|
||||
export default class IfBlock extends Node {
|
||||
type: 'IfBlock';
|
||||
else: ElseBlock;
|
||||
|
||||
block: Block;
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
const { generator } = this;
|
||||
|
||||
this.cannotUseInnerHTML();
|
||||
|
||||
const blocks: Block[] = [];
|
||||
let dynamic = false;
|
||||
let hasIntros = false;
|
||||
let hasOutros = false;
|
||||
|
||||
function attachBlocks(node: IfBlock) {
|
||||
node.var = block.getUniqueName(`if_block`);
|
||||
|
||||
block.addDependencies(node.metadata.dependencies);
|
||||
|
||||
node.block = block.child({
|
||||
comment: createDebuggingComment(node, generator),
|
||||
name: generator.getUniqueName(`create_if_block`),
|
||||
});
|
||||
|
||||
blocks.push(node.block);
|
||||
node.initChildren(node.block, stripWhitespace, nextSibling);
|
||||
|
||||
if (node.block.dependencies.size > 0) {
|
||||
dynamic = true;
|
||||
block.addDependencies(node.block.dependencies);
|
||||
}
|
||||
|
||||
if (node.block.hasIntroMethod) hasIntros = true;
|
||||
if (node.block.hasOutroMethod) hasOutros = true;
|
||||
|
||||
if (isElseIf(node.else)) {
|
||||
attachBlocks(node.else.children[0]);
|
||||
} else if (node.else) {
|
||||
node.else.block = block.child({
|
||||
comment: createDebuggingComment(node.else, generator),
|
||||
name: generator.getUniqueName(`create_if_block`),
|
||||
});
|
||||
|
||||
blocks.push(node.else.block);
|
||||
node.else.initChildren(
|
||||
node.else.block,
|
||||
stripWhitespace,
|
||||
nextSibling
|
||||
);
|
||||
|
||||
if (node.else.block.dependencies.size > 0) {
|
||||
dynamic = true;
|
||||
block.addDependencies(node.else.block.dependencies);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
attachBlocks(this);
|
||||
|
||||
blocks.forEach(block => {
|
||||
block.hasUpdateMethod = dynamic;
|
||||
block.hasIntroMethod = hasIntros;
|
||||
block.hasOutroMethod = hasOutros;
|
||||
});
|
||||
|
||||
generator.blocks.push(...blocks);
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const name = this.var;
|
||||
|
||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
||||
const anchor = needsAnchor
|
||||
? block.getUniqueName(`${name}_anchor`)
|
||||
: (this.next && this.next.var) || 'null';
|
||||
const params = block.params.join(', ');
|
||||
|
||||
const branches = getBranches(this.generator, block, parentNode, parentNodes, this);
|
||||
|
||||
const hasElse = isElseBranch(branches[branches.length - 1]);
|
||||
const if_name = hasElse ? '' : `if (${name}) `;
|
||||
|
||||
const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
|
||||
const hasOutros = branches[0].hasOutroMethod;
|
||||
|
||||
const vars = { name, anchor, params, if_name, hasElse };
|
||||
|
||||
if (this.else) {
|
||||
if (hasOutros) {
|
||||
compoundWithOutros(
|
||||
this.generator,
|
||||
block,
|
||||
parentNode,
|
||||
parentNodes,
|
||||
this,
|
||||
branches,
|
||||
dynamic,
|
||||
vars
|
||||
);
|
||||
} else {
|
||||
compound(this.generator, block, parentNode, parentNodes, this, branches, dynamic, vars);
|
||||
}
|
||||
} else {
|
||||
simple(this.generator, block, parentNode, parentNodes, this, branches[0], dynamic, vars);
|
||||
}
|
||||
|
||||
block.builders.create.addLine(`${if_name}${name}.c();`);
|
||||
|
||||
if (parentNodes) {
|
||||
block.builders.claim.addLine(
|
||||
`${if_name}${name}.l(${parentNodes});`
|
||||
);
|
||||
}
|
||||
|
||||
if (needsAnchor) {
|
||||
block.addElement(
|
||||
anchor,
|
||||
`@createComment()`,
|
||||
parentNodes && `@createComment()`,
|
||||
parentNode
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// TODO move all this into the class
|
||||
|
||||
function getBranches(
|
||||
generator: DomGenerator,
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression); // TODO remove
|
||||
|
||||
const branches = [
|
||||
{
|
||||
condition: node.metadata.snippet,
|
||||
block: node.block.name,
|
||||
hasUpdateMethod: node.block.hasUpdateMethod,
|
||||
hasIntroMethod: node.block.hasIntroMethod,
|
||||
hasOutroMethod: node.block.hasOutroMethod,
|
||||
},
|
||||
];
|
||||
|
||||
visitChildren(generator, block, node);
|
||||
|
||||
if (isElseIf(node.else)) {
|
||||
branches.push(
|
||||
...getBranches(generator, block, parentNode, parentNodes, node.else.children[0])
|
||||
);
|
||||
} else {
|
||||
branches.push({
|
||||
condition: null,
|
||||
block: node.else ? node.else.block.name : null,
|
||||
hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
|
||||
hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
|
||||
hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
|
||||
});
|
||||
|
||||
if (node.else) {
|
||||
visitChildren(generator, block, node.else);
|
||||
}
|
||||
}
|
||||
|
||||
return branches;
|
||||
}
|
||||
|
||||
function visitChildren(
|
||||
generator: DomGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
node.children.forEach((child: Node) => {
|
||||
child.build(node.block, null, 'nodes');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function simple(
|
||||
generator: DomGenerator,
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
node: Node,
|
||||
branch,
|
||||
dynamic,
|
||||
{ name, anchor, params, if_name }
|
||||
) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${name} = (${branch.condition}) && ${branch.block}(${params}, #component);
|
||||
`);
|
||||
|
||||
const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addLine(
|
||||
`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = node.getUpdateMountNode(anchor);
|
||||
|
||||
const enter = dynamic
|
||||
? branch.hasIntroMethod
|
||||
? deindent`
|
||||
if (${name}) {
|
||||
${name}.p(changed, ${params});
|
||||
} else {
|
||||
${name} = ${branch.block}(${params}, #component);
|
||||
if (${name}) ${name}.c();
|
||||
}
|
||||
|
||||
${name}.i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${name}.p(changed, ${params});
|
||||
} else {
|
||||
${name} = ${branch.block}(${params}, #component);
|
||||
${name}.c();
|
||||
${name}.m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`
|
||||
: branch.hasIntroMethod
|
||||
? deindent`
|
||||
if (!${name}) {
|
||||
${name} = ${branch.block}(${params}, #component);
|
||||
${name}.c();
|
||||
}
|
||||
${name}.i(${updateMountNode}, ${anchor});
|
||||
`
|
||||
: deindent`
|
||||
if (!${name}) {
|
||||
${name} = ${branch.block}(${params}, #component);
|
||||
${name}.c();
|
||||
${name}.m(${updateMountNode}, ${anchor});
|
||||
}
|
||||
`;
|
||||
|
||||
// no `p()` here — we don't want to update outroing nodes,
|
||||
// as that will typically result in glitching
|
||||
const exit = branch.hasOutroMethod
|
||||
? deindent`
|
||||
${name}.o(function() {
|
||||
${name}.u();
|
||||
${name}.d();
|
||||
${name} = null;
|
||||
});
|
||||
`
|
||||
: deindent`
|
||||
${name}.u();
|
||||
${name}.d();
|
||||
${name} = null;
|
||||
`;
|
||||
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${branch.condition}) {
|
||||
${enter}
|
||||
} else if (${name}) {
|
||||
${exit}
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.unmount.addLine(`${if_name}${name}.u();`);
|
||||
|
||||
block.builders.destroy.addLine(`${if_name}${name}.d();`);
|
||||
}
|
||||
|
||||
function compound(
|
||||
generator: DomGenerator,
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
node: Node,
|
||||
branches,
|
||||
dynamic,
|
||||
{ name, anchor, params, hasElse, if_name }
|
||||
) {
|
||||
const select_block_type = generator.getUniqueName(`select_block_type`);
|
||||
const current_block_type = block.getUniqueName(`current_block_type`);
|
||||
const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
|
||||
|
||||
generator.blocks.push(deindent`
|
||||
function ${select_block_type}(${params}) {
|
||||
${branches
|
||||
.map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`)
|
||||
.join('\n')}
|
||||
}
|
||||
`);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${current_block_type} = ${select_block_type}(${params});
|
||||
var ${name} = ${current_block_type_and}${current_block_type}(${params}, #component);
|
||||
`);
|
||||
|
||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
||||
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
block.builders.mount.addLine(
|
||||
`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = node.getUpdateMountNode(anchor);
|
||||
|
||||
const changeBlock = deindent`
|
||||
${hasElse
|
||||
? deindent`
|
||||
${name}.u();
|
||||
${name}.d();
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${name}.u();
|
||||
${name}.d();
|
||||
}`}
|
||||
${name} = ${current_block_type_and}${current_block_type}(${params}, #component);
|
||||
${if_name}${name}.c();
|
||||
${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
if (dynamic) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${current_block_type} === (${current_block_type} = ${select_block_type}(${params})) && ${name}) {
|
||||
${name}.p(changed, ${params});
|
||||
} else {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
if (${current_block_type} !== (${current_block_type} = ${select_block_type}(${params}))) {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.unmount.addLine(`${if_name}${name}.u();`);
|
||||
|
||||
block.builders.destroy.addLine(`${if_name}${name}.d();`);
|
||||
}
|
||||
|
||||
// if any of the siblings have outros, we need to keep references to the blocks
|
||||
// (TODO does this only apply to bidi transitions?)
|
||||
function compoundWithOutros(
|
||||
generator: DomGenerator,
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string,
|
||||
node: Node,
|
||||
branches,
|
||||
dynamic,
|
||||
{ name, anchor, params, hasElse }
|
||||
) {
|
||||
const select_block_type = block.getUniqueName(`select_block_type`);
|
||||
const current_block_type_index = block.getUniqueName(`current_block_type_index`);
|
||||
const previous_block_index = block.getUniqueName(`previous_block_index`);
|
||||
const if_block_creators = block.getUniqueName(`if_block_creators`);
|
||||
const if_blocks = block.getUniqueName(`if_blocks`);
|
||||
|
||||
const if_current_block_type_index = hasElse
|
||||
? ''
|
||||
: `if (~${current_block_type_index}) `;
|
||||
|
||||
block.addVariable(current_block_type_index);
|
||||
block.addVariable(name);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
var ${if_block_creators} = [
|
||||
${branches.map(branch => branch.block).join(',\n')}
|
||||
];
|
||||
|
||||
var ${if_blocks} = [];
|
||||
|
||||
function ${select_block_type}(${params}) {
|
||||
${branches
|
||||
.map(({ condition, block }, i) => `${condition ? `if (${condition}) ` : ''}return ${block ? i : -1};`)
|
||||
.join('\n')}
|
||||
}
|
||||
`);
|
||||
|
||||
if (hasElse) {
|
||||
block.builders.init.addBlock(deindent`
|
||||
${current_block_type_index} = ${select_block_type}(${params});
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${params}, #component);
|
||||
`);
|
||||
} else {
|
||||
block.builders.init.addBlock(deindent`
|
||||
if (~(${current_block_type_index} = ${select_block_type}(${params}))) {
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${params}, #component);
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
||||
const initialMountNode = parentNode || '#target';
|
||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
||||
|
||||
block.builders.mount.addLine(
|
||||
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
||||
);
|
||||
|
||||
const updateMountNode = node.getUpdateMountNode(anchor);
|
||||
|
||||
const destroyOldBlock = deindent`
|
||||
${name}.o(function() {
|
||||
${if_blocks}[ ${previous_block_index} ].u();
|
||||
${if_blocks}[ ${previous_block_index} ].d();
|
||||
${if_blocks}[ ${previous_block_index} ] = null;
|
||||
});
|
||||
`;
|
||||
|
||||
const createNewBlock = deindent`
|
||||
${name} = ${if_blocks}[${current_block_type_index}];
|
||||
if (!${name}) {
|
||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${params}, #component);
|
||||
${name}.c();
|
||||
}
|
||||
${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
||||
`;
|
||||
|
||||
const changeBlock = hasElse
|
||||
? deindent`
|
||||
${destroyOldBlock}
|
||||
|
||||
${createNewBlock}
|
||||
`
|
||||
: deindent`
|
||||
if (${name}) {
|
||||
${destroyOldBlock}
|
||||
}
|
||||
|
||||
if (~${current_block_type_index}) {
|
||||
${createNewBlock}
|
||||
} else {
|
||||
${name} = null;
|
||||
}
|
||||
`;
|
||||
|
||||
if (dynamic) {
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${previous_block_index} = ${current_block_type_index};
|
||||
${current_block_type_index} = ${select_block_type}(${params});
|
||||
if (${current_block_type_index} === ${previous_block_index}) {
|
||||
${if_current_block_type_index}${if_blocks}[${current_block_type_index}].p(changed, ${params});
|
||||
} else {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
} else {
|
||||
block.builders.update.addBlock(deindent`
|
||||
var ${previous_block_index} = ${current_block_type_index};
|
||||
${current_block_type_index} = ${select_block_type}(${params});
|
||||
if (${current_block_type_index} !== ${previous_block_index}) {
|
||||
${changeBlock}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
block.builders.destroy.addLine(deindent`
|
||||
${if_current_block_type_index}{
|
||||
${if_blocks}[${current_block_type_index}].u();
|
||||
${if_blocks}[${current_block_type_index}].d();
|
||||
}
|
||||
`);
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
|
||||
export default class PendingBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class Ref extends Node {
|
||||
name: string;
|
||||
value: Node[]
|
||||
expression: Node
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
|
||||
export default class ThenBlock extends Node {
|
||||
block: Block;
|
||||
children: Node[];
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class Transition extends Node {
|
||||
name: string;
|
||||
value: Node[]
|
||||
expression: Node
|
||||
}
|
||||
@ -1,213 +0,0 @@
|
||||
import CodeBuilder from '../../utils/CodeBuilder';
|
||||
import deindent from '../../utils/deindent';
|
||||
import { stringify } from '../../utils/stringify';
|
||||
import flattenReference from '../../utils/flattenReference';
|
||||
import isVoidElementName from '../../utils/isVoidElementName';
|
||||
import validCalleeObjects from '../../utils/validCalleeObjects';
|
||||
import reservedNames from '../../utils/reservedNames';
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import Attribute from './Attribute';
|
||||
|
||||
const associatedEvents = {
|
||||
innerWidth: 'resize',
|
||||
innerHeight: 'resize',
|
||||
outerWidth: 'resize',
|
||||
outerHeight: 'resize',
|
||||
|
||||
scrollX: 'scroll',
|
||||
scrollY: 'scroll',
|
||||
};
|
||||
|
||||
const readonly = new Set([
|
||||
'innerWidth',
|
||||
'innerHeight',
|
||||
'outerWidth',
|
||||
'outerHeight',
|
||||
'online',
|
||||
]);
|
||||
|
||||
export default class Window extends Node {
|
||||
type: 'Window';
|
||||
attributes: Attribute[];
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const { generator } = this;
|
||||
|
||||
const events = {};
|
||||
const bindings: Record<string, string> = {};
|
||||
|
||||
this.attributes.forEach((attribute: Node) => {
|
||||
if (attribute.type === 'EventHandler') {
|
||||
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
||||
generator.addSourcemapLocations(attribute.expression);
|
||||
|
||||
let usesState = false;
|
||||
|
||||
attribute.expression.arguments.forEach((arg: Node) => {
|
||||
block.contextualise(arg, null, true);
|
||||
const { dependencies } = arg.metadata;
|
||||
if (dependencies.length) usesState = true;
|
||||
});
|
||||
|
||||
const flattened = flattenReference(attribute.expression.callee);
|
||||
if (flattened.name !== 'event' && flattened.name !== 'this') {
|
||||
// allow event.stopPropagation(), this.select() etc
|
||||
generator.code.prependRight(
|
||||
attribute.expression.start,
|
||||
`${block.alias('component')}.`
|
||||
);
|
||||
}
|
||||
|
||||
const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
|
||||
const handlerBody = deindent`
|
||||
${usesState && `var state = #component.get();`}
|
||||
[✂${attribute.expression.start}-${attribute.expression.end}✂];
|
||||
`;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
${handlerBody}
|
||||
}
|
||||
window.addEventListener("${attribute.name}", ${handlerName});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("${attribute.name}", ${handlerName});
|
||||
`);
|
||||
}
|
||||
|
||||
if (attribute.type === 'Binding') {
|
||||
// in dev mode, throw if read-only values are written to
|
||||
if (readonly.has(attribute.name)) {
|
||||
generator.readonly.add(attribute.value.name);
|
||||
}
|
||||
|
||||
bindings[attribute.name] = attribute.value.name;
|
||||
|
||||
// bind:online is a special case, we need to listen for two separate events
|
||||
if (attribute.name === 'online') return;
|
||||
|
||||
const associatedEvent = associatedEvents[attribute.name];
|
||||
|
||||
if (!events[associatedEvent]) events[associatedEvent] = [];
|
||||
events[associatedEvent].push(
|
||||
`${attribute.value.name}: this.${attribute.name}`
|
||||
);
|
||||
|
||||
// add initial value
|
||||
generator.metaBindings.push(
|
||||
`this._state.${attribute.value.name} = window.${attribute.name};`
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const lock = block.getUniqueName(`window_updating`);
|
||||
const clear = block.getUniqueName(`clear_window_updating`);
|
||||
const timeout = block.getUniqueName(`window_updating_timeout`);
|
||||
|
||||
Object.keys(events).forEach(event => {
|
||||
const handlerName = block.getUniqueName(`onwindow${event}`);
|
||||
const props = events[event].join(',\n');
|
||||
|
||||
if (event === 'scroll') {
|
||||
// TODO other bidirectional bindings...
|
||||
block.addVariable(lock, 'false');
|
||||
block.addVariable(clear, `function() { ${lock} = false; }`);
|
||||
block.addVariable(timeout);
|
||||
}
|
||||
|
||||
const handlerBody = deindent`
|
||||
${event === 'scroll' && deindent`
|
||||
if (${lock}) return;
|
||||
${lock} = true;
|
||||
`}
|
||||
${generator.options.dev && `component._updatingReadonlyProperty = true;`}
|
||||
|
||||
#component.set({
|
||||
${props}
|
||||
});
|
||||
|
||||
${generator.options.dev && `component._updatingReadonlyProperty = false;`}
|
||||
${event === 'scroll' && `${lock} = false;`}
|
||||
`;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
${handlerBody}
|
||||
}
|
||||
window.addEventListener("${event}", ${handlerName});
|
||||
`);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("${event}", ${handlerName});
|
||||
`);
|
||||
});
|
||||
|
||||
// special case... might need to abstract this out if we add more special cases
|
||||
if (bindings.scrollX && bindings.scrollY) {
|
||||
const observerCallback = block.getUniqueName(`scrollobserver`);
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${observerCallback}() {
|
||||
${lock} = true;
|
||||
clearTimeout(${timeout});
|
||||
var x = ${bindings.scrollX
|
||||
? `#component.get("${bindings.scrollX}")`
|
||||
: `window.scrollX`};
|
||||
var y = ${bindings.scrollY
|
||||
? `#component.get("${bindings.scrollY}")`
|
||||
: `window.scrollY`};
|
||||
window.scrollTo(x, y);
|
||||
${timeout} = setTimeout(${clear}, 100);
|
||||
}
|
||||
`);
|
||||
|
||||
if (bindings.scrollX)
|
||||
block.builders.init.addLine(
|
||||
`#component.observe("${bindings.scrollX}", ${observerCallback});`
|
||||
);
|
||||
if (bindings.scrollY)
|
||||
block.builders.init.addLine(
|
||||
`#component.observe("${bindings.scrollY}", ${observerCallback});`
|
||||
);
|
||||
} else if (bindings.scrollX || bindings.scrollY) {
|
||||
const isX = !!bindings.scrollX;
|
||||
|
||||
block.builders.init.addBlock(deindent`
|
||||
#component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) {
|
||||
${lock} = true;
|
||||
clearTimeout(${timeout});
|
||||
window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'});
|
||||
${timeout} = setTimeout(${clear}, 100);
|
||||
});
|
||||
`);
|
||||
}
|
||||
|
||||
// another special case. (I'm starting to think these are all special cases.)
|
||||
if (bindings.online) {
|
||||
const handlerName = block.getUniqueName(`onlinestatuschanged`);
|
||||
block.builders.init.addBlock(deindent`
|
||||
function ${handlerName}(event) {
|
||||
#component.set({ ${bindings.online}: navigator.onLine });
|
||||
}
|
||||
window.addEventListener("online", ${handlerName});
|
||||
window.addEventListener("offline", ${handlerName});
|
||||
`);
|
||||
|
||||
// add initial value
|
||||
generator.metaBindings.push(
|
||||
`this._state.${bindings.online} = navigator.onLine;`
|
||||
);
|
||||
|
||||
block.builders.destroy.addBlock(deindent`
|
||||
window.removeEventListener("online", ${handlerName});
|
||||
window.removeEventListener("offline", ${handlerName});
|
||||
`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Attribute from './Attribute';
|
||||
import AwaitBlock from './AwaitBlock';
|
||||
import Binding from './Binding';
|
||||
import CatchBlock from './CatchBlock';
|
||||
import Comment from './Comment';
|
||||
import Component from './Component';
|
||||
import EachBlock from './EachBlock';
|
||||
import Element from './Element';
|
||||
import ElseBlock from './ElseBlock';
|
||||
import EventHandler from './EventHandler';
|
||||
import Fragment from './Fragment';
|
||||
import Head from './Head';
|
||||
import IfBlock from './IfBlock';
|
||||
import MustacheTag from './MustacheTag';
|
||||
import PendingBlock from './PendingBlock';
|
||||
import RawMustacheTag from './RawMustacheTag';
|
||||
import Ref from './Ref';
|
||||
import Slot from './Slot';
|
||||
import Text from './Text';
|
||||
import ThenBlock from './ThenBlock';
|
||||
import Title from './Title';
|
||||
import Transition from './Transition';
|
||||
import Window from './Window';
|
||||
|
||||
const nodes: Record<string, any> = {
|
||||
Attribute,
|
||||
AwaitBlock,
|
||||
Binding,
|
||||
CatchBlock,
|
||||
Comment,
|
||||
Component,
|
||||
EachBlock,
|
||||
Element,
|
||||
ElseBlock,
|
||||
EventHandler,
|
||||
Fragment,
|
||||
Head,
|
||||
IfBlock,
|
||||
MustacheTag,
|
||||
PendingBlock,
|
||||
RawMustacheTag,
|
||||
Ref,
|
||||
Slot,
|
||||
Text,
|
||||
ThenBlock,
|
||||
Title,
|
||||
Transition,
|
||||
Window
|
||||
};
|
||||
|
||||
export default nodes;
|
||||
@ -1,45 +0,0 @@
|
||||
import Node from './Node';
|
||||
import Block from '../../dom/Block';
|
||||
|
||||
export default class Tag extends Node {
|
||||
renameThisMethod(
|
||||
block: Block,
|
||||
update: ((value: string) => string)
|
||||
) {
|
||||
const { indexes } = block.contextualise(this.expression);
|
||||
const { dependencies, snippet } = this.metadata;
|
||||
|
||||
const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
|
||||
|
||||
const shouldCache = (
|
||||
this.expression.type !== 'Identifier' ||
|
||||
block.contexts.has(this.expression.name) ||
|
||||
hasChangeableIndex
|
||||
);
|
||||
|
||||
const value = shouldCache && block.getUniqueName(`${this.var}_value`);
|
||||
const content = shouldCache ? value : snippet;
|
||||
|
||||
if (shouldCache) block.addVariable(value, snippet);
|
||||
|
||||
if (dependencies.length || hasChangeableIndex) {
|
||||
const changedCheck = (
|
||||
(block.hasOutroMethod ? `#outroing || ` : '') +
|
||||
dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')
|
||||
);
|
||||
|
||||
const updateCachedValue = `${value} !== (${value} = ${snippet})`;
|
||||
|
||||
const condition = shouldCache ?
|
||||
(dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
|
||||
changedCheck;
|
||||
|
||||
block.builders.update.addConditional(
|
||||
condition,
|
||||
update(content)
|
||||
);
|
||||
}
|
||||
|
||||
return { init: content };
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import flattenReference from '../../utils/flattenReference';
|
||||
import { SsrGenerator } from './index';
|
||||
import { Node } from '../../interfaces';
|
||||
import getObject from '../../utils/getObject';
|
||||
|
||||
interface BlockOptions {
|
||||
// TODO
|
||||
}
|
||||
|
||||
export default class Block {
|
||||
generator: SsrGenerator;
|
||||
conditions: string[];
|
||||
|
||||
contexts: Map<string, string>;
|
||||
indexes: Map<string, string>;
|
||||
contextDependencies: Map<string, string[]>;
|
||||
|
||||
constructor(options: BlockOptions) {
|
||||
Object.assign(this, options);
|
||||
}
|
||||
|
||||
addBinding(binding: Node, name: string) {
|
||||
const conditions = [`!('${binding.name}' in state)`].concat(
|
||||
// TODO handle contextual bindings...
|
||||
this.conditions.map(c => `(${c})`)
|
||||
);
|
||||
|
||||
const { name: prop } = getObject(binding.value);
|
||||
|
||||
this.generator.bindings.push(deindent`
|
||||
if (${conditions.join('&&')}) {
|
||||
tmp = ${name}.data();
|
||||
if ('${prop}' in tmp) {
|
||||
state.${binding.name} = tmp.${prop};
|
||||
settled = false;
|
||||
}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
child(options: BlockOptions) {
|
||||
return new Block(Object.assign({}, this, options, { parent: this }));
|
||||
}
|
||||
|
||||
contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
|
||||
return this.generator.contextualise(this.contexts, this.indexes, expression, context, isEventHandler);
|
||||
}
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import Generator from '../Generator';
|
||||
import Stylesheet from '../../css/Stylesheet';
|
||||
import Block from './Block';
|
||||
import visit from './visit';
|
||||
import { removeNode, removeObjectKey } from '../../utils/removeNode';
|
||||
import getName from '../../utils/getName';
|
||||
import globalWhitelist from '../../utils/globalWhitelist';
|
||||
import { Parsed, Node, CompileOptions } from '../../interfaces';
|
||||
import { AppendTarget } from './interfaces';
|
||||
import { stringify } from '../../utils/stringify';
|
||||
|
||||
export class SsrGenerator extends Generator {
|
||||
bindings: string[];
|
||||
renderCode: string;
|
||||
appendTargets: AppendTarget[];
|
||||
|
||||
constructor(
|
||||
parsed: Parsed,
|
||||
source: string,
|
||||
name: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions
|
||||
) {
|
||||
super(parsed, source, name, stylesheet, options, false);
|
||||
this.bindings = [];
|
||||
this.renderCode = '';
|
||||
this.appendTargets = [];
|
||||
|
||||
this.stylesheet.warnOnUnusedSelectors(options.onwarn);
|
||||
}
|
||||
|
||||
append(code: string) {
|
||||
if (this.appendTargets.length) {
|
||||
const appendTarget = this.appendTargets[this.appendTargets.length - 1];
|
||||
const slotName = appendTarget.slotStack[appendTarget.slotStack.length - 1];
|
||||
appendTarget.slots[slotName] += code;
|
||||
} else {
|
||||
this.renderCode += code;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function ssr(
|
||||
parsed: Parsed,
|
||||
source: string,
|
||||
stylesheet: Stylesheet,
|
||||
options: CompileOptions
|
||||
) {
|
||||
const format = options.format || 'cjs';
|
||||
|
||||
const generator = new SsrGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options);
|
||||
|
||||
const { computations, name, templateProperties } = generator;
|
||||
|
||||
// create main render() function
|
||||
const mainBlock = new Block({
|
||||
generator,
|
||||
contexts: new Map(),
|
||||
indexes: new Map(),
|
||||
conditions: [],
|
||||
});
|
||||
|
||||
trim(parsed.html.children).forEach((node: Node) => {
|
||||
visit(generator, mainBlock, node);
|
||||
});
|
||||
|
||||
const { css, cssMap } = generator.customElement ?
|
||||
{ css: null, cssMap: null } :
|
||||
generator.stylesheet.render(options.filename, true);
|
||||
|
||||
// generate initial state object
|
||||
const expectedProperties = Array.from(generator.expectedProperties);
|
||||
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
|
||||
const storeProps = options.store || templateProperties.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
|
||||
|
||||
const initialState = [];
|
||||
if (globals.length > 0) {
|
||||
initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
|
||||
}
|
||||
|
||||
if (storeProps.length > 0) {
|
||||
const initialize = `_init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`
|
||||
if (options.store || templateProperties.store) {
|
||||
initialState.push(`options.store.${initialize}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (templateProperties.data) {
|
||||
initialState.push(`%data()`);
|
||||
} else if (globals.length === 0 && storeProps.length === 0) {
|
||||
initialState.push('{}');
|
||||
}
|
||||
|
||||
initialState.push('state');
|
||||
|
||||
// TODO concatenate CSS maps
|
||||
const result = deindent`
|
||||
${generator.javascript}
|
||||
|
||||
var ${name} = {};
|
||||
|
||||
${options.filename && `${name}.filename = ${stringify(options.filename)}`};
|
||||
|
||||
${name}.data = function() {
|
||||
return ${templateProperties.data ? `%data()` : `{}`};
|
||||
};
|
||||
|
||||
${name}.render = function(state, options = {}) {
|
||||
var components = new Set();
|
||||
|
||||
function addComponent(component) {
|
||||
components.add(component);
|
||||
}
|
||||
|
||||
var result = { head: '', addComponent };
|
||||
var html = ${name}._render(result, state, options);
|
||||
|
||||
var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\\n');
|
||||
|
||||
return {
|
||||
html,
|
||||
head: result.head,
|
||||
css: { code: cssCode, map: null },
|
||||
toString() {
|
||||
return html;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
${name}._render = function(__result, state, options) {
|
||||
${templateProperties.store && `options.store = %store();`}
|
||||
__result.addComponent(${name});
|
||||
|
||||
state = Object.assign(${initialState.join(', ')});
|
||||
|
||||
${computations.map(
|
||||
({ key, deps }) =>
|
||||
`state.${key} = %computed-${key}(${deps.map(dep => `state.${dep}`).join(', ')});`
|
||||
)}
|
||||
|
||||
${generator.bindings.length &&
|
||||
deindent`
|
||||
var settled = false;
|
||||
var tmp;
|
||||
|
||||
while (!settled) {
|
||||
settled = true;
|
||||
|
||||
${generator.bindings.join('\n\n')}
|
||||
}
|
||||
`}
|
||||
|
||||
return \`${generator.renderCode}\`;
|
||||
};
|
||||
|
||||
${name}.css = {
|
||||
code: ${css ? stringify(css) : `''`},
|
||||
map: ${cssMap ? stringify(cssMap.toString()) : 'null'}
|
||||
};
|
||||
|
||||
var warned = false;
|
||||
${name}.renderCss = function() {
|
||||
if (!warned) {
|
||||
console.error('Component.renderCss(...) is deprecated and will be removed in v2 — use Component.render(...).css instead');
|
||||
warned = true;
|
||||
}
|
||||
|
||||
var components = [];
|
||||
|
||||
${generator.stylesheet.hasStyles &&
|
||||
deindent`
|
||||
components.push({
|
||||
filename: ${name}.filename,
|
||||
css: ${name}.css && ${name}.css.code,
|
||||
map: ${name}.css && ${name}.css.map
|
||||
});
|
||||
`}
|
||||
|
||||
${templateProperties.components &&
|
||||
deindent`
|
||||
var seen = {};
|
||||
|
||||
function addComponent(component) {
|
||||
var result = component.renderCss();
|
||||
result.components.forEach(x => {
|
||||
if (seen[x.filename]) return;
|
||||
seen[x.filename] = true;
|
||||
components.push(x);
|
||||
});
|
||||
}
|
||||
|
||||
${templateProperties.components.value.properties.map((prop: Node) => {
|
||||
return `addComponent(%components-${getName(prop.key)});`;
|
||||
})}
|
||||
`}
|
||||
|
||||
return {
|
||||
css: components.map(x => x.css).join('\\n'),
|
||||
map: null,
|
||||
components
|
||||
};
|
||||
};
|
||||
|
||||
${templateProperties.preload && `${name}.preload = %preload;`}
|
||||
|
||||
${
|
||||
// TODO this is a bit hacky
|
||||
/__escape/.test(generator.renderCode) && deindent`
|
||||
var escaped = {
|
||||
'"': '"',
|
||||
"'": '&##39;',
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>'
|
||||
};
|
||||
|
||||
function __escape(html) {
|
||||
return String(html).replace(/["'&<>]/g, match => escaped[match]);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
${
|
||||
/__isPromise/.test(generator.renderCode) && deindent`
|
||||
function __isPromise(value) {
|
||||
return value && typeof value.then === 'function';
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
${
|
||||
/__missingComponent/.test(generator.renderCode) && deindent`
|
||||
var __missingComponent = {
|
||||
_render: () => ''
|
||||
};
|
||||
`
|
||||
}
|
||||
`.replace(/(@+|#+|%+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
|
||||
if (sigil === '@') return generator.alias(name);
|
||||
if (sigil === '%') return generator.templateVars.get(name);
|
||||
return sigil.slice(1) + name;
|
||||
});
|
||||
|
||||
return generator.generate(result, options, { name, format });
|
||||
}
|
||||
|
||||
function trim(nodes) {
|
||||
let start = 0;
|
||||
for (; start < nodes.length; start += 1) {
|
||||
const node = nodes[start];
|
||||
if (node.type !== 'Text') break;
|
||||
|
||||
node.data = node.data.replace(/^\s+/, '');
|
||||
if (node.data) break;
|
||||
}
|
||||
|
||||
let end = nodes.length;
|
||||
for (; end > start; end -= 1) {
|
||||
const node = nodes[end - 1];
|
||||
if (node.type !== 'Text') break;
|
||||
|
||||
node.data = node.data.replace(/\s+$/, '');
|
||||
if (node.data) break;
|
||||
}
|
||||
|
||||
return nodes.slice(start, end);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { SsrGenerator } from './index';
|
||||
import Block from './Block';
|
||||
import { Node } from '../../interfaces';
|
||||
|
||||
export type Visitor = (
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) => void;
|
||||
|
||||
export interface AppendTarget {
|
||||
slots: Record<string, string>;
|
||||
slotStack: string[]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import visitors from './visitors/index';
|
||||
import { SsrGenerator } from './index';
|
||||
import Block from './Block';
|
||||
import { Node } from '../../interfaces';
|
||||
|
||||
export default function visit(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
const visitor = visitors[node.type];
|
||||
visitor(generator, block, node);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitAwaitBlock(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression);
|
||||
const { dependencies, snippet } = node.metadata;
|
||||
|
||||
// TODO should this be the generator's job? It's duplicated between
|
||||
// here and the equivalent DOM compiler visitor
|
||||
const contexts = new Map(block.contexts);
|
||||
contexts.set(node.value, '__value');
|
||||
|
||||
const contextDependencies = new Map(block.contextDependencies);
|
||||
contextDependencies.set(node.value, dependencies);
|
||||
|
||||
const childBlock = block.child({
|
||||
contextDependencies,
|
||||
contexts
|
||||
});
|
||||
|
||||
generator.append('${(function(__value) { if(__isPromise(__value)) return `');
|
||||
|
||||
node.pending.children.forEach((child: Node) => {
|
||||
visit(generator, childBlock, child);
|
||||
});
|
||||
|
||||
generator.append('`; return `');
|
||||
|
||||
node.then.children.forEach((child: Node) => {
|
||||
visit(generator, childBlock, child);
|
||||
});
|
||||
|
||||
generator.append(`\`;}(${snippet})) }`);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export default function visitComment() {
|
||||
// do nothing
|
||||
}
|
||||
@ -1,121 +0,0 @@
|
||||
import flattenReference from '../../../utils/flattenReference';
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { AppendTarget } from '../interfaces';
|
||||
import { Node } from '../../../interfaces';
|
||||
import getObject from '../../../utils/getObject';
|
||||
import getTailSnippet from '../../../utils/getTailSnippet';
|
||||
import { stringify } from '../../../utils/stringify';
|
||||
|
||||
export default function visitComponent(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
function stringifyAttribute(chunk: Node) {
|
||||
if (chunk.type === 'Text') return chunk.data;
|
||||
if (chunk.type === 'MustacheTag') {
|
||||
block.contextualise(chunk.expression);
|
||||
const { snippet } = chunk.metadata;
|
||||
return '${__escape( ' + snippet + ')}';
|
||||
}
|
||||
}
|
||||
|
||||
const attributes: Node[] = [];
|
||||
const bindings: Node[] = [];
|
||||
|
||||
node.attributes.forEach((attribute: Node) => {
|
||||
if (attribute.type === 'Attribute') {
|
||||
attributes.push(attribute);
|
||||
} else if (attribute.type === 'Binding') {
|
||||
bindings.push(attribute);
|
||||
}
|
||||
});
|
||||
|
||||
const props = attributes
|
||||
.map(attribute => {
|
||||
let value;
|
||||
|
||||
if (attribute.value === true) {
|
||||
value = `true`;
|
||||
} else if (attribute.value.length === 0) {
|
||||
value = `''`;
|
||||
} else if (attribute.value.length === 1) {
|
||||
const chunk = attribute.value[0];
|
||||
if (chunk.type === 'Text') {
|
||||
value = isNaN(chunk.data) ? stringify(chunk.data) : chunk.data;
|
||||
} else {
|
||||
block.contextualise(chunk.expression);
|
||||
const { snippet } = chunk.metadata;
|
||||
value = snippet;
|
||||
}
|
||||
} else {
|
||||
value = '`' + attribute.value.map(stringifyAttribute).join('') + '`';
|
||||
}
|
||||
|
||||
return `${attribute.name}: ${value}`;
|
||||
})
|
||||
.concat(
|
||||
bindings.map(binding => {
|
||||
const { name } = getObject(binding.value);
|
||||
const tail = binding.value.type === 'MemberExpression'
|
||||
? getTailSnippet(binding.value)
|
||||
: '';
|
||||
|
||||
const keypath = block.contexts.has(name)
|
||||
? `${name}${tail}`
|
||||
: `state.${name}${tail}`;
|
||||
return `${binding.name}: ${keypath}`;
|
||||
})
|
||||
)
|
||||
.join(', ');
|
||||
|
||||
const isDynamicComponent = node.name === ':Component';
|
||||
if (isDynamicComponent) block.contextualise(node.expression);
|
||||
|
||||
const expression = (
|
||||
node.name === ':Self' ? generator.name :
|
||||
isDynamicComponent ? `((${node.metadata.snippet}) || __missingComponent)` :
|
||||
`%components-${node.name}`
|
||||
);
|
||||
|
||||
bindings.forEach(binding => {
|
||||
block.addBinding(binding, expression);
|
||||
});
|
||||
|
||||
let open = `\${${expression}._render(__result, {${props}}`;
|
||||
|
||||
const options = [];
|
||||
if (generator.options.store) {
|
||||
options.push(`store: options.store`);
|
||||
}
|
||||
|
||||
if (node.children.length) {
|
||||
const appendTarget: AppendTarget = {
|
||||
slots: { default: '' },
|
||||
slotStack: ['default']
|
||||
};
|
||||
|
||||
generator.appendTargets.push(appendTarget);
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
|
||||
const slotted = Object.keys(appendTarget.slots)
|
||||
.map(name => `${name}: () => \`${appendTarget.slots[name]}\``)
|
||||
.join(', ');
|
||||
|
||||
options.push(`slotted: { ${slotted} }`);
|
||||
|
||||
generator.appendTargets.pop();
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
open += `, { ${options.join(', ')} }`;
|
||||
}
|
||||
|
||||
generator.append(open);
|
||||
generator.append(')}');
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitEachBlock(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression);
|
||||
const { dependencies, snippet } = node.metadata;
|
||||
|
||||
const open = `\${ ${node.else ? `${snippet}.length ? ` : ''}${snippet}.map(${node.index ? `(${node.context}, ${node.index})` : node.context} => \``;
|
||||
generator.append(open);
|
||||
|
||||
// TODO should this be the generator's job? It's duplicated between
|
||||
// here and the equivalent DOM compiler visitor
|
||||
const contexts = new Map(block.contexts);
|
||||
contexts.set(node.context, node.context);
|
||||
|
||||
const indexes = new Map(block.indexes);
|
||||
if (node.index) indexes.set(node.index, node.context);
|
||||
|
||||
const contextDependencies = new Map(block.contextDependencies);
|
||||
contextDependencies.set(node.context, dependencies);
|
||||
|
||||
if (node.destructuredContexts) {
|
||||
for (let i = 0; i < node.destructuredContexts.length; i += 1) {
|
||||
contexts.set(node.destructuredContexts[i], `${node.context}[${i}]`);
|
||||
contextDependencies.set(node.destructuredContexts[i], dependencies);
|
||||
}
|
||||
}
|
||||
|
||||
const childBlock = block.child({
|
||||
contexts,
|
||||
indexes,
|
||||
contextDependencies,
|
||||
});
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, childBlock, child);
|
||||
});
|
||||
|
||||
const close = `\`).join("")`;
|
||||
generator.append(close);
|
||||
|
||||
if (node.else) {
|
||||
generator.append(` : \``);
|
||||
node.else.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
generator.append(`\``);
|
||||
}
|
||||
|
||||
generator.append('}');
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import visitComponent from './Component';
|
||||
import visitSlot from './Slot';
|
||||
import isVoidElementName from '../../../utils/isVoidElementName';
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Element from '../../nodes/Element';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
import stringifyAttributeValue from './shared/stringifyAttributeValue';
|
||||
import { escape } from '../../../utils/stringify';
|
||||
|
||||
// source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
|
||||
const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' '));
|
||||
|
||||
export default function visitElement(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Element
|
||||
) {
|
||||
if (node.name === 'slot') {
|
||||
visitSlot(generator, block, node);
|
||||
return;
|
||||
}
|
||||
|
||||
let openingTag = `<${node.name}`;
|
||||
let textareaContents; // awkward special case
|
||||
|
||||
const slot = node.getStaticAttributeValue('slot');
|
||||
if (slot && node.hasAncestor('Component')) {
|
||||
const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot');
|
||||
const slotName = slot.value[0].data;
|
||||
const appendTarget = generator.appendTargets[generator.appendTargets.length - 1];
|
||||
appendTarget.slotStack.push(slotName);
|
||||
appendTarget.slots[slotName] = '';
|
||||
}
|
||||
|
||||
node.attributes.forEach((attribute: Node) => {
|
||||
if (attribute.type !== 'Attribute') return;
|
||||
|
||||
if (attribute.name === 'value' && node.name === 'textarea') {
|
||||
textareaContents = stringifyAttributeValue(block, attribute.value);
|
||||
} else if (attribute.value === true) {
|
||||
openingTag += ` ${attribute.name}`;
|
||||
} else if (
|
||||
booleanAttributes.has(attribute.name) &&
|
||||
attribute.value.length === 1 &&
|
||||
attribute.value[0].type !== 'Text'
|
||||
) {
|
||||
// a boolean attribute with one non-Text chunk
|
||||
block.contextualise(attribute.value[0].expression);
|
||||
openingTag += '${' + attribute.value[0].metadata.snippet + ' ? " ' + attribute.name + '" : "" }';
|
||||
} else {
|
||||
openingTag += ` ${attribute.name}="${stringifyAttributeValue(block, attribute.value)}"`;
|
||||
}
|
||||
});
|
||||
|
||||
if (node._needsCssAttribute) {
|
||||
openingTag += ` ${generator.stylesheet.id}`;
|
||||
|
||||
if (node._cssRefAttribute) {
|
||||
openingTag += ` svelte-ref-${node._cssRefAttribute}`;
|
||||
}
|
||||
}
|
||||
|
||||
openingTag += '>';
|
||||
|
||||
generator.append(openingTag);
|
||||
|
||||
if (node.name === 'textarea' && textareaContents !== undefined) {
|
||||
generator.append(textareaContents);
|
||||
} else if (node.name === 'script' || node.name === 'style') {
|
||||
generator.append(escape(node.data));
|
||||
} else {
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
}
|
||||
|
||||
if (!isVoidElementName(node.name)) {
|
||||
generator.append(`</${node.name}>`);
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
import stringifyAttributeValue from './shared/stringifyAttributeValue';
|
||||
import visit from '../visit';
|
||||
|
||||
export default function visitDocument(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
generator.append('${(__result.head += `');
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
|
||||
generator.append('`, "")}');
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitIfBlock(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression);
|
||||
const { snippet } = node.metadata;
|
||||
|
||||
generator.append('${ ' + snippet + ' ? `');
|
||||
|
||||
const childBlock = block.child({
|
||||
conditions: block.conditions.concat(snippet),
|
||||
});
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, childBlock, child);
|
||||
});
|
||||
|
||||
generator.append('` : `');
|
||||
|
||||
if (node.else) {
|
||||
node.else.children.forEach((child: Node) => {
|
||||
visit(generator, childBlock, child);
|
||||
});
|
||||
}
|
||||
|
||||
generator.append('` }');
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitMustacheTag(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression);
|
||||
const { snippet } = node.metadata;
|
||||
|
||||
generator.append('${__escape(' + snippet + ')}');
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitRawMustacheTag(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
block.contextualise(node.expression);
|
||||
const { snippet } = node.metadata;
|
||||
|
||||
generator.append('${' + snippet + '}');
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import visit from '../visit';
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitSlot(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
const name = node.attributes.find((attribute: Node) => attribute.name);
|
||||
const slotName = name && name.value[0].data || 'default';
|
||||
|
||||
generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : \``);
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
|
||||
generator.append(`\`}`);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { escape, escapeHTML } from '../../../utils/stringify';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitText(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
generator.append(escapeHTML(escape(node.data).replace(/(\${|`|\\)/g, '\\$1')));
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { escape } from '../../../utils/stringify';
|
||||
import visit from '../visit';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function visitTitle(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
generator.append(`<title>`);
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
|
||||
generator.append(`</title>`);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export default function visitWindow() {
|
||||
// noop
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import AwaitBlock from './AwaitBlock';
|
||||
import Comment from './Comment';
|
||||
import Component from './Component';
|
||||
import EachBlock from './EachBlock';
|
||||
import Element from './Element';
|
||||
import Head from './Head';
|
||||
import IfBlock from './IfBlock';
|
||||
import MustacheTag from './MustacheTag';
|
||||
import RawMustacheTag from './RawMustacheTag';
|
||||
import Slot from './Slot';
|
||||
import Text from './Text';
|
||||
import Title from './Title';
|
||||
import Window from './Window';
|
||||
|
||||
export default {
|
||||
AwaitBlock,
|
||||
Comment,
|
||||
Component,
|
||||
EachBlock,
|
||||
Element,
|
||||
Head,
|
||||
IfBlock,
|
||||
MustacheTag,
|
||||
RawMustacheTag,
|
||||
Slot,
|
||||
Text,
|
||||
Title,
|
||||
Window
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
import Block from '../../Block';
|
||||
import { escape } from '../../../../utils/stringify';
|
||||
import { Node } from '../../../../interfaces';
|
||||
|
||||
export default function stringifyAttributeValue(block: Block, chunks: Node[]) {
|
||||
return chunks
|
||||
.map((chunk: Node) => {
|
||||
if (chunk.type === 'Text') {
|
||||
return escape(chunk.data).replace(/"/g, '"');
|
||||
}
|
||||
|
||||
block.contextualise(chunk.expression);
|
||||
const { snippet } = chunk.metadata;
|
||||
return '${' + snippet + '}';
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
import { Parser } from '../index';
|
||||
|
||||
type Identifier = {
|
||||
start: number;
|
||||
end: number;
|
||||
type: 'Identifier';
|
||||
name: string;
|
||||
};
|
||||
|
||||
type Property = {
|
||||
start: number;
|
||||
end: number;
|
||||
type: 'Property';
|
||||
key: Identifier;
|
||||
value: Context;
|
||||
};
|
||||
|
||||
type Context = {
|
||||
start: number;
|
||||
end: number;
|
||||
type: 'Identifier' | 'ArrayPattern' | 'ObjectPattern';
|
||||
name?: string;
|
||||
elements?: Context[];
|
||||
properties?: Property[];
|
||||
}
|
||||
|
||||
function errorOnAssignmentPattern(parser: Parser) {
|
||||
if (parser.eat('=')) {
|
||||
parser.error({
|
||||
code: 'invalid-assignment-pattern',
|
||||
message: 'Assignment patterns are not supported'
|
||||
}, parser.index - 1);
|
||||
}
|
||||
}
|
||||
|
||||
export default function readContext(parser: Parser) {
|
||||
const context: Context = {
|
||||
start: parser.index,
|
||||
end: null,
|
||||
type: null
|
||||
};
|
||||
|
||||
if (parser.eat('[')) {
|
||||
context.type = 'ArrayPattern';
|
||||
context.elements = [];
|
||||
|
||||
do {
|
||||
parser.allowWhitespace();
|
||||
|
||||
if (parser.template[parser.index] === ',') {
|
||||
context.elements.push(null);
|
||||
} else {
|
||||
context.elements.push(readContext(parser));
|
||||
parser.allowWhitespace();
|
||||
}
|
||||
} while (parser.eat(','));
|
||||
|
||||
errorOnAssignmentPattern(parser);
|
||||
parser.eat(']', true);
|
||||
}
|
||||
|
||||
else if (parser.eat('{')) {
|
||||
context.type = 'ObjectPattern';
|
||||
context.properties = [];
|
||||
|
||||
do {
|
||||
parser.allowWhitespace();
|
||||
|
||||
const start = parser.index;
|
||||
const name = parser.readIdentifier();
|
||||
const key: Identifier = {
|
||||
start,
|
||||
end: parser.index,
|
||||
type: 'Identifier',
|
||||
name
|
||||
};
|
||||
parser.allowWhitespace();
|
||||
|
||||
const value = parser.eat(':')
|
||||
? (parser.allowWhitespace(), readContext(parser))
|
||||
: key;
|
||||
|
||||
const property: Property = {
|
||||
start,
|
||||
end: value.end,
|
||||
type: 'Property',
|
||||
key,
|
||||
value
|
||||
};
|
||||
|
||||
context.properties.push(property);
|
||||
|
||||
parser.allowWhitespace();
|
||||
} while (parser.eat(','));
|
||||
|
||||
errorOnAssignmentPattern(parser);
|
||||
parser.eat('}', true);
|
||||
}
|
||||
|
||||
else {
|
||||
const name = parser.readIdentifier();
|
||||
if (name) {
|
||||
context.type = 'Identifier';
|
||||
context.end = parser.index;
|
||||
context.name = name;
|
||||
}
|
||||
|
||||
else {
|
||||
parser.error({
|
||||
code: 'invalid-context',
|
||||
message: 'Expected a name, array pattern or object pattern'
|
||||
});
|
||||
}
|
||||
|
||||
errorOnAssignmentPattern(parser);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
import { assign, isPromise } from './utils.js';
|
||||
|
||||
export function handlePromise(promise, info) {
|
||||
var token = info.token = {};
|
||||
|
||||
function update(type, index, key, value) {
|
||||
if (info.token !== token) return;
|
||||
|
||||
info.resolved = key && { [key]: value };
|
||||
|
||||
const child_ctx = assign(assign({}, info.ctx), info.resolved);
|
||||
const block = type && (info.current = type)(info.component, child_ctx);
|
||||
|
||||
if (info.block) {
|
||||
if (info.blocks) {
|
||||
info.blocks.forEach((block, i) => {
|
||||
if (i !== index && block) block.o(() => {
|
||||
block.d(1);
|
||||
info.blocks[i] = null;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
info.block.d(1);
|
||||
}
|
||||
|
||||
block.c();
|
||||
block[block.i ? 'i' : 'm'](info.mount(), info.anchor);
|
||||
|
||||
info.component.root.set({}); // flush any handlers that were created
|
||||
}
|
||||
|
||||
info.block = block;
|
||||
if (info.blocks) info.blocks[index] = block;
|
||||
}
|
||||
|
||||
if (isPromise(promise)) {
|
||||
promise.then(value => {
|
||||
update(info.then, 1, info.value, value);
|
||||
}, error => {
|
||||
update(info.catch, 2, info.error, error);
|
||||
});
|
||||
|
||||
// if we previously had a then/catch block, destroy it
|
||||
if (info.current !== info.pending) {
|
||||
update(info.pending, 0);
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if (info.current !== info.then) {
|
||||
update(info.then, 1, info.value, promise);
|
||||
return true;
|
||||
}
|
||||
|
||||
info.resolved = { [info.value]: promise };
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
export function destroyBlock(block, lookup) {
|
||||
block.d(1);
|
||||
lookup[block.key] = null;
|
||||
}
|
||||
|
||||
export function outroAndDestroyBlock(block, lookup) {
|
||||
block.o(function() {
|
||||
destroyBlock(block, lookup);
|
||||
});
|
||||
}
|
||||
|
||||
export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, has_outro, create_each_block, intro_method, next, get_context) {
|
||||
var o = old_blocks.length;
|
||||
var n = list.length;
|
||||
|
||||
var i = o;
|
||||
var old_indexes = {};
|
||||
while (i--) old_indexes[old_blocks[i].key] = i;
|
||||
|
||||
var new_blocks = [];
|
||||
var new_lookup = {};
|
||||
var deltas = {};
|
||||
|
||||
var i = n;
|
||||
while (i--) {
|
||||
var child_ctx = get_context(ctx, list, i);
|
||||
var key = get_key(child_ctx);
|
||||
var block = lookup[key];
|
||||
|
||||
if (!block) {
|
||||
block = create_each_block(component, key, child_ctx);
|
||||
block.c();
|
||||
} else if (dynamic) {
|
||||
block.p(changed, child_ctx);
|
||||
}
|
||||
|
||||
new_blocks[i] = new_lookup[key] = block;
|
||||
|
||||
if (key in old_indexes) deltas[key] = Math.abs(i - old_indexes[key]);
|
||||
}
|
||||
|
||||
var will_move = {};
|
||||
var did_move = {};
|
||||
|
||||
var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
|
||||
|
||||
function insert(block) {
|
||||
block[intro_method](node, next);
|
||||
lookup[block.key] = block;
|
||||
next = block.first;
|
||||
n--;
|
||||
}
|
||||
|
||||
while (o && n) {
|
||||
var new_block = new_blocks[n - 1];
|
||||
var old_block = old_blocks[o - 1];
|
||||
var new_key = new_block.key;
|
||||
var old_key = old_block.key;
|
||||
|
||||
if (new_block === old_block) {
|
||||
// do nothing
|
||||
next = new_block.first;
|
||||
o--;
|
||||
n--;
|
||||
}
|
||||
|
||||
else if (!new_lookup[old_key]) {
|
||||
// remove old block
|
||||
destroy(old_block, lookup);
|
||||
o--;
|
||||
}
|
||||
|
||||
else if (!lookup[new_key] || will_move[new_key]) {
|
||||
insert(new_block);
|
||||
}
|
||||
|
||||
else if (did_move[old_key]) {
|
||||
o--;
|
||||
|
||||
} else if (deltas[new_key] > deltas[old_key]) {
|
||||
did_move[new_key] = true;
|
||||
insert(new_block);
|
||||
|
||||
} else {
|
||||
will_move[old_key] = true;
|
||||
o--;
|
||||
}
|
||||
}
|
||||
|
||||
while (o--) {
|
||||
var old_block = old_blocks[o];
|
||||
if (!new_lookup[old_block.key]) destroy(old_block, lookup);
|
||||
}
|
||||
|
||||
while (n) insert(new_blocks[n - 1]);
|
||||
|
||||
return new_blocks;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
export function getSpreadUpdate(levels, updates) {
|
||||
var update = {};
|
||||
|
||||
var to_null_out = {};
|
||||
var accounted_for = {};
|
||||
|
||||
var i = levels.length;
|
||||
while (i--) {
|
||||
var o = levels[i];
|
||||
var n = updates[i];
|
||||
|
||||
if (n) {
|
||||
for (var key in o) {
|
||||
if (!(key in n)) to_null_out[key] = 1;
|
||||
}
|
||||
|
||||
for (var key in n) {
|
||||
if (!accounted_for[key]) {
|
||||
update[key] = n[key];
|
||||
accounted_for[key] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
levels[i] = n;
|
||||
} else {
|
||||
for (var key in o) {
|
||||
accounted_for[key] = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var key in to_null_out) {
|
||||
if (!(key in update)) update[key] = undefined;
|
||||
}
|
||||
|
||||
return update;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue