@sitecore-feaas/clientside 0.1.25 → 0.1.28

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "scripts": {
     "start": "webpack serve --open",
     "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: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",
@@ -17,27 +17,31 @@
   "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

@@ -8,6 +8,7 @@ export interface CloudTemplate {
   version: string
   revision?: string
   instance?: string
+  lastModified?: string | Date
 }
 export interface CloudStylesheet {
   cdn?: string
@@ -36,7 +37,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 +73,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 +88,19 @@ export async function fetchComponent(props: CloudTemplate, callback: (html: stri
   })
 }
 
+/** Fetches HTML of a component. */
+export async function fetchComponent(props: CloudTemplate) {
+  var template: string
+  const { response } = await fetchAndRevalidateComponent(
+    props,
+    (result) => {
+      template = result
+    },
+    false
+  )
+  return { ...props, template, lastModified: response.headers.get('last-modified') }
+}
+
 export async function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void) {
   return fetchAndRevalidate(
     getStylesheetURL(props),

package/src/components/FEAASBase.tsx

@@ -260,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'
@@ -22,7 +22,8 @@ export function FEAASComponentsProps(element: FEAASBase = this) {
     template: element.getAttribute('template'),
     instance: element.getAttribute('instance'),
     editable: element.getAttribute('editable') != null,
-    suspended: element.getAttribute('suspended') != null
+    suspended: element.getAttribute('suspended') != null,
+    lastModified: element.getAttribute('last-modified')
   }
 }
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
@@ -103,7 +104,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}`
@@ -130,6 +131,8 @@ declare global {
     interface IntrinsicElements {
       'feaas-component': OptionalExcept<FEAASComponentsProps, 'component' | 'version' | 'revision'> & {
         children?: any
+        dangerouslySetInnerHTML?: { __html: string }
+        'last-modified'?: string
       }
     }
   }

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/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/node.ts

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