@sitecore-feaas/clientside 0.1.24 → 0.1.27

package/package.json

@@ -1,43 +1,47 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.24",
+  "version": "0.1.27",
   "scripts": {
     "start": "webpack serve --open",
-    "build": "rm -rf dist;npm run build:types; npm run build:esbuild; npm run build:sourcemaps",
+    "build": "rm -rf dist;npm run types; npm run build:esbuild; npm run build:sourcemaps",
     "build:esbuild": "node scripts/build.js",
-    "build:sourcemaps": "npx merge-source-maps dist/**/*.js --inline-sources",
-    "build:types": "tsc --build",
-    "test": "npx vitest --config ../frontend/vite.config.ts $FLAGS",
+    "build:sourcemaps": "npx merge-source-maps dist/browser/*.js --inline-sources",
+    "test": "npx vitest --config ../frontend/vite.config.ts",
     "test:watch": "npx vitest --config ../frontend/vite.config.ts",
     "prepublishOnly": "npm run build",
     "check": "npx tsc --noEmit",
+    "types": "tsc --build",
     "postpublish": "node ../cdn/upload-package.js clientside $npm_package_version"
   },
   "license": "ISC",
   "peerDependencies": {
     "react-dom": ">=16.8.0"
   },
-  "main": "./dist/browser/index.esm.js",
-  "browser": "./dist/browser/index.esm.js",
+  "main": "./dist/node/index.js",
+  "browser": "./dist/browser/index.js",
   "module": "./dist/node/index.esm.js",
   "types": "./types/ui/index.d.js",
   "type": "module",
   "exports": {
     ".": {
-      "development": "./build/ui/index.js",
+      "localhost": "./build/ui/index.js",
       "types": "./types/ui/index.d.ts",
+      "browser": "./dist/browser/index.esm.js",
+      "import": "./dist/node/index.esm.js",
       "require": "./dist/node/index.js",
+      "default": "./dist/node/index.esm.js"
+    },
+    "./server": {
       "import": "./dist/node/index.esm.js",
-      "browser": "./dist/browser/index.esm.js",
       "default": "./dist/node/index.js"
     },
     "./basic": {
-      "development": "./build/basic.js",
+      "localhost": "./build/basic.js",
       "types": "./types/basic.d.ts",
-      "require": "./dist/node/basic.js",
-      "import": "./dist/node/basic.esm.js",
       "browser": "./dist/browser/basic.esm.js",
-      "default": "./dist/node/basic.js"
+      "import": "./dist/node/inbasicdex.esm.js",
+      "require": "./dist/node/basic.js",
+      "default": "./dist/node/basic.esm.js"
     }
   },
   "typedoc": {
@@ -49,7 +53,11 @@
     "@types/jsonpath-plus": "^5.0.2",
     "esbuild": "^0.16.17",
     "esbuild-plugin-replace-regex": "^0.0.2",
+    "htmlparser2": "^8.0.1",
     "jsonpath-plus": "^7.2.0",
     "merge-source-maps": "^0.6.1"
+  },
+  "dependencies": {
+    "linkedom": "^0.14.22"
   }
 }

package/scripts/build.js

@@ -16,7 +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'],
+    external: ['node:crypto', 'node-fetch', 'MAGIC_IMPORT_COMMENTS_ESBUILD_WORKAROUND', 'linkedom'],
 
     ...step,
 

package/src/basic.ts

@@ -2,6 +2,7 @@ import FEAASElement from './components/FEAASElement.js'
 
 export * from './dom.js'
 export * from './fetch.js'
+export * from './cloud.js'
 export * from './components/FEAASBase.js'
 export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'

package/src/cloud.ts

