Switch to WeakMap and String objects to avoid memory leak. Fixes deve…

…lopit#20 and developit#34.

src/vhtml.js

@@ -9,7 +9,7 @@ let DOMAttributeNames = {
  htmlFor: 'for'
 };
 
-let sanitized = {};
+let sanitized = new WeakMap();
 
 /** Hyperscript reviver that constructs a sanitized HTML string. */
 export default function h(name, attrs) {
@@ -47,14 +47,15 @@ export default function h(name, attrs) {
  for (let i=child.length; i--; ) stack.push(child[i]);
  }
  else {
- s += sanitized[child]===true ? child : esc(child);
+ s += sanitized.has(child) ? child : esc(child);
  }
  }
  }
 
  s += name ? `</${name}>` : '';
  }
 
- sanitized[s] = true;
- return s;
+ let res = new String(s);
+ sanitized.set(res, true);
+ return res;
 }

test/vhtml.js

@@ -3,10 +3,14 @@ import { expect } from 'chai';
 /** @jsx h */
 /*global describe,it*/
 
+function valueOf(str) {
+ return str.valueOf();
+}
+
 describe('vhtml', () => {
  it('should stringify html', () => {
  let items = ['one', 'two', 'three'];
- expect(
+ expect(valueOf(
  <div class="foo">
  <h1>Hi!</h1>
  <p>Here is a list of {items.length} items:</p>
@@ -16,46 +20,46 @@ describe('vhtml', () => {
  )) }
  </ul>
  </div>
- ).to.equal(
+ )).to.equal(
  `<div class="foo"><h1>Hi!</h1><p>Here is a list of 3 items:</p><ul><li>one</li><li>two</li><li>three</li></ul></div>`
  );
  });
 
  it('should sanitize children', () => {
- expect(
+ expect(valueOf(
  <div>
  { `<strong>blocked</strong>` }
  <em>allowed</em>
  </div>
- ).to.equal(
+ )).to.equal(
  `<div>&lt;strong&gt;blocked&lt;/strong&gt;<em>allowed</em></div>`
  );
  });
 
  it('should sanitize attributes', () => {
- expect(
+ expect(valueOf(
  <div onclick={`&<>"'`} />
- ).to.equal(
+ )).to.equal(
  `<div onclick="&amp;&lt;&gt;&quot;&apos;"></div>`
  );
  });
 
  it('should not sanitize the "dangerouslySetInnerHTML" attribute, and directly set its `__html` property as innerHTML', () => {
- expect(
+ expect(valueOf(
  <div dangerouslySetInnerHTML={{ __html: "<span>Injected HTML</span>" }} />
- ).to.equal(
+ )).to.equal(
  `<div><span>Injected HTML</span></div>`
  );
  });
 
  it('should flatten children', () => {
- expect(
+ expect(valueOf(
  <div>
  {[['a','b']]}
  <c>d</c>
  {['e',['f'],[['g']]]}
  </div>
- ).to.equal(
+ )).to.equal(
  `<div>ab<c>d</c>efg</div>`
  );
  });
@@ -70,7 +74,7 @@ describe('vhtml', () => {
  </li>
  );
 
- expect(
+ expect(valueOf(
  <div class="foo">
  <h1>Hi!</h1>
  <ul>
@@ -81,7 +85,7 @@ describe('vhtml', () => {
  )) }
  </ul>
  </div>
- ).to.equal(
+ )).to.equal(
  `<div class="foo"><h1>Hi!</h1><ul><li id="0"><h4>one</h4>This is item one!</li><li id="1"><h4>two</h4>This is item two!</li></ul></div>`
  );
  });
@@ -95,7 +99,7 @@ describe('vhtml', () => {
  </li>
  );
 
- expect(
+ expect(valueOf(
  <div class="foo">
  <h1>Hi!</h1>
  <ul>
@@ -106,7 +110,7 @@ describe('vhtml', () => {
  )) }
  </ul>
  </div>
- ).to.equal(
+ )).to.equal(
  `<div class="foo"><h1>Hi!</h1><ul><li><h4></h4></li><li><h4></h4></li></ul></div>`
  );
  });
@@ -121,7 +125,7 @@ describe('vhtml', () => {
  </li>
  );
 
- expect(
+ expect(valueOf(
  <div class="foo">
  <h1>Hi!</h1>
  <ul>
@@ -132,13 +136,13 @@ describe('vhtml', () => {
  )) }
  </ul>
  </div>
- ).to.equal(
+ )).to.equal(
  `<div class="foo"><h1>Hi!</h1><ul><li><h4></h4>This is item one!</li><li><h4></h4>This is item two!</li></ul></div>`
  );
  });
 
  it('should support empty (void) tags', () => {
- expect(
+ expect(valueOf(
  <div>
  <area />
  <base />
@@ -161,31 +165,31 @@ describe('vhtml', () => {
  <span />
  <p />
  </div>
- ).to.equal(
+ )).to.equal(
  `<div><area><base><br><col><command><embed><hr><img><input><keygen><link><meta><param><source><track><wbr><div></div><span></span><p></p></div>`
  );
  });
 
  it('should handle special prop names', () => {
- expect(
+ expect(valueOf(
  <div className="my-class" htmlFor="id" />
- ).to.equal(
+ )).to.equal(
  '<div class="my-class" for="id"></div>'
  );
  });
 
  it('should support string fragments', () => {
- expect(
+ expect(valueOf(
  h(null, null, "foo", "bar", "baz")
- ).to.equal(
+ )).to.equal(
  'foobarbaz'
  );
  });
 
  it('should support element fragments', () => {
- expect(
+ expect(valueOf(
  h(null, null, <p>foo</p>, <em>bar</em>, <div class="qqqqqq">baz</div>)
- ).to.equal(
+ )).to.equal(
  '<p>foo</p><em>bar</em><div class="qqqqqq">baz</div>'
  );
  });