Switch to WeakMap with String objects to fix memory leak

- Replace LRU cache with WeakMap approach from PR developit#43
- Use String objects as WeakMap keys for automatic garbage collection
- Memory bounded to active rendering context, no manual management needed
- Update tests to use valueOf() to convert String objects to primitives

Fixes developit#20, developit#34
Based on: developit#43

Author: TimDaub

package.json

@@ -69,8 +69,5 @@
     "rollup-plugin-babel": "^2.4.0",
     "rollup-plugin-es3": "^1.0.3",
     "uglify-js": "^2.6.2"
-  },
-  "dependencies": {
-    "lru-cache": "11.2.2"
   }
 }

src/vhtml.js

@@ -1,5 +1,4 @@
 import emptyTags from './empty-tags.js';
-import { LRUCache } from 'lru-cache';
 
 // escape an attribute
 let esc = str => String(str).replace(/[&<>"']/g, s=>`&${map[s]};`);
@@ -10,15 +9,10 @@ let DOMAttributeNames = {
 	htmlFor: 'for'
 };
 
-// Use LRU cache to prevent unbounded memory growth
-// Based on heap analysis: ~5,400 strings per feed, 15s regeneration cycle
-// 10,000 max = ~2 feeds worth (allows cache hits during regeneration)
-// Strings are ~32 bytes each, so 10,000 entries = ~320 KB
-let sanitized = new LRUCache({
-	max: 10000,
-	maxSize: 5 * 1024 * 1024,  // 5 MB safety cap
-	sizeCalculation: () => 1    // Count-based eviction (uniform string sizes)
-});
+// Use WeakMap to prevent unbounded memory growth
+// String objects are automatically garbage collected when no longer referenced
+// Memory is bounded to active rendering context, cleaned up automatically
+let sanitized = new WeakMap();
 
 /** Hyperscript reviver that constructs a sanitized HTML string. */
 export default function h(name, attrs) {
@@ -64,6 +58,7 @@ export default function h(name, attrs) {
 		s += name ? `</${name}>` : '';
 	}
 
-	sanitized.set(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>'
 		);
 	});