wrap legacy code around core functionality (bitovi#100)

* initial commit

* prettier check

* misc code improvement

* start updating to match monorepo architecture

* created legacy package

* created github workflow

* package-lock update

* update legacy yml

* misc prettier fix

* more fixes

* renderer change in core

* more updates

* added unit tests for react

* prettier

---------

Co-authored-by: Christopher J Baker <[email protected]>

Author: zerico007

.github/workflows/legacy.yml

@@ -0,0 +1,44 @@
+name: "react-to-webcomponent"
+
+on:
+  push:
+  workflow_dispatch:
+    inputs:
+      segment:
+        description: "The version segment to increment: major, minor, patch, or prerelease."
+        required: true
+      preId:
+        description: "Appended to the prerelease segment. (default: \"\")"
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Verify
+        uses: ./.github/actions/job-verify
+
+  publish:
+    if: github.event_name == 'workflow_dispatch'
+    needs: verify
+
+    concurrency:
+      group: "publish"
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Publish
+        uses: ./.github/actions/job-publish
+        with:
+          segment: ${{ github.event.inputs.segment }}
+          preId: ${{ github.event.inputs.preId }}

package-lock.json

@@ -6,10 +6,19 @@ import r2wc from "./core"
 
 expect.extend(matchers)
 
-const mount = vi.fn()
+const mountCheck = vi.fn()
 const unmount = vi.fn()
+const update = vi.fn()
 const onUpdated = vi.fn()
 
+const mount = (el: HTMLElement, reactComponent: any, _props: any) => {
+  mountCheck()
+  return {
+    reactContainer: el,
+    component: reactComponent,
+  }
+}
+
 function flushPromises() {
   return new Promise((resolve) => setImmediate(resolve))
 }
@@ -24,13 +33,13 @@ describe("core", () => {
       return <div>hello</div>
     }
 
-    const TestElement = r2wc(TestComponent, {}, { mount, unmount })
+    const TestElement = r2wc(TestComponent, {}, { mount, unmount, update })
     customElements.define("test-func-element", TestElement)
 
     const testEl = new TestElement()
 
     document.body.appendChild(testEl)
-    expect(mount).toBeCalledTimes(1)
+    expect(mountCheck).toBeCalledTimes(1)
 
     document.body.removeChild(testEl)
     expect(unmount).toBeCalledTimes(1)
@@ -43,13 +52,13 @@ describe("core", () => {
       }
     }
 
-    const TestElement = r2wc(TestComponent, {}, { mount, unmount })
+    const TestElement = r2wc(TestComponent, {}, { mount, unmount, update })
     customElements.define("test-element", TestElement)
 
     const testEl = new TestElement()
 
     document.body.appendChild(testEl)
-    expect(mount).toBeCalledTimes(1)
+    expect(mountCheck).toBeCalledTimes(1)
 
     document.body.removeChild(testEl)
     expect(unmount).toBeCalledTimes(1)
@@ -63,7 +72,7 @@ describe("core", () => {
     const ButtonElement = r2wc(
       Button,
       { props: ["text"] },
-      { mount, unmount, onUpdated },
+      { mount, unmount, update, onUpdated },
     )
 
     customElements.define("test-button-element-attribute", ButtonElement)
@@ -118,7 +127,7 @@ describe("core", () => {
           funcProp: "function",
         },
       },
-      { mount, unmount, onUpdated },
+      { mount, unmount, update, onUpdated },
     )
 
     //@ts-ignore
@@ -175,7 +184,7 @@ describe("core", () => {
     const ButtonElement = r2wc(
       Button,
       { props: ["text"] },
-      { mount, unmount, onUpdated },
+      { mount, unmount, update, onUpdated },
     )
 
     customElements.define("test-button-element-non-prop", ButtonElement)

packages/core/src/core.test.tsx

@@ -8,7 +8,7 @@ import type {
 
 import React from "react"
 
-export { R2WCOptions }
+export * from "./types"
 
 const renderSymbol = Symbol.for("r2wc.reactRender")
 const shouldRenderSymbol = Symbol.for("r2wc.shouldRender")
@@ -23,7 +23,7 @@ const shouldRenderSymbol = Symbol.for("r2wc.shouldRender")
 export default function r2wc(
   ReactComponent: FC<any> | ComponentClass<any>,
   config: R2WCOptions = {},
-  renderer: Renderer<ReturnType<typeof React.createElement>>,
+  renderer: Renderer,
 ): CustomElementConstructor {
   const propTypes: Record<string, any> = {} // { [camelCasedProp]: String | Number | Boolean | Function | Object | Array }
   const propAttrMap: Record<string, any> = {} // @TODO: add option to specify for asymetric mapping (eg "className" from "class")
@@ -49,7 +49,9 @@ export default function r2wc(
   }
   class WebCompClass extends HTMLElement {
     rendering: boolean
-    mounted: boolean;
+    mounted: boolean
+    componentContainer: HTMLElement | null
+    reactComponent: FC<any> | ComponentClass<any> | null;
     [renderSymbol]: () => void
     getOwnPropertyDescriptor: (
       key: string,
@@ -73,6 +75,10 @@ export default function r2wc(
 
       this.mounted = false
 
+      this.componentContainer = null
+
+      this.reactComponent = null
+
       // Add custom getter and setter for each prop
       for (const key of propKeys) {
         if (key in propTypes) {
@@ -110,18 +116,33 @@ export default function r2wc(
 
           this.rendering = true
           // Container is either shadow DOM or light DOM depending on `shadow` option.
-          const container = (this.shadowRoot as unknown as HTMLElement) || this
-
-          const children = flattenIfOne(mapChildren(this))
+          const _container =
+            this.componentContainer ??
+            ((this.shadowRoot as unknown as HTMLElement) || this)
 
-          const element = React.createElement(ReactComponent, data, children)
+          // const children = flattenIfOne(mapChildren(this))
 
           // Use react to render element in container
-          renderer.mount(container, element)
 
           if (!this.mounted) {
+            const { reactContainer, component } = renderer.mount(
+              _container,
+              ReactComponent,
+              data,
+            )
+            this.componentContainer = reactContainer
+            this.reactComponent = component
             this.mounted = true
           } else {
+            if (!this.reactComponent)
+              throw new Error("React component is not mounted")
+            if (!this.componentContainer)
+              throw new Error("React component container is not mounted")
+            const updateContext = {
+              reactContainer: this.componentContainer,
+              component: this.reactComponent,
+            }
+            renderer.update(updateContext, data)
             renderer.onUpdated?.()
           }
           this.rendering = false
@@ -163,7 +184,13 @@ export default function r2wc(
 
     disconnectedCallback() {
       this[shouldRenderSymbol] = false
-      renderer.unmount(this)
+      if (this.componentContainer && this.reactComponent) {
+        const context = {
+          reactContainer: this.componentContainer,
+          component: this.reactComponent,
+        }
+        renderer.unmount(context)
+      }
       this.mounted = false
     }
 
@@ -221,47 +248,47 @@ function toDashedStyle(camelCase = "") {
   return camelCase.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
 }
 
-function isAllCaps(word: string) {
-  return word.split("").every((c: string) => c.toUpperCase() === c)
-}
-
-function flattenIfOne(arr: object) {
-  if (!Array.isArray(arr)) {
-    return arr
-  }
-  if (arr.length === 1) {
-    return arr[0]
-  }
-  return arr
-}
-
-function mapChildren(node: Element) {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent?.toString()
-  }
-
-  const arr = Array.from(node.children).map((element) => {
-    if (element.nodeType === Node.TEXT_NODE) {
-      return element.textContent?.toString()
-    }
-    // BR = br, ReactElement = ReactElement
-    const nodeName = isAllCaps(element.nodeName)
-      ? element.nodeName.toLowerCase()
-      : element.nodeName
-    const children = flattenIfOne(mapChildren(element))
-
-    // we need to format c.attributes before passing it to createElement
-    const attributes: Record<string, string | null> = {}
-    for (const attr of element.getAttributeNames()) {
-      // handleTypeCasting.call(c, attr, c.getAttribute(attr), attributes)
-      attributes[attr] = element.getAttribute(attr)
-    }
-
-    return React.createElement(nodeName, attributes, children)
-  })
-
-  return flattenIfOne(arr)
-}
+// function isAllCaps(word: string) {
+//   return word.split("").every((c: string) => c.toUpperCase() === c)
+// }
+
+// function flattenIfOne(arr: object) {
+//   if (!Array.isArray(arr)) {
+//     return arr
+//   }
+//   if (arr.length === 1) {
+//     return arr[0]
+//   }
+//   return arr
+// }
+
+// function mapChildren(node: Element) {
+//   if (node.nodeType === Node.TEXT_NODE) {
+//     return node.textContent?.toString()
+//   }
+
+//   const arr = Array.from(node.children).map((element) => {
+//     if (element.nodeType === Node.TEXT_NODE) {
+//       return element.textContent?.toString()
+//     }
+//     // BR = br, ReactElement = ReactElement
+//     const nodeName = isAllCaps(element.nodeName)
+//       ? element.nodeName.toLowerCase()
+//       : element.nodeName
+//     const children = flattenIfOne(mapChildren(element))
+
+//     // we need to format c.attributes before passing it to createElement
+//     const attributes: Record<string, string | null> = {}
+//     for (const attr of element.getAttributeNames()) {
+//       // handleTypeCasting.call(c, attr, c.getAttribute(attr), attributes)
+//       attributes[attr] = element.getAttribute(attr)
+//     }
+
+//     return React.createElement(nodeName, attributes, children)
+//   })
+
+//   return flattenIfOne(arr)
+// }
 
 function handleTypeCasting(
   this: HTMLElement,

packages/core/src/core.ts

@@ -47,6 +47,11 @@ export interface ComponentClass<P = Record<string, unknown>> {
 
 export type Container = Element | Document | DocumentFragment
 
+export interface Context<ComponentType> {
+  reactContainer: HTMLElement
+  component: ComponentType
+}
+
 export interface CustomElementConstructor {
   new (...params: any[]): HTMLElement
 }
@@ -64,8 +69,13 @@ export interface R2WCOptions {
   props?: string[] | Record<string, PropOptionTypes>
 }
 
-export interface Renderer<T> {
-  mount: (container: HTMLElement, element: T) => any
-  unmount: (container: HTMLElement) => any
+export interface Renderer {
+  mount: (
+    container: HTMLElement,
+    ReactComponent: FC<any> | ComponentClass<any>,
+    props: any,
+  ) => Context<any>
+  unmount: (context: Context<any>, props?: any) => void
+  update: (context: Context<any>, props: any) => void
   onUpdated?: () => void
 }