feat: Support template children

README.md

@@ -31,6 +31,13 @@ You can then use this element in an HTML file:
 <my-component-with-children>
   <div class="alert">Hello, world!</div>
 </my-component-with-children>
+
+<!-- OR -->
+<my-component-with-children>
+  <template>
+    <div class="alert">Hello, world!</div>
+  </template>
+</my-component-with-children>
 ```
 
 ## Limitation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonicgarden/rewrap",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "aki77",

src/index.ts

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Component = React.FunctionComponent<any> | React.ComponentClass<any>
 
 const fragmentToReactElement = (fragment: DocumentFragment) => {
@@ -15,30 +16,37 @@ const getChildren = (el: HTMLElement) => {
 
   const fragment = document.createDocumentFragment()
   while (el.childNodes.length > 0) {
-    fragment.append(el.childNodes[0])
+    if (el.childNodes[0].nodeName !== 'TEMPLATE') {
+      fragment.append(el.childNodes[0])
+      continue
+    }
+    const div = document.createElement('div')
+    div.innerHTML = (el.childNodes[0] as HTMLTemplateElement).innerHTML
+    fragment.append(div)
+    el.childNodes[0].remove()
   }
   return fragmentToReactElement(fragment)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getProps = (element: HTMLElement): any => {
   const json = element.dataset.props
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (!json) return {} as any
 
   return JSON.parse(json)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const render = (root: HTMLElement, component: Component, props: any) => {
   const elem = React.createElement(component, props)
   ReactDOM.render(elem, root)
 }
 
-const defineRewrapComponent = (
-  name: string,
-  connectedCallback: (this:HTMLElement) => void
-): void => {
+const defineRewrapComponent = (name: string, connectedCallback: (el: HTMLElement) => void): void => {
   class RewrapElement extends HTMLElement {
     connectedCallback() {
-      connectedCallback.call(this)
+      connectedCallback(this)
     }
 
     disconnectedCallback() {
@@ -49,40 +57,32 @@ const defineRewrapComponent = (
   window.customElements.define(name, RewrapElement)
 }
 
-export const rewrap = (
-  name: string,
-  component: Component,
-  hasChildren = false
-): void => {
-  defineRewrapComponent(name, function() {
-    const props = getProps(this)
+export const rewrap = (name: string, component: Component, hasChildren = false): void => {
+  defineRewrapComponent(name, (el) => {
+    const props = getProps(el)
 
-      if (!hasChildren) {
-        return render(this, component, props)
-      }
+    if (!hasChildren) {
+      return render(el, component, props)
+    }
 
-      // NOTE: Wait for children to render
-      window.setTimeout(() => {
-        render(this, component, {
-          ...props,
-          children: getChildren(this),
-        })
-      }, 0)
+    // NOTE: Wait for children to render
+    window.setTimeout(() => {
+      render(el, component, {
+        ...props,
+        children: getChildren(el),
+      })
+    }, 0)
   })
 }
 
-export const asyncRewrap = (
-  name: string,
-  component: () => Promise<Component>,
-  hasChildren = false
-): void => {
-  defineRewrapComponent(name, async function() {
-    const props = getProps(this)
+export const asyncRewrap = (name: string, component: () => Promise<Component>, hasChildren = false): void => {
+  defineRewrapComponent(name, async (el) => {
+    const props = getProps(el)
     const resolvedComponent = await component()
 
-    render(this, resolvedComponent, {
+    render(el, resolvedComponent, {
       ...props,
-      ...(hasChildren ? { children: getChildren(this) } : {})
+      ...(hasChildren ? { children: getChildren(el) } : {}),
     })
   })
 }