diff --git a/site/README.md b/site/README.md index eb3c7013ce..591e3f0cfb 100644 --- a/site/README.md +++ b/site/README.md @@ -1,75 +1,36 @@ -# sapper-template-rollup +## Running locally -A version of the default [Sapper](https://github.com/sveltejs/sapper) template that uses Rollup instead of webpack. To clone it and get started: +Set up the project: ```bash -npx degit sveltejs/sapper-template#rollup my-app -cd my-app -npm install # or yarn! -npm run dev +git clone https://github.com/sveltejs/svelte.git +cd svelte/site +npm ci +npm run update ``` -Open up [localhost:3000](http://localhost:3000) and start clicking around. - -Consult [sapper.svelte.technology](https://sapper.svelte.technology) for help getting started. - -*[Click here for the webpack version of this template](https://github.com/sveltejs/sapper-template)* - -## Structure - -Sapper expects to find three directories in the root of your project — `app`, `assets` and `routes`. - - -### app - -The [app](app) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file. +Start the server with `npm run dev`, and navigate to [localhost:3000](http://localhost:3000). +## Using a local copy of Svelte -### assets +By default, the REPL will fetch the most recent version of Svelte from https://unpkg.com/svelte. If you need to test a local version of Svelte, you can do so by linking it and navigating to [localhost:3000/repl?version=local](http://localhost:3000/repl?version=local): -The [assets](assets) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv). - -In your [service-worker.js](app/service-worker.js) file, you can import these as `assets` from the generated manifest... +```bash +cd /path/to/svelte +npm link +npm run dev # rebuild Svelte on changes -```js -import { assets } from './manifest/service-worker.js'; +cd /path/to/svelte/site +npm link svelte +npm run dev ``` -...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files). - - -### routes - -This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*. - -**Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.) +## REPL GitHub integration -**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example. +In order for the REPL's GitHub integration to work properly when running locally, you will need to create a GitHub OAuth app. Set its authorization callback URL to `http://localhost:3000/auth/callback`, and in this project, create `site/.env` containing: -There are three simple rules for naming the files that define your routes: - -* A file called `routes/about.html` corresponds to the `/about` route. A file called `routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route -* The file `routes/index.html` (or `routes/index.js`) corresponds to the root of your app. `routes/about/index.html` is treated the same as `routes/about.html`. -* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route - - -## Rollup config - -Sapper uses Rollup to provide code-splitting and dynamic imports, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like. - - -## Production mode and deployment - -To start a production version of your app, run `npm run build && npm start`. - -You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands: - -```bash -npm install -g now -now ``` - - -## Bugs and feedback - -Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues). +GITHUB_CLIENT_ID=[your app's client id] +GITHUB_CLIENT_SECRET=[your app's client secret] +BASEURL=http://localhost:3000 +``` diff --git a/site/content/guide/06-special-components.md b/site/content/guide/06-special-components.md index 47c31c3733..56ee2b4964 100644 --- a/site/content/guide/06-special-components.md +++ b/site/content/guide/06-special-components.md @@ -114,11 +114,9 @@ You can also bind to certain values — so far `innerWidth`, `outerWidth`, `inne ``` -### `` +### `` -TODO REPLACE THIS WITH svelte:body - -The `` tag, just like ``, gives you a convenient way to declaratively add event listeners to the `document` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`. +The `` tag, just like ``, gives you a convenient way to declaratively add event listeners to the `document.body` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`. ### `` diff --git a/site/package.json b/site/package.json index 7ecd42b767..b9390f3c39 100644 --- a/site/package.json +++ b/site/package.json @@ -1,17 +1,17 @@ { - "name": "TODO", - "description": "TODO", - "version": "0.0.1", + "name": "svelte.technology", + "version": "1.0.0", + "description": "Docs and examples for Svelte", "scripts": { "dev": "sapper dev", "sapper": "sapper build --legacy", - "update_template": "sh ./scripts/update_template.sh", + "update": "node scripts/update_template.js && node scripts/get-contributors.js", "start": "node __sapper__/build", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run", "deploy": "npm run stage && now alias", - "prestage": "npm run update_template && node scripts/get-contributors.js && npm run sapper", + "prestage": "npm run update && npm run sapper", "stage": "now" }, "dependencies": { @@ -29,6 +29,7 @@ "passport-github": "^1.1.0", "prismjs": "^1.15.0", "session-file-store": "^1.2.0", + "shelljs": "^0.8.3", "sirv": "^0.2.0", "yootils": "0.0.14" }, diff --git a/site/scripts/update_template.js b/site/scripts/update_template.js new file mode 100644 index 0000000000..23e2333bab --- /dev/null +++ b/site/scripts/update_template.js @@ -0,0 +1,26 @@ +const sh = require('shelljs'); +const fs = require('fs') + +sh.cd(__dirname+'/../') + +// fetch svelte app +sh.rm('-rf','scripts/svelte-app') +sh.exec('npx degit sveltejs/template scripts/svelte-app') + +// update repl-viewer.css based on template +sh.cp('scripts/svelte-app/public/global.css', 'static/repl-viewer.css') + +// remove src (will be recreated client-side) and node_modules +sh.rm('-rf', 'scripts/svelte-app/src') +sh.rm('-rf', 'scripts/svelte-app/node_modules') + +// build svelte-app.json +const appPath = 'scripts/svelte-app' +let files = [] + +for (const path of sh.find(appPath).filter(p => fs.lstatSync(p).isFile()) ) { + files.push({ path: path.slice(appPath.length + 1), data: fs.readFileSync(path).toString() }); +} + +fs.writeFileSync('static/svelte-app.json', JSON.stringify(files)); + diff --git a/site/scripts/update_template.sh b/site/scripts/update_template.sh deleted file mode 100755 index 59ab3cb0cd..0000000000 --- a/site/scripts/update_template.sh +++ /dev/null @@ -1,15 +0,0 @@ -cd `dirname $0`/.. - -# fetch svelte-app -rm -rf scripts/svelte-app -node_modules/.bin/degit sveltejs/template scripts/svelte-app - -# update repl-viewer.css based on template -cp scripts/svelte-app/public/global.css static/repl-viewer.css - -# remove src (will be recreated client-side) and node_modules -rm -rf scripts/svelte-app/src -rm -rf scripts/svelte-app/node_modules - -# build svelte-app.json -node scripts/build-svelte-app-json.js `find scripts/svelte-app -type f` diff --git a/site/src/routes/repl/_components/Output/Viewer.html b/site/src/routes/repl/_components/Output/Viewer.html index ef377b8b3c..e62e0d695b 100644 --- a/site/src/routes/repl/_components/Output/Viewer.html +++ b/site/src/routes/repl/_components/Output/Viewer.html @@ -1,6 +1,7 @@ + '> diff --git a/site/src/routes/repl/_utils/replProxy.js b/site/src/routes/repl/_utils/replProxy.js new file mode 100644 index 0000000000..922d6e3f18 --- /dev/null +++ b/site/src/routes/repl/_utils/replProxy.js @@ -0,0 +1,87 @@ +export default class ReplProxy { + constructor(iframe) { + this.iframe = iframe; + this.cmdId = 1; + this.pendingCmds = new Map(); + this.onPropUpdate = null; + this.onFetchProgress = null; + + window.addEventListener("message", ev => this.handleReplMessage(ev), false); + } + + + iframeCommand(command, args) { + return new Promise( (resolve, reject) => { + this.cmdId = this.cmdId + 1; + this.iframe.contentWindow.postMessage({ + action: command, + cmdId: this.cmdId, + args: args + }, '*') + this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject }); + }); + } + + handleCommandMessage(cmdData) { + let action = cmdData.action; + let id = cmdData.cmdId; + let handler = this.pendingCmds.get(id); + if (handler) { + this.pendingCmds.delete(id); + if (action == "cmdError") { + let { message, stack } = cmdData; + let e = new Error(message); + e.stack = stack; + console.log("cmd fail"); + handler.reject(e) + } + + if (action == "cmdOk") { + console.log("cmd okay"); + handler.resolve(cmdData.args) + } + } else { + console.error("command not found", id); + } + } + + handleReplMessage(ev) { + + let action = ev.data.action; + if ( action == "cmdError" || action == "cmdOk" ) { + this.handleCommandMessage(ev.data); + } + + if (action == "prop_update") { + let { prop, value } = ev.data.args; + if (this.onPropUpdate) + this.onPropUpdate(prop, value) + } + + if (action == "fetch_progress") { + if (this.onFetchProgress) + this.onFetchProgress(ev.data.args.remaining) + } + } + + eval(script) { + return this.iframeCommand("eval", { script: script }); + } + + setProp(prop, value) { + return this.iframeCommand("set_prop", {prop, value}) + } + + bindProps(props) { + return this.iframeCommand("bind_props", { props: props }) + } + + handleLinks() { + return this.iframeCommand("catch_clicks", {}); + } + + fetchImports(bundle) { + return this.iframeCommand("fetch_imports", { bundle }) + } + +} \ No newline at end of file diff --git a/site/src/utils/_process_markdown.js b/site/src/utils/_process_markdown.js index a79d759cbb..f760018a3b 100644 --- a/site/src/utils/_process_markdown.js +++ b/site/src/utils/_process_markdown.js @@ -1,5 +1,5 @@ export default function process_markdown(markdown) { - const match = /---\n([\s\S]+?)\n---/.exec(markdown); + const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown); const frontMatter = match[1]; const content = markdown.slice(match[0].length); diff --git a/site/static/repl-runner.js b/site/static/repl-runner.js new file mode 100644 index 0000000000..d1026839b5 --- /dev/null +++ b/site/static/repl-runner.js @@ -0,0 +1,133 @@ + +(function (){ +const importCache = {}; + +function fetchImport(id) { + return new Promise((fulfil, reject) => { + curl([`https://bundle.run/${id}`]).then(module => { + importCache[id] = module; + fulfil(module); + }, err => { + console.error(err.stack); + reject(new Error(`Error loading ${id} from bundle.run`)); + }); + }); +} + +function fetchImports(bundle, progressFunc) { + const missingImports = bundle.imports.filter(x => !importCache[x]); + let pendingImports = missingImports.length; + + if (missingImports.length) { + let promise = Promise.all( + missingImports.map(id => fetchImport(id).then(() => { + pendingImports -= 1; + if (progressFunc) progressFunc(pendingImports); + })) + ); + + return promise + } else { + return Promise.resolve(); + } +} + +function handleMessage(ev) { + let { action, cmdId } = ev.data; + const sendMessage = (payload) => parent.postMessage( { ...payload }, ev.origin); + const sendReply = (payload) => sendMessage({ ...payload, cmdId }) + const sendOk = () => sendReply({ action: "cmdOk" }); + const sendError = (message, stack) => sendReply({ action: "cmdError", message, stack }) + + parent.postMessage({ action: "test" }, ev.origin); + + if (action == "eval") { + let { script } = ev.data.args; + try { + eval(script); + sendOk(); + } catch (e) { + sendError(e.message, e.stack) + } + } + + if (action == "bind_props") { + let { props } = ev.data.args + + if (!window.component) { + // TODO can this happen? + console.error(`no component to bind to`); + return; + } + + props.forEach(prop => { + // TODO should there be a public API for binding? + // e.g. `component.$watch(prop, handler)`? + // (answer: probably) + window.component.$$.bound[prop] = value => { + sendMessage({ action:"prop_update", args: { prop, value } }) + }; + }); + } + + if (action == "set_prop") { + if (!window.component) { + return; + } + let { prop, value } = ev.data.args; + component[prop] = value; + } + + if (action == "catch_clicks") { + let topOrigin = ev.origin; + document.body.addEventListener('click', event => { + if (event.which !== 1) return; + if (event.metaKey || event.ctrlKey || event.shiftKey) return; + if (event.defaultPrevented) return; + + // ensure target is a link + let el = event.target; + while (el && el.nodeName !== 'A') el = el.parentNode; + if (!el || el.nodeName !== 'A') return; + + if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return; + + event.preventDefault(); + + if (el.href.startsWith(topOrigin)) { + const url = new URL(el.href); + if (url.hash[0] === '#') { + window.location.hash = url.hash; + return; + } + } + + window.open(el.href, '_blank'); + }); + } + + + if (action == "fetch_imports") { + let { bundle } = ev.data.args; + fetchImports(bundle, (remaining) => { + sendMessage({action: "fetch_progress", args: { remaining }}); + }) + .then(() => { + bundle.imports.forEach(x=> { + const module = importCache[x]; + const name = bundle.importMap.get(x); + window[name] = module; + }); + sendOk(); + }) + .catch(e => { + sendError(e.message, e.stack); + }) + } +} + +window.addEventListener("message", handleMessage, false) + +console.log("repl-runner initialized"); + +})(); diff --git a/src/compile/nodes/Document.ts b/src/compile/nodes/Body.ts similarity index 87% rename from src/compile/nodes/Document.ts rename to src/compile/nodes/Body.ts index 48e985291c..74c63b1f57 100644 --- a/src/compile/nodes/Document.ts +++ b/src/compile/nodes/Body.ts @@ -1,8 +1,8 @@ import Node from './shared/Node'; import EventHandler from './EventHandler'; -export default class Document extends Node { - type: 'Document'; +export default class Body extends Node { + type: 'Body'; handlers: EventHandler[]; constructor(component, parent, scope, info) { diff --git a/src/compile/nodes/shared/mapChildren.ts b/src/compile/nodes/shared/mapChildren.ts index 775f72dc16..21df3e2918 100644 --- a/src/compile/nodes/shared/mapChildren.ts +++ b/src/compile/nodes/shared/mapChildren.ts @@ -1,6 +1,6 @@ import AwaitBlock from '../AwaitBlock'; +import Body from '../Body'; import Comment from '../Comment'; -import Document from '../Document'; import EachBlock from '../EachBlock'; import Element from '../Element'; import Head from '../Head'; @@ -19,8 +19,8 @@ import Node from './Node'; function getConstructor(type): typeof Node { switch (type) { case 'AwaitBlock': return AwaitBlock; + case 'Body': return Body; case 'Comment': return Comment; - case 'Document': return Document; case 'EachBlock': return EachBlock; case 'Element': return Element; case 'Head': return Head; @@ -50,4 +50,4 @@ export default function mapChildren(component, parent, scope, children: any[]) { return node; }); -} \ No newline at end of file +} diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts index bee2072ef1..5fdd725a98 100644 --- a/src/compile/render-dom/Block.ts +++ b/src/compile/render-dom/Block.ts @@ -218,11 +218,11 @@ export default class Block { getContents(localKey?: string) { const { dev } = this.renderer.options; - if (this.hasIntroMethod || this.hasOutroMethod) { + if (this.hasOutros) { this.addVariable('#current'); - if (!this.builders.mount.isEmpty()) { - this.builders.mount.addLine(`#current = true;`); + if (!this.builders.intro.isEmpty()) { + this.builders.intro.addLine(`#current = true;`); } if (!this.builders.outro.isEmpty()) { @@ -347,27 +347,22 @@ export default class Block { } if (this.hasIntroMethod || this.hasOutroMethod) { - if (this.builders.mount.isEmpty()) { + if (this.builders.intro.isEmpty()) { properties.addLine(`i: @noop,`); } else { properties.addBlock(deindent` - ${dev ? 'i: function intro' : 'i'}(#target, anchor) { - if (#current) return; + ${dev ? 'i: function intro' : 'i'}() { + ${this.hasOutros && `if (#current) return;`} ${this.builders.intro} - this.m(#target, anchor); }, `); } if (this.builders.outro.isEmpty()) { - properties.addLine(`o: @run,`); + properties.addLine(`o: @noop,`); } else { properties.addBlock(deindent` - ${dev ? 'o: function outro' : 'o'}(#outrocallback) { - if (!#current) return; - - ${this.outros > 1 && `#outrocallback = @callAfter(#outrocallback, ${this.outros});`} - + ${dev ? 'o: function outro' : 'o'}() { ${this.builders.outro} }, `); diff --git a/src/compile/render-dom/wrappers/AwaitBlock.ts b/src/compile/render-dom/wrappers/AwaitBlock.ts index ca1fdcc64e..c8ce02ab20 100644 --- a/src/compile/render-dom/wrappers/AwaitBlock.ts +++ b/src/compile/render-dom/wrappers/AwaitBlock.ts @@ -80,7 +80,7 @@ export default class AwaitBlockWrapper extends Wrapper { status, renderer, block, - parent, + this, child, stripWhitespace, nextSibling @@ -172,11 +172,15 @@ export default class AwaitBlockWrapper extends Wrapper { const hasTransitions = this.pending.block.hasIntroMethod || this.pending.block.hasOutroMethod; block.builders.mount.addBlock(deindent` - ${info}.block.${hasTransitions ? 'i' : 'm'}(${initialMountNode}, ${info}.anchor = ${anchorNode}); + ${info}.block.m(${initialMountNode}, ${info}.anchor = ${anchorNode}); ${info}.mount = () => ${updateMountNode}; ${info}.anchor = ${anchor}; `); + if (hasTransitions) { + block.builders.intro.addLine(`${info}.block.i();`); + } + const conditions = []; if (this.node.expression.dependencies.size > 0) { conditions.push( @@ -208,13 +212,10 @@ export default class AwaitBlockWrapper extends Wrapper { } if (this.pending.block.hasOutroMethod) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` - const ${countdown} = @callAfter(#outrocallback, 3); for (let #i = 0; #i < 3; #i += 1) { const block = ${info}.blocks[#i]; - if (block) block.o(${countdown}); - else ${countdown}(); + if (block) block.o(); } `); } diff --git a/src/compile/render-dom/wrappers/Document.ts b/src/compile/render-dom/wrappers/Body.ts similarity index 60% rename from src/compile/render-dom/wrappers/Document.ts rename to src/compile/render-dom/wrappers/Body.ts index a87a486f6c..678c790053 100644 --- a/src/compile/render-dom/wrappers/Document.ts +++ b/src/compile/render-dom/wrappers/Body.ts @@ -1,22 +1,22 @@ import Block from '../Block'; import Wrapper from './shared/Wrapper'; import deindent from '../../../utils/deindent'; -import Document from '../../nodes/Document'; +import Body from '../../nodes/Body'; -export default class DocumentWrapper extends Wrapper { - node: Document; +export default class BodyWrapper extends Wrapper { + node: Body; render(block: Block, parentNode: string, parentNodes: string) { this.node.handlers.forEach(handler => { const snippet = handler.render(block); block.builders.init.addBlock(deindent` - document.addEventListener("${handler.name}", ${snippet}); + document.body.addEventListener("${handler.name}", ${snippet}); `); block.builders.destroy.addBlock(deindent` - document.removeEventListener("${handler.name}", ${snippet}); + document.body.removeEventListener("${handler.name}", ${snippet}); `); }); } -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts index 4f56a4c6c9..c713ea5f19 100644 --- a/src/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compile/render-dom/wrappers/EachBlock.ts @@ -60,7 +60,6 @@ export default class EachBlockWrapper extends Wrapper { get_each_context: string; iterations: string; length: string; - mountOrIntro: string; } contextProps: string[]; @@ -102,7 +101,6 @@ export default class EachBlockWrapper extends Wrapper { let c = this.node.start + 2; while (renderer.component.source[c] !== 'e') c += 1; renderer.component.code.overwrite(c, c + 4, 'length'); - const length = `[✂${c}-${c+4}✂]`; this.vars = { create_each_block: this.block.name, @@ -112,8 +110,7 @@ export default class EachBlockWrapper extends Wrapper { length: `[✂${c}-${c+4}✂]`, // filled out later - anchor: null, - mountOrIntro: null + anchor: null }; node.contexts.forEach(prop => { @@ -173,8 +170,6 @@ export default class EachBlockWrapper extends Wrapper { ? block.getUniqueName(`${this.var}_anchor`) : (this.next && this.next.var) || 'null'; - this.vars.mountOrIntro = (this.block.hasIntroMethod || this.block.hasOutroMethod) ? 'i' : 'm'; - this.contextProps = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`); if (this.hasBinding) this.contextProps.push(`child_ctx.${this.vars.each_block_value} = list;`); @@ -198,6 +193,12 @@ export default class EachBlockWrapper extends Wrapper { this.renderUnkeyed(block, parentNode, parentNodes, snippet); } + if (this.block.hasIntroMethod || this.block.hasOutroMethod) { + block.builders.intro.addBlock(deindent` + for (var #i = 0; #i < ${this.vars.each_block_value}.${this.vars.length}; #i += 1) ${this.vars.iterations}[#i].i(); + `); + } + if (needsAnchor) { block.addElement( this.vars.anchor, @@ -209,7 +210,6 @@ export default class EachBlockWrapper extends Wrapper { if (this.else) { const each_block_else = component.getUniqueName(`${this.var}_else`); - const mountOrIntro = (this.else.block.hasIntroMethod || this.else.block.hasOutroMethod) ? 'i' : 'm'; block.builders.init.addLine(`var ${each_block_else} = null;`); @@ -223,7 +223,7 @@ export default class EachBlockWrapper extends Wrapper { block.builders.mount.addBlock(deindent` if (${each_block_else}) { - ${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null); + ${each_block_else}.m(${parentNode || '#target'}, null); } `); @@ -236,7 +236,7 @@ export default class EachBlockWrapper extends Wrapper { } else if (!${this.vars.each_block_value}.${this.vars.length}) { ${each_block_else} = ${this.else.block.name}($$, ctx); ${each_block_else}.c(); - ${each_block_else}.${mountOrIntro}(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); } else if (${each_block_else}) { ${each_block_else}.d(1); ${each_block_else} = null; @@ -252,7 +252,7 @@ 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}.${mountOrIntro}(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); } `); } @@ -279,14 +279,13 @@ export default class EachBlockWrapper extends Wrapper { create_each_block, length, anchor, - mountOrIntro, + iterations } = this.vars; const get_key = block.getUniqueName('get_key'); - const blocks = block.getUniqueName(`${this.var}_blocks`); const lookup = block.getUniqueName(`${this.var}_lookup`); - block.addVariable(blocks, '[]'); + block.addVariable(iterations, '[]'); block.addVariable(lookup, `@blankObject()`); if (this.fragment.nodes[0].isDomNode()) { @@ -307,7 +306,7 @@ export default class EachBlockWrapper extends Wrapper { for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { let child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); let key = ${get_key}(child_ctx); - ${blocks}[#i] = ${lookup}[key] = ${create_each_block}($$, key, child_ctx); + ${iterations}[#i] = ${lookup}[key] = ${create_each_block}($$, key, child_ctx); } `); @@ -316,17 +315,17 @@ export default class EachBlockWrapper extends Wrapper { const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.create.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].c(); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].c(); `); if (parentNodes && this.renderer.options.hydratable) { block.builders.claim.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].l(${parentNodes}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].l(${parentNodes}); `); } block.builders.mount.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); `); const dynamic = this.block.hasUpdateMethod; @@ -342,21 +341,20 @@ export default class EachBlockWrapper extends Wrapper { const ${this.vars.each_block_value} = ${snippet}; ${this.block.hasOutros && `@group_outros();`} - ${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].r();`} - ${blocks} = @updateKeyedEach(${blocks}, $$, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.vars.get_each_context}); - ${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].a();`} + ${this.node.hasAnimation && `for (let #i = 0; #i < ${iterations}.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 < ${iterations}.length; #i += 1) ${iterations}[#i].a();`} + ${this.block.hasOutros && `@check_outros();`} `); if (this.block.hasOutros) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` - const ${countdown} = @callAfter(#outrocallback, ${blocks}.length); - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].o(); `); } block.builders.destroy.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].d(${parentNode ? '' : 'detach'}); `); } @@ -370,8 +368,7 @@ export default class EachBlockWrapper extends Wrapper { create_each_block, length, iterations, - anchor, - mountOrIntro, + anchor } = this.vars; block.builders.init.addBlock(deindent` @@ -402,7 +399,7 @@ export default class EachBlockWrapper extends Wrapper { block.builders.mount.addBlock(deindent` for (var #i = 0; #i < ${iterations}.length; #i += 1) { - ${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}); + ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); } `); @@ -415,15 +412,16 @@ export default class EachBlockWrapper extends Wrapper { const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock') if (outroBlock) { block.builders.init.addBlock(deindent` - function ${outroBlock}(i, detach, fn) { + function ${outroBlock}(i, detach) { if (${iterations}[i]) { - ${iterations}[i].o(() => { - if (detach) { + if (detach) { + @on_outro(() => { ${iterations}[i].d(detach); ${iterations}[i] = null; - } - if (fn) fn(); - }); + }); + } + + ${iterations}[i].o(); } } `); @@ -433,31 +431,25 @@ export default class EachBlockWrapper extends Wrapper { .map(dependency => `changed.${dependency}`) .join(' || '); + const has_transitions = !!(this.block.hasIntroMethod || this.block.hasOutroMethod); + if (condition !== '') { const forLoopBody = this.block.hasUpdateMethod - ? (this.block.hasIntros || this.block.hasOutros) - ? deindent` - if (${iterations}[#i]) { - ${iterations}[#i].p(changed, child_ctx); - } else { - ${iterations}[#i] = ${create_each_block}($$, 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}($$, child_ctx); - ${iterations}[#i].c(); - ${iterations}[#i].m(${updateMountNode}, ${anchor}); - } - ` + ? deindent` + if (${iterations}[#i]) { + ${iterations}[#i].p(changed, child_ctx); + } else { + ${iterations}[#i] = ${create_each_block}($$, child_ctx); + ${iterations}[#i].c(); + ${iterations}[#i].m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${iterations}[#i].i();`} + ` : deindent` ${iterations}[#i] = ${create_each_block}($$, child_ctx); ${iterations}[#i].c(); - ${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor}); + ${iterations}[#i].m(${updateMountNode}, ${anchor}); + ${has_transitions && `${iterations}[#i].i();`} `; const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`; @@ -468,6 +460,7 @@ export default class EachBlockWrapper extends Wrapper { destroy = deindent` @group_outros(); for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1); + @check_outros(); `; } else { destroy = deindent` @@ -498,11 +491,9 @@ export default class EachBlockWrapper extends Wrapper { } if (outroBlock) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` ${iterations} = ${iterations}.filter(Boolean); - const ${countdown} = @callAfter(#outrocallback, ${iterations}.length); - for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});` + for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0);` ); } diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index abfef21bcc..be8d355fa4 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -582,6 +582,7 @@ export default class ElementWrapper extends Wrapper { const { component } = this.renderer; if (intro === outro) { + // bidirectional transition const name = block.getUniqueName(`${this.var}_transition`); const snippet = intro.expression ? intro.expression.render(block) @@ -591,25 +592,22 @@ export default class ElementWrapper extends Wrapper { const fn = component.qualify(intro.name); - block.builders.intro.addConditional(`@intros.enabled`, deindent` - if (${name}) ${name}.invalidate(); - + block.builders.intro.addBlock(deindent` @add_render_callback(() => { - if (!${name}) ${name} = @create_transition(${this.var}, ${fn}, ${snippet}, true); + if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, true); ${name}.run(1); }); `); block.builders.outro.addBlock(deindent` - if (!${name}) ${name} = @create_transition(${this.var}, ${fn}, ${snippet}, false); - ${name}.run(0, () => { - #outrocallback(); - ${name} = null; - }); + if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, false); + ${name}.run(0); `); - block.builders.destroy.addConditional('detach', `if (${name}) ${name}.abort();`); - } else { + block.builders.destroy.addConditional('detach', `if (${name}) ${name}.end();`); + } + + else { const introName = intro && block.getUniqueName(`${this.var}_intro`); const outroName = outro && block.getUniqueName(`${this.var}_outro`); @@ -619,21 +617,27 @@ export default class ElementWrapper extends Wrapper { ? intro.expression.render(block) : '{}'; - const fn = component.qualify(intro.name); // TODO add built-in transitions? + const fn = component.qualify(intro.name); if (outro) { block.builders.intro.addBlock(deindent` - if (${introName}) ${introName}.abort(1); - if (${outroName}) ${outroName}.abort(1); + @add_render_callback(() => { + if (!${introName}) ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); + }); `); - } - block.builders.intro.addConditional(`@intros.enabled`, deindent` - @add_render_callback(() => { - ${introName} = @create_transition(${this.var}, ${fn}, ${snippet}, true); - ${introName}.run(1); - }); - `); + block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate()`); + } else { + block.builders.intro.addBlock(deindent` + if (!${introName}) { + @add_render_callback(() => { + ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); + }); + } + `); + } } if (outro) { @@ -645,17 +649,16 @@ export default class ElementWrapper extends Wrapper { const fn = component.qualify(outro.name); block.builders.intro.addBlock(deindent` - if (${outroName}) ${outroName}.abort(1); + if (${outroName}) ${outroName}.end(1); `); // TODO hide elements that have outro'd (unless they belong to a still-outroing // group) prior to their removal from the DOM block.builders.outro.addBlock(deindent` - ${outroName} = @create_transition(${this.var}, ${fn}, ${snippet}, false); - ${outroName}.run(0, #outrocallback); + ${outroName} = @create_out_transition(${this.var}, ${fn}, ${snippet}); `); - block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.abort();`); + block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.end();`); } } } diff --git a/src/compile/render-dom/wrappers/Fragment.ts b/src/compile/render-dom/wrappers/Fragment.ts index 56c7e2d6f0..aad4c74c80 100644 --- a/src/compile/render-dom/wrappers/Fragment.ts +++ b/src/compile/render-dom/wrappers/Fragment.ts @@ -1,7 +1,7 @@ import Wrapper from './shared/Wrapper'; import AwaitBlock from './AwaitBlock'; +import Body from './Body'; import DebugTag from './DebugTag'; -import Document from './Document'; import EachBlock from './EachBlock'; import Element from './Element'; import Head from './Head'; @@ -21,8 +21,8 @@ import Block from '../Block'; const wrappers = { AwaitBlock, + Body, Comment: null, - Document, DebugTag, EachBlock, Element, @@ -140,4 +140,4 @@ export default class FragmentWrapper { this.nodes[i].render(block, parentNode, parentNodes); } } -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/IfBlock.ts b/src/compile/render-dom/wrappers/IfBlock.ts index 9ed1acddf3..ab4c697881 100644 --- a/src/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compile/render-dom/wrappers/IfBlock.ts @@ -153,18 +153,17 @@ export default class IfBlockWrapper extends Wrapper { const if_name = hasElse ? '' : `if (${name}) `; const dynamic = this.branches[0].block.hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value + const hasIntros = this.branches[0].block.hasIntroMethod; const hasOutros = this.branches[0].block.hasOutroMethod; + const has_transitions = hasIntros || hasOutros; - const vars = { name, anchor, if_name, hasElse }; + const vars = { name, anchor, if_name, hasElse, has_transitions }; if (this.node.else) { if (hasOutros) { this.renderCompoundWithOutros(block, parentNode, parentNodes, dynamic, vars); - block.builders.outro.addBlock(deindent` - if (${name}) ${name}.o(#outrocallback); - else #outrocallback(); - `); + block.builders.outro.addLine(`if (${name}) ${name}.o();`); } else { this.renderCompound(block, parentNode, parentNodes, dynamic, vars); } @@ -172,10 +171,7 @@ export default class IfBlockWrapper extends Wrapper { this.renderSimple(block, parentNode, parentNodes, dynamic, vars); if (hasOutros) { - block.builders.outro.addBlock(deindent` - if (${name}) ${name}.o(#outrocallback); - else #outrocallback(); - `); + block.builders.outro.addLine(`if (${name}) ${name}.o();`); } } @@ -187,6 +183,10 @@ export default class IfBlockWrapper extends Wrapper { ); } + if (hasIntros || hasOutros) { + block.builders.intro.addLine(`if (${name}) ${name}.i();`); + } + if (needsAnchor) { block.addElement( anchor, @@ -206,7 +206,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, hasElse, if_name } + { name, anchor, hasElse, if_name, has_transitions } ) { const select_block_type = this.renderer.component.getUniqueName(`select_block_type`); const current_block_type = block.getUniqueName(`current_block_type`); @@ -225,12 +225,10 @@ export default class IfBlockWrapper extends Wrapper { var ${name} = ${current_block_type_and}${current_block_type}($$, ctx); `); - const mountOrIntro = this.branches[0].block.hasIntroMethod ? 'i' : 'm'; - const initialMountNode = parentNode || '#target'; const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + `${if_name}${name}.m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); @@ -238,8 +236,11 @@ export default class IfBlockWrapper extends Wrapper { const changeBlock = deindent` ${if_name}${name}.d(1); ${name} = ${current_block_type_and}${current_block_type}($$, ctx); - ${if_name}${name}.c(); - ${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + if (${name}) { + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + ${has_transitions && `${name}.i();`} + } `; if (dynamic) { @@ -268,7 +269,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, hasElse } + { name, anchor, hasElse, has_transitions } ) { const select_block_type = this.renderer.component.getUniqueName(`select_block_type`); const current_block_type_index = block.getUniqueName(`current_block_type_index`); @@ -311,22 +312,23 @@ export default class IfBlockWrapper extends Wrapper { `); } - const mountOrIntro = this.branches[0].block.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});` + `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); const destroyOldBlock = deindent` @group_outros(); - ${name}.o(function() { + @on_outro(() => { ${if_blocks}[${previous_block_index}].d(1); ${if_blocks}[${previous_block_index}] = null; }); + ${name}.o(); + @check_outros(); `; const createNewBlock = deindent` @@ -335,7 +337,8 @@ export default class IfBlockWrapper extends Wrapper { ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}]($$, ctx); ${name}.c(); } - ${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + ${name}.m(${updateMountNode}, ${anchor}); + ${has_transitions && `${name}.i();`} `; const changeBlock = hasElse @@ -386,7 +389,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, if_name } + { name, anchor, if_name, has_transitions } ) { const branch = this.branches[0]; @@ -394,62 +397,47 @@ export default class IfBlockWrapper extends Wrapper { var ${name} = (${branch.condition}) && ${branch.block.name}($$, ctx); `); - const mountOrIntro = branch.block.hasIntroMethod ? 'i' : 'm'; const initialMountNode = parentNode || '#target'; const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + `if (${name}) ${name}.m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); const enter = dynamic - ? (branch.block.hasIntroMethod || branch.block.hasOutroMethod) - ? deindent` - if (${name}) { - ${name}.p(changed, ctx); - } else { - ${name} = ${branch.block.name}($$, ctx); - if (${name}) ${name}.c(); - } - - ${name}.i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (${name}) { - ${name}.p(changed, ctx); - } else { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); - } - ` - : (branch.block.hasIntroMethod || branch.block.hasOutroMethod) - ? deindent` - if (!${name}) { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - } - ${name}.i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (!${name}) { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); - } - `; + ? deindent` + if (${name}) { + ${name}.p(changed, ctx); + } else { + ${name} = ${branch.block.name}($$, ctx); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${name}.i();`} + ` + : deindent` + if (!${name}) { + ${name} = ${branch.block.name}($$, ctx); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${name}.i();`} + `; // no `p()` here — we don't want to update outroing nodes, // as that will typically result in glitching const exit = branch.block.hasOutroMethod ? deindent` @group_outros(); - ${name}.o(function() { + @on_outro(() => { ${name}.d(1); ${name} = null; }); + + ${name}.o(); + @check_outros(); ` : deindent` ${name}.d(1); diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index c48e99b343..9669910d06 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -362,9 +362,11 @@ export default class InlineComponentWrapper extends Wrapper { if (${name}) { @group_outros(); const old_component = ${name}; - old_component.$$.fragment.o(() => { + @on_outro(() => { old_component.$destroy(); }); + old_component.$$.fragment.o(); + @check_outros(); } if (${switch_value}) { @@ -376,12 +378,17 @@ export default class InlineComponentWrapper extends Wrapper { ${this.fragment && this.fragment.nodes.map(child => child.remount(name))} ${name}.$$.fragment.c(); @mount_component(${name}, ${updateMountNode}, ${anchor}); + ${name}.$$.fragment.i(); } else { ${name} = null; } } `); + block.builders.intro.addBlock(deindent` + if (${name}) ${name}.$$.fragment.i(); + `); + if (updates.length) { block.builders.update.addBlock(deindent` else if (${switch_value}) { @@ -420,6 +427,10 @@ export default class InlineComponentWrapper extends Wrapper { `@mount_component(${name}, ${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});` ); + block.builders.intro.addBlock(deindent` + ${name}.$$.fragment.i(); + `); + if (updates.length) { block.builders.update.addBlock(deindent` ${updates} @@ -434,7 +445,7 @@ export default class InlineComponentWrapper extends Wrapper { } block.builders.outro.addLine( - `if (${name}) ${name}.$$.fragment.o(#outrocallback);` + `if (${name}) ${name}.$$.fragment.o();` ); } diff --git a/src/compile/render-ssr/Renderer.ts b/src/compile/render-ssr/Renderer.ts index 9e98979e26..ad7d44459e 100644 --- a/src/compile/render-ssr/Renderer.ts +++ b/src/compile/render-ssr/Renderer.ts @@ -19,9 +19,9 @@ function noop(){} const handlers: Record = { AwaitBlock, + Body: noop, Comment, DebugTag, - Document: noop, EachBlock, Element, Head, @@ -64,4 +64,4 @@ export default class Renderer { handler(node, this, options); }); } -} \ No newline at end of file +} diff --git a/src/internal/Component.js b/src/internal/Component.js index a1607f0b30..8df1d7aee5 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -12,7 +12,7 @@ export function bind(component, name, callback) { export function mount_component(component, target, anchor) { const { fragment, on_mount, on_destroy, after_render } = component.$$; - fragment[fragment.i ? 'i' : 'm'](target, anchor); + fragment.m(target, anchor); // onMount happens after the initial afterUpdate. Because // afterUpdate callbacks happen in reverse order (inner first) @@ -101,8 +101,6 @@ export function init(component, options, instance, create_fragment, not_equal) { $$.fragment = create_fragment($$, $$.ctx); if (options.target) { - intros.enabled = !!options.intro; - if (options.hydrate) { $$.fragment.l(children(options.target)); } else { @@ -110,8 +108,8 @@ export function init(component, options, instance, create_fragment, not_equal) { } mount_component(component, options.target, options.anchor); + if (options.intro && component.$$.fragment.i) component.$$.fragment.i(); flush(); - intros.enabled = true; } set_current_component(previous_component); diff --git a/src/internal/animations.js b/src/internal/animations.js index ac14036724..8f65a268db 100644 --- a/src/internal/animations.js +++ b/src/internal/animations.js @@ -26,15 +26,8 @@ export function animate(node, from, fn, params) { function start() { if (css) { - if (delay) node.style.cssText = cssText; - - name = create_rule({ a: 0, b: 1, d: 1, duration }, easing, css); - - node.style.animation = (node.style.animation || '') - .split(', ') - .filter(anim => anim && !/__svelte/.test(anim)) - .concat(`${name} ${duration}ms linear 1 forwards`) - .join(', '); + if (delay) node.style.cssText = cssText; // TODO create delayed animation instead? + name = create_rule(node, 0, 1, duration, 0, easing, css); } started = true; @@ -45,7 +38,7 @@ export function animate(node, from, fn, params) { running = false; } - const { abort, promise } = loop(now => { + loop(now => { if (!started && now >= start_time) { start(); } diff --git a/src/internal/await-block.js b/src/internal/await-block.js index 9f49c13e55..3d8be35edc 100644 --- a/src/internal/await-block.js +++ b/src/internal/await-block.js @@ -29,7 +29,8 @@ export function handlePromise(promise, info) { } block.c(); - block[block.i ? 'i' : 'm'](info.mount(), info.anchor); + block.m(info.mount(), info.anchor); + if (block.i) block.i(); flush(); } diff --git a/src/internal/keyed-each.js b/src/internal/keyed-each.js index 745ead6ff2..ad5eb243d2 100644 --- a/src/internal/keyed-each.js +++ b/src/internal/keyed-each.js @@ -1,12 +1,16 @@ +import { on_outro } from './transitions.js'; + export function destroyBlock(block, lookup) { block.d(1); lookup[block.key] = null; } export function outroAndDestroyBlock(block, lookup) { - block.o(function() { + on_outro(() => { destroyBlock(block, lookup); }); + + block.o(); } export function fixAndOutroAndDestroyBlock(block, lookup) { @@ -14,7 +18,7 @@ export function fixAndOutroAndDestroyBlock(block, lookup) { outroAndDestroyBlock(block, lookup); } -export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, intro_method, next, get_context) { +export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) { var o = old_blocks.length; var n = list.length; @@ -48,7 +52,8 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic var did_move = {}; function insert(block) { - block[intro_method](node, next); + block.m(node, next); + if (block.i) block.i(); lookup[block.key] = block; next = block.first; n--; diff --git a/src/internal/style_manager.js b/src/internal/style_manager.js index e4b15ad8d5..38f0acd94e 100644 --- a/src/internal/style_manager.js +++ b/src/internal/style_manager.js @@ -13,17 +13,17 @@ function hash(str) { return hash >>> 0; } -export function create_rule({ a, b, d, duration }, ease, fn) { +export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) { const step = 16.666 / duration; let keyframes = '{\n'; for (let p = 0; p <= 1; p += step) { - const t = a + d * ease(p); + const t = a + (b - a) * ease(p); keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`; } const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`; - const name = `__svelte_${hash(rule)}`; + const name = `__svelte_${hash(rule)}_${uid}`; if (!current_rules[name]) { if (!stylesheet) { @@ -36,21 +36,30 @@ export function create_rule({ a, b, d, duration }, ease, fn) { stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); } + const animation = node.style.animation || ''; + node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`; + active += 1; return name; } export function delete_rule(node, name) { - node.style.animation = node.style.animation + node.style.animation = (node.style.animation || '') .split(', ') - .filter(anim => anim && anim.indexOf(name) === -1) + .filter(name + ? anim => anim.indexOf(name) < 0 // remove specific animation + : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations + ) .join(', '); - if (--active <= 0) clear_rules(); + if (!--active) clear_rules(); } export function clear_rules() { - let i = stylesheet.cssRules.length; - while (i--) stylesheet.deleteRule(i); - current_rules = {}; + requestAnimationFrame(() => { + if (active) return; + let i = stylesheet.cssRules.length; + while (i--) stylesheet.deleteRule(i); + current_rules = {}; + }); } \ No newline at end of file diff --git a/src/internal/transitions.js b/src/internal/transitions.js index 714f82c6a9..cbbdd7da9c 100644 --- a/src/internal/transitions.js +++ b/src/internal/transitions.js @@ -1,4 +1,4 @@ -import { identity as linear, noop, run } from './utils.js'; +import { identity as linear, noop, run_all } from './utils.js'; import { loop } from './loop.js'; import { create_rule, delete_rule } from './style_manager.js'; @@ -24,152 +24,281 @@ export function group_outros() { }; } -export function create_transition(node, fn, params, intro) { - let config = fn(node, params); - let cssText; +export function check_outros() { + if (!outros.remaining) { + run_all(outros.callbacks); + } +} - let ready = !intro; - let t = intro ? 0 : 1; +export function on_outro(callback) { + outros.callbacks.push(callback); +} +export function create_in_transition(node, fn, params) { + let config = fn(node, params); let running = false; - let running_program = null; - let pending_program = null; + let animation_name; + let task; + let uid = 0; + + function cleanup() { + if (animation_name) delete_rule(node, animation_name); + } + + function go() { + const { + delay = 0, + duration = 300, + easing = linear, + tick = noop, + css + } = config; - function start(program, delay, duration, easing) { - node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}start`)); + if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++); + tick(0, 1); - program.a = t; - program.d = program.b - program.a; - program.duration = duration * Math.abs(program.b - program.a); - program.end = program.start + program.duration; + const start_time = window.performance.now() + delay; + const end_time = start_time + duration; - if (config.css) { - if (delay) node.style.cssText = cssText; + if (task) task.abort(); + running = true; - program.name = create_rule(program, easing, config.css); + task = loop(now => { + if (running) { + if (now >= end_time) { + tick(1, 0); + cleanup(); + return running = false; + } - node.style.animation = (node.style.animation || '') - .split(', ') - .filter(anim => anim && (program.d < 0 || !/__svelte/.test(anim))) - .concat(`${program.name} ${program.duration}ms linear 1 forwards`) - .join(', '); - } + if (now >= start_time) { + const t = easing((now - start_time) / duration); + tick(t, 1 - t); + } + } - running_program = program; - pending_program = null; + return running; + }); } - function done() { - const program = running_program; - running_program = null; + let started = false; - t = program.b; + return { + start() { + if (started) return; - if (config.tick) config.tick(t, 1 - t); + delete_rule(node); - node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}end`)); + if (typeof config === 'function') { + config = config(); + wait().then(go); + } else { + go(); + } + }, - if (!program.b && !program.invalidated) { - program.group.callbacks.push(() => { - program.callback(); - if (config.css) delete_rule(node, program.name); - }); + invalidate() { + started = false; + }, - if (--program.group.remaining === 0) { - program.group.callbacks.forEach(run); + end() { + if (running) { + cleanup(); + running = false; } - } else { - if (config.css) delete_rule(node, program.name); } + }; +} - running = !!pending_program; - } +export function create_out_transition(node, fn, params) { + let config = fn(node, params); + let running = true; + let animation_name; + + const group = outros; + + group.remaining += 1; - function go(b, callback) { + function go() { const { delay = 0, duration = 300, - easing = linear + easing = linear, + tick = noop, + css } = config; - const program = { - start: window.performance.now() + delay, - b, - callback - }; + if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css); + + const start_time = window.performance.now() + delay; + const end_time = start_time + duration; + + loop(now => { + if (running) { + if (now >= end_time) { + tick(0, 1); + + if (!--group.remaining) { + // this will result in `end()` being called, + // so we don't need to clean up here + run_all(group.callbacks); + } + + return false; + } + + if (now >= start_time) { + const t = easing((now - start_time) / duration); + tick(1 - t, t); + } + } - if (!ready) { - if (config.css && delay) { - cssText = node.style.cssText; - node.style.cssText += config.css(0, 1); + return running; + }); + } + + if (typeof config === 'function') { + config = config(); + wait().then(go); + } else { + go(); + } + + return { + end(reset) { + if (reset && config.tick) { + config.tick(1, 0); } - if (config.tick) config.tick(0, 1); - ready = true; + if (running) { + if (animation_name) delete_rule(node, animation_name); + running = false; + } } + }; +} + +export function create_bidirectional_transition(node, fn, params, intro) { + let config = fn(node, params); + + let t = intro ? 0 : 1; + + let running_program = null; + let pending_program = null; + let animation_name = null; + + function clear_animation() { + if (animation_name) delete_rule(node, animation_name); + } + + function init(program, duration) { + const d = program.b - t; + duration *= Math.abs(d); + + return { + a: t, + b: program.b, + d, + duration, + start: program.start, + end: program.start + duration, + group: program.group + }; + } + + function go(b) { + const { + delay = 0, + duration = 300, + easing = linear, + tick = noop, + css + } = config; + + const program = { + start: window.performance.now() + delay, + b + }; if (!b) { program.group = outros; outros.remaining += 1; } - if (delay) { + if (running_program) { pending_program = program; } else { - start(program, delay, duration, easing); - } + // if this is an intro, and there's a delay, we need to do + // an initial tick and/or apply CSS animation immediately + if (css) { + clear_animation(); + animation_name = create_rule(node, t, b, duration, delay, easing, css); + } - if (!running) { - running = true; + if (b) tick(0, 1); - const { abort, promise } = loop(now => { - if (running_program && now >= running_program.end) { - done(); - } + running_program = init(program, duration); + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`)); + + loop(now => { + if (pending_program && now > pending_program.start) { + running_program = init(pending_program, duration); + pending_program = null; + + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`)); - if (pending_program && now >= pending_program.start) { - start(pending_program, delay, duration, easing); + if (css) { + clear_animation(); + animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css); + } } - if (running) { - if (running_program) { + if (running_program) { + if (now >= running_program.end) { + tick(t = running_program.b, 1 - t); + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}end`)); + + if (!pending_program) { + // we're done + if (running_program.b) { + // intro — we can tidy up immediately + clear_animation(); + } else { + // outro — needs to be coordinated + if (!--running_program.group.remaining) run_all(running_program.group.callbacks); + } + } + + running_program = null; + } + + else if (now >= running_program.start) { const p = now - running_program.start; t = running_program.a + running_program.d * easing(p / running_program.duration); - if (config.tick) config.tick(t, 1 - t); + tick(t, 1 - t); } - - return true; } + + return !!(running_program || pending_program); }); } } return { - run(b, callback = noop) { + run(b) { if (typeof config === 'function') { wait().then(() => { config = config(); - go(b, callback); + go(b); }); } else { - go(b, callback); - } - }, - - abort(reset) { - if (reset && config.tick) config.tick(1, 0); - - if (running_program) { - if (config.css) delete_rule(node, running_program.name); - running_program = pending_program = null; - running = false; + go(b); } }, - invalidate() { - if (running_program) { - running_program.invalidated = true; - } + end() { + clear_animation(); + running_program = pending_program = null; } }; } \ No newline at end of file diff --git a/src/internal/utils.js b/src/internal/utils.js index 9559ce9d24..a46385190d 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -16,13 +16,6 @@ export function isPromise(value) { return value && typeof value.then === 'function'; } -export function callAfter(fn, i) { - if (i === 0) fn(); - return () => { - if (!--i) fn(); - }; -} - export function addLoc(element, file, line, column, char) { element.__svelte_meta = { loc: { file, line, column, char } diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 2dffd9f2b7..6e53ab03e0 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -5,16 +5,20 @@ import { decodeCharacterReferences } from '../utils/html'; import isVoidElementName from '../../utils/isVoidElementName'; import { Parser } from '../index'; import { Node } from '../../interfaces'; +import fuzzymatch from '../../utils/fuzzymatch'; +import list from '../../utils/list'; const validTagName = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/; const metaTags = new Map([ - ['svelte:document', 'Document'], - ['svelte:window', 'Window'], + ['svelte:head', 'Head'], ['svelte:meta', 'Meta'], - ['svelte:head', 'Head'] + ['svelte:window', 'Window'], + ['svelte:body', 'Body'] ]); +const valid_meta_tags = [...metaTags.keys(), 'svelte:self', 'svelte:component']; + const specials = new Map([ [ 'script', @@ -32,8 +36,8 @@ const specials = new Map([ ], ]); -const SELF = 'svelte:self'; -const COMPONENT = 'svelte:component'; +const SELF = /^svelte:self(?=[\s\/>])/; +const COMPONENT = /^svelte:component(?=[\s\/>])/; // based on http://developers.whatwg.org/syntax.html#syntax-tag-omission const disallowedContents = new Map([ @@ -97,7 +101,7 @@ export default function tag(parser: Parser) { const slug = metaTags.get(name).toLowerCase(); if (isClosingTag) { if ( - (name === 'svelte:window' || name === 'svelte:document') && + (name === 'svelte:window' || name === 'svelte:body') && parser.current().children.length ) { parser.error({ @@ -278,7 +282,7 @@ export default function tag(parser: Parser) { function readTagName(parser: Parser) { const start = parser.index; - if (parser.eat(SELF)) { + if (parser.read(SELF)) { // check we're inside a block, otherwise this // will cause infinite recursion let i = parser.stack.length; @@ -295,19 +299,31 @@ function readTagName(parser: Parser) { if (!legal) { parser.error({ code: `invalid-self-placement`, - message: `<${SELF}> components can only exist inside if-blocks or each-blocks` + message: ` components can only exist inside if-blocks or each-blocks` }, start); } - return SELF; + return 'svelte:self'; } - if (parser.eat(COMPONENT)) return COMPONENT; + if (parser.read(COMPONENT)) return 'svelte:component'; const name = parser.readUntil(/(\s|\/|>)/); if (metaTags.has(name)) return name; + if (name.startsWith('svelte:')) { + const match = fuzzymatch(name.slice(7), valid_meta_tags); + + let message = `Valid tag names are ${list(valid_meta_tags)}`; + if (match) message += ` (did you mean '${match}'?)`; + + parser.error({ + code: 'invalid-tag-name', + message + }, start); + } + if (!validTagName.test(name)) { parser.error({ code: `invalid-tag-name`, @@ -524,4 +540,4 @@ function readSequence(parser: Parser, done: () => boolean) { code: `unexpected-eof`, message: `Unexpected end of input` }); -} \ No newline at end of file +} diff --git a/test/js/samples/action-custom-event-handler/expected.js b/test/js/samples/action-custom-event-handler/expected.js index e4a1329c60..0c73a79237 100644 --- a/test/js/samples/action-custom-event-handler/expected.js +++ b/test/js/samples/action-custom-event-handler/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var button, foo_action, current; + var button, foo_action; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, button, anchor); foo_action = foo.call(null, button, ctx.foo_function) || {}; - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js index f2f66baa2b..a8fbf62344 100644 --- a/test/js/samples/action/expected.js +++ b/test/js/samples/action/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var a, link_action, current; + var a, link_action; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, a, anchor); link_action = link.call(null, a) || {}; - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js index 4ca71de2cf..a1b13fedc6 100644 --- a/test/js/samples/bind-width-height/expected.js +++ b/test/js/samples/bind-width-height/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addResizeListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addResizeListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div, div_resize_listener, current; + var div, div_resize_listener; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); div_resize_listener = addResizeListener(div, ctx.div_resize_handler.bind(div)); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 26b8dac055..ff5ce3b048 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function add_css() { var style = createElement("style"); @@ -9,7 +9,7 @@ function add_css() { } function create_fragment($$, ctx) { - var p, text, current; + var p, text; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, p, anchor); append(p, text); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js index f39cb4c328..ab3dbbc4f6 100644 --- a/test/js/samples/component-static-array/expected.js +++ b/test/js/samples/component-static-array/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js index a33a09a093..0e8d67ccea 100644 --- a/test/js/samples/component-static-immutable/expected.js +++ b/test/js/samples/component-static-immutable/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js index a33a09a093..0e8d67ccea 100644 --- a/test/js/samples/component-static-immutable2/expected.js +++ b/test/js/samples/component-static-immutable2/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js index df8a0d3274..be7357c866 100644 --- a/test/js/samples/component-static/expected.js +++ b/test/js/samples/component-static/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index 39c7f85bc8..f9411cf5f6 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -1,15 +1,13 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index f130945c4b..b771f17a75 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function add_css() { var style = createElement("style"); @@ -9,7 +9,7 @@ function add_css() { } function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -19,17 +19,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index bf56378e2d..d55e3928ca 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteElement, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteElement, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 16313a1a50..4ed9b00a85 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -1,10 +1,10 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; function create_fragment($$, ctx) { - var h1, text0, text1, text2, text3, current; + var h1, text0, text1, text2, text3; return { c: function create() { @@ -27,7 +27,6 @@ function create_fragment($$, ctx) { append(h1, text1); append(h1, text2); insert(target, text3, anchor); - current = true; }, p: function update(changed, ctx) { @@ -38,12 +37,8 @@ function create_fragment($$, ctx) { debugger; }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { if (detach) { diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index 7183e59e83..24089b777c 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; @@ -55,7 +55,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, text2, current; + var text0, p, text1, text2; var each_value = ctx.things; @@ -91,7 +91,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -121,12 +120,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 93fbdc2f21..2c7d3ef2d2 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; @@ -55,7 +55,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, text2, current; + var text0, p, text1, text2; var each_value = ctx.things; @@ -91,7 +91,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -121,12 +120,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index fe2a247d3d..d8f2db31ce 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createComment, createElement as createElement_1, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement as createElement_1, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -37,7 +37,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var each_anchor, current; + var each_anchor; var each_value = ctx.createElement; @@ -62,7 +62,6 @@ function create_fragment($$, ctx) { } insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -88,12 +87,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js index eae53e6ab6..b8613b4ff9 100644 --- a/test/js/samples/deconflict-globals/expected.js +++ b/test/js/samples/deconflict-globals/expected.js @@ -1,16 +1,14 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; import { onMount } from "svelte"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index 7f52c96119..3b4c623407 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -1,10 +1,10 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; function create_fragment($$, ctx) { - var p, text0_value = Math.max(0, ctx.foo), text0, text1, text2, current; + var p, text0_value = Math.max(0, ctx.foo), text0, text1, text2; return { c: function create() { @@ -24,7 +24,6 @@ function create_fragment($$, ctx) { append(p, text0); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -37,12 +36,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { if (detach) { diff --git a/test/js/samples/do-use-dataset/expected.js b/test/js/samples/do-use-dataset/expected.js index 1cdc176977..343ac22999 100644 --- a/test/js/samples/do-use-dataset/expected.js +++ b/test/js/samples/do-use-dataset/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, current; + var div0, text, div1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected.js b/test/js/samples/dont-use-dataset-in-legacy/expected.js index 26fd86b9b6..dc787888af 100644 --- a/test/js/samples/dont-use-dataset-in-legacy/expected.js +++ b/test/js/samples/dont-use-dataset-in-legacy/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, current; + var div0, text, div1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dont-use-dataset-in-svg/expected.js b/test/js/samples/dont-use-dataset-in-svg/expected.js index 2bb5a1d36b..1a5825a63d 100644 --- a/test/js/samples/dont-use-dataset-in-svg/expected.js +++ b/test/js/samples/dont-use-dataset-in-svg/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createSvgElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createSvgElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var svg, g0, g1, current; + var svg, g0, g1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, svg, anchor); append(svg, g0); append(svg, g1); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js index d0e36d4936..1c6e0b873d 100644 --- a/test/js/samples/dynamic-import/expected.js +++ b/test/js/samples/dynamic-import/expected.js @@ -14,20 +14,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(lazyload, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + lazyload.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (lazyload) lazyload.$$.fragment.o(outrocallback); + o() { + if (lazyload) lazyload.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index cc59d354d6..9dcf4b1ad2 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, destroyEach, detachAfter, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, destroyEach, detachAfter, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -68,7 +68,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, current; + var text0, p, text1; var each_value = ctx.comments; @@ -97,7 +97,6 @@ function create_fragment($$, ctx) { insert(target, text0, anchor); insert(target, p, anchor); append(p, text1); - current = true; }, p(changed, ctx) { @@ -127,12 +126,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 874c79c637..fbd5fa15cc 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, animate, append, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, run, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, animate, append, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -56,7 +56,7 @@ function create_each_block($$, key_1, ctx) { } function create_fragment($$, ctx) { - var each_blocks_1 = [], each_lookup = blankObject(), each_anchor, current; + var each_blocks = [], each_lookup = blankObject(), each_anchor; var each_value = ctx.things; @@ -65,39 +65,34 @@ function create_fragment($$, ctx) { for (var i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); - each_blocks_1[i] = each_lookup[key] = create_each_block($$, key, child_ctx); + each_blocks[i] = each_lookup[key] = create_each_block($$, key, child_ctx); } return { c() { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].c(); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); each_anchor = createComment(); }, m(target, anchor) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].m(target, anchor); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { const each_value = ctx.things; - for (let i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].r(); - each_blocks_1 = updateKeyedEach(each_blocks_1, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, fixAndOutroAndDestroyBlock, create_each_block, "m", each_anchor, get_each_context); - for (let i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].a(); + for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r(); + each_blocks = updateKeyedEach(each_blocks, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, fixAndOutroAndDestroyBlock, create_each_block, each_anchor, get_each_context); + for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a(); }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].d(detach); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detach); if (detach) { detachNode(each_anchor); diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index dc6f2c98e2..1599362932 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, blankObject, createComment, createElement, createText, destroyBlock, detachNode, flush, init, insert, run, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, blankObject, createComment, createElement, createText, destroyBlock, detachNode, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -42,7 +42,7 @@ function create_each_block($$, key_1, ctx) { } function create_fragment($$, ctx) { - var each_blocks_1 = [], each_lookup = blankObject(), each_anchor, current; + var each_blocks = [], each_lookup = blankObject(), each_anchor; var each_value = ctx.things; @@ -51,37 +51,32 @@ function create_fragment($$, ctx) { for (var i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); - each_blocks_1[i] = each_lookup[key] = create_each_block($$, key, child_ctx); + each_blocks[i] = each_lookup[key] = create_each_block($$, key, child_ctx); } return { c() { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].c(); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); each_anchor = createComment(); }, m(target, anchor) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].m(target, anchor); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { const each_value = ctx.things; - each_blocks_1 = updateKeyedEach(each_blocks_1, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, destroyBlock, create_each_block, "m", each_anchor, get_each_context); + each_blocks = updateKeyedEach(each_blocks, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, destroyBlock, create_each_block, each_anchor, get_each_context); }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].d(detach); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detach); if (detach) { detachNode(each_anchor); diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js index fea5cf99e2..6a1277988f 100644 --- a/test/js/samples/event-handler-no-passive/expected.js +++ b/test/js/samples/event-handler-no-passive/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var a, current, dispose; + var a, dispose; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, a, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index 8d334ec04a..ac0f1b3d79 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; function create_fragment($$, ctx) { - var div, button0, text1, button1, text3, button2, current, dispose; + var div, button0, text1, button1, text3, button2, dispose; return { c() { @@ -30,17 +30,11 @@ function create_fragment($$, ctx) { append(div, button1); append(div, text3); append(div, button2); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index 58bfa6ee06..f074e69745 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var meta0, meta1, current; + var meta0, meta1; return { c() { @@ -17,17 +17,11 @@ function create_fragment($$, ctx) { m(target, anchor) { append(document.head, meta0); append(document.head, meta1); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { detachNode(meta0); diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js index aa81d991e8..cdca1aaeba 100644 --- a/test/js/samples/hoisted-const/expected.js +++ b/test/js/samples/hoisted-const/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var b, text_value = get_answer(), text, current; + var b, text_value = get_answer(), text; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, b, anchor); append(b, text); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index cc01e9791a..b8ec6c55c5 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (3:0) {:else} function create_else_block($$, ctx) { @@ -46,7 +46,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var if_block_anchor, current; + var if_block_anchor; function select_block_type(ctx) { if (ctx.foo) return create_if_block; @@ -65,24 +65,21 @@ function create_fragment($$, ctx) { m(target, anchor) { if_block.m(target, anchor); insert(target, if_block_anchor, anchor); - current = true; }, p(changed, ctx) { if (current_block_type !== (current_block_type = select_block_type(ctx))) { if_block.d(1); if_block = current_block_type($$, ctx); - if_block.c(); - if_block.m(if_block_anchor.parentNode, if_block_anchor); + if (if_block) { + if_block.c(); + if_block.m(if_block_anchor.parentNode, if_block_anchor); + } } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if_block.d(detach); diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 054ee7219b..fbba18e605 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (1:0) {#if foo} function create_if_block($$, ctx) { @@ -24,7 +24,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var if_block_anchor, current; + var if_block_anchor; var if_block = (ctx.foo) && create_if_block($$, ctx); @@ -37,7 +37,6 @@ function create_fragment($$, ctx) { m(target, anchor) { if (if_block) if_block.m(target, anchor); insert(target, if_block_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -53,12 +52,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (if_block) if_block.d(detach); diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js index f4ac24f484..b39aaf9d26 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected.js +++ b/test/js/samples/inline-style-optimized-multiple/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -13,7 +13,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js index da4f91c1d2..49fb1d3427 100644 --- a/test/js/samples/inline-style-optimized-url/expected.js +++ b/test/js/samples/inline-style-optimized-url/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -12,7 +12,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -21,12 +20,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js index 84056cfd50..bfb7c56436 100644 --- a/test/js/samples/inline-style-optimized/expected.js +++ b/test/js/samples/inline-style-optimized/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -12,7 +12,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -21,12 +20,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js index 1f66ec8766..73dd167875 100644 --- a/test/js/samples/inline-style-unoptimized/expected.js +++ b/test/js/samples/inline-style-unoptimized/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, div1_style_value, current; + var div0, text, div1, div1_style_value; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js index baab165695..507d9fa2a3 100644 --- a/test/js/samples/input-files/expected.js +++ b/test/js/samples/input-files/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, input, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js index 1d90cf146c..393a6bb39c 100644 --- a/test/js/samples/input-range/expected.js +++ b/test/js/samples/input-range/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, setAttribute, toNumber } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, run_all, safe_not_equal, setAttribute, toNumber } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -19,20 +19,14 @@ function create_fragment($$, ctx) { insert(target, input, anchor); input.value = ctx.value; - - current = true; }, p(changed, ctx) { if (changed.value) input.value = ctx.value; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js index 3c5f57391b..a0d6065de6 100644 --- a/test/js/samples/input-without-blowback-guard/expected.js +++ b/test/js/samples/input-without-blowback-guard/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -15,20 +15,14 @@ function create_fragment($$, ctx) { insert(target, input, anchor); input.checked = ctx.foo; - - current = true; }, p(changed, ctx) { if (changed.foo) input.checked = ctx.foo; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-script-if-no-block/expected.js b/test/js/samples/instrumentation-script-if-no-block/expected.js index b8c0cb22e1..319ccb2637 100644 --- a/test/js/samples/instrumentation-script-if-no-block/expected.js +++ b/test/js/samples/instrumentation-script-if-no-block/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3, current, dispose; + var button, text1, p, text2, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-script-x-equals-x/expected.js b/test/js/samples/instrumentation-script-x-equals-x/expected.js index 429bf51fae..21e26a907f 100644 --- a/test/js/samples/instrumentation-script-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-script-x-equals-x/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3_value = ctx.things.length, text3, current, dispose; + var button, text1, p, text2, text3_value = ctx.things.length, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-template-if-no-block/expected.js b/test/js/samples/instrumentation-template-if-no-block/expected.js index 8aba31fc4d..d403b12fb1 100644 --- a/test/js/samples/instrumentation-template-if-no-block/expected.js +++ b/test/js/samples/instrumentation-template-if-no-block/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3, current, dispose; + var button, text1, p, text2, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-template-x-equals-x/expected.js b/test/js/samples/instrumentation-template-x-equals-x/expected.js index 6136f16432..a7496d403a 100644 --- a/test/js/samples/instrumentation-template-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-template-x-equals-x/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3_value = ctx.things.length, text3, current, dispose; + var button, text1, p, text2, text3_value = ctx.things.length, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index de095d7c0a..49d3d24f2a 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal, setInputType } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current; + var input; return { c() { @@ -12,17 +12,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, input, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 645a7d9b0f..17d87e4a9d 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, timeRangesToArray } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, run_all, safe_not_equal, timeRangesToArray } from "svelte/internal"; function create_fragment($$, ctx) { - var audio, audio_updating = false, audio_animationframe, audio_is_paused = true, current, dispose; + var audio, audio_updating = false, audio_animationframe, audio_is_paused = true, dispose; function audio_timeupdate_handler() { cancelAnimationFrame(audio_animationframe); @@ -34,8 +34,6 @@ function create_fragment($$, ctx) { insert(target, audio, anchor); audio.volume = ctx.volume; - - current = true; }, p(changed, ctx) { @@ -45,12 +43,8 @@ function create_fragment($$, ctx) { audio_updating = false; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index 32a772b3b5..e80b8d0ab1 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, callAfter, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; import Imported from "Imported.html"; function create_fragment($$, ctx) { @@ -20,23 +20,22 @@ function create_fragment($$, ctx) { mount_component(imported, target, anchor); insert(target, text, anchor); mount_component(nonimported, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + imported.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + nonimported.$$.fragment.i(); - outrocallback = callAfter(outrocallback, 2); + current = true; + }, - if (imported) imported.$$.fragment.o(outrocallback); - if (nonimported) nonimported.$$.fragment.o(outrocallback); + o() { + if (imported) imported.$$.fragment.o(); + if (nonimported) nonimported.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js index cce868ee40..a7f49b940e 100644 --- a/test/js/samples/select-dynamic-value/expected.js +++ b/test/js/samples/select-dynamic-value/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var select, option0, option1, select_value_value, current_1; + var select, option0, option1, select_value_value; return { c() { @@ -31,8 +31,6 @@ function create_fragment($$, ctx) { break; } } - - current_1 = true; }, p(changed, ctx) { @@ -48,12 +46,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current_1) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js index 257de1d245..124e632ddc 100644 --- a/test/js/samples/setup-method/expected.js +++ b/test/js/samples/setup-method/expected.js @@ -1,15 +1,13 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, identity, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, identity, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js index ed67789799..3ce818c950 100644 --- a/test/js/samples/svg-title/expected.js +++ b/test/js/samples/svg-title/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var svg, title, text, current; + var svg, title, text; return { c() { @@ -15,17 +15,11 @@ function create_fragment($$, ctx) { insert(target, svg, anchor); append(svg, title); append(title, text); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js index cfac2c0ad1..390f11cbcd 100644 --- a/test/js/samples/title/expected.js +++ b/test/js/samples/title/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var title_value, current; + var title_value; document.title = title_value = "a " + ctx.custom + " title"; @@ -17,7 +17,7 @@ function create_fragment($$, ctx) { }, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index e6610407e4..50938e861d 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (2:1) {#if a} function create_if_block_4($$, ctx) { @@ -112,7 +112,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var div, text0, p0, text2, text3, text4, p1, text6, text7, if_block4_anchor, current; + var div, text0, p0, text2, text3, text4, p1, text6, text7, if_block4_anchor; var if_block0 = (ctx.a) && create_if_block_4($$, ctx); @@ -161,7 +161,6 @@ function create_fragment($$, ctx) { insert(target, text7, anchor); if (if_block4) if_block4.m(target, anchor); insert(target, if_block4_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -221,12 +220,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 0fded5c925..a613882827 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var scrolling = false, clear_scrolling = () => { scrolling = false }, scrolling_timeout, p, text0, text1, current, dispose; + var scrolling = false, clear_scrolling = () => { scrolling = false }, scrolling_timeout, p, text0, text1, dispose; add_render_callback(ctx.onwindowscroll); @@ -23,7 +23,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text0); append(p, text1); - current = true; }, p(changed, ctx) { @@ -39,12 +38,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/parser/samples/error-svelte-selfdestructive/error.json b/test/parser/samples/error-svelte-selfdestructive/error.json new file mode 100644 index 0000000000..bdef619538 --- /dev/null +++ b/test/parser/samples/error-svelte-selfdestructive/error.json @@ -0,0 +1,10 @@ +{ + "code": "invalid-tag-name", + "message": "Valid tag names are svelte:head, svelte:meta, svelte:window, svelte:body, svelte:self or svelte:component", + "pos": 10, + "start": { + "character": 10, + "line": 2, + "column": 2 + } +} diff --git a/test/parser/samples/error-svelte-selfdestructive/input.html b/test/parser/samples/error-svelte-selfdestructive/input.html new file mode 100644 index 0000000000..6bf1e83aa4 --- /dev/null +++ b/test/parser/samples/error-svelte-selfdestructive/input.html @@ -0,0 +1,3 @@ +{#if x} + +{/if} \ No newline at end of file diff --git a/test/runtime/index.js b/test/runtime/index.js index 334426c424..8912e3dab0 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -13,7 +13,6 @@ import { setupHtmlEqual } from "../helpers.js"; -const main = path.resolve('index.js'); let svelte$; let svelte; diff --git a/test/runtime/samples/await-containing-if/_config.js b/test/runtime/samples/await-containing-if/_config.js new file mode 100644 index 0000000000..9e24e4f614 --- /dev/null +++ b/test/runtime/samples/await-containing-if/_config.js @@ -0,0 +1,35 @@ +let fulfil; + +let thePromise = new Promise(f => { + fulfil = f; +}); + +export default { + props: { + thePromise, + show: true + }, + + html: ` +

