diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 5ef2ac6835..8fa80d4cfd 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -157,8 +157,8 @@ export default class Component {
variable.reassigned = true;
}
- this.name = this.getUniqueName(name);
this.fragment = new Fragment(this, ast.html);
+ this.name = this.getUniqueName(name);
this.walk_instance_js_post_template();
@@ -200,6 +200,8 @@ export default class Component {
referenced: true,
writable: true
});
+ } else {
+ this.usedNames.add(name);
}
}
@@ -235,19 +237,20 @@ export default class Component {
const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`;
- // TODO use same regex for both
- result = result.replace(compileOptions.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
- if (sigil === '@') {
- if (internal_exports.has(name)) {
- if (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
- this.helpers.add(name);
- }
+ result = result
+ .replace(/__svelte:self__/g, this.name)
+ .replace(compileOptions.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
+ if (sigil === '@') {
+ if (internal_exports.has(name)) {
+ if (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
+ this.helpers.add(name);
+ }
- return this.alias(name);
- }
+ return this.alias(name);
+ }
- return sigil.slice(1) + name;
- });
+ return sigil.slice(1) + name;
+ });
const importedHelpers = Array.from(this.helpers)
.sort()
diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts
index e30984ccbc..4abb81ea49 100644
--- a/src/compile/render-dom/wrappers/InlineComponent/index.ts
+++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts
@@ -63,7 +63,7 @@ export default class InlineComponentWrapper extends Wrapper {
});
this.var = (
- this.node.name === 'svelte:self' ? renderer.component.name :
+ this.node.name === 'svelte:self' ? '__svelte:self__' : // TODO conflict-proof this
this.node.name === 'svelte:component' ? 'switch_instance' :
this.node.name
).toLowerCase();
diff --git a/src/compile/render-ssr/handlers/InlineComponent.ts b/src/compile/render-ssr/handlers/InlineComponent.ts
index d1776988b5..b77817f974 100644
--- a/src/compile/render-ssr/handlers/InlineComponent.ts
+++ b/src/compile/render-ssr/handlers/InlineComponent.ts
@@ -74,7 +74,7 @@ export default function(node, renderer: Renderer, options) {
const expression = (
node.name === 'svelte:self'
- ? node.component.name
+ ? '__svelte:self__' // TODO conflict-proof this
: node.name === 'svelte:component'
? `((${snip(node.expression)}) || @missingComponent)`
: node.name
diff --git a/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte
new file mode 100644
index 0000000000..0f04fa119a
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte
@@ -0,0 +1,10 @@
+
+
+{count}
+
+{#if count > 1}
+
+
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted-globals/_config.js b/test/runtime/samples/component-name-deconflicted-globals/_config.js
new file mode 100644
index 0000000000..842b6a3a11
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/_config.js
@@ -0,0 +1,5 @@
+export default {
+ preserveIdentifiers: true,
+
+ error: 'Countdown is not defined'
+};
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted-globals/main.svelte b/test/runtime/samples/component-name-deconflicted-globals/main.svelte
new file mode 100644
index 0000000000..797f3086dd
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/main.svelte
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file