Merge pull request #866 from glimmerjs/tomdale/upgrade-simple-dom-1-4

Upgrade SimpleDOM and use DOM types more consistently

.vscode/tasks.json

@@ -1,10 +1,9 @@
 {
   "version": "2.0.0",
-  "command": "npm",
   "tasks": [{
     "label": "vscode-build",
     "type": "shell",
-    "command": "npm",
+    "command": "yarn",
     "args": ["run", "problems"],
     "group": {
       "kind": "build",

build/broccoli/build-tests.js

@@ -8,7 +8,6 @@ const transpileES6 = require('emberjs-build/lib/utils/transpile-es6');
 const transpileToES5 = require('./transpile-to-es5');
 const handlebarsInlinedTrees = require('./handlebars-inliner');
 const TSLint = require('broccoli-tslinter');
-const Rollup = require('broccoli-rollup');
 const babel = require('broccoli-babel-transpiler');
 
 /**
@@ -92,25 +91,19 @@ function includeVendorDependencies() {
     }
   );
 
-  let simpleDOM = new Rollup('node_modules/simple-dom/lib', {
-    rollup: {
-      input: ['simple-dom.js'],
-      output: {
-        file: 'simple-dom.js',
-        format: 'es'
-      }
-    }
-  });
-
   let transpiled = transpileES6(
-    merge([simpleHTMLTokenizer, handlebarsInlinedTrees.compiler, simpleDOM]),
+    merge([simpleHTMLTokenizer, handlebarsInlinedTrees.compiler]),
     'test-dependencies',
     {
       avoidDefine: false
     }
   );
 
-  return concat(transpiled, {
+  let simpleDOM = funnel('node_modules/@simple-dom', {
+    include: ['*/dist/amd/es5/*.{js,map}']
+  });
+
+  return concat(merge([transpiled, simpleDOM]), {
     inputFiles: ['**/*.js'],
     outputFile: 'assets/vendor.js'
   });

package.json

@@ -34,8 +34,11 @@
   "dependencies": {
     "babel-plugin-debug-macros": "^0.1.11",
     "handlebars": "^4.0.6",
-    "simple-dom": "^0.3.0",
-    "simple-html-tokenizer": "^0.5.6"
+    "simple-html-tokenizer": "^0.5.6",
+    "@simple-dom/document": "^1.4.0",
+    "@simple-dom/serializer": "^1.4.0",
+    "@simple-dom/void-map": "^1.4.0",
+    "@simple-dom/interface": "^1.4.0"
   },
   "devDependencies": {
     "@glimmer/build": "^0.8.2",
@@ -90,4 +93,4 @@
       "internal": ":house: Internal"
     }
   }
-}
+}

packages/@glimmer/bundle-compiler/test/entry-point-test.ts

@@ -7,27 +7,27 @@ export class EntryPointTest {
     let delegate = new EagerRenderDelegate();
     delegate.registerComponent('Basic', 'Basic', 'Title', `<h1>hello {{@title}}</h1>`);
 
-    let element = document.createElement('div');
+    let element = delegate.getInitialElement();
     let title = PrimitiveReference.create('renderComponent');
     delegate.renderComponent('Title', { title }, element);
 
-    QUnit.assert.equal(element.innerHTML, '<h1>hello renderComponent</h1>');
+    QUnit.assert.equal((element as HTMLElement).innerHTML, '<h1>hello renderComponent</h1>');
   }
 
   @test
   'does not leak args between invocations'() {
     let delegate = new EagerRenderDelegate();
     delegate.registerComponent('Basic', 'Basic', 'Title', `<h1>hello {{@title}}</h1>`);
 
-    let element = document.createElement('div');
+    let element = delegate.getInitialElement();
     let title = PrimitiveReference.create('renderComponent');
     delegate.renderComponent('Title', { title }, element);
-    QUnit.assert.equal(element.innerHTML, '<h1>hello renderComponent</h1>');
+    QUnit.assert.equal((element as HTMLElement).innerHTML, '<h1>hello renderComponent</h1>');
 
-    element = document.createElement('div');
+    element = delegate.getInitialElement();
     let newTitle = PrimitiveReference.create('new title');
     delegate.renderComponent('Title', { title: newTitle }, element);
-    QUnit.assert.equal(element.innerHTML, '<h1>hello new title</h1>');
+    QUnit.assert.equal((element as HTMLElement).innerHTML, '<h1>hello new title</h1>');
   }
 
   @test