loading...

+ `, + + test({ assert, component, target }) { + fulfil(42); + + return thePromise + .then(() => { + assert.htmlEqual(target.innerHTML, ` +

the value is 42

+ `); + + component.show = false; + assert.htmlEqual(target.innerHTML, `
`); + + component.show = true; + assert.htmlEqual(target.innerHTML, ` +

the value is 42

+ `); + }); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/await-containing-if/main.html b/test/runtime/samples/await-containing-if/main.html new file mode 100644 index 0000000000..cab07e6499 --- /dev/null +++ b/test/runtime/samples/await-containing-if/main.html @@ -0,0 +1,11 @@ +
+ {#await thePromise} +

loading...

+ {:then theValue} + {#if show} +

the value is {theValue}

+ {/if} + {:catch theError} +

oh no! {theError.message}

+ {/await} +
\ No newline at end of file diff --git a/test/runtime/samples/document-event/_config.js b/test/runtime/samples/document-event/_config.js index 98e619af0f..f5e4b46f4f 100644 --- a/test/runtime/samples/document-event/_config.js +++ b/test/runtime/samples/document-event/_config.js @@ -1,13 +1,13 @@ export default { - test({ assert, component, target, window }) { + test({ assert, component, window }) { assert.deepEqual(component.events, []); const event1 = new window.Event('mouseenter'); - window.document.dispatchEvent(event1); + window.document.body.dispatchEvent(event1); assert.deepEqual(component.events, ['enter']); const event2 = new window.Event('mouseleave'); - window.document.dispatchEvent(event2); + window.document.body.dispatchEvent(event2); assert.deepEqual(component.events, ['enter', 'leave']); }, -}; \ No newline at end of file +}; diff --git a/test/runtime/samples/document-event/main.html b/test/runtime/samples/document-event/main.html index 6e7ab3a47c..078ae1ee02 100644 --- a/test/runtime/samples/document-event/main.html +++ b/test/runtime/samples/document-event/main.html @@ -6,4 +6,4 @@ } - \ No newline at end of file + diff --git a/test/runtime/samples/nested-transition-detach-if-false/_config.js b/test/runtime/samples/nested-transition-detach-if-false/_config.js index b76eb5cd32..d2ae78ffe3 100644 --- a/test/runtime/samples/nested-transition-detach-if-false/_config.js +++ b/test/runtime/samples/nested-transition-detach-if-false/_config.js @@ -13,7 +13,7 @@ export default { `, - test({ assert, component, target, window, raf }) { + test({ assert, component, target }) { component.folder.open = false; assert.htmlEqual(target.innerHTML, `
  • diff --git a/test/runtime/samples/transition-css-delay/_config.js b/test/runtime/samples/transition-css-delay/_config.js deleted file mode 100644 index 6e2c4a9ba4..0000000000 --- a/test/runtime/samples/transition-css-delay/_config.js +++ /dev/null @@ -1,10 +0,0 @@ -export default { - test({ assert, component, target, window, raf }) { - component.visible = true; - const div = target.querySelector('div'); - assert.strictEqual(div.style.opacity, '0'); - - raf.tick(50); - assert.strictEqual(div.style.opacity, ''); - } -}; \ No newline at end of file diff --git a/test/runtime/samples/transition-css-delay/main.html b/test/runtime/samples/transition-css-delay/main.html deleted file mode 100644 index faf89582e8..0000000000 --- a/test/runtime/samples/transition-css-delay/main.html +++ /dev/null @@ -1,17 +0,0 @@ - - -{#if visible} -
    delayed
    -{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-css-duration/_config.js b/test/runtime/samples/transition-css-duration/_config.js index ed25357681..28a78944bb 100644 --- a/test/runtime/samples/transition-css-duration/_config.js +++ b/test/runtime/samples/transition-css-duration/_config.js @@ -4,8 +4,10 @@ export default { const div = target.querySelector('div'); raf.tick(25); + component.visible = false; + raf.tick(26); assert.ok(~div.style.animation.indexOf('25ms')); }, }; diff --git a/test/runtime/samples/transition-css-in-out-in/_config.js b/test/runtime/samples/transition-css-in-out-in/_config.js new file mode 100644 index 0000000000..10719280e9 --- /dev/null +++ b/test/runtime/samples/transition-css-in-out-in/_config.js @@ -0,0 +1,20 @@ +export default { + test({ assert, component, target, window, raf }) { + component.visible = true; + const div = target.querySelector('div'); + + assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both`); + + raf.tick(50); + component.visible = false; + + // both in and out styles + assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both`); + + raf.tick(75); + component.visible = true; + + // reset original styles + assert.equal(div.style.animation, `__svelte_3809512021_1 100ms linear 0ms 1 both`); + }, +}; diff --git a/test/runtime/samples/transition-css-in-out-in/main.html b/test/runtime/samples/transition-css-in-out-in/main.html new file mode 100644 index 0000000000..5108452a39 --- /dev/null +++ b/test/runtime/samples/transition-css-in-out-in/main.html @@ -0,0 +1,25 @@ + + +{#if visible} +
    +{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js index 75242d21af..e78862e86c 100644 --- a/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js +++ b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js @@ -7,7 +7,7 @@ export default { ] }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { const { things } = component; component.things = []; diff --git a/test/runtime/samples/transition-js-aborted-outro/_config.js b/test/runtime/samples/transition-js-aborted-outro/_config.js index 87ad32be07..d61407e1bd 100644 --- a/test/runtime/samples/transition-js-aborted-outro/_config.js +++ b/test/runtime/samples/transition-js-aborted-outro/_config.js @@ -3,7 +3,7 @@ export default { visible: true, }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { component.visible = false; const span = target.querySelector('span'); diff --git a/test/runtime/samples/transition-js-await-block/_config.js b/test/runtime/samples/transition-js-await-block/_config.js index 5cddc8a95c..2e01dd7f76 100644 --- a/test/runtime/samples/transition-js-await-block/_config.js +++ b/test/runtime/samples/transition-js-await-block/_config.js @@ -13,7 +13,7 @@ export default { intro: true, - test({ assert, component, target, window, raf }) { + test({ assert, target, raf }) { let p = target.querySelector('p'); assert.equal(p.className, 'pending'); diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js index 6036be6055..aa0bd9e1aa 100644 --- a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js +++ b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js @@ -3,7 +3,7 @@ export default { name: 'world' }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { global.count = 0; component.visible = true; diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js index 261731c700..04df38a09c 100644 --- a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js +++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js @@ -12,9 +12,7 @@ export default {
    5
    `, - test({ assert, component, target, window, raf }) { - const divs = target.querySelectorAll('div'); - + test({ assert, component, target, raf }) { raf.tick(100); component.threshold = 4; diff --git a/test/runtime/samples/transition-js-if-else-block-intro/_config.js b/test/runtime/samples/transition-js-if-else-block-intro/_config.js index 2bf1483dac..c5eccf50e5 100644 --- a/test/runtime/samples/transition-js-if-else-block-intro/_config.js +++ b/test/runtime/samples/transition-js-if-else-block-intro/_config.js @@ -1,7 +1,7 @@ export default { intro: true, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { assert.equal(target.querySelector('div'), component.no); assert.equal(component.no.foo, 0); diff --git a/test/runtime/samples/transition-js-nested-each-delete/_config.js b/test/runtime/samples/transition-js-nested-each-delete/_config.js index c2a886db9a..041cbebc66 100644 --- a/test/runtime/samples/transition-js-nested-each-delete/_config.js +++ b/test/runtime/samples/transition-js-nested-each-delete/_config.js @@ -4,7 +4,7 @@ export default { things: ['a', 'b', 'c'] }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { assert.htmlEqual(target.innerHTML, `
    a
    b