From 61a96b382a3ab2771bf5fb7211e7708f2bd95f0e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 12 May 2019 13:56:00 -0400 Subject: [PATCH 1/5] implement namespaced components --- site/content/docs/02-template-syntax.md | 2 +- .../render-dom/wrappers/InlineComponent/index.ts | 2 +- test/runtime/index.js | 2 +- .../samples/component-namespaced/Foo.svelte | 5 +++++ .../samples/component-namespaced/_config.js | 16 ++++++++++++++++ .../samples/component-namespaced/components.js | 3 +++ .../samples/component-namespaced/main.svelte | 7 +++++++ test/server-side-rendering/index.js | 9 +++++---- 8 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 test/runtime/samples/component-namespaced/Foo.svelte create mode 100644 test/runtime/samples/component-namespaced/_config.js create mode 100644 test/runtime/samples/component-namespaced/components.js create mode 100644 test/runtime/samples/component-namespaced/main.svelte diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index a69400f8e39a..c6fd5c8b2da3 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -7,7 +7,7 @@ title: Template syntax --- -A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as ``, indicates a *component*. +A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a *component*. ```html + +

foo {foo}

\ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/_config.js b/test/runtime/samples/component-namespaced/_config.js new file mode 100644 index 000000000000..e5f4c680dac9 --- /dev/null +++ b/test/runtime/samples/component-namespaced/_config.js @@ -0,0 +1,16 @@ +export default { + props: { + a: 1 + }, + + html: ` +

foo 1

+ `, + + test({ assert, component, target }) { + component.a = 2; + assert.htmlEqual(target.innerHTML, ` +

foo 2

