@sitecore-feaas/clientside 0.4.0-alpha.9 → 0.4.1

package/scripts/build.js

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

package/scripts/test-setup.ts

@@ -1,2 +1 @@
-process.env.TESTING = 'true'
 export default function () {}

package/src/components/FEAASComponent.tsx

@@ -24,6 +24,7 @@ export function FEAASComponentsProps(element: FEAASElement) {
     }
   }
 
+  const fetch = element.getAttribute('fetch')
   return {
     data: (data || {}) as DataOptions,
     cdn: element.getContextAttribute('cdn') ?? cdn ?? DEFAULT_CDN_URL,
@@ -37,7 +38,12 @@ export function FEAASComponentsProps(element: FEAASElement) {
     editable: element.getAttribute('editable') != null,
     suspended: element.getAttribute('suspended') != null,
     lastModified: element.getAttribute('last-modified'),
-    withStylesheet: element.getAttribute('with-stylesheet') != 'false'
+    fetch:
+      fetch == 'false'
+        ? []
+        : fetch == null || fetch == 'true'
+        ? ['data', 'template', 'stylesheet']
+        : fetch.split(/(\s+|\-)+/g).filter(Boolean)
   }
 }
 
@@ -92,7 +98,6 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     cdn: DEFAULT_CDN_URL,
     revision: 'published',
     version: 'responsive',
-    withStylesheet: true,
     editable: false,
     suspended: false,
     data: {}
@@ -124,7 +129,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
     super.attributeChangedCallback(name, oldValue, newValue)
 
-    if (name === 'data') {
+    if (name === 'data' && this.props.fetch.includes('data')) {
       this.fetchData()
     }
   }
@@ -202,7 +207,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
     const advanceIfEverythingIsReady = () => {
       // html is not loaded
-      if (!this.payload) return
+      if (this.payload == null) return
 
       // shared stylesheet is still being loaded
       if (stylesheetPromise) return
@@ -213,20 +218,26 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
       this.onLoad(this.payload)
     }
 
