@sitecore-feaas/clientside 0.5.9 → 0.5.11

package/src/components/FEAASElement.tsx

@@ -339,7 +339,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     const { React, ReactDOM, ReactDOMClient } = (this.payload as ReactPayload) || {}
     if (!React) throw new Error(`${this.tagName}: React is not present in payload`)
     if (!ReactDOM) throw new Error(`${this.tagName}: ReactDOM is not present in payload`)
-    if (this.getAttribute('hydrate') == 'false') return
+    if (this.getAttribute('hydrate') == 'false' && this.firstElementChild) return
     if (!this.refs.topReact && !this.forceUpdateReact) {
       if (ReactDOMClient) {
         this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())

package/src/dom/html.ts

@@ -185,6 +185,9 @@ export class HTMLNode {
   ownerDocument = {
     createElement(name: string): HTMLNode {
       return new HTMLNode(name)
+    },
+    createDocumentFragment(): HTMLNode {
+      return new HTMLNode(null, 11)
     }
   }
 }

package/src/ui/FEAASExternal.tsx

@@ -24,6 +24,20 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     return Promise.resolve({ React, ReactDOM })
   }
 
+  // observe all arttribute changes
+  _setAttribute: typeof HTMLElement.prototype.setAttribute
+  connectedCallback() {
+    if (!this._setAttribute) {
+      this._setAttribute = this.setAttribute
+      this.setAttribute = function (name, value) {
+        const old = this.getAttribute(value)
+        this._setAttribute(name, value)
+        this.attributeChangedCallback(name, old, value)
+      }
+    }
+    super.connectedCallback()
+  }
+
   update() {
     const Component = BYOC.getComponent(this.getComponentName())?.component
     if (!Component && this.getAttribute('hydrate') == 'false') return

package/src/ui/react.tsx

@@ -114,7 +114,7 @@ export function FEAASReactComponent({
     props = { ...parseComponentSource(props.src), ...props }
   }
   const fetch = normalizeFetchAttribute(props.fetch)
-  const embeddedData = fetch.includes('data') ? data : fetch.includes('template') ? fetchedData : null
+  const embeddedData = fetch.includes('data') ? data : fetch.includes('template') ? fetchedData || data : null
   return (
     <>
       {'preload' in props && preload === true && 'src' in props && (

package/test/FEAASComponent.react.test.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import ReactDOM from 'react-dom'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, spy } from 'vitest'
 import { Component, registerComponent, ExternalComponent } from '../src/ui/react.js'
 
 function Hello(props: { firstName: string; telephone: string }) {
@@ -80,6 +80,11 @@ export async function validate(react: any, html: string) {
 const DataContext = React.createContext('DEFAULT')
 
 describe('React', () => {
+  beforeEach(() => {
+    document.open()
+    document.write('<html><head></head><body></body></html>')
+    document.close()
+  })
   it('render react component', async () => {
     await validate(
       <section>
@@ -232,6 +237,63 @@ Typeof superobject object, {"a":1,"b":2})</div></feaas-external></feaas-componen
         'And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
+  it('render wrapped external component with context provider and data mapping asyncronously', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external data-path-attributes="$" first-name="Yarik" data-path-attributes="$" data-external-id="MyTestComponent"></feaas-external>'
+            }
+            data={{ telephone: 321 }}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="321" data-path-attributes="$" first-name="Yarik" data-attributes-keys="telephone" datasources="{&quot;_&quot;:{&quot;telephone&quot;:321}}" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 321 (number).\n' +
+        'And context value is INHERITED</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render external component after resetting of a template', async () => {
+    registerComponent(HelloData, helloDataSchema)
+    const now = new Date()
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      return new Response(
+        '<feaas-external data-external-id="MyTestDataComponent" first-name="Yarik" data-path-attributes="_"></feaas-external>',
+        {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': now.toUTCString()
+          }
+        }
+      )
+    })
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            src='a/b'
+            data={{ _: { telephone: 321, superobject: { '1': 2 } } }}
+            fetch={['template']}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component class="-feaas" library="a" component="b" src="a/b" fetch="template" data="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"></feaas-component></section>'
+    )
+
+    await document.querySelector('feaas-component')?.whenRendered
+    await document.querySelector('feaas-external')?.whenRendered
+
+    expect(document.querySelector('feaas-component').outerHTML).toEqual(
+      '<feaas-component class="-feaas" library="a" component="b" src="a/b" fetch="template" data="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"><feaas-external data-external-id="MyTestDataComponent" first-name="Yarik" data-path-attributes="_" telephone="321" superobject="{&quot;1&quot;:2}" data-attributes-keys="telephone,superobject" datasources="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 321 (number).\n' +
+        'And context value is DEFAULT.\n' +
+        'Typeof datasources: object with keys _)\n' +
+        'Typeof superobject object, {"1":2})</div></feaas-external></feaas-component>'
+    )
+  })
   it('render not map attributes of external component with given array', async () => {
     registerComponent(Hello, helloSchema)
     validate(

package/types/dom/html.d.ts

@@ -37,6 +37,7 @@ export declare class HTMLNode {
     get parentElement(): HTMLNode;
     ownerDocument: {
         createElement(name: string): HTMLNode;
+        createDocumentFragment(): HTMLNode;
     };
 }
 export declare function parseHTML(html: string): HTMLNode[];

package/types/dom/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/dom/html.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAoB,MAAM,gBAAgB,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3D,qBAAa,QAAQ;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,aAAa,EAAE,CAAA;IAC3B,UAAU,EAAE,QAAQ,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAA;gBAET,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAU,EAAE,WAAW,CAAC,EAAE,MAAM;IAQxE,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IASxC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK9C,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,GAAG,IAAI;IAY9D,eAAe,CAAC,QAAQ,EAAE,MAAM;IAOhC,WAAW,CAAC,OAAO,EAAE,QAAQ;IAK7B,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,SAAS,IAGO,MAAM,CADzB;IACD,IAAI,SAAS,CAAC,IAAI,EAAE,MAAM,EAEzB;IACD,IAAI,SAAS,WAEZ;IACD,IAAI,QAAQ,eAEX;IAED,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI;IAc1C,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,EAAE;IAwB9C,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAIzC,OAAO,CAAC,WAAW;IAgBnB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ;IAQtC,IAAI,eAAe,IAAI,QAAQ,GAAG,IAAI,CAErC;IAED,IAAI,WAAW,IAAI,QAAQ,GAAG,IAAI,CAEjC;IAED,IAAI,sBAAsB,IAAI,QAAQ,GAAG,IAAI,CAE5C;IAED,IAAI,kBAAkB,IAAI,QAAQ,GAAG,IAAI,CAExC;IACD,SAAS,CAAC,IAAI,GAAE,OAAe,GAAG,QAAQ;IAiB1C,IAAI,aAAa,aAEhB;IAED,aAAa;4BACS,MAAM,GAAG,QAAQ;MAGtC;CACF;AA+CD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAgDlD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOhD;AAWD,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,CAmBvD;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,UAElG;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,cAMjG"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/dom/html.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAoB,MAAM,gBAAgB,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3D,qBAAa,QAAQ;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,aAAa,EAAE,CAAA;IAC3B,UAAU,EAAE,QAAQ,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAA;gBAET,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAU,EAAE,WAAW,CAAC,EAAE,MAAM;IAQxE,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IASxC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK9C,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,GAAG,IAAI;IAY9D,eAAe,CAAC,QAAQ,EAAE,MAAM;IAOhC,WAAW,CAAC,OAAO,EAAE,QAAQ;IAK7B,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,SAAS,IAGO,MAAM,CADzB;IACD,IAAI,SAAS,CAAC,IAAI,EAAE,MAAM,EAEzB;IACD,IAAI,SAAS,WAEZ;IACD,IAAI,QAAQ,eAEX;IAED,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI;IAc1C,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,EAAE;IAwB9C,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAIzC,OAAO,CAAC,WAAW;IAgBnB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ;IAQtC,IAAI,eAAe,IAAI,QAAQ,GAAG,IAAI,CAErC;IAED,IAAI,WAAW,IAAI,QAAQ,GAAG,IAAI,CAEjC;IAED,IAAI,sBAAsB,IAAI,QAAQ,GAAG,IAAI,CAE5C;IAED,IAAI,kBAAkB,IAAI,QAAQ,GAAG,IAAI,CAExC;IACD,SAAS,CAAC,IAAI,GAAE,OAAe,GAAG,QAAQ;IAiB1C,IAAI,aAAa,aAEhB;IAED,aAAa;4BACS,MAAM,GAAG,QAAQ;kCAGX,QAAQ;MAGnC;CACF;AA+CD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAgDlD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOhD;AAWD,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,CAmBvD;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,UAElG;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,cAMjG"}

package/types/ui/FEAASExternal.d.ts

@@ -15,6 +15,8 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
         React: typeof React;
         ReactDOM: typeof ReactDOM;
     }>;
+    _setAttribute: typeof HTMLElement.prototype.setAttribute;
+    connectedCallback(): void;
     update(): any;
     render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX;
     getComponentName(): string;

package/types/ui/FEAASExternal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASExternal.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASExternal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,gBAAgB,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAC3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAE3D,eAAO,MAAM,wBAAwB,0CAAoC,CAAA;AAEzE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,kBAAkB,CAQ5E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAE9E,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,IAAI;;;;IAIJ,MAAM;IAMN,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IAQpE,gBAAgB;IAIhB,QAAQ;IAIR,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAMzE,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;IAI5D,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,oBAAoB,CAAkB;IAC9D,MAAM,CAAC,iBAAiB,gCAAyB;IACjD,MAAM,CAAC,uBAAuB,sCAA+B;IAC7D,MAAM,CAAC,YAAY,2BAAoB;CACxC;AAID,eAAO,MAAQ,YAAY,4BAAE,cAAc,uCAAE,iBAAiB,+BAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"FEAASExternal.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASExternal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,gBAAgB,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAC3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAE3D,eAAO,MAAM,wBAAwB,0CAAoC,CAAA;AAEzE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,kBAAkB,CAQ5E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAE9E,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,IAAI;;;;IAKJ,aAAa,EAAE,OAAO,WAAW,CAAC,SAAS,CAAC,YAAY,CAAA;IACxD,iBAAiB;IAYjB,MAAM;IAMN,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IAQpE,gBAAgB;IAIhB,QAAQ;IAIR,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAMzE,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;IAI5D,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,oBAAoB,CAAkB;IAC9D,MAAM,CAAC,iBAAiB,gCAAyB;IACjD,MAAM,CAAC,uBAAuB,sCAA+B;IAC7D,MAAM,CAAC,YAAY,2BAAoB;CACxC;AAID,eAAO,MAAQ,YAAY,4BAAE,cAAc,uCAAE,iBAAiB,+BAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}