resolve #11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minicomp",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Minimalistic library for creating Web Components",
   "main": "dist/commonjs/index.js",
   "module": "dist/es/index.js",
@@ -39,6 +39,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
+    "@happy-dom/jest-environment": "^9.20.3",
     "@sindresorhus/tsconfig": "^3.0.1",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.15",

sample/component.js

@@ -1,21 +1,13 @@
-import { template, use } from 'htmplate'
-import { observe, Timer, Subject } from 'quel'
-import { define, onAttribute, onCleanup } from '../src'
-
-
-const tmpl = template`<div>elapsed: <span>0</span></div>`
-
-define('test-el', ({ start }) => {
-  const host$ = use(tmpl)
-  const span$ = host$.querySelector('span')
-
-  const pad = start ? parseInt(start) : 0
-  const timers = new Subject()
-
-  observe($ => span$.textContent = ($($(timers)) ?? 0) + pad)
-
-  onAttribute('rate', (value) => timers.set(new Timer(parseInt(value))))
-  onCleanup(() => timers.get().stop())
-
-  return host$
+import { define } from '../src'
+import { ref, template } from 'rehtm'
+
+define('a-button', () => {
+  const span = ref()
+  let count = 0
+
+  return template`
+    <button onclick=${() => span.current.textContent = ++count}>
+      Client <span ref=${span} role="status">0</span>
+    </button>
+  `
 })

sample/index.html

@@ -1,7 +1,5 @@
 <script src="./index.js" type="module"></script>
 
-<say-hi to="World"></say-hi>
-<test-el rate="200"></test-el>
-<button id="move">MOVE</button>
-<button id="remove">REMOVE</button>
-<input type="range" min="10" max="1000" value="200"/>
+<a-button>
+  <template shadowrootmode="open"><button>Server <span role="status">0</span></button></template>
+</a-button>

sample/index.js

@@ -1,28 +1 @@
-import sleep from 'sleep-promise'
-import { from, observe } from 'quel'
-
 import './component'
-import './simple-comp'
-
-const simple$ = document.querySelector('say-hi')
-
-const testEl$ = document.querySelector('test-el')
-const moveClick = from(document.querySelector('#move'))
-const removeClick = from(document.querySelector('#remove'))
-const rate = from(document.querySelector('input'))
-
-observe(async $ => {
-  await sleep(200)
-  $(rate) && testEl$.setAttribute('rate',  parseInt($(rate)))
-})
-
-observe($ => {
-  if($(moveClick)) {
-    testEl$.remove()
-    document.body.appendChild(testEl$)
-
-    simple$.setAttribute('to', 'Jack')
-  }
-})
-
-observe($ => $(removeClick) && testEl$.remove())

src/component.ts

@@ -26,40 +26,50 @@ export function component(
     private _attributeChanged?: AttributeChangedHook
     private _propertyChanged?: PropertyChangedHook
 
+    private _shouldHydrate = false
+    private _initialized = false
+    private _root: ShadowRoot
+
     constructor() {
       super()
 
-      const props = {}
-      for (const attr of this.attributes) {
-        props[attr.name] = attr.value
-      }
+      this._shouldHydrate = !!this.shadowRoot
+      /* istanbul ignore next */
+      this._root = this._shouldHydrate ? this.shadowRoot! : this.attachShadow({ mode: 'open' })
+    }
+
+    connectedCallback() {
+      if (!this._initialized) {
+        this._initialized = true
+        const props = {}
+        for (const attr of this.attributes) {
+          props[attr.name] = attr.value
+        }
 
-      const [node, hooks] = acceptHooks(() => fn(props), this)
-      this._connected = hooks.onConnected
-      this._disconnected = hooks.onDisconnected
-      this._adopted = hooks.onAdopted
-      this._attributeChanged = hooks.onAttributeChanged
-      this._propertyChanged = hooks.onPropertyChanged
-
-      // TODO: test this using happy-dom (https://www.npmjs.com/package/happy-dom)
-      /* istanbul ignore if */
-      if (isSSRTemplate(node) && this.shadowRoot) {
-        node.hydrateRoot(this.shadowRoot)
-      } else {
-        const root = this.attachShadow({ mode: 'open' })
-        if (typeof node === 'string') {
-          root.innerHTML = node
-        } else if (isSSRTemplate(node)) {
-          root.appendChild(node.create())
+        const [node, hooks] = acceptHooks(() => fn(props), this)
+        this._connected = hooks.onConnected
+        this._disconnected = hooks.onDisconnected
+        this._adopted = hooks.onAdopted
+        this._attributeChanged = hooks.onAttributeChanged
+        this._propertyChanged = hooks.onPropertyChanged
+
+        // TODO: test this using happy-dom (https://www.npmjs.com/package/happy-dom)
+        /* istanbul ignore if */
+        if (isSSRTemplate(node) && this._shouldHydrate) {
+          node.hydrateRoot(this._root)
         } else {
-          root.appendChild(node)
+          if (typeof node === 'string') {
+            this._root.innerHTML = node
+          } else if (isSSRTemplate(node)) {
+            this._root.appendChild(node.create())
+          } else {
+            this._root.appendChild(node)
+          }
         }
-      }
 
-      hooks.onRendered && hooks.onRendered(this)
-    }
+        hooks.onRendered && hooks.onRendered(this)
+      }
 
-    connectedCallback() {
       this._connected && this._connected(this)
     }
 

src/test/define.test.ts

@@ -13,13 +13,15 @@ describe(define, () => {
   test('defines a component.', () => {
     define('def-1', () => '<div>Hellow World!</div>')
     const el = document.createElement('def-1')
+    document.body.appendChild(el)
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
 
   test('can also be used with a definable component.', () => {
     const comp = definable('def-2', () => '<div>Hellow World!</div>')
     define(comp)
     const el = document.createElement('def-2')
+    document.body.appendChild(el)
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
 
@@ -38,6 +40,7 @@ describe(define, () => {
       return div
     })
     const el = document.createElement('def-4')
+    document.body.appendChild(el)
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
 
@@ -48,6 +51,7 @@ describe(define, () => {
     }).define('def-5', () => '<div>Hellow World!</div>')
 
     const el = document.createElement('p', { is: 'def-5' })
+    document.body.appendChild(el)
     expect(el).toBeInstanceOf(HTMLParagraphElement)
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
@@ -56,6 +60,7 @@ describe(define, () => {
     define('def-6', () => template`<div>Hellow World!</div>`)
 
     const el = document.createElement('def-6')
+    document.body.appendChild(el)
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
 
@@ -64,9 +69,11 @@ describe(define, () => {
     using({ window }).define('def-7', () => '<div>Hellow World!</div>')
 
     const el1 = document.createElement('def-7')
+    document.body.appendChild(el1)
     expect(el1.shadowRoot).toBeFalsy()
 
     const el2 = window.document.createElement('def-7')
+    window.document.body.appendChild(el2)
     expect(el2.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
 
@@ -76,9 +83,20 @@ describe(define, () => {
     window.customElements.define('def-8', comp)
 
     const el1 = document.createElement('def-8')
+    document.body.appendChild(el1)
     expect(el1.shadowRoot).toBeFalsy()
 
     const el2 = window.document.createElement('def-8')
+    window.document.body.appendChild(el2)
     expect(el2.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
+
+  test('works well will `document.createElement()`.', () => {
+    define('def-9', ({name}) => `<div>Hellow ${name}!</div>`)
+    const el = document.createElement('def-9')
+    el.setAttribute('name', 'World')
+    document.body.appendChild(el)
+
+    expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
+  })
 })

src/test/hooks/on-adopted.test.ts

@@ -11,7 +11,8 @@ describe(onAdopted, () => {
       return '<div>Hi!</div>'
     })
 
-    const el = document.createElement('oa-1');
+    const el = document.createElement('oa-1')
+    document.body.appendChild(el);
     (el as any).adoptedCallback()
     expect(cb).toHaveBeenCalledWith(el)
   })

src/test/hooks/on-attribute-changed.test.ts

@@ -12,6 +12,7 @@ describe(onAttributeChanged, () => {
     })
 
     const el = document.createElement('oac-1')
+    document.body.appendChild(el)
     el.setAttribute('foo', 'bar')
     expect(cb).toHaveBeenCalledWith('foo', 'bar', el)
   })
@@ -25,6 +26,7 @@ describe(onAttributeChanged, () => {
     })
 
     const el = document.createElement('oac-2')
+    document.body.appendChild(el)
     el.setAttribute('foo', 'bar')
     el.removeAttribute('foo')
     expect(cb).toHaveBeenCalledWith('foo', ATTRIBUTE_REMOVED, el)
@@ -39,6 +41,7 @@ describe(onAttributeChanged, () => {
     })
 
     const el = document.createElement('oac-3')
+    document.body.appendChild(el)
     el.setAttribute('foo', 'bar')
     el.setAttribute('foo', 'bar')
     expect(cb).toHaveBeenCalledTimes(2)
@@ -54,6 +57,7 @@ describe(onAttributeChanged, () => {
     })
 
     const el = document.createElement('oac-4')
+    document.body.appendChild(el)
     el.setAttribute('foo', 'bar')
     expect(a).toEqual([1, 2])
   })

src/test/hooks/on-property-changed.test.ts

@@ -13,6 +13,7 @@ describe(onPropertyChanged, () => {
     })
 
     const el = document.createElement('opc-1') as PropableElement
+    document.body.appendChild(el)
     el.setProperty('foo', 'bar')
     expect(cb).toHaveBeenCalledWith('foo', 'bar', el)
     expect(el['foo']).toBe('bar')
@@ -28,6 +29,7 @@ describe(onPropertyChanged, () => {
     })
 
     const el = document.createElement('opc-2') as PropableElement
+    document.body.appendChild(el)
     el.setProperty('foo', 'bar')
     expect(a).toEqual([1, 2])
   })

src/test/hooks/on-property.test.ts

@@ -14,6 +14,7 @@ describe(onProperty, () => {
     })
 
     const el = document.createElement('op-1') as PropableElement
+    document.body.appendChild(el)
     el.setProperty('foo', 'bar')
 
     expect(el['foo']).toBe('bar')

src/test/hooks/on-rendered.test.ts

@@ -12,6 +12,7 @@ describe(onRendered, () => {
     })
 
     const el = document.createElement('or-1')
+    document.body.appendChild(el)
     expect(cb).toHaveBeenCalledWith(el)
   })
 
@@ -24,7 +25,8 @@ describe(onRendered, () => {
       return '<div>Hi!</div>'
     })
 
-    document.createElement('or-2')
+    const el = document.createElement('or-2')
+    document.body.appendChild(el)
     expect(a).toEqual([1, 2])
   })
 })