+ `); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/components.js b/test/runtime/samples/component-namespaced/components.js new file mode 100644 index 000000000000..832d2412ee98 --- /dev/null +++ b/test/runtime/samples/component-namespaced/components.js @@ -0,0 +1,3 @@ +import Foo from './Foo.svelte'; + +export default { Foo }; \ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/main.svelte b/test/runtime/samples/component-namespaced/main.svelte new file mode 100644 index 000000000000..541b68e47e8f --- /dev/null +++ b/test/runtime/samples/component-namespaced/main.svelte @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index 6a546b0b7b7e..2806a1b5c2df 100644 --- a/test/server-side-rendering/index.js +++ b/test/server-side-rendering/index.js @@ -96,10 +96,11 @@ describe("ssr", () => { (config.skip ? it.skip : config.solo ? it.only : it)(dir, () => { const cwd = path.resolve("test/runtime/samples", dir); - glob('**/*.svelte', { cwd: `test/runtime/samples/${dir}` }).forEach(file => { - const resolved = require.resolve(`../runtime/samples/${dir}/${file}`); - delete require.cache[resolved]; - }); + Object.keys(require.cache) + .filter(x => x.startsWith(cwd)) + .forEach(file => { + delete require.cache[file]; + }); const compileOptions = Object.assign({ sveltePath }, config.compileOptions, { generate: 'ssr' From debf1ce17ae2e356cbe9bd99af6816afef333364 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 12 May 2019 14:21:52 -0400 Subject: [PATCH 2/5] fix tests --- test/runtime/index.js | 2 +- test/runtime/samples/component-namespaced/_config.js | 6 ++++++ test/server-side-rendering/index.js | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/test/runtime/index.js b/test/runtime/index.js index d8660e67fd48..64d7f3ae5151 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -75,7 +75,7 @@ describe("runtime", () => { compileOptions.accessors = 'accessors' in config ? config.accessors : true; Object.keys(require.cache) - .filter(x => x.startsWith(cwd)) + .filter(x => x.endsWith('.svelte')) .forEach(file => { delete require.cache[file]; }); diff --git a/test/runtime/samples/component-namespaced/_config.js b/test/runtime/samples/component-namespaced/_config.js index e5f4c680dac9..b91795d6c848 100644 --- a/test/runtime/samples/component-namespaced/_config.js +++ b/test/runtime/samples/component-namespaced/_config.js @@ -1,3 +1,5 @@ +import * as path from 'path'; + export default { props: { a: 1 @@ -7,6 +9,10 @@ export default {

foo 1

`, + before_test() { + delete require.cache[path.resolve(__dirname, 'components.js')]; + }, + test({ assert, component, target }) { component.a = 2; assert.htmlEqual(target.innerHTML, ` diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index 2806a1b5c2df..9f67ee06e9de 100644 --- a/test/server-side-rendering/index.js +++ b/test/server-side-rendering/index.js @@ -97,7 +97,7 @@ describe("ssr", () => { const cwd = path.resolve("test/runtime/samples", dir); Object.keys(require.cache) - .filter(x => x.startsWith(cwd)) + .filter(x => x.endsWith('.svelte')) .forEach(file => { delete require.cache[file]; }); From 830e3d01cf439f446e1cabcdd44e53310316195d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 12 May 2019 14:24:19 -0400 Subject: [PATCH 3/5] failing vars test --- .../vars/samples/component-namespaced/_config.js | 16 ++++++++++++++++ .../samples/component-namespaced/input.svelte | 5 +++++ 2 files changed, 21 insertions(+) create mode 100644 test/vars/samples/component-namespaced/_config.js create mode 100644 test/vars/samples/component-namespaced/input.svelte diff --git a/test/vars/samples/component-namespaced/_config.js b/test/vars/samples/component-namespaced/_config.js new file mode 100644 index 000000000000..ac63873967a3 --- /dev/null +++ b/test/vars/samples/component-namespaced/_config.js @@ -0,0 +1,16 @@ +export default { + test(assert, vars) { + assert.deepEqual(vars, [ + { + name: 'NS', + export_name: null, + injected: false, + module: false, + mutated: false, + reassigned: false, + referenced: true, + writable: false + } + ]); + } +}; \ No newline at end of file diff --git a/test/vars/samples/component-namespaced/input.svelte b/test/vars/samples/component-namespaced/input.svelte new file mode 100644 index 000000000000..996d2d876987 --- /dev/null +++ b/test/vars/samples/component-namespaced/input.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file From f9a66e558b3ca6f851ad1738bed8c4baac96d60f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 12 May 2019 14:25:44 -0400 Subject: [PATCH 4/5] failing missing-declaration test --- test/validator/samples/component-namespaced/input.svelte | 5 +++++ test/validator/samples/component-namespaced/warnings.json | 1 + 2 files changed, 6 insertions(+) create mode 100644 test/validator/samples/component-namespaced/input.svelte create mode 100644 test/validator/samples/component-namespaced/warnings.json diff --git a/test/validator/samples/component-namespaced/input.svelte b/test/validator/samples/component-namespaced/input.svelte new file mode 100644 index 000000000000..996d2d876987 --- /dev/null +++ b/test/validator/samples/component-namespaced/input.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/test/validator/samples/component-namespaced/warnings.json b/test/validator/samples/component-namespaced/warnings.json new file mode 100644 index 000000000000..0637a088a01e --- /dev/null +++ b/test/validator/samples/component-namespaced/warnings.json @@ -0,0 +1 @@ +[] \ No newline at end of file From 85543f54dd74cc6c67a3be50878e87ffadde92f7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 12 May 2019 14:31:11 -0400 Subject: [PATCH 5/5] fix vars/warnings --- src/compile/Component.ts | 6 ++---- src/compile/nodes/Action.ts | 2 +- src/compile/nodes/Animation.ts | 2 +- src/compile/nodes/InlineComponent.ts | 5 +++-- src/compile/nodes/Transition.ts | 2 +- src/compile/nodes/shared/Expression.ts | 2 +- 6 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/compile/Component.ts b/src/compile/Component.ts index aad5e98413a3..dd41a0a64561 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -759,7 +759,7 @@ export default class Component { const { name } = object; if (name[0] === '$' && !scope.has(name)) { - component.warn_if_undefined(object, null); + component.warn_if_undefined(name, object, null); } } }, @@ -1202,9 +1202,7 @@ export default class Component { return `ctx.${name}`; } - warn_if_undefined(node, template_scope: TemplateScope) { - let { name } = node; - + warn_if_undefined(name: string, node, template_scope: TemplateScope) { if (name[0] === '$') { name = name.slice(1); this.has_reactive_assignments = true; // TODO does this belong here? diff --git a/src/compile/nodes/Action.ts b/src/compile/nodes/Action.ts index feec3fada876..77b9e3c8461b 100644 --- a/src/compile/nodes/Action.ts +++ b/src/compile/nodes/Action.ts @@ -11,7 +11,7 @@ export default class Action extends Node { constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); - component.warn_if_undefined(info, scope); + component.warn_if_undefined(info.name, info, scope); this.name = info.name; component.qualify(info.name); diff --git a/src/compile/nodes/Animation.ts b/src/compile/nodes/Animation.ts index 638a88b169d3..6ccdbb080326 100644 --- a/src/compile/nodes/Animation.ts +++ b/src/compile/nodes/Animation.ts @@ -10,7 +10,7 @@ export default class Animation extends Node { constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); - component.warn_if_undefined(info, scope); + component.warn_if_undefined(info.name, info, scope); this.name = info.name; component.qualify(info.name); diff --git a/src/compile/nodes/InlineComponent.ts b/src/compile/nodes/InlineComponent.ts index 0d8801aad130..3359e981eddd 100644 --- a/src/compile/nodes/InlineComponent.ts +++ b/src/compile/nodes/InlineComponent.ts @@ -23,8 +23,9 @@ export default class InlineComponent extends Node { super(component, parent, scope, info); if (info.name !== 'svelte:component' && info.name !== 'svelte:self') { - component.warn_if_undefined(info, scope); - component.add_reference(info.name); + const name = info.name.split('.')[0]; // accommodate namespaces + component.warn_if_undefined(name, info, scope); + component.add_reference(name); } this.name = info.name; diff --git a/src/compile/nodes/Transition.ts b/src/compile/nodes/Transition.ts index c3f22d888e00..82eb578f0ffc 100644 --- a/src/compile/nodes/Transition.ts +++ b/src/compile/nodes/Transition.ts @@ -12,7 +12,7 @@ export default class Transition extends Node { constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); - component.warn_if_undefined(info, scope); + component.warn_if_undefined(info.name, info, scope); this.name = info.name; component.qualify(info.name); diff --git a/src/compile/nodes/shared/Expression.ts b/src/compile/nodes/shared/Expression.ts index 22cb403f75da..fc188e9673b0 100644 --- a/src/compile/nodes/shared/Expression.ts +++ b/src/compile/nodes/shared/Expression.ts @@ -149,7 +149,7 @@ export default class Expression { } component.add_reference(name); - component.warn_if_undefined(nodes[0], template_scope); + component.warn_if_undefined(name, nodes[0], template_scope); } this.skip();