-    if (this.props.withStylesheet) {
+    if (this.props.fetch.includes('stylesheet')) {
       var stylesheetPromise = loadStylesheetAllowStale({ ...this.props }).then(() => {
         stylesheetPromise = null
         advanceIfEverythingIsReady()
       })
     }
 
-    return Promise.all([
-      stylesheetPromise,
-      this.whenDataReady.then(() => advanceIfEverythingIsReady()),
-      fetchAndRevalidateComponent(this.props, (html) => {
+    if (this.props.fetch.includes('template')) {
+      var templatePromise = fetchAndRevalidateComponent(this.props, (html) => {
         this.payload = html
         advanceIfEverythingIsReady()
       })
+    } else {
+      this.payload = this.props.template ?? this.innerHTML
+    }
+
+    return Promise.all([
+      stylesheetPromise,
+      this.whenDataReady.then(() => advanceIfEverythingIsReady()),
+      templatePromise
     ]).then(() => this.payload)
   }
 
@@ -240,7 +251,8 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
   update() {
     this.alreadyRendered = true
-    if (this.getAttribute('hydrate') == 'false') return
+    // avoid unnecessary rendering if hydration was disabled
+    if (!this.props.fetch.includes('data') && !this.props.fetch.includes('template') && this.firstElementChild) return
     if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
       renderDOMElement(this, this.readyData)
     } else {
@@ -254,6 +266,8 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
   }
 }
 
+type FetchKeyword = 'data' | 'template' | 'stylesheet'
+
 declare global {
   namespace JSX {
     interface IntrinsicElements {
@@ -267,8 +281,11 @@ declare global {
         children?: any
         dangerouslySetInnerHTML?: { __html: string }
         'last-modified'?: string
-        hydrate?: 'false' | 'true'
-        'with-stylesheet'?: 'false' | 'true' | ''
+        fetch?:
+          | `${FetchKeyword} ${FetchKeyword} ${FetchKeyword}`
+          | `${FetchKeyword} ${FetchKeyword}`
+          | `${FetchKeyword}`
+          | ''
       } & (
         | {
             /**

package/src/components/FEAASElement.tsx

@@ -142,7 +142,6 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
   }
 
   log(...args: any) {
-    if (typeof process != 'undefined' && process.env.TESTING) return
     const format = args[0]
 
     if (
@@ -412,6 +411,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     const ErrorBoundary = this.getReactErrorBoundary()
     const Wrapper = this.getReactWrapper(target)
     return (
+      // @ts-ignore TS5 react types throws here
       <ErrorBoundary key={target.tagName + '-' + target.getUID()} slot={target.getAttribute('slot')}>
         <Wrapper />
       </ErrorBoundary>

package/src/dom/html.ts

@@ -243,7 +243,7 @@ export function parseHTML(html: string): HTMLNode[] {
     const closingTagMatch = html.match(/^<\/([\w-]+)>/)
 
     if (openTagMatch) {
-      const nodeName = openTagMatch[1]
+      const nodeName = openTagMatch[1].toLowerCase()
       const attrsStr = openTagMatch[2] || ''
       const attrs =
         attrsStr.match(/([\w-]+)(="([^"]*)")?/g)?.map((attr) => {
@@ -260,7 +260,7 @@ export function parseHTML(html: string): HTMLNode[] {
       } else {
         nodes.push(node)
       }
-      stack.push(node)
+      if (!['img', 'input', 'br'].includes(nodeName)) stack.push(node)
       html = html.slice(openTagMatch[0].length)
     } else if (closingTagMatch) {
       stack.pop()

package/src/ui/react.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import * as BYOC from '@sitecore/byoc/react'
 import { HTMLNode, parseHTMLContent, renderHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
 import {
@@ -12,13 +13,21 @@ import {
   parseComponentSource,
   parseStylesheetSource
 } from './index.js'
-import * as BYOC from '@sitecore/byoc/react'
 export * from '../headless.js'
 export { External, FEAASExternalPropsObject, getComponent, linkComponents, registerComponent } from './FEAASExternal.js'
 export * from './index.js'
 export { renderHTMLContent }
 
+type FEEASReactComponentFetch = string[] | string | null | undefined | boolean
+export function normalizeFetchAttribute(fetch: FEEASReactComponentFetch) {
+  if (fetch == null || fetch === true) {
+    return ['template', 'stylesheet', 'data']
+  }
+  return [].concat(fetch || [])
+}
+
 export type FEAASReactComponentProps = FEAASComponentProps & {
+  fetch?: FEEASReactComponentFetch
   preload?: boolean
   lastModified?: Date | string
 }
@@ -44,8 +53,9 @@ export const FEAASReactStylesheet = (props: FEAASCDNStylesheetParams | FEAASCDNS
  * @param {FEAASReactComponentProps} props  - The properties for the component.
  * @returns {Promise<JSX.Element>} The JSX element representing the component.
  */
-export const FEAASReactServerComponent = async ({ ...props }: FEAASReactComponentProps) => {
-  const fetchedData = await DataSettings.fetch(props?.data || {})
+export const FEAASReactServerComponent = async ({ data, fetch, ...props }: FEAASReactComponentProps) => {
+  const fetchedData = await DataSettings.fetch(data || {})
+  fetch = normalizeFetchAttribute(fetch ?? ['stylesheet'])
 
   const p: FEAASReactComponentProps = { ...props }
 
@@ -54,13 +64,17 @@ export const FEAASReactServerComponent = async ({ ...props }: FEAASReactComponen
 
     p.template = response.template
     p.lastModified = response.lastModified
-    //@ts-ignore
-    p.hydrate = false
+  } else if (props?.template == null && !fetch.includes('template')) {
+    fetch.push('template')
   }
 
-  return FEAASReactComponent({ ...p, data: fetchedData })
+  return FEAASReactComponent({
+    ...p,
+    data,
+    fetch,
+    fetchedData
+  })
 }
-
 /**
  * A wrapper over FEAAS.Component for use in React. It converts a passed template HTML into React,
  * allowing external components in the render tree. Data can be provided in JSON format.
@@ -68,12 +82,17 @@ export const FEAASReactServerComponent = async ({ ...props }: FEAASReactComponen
  * @param {FEAASReactComponentProps} props  - The properties for the component.
  * @returns {JSX.Element} The JSX element representing the component.
  */
-export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps) {
+export function FEAASReactComponent({
+  data,
+  lastModified,
+  fetchedData,
+  ...props
+}: FEAASReactComponentProps & { fetchedData?: any }) {
   let preload = null
   let children: null | React.ReactNode
 
   if ('template' in props && props.template) {
-    children = parseHTMLContent(props.template, data || {}).map((node, index) =>
+    children = parseHTMLContent(props.template, fetchedData || data || {}).map((node, index) =>
       HTMLNodeToReact(
         node,
         (node, attributes) => {
@@ -94,7 +113,8 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
   if ('src' in props) {
     props = { ...parseComponentSource(props.src), ...props }
   }
-
+  const fetch = normalizeFetchAttribute(props.fetch)
+  const embeddedData = fetch.includes('data') ? data : fetch.includes('template') ? fetchedData : null
   return (
     <>
       {'preload' in props && preload === true && 'src' in props && (
@@ -106,10 +126,11 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
       <feaas-component
         class='-feaas'
         {...props}
+        last-modified={lastModified ? String(lastModified) : null}
+        fetch={props.fetch == null ? props.fetch : ([].concat(props.fetch).join(' ') as any)}
         suppressHydrationWarning
         template={null}
-        data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
-        hydrate={'false'}
+        data={typeof embeddedData == 'string' ? embeddedData : embeddedData ? JSON.stringify(embeddedData) : null}
       >
         {children}
       </feaas-component>

package/src/utils/settings.ts

@@ -192,9 +192,15 @@ export async function fetchData(data: DataOptions): Promise<DataScopes> {
   )
 }
 
+export async function hasDataSettings(data: DataOptions) {
+  if (!data) return false
+  return isDataSettings(data) || Object.values(data).some(isDataSettings)
+}
+
 DataSettings.clean = clean
 DataSettings.toFetchArguments = toFetchArguments
 DataSettings.fetchOne = fetchDataSettings
 DataSettings.fetch = fetchData
 DataSettings.isDataSettings = isDataSettings
+DataSettings.hasDataSettings = hasDataSettings
 DataSettings.fetchImplementation = (...args: Parameters<typeof fetch>) => fetch(...args)

package/test/FEAASComponent.react.test.tsx

@@ -53,7 +53,7 @@ describe('React', () => {
       <section>
         <Component src='library/test'></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test"></feaas-component></section>'
     )
   })
   it('render react with empty template', async () => {
@@ -61,7 +61,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' template=''></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test"></feaas-component></section>'
     )
   })
   it('render react component with src and overrides', async () => {
@@ -69,7 +69,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' component='test2'></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test2" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test2" src="library/test"></feaas-component></section>'
     )
   })
   it('render react component with extras', async () => {
@@ -77,7 +77,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' version='v1'></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" version="v1" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
     )
   })
   it('render react template', async () => {
@@ -85,7 +85,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with data and src', async () => {
@@ -93,7 +93,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" 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', async () => {
@@ -106,7 +106,7 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component class="-feaas" library="library" component="test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with style attribute', async () => {
@@ -114,7 +114,7 @@ describe('React', () => {
       <section>
         <Component template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render unwrapped external component with stringified values', async () => {
@@ -137,7 +137,7 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
     )
   })
   it('render wrapped external component with context provider', async () => {
@@ -153,7 +153,7 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
   it('render wrapped external component with context provider and data mapping', async () => {
@@ -169,7 +169,7 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}" hydrate="false"><feaas-external data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
 })

package/test/FEAASComponent.test.tsx

@@ -36,7 +36,7 @@ describe('Components', () => {
 
     // Fixme юhange to production component
     document.body.innerHTML =
-      '<feaas-component with-stylesheet="false" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+      '<feaas-component fetch="template data" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
 
     const component = document.body.firstElementChild as FEAASComponent
 
@@ -46,6 +46,164 @@ describe('Components', () => {
     expect(component.innerHTML).toContain('TODAY')
   })
 
+  describe('fetch control', () => {
+    it('should not make requests when hydration is turned off', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+
+      // Fixme юhange to production component
+      document.body.innerHTML =
+        '<feaas-component fetch="" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      expect(component.innerHTML).toBe('')
+    })
+
+    it('should not make requests when hydration is turned off, but should render template', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+
+      // Fixme юhange to production component
+      document.body.innerHTML =
+        '<feaas-component fetch="" library="L" cdn="CDN" component="C" version="V" revision="R" template="abc"></feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      expect(component.innerHTML).toBe('abc')
+    })
+
+    it('should only make css request with fetch="stylesheet"', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.match('.css')) {
+          return new Response('{}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+      })
+      // Fixme юhange to production component
+      document.body.innerHTML =
+        '<feaas-component fetch="stylesheet" library="L" cdn="CDN" component="C" version="V" revision="R">abc</feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(component.innerHTML).toBe('abc')
+      expect(document.head.querySelectorAll('style').length).toEqual(1)
+    })
+
+    it('should make html/css requests when fetch="stylesheet template"', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.match('CDN/components/L/C/V/R')) {
+          return new Response('TODAY', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+        if (url.match('.css')) {
+          return new Response('{}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+      })
+      document.body.innerHTML =
+        '<feaas-component fetch="stylesheet template" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toBe('TODAY')
+      expect(document.head.querySelectorAll('style').length).toEqual(1)
+    })
+    it('should make data/css requests when fetch="stylesheet data"', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.match('my.json')) {
+          return new Response('{"path": "value"}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+        if (url.match('.css')) {
+          return new Response('{}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+      })
+
+      document.body.innerHTML =
+        '<feaas-component fetch="stylesheet data" data=\'{"source": {"url": "my.json"}}\' library="L" cdn="CDN" component="C" version="V" revision="R"><var data-path="source.path"></var></feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toBe('<var data-path="source.path">value</var>')
+      expect(document.head.querySelectorAll('style').length).toEqual(1)
+    })
+
+    it('should make data/css/html requests when fetch="template stylesheet data"', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.match('.html')) {
+          return new Response('<var data-path="source.path"></var>', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+        if (url.match('my.json')) {
+          return new Response('{"path": "value"}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+        if (url.match('.css')) {
+          return new Response('{}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+      })
+
+      document.body.innerHTML =
+        '<feaas-component fetch="template stylesheet data" data=\'{"source": {"url": "my.json"}}\' library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+
+      const component = document.body.firstElementChild as FEAASComponent
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(3)
+      expect(component.innerHTML).toBe('<var data-path="source.path">value</var>')
+      expect(document.head.querySelectorAll('style').length).toEqual(1)
+    })
+  })
+
   it('should load component using src attribute shorthand', async () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
@@ -59,9 +217,8 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
-      '<feaas-component with-stylesheet="false" src="http://a/components/b/c/d/1.html"></feaas-component>'
+      '<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html"></feaas-component>'
 
     const component = document.body.firstElementChild as FEAASComponent
 
@@ -69,7 +226,7 @@ describe('Components', () => {
     expect(spy).toHaveBeenCalledTimes(1)
 
     expect(component.outerHTML).toBe(
-      `<feaas-component with-stylesheet="false" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas">TODAY</feaas-component>`
+      `<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas">TODAY</feaas-component>`
     )
   })
 
@@ -94,7 +251,6 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
       '<feaas-component src="http://a/components/b/c/d/1.html"></feaas-component><feaas-component src="http://a/components/b/c/d/staged.html"></feaas-component>'
 
@@ -117,7 +273,6 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
       '<feaas-component src="http://a/components/b/c/d/1.html"></feaas-component><link rel="stylesheet" href="http://a/styles/b/published.css" />'
 
@@ -148,9 +303,8 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
-      '<feaas-component with-stylesheet="false" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+      '<feaas-component fetch="template data" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
 
     const component = document.body.firstElementChild as FEAASComponent
 
@@ -190,9 +344,8 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
-      '<feaas-component with-stylesheet="false" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+      '<feaas-component fetch="template data" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
 
     const component = document.body.firstElementChild as FEAASComponent
     // Renders cached version initially
@@ -226,9 +379,8 @@ describe('Components', () => {
       }
     })
 
-    // Fixme change to production component
     document.body.innerHTML =
-      '<feaas-component with-stylesheet="false" library="L" cdn="CDN" component="C1" version="V" revision="R"></feaas-component>'
+      '<feaas-component fetch="template data" library="L" cdn="CDN" component="C1" version="V" revision="R"></feaas-component>'
 
     const component = document.body.firstElementChild as FEAASComponent
     await expect(component.whenRendered).resolves.toEqual(component)
@@ -302,7 +454,7 @@ describe('Components', () => {
         }
       }
     })
-    // Fixme change to production component
+
     document.body.innerHTML = '<feaas-component src="L/C"></feaas-component>'
     const component = document.body.firstElementChild as FEAASComponent
     expect(document.head.querySelector('style')).toBeNull()

package/test/FEAASContext.test.tsx

@@ -154,7 +154,7 @@ describe('React', function () {
     it('should nest components into context', async () => {
       const renders = [] as FEAASElement[]
       class FEAASElementTestRenderOrder extends FEAASElement {
-        render(props: any, payload: any): ReactNode | ReactElement<any, string | JSXElementConstructor<any>> {
+        render(props: any, payload: any): ReactNode {
           return null
         }
         load() {