Merge pull request #390 from sveltejs/imported-component-direct-reference

Use direct references to imported components

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
 		};
 	}

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({

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' )}

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 );
+}

test/generator/samples/imported-renamed-components/ComponentOne.html

@@ -0,0 +1 @@
+One

test/generator/samples/imported-renamed-components/ComponentTwo.html

@@ -0,0 +1 @@
+Two

test/generator/samples/imported-renamed-components/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `OneTwo`
+};

test/generator/samples/imported-renamed-components/main.html

@@ -0,0 +1,10 @@
+<RenamedComponentOne/><RenamedComponentTwo/>
+
+<script>
+	import ComponentOne from './ComponentOne.html';
+	import ComponentTwo from './ComponentTwo.html';
+
+	export default {
+		components: { RenamedComponentOne: ComponentOne, RenamedComponentTwo: ComponentTwo }
+	};
+</script>