diff --git a/src/generators/Generator.js b/src/generators/Generator.js
index f0571d96c1..469b271f85 100644
--- a/src/generators/Generator.js
+++ b/src/generators/Generator.js
@@ -232,6 +232,7 @@ export default class Generator {
const imports = this.imports;
const computations = [];
+ let defaultExport = null;
const templateProperties = {};
if ( js ) {
@@ -251,7 +252,7 @@ export default class Generator {
}
}
- const defaultExport = js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
+ defaultExport = js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
if ( defaultExport ) {
const finalNode = js.content.body[ js.content.body.length - 1 ];
@@ -319,6 +320,7 @@ export default class Generator {
return {
computations,
+ defaultExport,
templateProperties
};
}
diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 2872a948c1..ebf478f5a2 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -3,6 +3,7 @@ import getBuilders from './utils/getBuilders.js';
import CodeBuilder from '../../utils/CodeBuilder.js';
import namespaces from '../../utils/namespaces.js';
import processCss from '../shared/processCss.js';
+import removeObjectKey from '../../utils/removeObjectKey.js';
import visitors from './visitors/index.js';
import Generator from '../Generator.js';
import * as shared from '../../shared/index.js';
@@ -17,6 +18,8 @@ class DomGenerator extends Generator {
// Svelte's builtin `import { get, ... } from 'svelte/shared.js'`;
this.importedNames = {};
this.aliases = {};
+
+ this.importedComponents = {};
}
addElement ( name, renderStatement, needsIdentifier = false ) {
@@ -162,7 +165,7 @@ export default function dom ( parsed, source, options, names ) {
const generator = new DomGenerator( parsed, source, name, names, visitors, options );
- const { computations, templateProperties } = generator.parseJs();
+ const { computations, defaultExport, templateProperties } = generator.parseJs();
// Remove these after version 2
if ( templateProperties.onrender ) {
@@ -188,7 +191,29 @@ export default function dom ( parsed, source, options, names ) {
const ns = templateProperties.namespace.value.value;
namespace = namespaces[ ns ] || ns;
- // TODO remove the namespace property from the generated code, it's unused past this point
+ removeObjectKey( generator, defaultExport.declaration, 'namespace' );
+ }
+
+ if ( templateProperties.components ) {
+ let hasNonImportedComponent = false;
+ templateProperties.components.value.properties.forEach( property => {
+ const key = property.key.name;
+ const value = source.slice( property.value.start, property.value.end );
+ if ( generator.importedNames[ value ] ) {
+ generator.importedComponents[ key ] = value;
+ } else {
+ hasNonImportedComponent = true;
+ }
+ });
+ if ( hasNonImportedComponent ) {
+ // remove the specific components which were imported, as we'll refer to them directly
+ Object.keys( generator.importedComponents ).forEach ( key => {
+ removeObjectKey( generator, templateProperties.components.value, key );
+ });
+ } else {
+ // remove the entire components portion of the export
+ removeObjectKey( generator, defaultExport.declaration, 'components' );
+ }
}
generator.push({
diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js
index 990b947f7c..7165a8a7c2 100644
--- a/src/generators/dom/visitors/Component.js
+++ b/src/generators/dom/visitors/Component.js
@@ -106,7 +106,7 @@ export default {
componentInitProperties.push(`data: ${name}_initialData`);
}
- const expression = node.name === ':Self' ? generator.name : `template.components.${node.name}`;
+ const expression = node.name === ':Self' ? generator.name : generator.importedComponents[ node.name ] || `template.components.${node.name}`;
local.init.addBlockAtStart( deindent`
${statements.join( '\n\n' )}
diff --git a/src/utils/removeObjectKey.js b/src/utils/removeObjectKey.js
new file mode 100644
index 0000000000..cbd75eb1f5
--- /dev/null
+++ b/src/utils/removeObjectKey.js
@@ -0,0 +1,9 @@
+export default function removeObjectKey ( generator, node, key ) {
+ if ( node.type !== 'ObjectExpression' ) return;
+ const properties = node.properties;
+ const index = properties.findIndex( property => property.key.type === 'Identifier' && property.key.name === key );
+ if ( index === -1 ) return;
+ const a = properties[ index ].start;
+ const b = index < properties.length - 1 ? properties[ index + 1 ].start : properties[ index ].end;
+ generator.code.remove( a, b );
+}
diff --git a/test/generator/samples/imported-renamed-components/ComponentOne.html b/test/generator/samples/imported-renamed-components/ComponentOne.html
new file mode 100644
index 0000000000..3609f20ebd
--- /dev/null
+++ b/test/generator/samples/imported-renamed-components/ComponentOne.html
@@ -0,0 +1 @@
+One
diff --git a/test/generator/samples/imported-renamed-components/ComponentTwo.html b/test/generator/samples/imported-renamed-components/ComponentTwo.html
new file mode 100644
index 0000000000..3b0086f91c
--- /dev/null
+++ b/test/generator/samples/imported-renamed-components/ComponentTwo.html
@@ -0,0 +1 @@
+Two
diff --git a/test/generator/samples/imported-renamed-components/_config.js b/test/generator/samples/imported-renamed-components/_config.js
new file mode 100644
index 0000000000..9a9e325b84
--- /dev/null
+++ b/test/generator/samples/imported-renamed-components/_config.js
@@ -0,0 +1,3 @@
+export default {
+ html: `OneTwo`
+};
diff --git a/test/generator/samples/imported-renamed-components/main.html b/test/generator/samples/imported-renamed-components/main.html
new file mode 100644
index 0000000000..7c25eaceab
--- /dev/null
+++ b/test/generator/samples/imported-renamed-components/main.html
@@ -0,0 +1,10 @@
+
+
+