add array support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehtm",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "create HTML using HTM",
   "main": "dist/commonjs/index.js",
   "module": "dist/es/index.js",
@@ -48,7 +48,7 @@
     "eslint": "^8.30.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "minicomp": "^0.2.0",
+    "minicomp": "^0.4.0",
     "ts-inference-check": "^0.2.1",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",

src/extensions/test/object-props.ext.test.ts

@@ -9,7 +9,10 @@ describe('object properties', () => {
 
   test('adds object properties to custom elements.', () => {
     const cb = jest.fn()
-    define('op-ext-test', () => {
+    const cb2 = jest.fn()
+
+    define('op-ext-test', ({test: t}) => {
+      cb2(t)
       onProperty('test', cb)
 
       return '<div></div>'
@@ -20,6 +23,8 @@ describe('object properties', () => {
     const el = fact.create('op-ext-test', { test: obj, id: 'foo' }, [], fact) as HTMLElement
     document.body.append(el)
 
+    expect(cb2).toBeCalledTimes(1)
+    expect(cb2).toBeCalledWith(obj)
     expect(cb).toBeCalledTimes(1)
     expect(cb).toBeCalledWith(obj)
     expect(el.id).toBe('foo')

src/factory/dom.ts

@@ -46,11 +46,16 @@ export const domFactoryExt: (document: Document) => DOMFactoryExt = (document) =
     }
   },
 
-  fill: (node, value, fallback) => {
+  fill: (node, value, fallback, self) => {
     if (value instanceof document.defaultView!.Node) {
       node.childNodes.forEach((child) => node.removeChild(child))
       node.appendChild(value)
-    } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    } else if (Array.isArray(value)) {
+      node.childNodes.forEach((child) => node.removeChild(child))
+      for (const child of value) {
+        self.append(node, child, self)
+      }
+    }else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
       node.textContent = value.toString()
     } else {
       fallback()

src/factory/test/factory.test.ts

@@ -23,6 +23,14 @@ describe('factory', () => {
     expect(b.textContent).toBe('Hi Hi!')
   })
 
+  test('can fill DOM elements with arrays of stuff.', () => {
+    const factory = domFactory()
+    const b = document.createElement('b')
+    factory.fill(b, 'Hellow Hellow', factory)
+    factory.fill(b, ['hellow', 'world'], factory)
+    expect(b.textContent).toBe('hellowworld')
+  })
+
   test('throws error for unsupported tags.', () => {
     const factory = domFactory()
     expect(() => factory.create(42, {}, [], factory)).toThrowError()
@@ -41,7 +49,7 @@ describe('factory', () => {
   test('throws error for unsupported content to fill.', () => {
     const factory = domFactory()
     const b = document.createElement('b')
-    expect(() => factory.fill(b, [42], factory)).toThrowError()
+    expect(() => factory.fill(b, () => {}, factory)).toThrowError()
   })
 
   test('can be extended to support new tag types.', () => {
@@ -129,7 +137,7 @@ describe('factory', () => {
 
     const fact = extend(domFactory(), {
       fill(el, child, fallback) {
-        if (Array.isArray(child)) {
+        if (typeof child === 'function') {
           cb()
 
           return fallback(el, '42')
@@ -140,7 +148,7 @@ describe('factory', () => {
     })
 
     const b = document.createElement('b')
-    fact.fill(b, [41], fact)
+    fact.fill(b, () => {}, fact)
     expect(cb).toBeCalledTimes(1)
     expect(b.textContent).toBe('42')
   })

src/test/build.test.ts

@@ -127,4 +127,17 @@ describe(build, () => {
     expect(div$).not.toBeNull()
     expect(div$!.textContent).toBe('halo World!')
   })
+
+  test('can embed arrays in elements.', () => {
+    const { html } = build(domFactory())
+
+    const c1 = html`<span>World</span>`
+    const c2 = html`<div>halo ${[c1, '!']}</div>`
+
+    document.body.appendChild(c2)
+
+    const div$ = document.querySelector('div')
+    expect(div$).not.toBeNull()
+    expect(div$!.textContent).toBe('halo World!')
+  })
 })