@@ -36,7 +36,11 @@ export function getStylesheetURL({
   return `${cdn || hostname}/styles/${library}/${revision}.css`
 }
 
-export async function fetchComponent(props: CloudTemplate, callback: (html: string) => void) {
+export async function fetchAndRevalidateComponent(
+  props: CloudTemplate,
+  callback?: (html: string) => void,
+  dontRevalidate = false
+) {
   const onlyIfNotDeleted = (response: Response) => {
     return response.headers.get('x-ms-meta-versionDeletedAt') == null
   }
@@ -68,6 +72,7 @@ export async function fetchComponent(props: CloudTemplate, callback: (html: stri
     console.log('Using fork!', results)
   }
   parseResponse(result.response)
+
   return refetchAndValidate({ ...result, callback: parseResponse }).catch((e) => {
     if (results[0] == result) {
       invalidateRequest({ ...result, callback: null, validator: null })
@@ -82,6 +87,19 @@ export async function fetchComponent(props: CloudTemplate, callback: (html: stri
   })
 }
 
+/** Fetches HTML of a component. */
+export async function fetchComponentHTML(props: CloudTemplate) {
+  var result: string
+  await fetchAndRevalidateComponent(
+    props,
+    (html) => {
+      result = html
+    },
+    false
+  )
+  return result
+}
+
 export async function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void) {
   return fetchAndRevalidate(
     getStylesheetURL(props),

package/src/components/FEAASBase.tsx

@@ -223,7 +223,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
       })
       .map((child: FEAASBase<any, any>, index) => {
         return React.createElement(this.getReactWrapper(child), {
-          key: this.tagName + '-' + index,
+          key: child.tagName + '-' + child.getUID(),
           slot: child.getAttribute('slot')
         })
       })
@@ -244,6 +244,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
       }
     })
     Object.assign(Wrapper, {
+      key: this.tagName + '-' + this.getUID(),
       displayName: displayName
     })
     return Wrapper
@@ -259,7 +260,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
    * Render method that is pretty much the same as React Functional component, but with extra second argument for
    * payload (usually result of import, it is expected to have React in scope).
    */
-  render?(props: React.PropsWithChildren<typeof this.props>, payload: typeof this.payload): ReactNode | ReactElement
+  render?(props: React.PropsWithChildren<Props>, payload: Payload): ReactNode | ReactElement
 
   useShadowRoot: boolean
   getShadowRoot() {

package/src/components/FEAASComponent.tsx

@@ -1,4 +1,4 @@
-import { fetchComponent } from '../cloud.js'
+import { fetchAndRevalidateComponent } from '../cloud.js'
 import { renderDOMContent, renderDOMElement } from '../dom.js'
 import { FEAASBase, OptionalExcept } from './FEAASBase.js'
 import { FEAASLoader } from './FEAASLoader.js'
@@ -103,7 +103,7 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
       return
     }
     try {
-      fetchComponent(this.props, this.onLoad)
+      fetchAndRevalidateComponent(this.props, this.onLoad)
     } catch {
       console.error(
         `FEAAS: Could not fetch component: ${this.props.component}/${this.props.version}/${this.props.revision}`

package/src/components/FEAASElement.tsx

@@ -13,7 +13,7 @@ export type FEAASReactRender<P> = {
 export default class FEAASElement<P> extends FEAASBase<P, ReactModules> {
   load() {
     return Promise.all([
-      // @ts-ignore
+      // @ts-ignore @webpack-ignore
       import('https://cdn.skypack.dev/react'),
       // @ts-ignore
       import('https://cdn.skypack.dev/react-dom')

package/src/dom.ts

@@ -1,5 +1,5 @@
 import { JSONPath } from 'jsonpath-plus'
-import { CloudStylesheet, CloudTemplate, fetchComponent, fetchStylesheet } from './cloud.js'
+import { CloudStylesheet, CloudTemplate, fetchAndRevalidateComponent, fetchStylesheet } from './cloud.js'
 
 export interface FEAASCustomizations {
   processTemplate?: (element: HTMLElement, template: string, data: any) => string
@@ -300,14 +300,19 @@ export function renderDOMElement(
       }
     }
   }
-  for (var i = 0; i < element.children.length; i++) {
-    renderDOMElement(<HTMLElement>element.children[i], datascopes, config, true)
+  for (var i = 0, child: Node; (child = element.childNodes[i++]); ) {
+    if (isElement(child)) {
+      renderDOMElement(child, datascopes, config, true)
+    }
   }
   if (!isNested) {
     config?.onRender?.(element, datascopes)
   }
   return element
 }
+function isElement(node: Node): node is HTMLElement {
+  return node.nodeType == 1
+}
 
 export function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations) {
   const newTemplate = config?.processTemplate?.(root, template, data) || template
@@ -316,11 +321,29 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
   // fixme, jss needs to assign theme classes to component instead
   const anchor = root.closest('.component.feaas') || root
   if (anchor.className.includes('-theme--')) {
-    for (const child of root.children) child.className = child.className.replace(/(\s|^)-theme--[^\s]+\s*/g, '$1')
+    for (var i = 0, child: Node; (child = root.childNodes[i++]); ) {
+      if (isElement(child)) {
+        child.className = child.className.replace(/(\s|^)-theme--[^\s]+\s*/g, '$1')
+      }
+    }
   }
   return renderDOMElement(root, data, config)
 }
 
+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()
+  } else {
+    const root = document.createElement('div')
+    root.innerHTML = newTemplate
+    renderDOMElement(root, data, config)
+    return root.innerHTML
+  }
+}
+
 export function renderStylesheet(props: CloudStylesheet, style?: HTMLStyleElement) {
   renderStylesheetPromise(props, (style ||= document.createElement('style')))
   return style
@@ -344,7 +367,7 @@ export async function renderComponentPromise(props: FEAASComponentProps, root?:
     if ('template' in props) {
       return renderDOMContent(root, props.template, props.data, props)
     } else {
-      return fetchComponent(props, (template) => {
+      return fetchAndRevalidateComponent(props, (template) => {
         return renderDOMContent(root, template, props.data, props)
       }).then(() => root)
     }

package/src/fetch.ts

@@ -36,7 +36,6 @@ export async function fetchAndValidate(
   phase: 'initial' | 'updated' | 'check' = 'initial'
 ) {
   const date = new Date()
-  console.log('fetch', phase, url)
   const response = await fetch(url, options)
   if (!response.ok) throw new Error('Fetch failed')
   if (validator?.(response) === false) throw new Error('Response is not valid')

package/src/node.ts

@@ -0,0 +1,10 @@
+import { parseHTML } from 'linkedom'
+import { Datascopes, FEAASCustomizations, renderDOMContent, renderDOMElement } from './dom.js'
+
+export * from './basic.js'
+
+export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations) {
+  const newTemplate = config?.processTemplate?.(null, template, data) || template
+  const { document } = parseHTML(newTemplate)
+  return renderDOMElement(document, data, config).toString()
+}

package/src/ui/FEAASContext.tsx

@@ -27,6 +27,11 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return import(/* @vite-ignore */ /* webpackIgnore: true */ this.formatURL(this.props.src, this.props.frontend))
   }
 
+  isReadyToLoad() {
+    console.log('Is ready?', this.props, super.isReadyToLoad() && this.props.library != null)
+    return super.isReadyToLoad() && this.props.library != null
+  }
+
   // Remove global styles
   getTheme(theme: FEAASContextImports.Chakra.Theme): FEAASContextImports.Chakra.Theme {
     return theme

package/src/ui/FEAASEditor.tsx

@@ -1,4 +1,4 @@
-import type * as FEAASEditorImports from '@sitecore-feaas/frontend/types/components/editor/Editor.js'
+import type * as FEAASEditorImports from '@sitecore-feaas/frontend/types/entries/editor.js'
 import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
 import { FEAASLoader } from '../components/FEAASLoader.js'
 

package/src/ui/FEAASPicker.tsx

@@ -1,4 +1,4 @@
-import type * as FEAASPickerImports from '@sitecore-feaas/frontend/types/components/picker/Picker.js'
+import type * as FEAASPickerImports from '@sitecore-feaas/frontend/types/entries/picker.js'
 import { FEAASBase } from '../components/FEAASBase.js'
 
 export function FEAASPickerProps(element: FEAASBase<any, any> = this) {

package/src/ui/node.ts

@@ -0,0 +1,2 @@
+export * from './index.js'
+export { renderHTMLContent } from '../node.js'