@sitecore-feaas/clientside 0.1.45 → 0.1.47

package/scripts/build.js

@@ -16,15 +16,7 @@ function compile({ input, output, ...step }) {
     outfile: path.resolve(__dirname, '../' + output),
     bundle: true,
     write: false,
-    external: [
-      'node:crypto',
-      'node-fetch',
-      '_MAGIC_IMPORT_COMMENTS_ESBUILD_WORKAROUND__',
-      'linkedom',
-      'react',
-      'react-dom',
-      'vm'
-    ],
+    external: ['node:crypto', 'node-fetch', '_MAGIC_IMPORT_COMMENTS_ESBUILD_WORKAROUND__', 'react', 'react-dom', 'vm'],
 
     ...step,
 

package/src/dom/html.ts

@@ -0,0 +1,322 @@
+/** Lightweight DOM parser and serializer to use in server environments */
+
+import { Datascopes } from './data.js'
+import { FEAASCustomizations, renderDOMElement } from './rendering.js'
+
+type HTMLAttribute = { name: string; value: string }
+
+class HTMLNode {
+  nodeName: string
+  nodeType: number
+  textContent?: string
+  attributes: HTMLAttribute[]
+  childNodes: HTMLNode[]
+  parentNode?: HTMLNode
+
+  constructor(nodeName: string, nodeType: number = 1, textContent?: string) {
+    this.nodeName = nodeName
+    this.nodeType = nodeType
+    this.textContent = textContent
+    this.attributes = []
+    this.childNodes = []
+  }
+
+  setAttribute(name: string, value: string) {
+    const attr = this.attributes.find((attr) => attr.name === name)
+    if (attr) {
+      attr.value = value
+    } else {
+      this.attributes.push({ name, value })
+    }
+  }
+
+  getAttribute(name: string): string | undefined {
+    const attr = this.attributes.find((attr) => attr.name === name)
+    return attr ? attr.value : undefined
+  }
+
+  insertBefore(newNode: HTMLNode, referenceNode: HTMLNode | null) {
+    newNode.parentNode = this
+    if (referenceNode === null) {
+      this.childNodes.push(newNode)
+    } else {
+      const index = this.childNodes.indexOf(referenceNode)
+      if (index !== -1) {
+        this.childNodes.splice(index, 0, newNode)
+      }
+    }
+  }
+
+  removeAttribute(attrName: string) {
+    const index = this.attributes.findIndex((attr) => attr.name === attrName)
+    if (index !== -1) {
+      this.attributes.splice(index, 1)
+    }
+  }
+
+  appendChild(newNode: HTMLNode) {
+    newNode.parentNode = this
+    this.childNodes.push(newNode)
+  }
+
+  get tagName() {
+    return this.nodeName?.toUpperCase()
+  }
+  get innerHTML() {
+    return serializeHTML(this.childNodes)
+  }
+  set innerHTML(html: string) {
+    this.childNodes = parseHTML(String(html ?? ''))
+  }
+  get outerHTML() {
+    return serializeHTML([this])
+  }
+
+  closest(selector: string): HTMLNode | null {
+    let currentNode: HTMLNode | undefined = this
+
+    while (currentNode) {
+      if (selectorMatchesNode(selector, currentNode)) {
+        return currentNode
+      }
+
+      currentNode = currentNode.parentNode
+    }
+
+    return null
+  }
+
+  querySelectorAll(selector: string): HTMLNode[] {
+    const selectors = selector.split(/\s*,\s*/)
+    const results: HTMLNode[] = []
+
+    const checkNode = (node: HTMLNode) => {
+      for (const sel of selectors) {
+        if (selectorMatchesNode(sel, node)) {
+          results.push(node)
+          break
+        }
+      }
+
+      for (const child of node.childNodes) {
+        checkNode(child)
+      }
+    }
+
+    for (const child of this.childNodes) {
+      checkNode(child)
+    }
+
+    return results
+  }
+
+  querySelector(selector: string): HTMLNode {
+    return this.querySelectorAll(selector)[0]
+  }
+
+  private findSibling(step: -1 | 1, elementTypeOnly?: boolean): HTMLNode | null {
+    if (!this.parentNode) return null
+    const siblings = this.parentNode.childNodes
+    const index = siblings.indexOf(this)
+    if (index === -1) return null
+
+    for (let i = index + step; i >= 0 && i < siblings.length; i += step) {
+      const sibling = siblings[i]
+      if (!elementTypeOnly || sibling.nodeType === 1) {
+        return sibling
+      }
+    }
+
+    return null
+  }
+
+  removeChild(child: HTMLNode): HTMLNode {
+    const index = this.childNodes.indexOf(child)
+    if (index === -1) return
+    this.childNodes.splice(index, 1)
+    child.parentNode = undefined
+    return child
+  }
+
+  get previousSibling(): HTMLNode | null {
+    return this.findSibling(-1)
+  }
+
+  get nextSibling(): HTMLNode | null {
+    return this.findSibling(1)
+  }
+
+  get previousElementSibling(): HTMLNode | null {
+    return this.findSibling(-1, true)
+  }
+
+  get nextElementSibling(): HTMLNode | null {
+    return this.findSibling(1, true)
+  }
+  cloneNode(deep: boolean = false): HTMLNode {
+    const clonedNode = new HTMLNode(this.nodeName, this.nodeType)
+    clonedNode.attributes = JSON.parse(JSON.stringify(this.attributes))
+
+    if (this.textContent) {
+      clonedNode.textContent = this.textContent
+    }
+
+    if (deep) {
+      for (const childNode of this.childNodes) {
+        const clonedChild = childNode.cloneNode(true)
+        clonedNode.appendChild(clonedChild)
+      }
+    }
+
+    return clonedNode
+  }
+  get parentElement() {
+    return this.parentNode?.nodeType == 1 ? this.parentNode : null
+  }
+
+  ownerDocument = {
+    createElement(name: string): HTMLNode {
+      return new HTMLNode(name)
+    }
+  }
+}
+
+function selectorMatchesNode(selector: string, node: HTMLNode): boolean {
+  const simpleSelectors = selector.match(/([.#]?[\w-]+|\[([\w-]+)(="([^"]*)")?\])/g)
+  if (!simpleSelectors) {
+    return false
+  }
+
+  for (const simpleSelector of simpleSelectors) {
+    if (simpleSelector.startsWith('#')) {
+      if (node.getAttribute('id') !== simpleSelector.slice(1)) {
+        return false
+      }
+    } else if (simpleSelector.startsWith('.')) {
+      const classNames = (node.getAttribute('class') || '').split(' ')
+      if (!classNames.includes(simpleSelector.slice(1))) {
+        return false
+      }
+    } else if (simpleSelector.startsWith('[')) {
+      const attrSelectorMatch = simpleSelector.match(/^\[([\w-]+)(="([^"]*)")?\]$/)
+      if (attrSelectorMatch) {
+        const attrName = attrSelectorMatch[1]
+        const attrValue = attrSelectorMatch[3]
+        const actualValue = node.getAttribute(attrName)
+
+        if (typeof attrValue === 'undefined') {
+          if (actualValue === undefined) {
+            return false
+          }
+        } else {
+          if (actualValue !== attrValue) {
+            return false
+          }
+        }
+      } else {
+        return false
+      }
+    } else {
+      if (node.nodeName !== simpleSelector) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+export function parseHTML(html: string): HTMLNode[] {
+  const nodes: HTMLNode[] = []
+  const stack: HTMLNode[] = []
+
+  while (html) {
+    const openTagMatch = html.match(/^<([\w-]+)(\s[^>]*)?>/)
+    const closingTagMatch = html.match(/^<\/([\w-]+)>/)
+
+    if (openTagMatch) {
+      const nodeName = openTagMatch[1]
+      const attrsStr = openTagMatch[2] || ''
+      const attrs =
+        attrsStr.match(/([\w-]+)(="([^"]*)")?/g)?.map((attr) => {
+          const [_, name, , value] = attr.match(/([\w-]+)(="([^"]*)")?/)
+          return { name, value: unescapeHTML(value || '') }
+        }) || []
+
+      const node = new HTMLNode(nodeName, 1)
+      node.attributes = attrs
+      if (stack.length > 0) {
+        const parentNode = stack[stack.length - 1]
+        parentNode.childNodes.push(node)
+        node.parentNode = parentNode
+      } else {
+        nodes.push(node)
+      }
+      stack.push(node)
+      html = html.slice(openTagMatch[0].length)
+    } else if (closingTagMatch) {
+      stack.pop()
+      html = html.slice(closingTagMatch[0].length)
+    } else {
+      const textEnd = html.indexOf('<')
+      const textContent = html.slice(0, textEnd !== -1 ? textEnd : undefined)
+      const textNode = new HTMLNode('#text', 3)
+      textNode.textContent = textContent
+      if (stack.length > 0) {
+        const parentNode = stack[stack.length - 1]
+        parentNode.childNodes.push(textNode)
+        textNode.parentNode = parentNode
+      } else {
+        nodes.push(textNode)
+      }
+      html = html.slice(textContent.length)
+    }
+  }
+
+  return nodes
+}
+
+export function escapeHTML(input: string): string {
+  return input
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;')
+}
+
+function unescapeHTML(input: string): string {
+  return input
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#x27;/g, "'")
+}
+
+export function serializeHTML(nodes: HTMLNode[]): string {
+  return nodes
+    .map((node) => {
+      if (node.nodeType === 3) {
+        return node.textContent || ''
+      }
+
+      const { nodeName, attributes } = node
+      const serializedAttributes = attributes
+        .map(({ name, value }) => ` ${name}="${escapeHTML(String(value))}"`)
+        .join('')
+      const serializedChildren = serializeHTML(node.childNodes)
+      if (['img', 'input', 'br'].includes(nodeName)) {
+        return `<${nodeName}${serializedAttributes} />`
+      } else {
+        return `<${nodeName}${serializedAttributes}>${serializedChildren}</${nodeName}>`
+      }
+    })
+    .join('')
+}
+
+export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations) {
+  const newTemplate = config?.processTemplate?.(null, template, data) || template
+  const nodes = parseHTML(newTemplate)
+  return renderDOMElement(nodes[0] as unknown as HTMLElement, data, config).outerHTML
+}

package/src/dom/rendering.ts

@@ -1,5 +1,6 @@
 import { FEAASCDNComponentProps } from '../cdn.js'
 import { Datascopes, normalizeCollectionScope, queryScopes, serializeCH1RichText } from './data.js'
+import { parseHTML } from './html.js'
 import { loadScript } from './scripts.js'
 
 export interface FEAASCustomizations {
@@ -14,7 +15,7 @@ export interface ExplicitTemplate {
   template: string
 }
 
-export type FEAASComponentProps<T = Datascopes> = {
+export type FEAASComponentProps<T = Datascopes> = Partial<ExplicitTemplate> & {
   data?: T
 } & (ExplicitTemplate | FEAASCDNComponentProps) &
   FEAASCustomizations
@@ -40,7 +41,7 @@ function updateDOMClones(element: HTMLElement, targetCount: number, config?: FEA
     return
   }
 
-  const parentElement = element.parentElement
+  const parentElement = element.parentNode as HTMLElement
   if (parentElement == null) {
     return
   }
@@ -209,9 +210,8 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
 export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations, fakeDOM = false) {
   const newTemplate = config?.processTemplate?.(null, template, data) || template
   if (typeof document === 'undefined' || fakeDOM) {
-    const { parseHTML } = require('linkedom')
-    const { document } = parseHTML(newTemplate)
-    return renderDOMElement(document, data, config).toString()
+    const nodes = parseHTML(newTemplate)
+    return renderDOMElement(nodes[0] as unknown as HTMLElement, data, config).outerHTML
   } else {
     const root = document.createElement('div')
     root.innerHTML = newTemplate

package/src/dom/scripts.ts

@@ -28,7 +28,7 @@ export function autoloadScripts(element: HTMLElement, observe = true) {
 }
 
 export function loadScript(element: HTMLElement, src: string) {
-  for (var p = element; p; p = p.parentElement) {
+  for (var p = element; p; p = p.parentElement as HTMLElement) {
     if (!p.parentElement) {
       const scripts = p.querySelectorAll('script')
       for (var i = 0; i < scripts.length; i++) {
@@ -38,8 +38,8 @@ export function loadScript(element: HTMLElement, src: string) {
       }
       if (p.tagName == 'HTML') p = p.querySelector('head') || p
       const script = p.ownerDocument.createElement('script')
-      script.type = 'module'
-      script.src = src
+      script.setAttribute('type', 'module')
+      script.setAttribute('src', src)
       p.appendChild(script)
       break
     }

package/src/ui/FEAASContext.tsx

@@ -7,8 +7,8 @@ export function FEAASContextProps(element: HTMLElement = this) {
     library: element?.getAttribute('library') as string,
     src: element?.getAttribute('src') ?? '/context.js',
     frontend: element?.getAttribute('frontend') ?? 'https://components.sitecoreclud.io',
-    backend: element?.getAttribute('backend') ?? 'https://components-api.sitecoreclud.io',
-    cdn: element?.getAttribute('cdn') ?? 'https://feaascompontsapiprod.blob.core.windows.net',
+    backend: element?.getAttribute('backend') ?? 'https://components.sitecoreclud.io/api',
+    cdn: element?.getAttribute('cdn') ?? 'https://feaas.blob.core.windows.net',
     auth: null as Partial<AuthModel>,
     isolate: element?.getAttribute('isolate') == null || element?.getAttribute('isolate') == 'true'
   }

package/src/ui/react.tsx

@@ -1,6 +1,8 @@
 export * from './index.js'
-import { FEAASComponentProps, parseComponentSource, renderHTMLContent } from './index.js'
+import { FEAASComponentProps, parseComponentSource } from './index.js'
 import React from 'react'
+import { renderHTMLContent } from '../dom/html.js'
+export { renderHTMLContent }
 
 export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any>) {
   if ('template' in props) {
@@ -21,4 +23,5 @@ export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any>) {
     />
   )
 }
+
 export const Component = FEAASEmbed

package/test/FEAASComponent.react.test.tsx

@@ -9,6 +9,7 @@ import React from 'react'
 describe('React', () => {
   it('render react component', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test'></Component>
@@ -18,9 +19,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test'></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
+    )
   })
   it('render react component with src and overrides', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test' component='test2'></Component>
@@ -30,9 +44,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test2" src="library/test"></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test' component='test2'></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test2" src="library/test"></feaas-component></section>'
+    )
   })
   it('render react component with extras', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test' version='v1'></Component>
@@ -42,9 +69,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test' version='v1'></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
+    )
   })
   it('render react template', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
@@ -54,9 +94,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
+    )
   })
   it('render template with data and src', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
@@ -66,9 +119,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+    )
   })
   it('render template with data but without src', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component
@@ -83,9 +149,27 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component
+          library='library'
+          component='test'
+          template={'<div data-path-src="abc">'}
+          data={{ abc: 321 }}
+        ></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+    )
   })
   it('render template with data with src and stringy data', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
@@ -95,9 +179,22 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component src='library/test' template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+    )
   })
   it('render template with data and template', () => {
     const div = document.createElement('div')
+    document.body.appendChild(div)
     const root = ReactDOM.render(
       <section>
         <Component template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
@@ -107,5 +204,17 @@ describe('React', () => {
     expect(div.innerHTML).toEqual(
       '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
+    const div2 = document.createElement('div')
+    document.body.appendChild(div2)
+    div2.innerHTML = div.innerHTML
+    ReactDOM.hydrate(
+      <section>
+        <Component template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
+      </section>,
+      div2
+    )
+    expect(div2.innerHTML).toEqual(
+      '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+    )
   })
 })

package/test/FEAASContext.test.tsx

@@ -37,7 +37,7 @@ describe('React', function () {
       expect(spyLoad).toHaveBeenCalledTimes(1)
 
       expect(component.outerHTML).toBe(
-        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecoreclud.io" backend="https://components-api.sitecoreclud.io" cdn="https://feaascompontsapiprod.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
+        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
       )
     })
   })
@@ -69,7 +69,7 @@ describe('React', function () {
     expect(spyLoad).toHaveBeenCalledTimes(1)
 
     expect(component.outerHTML).toBe(
-      '<feaas-context src="test.js" library="abc" frontend="https://components.sitecoreclud.io" backend="https://components-api.sitecoreclud.io" cdn="https://feaascompontsapiprod.blob.core.windows.net"></feaas-context>'
+      '<feaas-context src="test.js" library="abc" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"></feaas-context>'
     )
     expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
   })