centralise import handling

src/generators/Generator.js

@@ -103,6 +103,34 @@ export default class Generator {
 	}
 
 	generate ( result, options, { constructorName, format } ) {
+		if ( this.imports.length ) {
+			const statements = [];
+
+			this.imports.forEach( ( declaration, i ) => {
+				if ( format === 'es' ) {
+					statements.push( this.source.slice( declaration.start, declaration.end ) );
+					return;
+				}
+
+				const defaultImport = declaration.specifiers.find( x => x.type === 'ImportDefaultSpecifier' || x.type === 'ImportSpecifier' && x.imported.name === 'default' );
+				const namespaceImport = declaration.specifiers.find( x => x.type === 'ImportNamespaceSpecifier' );
+				const namedImports = declaration.specifiers.filter( x => x.type === 'ImportSpecifier' && x.imported.name !== 'default' );
+
+				const name = ( defaultImport || namespaceImport ) ? ( defaultImport || namespaceImport ).local.name : `__import${i}`;
+				declaration.name = name; // hacky but makes life a bit easier later
+
+				namedImports.forEach( specifier => {
+					statements.push( `var ${specifier.local.name} = ${name}.${specifier.imported.name}` );
+				});
+
+				if ( defaultImport ) {
+					statements.push( `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};` );
+				}
+			});
+
+			result = `${statements.join( '\n' )}\n\n${result}`;
+		}
+
 		const pattern = /\[✂(\d+)-(\d+)$/;
 
 		const parts = result.split( '✂]' );
@@ -242,7 +270,6 @@ export default class Generator {
 
 		return {
 			computations,
-			imports,
 			templateProperties
 		};
 	}

src/generators/dom/index.js

@@ -11,7 +11,7 @@ export default function dom ( parsed, source, options, names ) {
 
 	const generator = new Generator( parsed, source, names, visitors );
 
-	const { computations, imports, templateProperties } = generator.parseJs();
+	const { computations, templateProperties } = generator.parseJs();
 
 	const renderers = [];
 	function addRenderer ( fragment ) {
@@ -126,7 +126,6 @@ export default function dom ( parsed, source, options, names ) {
 		name: 'renderMainFragment',
 		namespace,
 		target: 'target',
-		elementDepth: 0,
 		localElementDepth: 0,
 
 		contexts: {},
@@ -179,28 +178,6 @@ export default function dom ( parsed, source, options, names ) {
 		dispatchObservers( observers.deferred, newState, oldState );
 	` );
 
-	imports.forEach( ( declaration, i ) => {
-		if ( format === 'es' ) {
-			builders.main.addLine( source.slice( declaration.start, declaration.end ) );
-			return;
-		}
-
-		const defaultImport = declaration.specifiers.find( x => x.type === 'ImportDefaultSpecifier' || x.type === 'ImportSpecifier' && x.imported.name === 'default' );
-		const namespaceImport = declaration.specifiers.find( x => x.type === 'ImportNamespaceSpecifier' );
-		const namedImports = declaration.specifiers.filter( x => x.type === 'ImportSpecifier' && x.imported.name !== 'default' );
-
-		const name = ( defaultImport || namespaceImport ) ? ( defaultImport || namespaceImport ).local.name : `__import${i}`;
-		declaration.name = name; // hacky but makes life a bit easier later
-
-		namedImports.forEach( specifier => {
-			builders.main.addLine( `var ${specifier.local.name} = ${name}.${specifier.imported.name}` );
-		});
-
-		if ( defaultImport ) {
-			builders.main.addLine( `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};` );
-		}
-	});
-
 	if ( parsed.js ) {
 		builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}

src/generators/dom/visitors/Component.js

@@ -120,7 +120,6 @@ export default {
 			namespace: local.namespace,
 			target: name,
 			parent: generator.current,
-			elementDepth: generator.current.elementDepth + 1,
 			localElementDepth: generator.current.localElementDepth + 1
 		});
 	},

src/generators/dom/visitors/Element.js

@@ -61,7 +61,7 @@ export default {
 			`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
 			`var ${name} = document.createElement( '${node.name}' );`;
 
-		if ( generator.cssId && !generator.current.elementDepth ) {
+		if ( generator.cssId && !generator.elementDepth ) {
 			render += `\n${name}.setAttribute( '${generator.cssId}', '' );`;
 		}
 
@@ -88,7 +88,6 @@ export default {
 			namespace: local.namespace,
 			target: name,
 			parent: generator.current,
-			elementDepth: generator.current.elementDepth + 1,
 			localElementDepth: generator.current.localElementDepth + 1
 		});
 	},

src/generators/server-side-rendering/index.js

@@ -10,7 +10,7 @@ export default function ssr ( parsed, source, options, names ) {
 
 	const generator = new Generator( parsed, source, names, visitors );
 
-	const { computations, imports, templateProperties } = generator.parseJs();
+	const { computations, templateProperties } = generator.parseJs();
 
 	generator.push({
 		contexts: {},
@@ -30,36 +30,7 @@ export default function ssr ( parsed, source, options, names ) {
 		renderCss: new CodeBuilder()
 	};
 
-	const importBlock = imports
-		.map( ( declaration, i ) => {
-			const defaultImport = declaration.specifiers.find( x => x.type === 'ImportDefaultSpecifier' || x.type === 'ImportSpecifier' && x.imported.name === 'default' );
-			const namespaceImport = declaration.specifiers.find( x => x.type === 'ImportNamespaceSpecifier' );
-			const namedImports = declaration.specifiers.filter( x => x.type === 'ImportSpecifier' && x.imported.name !== 'default' );
-
-			const name = ( defaultImport || namespaceImport ) ? ( defaultImport || namespaceImport ).local.name : `__import${i}`;
-
-			const statements = [
-				`var ${name} = require( '${declaration.source.value}' );`
-			];
-
-			namedImports.forEach( specifier => {
-				statements.push( `var ${specifier.local.name} = ${name}.${specifier.imported.name};` );
-			});
-
-			if ( defaultImport ) {
-				statements.push( `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};` );
-			}
-
-			return statements.join( '\n' );
-		})
-		.filter( Boolean )
-		.join( '\n' );
-
 	if ( parsed.js ) {
-		if ( imports.length ) {
-			builders.main.addBlock( importBlock );
-		}
-
 		builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}
 
@@ -148,9 +119,5 @@ export default function ssr ( parsed, source, options, names ) {
 
 	const result = builders.main.toString();
 
-	const generated = generator.generate( result, options, { constructorName, format } );
+	return generator.generate( result, options, { constructorName, format } );
-
-	// console.log( generated.code )
-
-	return generated;
 }