@@ -36,15 +36,15 @@ export class EntryPointTest {
     delegate.registerComponent('Basic', 'Basic', 'Title', `<h1>hello {{@title}}</h1>`);
     delegate.registerComponent('Basic', 'Basic', 'Body', `<p>body {{@body}}</p>`);
 
-    let element = document.createElement('div');
+    let element = delegate.getInitialElement();
     let title = PrimitiveReference.create('renderComponent');
     delegate.renderComponent('Title', { title }, element);
-    QUnit.assert.equal(element.innerHTML, '<h1>hello renderComponent</h1>');
+    QUnit.assert.equal((element as HTMLElement).innerHTML, '<h1>hello renderComponent</h1>');
 
-    element = document.createElement('div');
+    element = delegate.getInitialElement();
     let body = PrimitiveReference.create('text');
     delegate.renderComponent('Body', { body }, element);
-    QUnit.assert.equal(element.innerHTML, '<p>body text</p>');
+    QUnit.assert.equal((element as HTMLElement).innerHTML, '<p>body text</p>');
   }
 }
 

packages/@glimmer/dom-change-list/lib/dom-operations.ts

@@ -1,5 +1,6 @@
 import { Simple, Option } from '@glimmer/interfaces';
 import { dict, assert } from '@glimmer/util';
