move render logic into separate phase (#1678)

src/compile/Component.ts

@@ -5,21 +5,18 @@ import { walk, childKeys } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
 import deindent from '../utils/deindent';
-import CodeBuilder from '../utils/CodeBuilder';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
 import { removeNode } from '../utils/removeNode';
 import nodeToString from '../utils/nodeToString';
 import wrapModule from './wrapModule';
 import annotateWithScopes from '../utils/annotateWithScopes';
 import getName from '../utils/getName';
-import Stylesheet from '../css/Stylesheet';
+import Stylesheet from './css/Stylesheet';
 import { test } from '../config';
 import Fragment from './nodes/Fragment';
 import shared from './shared';
-import { DomTarget } from './dom';
-import { SsrTarget } from './ssr';
-import { Node, GenerateOptions, ShorthandImport, Ast, CompileOptions, CustomElementOptions } from '../interfaces';
+import { Node, ShorthandImport, Ast, CompileOptions, CustomElementOptions } from '../interfaces';
 import error from '../utils/error';
 import getCodeFrame from '../utils/getCodeFrame';
 import checkForComputedKeys from './validate/js/utils/checkForComputedKeys';
@@ -101,7 +98,6 @@ export default class Component {
 	name: string;
 	options: CompileOptions;
 	fragment: Fragment;
-	target: DomTarget | SsrTarget;
 
 	customElement: CustomElementOptions;
 	tag: string;
@@ -124,7 +120,6 @@ export default class Component {
 	hasComponents: boolean;
 	computations: Computation[];
 	templateProperties: Record<string, Node>;
-	slots: Set<string>;
 	javascript: [string, string];
 
 	used: {
@@ -142,13 +137,11 @@ export default class Component {
 
 	code: MagicString;
 
-	bindingGroups: string[];
 	indirectDependencies: Map<string, Set<string>>;
 	expectedProperties: Set<string>;
 	refs: Set<string>;
 
 	file: string;
-	fileVar: string;
 	locate: (c: number) => { line: number, column: number };
 
 	stylesheet: Stylesheet;
@@ -168,15 +161,13 @@ export default class Component {
 		source: string,
 		name: string,
 		options: CompileOptions,
-		stats: Stats,
-		target: DomTarget | SsrTarget
+		stats: Stats
 	) {
 		this.stats = stats;
 
 		this.ast = ast;
 		this.source = source;
 		this.options = options;
-		this.target = target;
 
 		this.imports = [];
 		this.shorthandImports = [];
@@ -188,7 +179,6 @@ export default class Component {
 		this.transitions = new Set();
 		this.actions = new Set();
 		this.importedComponents = new Map();
-		this.slots = new Set();
 
 		this.used = {
 			components: new Set(),
@@ -204,7 +194,6 @@ export default class Component {
 		this.refs = new Set();
 		this.refCallees = [];
 
-		this.bindingGroups = [];
 		this.indirectDependencies = new Map();
 
 		this.file = options.filename && (
@@ -229,8 +218,6 @@ export default class Component {
 		this.aliases = new Map();
 		this.usedNames = new Set();
 
-		this.fileVar = options.dev && this.getUniqueName('file');
-
 		this.computations = [];
 		this.templateProperties = {};
 		this.properties = new Map();
@@ -319,7 +306,11 @@ export default class Component {
 		return this.aliases.get(name);
 	}
 
-	generate(result: string, options: CompileOptions, { banner = '', name, format }: GenerateOptions ) {
+	generate(result: string, options: CompileOptions, {
+		banner = '',
+		name,
+		format
+	}) {
 		const pattern = /\[✂(\d+)-(\d+)$/;
 
 		const helpers = new Set();

src/css/Stylesheet.ts → src/compile/css/Stylesheet.ts

@@ -2,12 +2,12 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Selector from './Selector';
-import getCodeFrame from '../utils/getCodeFrame';
-import hash from '../utils/hash';
-import removeCSSPrefix from '../utils/removeCSSPrefix';
-import Element from '../compile/nodes/Element';
-import { Node, Ast, Warning } from '../interfaces';
-import Component from '../compile/Component';
+import getCodeFrame from '../../utils/getCodeFrame';
+import hash from '../../utils/hash';
+import removeCSSPrefix from '../../utils/removeCSSPrefix';
+import Element from '../nodes/Element';
+import { Node, Ast, Warning } from '../../interfaces';
+import Component from '../Component';
 
 const isKeyframesNode = (node: Node) => removeCSSPrefix(node.name) === 'keyframes'
 

src/compile/index.ts

@@ -1,13 +1,13 @@
 import { assign } from '../shared';
 import Stats from '../Stats';
 import parse from '../parse/index';
-import generate, { DomTarget } from './dom/index';
-import generateSSR, { SsrTarget } from './ssr/index';
+import renderDOM from './render-dom/index';
+import renderSSR from './render-ssr/index';
 import { CompileOptions, Warning, Ast } from '../interfaces';
 import Component from './Component';
 
 function normalize_options(options: CompileOptions): CompileOptions {
-	let normalized = assign({ generate: 'dom' }, options);
+	let normalized = assign({ generate: 'dom', dev: false }, options);
 	const { onwarn, onerror } = normalized;
 
 	normalized.onwarn = onwarn
@@ -74,20 +74,19 @@ export default function compile(source: string, options: CompileOptions) {
 			source,
 			options.name || 'SvelteComponent',
 			options,
-			stats,
-
-			// TODO make component generator-agnostic, to allow e.g. WebGL generator
-			options.generate === 'ssr' ? new SsrTarget() : new DomTarget()
+			stats
 		);
 		stats.stop('create component');
 
 		if (options.generate === false) {
 			return { ast, stats: stats.render(null), js: null, css: null };
 		}
 
-		const compiler = options.generate === 'ssr' ? generateSSR : generate;
+		if (options.generate === 'ssr') {
+			return renderSSR(component, options);
+		}
 
-		return compiler(component, options);
+		return renderDOM(component, options);
 	} catch (err) {
 		options.onerror(err);
 		return;