Syntax simplification for components

src/parse/read/script.ts

@@ -35,6 +35,8 @@ export default function readScript(parser: Parser, start: number, attributes: No
 	if (!ast.body.length) return null;
 
 	ast.start = scriptStart;
+	visitImports(ast, parser);
+
 	return {
 		start,
 		end: parser.index,
@@ -42,3 +44,120 @@ export default function readScript(parser: Parser, start: number, attributes: No
 		content: ast,
 	};
 }
+
+function visitImports(ast, parser) {
+	ast.body
+		.filter(stmt => stmt.type === 'ImportDeclaration')
+		.forEach((stmt) => {
+			const m = /[\.\\]?(\w+)\.html$/g.exec(stmt.source.value);
+			if (m) {
+				let componentName;
+				if (stmt.specifiers.length && stmt.specifiers[0].type === 'ImportDefaultSpecifier') {					
+					componentName = stmt.specifiers[0].local.name;
+				} else {
+					componentName = m[1];
+					stmt.specifiers.push(
+						{
+							"type": "ImportDefaultSpecifier",
+							"start": stmt.start,
+							"end": stmt.end,
+							"local": {
+								"type": "Identifier",
+								"start": stmt.source.start,
+								"end": stmt.source.end,
+								"name": componentName
+							}
+						}
+					);
+				}
+				exportComponent(ast, parser, stmt, componentName);
+			}
+		});
+}
+
+function exportComponent(ast, parser, importStmt, componentName) {
+	let wasExported = false;
+	let exportStatement, exportedComponents;
+	ast.body
+		.filter(stmt => stmt.type === 'ExportDefaultDeclaration')
+		.some((stmt) => {
+			exportStatement = stmt;
+			stmt.declaration.properties.some((p) => {
+				const isComponents = p.type === 'Property' && p.key.name === 'components';
+				if (isComponents) {
+					if (p.value.type !== 'ObjectExpression')
+						parser.error(`export default must have components as an object`);
+					else {
+						exportedComponents = p;
+						wasExported = exportedComponents.value.properties.some(comp => comp.type === 'Property' && comp.key.name === componentName);
+					}
+				}
+				return wasExported;
+			});
+			return wasExported;
+		});
+	if (!wasExported) {
+		if (!exportStatement) {
+			exportStatement = {
+				"type": "ExportDefaultDeclaration",
+				"start": importStmt.start,
+				"end": importStmt.end,
+				"declaration": {
+					"type": "ObjectExpression",
+					"start": importStmt.start,
+					"end": importStmt.end,
+					"properties": [
+					]
+				}
+			};
+			ast.body.push(exportStatement);
+		}
+		if (!exportedComponents) {
+			exportedComponents = {
+				"type": "Property",
+				"start": exportStatement.start,
+				"end": exportStatement.end,
+				"method": false,
+				"shorthand": false,
+				"computed": false,
+				"key": {
+					"type": "Identifier",
+					"start": exportStatement.start,
+					"end": exportStatement.end,
+					"name": "components"
+				},
+				"value": {
+					"type": "ObjectExpression",
+					"start": exportStatement.start,
+					"end": exportStatement.end,
+					"properties": []
+				},
+				"kind": "init"
+			};
+			exportStatement.declaration.properties.push(exportedComponents);
+		}
+		exportedComponents.value.properties.push(
+			{
+				"type": "Property",
+				"start": importStmt.start,
+				"end": importStmt.end,
+				"method": false,
+				"shorthand": true,
+				"computed": false,
+				"key": {
+					"type": "Identifier",
+					"start": importStmt.start,
+					"end": importStmt.start,
+					"name": componentName
+				},
+				"kind": "init",
+				"value": {
+					"type": "Identifier",
+					"start": importStmt.start,
+					"end": importStmt.start,
+					"name": componentName
+				}
+			}
+		);
+	}
+}

test/hydration/samples/component-short-syntax-with-identifier/Nested.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax-with-identifier/_after.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax-with-identifier/_before.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax-with-identifier/_config.js

@@ -0,0 +1,17 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			text: p.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+	}
+};

test/hydration/samples/component-short-syntax-with-identifier/main.html

@@ -0,0 +1,5 @@
+<RenamedNested/>
+
+<script>
+	import RenamedNested from './Nested.html';
+</script>

test/hydration/samples/component-short-syntax/Nested.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax/_after.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax/_before.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-short-syntax/_config.js

@@ -0,0 +1,17 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			text: p.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+	}
+};

test/hydration/samples/component-short-syntax/main.html

@@ -0,0 +1,5 @@
+<Nested/>
+
+<script>
+	import './Nested.html';
+</script>