+import { Namespace } from '@simple-dom/interface';
 import { NodeToken, NodeTokens } from './node-tokens';
 
 export enum ConstructionOperation {
@@ -25,7 +26,7 @@ function opcodeof(opcode: number): ConstructionOperation {
   return opcode >> 3;
 }
 
-export const HTML = 'http://www.w3.org/1999/xhtml';
+export const HTML = Namespace.HTML;
 
 export class Constants {
   private strings: string[] = [];
@@ -59,7 +60,7 @@ export class OperationsBuilder {
     };
   }
 
-  openElement(name: string, ns: Simple.Namespace = HTML): NodeToken {
+  openElement(name: string, ns: Namespace = HTML): NodeToken {
     let nameConst = this.constants.get(name);
     let nsConst = this.constants.get(ns);
 
@@ -71,7 +72,7 @@ export class OperationsBuilder {
     this.ops.push(withSize(ConstructionOperation.CloseElement, 0));
   }
 
-  setAttribute(name: string, value: string, ns: Simple.Namespace = HTML) {
+  setAttribute(name: string, value: string, ns: Namespace = Namespace.HTML) {
     let nameConst = this.constants.get(name);
     let valueConst = this.constants.get(value);
     let nsConst = this.constants.get(ns);
@@ -166,7 +167,10 @@ const ConstructionOperations: ConstructionFunction[] = [
 
     if (state.constructing) flush(state);
 
-    let el = document.createElementNS(constants[namespace] as Simple.Namespace, constants[tag]);
+    let el = document.createElementNS(
+      constants[namespace] as Simple.ElementNamespace,
+      constants[tag]
+    );
     state.constructing = el;
     state.tokens.register(el);
   },
@@ -188,7 +192,7 @@ const ConstructionOperations: ConstructionFunction[] = [
     );
 
     constructing!.setAttributeNS(
-      constants[namespace] as Simple.Namespace,
+      constants[namespace] as Simple.AttrNamespace,
       constants[name],
       constants[value]
     );

packages/@glimmer/dom-change-list/lib/tree-builder.ts

@@ -1,9 +1,10 @@
 import { Simple, Option, NodeTokens } from '@glimmer/interfaces';
-import { HTML } from './dom-operations';
+import { Namespace } from '@simple-dom/interface';
 import { DOMTreeConstruction } from './tree-construction';
 import { NodeToken } from './node-tokens';
 
-export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+export const SVG_NAMESPACE = Namespace.SVG;
+export const HTML_NAMESPACE = Namespace.HTML;
 
 // http://www.w3.org/TR/html/syntax.html#html-integration-point
 const SVG_INTEGRATION_POINTS = { foreignObject: 1, desc: 1, title: 1 };
@@ -66,7 +67,7 @@ export const BLACKLIST_TABLE = Object.create(null);
 
 interface Context {
   tag: string;
-  namespaceURI: Simple.Namespace;
+  namespaceURI: Namespace;
   isIntegration: boolean;
 }
 
@@ -105,15 +106,15 @@ export class TreeBuilder {
       return this.dom.openElement(tag, SVG_NAMESPACE);
     }
 
-    this.contexts.push({ tag, namespaceURI: HTML, isIntegration: false });
+    this.contexts.push({ tag, namespaceURI: HTML_NAMESPACE, isIntegration: false });
     return this.dom.openElement(tag);
   }
 
   closeElement() {
     this.dom.closeElement();
   }
 
-  setAttribute(name: string, value: string, namespace?: Simple.Namespace) {
+  setAttribute(name: string, value: string, namespace?: Namespace) {
     this.dom.setAttribute(name, value, namespace);
   }
 
@@ -130,7 +131,7 @@ export class TreeBuilder {
     return current && current.tag;
   }
 
-  get currentNamespace(): Option<Simple.Namespace> {
+  get currentNamespace(): Option<Namespace> {
     let current = this.current;
     return current && current.namespaceURI;
   }

packages/@glimmer/dom-change-list/lib/tree-construction.ts

@@ -1,4 +1,5 @@
 import { Simple } from '@glimmer/interfaces';
+import { Namespace } from '@simple-dom/interface';
 import { NodeToken, NodeTokens } from './node-tokens';
 import { HTML, OperationsBuilder, run } from './dom-operations';
 
@@ -13,7 +14,7 @@ export class DOMTreeConstruction {
     this.builder = new OperationsBuilder(this.ops);
   }
 
-  openElement(name: string, ns: Simple.Namespace = HTML): NodeToken {
+  openElement(name: string, ns: Namespace = HTML): NodeToken {
     this.builder.openElement(name, ns);
     return this.token++;
   }
@@ -32,7 +33,7 @@ export class DOMTreeConstruction {
     return this.token++;
   }
 
-  setAttribute(name: string, value: string, namespace: Simple.Namespace = HTML) {
+  setAttribute(name: string, value: string, namespace: Namespace = HTML) {
     this.builder.setAttribute(name, value, namespace);
   }
 

packages/@glimmer/dom-change-list/package.json

@@ -4,9 +4,10 @@
   "repository": "https://github.com/glimmerjs/glimmer-vm/tree/master/packages/@glimmer/dom-change-list",
   "dependencies": {
     "@glimmer/util": "^0.36.5",
-    "@glimmer/interfaces": "^0.36.5"
+    "@glimmer/interfaces": "^0.36.5",
+    "@simple-dom/interface": "^1.4.0"
   },
   "devDependencies": {
     "typescript": "^2.8.3"
   }
-}
+}

packages/@glimmer/dom-change-list/test/change-list-test.ts

@@ -1,13 +1,13 @@
 import { DOMTreeConstruction, NodeTokens } from '@glimmer/dom-change-list';
-
-import * as SimpleDOM from 'simple-dom';
 import { Simple } from '@glimmer/interfaces';
+import { Namespace } from '@simple-dom/interface';
+import createHTMLDocument from '@simple-dom/document';
 
 import { TestCase, module, test } from './test-case';
 import { Builder as TestBuilder, toHTML, toHTMLNS } from './support';
 
-const SVG: Simple.Namespace = 'http://www.w3.org/2000/svg';
-const XLINK: Simple.Namespace = 'http://www.w3.org/1999/xlink';
+const SVG: Namespace = Namespace.SVG;
+const XLINK: Namespace = Namespace.XLink;
 
 @module('[dom-change-list] DOMTreeConstruction')
 export class ChangeListTest extends TestCase {
@@ -18,8 +18,8 @@ export class ChangeListTest extends TestCase {
   protected construction!: DOMTreeConstruction;
 
   before() {
-    this.document = new SimpleDOM.Document();
-    this.parent = document.createElement('div');
+    this.document = createHTMLDocument();
+    this.parent = document.createElement('div') as Simple.Element;
     this.construction = new DOMTreeConstruction();
     this.tree = new Builder(this.construction);
   }
@@ -103,7 +103,7 @@ export class ChangeListTest extends TestCase {
 
   protected append(): NodeTokens {
     this.tree.appendTo(this.parent);
-    return this.construction.appendTo(this.parent, document);
+    return this.construction.appendTo(this.parent, document as Simple.Document);
   }
 
   protected shouldEqual(expectedHTML: string) {
@@ -126,7 +126,7 @@ export class ChangeListTest extends TestCase {
 export class Builder extends TestBuilder {
   protected tree!: DOMTreeConstruction; // Hides property in base class
 
-  openElement(tag: string, namespace?: Simple.Namespace) {
+  openElement(tag: string, namespace?: Namespace) {
     let token = this.tree.openElement(tag, namespace);
     this.expected[token] = { type: 'element', value: tag.toUpperCase() };
   }

packages/@glimmer/dom-change-list/test/support.ts

@@ -1,23 +1,25 @@
 import { Simple, Option, NodeTokens } from '@glimmer/interfaces';
-import * as SimpleDOM from 'simple-dom';
+import HTMLSerializer from '@simple-dom/serializer';
+import voidMap from '@simple-dom/void-map';
+import { Namespace } from '@simple-dom/interface';
 import { DOMTreeConstruction, TreeBuilder } from '@glimmer/dom-change-list';
 
-export const SVG: Simple.Namespace = 'http://www.w3.org/2000/svg';
-export const XLINK: Simple.Namespace = 'http://www.w3.org/1999/xlink';
+export const SVG: Namespace = Namespace.SVG;
+export const XLINK: Namespace = Namespace.XLink;
 
 export function toHTML(parent: Simple.Element | Simple.DocumentFragment) {
-  let serializer = new SimpleDOM.HTMLSerializer(SimpleDOM.voidMap);
+  let serializer = new HTMLSerializer(voidMap);
 
   return serializer.serializeChildren(parent);
 }
 
 export function toHTMLNS(parent: Simple.Element | Simple.DocumentFragment) {
-  let serializer = new NamespacedHTMLSerializer(SimpleDOM.voidMap);
+  let serializer = new NamespacedHTMLSerializer(voidMap);
 
   return serializer.serializeChildren(parent);
 }
 
-class NamespacedHTMLSerializer extends SimpleDOM.HTMLSerializer {
+class NamespacedHTMLSerializer extends HTMLSerializer {
   openTag(element: Simple.Element): string {
     if (element.namespaceURI === SVG) {
       return '<svg:' + element.tagName.toLowerCase() + this.attributes(element.attributes) + '>';
@@ -74,7 +76,7 @@ export class Builder {
     this.tree.closeElement();
   }
 
-  setAttribute(name: string, value: string, namespace?: Simple.Namespace) {
+  setAttribute(name: string, value: string, namespace?: Namespace) {
     this.tree.setAttribute(name, value, namespace);
   }
 

packages/@glimmer/dom-change-list/test/tree-builder-test.ts

@@ -1,13 +1,13 @@
 import { DOMTreeConstruction, NodeTokens, TreeBuilder } from '@glimmer/dom-change-list';
 
-import * as SimpleDOM from 'simple-dom';
+import createHTMLDocument from '@simple-dom/document';
 import { Simple } from '@glimmer/interfaces';
 
 import { TestCase, module, test } from './test-case';
 import { XLINK, Builder as TestBuilder, toHTML, toHTMLNS } from './support';
 
 @module('[dom-change-list] TreeBuilder')
-export class ChangeListTest extends TestCase {
+export class TreeBuilderTest extends TestCase {
   // These definitely assigned properties are set in before()
   protected document!: Simple.Document;
   protected parent!: Simple.Element | Simple.DocumentFragment;
@@ -16,8 +16,8 @@ export class ChangeListTest extends TestCase {
   protected construction!: DOMTreeConstruction;
 
   before() {
-    this.document = new SimpleDOM.Document();
-    this.parent = document.createElement('div');
+    this.document = createHTMLDocument();
+    this.parent = this.document.createElement('div');
     this.construction = new DOMTreeConstruction();
     this.builder = new TreeBuilder(this.construction);
     this.tree = new Builder(this.builder);
@@ -102,7 +102,7 @@ export class ChangeListTest extends TestCase {
 
   protected append(): NodeTokens {
     this.tree.appendTo(this.parent);
-    return this.construction.appendTo(this.parent, document);
+    return this.construction.appendTo(this.parent, this.document);
   }
 
   protected shouldEqual(expectedHTML: string) {