refactor

Author: Rich-Harris

src/css/Stylesheet.ts

@@ -3,6 +3,7 @@ import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Selector from './Selector';
 import getCodeFrame from '../utils/getCodeFrame';
+import Element from '../generators/nodes/Element';
 import { Validator } from '../validate/index';
 import { Node, Parsed, Warning } from '../interfaces';
 
@@ -19,7 +20,7 @@ class Rule {
 		this.declarations = node.block.children.map((node: Node) => new Declaration(node));
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element, stack: Element[]) {
 		this.selectors.forEach(selector => selector.apply(node, stack)); // TODO move the logic in here?
 	}
 
@@ -159,7 +160,7 @@ class Atrule {
 		this.children = [];
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element, stack: Element[]) {
 		if (this.node.name === 'media') {
 			this.children.forEach(child => {
 				child.apply(node, stack);
@@ -330,9 +331,15 @@ export default class Stylesheet {
 		}
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element) {
 		if (!this.hasStyles) return;
 
+		const stack: Element[] = [];
+		let parent: Node = node;
+		while (parent = parent.parent) {
+			if (parent.type === 'Element') stack.unshift(<Element>parent);
+		}
+
 		if (this.cascade) {
 			if (stack.length === 0) node._needsCssAttribute = true;
 			return;

src/generators/Generator.ts

@@ -9,14 +9,13 @@ import flattenReference from '../utils/flattenReference';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
 import { removeNode, removeObjectKey } from '../utils/removeNode';
-import wrapModule from './shared/utils/wrapModule';
+import wrapModule from './wrapModule';
 import annotateWithScopes, { Scope } from '../utils/annotateWithScopes';
 import getName from '../utils/getName';
 import clone from '../utils/clone';
-import DomBlock from './dom/Block';
-import SsrBlock from './server-side-rendering/Block';
 import Stylesheet from '../css/Stylesheet';
 import { test } from '../config';
+import nodes from './nodes/index';
 import { Node, GenerateOptions, Parsed, CompileOptions, CustomElementOptions } from '../interfaces';
 
 interface Computation {
@@ -162,11 +161,9 @@ export default class Generator {
 
 		this.computations = [];
 		this.templateProperties = {};
+		this.name = this.alias(name);
 
 		this.walkJs(dom);
-		this.walkTemplate();
-
-		this.name = this.alias(name);
 
 		if (options.customElement === true) {
 			this.customElement = {
@@ -180,6 +177,8 @@ export default class Generator {
 		if (this.customElement && !this.customElement.tag) {
 			throw new Error(`No tag name specified`); // TODO better error
 		}
+
+		this.walkTemplate();
 	}
 
 	addSourcemapLocations(node: Node) {
@@ -200,7 +199,8 @@ export default class Generator {
 	}
 
 	contextualise(
-		block: DomBlock | SsrBlock,
+		contexts: Map<string, string>,
+		indexes: Map<string, string>,
 		expression: Node,
 		context: string,
 		isEventHandler: boolean
@@ -214,7 +214,6 @@ export default class Generator {
 		const usedIndexes: Set<string> = new Set();
 
 		const { code, helpers } = this;
-		const { contexts, indexes } = block;
 
 		let scope: Scope;
 		let lexicalDepth = 0;
@@ -638,6 +637,7 @@ export default class Generator {
 	}
 
 	walkTemplate() {
+		const generator = this;
 		const {
 			code,
 			expectedProperties,
@@ -703,7 +703,30 @@ export default class Generator {
 		const indexesStack: Set<string>[] = [indexes];
 
 		walk(html, {
-			enter(node: Node, parent: Node) {
+			enter(node: Node, parent: Node, key: string) {
+				// TODO this is hacky as hell
+				if (key === 'parent') return this.skip();
+				node.parent = parent;
+
+				node.generator = generator;
+
+				if (node.type === 'Element' && (node.name === ':Component' || node.name === ':Self' || generator.components.has(node.name))) {
+					node.type = 'Component';
+					node.__proto__ = nodes.Component.prototype;
+				} else if (node.name === ':Window') { // TODO do this in parse?
+					node.type = 'Window';
+					node.__proto__ = nodes.Window.prototype;
+				} else if (node.type === 'Element' && node.name === 'slot' && !generator.customElement) {
+					node.type = 'Slot';
+					node.__proto__ = nodes.Slot.prototype;
+				} else if (node.type in nodes) {
+					node.__proto__ = nodes[node.type].prototype;
+				}
+
+				if (node.type === 'Element') {
+					generator.stylesheet.apply(node);
+				}
+
 				if (node.type === 'EachBlock') {
 					node.metadata = contextualise(node.expression, contextDependencies, indexes);
 
@@ -764,7 +787,7 @@ export default class Generator {
 					this.skip();
 				}
 
-				if (node.type === 'Element' && node.name === ':Component') {
+				if (node.type === 'Component' && node.name === ':Component') {
 					node.metadata = contextualise(node.expression, contextDependencies, indexes);
 				}
 			},
@@ -779,6 +802,22 @@ export default class Generator {
 						indexes = indexesStack[indexesStack.length - 1];
 					}
 				}
+
+				if (node.type === 'Element' && node.name === 'option') {
+					// Special case — treat these the same way:
+					//   <option>{{foo}}</option>
+					//   <option value='{{foo}}'>{{foo}}</option>
+					const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value');
+
+					if (!valueAttribute) {
+						node.attributes.push(new nodes.Attribute({
+							generator,
+							name: 'value',
+							value: node.children,
+							parent: node
+						}));
+					}
+				}
 			}
 		});
 	}

src/generators/dom/Block.ts

@@ -130,15 +130,14 @@ export default class Block {
 		claimStatement: string,
 		parentNode: string
 	) {
-		const isToplevel = !parentNode;
-
 		this.addVariable(name);
 		this.builders.create.addLine(`${name} = ${renderStatement};`);
 		this.builders.claim.addLine(`${name} = ${claimStatement};`);
 
-		this.mount(name, parentNode);
-
-		if (isToplevel) {
+		if (parentNode) {
+			this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
+		} else {
+			this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
 			this.builders.unmount.addLine(`@detachNode(${name});`);
 		}
 	}
@@ -166,20 +165,7 @@ export default class Block {
 	}
 
 	contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
-		return this.generator.contextualise(
-			this,
-			expression,
-			context,
-			isEventHandler
-		);
-	}
-
-	mount(name: string, parentNode: string) {
-		if (parentNode) {
-			this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
-		} else {
-			this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
-		}
+		return this.generator.contextualise(this.contexts, this.indexes, expression, context, isEventHandler);
 	}
 
 	toString() {

src/generators/dom/index.ts

@@ -8,11 +8,9 @@ import { stringify, escape } from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
 import globalWhitelist from '../../utils/globalWhitelist';
 import reservedNames from '../../utils/reservedNames';
-import visit from './visit';
 import shared from './shared';
 import Generator from '../Generator';
 import Stylesheet from '../../css/Stylesheet';
-import preprocess from './preprocess';
 import Block from './Block';
 import { test } from '../../config';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
@@ -96,14 +94,11 @@ export default function dom(
 		namespace,
 	} = generator;
 
-	const { block, state } = preprocess(generator, namespace, parsed.html);
+	parsed.html.build();
+	const { block } = parsed.html;
 
 	generator.stylesheet.warnOnUnusedSelectors(options.onwarn);
 
-	parsed.html.children.forEach((node: Node) => {
-		visit(generator, block, state, node, [], []);
-	});
-
 	const builder = new CodeBuilder();
 	const computationBuilder = new CodeBuilder();
 	const computationDeps = new Set();