From 2ac599357144f015e19ed373e04deb81225f37cd Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 5 Jun 2019 19:21:16 -0400 Subject: [PATCH 1/7] import globals from helpers (#2612) (#2947) --- src/compiler/compile/render-dom/index.ts | 12 ++++++------ .../compile/render-dom/wrappers/AwaitBlock.ts | 4 ++-- .../compile/render-dom/wrappers/EachBlock.ts | 4 ++-- .../compile/render-ssr/handlers/InlineComponent.ts | 2 +- src/runtime/internal/globals.ts | 5 +++++ src/runtime/internal/index.ts | 1 + src/runtime/internal/utils.ts | 2 +- test/js/samples/debug-empty/expected.js | 3 +++ test/js/samples/debug-foo-bar-baz-things/expected.js | 3 +++ test/js/samples/debug-foo/expected.js | 3 +++ test/js/samples/debug-hoisted/expected.js | 1 + test/js/samples/deconflict-builtins/expected.js | 1 + .../dev-warning-missing-data-computed/expected.js | 3 +++ test/js/samples/each-block-array-literal/expected.js | 1 + test/js/samples/each-block-changed-check/expected.js | 1 + .../js/samples/each-block-keyed-animated/expected.js | 2 ++ test/js/samples/each-block-keyed/expected.js | 2 ++ test/runtime/index.js | 1 + 18 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 src/runtime/internal/globals.ts diff --git a/src/compiler/compile/render-dom/index.ts b/src/compiler/compile/render-dom/index.ts index 46aa705bfb32..a9941b838f91 100644 --- a/src/compiler/compile/render-dom/index.ts +++ b/src/compiler/compile/render-dom/index.ts @@ -57,7 +57,7 @@ export default function dom( if (options.dev && !options.hydratable) { block.builders.claim.add_line( - 'throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");' + 'throw new @Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");' ); } @@ -106,7 +106,7 @@ export default function dom( } else if (component.compile_options.dev) { body.push(deindent` get ${x.export_name}() { - throw new Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + throw new @Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); } `); } @@ -122,14 +122,14 @@ export default function dom( } else if (component.compile_options.dev) { body.push(deindent` set ${x.export_name}(value) { - throw new Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'"); + throw new @Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'"); } `); } } else if (component.compile_options.dev) { body.push(deindent` set ${x.export_name}(value) { - throw new Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + throw new @Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); } `); } @@ -145,7 +145,7 @@ export default function dom( const props = ${options.customElement ? `this.attributes` : `options.props || {}`}; ${expected.map(prop => deindent` if (ctx.${prop.name} === undefined && !('${prop.export_name}' in props)) { - console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); + @console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); }`)} `; } @@ -402,7 +402,7 @@ export default function dom( if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) { unknown_props_check = deindent` const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; - Object.keys($$props).forEach(key => { + @Object.keys($$props).forEach(key => { if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; diff --git a/src/compiler/compile/render-dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render-dom/wrappers/AwaitBlock.ts index c7af29a07341..73ca3fe4f5fd 100644 --- a/src/compiler/compile/render-dom/wrappers/AwaitBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/AwaitBlock.ts @@ -142,7 +142,7 @@ export default class AwaitBlockWrapper extends Wrapper { this.catch.block.name && `catch: ${this.catch.block.name}`, this.then.block.name && `value: '${this.node.value}'`, this.catch.block.name && `error: '${this.node.error}'`, - this.pending.block.has_outro_method && `blocks: Array(3)` + this.pending.block.has_outro_method && `blocks: [,,,]` ].filter(Boolean); block.builders.init.add_block(deindent` @@ -230,4 +230,4 @@ export default class AwaitBlockWrapper extends Wrapper { branch.fragment.render(branch.block, null, 'nodes'); }); } -} \ No newline at end of file +} diff --git a/src/compiler/compile/render-dom/wrappers/EachBlock.ts b/src/compiler/compile/render-dom/wrappers/EachBlock.ts index a1a875a12fc3..dddf415557da 100644 --- a/src/compiler/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/EachBlock.ts @@ -190,7 +190,7 @@ export default class EachBlockWrapper extends Wrapper { renderer.blocks.push(deindent` function ${this.vars.get_each_context}(ctx, list, i) { - const child_ctx = Object.create(ctx); + const child_ctx = @Object.create(ctx); ${this.context_props} return child_ctx; } @@ -296,7 +296,7 @@ export default class EachBlockWrapper extends Wrapper { const lookup = block.get_unique_name(`${this.var}_lookup`); block.add_variable(iterations, '[]'); - block.add_variable(lookup, `new Map()`); + block.add_variable(lookup, `new @Map()`); if (this.fragment.nodes[0].is_dom_node()) { this.block.first = this.fragment.nodes[0].var; diff --git a/src/compiler/compile/render-ssr/handlers/InlineComponent.ts b/src/compiler/compile/render-ssr/handlers/InlineComponent.ts index 94fdcfd434b9..2f407df523a0 100644 --- a/src/compiler/compile/render-ssr/handlers/InlineComponent.ts +++ b/src/compiler/compile/render-ssr/handlers/InlineComponent.ts @@ -52,7 +52,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend let props; if (uses_spread) { - props = `Object.assign(${ + props = `@Object.assign(${ node.attributes .map(attribute => { if (attribute.is_spread) { diff --git a/src/runtime/internal/globals.ts b/src/runtime/internal/globals.ts new file mode 100644 index 000000000000..91a8e4a16d48 --- /dev/null +++ b/src/runtime/internal/globals.ts @@ -0,0 +1,5 @@ +import { is_client } from './utils'; + +const { console, Error, Map, Object } = (is_client ? window : global) as { console, Error, Map, Object }; + +export { console, Error, Map, Object }; diff --git a/src/runtime/internal/index.ts b/src/runtime/internal/index.ts index 6487f04525f3..b5ef3e398ef2 100644 --- a/src/runtime/internal/index.ts +++ b/src/runtime/internal/index.ts @@ -1,6 +1,7 @@ export * from './animations'; export * from './await-block'; export * from './dom'; +export * from './globals'; export * from './keyed-each'; export * from './lifecycle'; export * from './loop'; diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 152c0e79b02b..5766ac26a530 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -90,7 +90,7 @@ export function once(fn) { } } -const is_client = typeof window !== 'undefined'; +export const is_client = typeof window !== 'undefined'; export let now: () => number = is_client ? () => window.performance.now() diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 6f079935902e..2e4f9feb1314 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -1,8 +1,11 @@ /* generated by Svelte vX.Y.Z */ import { + Error, + Object, SvelteComponentDev, add_location, append, + console, detach, element, init, 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 eea35d5ba7ae..c083ea29c306 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -1,8 +1,11 @@ /* generated by Svelte vX.Y.Z */ import { + Error, + Object, SvelteComponentDev, add_location, append, + console, destroy_each, detach, element, diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 5b931d94643d..46096466c1ba 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -1,8 +1,11 @@ /* generated by Svelte vX.Y.Z */ import { + Error, + Object, SvelteComponentDev, add_location, append, + console, destroy_each, detach, element, diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index 51d8bf63a3d0..7f1b7535f3e8 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -1,5 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { + Error, SvelteComponentDev, init, noop, diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index 3294778aa32c..85f3c3159769 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -1,5 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { + Object, SvelteComponent, append, destroy_each, 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 5c4b2ece1bdc..d61f8f3de37c 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -1,8 +1,11 @@ /* generated by Svelte vX.Y.Z */ import { + Error, + Object, SvelteComponentDev, add_location, append, + console, detach, element, init, diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index 455cb2f25f57..934c5cfe9227 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -1,5 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { + Object, SvelteComponent, append, destroy_each, diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 951565bae4b0..4ed8756b9a53 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,5 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { + Object, SvelteComponent, append, destroy_each, diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index ec28e60d5f64..9e777f25ee05 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,5 +1,7 @@ /* generated by Svelte vX.Y.Z */ import { + Map, + Object, SvelteComponent, append, create_animation, diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index efb58ebf6ab5..7ac66a09a70d 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -1,5 +1,7 @@ /* generated by Svelte vX.Y.Z */ import { + Map, + Object, SvelteComponent, append, destroy_block, diff --git a/test/runtime/index.js b/test/runtime/index.js index 77879edc1fb6..900f3087fc0f 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -125,6 +125,7 @@ describe("runtime", () => { // Put things we need on window for testing window.SvelteComponent = SvelteComponent; + window.Error = global.Error; const target = window.document.querySelector("main"); From f60ae53d764c6d30a7827d19bc2406796a33fab0 Mon Sep 17 00:00:00 2001 From: mrkishi Date: Thu, 6 Jun 2019 10:29:09 -0300 Subject: [PATCH 2/7] deconflict more globals --- src/compiler/compile/Component.ts | 25 ++++++----- src/compiler/compile/render-dom/Block.ts | 2 +- src/compiler/compile/render-dom/index.ts | 10 +++-- .../compile/render-dom/wrappers/Body.ts | 4 +- .../compile/render-dom/wrappers/DebugTag.ts | 4 +- .../render-dom/wrappers/Element/Binding.ts | 2 +- .../render-dom/wrappers/Element/index.ts | 6 +-- .../compile/render-dom/wrappers/Head.ts | 2 +- .../compile/render-dom/wrappers/IfBlock.ts | 2 +- .../render-dom/wrappers/RawMustacheTag.ts | 2 +- .../compile/render-dom/wrappers/Title.ts | 6 +-- .../compile/render-dom/wrappers/Window.ts | 38 ++++++++--------- .../compile/render-ssr/handlers/Element.ts | 2 +- src/runtime/internal/animations.ts | 2 +- src/runtime/internal/dom.ts | 2 + src/runtime/internal/globals.ts | 42 +++++++++++++++++-- src/runtime/internal/style_manager.ts | 1 + src/runtime/internal/utils.ts | 2 + test/helpers.js | 18 +++++--- test/js/samples/bind-online/expected.js | 4 +- .../expected.js | 1 + test/js/samples/css-media-query/expected.js | 1 + .../css-shadow-dom-keyframes/expected.js | 1 + test/js/samples/debug-hoisted/expected.js | 1 + .../js/samples/head-no-whitespace/expected.js | 1 + test/js/samples/media-bindings/expected.js | 2 + test/js/samples/title/expected.js | 1 + .../samples/window-binding-scroll/expected.js | 5 ++- test/runtime/index.js | 10 +---- .../samples/deconflict-globals/_config.js | 14 +++++++ .../samples/deconflict-globals/main.svelte | 20 +++++++++ test/test.js | 4 ++ 32 files changed, 165 insertions(+), 72 deletions(-) create mode 100644 test/runtime/samples/deconflict-globals/_config.js create mode 100644 test/runtime/samples/deconflict-globals/main.svelte diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 89c1e6b4f6f8..2ad2e2e428f6 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -101,7 +101,7 @@ export default class Component { reactive_declaration_nodes: Set = new Set(); has_reactive_assignments = false; injected_reactive_declaration_vars: Set = new Set(); - helpers: Set = new Set(); + helpers: Map = new Map(); indirect_dependencies: Map> = new Map(); @@ -233,8 +233,9 @@ export default class Component { } helper(name: string) { - this.helpers.add(name); - return this.alias(name); + const alias = this.alias(name) + this.helpers.set(name, alias); + return alias; } generate(result: string) { @@ -251,23 +252,21 @@ export default class Component { .replace(/__svelte:self__/g, this.name) .replace(compile_options.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (_match: string, sigil: string, name: string) => { if (sigil === '@') { - if (internal_exports.has(name)) { - if (compile_options.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`; - this.helpers.add(name); + if (!internal_exports.has(name)) { + throw new Error(`compiler error: this shouldn't happen! generated code is trying to use inexistent internal '${name}'`); + } + + if (compile_options.dev && internal_exports.has(`${name}Dev`)) { + name = `${name}Dev`; } - return this.alias(name); + return this.helper(name); } return sigil.slice(1) + name; }); - const imported_helpers = Array.from(this.helpers) - .sort() - .map(name => { - const alias = this.alias(name); - return { name, alias }; - }); + const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({ name, alias })); const module = create_module( result, diff --git a/src/compiler/compile/render-dom/Block.ts b/src/compiler/compile/render-dom/Block.ts index 0c585c5bf0ae..15e079ceb946 100644 --- a/src/compiler/compile/render-dom/Block.ts +++ b/src/compiler/compile/render-dom/Block.ts @@ -164,7 +164,7 @@ export default class Block { if (parent_node) { this.builders.mount.add_line(`@append(${parent_node}, ${name});`); - if (parent_node === 'document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`); + if (parent_node === '@document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`); } else { this.builders.mount.add_line(`@insert(#target, ${name}, anchor);`); if (!no_detach) this.builders.destroy.add_conditional('detaching', `@detach(${name});`); diff --git a/src/compiler/compile/render-dom/index.ts b/src/compiler/compile/render-dom/index.ts index a9941b838f91..1ba53e769168 100644 --- a/src/compiler/compile/render-dom/index.ts +++ b/src/compiler/compile/render-dom/index.ts @@ -36,13 +36,15 @@ export default function dom( `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` : css.code, { only_escape_at_symbol: true }); + const add_css = component.get_unique_name('add_css'); + if (styles && component.compile_options.css !== false && !options.customElement) { builder.add_block(deindent` - function @add_css() { + function ${add_css}() { var style = @element("style"); style.id = '${component.stylesheet.id}-style'; style.textContent = ${styles}; - @append(document.head, style); + @append(@document.head, style); } `); } @@ -481,7 +483,7 @@ export default function dom( if (component.tag != null) { builder.add_block(deindent` - customElements.define("${component.tag}", ${name}); + @customElements.define("${component.tag}", ${name}); `); } } else { @@ -491,7 +493,7 @@ export default function dom( class ${name} extends @${superclass} { constructor(options) { super(${options.dev && `options`}); - ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`} + ${should_add_css && `if (!@document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`} @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/compiler/compile/render-dom/wrappers/Body.ts b/src/compiler/compile/render-dom/wrappers/Body.ts index 04e677a09024..feb28ef8f690 100644 --- a/src/compiler/compile/render-dom/wrappers/Body.ts +++ b/src/compiler/compile/render-dom/wrappers/Body.ts @@ -11,11 +11,11 @@ export default class BodyWrapper extends Wrapper { const snippet = handler.render(block); block.builders.init.add_block(deindent` - document.body.addEventListener("${handler.name}", ${snippet}); + @document.body.addEventListener("${handler.name}", ${snippet}); `); block.builders.destroy.add_block(deindent` - document.body.removeEventListener("${handler.name}", ${snippet}); + @document.body.removeEventListener("${handler.name}", ${snippet}); `); }); } diff --git a/src/compiler/compile/render-dom/wrappers/DebugTag.ts b/src/compiler/compile/render-dom/wrappers/DebugTag.ts index 713113921dfe..a600e2629761 100644 --- a/src/compiler/compile/render-dom/wrappers/DebugTag.ts +++ b/src/compiler/compile/render-dom/wrappers/DebugTag.ts @@ -62,7 +62,7 @@ export default class DebugTagWrapper extends Wrapper { block.builders.update.add_block(deindent` if (${condition}) { const { ${ctx_identifiers} } = ctx; - console.${log}({ ${logged_identifiers} }); + @console.${log}({ ${logged_identifiers} }); debugger; } `); @@ -70,7 +70,7 @@ export default class DebugTagWrapper extends Wrapper { block.builders.create.add_block(deindent` { const { ${ctx_identifiers} } = ctx; - console.${log}({ ${logged_identifiers} }); + @console.${log}({ ${logged_identifiers} }); debugger; } `); diff --git a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts index 15ceabb356bd..dd3127877412 100644 --- a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts @@ -136,7 +136,7 @@ export default class BindingWrapper { case 'currentTime': case 'playbackRate': case 'volume': - update_conditions.push(`!isNaN(${this.snippet})`); + update_conditions.push(`!@isNaN(${this.snippet})`); break; case 'paused': diff --git a/src/compiler/compile/render-dom/wrappers/Element/index.ts b/src/compiler/compile/render-dom/wrappers/Element/index.ts index 2f7452e8c6fe..3602ad301dd6 100644 --- a/src/compiler/compile/render-dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render-dom/wrappers/Element/index.ts @@ -270,7 +270,7 @@ export default class ElementWrapper extends Wrapper { `@append(${parent_node}, ${node});` ); - if (parent_node === 'document.head') { + if (parent_node === '@document.head') { block.builders.destroy.add_line(`@detach(${node});`); } } else { @@ -379,7 +379,7 @@ export default class ElementWrapper extends Wrapper { } if (namespace) { - return `document.createElementNS("${namespace}", "${name}")`; + return `@document.createElementNS("${namespace}", "${name}")`; } return `@element("${name}")`; @@ -465,7 +465,7 @@ export default class ElementWrapper extends Wrapper { block.builders.init.add_block(deindent` function ${handler}() { ${animation_frame && deindent` - cancelAnimationFrame(${animation_frame}); + @cancelAnimationFrame(${animation_frame}); if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`} ${needs_lock && `${lock} = true;`} ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''}); diff --git a/src/compiler/compile/render-dom/wrappers/Head.ts b/src/compiler/compile/render-dom/wrappers/Head.ts index d942a69dc27b..794506f1be33 100644 --- a/src/compiler/compile/render-dom/wrappers/Head.ts +++ b/src/compiler/compile/render-dom/wrappers/Head.ts @@ -30,6 +30,6 @@ export default class HeadWrapper extends Wrapper { } render(block: Block, _parent_node: string, _parent_nodes: string) { - this.fragment.render(block, 'document.head', 'nodes'); + this.fragment.render(block, '@document.head', 'nodes'); } } diff --git a/src/compiler/compile/render-dom/wrappers/IfBlock.ts b/src/compiler/compile/render-dom/wrappers/IfBlock.ts index 46f17653a12f..3634091b9964 100644 --- a/src/compiler/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/IfBlock.ts @@ -154,7 +154,7 @@ export default class IfBlockWrapper extends Wrapper { const vars = { name, anchor, if_name, has_else, has_transitions }; - const detaching = (parent_node && parent_node !== 'document.head') ? '' : 'detaching'; + const detaching = (parent_node && parent_node !== '@document.head') ? '' : 'detaching'; if (this.node.else) { if (has_outros) { diff --git a/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts index 15a7d41861b5..3f09b134f82f 100644 --- a/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts @@ -22,7 +22,7 @@ export default class RawMustacheTagWrapper extends Tag { render(block: Block, parent_node: string, parent_nodes: string) { const name = this.var; - const in_head = parent_node === 'document.head'; + const in_head = parent_node === '@document.head'; const needs_anchors = !parent_node || in_head; // if in head always needs anchors diff --git a/src/compiler/compile/render-dom/wrappers/Title.ts b/src/compiler/compile/render-dom/wrappers/Title.ts index 456a833a8f29..c7f702916c21 100644 --- a/src/compiler/compile/render-dom/wrappers/Title.ts +++ b/src/compiler/compile/render-dom/wrappers/Title.ts @@ -68,9 +68,9 @@ export default class TitleWrapper extends Wrapper { const init = this.node.should_cache ? `${last} = ${value}` : value; block.builders.init.add_line( - `document.title = ${init};` + `@document.title = ${init};` ); - const updater = `document.title = ${this.node.should_cache ? last : value};`; + const updater = `@document.title = ${this.node.should_cache ? last : value};`; if (all_dependencies.size) { const dependencies = Array.from(all_dependencies); @@ -95,7 +95,7 @@ export default class TitleWrapper extends Wrapper { ? stringify((this.node.children[0] as Text).data) : '""'; - block.builders.hydrate.add_line(`document.title = ${value};`); + block.builders.hydrate.add_line(`@document.title = ${value};`); } } } diff --git a/src/compiler/compile/render-dom/wrappers/Window.ts b/src/compiler/compile/render-dom/wrappers/Window.ts index 585864664aed..c267b806c9de 100644 --- a/src/compiler/compile/render-dom/wrappers/Window.ts +++ b/src/compiler/compile/render-dom/wrappers/Window.ts @@ -44,8 +44,8 @@ export default class WindowWrapper extends Wrapper { const events = {}; const bindings: Record = {}; - add_actions(component, block, 'window', this.node.actions); - add_event_handlers(block, 'window', this.node.handlers); + add_actions(component, block, '@window', this.node.actions); + add_event_handlers(block, '@window', this.node.handlers); this.node.bindings.forEach(binding => { // in dev mode, throw if read-only values are written to @@ -92,29 +92,29 @@ export default class WindowWrapper extends Wrapper { renderer.meta_bindings.add_block(deindent` if (${condition}) { - window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'}); + @window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'}); } - ${x && `${x} = window.pageXOffset;`} - ${y && `${y} = window.pageYOffset;`} + ${x && `${x} = @window.pageXOffset;`} + ${y && `${y} = @window.pageYOffset;`} `); block.event_listeners.push(deindent` - @listen(window, "${event}", () => { + @listen(@window, "${event}", () => { ${scrolling} = true; - clearTimeout(${scrolling_timeout}); - ${scrolling_timeout} = setTimeout(${clear_scrolling}, 100); + @clearTimeout(${scrolling_timeout}); + ${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100); ctx.${handler_name}(); }) `); } else { props.forEach(prop => { renderer.meta_bindings.add_line( - `this._state.${prop.name} = window.${prop.value};` + `this._state.${prop.name} = @window.${prop.value};` ); }); block.event_listeners.push(deindent` - @listen(window, "${event}", ctx.${handler_name}) + @listen(@window, "${event}", ctx.${handler_name}) `); } @@ -126,7 +126,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(deindent` function ${handler_name}() { - ${props.map(prop => `${prop.name} = window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)} + ${props.map(prop => `${prop.name} = @window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)} } `); @@ -146,13 +146,13 @@ export default class WindowWrapper extends Wrapper { ).join(' || ') } && !${scrolling}) { ${scrolling} = true; - clearTimeout(${scrolling_timeout}); - window.scrollTo(${ - bindings.scrollX ? `ctx.${bindings.scrollX}` : `window.pageXOffset` + @clearTimeout(${scrolling_timeout}); + @window.scrollTo(${ + bindings.scrollX ? `ctx.${bindings.scrollX}` : `@window.pageXOffset` }, ${ - bindings.scrollY ? `ctx.${bindings.scrollY}` : `window.pageYOffset` + bindings.scrollY ? `ctx.${bindings.scrollY}` : `@window.pageYOffset` }); - ${scrolling_timeout} = setTimeout(${clear_scrolling}, 100); + ${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100); } `); } @@ -170,7 +170,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(deindent` function ${handler_name}() { - ${name} = navigator.onLine; $$invalidate('${name}', ${name}); + ${name} = @navigator.onLine; $$invalidate('${name}', ${name}); } `); @@ -179,8 +179,8 @@ export default class WindowWrapper extends Wrapper { `); block.event_listeners.push( - `@listen(window, "online", ctx.${handler_name})`, - `@listen(window, "offline", ctx.${handler_name})` + `@listen(@window, "online", ctx.${handler_name})`, + `@listen(@window, "offline", ctx.${handler_name})` ); component.has_reactive_assignments = true; diff --git a/src/compiler/compile/render-ssr/handlers/Element.ts b/src/compiler/compile/render-ssr/handlers/Element.ts index 681e0d4c7b48..637b76aad597 100644 --- a/src/compiler/compile/render-ssr/handlers/Element.ts +++ b/src/compiler/compile/render-ssr/handlers/Element.ts @@ -163,7 +163,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption node_contents='${(' + snippet + ') || ""}'; } else { const snippet = snip(expression); - opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}'; + opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + @JSON.stringify(v))) : "")(' + snippet + ')}'; } }); diff --git a/src/runtime/internal/animations.ts b/src/runtime/internal/animations.ts index 77c86aff0e3d..0997e9ae2346 100644 --- a/src/runtime/internal/animations.ts +++ b/src/runtime/internal/animations.ts @@ -2,7 +2,7 @@ import { identity as linear, noop, now } from './utils'; import { loop } from './loop'; import { create_rule, delete_rule } from './style_manager'; import { AnimationConfig } from '../animate'; - +import { getComputedStyle } from './globals'; //todo: documentation says it is DOMRect, but in IE it would be ClientRect type PositionRect = DOMRect|ClientRect; diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index f65d07117ce9..c1e16de44733 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,3 +1,5 @@ +import { document, getComputedStyle, navigator } from './globals'; + export function append(target: Node, node: Node) { target.appendChild(node); } diff --git a/src/runtime/internal/globals.ts b/src/runtime/internal/globals.ts index 91a8e4a16d48..789290388e6e 100644 --- a/src/runtime/internal/globals.ts +++ b/src/runtime/internal/globals.ts @@ -1,5 +1,41 @@ -import { is_client } from './utils'; +const { + // ecmascript + Error, + JSON, + Map, + Object, + console, + isNaN, -const { console, Error, Map, Object } = (is_client ? window : global) as { console, Error, Map, Object }; + // dom + cancelAnimationFrame, + clearTimeout, + customElements, + document, + getComputedStyle, + navigator, + requestAnimationFrame, + setTimeout: export_setTimeout, // TODO: remove when upgrading typescript, bug + window: export_window, +} = (window || global) as unknown as typeof globalThis; -export { console, Error, Map, Object }; +export { + // ecmascript + Error, + JSON, + Map, + Object, + console, + isNaN, + + // dom + cancelAnimationFrame, + clearTimeout, + customElements, + document, + getComputedStyle, + navigator, + requestAnimationFrame, + export_setTimeout as setTimeout, + export_window as window, +}; diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts index 2721200627f2..db8c0e9d177e 100644 --- a/src/runtime/internal/style_manager.ts +++ b/src/runtime/internal/style_manager.ts @@ -1,5 +1,6 @@ import { element } from './dom'; import { raf } from './utils'; +import { document } from './globals'; let stylesheet; let active = 0; diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 5766ac26a530..8624c2246a63 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -1,3 +1,5 @@ +import { requestAnimationFrame } from './globals'; + export function noop() {} export const identity = x => x; diff --git a/test/helpers.js b/test/helpers.js index e07d7c9b0676..2e6878f8a5ac 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -28,7 +28,7 @@ export function exists(path) { export function tryToLoadJson(file) { try { - return JSON.parse(fs.readFileSync(file)); + return JSON.parse(fs.readFileSync(file, 'utf-8')); } catch (err) { if (err.code !== 'ENOENT') throw err; return null; @@ -44,14 +44,20 @@ export function tryToReadFile(file) { } } -export const virtualConsole = new jsdom.VirtualConsole(); -const { window } = new jsdom.JSDOM('
', {virtualConsole}); +const virtualConsole = new jsdom.VirtualConsole(); +virtualConsole.sendTo(console); + +global.window = new jsdom.JSDOM('
', {virtualConsole}).window; global.document = window.document; -global.getComputedStyle = window.getComputedStyle; -global.navigator = {userAgent: 'fake'}; + +// add missing ecmascript globals to window +for (const key of Object.getOwnPropertyNames(global)) { + window[key] = window[key] || global[key]; +} export function env() { window._svelteTransitionManager = null; + window.document.title = ''; window.document.body.innerHTML = '
'; return window; @@ -120,7 +126,7 @@ export function normalizeHtml(window, html) { .replace(//g, '') .replace(/>[\s\r\n]+<') .trim(); - cleanChildren(node, ''); + cleanChildren(node); return node.innerHTML.replace(/<\/?noscript\/?>/g, ''); } catch (err) { throw new Error(`Failed to normalize HTML:\n${html}`); diff --git a/test/js/samples/bind-online/expected.js b/test/js/samples/bind-online/expected.js index 0c9faa3ef6f8..9c3fdb73855e 100644 --- a/test/js/samples/bind-online/expected.js +++ b/test/js/samples/bind-online/expected.js @@ -4,9 +4,11 @@ import { add_render_callback, init, listen, + navigator, noop, run_all, - safe_not_equal + safe_not_equal, + window } from "svelte/internal"; function create_fragment(ctx) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 12164d0579b0..ed01b6430f2e 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -3,6 +3,7 @@ import { SvelteComponent, append, detach, + document, element, init, insert, diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index d4be134376cc..8a99d70e8e2a 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -3,6 +3,7 @@ import { SvelteComponent, append, detach, + document, element, init, insert, diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 9f70b8ec66b2..3be52803d700 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,6 +1,7 @@ /* generated by Svelte vX.Y.Z */ import { SvelteElement, + customElements, detach, element, init, diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index 7f1b7535f3e8..799f0d4b32c7 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -2,6 +2,7 @@ import { Error, SvelteComponentDev, + console, init, noop, safe_not_equal diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index b95177bba781..859891e68902 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -3,6 +3,7 @@ import { SvelteComponent, append, detach, + document, element, init, noop, diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index f45f9ce8dbfb..ec30a9816146 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -2,10 +2,12 @@ import { SvelteComponent, add_render_callback, + cancelAnimationFrame, detach, element, init, insert, + isNaN, listen, noop, raf, diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js index 884f39e246e9..2e551ae42684 100644 --- a/test/js/samples/title/expected.js +++ b/test/js/samples/title/expected.js @@ -1,6 +1,7 @@ /* generated by Svelte vX.Y.Z */ import { SvelteComponent, + document, init, noop, safe_not_equal diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 18f5210bea7e..1e63973518c0 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -3,6 +3,7 @@ import { SvelteComponent, add_render_callback, append, + clearTimeout, detach, element, init, @@ -10,8 +11,10 @@ import { listen, noop, safe_not_equal, + setTimeout, set_data, - text + text, + window } from "svelte/internal"; function create_fragment(ctx) { diff --git a/test/runtime/index.js b/test/runtime/index.js index 900f3087fc0f..87be528a61a3 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -3,7 +3,7 @@ import * as path from "path"; import * as fs from "fs"; import { rollup } from 'rollup'; import * as virtual from 'rollup-plugin-virtual'; -import { clear_loops, set_now, set_raf } from "../../internal"; +import { clear_loops, flush, set_now, set_raf } from "../../internal"; import { showOutput, @@ -20,7 +20,6 @@ let compileOptions = null; let compile = null; const sveltePath = process.cwd().split('\\').join('/'); -const internal = `${sveltePath}/internal`; describe("runtime", () => { before(() => { @@ -47,8 +46,6 @@ describe("runtime", () => { function runTest(dir, hydrate) { if (dir[0] === ".") return; - const { flush } = require(internal); - const config = loadConfig(`./runtime/samples/${dir}/_config.js`); if (hydrate && config.skip_if_hydrate) return; @@ -66,7 +63,6 @@ describe("runtime", () => { compile = (config.preserveIdentifiers ? svelte : svelte$).compile; const cwd = path.resolve(`test/runtime/samples/${dir}`); - global.document.title = ''; compileOptions = config.compileOptions || {}; compileOptions.sveltePath = sveltePath; @@ -119,13 +115,10 @@ describe("runtime", () => { throw err; } - global.window = window; - if (config.before_test) config.before_test(); // Put things we need on window for testing window.SvelteComponent = SvelteComponent; - window.Error = global.Error; const target = window.document.querySelector("main"); @@ -222,6 +215,7 @@ describe("runtime", () => { 'main.js': js.code }), { + name: 'svelte-packages', resolveId: (importee, importer) => { if (importee.startsWith('svelte/')) { return importee.replace('svelte', process.cwd()) + '/index.mjs'; diff --git a/test/runtime/samples/deconflict-globals/_config.js b/test/runtime/samples/deconflict-globals/_config.js new file mode 100644 index 000000000000..c29f022a37d5 --- /dev/null +++ b/test/runtime/samples/deconflict-globals/_config.js @@ -0,0 +1,14 @@ +export default { + preserveIdentifiers: true, + compileOptions: { + name: 'window' + }, + + html: ` +

I hereby declare Svelte the bestest framework.

+

nintendo sixty four

+

Woops.

+

42

+

false

+ ` +}; diff --git a/test/runtime/samples/deconflict-globals/main.svelte b/test/runtime/samples/deconflict-globals/main.svelte new file mode 100644 index 000000000000..d1928ea5335d --- /dev/null +++ b/test/runtime/samples/deconflict-globals/main.svelte @@ -0,0 +1,20 @@ + + + + Cute test + + + + + +{#each everyone as someone (someone)} +

{someone}

+{/each} diff --git a/test/test.js b/test/test.js index 7759941dbb6c..cb89b3e9d1ad 100644 --- a/test/test.js +++ b/test/test.js @@ -2,6 +2,10 @@ const glob = require("tiny-glob/sync.js"); require("./setup"); +// bind internal to jsdom +require("./helpers"); +require("../internal"); + glob("*/index.{js,ts}", { cwd: "test" }).forEach((file) => { require("./" + file); }); From 788cf97a93343b7f80985ba4e31dd67312786d8f Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 9 Jun 2019 11:27:03 -0400 Subject: [PATCH 3/7] prevent compiled output blowing up in Node if window is not defined --- src/runtime/internal/globals.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/runtime/internal/globals.ts b/src/runtime/internal/globals.ts index 789290388e6e..314f17dfebbd 100644 --- a/src/runtime/internal/globals.ts +++ b/src/runtime/internal/globals.ts @@ -1,3 +1,5 @@ +const win = typeof window !== 'undefined' ? window : global; + const { // ecmascript Error, @@ -15,9 +17,8 @@ const { getComputedStyle, navigator, requestAnimationFrame, - setTimeout: export_setTimeout, // TODO: remove when upgrading typescript, bug - window: export_window, -} = (window || global) as unknown as typeof globalThis; + setTimeout: export_setTimeout // TODO: remove when upgrading typescript, bug +} = win as unknown as typeof globalThis; export { // ecmascript @@ -37,5 +38,5 @@ export { navigator, requestAnimationFrame, export_setTimeout as setTimeout, - export_window as window, + win as window, }; From cd4c2f2075bbf720f630cfa74b29b65997b27a27 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 12 Jun 2019 21:09:42 -0400 Subject: [PATCH 4/7] use `@_` sigil for globals --- src/compiler/compile/Component.ts | 16 +++++++ src/compiler/compile/create_module.ts | 15 ++++++- src/compiler/compile/render-dom/Block.ts | 2 +- src/compiler/compile/render-dom/index.ts | 18 ++++---- .../compile/render-dom/wrappers/Body.ts | 4 +- .../compile/render-dom/wrappers/DebugTag.ts | 4 +- .../compile/render-dom/wrappers/EachBlock.ts | 4 +- .../render-dom/wrappers/Element/Binding.ts | 2 +- .../render-dom/wrappers/Element/index.ts | 6 +-- .../compile/render-dom/wrappers/Head.ts | 2 +- .../compile/render-dom/wrappers/IfBlock.ts | 2 +- .../render-dom/wrappers/RawMustacheTag.ts | 2 +- .../compile/render-dom/wrappers/Title.ts | 6 +-- .../compile/render-dom/wrappers/Window.ts | 38 ++++++++-------- .../compile/render-ssr/handlers/Element.ts | 2 +- .../render-ssr/handlers/InlineComponent.ts | 2 +- src/runtime/internal/animations.ts | 2 +- src/runtime/internal/dom.ts | 2 - src/runtime/internal/globals.ts | 43 +------------------ src/runtime/internal/style_manager.ts | 1 - src/runtime/internal/utils.ts | 2 - 21 files changed, 78 insertions(+), 97 deletions(-) diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 2ad2e2e428f6..c4924697f81e 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -102,6 +102,7 @@ export default class Component { has_reactive_assignments = false; injected_reactive_declaration_vars: Set = new Set(); helpers: Map = new Map(); + globals: Map = new Map(); indirect_dependencies: Map> = new Map(); @@ -238,6 +239,12 @@ export default class Component { return alias; } + global(name: string) { + const alias = this.alias(name); + this.globals.set(name, alias); + return alias; + } + generate(result: string) { let js = null; let css = null; @@ -252,6 +259,10 @@ export default class Component { .replace(/__svelte:self__/g, this.name) .replace(compile_options.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (_match: string, sigil: string, name: string) => { if (sigil === '@') { + if (name[0] === '_') { + return this.global(name.slice(1)); + } + if (!internal_exports.has(name)) { throw new Error(`compiler error: this shouldn't happen! generated code is trying to use inexistent internal '${name}'`); } @@ -266,6 +277,10 @@ export default class Component { return sigil.slice(1) + name; }); + const referenced_globals = Array.from(this.globals, ([name, alias]) => name !== alias && ({ name, alias })).filter(Boolean); + if (referenced_globals.length) { + this.helper('globals'); + } const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({ name, alias })); const module = create_module( @@ -275,6 +290,7 @@ export default class Component { banner, compile_options.sveltePath, imported_helpers, + referenced_globals, this.imports, this.vars.filter(variable => variable.module && variable.export_name).map(variable => ({ name: variable.name, diff --git a/src/compiler/compile/create_module.ts b/src/compiler/compile/create_module.ts index 54b891d4ac1b..79cb33549c48 100644 --- a/src/compiler/compile/create_module.ts +++ b/src/compiler/compile/create_module.ts @@ -17,6 +17,7 @@ export default function create_module( banner: string, sveltePath = 'svelte', helpers: Array<{ name: string; alias: string }>, + globals: Array<{ name: string; alias: string }>, imports: Node[], module_exports: Export[], source: string @@ -24,10 +25,10 @@ export default function create_module( const internal_path = `${sveltePath}/internal`; if (format === 'esm') { - return esm(code, name, banner, sveltePath, internal_path, helpers, imports, module_exports, source); + return esm(code, name, banner, sveltePath, internal_path, helpers, globals, imports, module_exports, source); } - if (format === 'cjs') return cjs(code, name, banner, sveltePath, internal_path, helpers, imports, module_exports); + if (format === 'cjs') return cjs(code, name, banner, sveltePath, internal_path, helpers, globals, imports, module_exports); throw new Error(`options.format is invalid (must be ${list(Object.keys(wrappers))})`); } @@ -45,6 +46,7 @@ function esm( sveltePath: string, internal_path: string, helpers: Array<{ name: string; alias: string }>, + globals: Array<{ name: string; alias: string }>, imports: Node[], module_exports: Export[], source: string @@ -52,6 +54,9 @@ function esm( const internal_imports = helpers.length > 0 && ( `import ${stringify_props(helpers.map(h => h.name === h.alias ? h.name : `${h.name} as ${h.alias}`).sort())} from ${JSON.stringify(internal_path)};` ); + const internal_globals = globals.length > 0 && ( + `const ${stringify_props(globals.map(g => `${g.name}: ${g.alias}`).sort())} = ${helpers.find(({ name }) => name === 'globals').alias};` + ); const user_imports = imports.length > 0 && ( imports @@ -70,6 +75,7 @@ function esm( return deindent` ${banner} ${internal_imports} + ${internal_globals} ${user_imports} ${code} @@ -85,6 +91,7 @@ function cjs( sveltePath: string, internal_path: string, helpers: Array<{ name: string; alias: string }>, + globals: Array<{ name: string; alias: string }>, imports: Node[], module_exports: Export[] ) { @@ -93,6 +100,9 @@ function cjs( const internal_imports = helpers.length > 0 && ( `const ${stringify_props(declarations)} = require(${JSON.stringify(internal_path)});\n` ); + const internal_globals = globals.length > 0 && ( + `const ${stringify_props(globals.map(g => `${g.name}: ${g.alias}`).sort())} = ${helpers.find(({ name }) => name === 'globals').alias};` + ); const requires = imports.map(node => { let lhs; @@ -127,6 +137,7 @@ function cjs( "use strict"; ${internal_imports} + ${internal_globals} ${requires} ${code} diff --git a/src/compiler/compile/render-dom/Block.ts b/src/compiler/compile/render-dom/Block.ts index 15e079ceb946..d7986e167b2d 100644 --- a/src/compiler/compile/render-dom/Block.ts +++ b/src/compiler/compile/render-dom/Block.ts @@ -164,7 +164,7 @@ export default class Block { if (parent_node) { this.builders.mount.add_line(`@append(${parent_node}, ${name});`); - if (parent_node === '@document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`); + if (parent_node === '@_document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`); } else { this.builders.mount.add_line(`@insert(#target, ${name}, anchor);`); if (!no_detach) this.builders.destroy.add_conditional('detaching', `@detach(${name});`); diff --git a/src/compiler/compile/render-dom/index.ts b/src/compiler/compile/render-dom/index.ts index 1ba53e769168..3dec1a81b3c9 100644 --- a/src/compiler/compile/render-dom/index.ts +++ b/src/compiler/compile/render-dom/index.ts @@ -44,7 +44,7 @@ export default function dom( var style = @element("style"); style.id = '${component.stylesheet.id}-style'; style.textContent = ${styles}; - @append(@document.head, style); + @append(@_document.head, style); } `); } @@ -59,7 +59,7 @@ export default function dom( if (options.dev && !options.hydratable) { block.builders.claim.add_line( - 'throw new @Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");' + 'throw new @_Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");' ); } @@ -108,7 +108,7 @@ export default function dom( } else if (component.compile_options.dev) { body.push(deindent` get ${x.export_name}() { - throw new @Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + throw new @_Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); } `); } @@ -124,14 +124,14 @@ export default function dom( } else if (component.compile_options.dev) { body.push(deindent` set ${x.export_name}(value) { - throw new @Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'"); + throw new @_Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'"); } `); } } else if (component.compile_options.dev) { body.push(deindent` set ${x.export_name}(value) { - throw new @Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + throw new @_Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); } `); } @@ -147,7 +147,7 @@ export default function dom( const props = ${options.customElement ? `this.attributes` : `options.props || {}`}; ${expected.map(prop => deindent` if (ctx.${prop.name} === undefined && !('${prop.export_name}' in props)) { - @console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); + @_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); }`)} `; } @@ -404,7 +404,7 @@ export default function dom( if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) { unknown_props_check = deindent` const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; - @Object.keys($$props).forEach(key => { + @_Object.keys($$props).forEach(key => { if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; @@ -483,7 +483,7 @@ export default function dom( if (component.tag != null) { builder.add_block(deindent` - @customElements.define("${component.tag}", ${name}); + @_customElements.define("${component.tag}", ${name}); `); } } else { @@ -493,7 +493,7 @@ export default function dom( class ${name} extends @${superclass} { constructor(options) { super(${options.dev && `options`}); - ${should_add_css && `if (!@document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`} + ${should_add_css && `if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`} @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/compiler/compile/render-dom/wrappers/Body.ts b/src/compiler/compile/render-dom/wrappers/Body.ts index feb28ef8f690..623625ce6d36 100644 --- a/src/compiler/compile/render-dom/wrappers/Body.ts +++ b/src/compiler/compile/render-dom/wrappers/Body.ts @@ -11,11 +11,11 @@ export default class BodyWrapper extends Wrapper { const snippet = handler.render(block); block.builders.init.add_block(deindent` - @document.body.addEventListener("${handler.name}", ${snippet}); + @_document.body.addEventListener("${handler.name}", ${snippet}); `); block.builders.destroy.add_block(deindent` - @document.body.removeEventListener("${handler.name}", ${snippet}); + @_document.body.removeEventListener("${handler.name}", ${snippet}); `); }); } diff --git a/src/compiler/compile/render-dom/wrappers/DebugTag.ts b/src/compiler/compile/render-dom/wrappers/DebugTag.ts index a600e2629761..6705b51cc557 100644 --- a/src/compiler/compile/render-dom/wrappers/DebugTag.ts +++ b/src/compiler/compile/render-dom/wrappers/DebugTag.ts @@ -62,7 +62,7 @@ export default class DebugTagWrapper extends Wrapper { block.builders.update.add_block(deindent` if (${condition}) { const { ${ctx_identifiers} } = ctx; - @console.${log}({ ${logged_identifiers} }); + @_console.${log}({ ${logged_identifiers} }); debugger; } `); @@ -70,7 +70,7 @@ export default class DebugTagWrapper extends Wrapper { block.builders.create.add_block(deindent` { const { ${ctx_identifiers} } = ctx; - @console.${log}({ ${logged_identifiers} }); + @_console.${log}({ ${logged_identifiers} }); debugger; } `); diff --git a/src/compiler/compile/render-dom/wrappers/EachBlock.ts b/src/compiler/compile/render-dom/wrappers/EachBlock.ts index dddf415557da..3ce2a342a3d5 100644 --- a/src/compiler/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/EachBlock.ts @@ -190,7 +190,7 @@ export default class EachBlockWrapper extends Wrapper { renderer.blocks.push(deindent` function ${this.vars.get_each_context}(ctx, list, i) { - const child_ctx = @Object.create(ctx); + const child_ctx = @_Object.create(ctx); ${this.context_props} return child_ctx; } @@ -296,7 +296,7 @@ export default class EachBlockWrapper extends Wrapper { const lookup = block.get_unique_name(`${this.var}_lookup`); block.add_variable(iterations, '[]'); - block.add_variable(lookup, `new @Map()`); + block.add_variable(lookup, `new @_Map()`); if (this.fragment.nodes[0].is_dom_node()) { this.block.first = this.fragment.nodes[0].var; diff --git a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts index dd3127877412..5b1fe6dee1f7 100644 --- a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts @@ -136,7 +136,7 @@ export default class BindingWrapper { case 'currentTime': case 'playbackRate': case 'volume': - update_conditions.push(`!@isNaN(${this.snippet})`); + update_conditions.push(`!@_isNaN(${this.snippet})`); break; case 'paused': diff --git a/src/compiler/compile/render-dom/wrappers/Element/index.ts b/src/compiler/compile/render-dom/wrappers/Element/index.ts index 3602ad301dd6..1b192814617c 100644 --- a/src/compiler/compile/render-dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render-dom/wrappers/Element/index.ts @@ -270,7 +270,7 @@ export default class ElementWrapper extends Wrapper { `@append(${parent_node}, ${node});` ); - if (parent_node === '@document.head') { + if (parent_node === '@_document.head') { block.builders.destroy.add_line(`@detach(${node});`); } } else { @@ -379,7 +379,7 @@ export default class ElementWrapper extends Wrapper { } if (namespace) { - return `@document.createElementNS("${namespace}", "${name}")`; + return `@_document.createElementNS("${namespace}", "${name}")`; } return `@element("${name}")`; @@ -465,7 +465,7 @@ export default class ElementWrapper extends Wrapper { block.builders.init.add_block(deindent` function ${handler}() { ${animation_frame && deindent` - @cancelAnimationFrame(${animation_frame}); + @_cancelAnimationFrame(${animation_frame}); if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`} ${needs_lock && `${lock} = true;`} ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''}); diff --git a/src/compiler/compile/render-dom/wrappers/Head.ts b/src/compiler/compile/render-dom/wrappers/Head.ts index 794506f1be33..a5226e7efa2d 100644 --- a/src/compiler/compile/render-dom/wrappers/Head.ts +++ b/src/compiler/compile/render-dom/wrappers/Head.ts @@ -30,6 +30,6 @@ export default class HeadWrapper extends Wrapper { } render(block: Block, _parent_node: string, _parent_nodes: string) { - this.fragment.render(block, '@document.head', 'nodes'); + this.fragment.render(block, '@_document.head', 'nodes'); } } diff --git a/src/compiler/compile/render-dom/wrappers/IfBlock.ts b/src/compiler/compile/render-dom/wrappers/IfBlock.ts index 3634091b9964..bce4743488fb 100644 --- a/src/compiler/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/IfBlock.ts @@ -154,7 +154,7 @@ export default class IfBlockWrapper extends Wrapper { const vars = { name, anchor, if_name, has_else, has_transitions }; - const detaching = (parent_node && parent_node !== '@document.head') ? '' : 'detaching'; + const detaching = (parent_node && parent_node !== '@_document.head') ? '' : 'detaching'; if (this.node.else) { if (has_outros) { diff --git a/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts index 3f09b134f82f..f85c48935e68 100644 --- a/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts @@ -22,7 +22,7 @@ export default class RawMustacheTagWrapper extends Tag { render(block: Block, parent_node: string, parent_nodes: string) { const name = this.var; - const in_head = parent_node === '@document.head'; + const in_head = parent_node === '@_document.head'; const needs_anchors = !parent_node || in_head; // if in head always needs anchors diff --git a/src/compiler/compile/render-dom/wrappers/Title.ts b/src/compiler/compile/render-dom/wrappers/Title.ts index c7f702916c21..302c9f1aa960 100644 --- a/src/compiler/compile/render-dom/wrappers/Title.ts +++ b/src/compiler/compile/render-dom/wrappers/Title.ts @@ -68,9 +68,9 @@ export default class TitleWrapper extends Wrapper { const init = this.node.should_cache ? `${last} = ${value}` : value; block.builders.init.add_line( - `@document.title = ${init};` + `@_document.title = ${init};` ); - const updater = `@document.title = ${this.node.should_cache ? last : value};`; + const updater = `@_document.title = ${this.node.should_cache ? last : value};`; if (all_dependencies.size) { const dependencies = Array.from(all_dependencies); @@ -95,7 +95,7 @@ export default class TitleWrapper extends Wrapper { ? stringify((this.node.children[0] as Text).data) : '""'; - block.builders.hydrate.add_line(`@document.title = ${value};`); + block.builders.hydrate.add_line(`@_document.title = ${value};`); } } } diff --git a/src/compiler/compile/render-dom/wrappers/Window.ts b/src/compiler/compile/render-dom/wrappers/Window.ts index c267b806c9de..8c8e6c623def 100644 --- a/src/compiler/compile/render-dom/wrappers/Window.ts +++ b/src/compiler/compile/render-dom/wrappers/Window.ts @@ -44,8 +44,8 @@ export default class WindowWrapper extends Wrapper { const events = {}; const bindings: Record = {}; - add_actions(component, block, '@window', this.node.actions); - add_event_handlers(block, '@window', this.node.handlers); + add_actions(component, block, '@_window', this.node.actions); + add_event_handlers(block, '@_window', this.node.handlers); this.node.bindings.forEach(binding => { // in dev mode, throw if read-only values are written to @@ -92,29 +92,29 @@ export default class WindowWrapper extends Wrapper { renderer.meta_bindings.add_block(deindent` if (${condition}) { - @window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'}); + @_scrollTo(${x || '@_pageXOffset'}, ${y || '@pageYOffset'}); } - ${x && `${x} = @window.pageXOffset;`} - ${y && `${y} = @window.pageYOffset;`} + ${x && `${x} = @_pageXOffset;`} + ${y && `${y} = @_pageYOffset;`} `); block.event_listeners.push(deindent` - @listen(@window, "${event}", () => { + @listen(@_window, "${event}", () => { ${scrolling} = true; - @clearTimeout(${scrolling_timeout}); - ${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100); + @_clearTimeout(${scrolling_timeout}); + ${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100); ctx.${handler_name}(); }) `); } else { props.forEach(prop => { renderer.meta_bindings.add_line( - `this._state.${prop.name} = @window.${prop.value};` + `this._state.${prop.name} = @_window.${prop.value};` ); }); block.event_listeners.push(deindent` - @listen(@window, "${event}", ctx.${handler_name}) + @listen(@_window, "${event}", ctx.${handler_name}) `); } @@ -126,7 +126,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(deindent` function ${handler_name}() { - ${props.map(prop => `${prop.name} = @window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)} + ${props.map(prop => `${prop.name} = @_window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)} } `); @@ -146,13 +146,13 @@ export default class WindowWrapper extends Wrapper { ).join(' || ') } && !${scrolling}) { ${scrolling} = true; - @clearTimeout(${scrolling_timeout}); - @window.scrollTo(${ - bindings.scrollX ? `ctx.${bindings.scrollX}` : `@window.pageXOffset` + @_clearTimeout(${scrolling_timeout}); + @_scrollTo(${ + bindings.scrollX ? `ctx.${bindings.scrollX}` : `@_pageXOffset` }, ${ - bindings.scrollY ? `ctx.${bindings.scrollY}` : `@window.pageYOffset` + bindings.scrollY ? `ctx.${bindings.scrollY}` : `@_pageYOffset` }); - ${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100); + ${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100); } `); } @@ -170,7 +170,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(deindent` function ${handler_name}() { - ${name} = @navigator.onLine; $$invalidate('${name}', ${name}); + ${name} = @_navigator.onLine; $$invalidate('${name}', ${name}); } `); @@ -179,8 +179,8 @@ export default class WindowWrapper extends Wrapper { `); block.event_listeners.push( - `@listen(@window, "online", ctx.${handler_name})`, - `@listen(@window, "offline", ctx.${handler_name})` + `@listen(@_window, "online", ctx.${handler_name})`, + `@listen(@_window, "offline", ctx.${handler_name})` ); component.has_reactive_assignments = true; diff --git a/src/compiler/compile/render-ssr/handlers/Element.ts b/src/compiler/compile/render-ssr/handlers/Element.ts index 637b76aad597..78b95075b204 100644 --- a/src/compiler/compile/render-ssr/handlers/Element.ts +++ b/src/compiler/compile/render-ssr/handlers/Element.ts @@ -163,7 +163,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption node_contents='${(' + snippet + ') || ""}'; } else { const snippet = snip(expression); - opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + @JSON.stringify(v))) : "")(' + snippet + ')}'; + opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + @_JSON.stringify(v))) : "")(' + snippet + ')}'; } }); diff --git a/src/compiler/compile/render-ssr/handlers/InlineComponent.ts b/src/compiler/compile/render-ssr/handlers/InlineComponent.ts index 2f407df523a0..320bf5e6a088 100644 --- a/src/compiler/compile/render-ssr/handlers/InlineComponent.ts +++ b/src/compiler/compile/render-ssr/handlers/InlineComponent.ts @@ -52,7 +52,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend let props; if (uses_spread) { - props = `@Object.assign(${ + props = `@_Object.assign(${ node.attributes .map(attribute => { if (attribute.is_spread) { diff --git a/src/runtime/internal/animations.ts b/src/runtime/internal/animations.ts index 0997e9ae2346..77c86aff0e3d 100644 --- a/src/runtime/internal/animations.ts +++ b/src/runtime/internal/animations.ts @@ -2,7 +2,7 @@ import { identity as linear, noop, now } from './utils'; import { loop } from './loop'; import { create_rule, delete_rule } from './style_manager'; import { AnimationConfig } from '../animate'; -import { getComputedStyle } from './globals'; + //todo: documentation says it is DOMRect, but in IE it would be ClientRect type PositionRect = DOMRect|ClientRect; diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index c1e16de44733..f65d07117ce9 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,5 +1,3 @@ -import { document, getComputedStyle, navigator } from './globals'; - export function append(target: Node, node: Node) { target.appendChild(node); } diff --git a/src/runtime/internal/globals.ts b/src/runtime/internal/globals.ts index 314f17dfebbd..2f189d0c0ac7 100644 --- a/src/runtime/internal/globals.ts +++ b/src/runtime/internal/globals.ts @@ -1,42 +1 @@ -const win = typeof window !== 'undefined' ? window : global; - -const { - // ecmascript - Error, - JSON, - Map, - Object, - console, - isNaN, - - // dom - cancelAnimationFrame, - clearTimeout, - customElements, - document, - getComputedStyle, - navigator, - requestAnimationFrame, - setTimeout: export_setTimeout // TODO: remove when upgrading typescript, bug -} = win as unknown as typeof globalThis; - -export { - // ecmascript - Error, - JSON, - Map, - Object, - console, - isNaN, - - // dom - cancelAnimationFrame, - clearTimeout, - customElements, - document, - getComputedStyle, - navigator, - requestAnimationFrame, - export_setTimeout as setTimeout, - win as window, -}; +export const globals = (typeof window !== 'undefined' ? window : global) as unknown as typeof globalThis; diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts index db8c0e9d177e..2721200627f2 100644 --- a/src/runtime/internal/style_manager.ts +++ b/src/runtime/internal/style_manager.ts @@ -1,6 +1,5 @@ import { element } from './dom'; import { raf } from './utils'; -import { document } from './globals'; let stylesheet; let active = 0; diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 8624c2246a63..5766ac26a530 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -1,5 +1,3 @@ -import { requestAnimationFrame } from './globals'; - export function noop() {} export const identity = x => x; From e5d4162092d5a9560ed957d183759cbb1b49135a Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 12 Jun 2019 21:10:25 -0400 Subject: [PATCH 5/7] update tests --- test/helpers.js | 1 + test/js/samples/bind-online/expected.js | 4 +--- test/js/samples/collapses-text-around-comments/expected.js | 1 - test/js/samples/css-media-query/expected.js | 1 - test/js/samples/css-shadow-dom-keyframes/expected.js | 1 - test/js/samples/debug-empty/expected.js | 3 --- test/js/samples/debug-foo-bar-baz-things/expected.js | 3 --- test/js/samples/debug-foo/expected.js | 3 --- test/js/samples/debug-hoisted/expected.js | 2 -- test/js/samples/deconflict-builtins/expected.js | 1 - .../samples/dev-warning-missing-data-computed/expected.js | 3 --- test/js/samples/each-block-array-literal/expected.js | 1 - test/js/samples/each-block-changed-check/expected.js | 1 - test/js/samples/each-block-keyed-animated/expected.js | 2 -- test/js/samples/each-block-keyed/expected.js | 2 -- test/js/samples/head-no-whitespace/expected.js | 1 - test/js/samples/media-bindings/expected.js | 2 -- test/js/samples/title/expected.js | 1 - test/js/samples/window-binding-scroll/expected.js | 7 ++----- 19 files changed, 4 insertions(+), 36 deletions(-) diff --git a/test/helpers.js b/test/helpers.js index 2e6878f8a5ac..514d0846980d 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -49,6 +49,7 @@ virtualConsole.sendTo(console); global.window = new jsdom.JSDOM('
', {virtualConsole}).window; global.document = window.document; +global.requestAnimationFrame = null; // placeholder, filled in using set_raf // add missing ecmascript globals to window for (const key of Object.getOwnPropertyNames(global)) { diff --git a/test/js/samples/bind-online/expected.js b/test/js/samples/bind-online/expected.js index 9c3fdb73855e..0c9faa3ef6f8 100644 --- a/test/js/samples/bind-online/expected.js +++ b/test/js/samples/bind-online/expected.js @@ -4,11 +4,9 @@ import { add_render_callback, init, listen, - navigator, noop, run_all, - safe_not_equal, - window + safe_not_equal } from "svelte/internal"; function create_fragment(ctx) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index ed01b6430f2e..12164d0579b0 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -3,7 +3,6 @@ import { SvelteComponent, append, detach, - document, element, init, insert, diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index 8a99d70e8e2a..d4be134376cc 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -3,7 +3,6 @@ import { SvelteComponent, append, detach, - document, element, init, insert, diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 3be52803d700..9f70b8ec66b2 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,7 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { SvelteElement, - customElements, detach, element, init, diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 2e4f9feb1314..6f079935902e 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -1,11 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { - Error, - Object, SvelteComponentDev, add_location, append, - console, detach, element, init, 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 c083ea29c306..eea35d5ba7ae 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -1,11 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { - Error, - Object, SvelteComponentDev, add_location, append, - console, destroy_each, detach, element, diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 46096466c1ba..5b931d94643d 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -1,11 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { - Error, - Object, SvelteComponentDev, add_location, append, - console, destroy_each, detach, element, diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index 799f0d4b32c7..51d8bf63a3d0 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -1,8 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { - Error, SvelteComponentDev, - console, init, noop, safe_not_equal diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index 85f3c3159769..3294778aa32c 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -1,6 +1,5 @@ /* generated by Svelte vX.Y.Z */ import { - Object, SvelteComponent, append, destroy_each, 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 d61f8f3de37c..5c4b2ece1bdc 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -1,11 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { - Error, - Object, SvelteComponentDev, add_location, append, - console, detach, element, init, diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index 934c5cfe9227..455cb2f25f57 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -1,6 +1,5 @@ /* generated by Svelte vX.Y.Z */ import { - Object, SvelteComponent, append, destroy_each, diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 4ed8756b9a53..951565bae4b0 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,6 +1,5 @@ /* generated by Svelte vX.Y.Z */ import { - Object, SvelteComponent, append, destroy_each, diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 9e777f25ee05..ec28e60d5f64 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,7 +1,5 @@ /* generated by Svelte vX.Y.Z */ import { - Map, - Object, SvelteComponent, append, create_animation, diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index 7ac66a09a70d..efb58ebf6ab5 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -1,7 +1,5 @@ /* generated by Svelte vX.Y.Z */ import { - Map, - Object, SvelteComponent, append, destroy_block, diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index 859891e68902..b95177bba781 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -3,7 +3,6 @@ import { SvelteComponent, append, detach, - document, element, init, noop, diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index ec30a9816146..f45f9ce8dbfb 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -2,12 +2,10 @@ import { SvelteComponent, add_render_callback, - cancelAnimationFrame, detach, element, init, insert, - isNaN, listen, noop, raf, diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js index 2e551ae42684..884f39e246e9 100644 --- a/test/js/samples/title/expected.js +++ b/test/js/samples/title/expected.js @@ -1,7 +1,6 @@ /* generated by Svelte vX.Y.Z */ import { SvelteComponent, - document, init, noop, safe_not_equal diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 1e63973518c0..ed76058ee288 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -3,7 +3,6 @@ import { SvelteComponent, add_render_callback, append, - clearTimeout, detach, element, init, @@ -11,10 +10,8 @@ import { listen, noop, safe_not_equal, - setTimeout, set_data, - text, - window + text } from "svelte/internal"; function create_fragment(ctx) { @@ -45,7 +42,7 @@ function create_fragment(ctx) { if (changed.y && !scrolling) { scrolling = true; clearTimeout(scrolling_timeout); - window.scrollTo(window.pageXOffset, ctx.y); + scrollTo(pageXOffset, ctx.y); scrolling_timeout = setTimeout(clear_scrolling, 100); } From 59f04c93c5dda9e05f286911acddc01db1be73d7 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 18 Jun 2019 11:07:00 -0400 Subject: [PATCH 6/7] don't grab page offsets too early --- src/compiler/compile/render-dom/wrappers/Window.ts | 10 +++++----- test/js/samples/window-binding-scroll/expected.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/compiler/compile/render-dom/wrappers/Window.ts b/src/compiler/compile/render-dom/wrappers/Window.ts index 8c8e6c623def..c47f12593c3c 100644 --- a/src/compiler/compile/render-dom/wrappers/Window.ts +++ b/src/compiler/compile/render-dom/wrappers/Window.ts @@ -92,10 +92,10 @@ export default class WindowWrapper extends Wrapper { renderer.meta_bindings.add_block(deindent` if (${condition}) { - @_scrollTo(${x || '@_pageXOffset'}, ${y || '@pageYOffset'}); + @_scrollTo(${x || '@_window.pageXOffset'}, ${y || '@_window.pageYOffset'}); } - ${x && `${x} = @_pageXOffset;`} - ${y && `${y} = @_pageYOffset;`} + ${x && `${x} = @_window.pageXOffset;`} + ${y && `${y} = @_window.pageYOffset;`} `); block.event_listeners.push(deindent` @@ -148,9 +148,9 @@ export default class WindowWrapper extends Wrapper { ${scrolling} = true; @_clearTimeout(${scrolling_timeout}); @_scrollTo(${ - bindings.scrollX ? `ctx.${bindings.scrollX}` : `@_pageXOffset` + bindings.scrollX ? `ctx.${bindings.scrollX}` : `@_window.pageXOffset` }, ${ - bindings.scrollY ? `ctx.${bindings.scrollY}` : `@_pageYOffset` + bindings.scrollY ? `ctx.${bindings.scrollY}` : `@_window.pageYOffset` }); ${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100); } diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index ed76058ee288..fbe4596e2b1f 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -42,7 +42,7 @@ function create_fragment(ctx) { if (changed.y && !scrolling) { scrolling = true; clearTimeout(scrolling_timeout); - scrollTo(pageXOffset, ctx.y); + scrollTo(window.pageXOffset, ctx.y); scrolling_timeout = setTimeout(clear_scrolling, 100); } From b424a88a5f8221817218d53ef1e9f41500606279 Mon Sep 17 00:00:00 2001 From: mrkishi Date: Fri, 21 Jun 2019 17:24:03 -0300 Subject: [PATCH 7/7] replace ninja globals --- src/compiler/compile/render-dom/index.ts | 2 +- src/compiler/compile/render-dom/wrappers/EachBlock.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/compiler/compile/render-dom/index.ts b/src/compiler/compile/render-dom/index.ts index 3dec1a81b3c9..17b6fd86f208 100644 --- a/src/compiler/compile/render-dom/index.ts +++ b/src/compiler/compile/render-dom/index.ts @@ -405,7 +405,7 @@ export default function dom( unknown_props_check = deindent` const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; @_Object.keys($$props).forEach(key => { - if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); + if (!writable_props.includes(key) && !key.startsWith('$$')) @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; } diff --git a/src/compiler/compile/render-dom/wrappers/EachBlock.ts b/src/compiler/compile/render-dom/wrappers/EachBlock.ts index 3ce2a342a3d5..a117a717c57a 100644 --- a/src/compiler/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render-dom/wrappers/EachBlock.ts @@ -509,7 +509,7 @@ export default class EachBlockWrapper extends Wrapper { if (outro_block) { block.builders.outro.add_block(deindent` - ${iterations} = ${iterations}.filter(Boolean); + ${iterations} = ${iterations}.filter(@_Boolean); for (let #i = 0; #i < ${view_length}; #i += 1) ${outro_block}(#i, 0, 0);` ); }