diff --git a/package-lock.json b/package-lock.json
index 51ee2c94a1..059554afd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "svelte",
- "version": "3.0.0-beta.16",
+ "version": "3.0.0-beta.20",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -139,7 +139,7 @@
},
"ansi-escapes": {
"version": "3.1.0",
- "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
"integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
"dev": true
},
@@ -199,7 +199,7 @@
},
"array-equal": {
"version": "1.0.0",
- "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
"integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
"dev": true
},
@@ -627,7 +627,7 @@
},
"commander": {
"version": "2.15.1",
- "resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
"integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
"dev": true
},
@@ -878,7 +878,7 @@
"dependencies": {
"domelementtype": {
"version": "1.1.3",
- "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
"dev": true
}
@@ -1131,7 +1131,7 @@
},
"doctrine": {
"version": "1.5.0",
- "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
"integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
"dev": true,
"requires": {
@@ -1826,7 +1826,7 @@
},
"is-builtin-module": {
"version": "1.0.0",
- "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
"integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
"dev": true,
"requires": {
@@ -2112,7 +2112,7 @@
},
"load-json-file": {
"version": "2.0.0",
- "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
"integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
"dev": true,
"requires": {
@@ -2271,7 +2271,7 @@
},
"minimist": {
"version": "0.0.8",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
@@ -2298,7 +2298,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@@ -2608,7 +2608,7 @@
},
"os-tmpdir": {
"version": "1.0.2",
- "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true
},
@@ -2692,7 +2692,7 @@
},
"path-is-absolute": {
"version": "1.0.1",
- "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
@@ -2737,7 +2737,7 @@
},
"pify": {
"version": "2.3.0",
- "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
},
@@ -3440,7 +3440,7 @@
},
"safe-regex": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
"dev": true,
"requires": {
@@ -4024,7 +4024,7 @@
},
"through": {
"version": "2.3.8",
- "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+ "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
diff --git a/package.json b/package.json
index 2f272a882d..72e3785315 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte",
- "version": "3.0.0-beta.16",
+ "version": "3.0.0-beta.20",
"description": "The magical disappearing UI framework",
"module": "index.mjs",
"main": "index",
diff --git a/site/content/examples/00-introduction/00-hello-world/meta.json b/site/content/examples/00-introduction/00-hello-world/meta.json
index 2f47184710..6cf02c2ed1 100644
--- a/site/content/examples/00-introduction/00-hello-world/meta.json
+++ b/site/content/examples/00-introduction/00-hello-world/meta.json
@@ -1,3 +1,3 @@
{
- "title": "Adding data"
+ "title": "Hello world"
}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
index 2cb0fd1eb7..9918cf40e8 100644
--- a/site/content/examples/08-motion/01-spring/App.svelte
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -10,7 +10,7 @@
diff --git a/site/content/examples/11-svg/05-svg-transitions/App.svelte b/site/content/examples/11-svg/05-svg-transitions/App.svelte
index 485bbf2558..6059b3645f 100644
--- a/site/content/examples/11-svg/05-svg-transitions/App.svelte
+++ b/site/content/examples/11-svg/05-svg-transitions/App.svelte
@@ -1,7 +1,7 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/components/Lazy.svelte b/site/src/components/Lazy.svelte
new file mode 100644
index 0000000000..ef81d68f00
--- /dev/null
+++ b/site/src/components/Lazy.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/src/components/Repl/Bundler.js b/site/src/components/Repl/Bundler.js
new file mode 100644
index 0000000000..ddde546e7f
--- /dev/null
+++ b/site/src/components/Repl/Bundler.js
@@ -0,0 +1,44 @@
+const workers = new Map();
+
+let uid = 1;
+
+export default class Bundler {
+ constructor(version) {
+ if (!workers.has(version)) {
+ const worker = new Worker('/workers/bundler.js');
+ worker.postMessage({ type: 'init', version });
+ workers.set(version, worker);
+ }
+
+ this.worker = workers.get(version);
+
+ this.handlers = new Map();
+
+ this.worker.addEventListener('message', event => {
+ const handler = this.handlers.get(event.data.id);
+
+ if (handler) { // if no handler, was meant for a different REPL
+ handler(event.data);
+ this.handlers.delete(event.data.id);
+ }
+ });
+ }
+
+ bundle(components) {
+ return new Promise(fulfil => {
+ const id = uid++;
+
+ this.handlers.set(id, fulfil);
+
+ this.worker.postMessage({
+ id,
+ type: 'bundle',
+ components
+ });
+ });
+ }
+
+ destroy() {
+ this.worker.terminate();
+ }
+}
\ No newline at end of file
diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
index e9519e516e..a1a92fe344 100644
--- a/site/src/components/Repl/CodeMirror.svelte
+++ b/site/src/components/Repl/CodeMirror.svelte
@@ -33,9 +33,9 @@
// than making this state-driven through props,
// because it's difficult to update an editor
// without resetting scroll otherwise
- export function set(new_code, new_mode) {
+ export async function set(new_code, new_mode) {
if (new_mode !== mode) {
- createEditor(mode = new_mode);
+ await createEditor(mode = new_mode);
}
code = new_code;
@@ -121,12 +121,13 @@
onMount(() => {
if (_CodeMirror) {
CodeMirror = _CodeMirror;
- createEditor(mode || 'svelte');
- editor.setValue(code || '');
+ createEditor(mode || 'svelte').then(() => {
+ editor.setValue(code || '');
+ });
} else {
- codemirror_promise.then(mod => {
+ codemirror_promise.then(async mod => {
CodeMirror = mod.default;
- createEditor(mode || 'svelte');
+ await createEditor(mode || 'svelte');
editor.setValue(code || '');
});
}
@@ -137,12 +138,10 @@
}
});
- function createEditor(mode) {
+ async function createEditor(mode) {
if (destroyed || !CodeMirror) return;
- if (editor) {
- editor.toTextArea();
- }
+ if (editor) editor.toTextArea();
const opts = {
lineNumbers,
@@ -162,6 +161,12 @@
'Shift-Tab': tab
};
+ // Creating a text editor is a lot of work, so we yield
+ // the main thread for a moment. This helps reduce jank
+ await sleep(50);
+
+ if (destroyed) return;
+
editor = CodeMirror.fromTextArea(refs.editor, opts);
editor.on('change', instance => {
@@ -171,8 +176,13 @@
}
});
+ await sleep(50);
editor.refresh();
}
+
+ function sleep(ms) {
+ return new Promise(fulfil => setTimeout(fulfil, ms));
+ }
-
@@ -160,7 +149,7 @@
{/if}
diff --git a/site/src/routes/repl/embed.svelte b/site/src/components/Repl/ReplWidget.svelte
similarity index 79%
rename from site/src/routes/repl/embed.svelte
rename to site/src/components/Repl/ReplWidget.svelte
index 9cc680afb0..d8f3509dc5 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/components/Repl/ReplWidget.svelte
@@ -1,19 +1,12 @@
-
-
-
- {name} • Svelte REPL
-
-
{#if process.browser}
-
+
{/if}
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index aa9a9fed93..40d4f90be4 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -7,10 +7,12 @@
import ModuleEditor from './Input/ModuleEditor.svelte';
import Output from './Output/index.svelte';
import InputOutputToggle from './InputOutputToggle.svelte';
+ import Bundler from './Bundler.js';
export let version = 'beta'; // TODO change this to latest when the time comes
export let embedded = false;
export let orientation = 'columns';
+ export let relaxed = false;
export function toJSON() {
// TODO there's a bug here — Svelte hoists this function because
@@ -30,7 +32,9 @@
selected.set(data.components[0]);
module_editor.set($selected.source, $selected.type);
- output.set($selected);
+ output.set($selected, $compile_options);
+
+ rebundle();
}
export function update(data) {
@@ -43,10 +47,10 @@
if (matched_component) {
module_editor.update(matched_component.source);
- output.update(matched_component);
+ output.update(matched_component, $compile_options);
} else {
module_editor.set(matched_component.source, matched_component.type);
- output.set(matched_component);
+ output.set(matched_component, $compile_options);
}
}
@@ -56,13 +60,33 @@
const selected = writable(null);
const bundle = writable(null);
+ const compile_options = writable({
+ generate: 'dom',
+ dev: false,
+ css: false,
+ hydratable: false,
+ customElement: false,
+ immutable: false,
+ legacy: false
+ });
+
let module_editor;
let output;
+ let current_token;
+ async function rebundle() {
+ const token = current_token = {};
+ const result = await bundler.bundle($components);
+ if (result && token === current_token) bundle.set(result);
+ }
+
setContext('REPL', {
components,
selected,
bundle,
+ compile_options,
+
+ rebundle,
navigate: item => {
const match = /^(.+)\.(\w+)$/.exec(item.filename);
@@ -70,9 +94,7 @@
const [, name, type] = match;
const component = $components.find(c => c.name === name && c.type === type);
- selected.set(component);
-
- output.set($selected);
+ handle_select(component);
// TODO select the line/column in question
},
@@ -91,10 +113,9 @@
components.update(c => c);
// recompile selected component
- output.update($selected);
+ output.update($selected, $compile_options);
- // regenerate bundle (TODO do this in a separate worker?)
- workers.bundler.postMessage({ type: 'bundle', components: $components });
+ rebundle();
dispatch('change', {
components: $components
@@ -117,7 +138,7 @@
function handle_select(component) {
selected.set(component);
module_editor.set(component.source, component.type);
- output.set($selected);
+ output.set($selected, $compile_options);
}
let workers;
@@ -129,29 +150,10 @@
let width = typeof window !== 'undefined' ? window.innerWidth : 300;
let show_output = false;
- onMount(async () => {
- workers = {
- bundler: new Worker('/workers/bundler.js')
- };
-
- workers.bundler.postMessage({ type: 'init', version });
- workers.bundler.onmessage = event => {
- bundle.set(event.data);
- };
-
- return () => {
- workers.bundler.terminate();
- };
- });
-
- $: if ($bundle && $bundle.error && $selected) {
- sourceErrorLoc = $bundle.error.filename === `${$selected.name}.${$selected.type}`
- ? $bundle.error.start
- : null;
- }
+ const bundler = process.browser && new Bundler(version);
- $: if (workers && $components) {
- workers.bundler.postMessage({ type: 'bundle', components: $components });
+ $: if (output && $selected) {
+ output.update($selected, $compile_options);
}
@@ -221,7 +223,7 @@
diff --git a/site/src/routes/repl/_utils/process_example.js b/site/src/components/Repl/process_example.js
similarity index 100%
rename from site/src/routes/repl/_utils/process_example.js
rename to site/src/components/Repl/process_example.js
diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte
index d1e4db6d31..d02ff58cec 100644
--- a/site/src/components/TopNav.svelte
+++ b/site/src/components/TopNav.svelte
@@ -52,7 +52,7 @@
background-color: white;
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
font-family: var(--font);
- z-index: 10;
+ z-index: 100;
user-select: none;
transform: translate(0,calc(-100% - 1rem));
transition: transform 0.2s;
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 386c27ac39..a72065a7c2 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -4,7 +4,6 @@
import Nav from '../components/TopNav.svelte';
export let segment;
- export let path;
@@ -20,7 +19,8 @@
main {
position: relative;
margin: 0 auto;
- padding: var(--nav-h) var(--side-nav) 0 var(--side-nav);
+ /* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
+ padding: var(--nav-h) 0 0 0;
overflow-x: hidden;
}
\ No newline at end of file
diff --git a/site/src/routes/blog/index.svelte b/site/src/routes/blog/index.svelte
index a8bffc9b5d..3a53c0bf8d 100644
--- a/site/src/routes/blog/index.svelte
+++ b/site/src/routes/blog/index.svelte
@@ -30,7 +30,7 @@
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
min-height: calc(100vh - var(--nav-h));
- padding: var(--top-offset) 0;
+ padding: var(--top-offset) var(--side-nav) 0 var(--side-nav);
max-width: var(--main-width);
margin: 0 auto;
}
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index fa6ee35025..68cb9e3110 100644
--- a/site/src/routes/examples/index.svelte
+++ b/site/src/routes/examples/index.svelte
@@ -15,6 +15,7 @@
\`;`}
+ ${css.code && `this.shadowRoot.innerHTML = \`\`;`}
- @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal});
+ @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
${dev_props_check}
@@ -466,12 +458,12 @@ export default function dom(
} else {
const superclass = options.dev ? 'SvelteComponentDev' : 'SvelteComponent';
- builder.addBlock(deindent`
+ builder.add_block(deindent`
class ${name} extends @${superclass} {
constructor(options) {
super(${options.dev && `options`});
${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
- @init(this, options, ${definition}, create_fragment, ${not_equal});
+ @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
${dev_props_check}
}
diff --git a/src/compile/render-dom/wrappers/AwaitBlock.ts b/src/compile/render-dom/wrappers/AwaitBlock.ts
index e896510fa8..c7af29a073 100644
--- a/src/compile/render-dom/wrappers/AwaitBlock.ts
+++ b/src/compile/render-dom/wrappers/AwaitBlock.ts
@@ -2,8 +2,8 @@ import Wrapper from './shared/Wrapper';
import Renderer from '../Renderer';
import Block from '../Block';
import AwaitBlock from '../../nodes/AwaitBlock';
-import createDebuggingComment from '../../../utils/createDebuggingComment';
-import deindent from '../../../utils/deindent';
+import create_debugging_comment from './shared/create_debugging_comment';
+import deindent from '../../utils/deindent';
import FragmentWrapper from './Fragment';
import PendingBlock from '../../nodes/PendingBlock';
import ThenBlock from '../../nodes/ThenBlock';
@@ -13,7 +13,7 @@ class AwaitBlockBranch extends Wrapper {
node: PendingBlock | ThenBlock | CatchBlock;
block: Block;
fragment: FragmentWrapper;
- isDynamic: boolean;
+ is_dynamic: boolean;
var = null;
@@ -23,14 +23,14 @@ class AwaitBlockBranch extends Wrapper {
block: Block,
parent: Wrapper,
node: AwaitBlock,
- stripWhitespace: boolean,
- nextSibling: Wrapper
+ strip_whitespace: boolean,
+ next_sibling: Wrapper
) {
super(renderer, block, parent, node);
this.block = block.child({
- comment: createDebuggingComment(node, this.renderer.component),
- name: this.renderer.component.getUniqueName(`create_${status}_block`)
+ comment: create_debugging_comment(node, this.renderer.component),
+ name: this.renderer.component.get_unique_name(`create_${status}_block`)
});
this.fragment = new FragmentWrapper(
@@ -38,11 +38,11 @@ class AwaitBlockBranch extends Wrapper {
this.block,
this.node.children,
parent,
- stripWhitespace,
- nextSibling
+ strip_whitespace,
+ next_sibling
);
- this.isDynamic = this.block.dependencies.size > 0;
+ this.is_dynamic = this.block.dependencies.size > 0;
}
}
@@ -60,18 +60,18 @@ export default class AwaitBlockWrapper extends Wrapper {
block: Block,
parent: Wrapper,
node: AwaitBlock,
- stripWhitespace: boolean,
- nextSibling: Wrapper
+ strip_whitespace: boolean,
+ next_sibling: Wrapper
) {
super(renderer, block, parent, node);
- this.cannotUseInnerHTML();
+ this.cannot_use_innerhtml();
- block.addDependencies(this.node.expression.dependencies);
+ block.add_dependencies(this.node.expression.dependencies);
- let isDynamic = false;
- let hasIntros = false;
- let hasOutros = false;
+ let is_dynamic = false;
+ let has_intros = false;
+ let has_outros = false;
['pending', 'then', 'catch'].forEach(status => {
const child = this.node[status];
@@ -82,59 +82,59 @@ export default class AwaitBlockWrapper extends Wrapper {
block,
this,
child,
- stripWhitespace,
- nextSibling
+ strip_whitespace,
+ next_sibling
);
renderer.blocks.push(branch.block);
- if (branch.isDynamic) {
- isDynamic = true;
+ if (branch.is_dynamic) {
+ is_dynamic = true;
// TODO should blocks update their own parents?
- block.addDependencies(branch.block.dependencies);
+ block.add_dependencies(branch.block.dependencies);
}
- if (branch.block.hasIntros) hasIntros = true;
- if (branch.block.hasOutros) hasOutros = true;
+ if (branch.block.has_intros) has_intros = true;
+ if (branch.block.has_outros) has_outros = true;
this[status] = branch;
});
- this.pending.block.hasUpdateMethod = isDynamic;
- this.then.block.hasUpdateMethod = isDynamic;
- this.catch.block.hasUpdateMethod = isDynamic;
+ this.pending.block.has_update_method = is_dynamic;
+ this.then.block.has_update_method = is_dynamic;
+ this.catch.block.has_update_method = is_dynamic;
- this.pending.block.hasIntroMethod = hasIntros;
- this.then.block.hasIntroMethod = hasIntros;
- this.catch.block.hasIntroMethod = hasIntros;
+ this.pending.block.has_intro_method = has_intros;
+ this.then.block.has_intro_method = has_intros;
+ this.catch.block.has_intro_method = has_intros;
- this.pending.block.hasOutroMethod = hasOutros;
- this.then.block.hasOutroMethod = hasOutros;
- this.catch.block.hasOutroMethod = hasOutros;
+ this.pending.block.has_outro_method = has_outros;
+ this.then.block.has_outro_method = has_outros;
+ this.catch.block.has_outro_method = has_outros;
- if (hasOutros) {
- block.addOutro();
+ if (has_outros) {
+ block.add_outro();
}
}
render(
block: Block,
- parentNode: string,
- parentNodes: string
+ parent_node: string,
+ parent_nodes: string
) {
- const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
- const updateMountNode = this.getUpdateMountNode(anchor);
+ const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+ const update_mount_node = this.get_update_mount_node(anchor);
const snippet = this.node.expression.render(block);
- const info = block.getUniqueName(`info`);
- const promise = block.getUniqueName(`promise`);
+ const info = block.get_unique_name(`info`);
+ const promise = block.get_unique_name(`promise`);
- block.addVariable(promise);
+ block.add_variable(promise);
- block.maintainContext = true;
+ block.maintain_context = true;
- const infoProps = [
+ const info_props = [
'ctx',
'current: null',
this.pending.block.name && `pending: ${this.pending.block.name}`,
@@ -142,42 +142,42 @@ export default class AwaitBlockWrapper extends Wrapper {
this.catch.block.name && `catch: ${this.catch.block.name}`,
this.then.block.name && `value: '${this.node.value}'`,
this.catch.block.name && `error: '${this.node.error}'`,
- this.pending.block.hasOutroMethod && `blocks: Array(3)`
+ this.pending.block.has_outro_method && `blocks: Array(3)`
].filter(Boolean);
- block.builders.init.addBlock(deindent`
+ block.builders.init.add_block(deindent`
let ${info} = {
- ${infoProps.join(',\n')}
+ ${info_props.join(',\n')}
};
`);
- block.builders.init.addBlock(deindent`
- @handlePromise(${promise} = ${snippet}, ${info});
+ block.builders.init.add_block(deindent`
+ @handle_promise(${promise} = ${snippet}, ${info});
`);
- block.builders.create.addBlock(deindent`
+ block.builders.create.add_block(deindent`
${info}.block.c();
`);
- if (parentNodes && this.renderer.options.hydratable) {
- block.builders.claim.addBlock(deindent`
- ${info}.block.l(${parentNodes});
+ if (parent_nodes && this.renderer.options.hydratable) {
+ block.builders.claim.add_block(deindent`
+ ${info}.block.l(${parent_nodes});
`);
}
- const initialMountNode = parentNode || '#target';
- const anchorNode = parentNode ? 'null' : 'anchor';
+ const initial_mount_node = parent_node || '#target';
+ const anchor_node = parent_node ? 'null' : 'anchor';
- const hasTransitions = this.pending.block.hasIntroMethod || this.pending.block.hasOutroMethod;
+ const has_transitions = this.pending.block.has_intro_method || this.pending.block.has_outro_method;
- block.builders.mount.addBlock(deindent`
- ${info}.block.m(${initialMountNode}, ${info}.anchor = ${anchorNode});
- ${info}.mount = () => ${updateMountNode};
+ block.builders.mount.add_block(deindent`
+ ${info}.block.m(${initial_mount_node}, ${info}.anchor = ${anchor_node});
+ ${info}.mount = () => ${update_mount_node};
${info}.anchor = ${anchor};
`);
- if (hasTransitions) {
- block.builders.intro.addLine(`${info}.block.i();`);
+ if (has_transitions) {
+ block.builders.intro.add_line(`${info}.block.i();`);
}
const conditions = [];
@@ -191,15 +191,15 @@ export default class AwaitBlockWrapper extends Wrapper {
conditions.push(
`${promise} !== (${promise} = ${snippet})`,
- `@handlePromise(${promise}, ${info})`
+ `@handle_promise(${promise}, ${info})`
);
- block.builders.update.addLine(
+ block.builders.update.add_line(
`${info}.ctx = ctx;`
);
- if (this.pending.block.hasUpdateMethod) {
- block.builders.update.addBlock(deindent`
+ if (this.pending.block.has_update_method) {
+ block.builders.update.add_block(deindent`
if (${conditions.join(' && ')}) {
// nothing
} else {
@@ -207,13 +207,13 @@ export default class AwaitBlockWrapper extends Wrapper {
}
`);
} else {
- block.builders.update.addBlock(deindent`
+ block.builders.update.add_block(deindent`
${conditions.join(' && ')}
`);
}
- if (this.pending.block.hasOutroMethod) {
- block.builders.outro.addBlock(deindent`
+ if (this.pending.block.has_outro_method) {
+ block.builders.outro.add_block(deindent`
for (let #i = 0; #i < 3; #i += 1) {
const block = ${info}.blocks[#i];
if (block) block.o();
@@ -221,8 +221,8 @@ export default class AwaitBlockWrapper extends Wrapper {
`);
}
- block.builders.destroy.addBlock(deindent`
- ${info}.block.d(${parentNode ? '' : 'detach'});
+ block.builders.destroy.add_block(deindent`
+ ${info}.block.d(${parent_node ? '' : 'detaching'});
${info} = null;
`);
diff --git a/src/compile/render-dom/wrappers/Body.ts b/src/compile/render-dom/wrappers/Body.ts
index 678c790053..ca6c9df43f 100644
--- a/src/compile/render-dom/wrappers/Body.ts
+++ b/src/compile/render-dom/wrappers/Body.ts
@@ -1,20 +1,20 @@
import Block from '../Block';
import Wrapper from './shared/Wrapper';
-import deindent from '../../../utils/deindent';
+import deindent from '../../utils/deindent';
import Body from '../../nodes/Body';
export default class BodyWrapper extends Wrapper {
node: Body;
- render(block: Block, parentNode: string, parentNodes: string) {
+ render(block: Block, parent_node: string, parent_nodes: string) {
this.node.handlers.forEach(handler => {
const snippet = handler.render(block);
- block.builders.init.addBlock(deindent`
+ block.builders.init.add_block(deindent`
document.body.addEventListener("${handler.name}", ${snippet});
`);
- block.builders.destroy.addBlock(deindent`
+ block.builders.destroy.add_block(deindent`
document.body.removeEventListener("${handler.name}", ${snippet});
`);
});
diff --git a/src/compile/render-dom/wrappers/DebugTag.ts b/src/compile/render-dom/wrappers/DebugTag.ts
index 630735d110..06fef90a62 100644
--- a/src/compile/render-dom/wrappers/DebugTag.ts
+++ b/src/compile/render-dom/wrappers/DebugTag.ts
@@ -2,8 +2,8 @@ import Renderer from '../Renderer';
import Wrapper from './shared/Wrapper';
import Block from '../Block';
import DebugTag from '../../nodes/DebugTag';
-import addToSet from '../../../utils/addToSet';
-import deindent from '../../../utils/deindent';
+import add_to_set from '../../utils/add_to_set';
+import deindent from '../../utils/deindent';
export default class DebugTagWrapper extends Wrapper {
node: DebugTag;
@@ -13,13 +13,13 @@ export default class DebugTagWrapper extends Wrapper {
block: Block,
parent: Wrapper,
node: DebugTag,
- stripWhitespace: boolean,
- nextSibling: Wrapper
+ strip_whitespace: boolean,
+ next_sibling: Wrapper
) {
super(renderer, block, parent, node);
}
- render(block: Block, parentNode: string, parentNodes: string) {
+ render(block: Block, parent_node: string, parent_nodes: string) {
const { renderer } = this;
const { component } = renderer;
@@ -34,8 +34,8 @@ export default class DebugTagWrapper extends Wrapper {
});
const statement = `[✂${this.node.start + 1}-${this.node.start + 7}✂];`;
- block.builders.create.addLine(statement);
- block.builders.update.addLine(statement);
+ block.builders.create.add_line(statement);
+ block.builders.update.add_line(statement);
} else {
const { code } = component;
code.overwrite(this.node.start + 1, this.node.start + 7, 'log', {
@@ -45,14 +45,14 @@ export default class DebugTagWrapper extends Wrapper {
const dependencies = new Set();
this.node.expressions.forEach(expression => {
- addToSet(dependencies, expression.dependencies);
+ add_to_set(dependencies, expression.dependencies);
});
const condition = Array.from(dependencies).map(d => `changed.${d}`).join(' || ');
const identifiers = this.node.expressions.map(e => e.node.name).join(', ');
- block.builders.update.addBlock(deindent`
+ block.builders.update.add_block(deindent`
if (${condition}) {
const { ${identifiers} } = ctx;
console.${log}({ ${identifiers} });
@@ -60,7 +60,7 @@ export default class DebugTagWrapper extends Wrapper {
}
`);
- block.builders.create.addBlock(deindent`
+ block.builders.create.add_block(deindent`
{
const { ${identifiers} } = ctx;
console.${log}({ ${identifiers} });
diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts
index 36b493645c..4c2504e8c3 100644
--- a/src/compile/render-dom/wrappers/EachBlock.ts
+++ b/src/compile/render-dom/wrappers/EachBlock.ts
@@ -1,17 +1,17 @@
import Renderer from '../Renderer';
import Block from '../Block';
import Wrapper from './shared/Wrapper';
-import createDebuggingComment from '../../../utils/createDebuggingComment';
+import create_debugging_comment from './shared/create_debugging_comment';
import EachBlock from '../../nodes/EachBlock';
import FragmentWrapper from './Fragment';
-import deindent from '../../../utils/deindent';
+import deindent from '../../utils/deindent';
import ElseBlock from '../../nodes/ElseBlock';
class ElseBlockWrapper extends Wrapper {
node: ElseBlock;
block: Block;
fragment: FragmentWrapper;
- isDynamic: boolean;
+ is_dynamic: boolean;
var = null;
@@ -20,14 +20,14 @@ class ElseBlockWrapper extends Wrapper {
block: Block,
parent: Wrapper,
node: ElseBlock,
- stripWhitespace: boolean,
- nextSibling: Wrapper
+ strip_whitespace: boolean,
+ next_sibling: Wrapper
) {
super(renderer, block, parent, node);
this.block = block.child({
- comment: createDebuggingComment(node, this.renderer.component),
- name: this.renderer.component.getUniqueName(`create_else_block`)
+ comment: create_debugging_comment(node, this.renderer.component),
+ name: this.renderer.component.get_unique_name(`create_else_block`)
});
this.fragment = new FragmentWrapper(
@@ -35,11 +35,11 @@ class ElseBlockWrapper extends Wrapper {
this.block,
this.node.children,
parent,
- stripWhitespace,
- nextSibling
+ strip_whitespace,
+ next_sibling
);
- this.isDynamic = this.block.dependencies.size > 0;
+ this.is_dynamic = this.block.dependencies.size > 0;
}
}
@@ -60,8 +60,8 @@ export default class EachBlockWrapper extends Wrapper {
length: string;
}
- contextProps: string[];
- indexName: string;
+ context_props: string[];
+ index_name: string;
var = 'each';
@@ -70,27 +70,27 @@ export default class EachBlockWrapper extends Wrapper {
block: Block,
parent: Wrapper,
node: EachBlock,
- stripWhitespace: boolean,
- nextSibling: Wrapper
+ strip_whitespace: boolean,
+ next_sibling: Wrapper
) {
super(renderer, block, parent, node);
- this.cannotUseInnerHTML();
+ this.cannot_use_innerhtml();
const { dependencies } = node.expression;
- block.addDependencies(dependencies);
+ block.add_dependencies(dependencies);
this.block = block.child({
- comment: createDebuggingComment(this.node, this.renderer.component),
- name: renderer.component.getUniqueName('create_each_block'),
+ comment: create_debugging_comment(this.node, this.renderer.component),
+ name: renderer.component.get_unique_name('create_each_block'),
key: node.key as string,
bindings: new Map(block.bindings)
});
// TODO this seems messy
- this.block.hasAnimation = this.node.hasAnimation;
+ this.block.has_animation = this.node.has_animation;
- this.indexName = this.node.index || renderer.component.getUniqueName(`${this.node.context}_index`);
+ this.index_name = this.node.index || renderer.component.get_unique_name(`${this.node.context}_index`);
const fixed_length = node.expression.node.type === 'ArrayExpression'
? node.expression.node.elements.length
@@ -102,13 +102,13 @@ export default class EachBlockWrapper extends Wrapper {
while (renderer.component.source[c] !== 'e') c += 1;
renderer.component.code.overwrite(c, c + 4, 'length');
- const each_block_value = renderer.component.getUniqueName(`${this.var}_value`);
- const iterations = block.getUniqueName(`${this.var}_blocks`);
+ const each_block_value = renderer.component.get_unique_name(`${this.var}_value`);
+ const iterations = block.get_unique_name(`${this.var}_blocks`);
this.vars = {
create_each_block: this.block.name,
each_block_value,
- get_each_context: renderer.component.getUniqueName(`get_${this.var}_context`),
+ get_each_context: renderer.component.get_unique_name(`get_${this.var}_context`),
iterations,
length: `[✂${c}-${c+4}✂]`,
@@ -124,18 +124,18 @@ export default class EachBlockWrapper extends Wrapper {
node.contexts.forEach(prop => {
this.block.bindings.set(prop.key.name, {
object: this.vars.each_block_value,
- property: this.indexName,
- snippet: `${this.vars.each_block_value}[${this.indexName}]${prop.tail}`
+ property: this.index_name,
+ snippet: `${this.vars.each_block_value}[${this.index_name}]${prop.tail}`
});
});
if (this.node.index) {
- this.block.getUniqueName(this.node.index); // this prevents name collisions (#1254)
+ this.block.get_unique_name(this.node.index); // this prevents name collisions (#1254)
}
renderer.blocks.push(this.block);
- this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, stripWhitespace, nextSibling);
+ this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
if (this.node.else) {
this.else = new ElseBlockWrapper(
@@ -143,112 +143,112 @@ export default class EachBlockWrapper extends Wrapper {
block,
this,
this.node.else,
- stripWhitespace,
- nextSibling
+ strip_whitespace,
+ next_sibling
);
renderer.blocks.push(this.else.block);
- if (this.else.isDynamic) {
- this.block.addDependencies(this.else.block.dependencies);
+ if (this.else.is_dynamic) {
+ this.block.add_dependencies(this.else.block.dependencies);
}
}
- block.addDependencies(this.block.dependencies);
+ block.add_dependencies(this.block.dependencies);
- if (this.block.hasOutros || (this.else && this.else.block.hasOutros)) {
- block.addOutro();
+ if (this.block.has_outros || (this.else && this.else.block.has_outros)) {
+ block.add_outro();
}
}
- render(block: Block, parentNode: string, parentNodes: string) {
+ render(block: Block, parent_node: string, parent_nodes: string) {
if (this.fragment.nodes.length === 0) return;
const { renderer } = this;
const { component } = renderer;
- const needsAnchor = this.next
- ? !this.next.isDomNode() :
- !parentNode || !this.parent.isDomNode();
+ const needs_anchor = this.next
+ ? !this.next.is_dom_node() :
+ !parent_node || !this.parent.is_dom_node();
- this.vars.anchor = needsAnchor
- ? block.getUniqueName(`${this.var}_anchor`)
+ this.vars.anchor = needs_anchor
+ ? block.get_unique_name(`${this.var}_anchor`)
: (this.next && this.next.var) || 'null';
- this.contextProps = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`);
+ this.context_props = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`);
- if (this.node.has_binding) this.contextProps.push(`child_ctx.${this.vars.each_block_value} = list;`);
- if (this.node.has_binding || this.node.index) this.contextProps.push(`child_ctx.${this.indexName} = i;`);
+ if (this.node.has_binding) this.context_props.push(`child_ctx.${this.vars.each_block_value} = list;`);
+ if (this.node.has_binding || this.node.index) this.context_props.push(`child_ctx.${this.index_name} = i;`);
const snippet = this.node.expression.render(block);
- block.builders.init.addLine(`var ${this.vars.each_block_value} = ${snippet};`);
+ block.builders.init.add_line(`var ${this.vars.each_block_value} = ${snippet};`);
renderer.blocks.push(deindent`
function ${this.vars.get_each_context}(ctx, list, i) {
const child_ctx = Object.create(ctx);
- ${this.contextProps}
+ ${this.context_props}
return child_ctx;
}
`);
if (this.node.key) {
- this.renderKeyed(block, parentNode, parentNodes, snippet);
+ this.render_keyed(block, parent_node, parent_nodes, snippet);
} else {
- this.renderUnkeyed(block, parentNode, parentNodes, snippet);
+ this.render_unkeyed(block, parent_node, parent_nodes, snippet);
}
- if (this.block.hasIntroMethod || this.block.hasOutroMethod) {
- block.builders.intro.addBlock(deindent`
+ if (this.block.has_intro_method || this.block.has_outro_method) {
+ block.builders.intro.add_block(deindent`
for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) ${this.vars.iterations}[#i].i();
`);
}
- if (needsAnchor) {
- block.addElement(
+ if (needs_anchor) {
+ block.add_element(
this.vars.anchor,
- `@createComment()`,
- parentNodes && `@createComment()`,
- parentNode
+ `@comment()`,
+ parent_nodes && `@comment()`,
+ parent_node
);
}
if (this.else) {
- const each_block_else = component.getUniqueName(`${this.var}_else`);
+ const each_block_else = component.get_unique_name(`${this.var}_else`);
- block.builders.init.addLine(`var ${each_block_else} = null;`);
+ block.builders.init.add_line(`var ${each_block_else} = null;`);
// TODO neaten this up... will end up with an empty line in the block
- block.builders.init.addBlock(deindent`
+ block.builders.init.add_block(deindent`
if (!${this.vars.data_length}) {
${each_block_else} = ${this.else.block.name}(ctx);
${each_block_else}.c();
}
`);
- block.builders.mount.addBlock(deindent`
+ block.builders.mount.add_block(deindent`
if (${each_block_else}) {
- ${each_block_else}.m(${parentNode || '#target'}, null);
+ ${each_block_else}.m(${parent_node || '#target'}, null);
}
`);
- const initialMountNode = parentNode || `${this.vars.anchor}.parentNode`;
+ const initial_mount_node = parent_node || `${this.vars.anchor}.parentNode`;
- if (this.else.block.hasUpdateMethod) {
- block.builders.update.addBlock(deindent`
+ if (this.else.block.has_update_method) {
+ block.builders.update.add_block(deindent`
if (!${this.vars.data_length} && ${each_block_else}) {
${each_block_else}.p(changed, ctx);
} else if (!${this.vars.data_length}) {
${each_block_else} = ${this.else.block.name}(ctx);
${each_block_else}.c();
- ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor});
+ ${each_block_else}.m(${initial_mount_node}, ${this.vars.anchor});
} else if (${each_block_else}) {
${each_block_else}.d(1);
${each_block_else} = null;
}
`);
} else {
- block.builders.update.addBlock(deindent`
+ block.builders.update.add_block(deindent`
if (${this.vars.data_length}) {
if (${each_block_else}) {
${each_block_else}.d(1);
@@ -257,13 +257,13 @@ export default class EachBlockWrapper extends Wrapper {
} else if (!${each_block_else}) {
${each_block_else} = ${this.else.block.name}(ctx);
${each_block_else}.c();
- ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor});
+ ${each_block_else}.m(${initial_mount_node}, ${this.vars.anchor});
}
`);
}
- block.builders.destroy.addBlock(deindent`
- if (${each_block_else}) ${each_block_else}.d(${parentNode ? '' : 'detach'});
+ block.builders.destroy.add_block(deindent`
+ if (${each_block_else}) ${each_block_else}.d(${parent_node ? '' : 'detaching'});
`);
}
@@ -274,10 +274,10 @@ export default class EachBlockWrapper extends Wrapper {
}
}
- renderKeyed(
+ render_keyed(
block: Block,
- parentNode: string,
- parentNodes: string,
+ parent_node: string,
+ parent_nodes: string,
snippet: string
) {
const {
@@ -288,25 +288,25 @@ export default class EachBlockWrapper extends Wrapper {
view_length
} = this.vars;
- const get_key = block.getUniqueName('get_key');
- const lookup = block.getUniqueName(`${this.var}_lookup`);
+ const get_key = block.get_unique_name('get_key');
+ const lookup = block.get_unique_name(`${this.var}_lookup`);
- block.addVariable(iterations, '[]');
- block.addVariable(lookup, `@blankObject()`);
+ block.add_variable(iterations, '[]');
+ block.add_variable(lookup, `@blank_object()`);
- if (this.fragment.nodes[0].isDomNode()) {
+ if (this.fragment.nodes[0].is_dom_node()) {
this.block.first = this.fragment.nodes[0].var;
} else {
- this.block.first = this.block.getUniqueName('first');
- this.block.addElement(
+ this.block.first = this.block.get_unique_name('first');
+ this.block.add_element(
this.block.first,
- `@createComment()`,
- parentNodes && `@createComment()`,
+ `@comment()`,
+ parent_nodes && `@comment()`,
null
);
}
- block.builders.init.addBlock(deindent`
+ block.builders.init.add_block(deindent`
const ${get_key} = ctx => ${this.node.key.render()};
for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
@@ -316,58 +316,57 @@ export default class EachBlockWrapper extends Wrapper {
}
`);
- const initialMountNode = parentNode || '#target';
- const updateMountNode = this.getUpdateMountNode(anchor);
- const anchorNode = parentNode ? 'null' : 'anchor';
+ const initial_mount_node = parent_node || '#target';
+ const update_mount_node = this.get_update_mount_node(anchor);
+ const anchor_node = parent_node ? 'null' : 'anchor';
- block.builders.create.addBlock(deindent`
+ block.builders.create.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].c();
`);
- if (parentNodes && this.renderer.options.hydratable) {
- block.builders.claim.addBlock(deindent`
- for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parentNodes});
+ if (parent_nodes && this.renderer.options.hydratable) {
+ block.builders.claim.add_block(deindent`
+ for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parent_nodes});
`);
}
- block.builders.mount.addBlock(deindent`
- for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initialMountNode}, ${anchorNode});
+ block.builders.mount.add_block(deindent`
+ for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initial_mount_node}, ${anchor_node});
`);
- const dynamic = this.block.hasUpdateMethod;
+ const dynamic = this.block.has_update_method;
- const rects = block.getUniqueName('rects');
- const destroy = this.node.hasAnimation
- ? `@fixAndOutroAndDestroyBlock`
- : this.block.hasOutros
- ? `@outroAndDestroyBlock`
- : `@destroyBlock`;
+ const destroy = this.node.has_animation
+ ? `@fix_and_outro_and_destroy_block`
+ : this.block.has_outros
+ ? `@outro_and_destroy_block`
+ : `@destroy_block`;
- block.builders.update.addBlock(deindent`
+ block.builders.update.add_block(deindent`
const ${this.vars.each_block_value} = ${snippet};
- ${this.block.hasOutros && `@group_outros();`}
- ${this.node.hasAnimation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`}
- ${iterations} = @updateKeyedEach(${iterations}, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, ${anchor}, ${this.vars.get_each_context});
- ${this.node.hasAnimation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`}
- ${this.block.hasOutros && `@check_outros();`}
+ ${this.block.has_outros && `@group_outros();`}
+ ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`}
+ ${iterations} = @update_keyed_each(${iterations}, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${update_mount_node}, ${destroy}, ${create_each_block}, ${anchor}, ${this.vars.get_each_context});
+ ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`}
+ ${this.block.has_outros && `@check_outros();`}
`);
- if (this.block.hasOutros) {
- block.builders.outro.addBlock(deindent`
+ if (this.block.has_outros) {
+ block.builders.outro.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].o();
`);
}
- block.builders.destroy.addBlock(deindent`
- for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parentNode ? '' : 'detach'});
+ block.builders.destroy.add_block(deindent`
+ for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parent_node ? '' : 'detaching'});
`);
}
- renderUnkeyed(
+ render_unkeyed(
block: Block,
- parentNode: string,
- parentNodes: string,
+ parent_node: string,
+ parent_nodes: string,
snippet: string
) {
const {
@@ -380,7 +379,7 @@ export default class EachBlockWrapper extends Wrapper {
anchor
} = this.vars;
- block.builders.init.addBlock(deindent`
+ block.builders.init.add_block(deindent`
var ${iterations} = [];
for (var #i = 0; #i < ${data_length}; #i += 1) {
@@ -388,44 +387,44 @@ export default class EachBlockWrapper extends Wrapper {
}
`);
- const initialMountNode = parentNode || '#target';
- const updateMountNode = this.getUpdateMountNode(anchor);
- const anchorNode = parentNode ? 'null' : 'anchor';
+ const initial_mount_node = parent_node || '#target';
+ const update_mount_node = this.get_update_mount_node(anchor);
+ const anchor_node = parent_node ? 'null' : 'anchor';
- block.builders.create.addBlock(deindent`
+ block.builders.create.add_block(deindent`
for (var #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].c();
}
`);
- if (parentNodes && this.renderer.options.hydratable) {
- block.builders.claim.addBlock(deindent`
+ if (parent_nodes && this.renderer.options.hydratable) {
+ block.builders.claim.add_block(deindent`
for (var #i = 0; #i < ${view_length}; #i += 1) {
- ${iterations}[#i].l(${parentNodes});
+ ${iterations}[#i].l(${parent_nodes});
}
`);
}
- block.builders.mount.addBlock(deindent`
+ block.builders.mount.add_block(deindent`
for (var #i = 0; #i < ${view_length}; #i += 1) {
- ${iterations}[#i].m(${initialMountNode}, ${anchorNode});
+ ${iterations}[#i].m(${initial_mount_node}, ${anchor_node});
}
`);
- const allDependencies = new Set(this.block.dependencies);
+ const all_dependencies = new Set(this.block.dependencies);
const { dependencies } = this.node.expression;
dependencies.forEach((dependency: string) => {
- allDependencies.add(dependency);
+ all_dependencies.add(dependency);
});
- const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock')
- if (outroBlock) {
- block.builders.init.addBlock(deindent`
- function ${outroBlock}(i, detach, local) {
+ const outro_block = this.block.has_outros && block.get_unique_name('outro_block')
+ if (outro_block) {
+ block.builders.init.add_block(deindent`
+ function ${outro_block}(i, detaching, local) {
if (${iterations}[i]) {
- if (detach) {
+ if (detaching) {
@on_outro(() => {
- ${iterations}[i].d(detach);
+ ${iterations}[i].d(detaching);
${iterations}[i] = null;
});
}
@@ -436,14 +435,14 @@ export default class EachBlockWrapper extends Wrapper {
`);
}
- const condition = Array.from(allDependencies)
+ const condition = Array.from(all_dependencies)
.map(dependency => `changed.${dependency}`)
.join(' || ');
- const has_transitions = !!(this.block.hasIntroMethod || this.block.hasOutroMethod);
+ const has_transitions = !!(this.block.has_intro_method || this.block.has_outro_method);
if (condition !== '') {
- const forLoopBody = this.block.hasUpdateMethod
+ const for_loop_body = this.block.has_update_method
? deindent`
if (${iterations}[#i]) {
${iterations}[#i].p(changed, child_ctx);
@@ -452,29 +451,29 @@ export default class EachBlockWrapper extends Wrapper {
${iterations}[#i] = ${create_each_block}(child_ctx);
${iterations}[#i].c();
${has_transitions && `${iterations}[#i].i(1);`}
- ${iterations}[#i].m(${updateMountNode}, ${anchor});
+ ${iterations}[#i].m(${update_mount_node}, ${anchor});
}
`
: deindent`
${iterations}[#i] = ${create_each_block}(child_ctx);
${iterations}[#i].c();
${has_transitions && `${iterations}[#i].i(1);`}
- ${iterations}[#i].m(${updateMountNode}, ${anchor});
+ ${iterations}[#i].m(${update_mount_node}, ${anchor});
`;
- const start = this.block.hasUpdateMethod ? '0' : `${view_length}`;
+ const start = this.block.has_update_method ? '0' : `${view_length}`;
let remove_old_blocks;
- if (this.block.hasOutros) {
+ if (this.block.has_outros) {
remove_old_blocks = deindent`
@group_outros();
- for (; #i < ${view_length}; #i += 1) ${outroBlock}(#i, 1, 1);
+ for (; #i < ${view_length}; #i += 1) ${outro_block}(#i, 1, 1);
@check_outros();
`;
} else {
remove_old_blocks = deindent`
- for (${this.block.hasUpdateMethod ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) {
+ for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) {
${iterations}[#i].d(1);
}
${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`}
@@ -487,26 +486,26 @@ export default class EachBlockWrapper extends Wrapper {
for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
const child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i);
- ${forLoopBody}
+ ${for_loop_body}
}
${remove_old_blocks}
`;
- block.builders.update.addBlock(deindent`
+ block.builders.update.add_block(deindent`
if (${condition}) {
${update}
}
`);
}
- if (outroBlock) {
- block.builders.outro.addBlock(deindent`
+ if (outro_block) {
+ block.builders.outro.add_block(deindent`
${iterations} = ${iterations}.filter(Boolean);
- for (let #i = 0; #i < ${view_length}; #i += 1) ${outroBlock}(#i, 0);`
+ for (let #i = 0; #i < ${view_length}; #i += 1) ${outro_block}(#i, 0);`
);
}
- block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
+ block.builders.destroy.add_block(`@destroy_each(${iterations}, detaching);`);
}
}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Element/Attribute.ts b/src/compile/render-dom/wrappers/Element/Attribute.ts
index b098f68248..5b581677d8 100644
--- a/src/compile/render-dom/wrappers/Element/Attribute.ts
+++ b/src/compile/render-dom/wrappers/Element/Attribute.ts
@@ -1,9 +1,9 @@
import Attribute from '../../../nodes/Attribute';
import Block from '../../Block';
-import fixAttributeCasing from '../../../../utils/fixAttributeCasing';
+import fix_attribute_casing from './fix_attribute_casing';
import ElementWrapper from './index';
-import { stringify } from '../../../../utils/stringify';
-import deindent from '../../../../utils/deindent';
+import { stringify } from '../../../utils/stringify';
+import deindent from '../../../utils/deindent';
export default class AttributeWrapper {
node: Attribute;
@@ -14,19 +14,19 @@ export default class AttributeWrapper {
this.parent = parent;
if (node.dependencies.size > 0) {
- parent.cannotUseInnerHTML();
+ parent.cannot_use_innerhtml();
- block.addDependencies(node.dependencies);
+ block.add_dependencies(node.dependencies);
// special case —