@sitecore-feaas/clientside 0.1.25 → 0.1.27

package/test/render.ts

@@ -1,155 +1,147 @@
 import { JSDOM } from 'jsdom'
 import * as FEAAS from '../src/dom.js'
+import * as FEAASServerSide from '../src/node.js'
 import { describe, it, assert, beforeAll } from 'vitest'
 
 const { renderDOMElement } = FEAAS
 
 function assertScriptLoaded(element: HTMLElement, src: string) {
   assert.equal(
-    Array.prototype.find.call(
-      element.closest('html').querySelectorAll('script'),
-      (s: HTMLScriptElement) => s.src == src
-    )?.src,
+    Array.prototype.find.call(element.querySelectorAll('script'), (s: HTMLScriptElement) => s.src == src)?.src,
     src
   )
 }
-
-function assertRendered(
-  input: string,
-  data: any,
-  expected: string,
-  scripts?: string[],
-  customizations?: FEAAS.FEAASCustomizations
-) {
-  function normalize(str: string) {
-    return str
+function normalize(str: string) {
+  return (
+    str
       .replace(/>\s*</g, '><')
       .replace(/^\s+|\n/gm, '')
       .replace(/>/g, '>\n')
       .replace(/\n+/g, '\n')
       .replace(/<\//g, '\n</')
+      .replace(/<\/?body[^>]*>/g, '')
+      // sort attributes
+      .replace(/<([a-z0-9-]+) ([^>]+?)(\s?\/?)>/g, (m, tag, attrs: string, closer = '') => {
+        const matches = attrs.match(/(\S+)=["']((?:.(?!["']\s+(?:\S+)=|\s*\/?[>"']))+.)["']/g)
+        if (!matches) return m
+        matches.sort()
+        return '<' + tag + ' ' + matches.join(' ') + closer + '>'
+      })
       .trim()
-  }
-  const rendered = renderDOMElement(
-    new JSDOM(input).window.document.body.firstElementChild as HTMLElement,
-    data,
-    customizations
-  )?.parentElement
-  assert.equal(normalize(rendered?.innerHTML), normalize(new JSDOM(expected).window.document.body.innerHTML))
-  if (scripts) {
-    scripts.map((s) => assertScriptLoaded(rendered, s))
-  }
+  )
 }
-function assertRenderedContent(
+
+const doc = new JSDOM('').window.document
+function assertRenderedHTML(
   input: string,
   data: any,
   expected: string,
   scripts?: string[],
-  customizations?: FEAAS.FEAASCustomizations
+  customizations?: FEAAS.FEAASCustomizations,
+  ignoreHTML = false
 ) {
-  function normalize(str: string) {
-    return str
-      .replace(/>\s*</g, '><')
-      .replace(/^\s+|\n/gm, '')
-      .replace(/>/g, '>\n')
-      .replace(/\n+/g, '\n')
-      .replace(/<\//g, '\n</')
-      .trim()
-  }
-  const doc = new JSDOM('').window.document
-  const element = doc.createElement('div')
-  doc.body.appendChild(element)
+  const element = doc.createElement('body')
   const rendered = FEAAS.renderDOMContent(element, input, data, customizations)
-  assert.equal(normalize(rendered?.innerHTML), normalize(new JSDOM(expected).window.document.body.innerHTML))
+  const expectation = normalize(new JSDOM(expected).window.document.body.outerHTML)
+  assert.equal(normalize(rendered?.outerHTML), expectation)
   if (scripts) {
     scripts.map((s) => assertScriptLoaded(rendered, s))
   }
+
+  if (!ignoreHTML) {
+    assert.equal(normalize(FEAAS.renderHTMLContent('<body>' + input + '</body>', data, customizations)), expectation)
+
+    assert.equal(
+      normalize(FEAASServerSide.renderHTMLContent('<body>' + input + '</body>', data, customizations)),
+      expectation
+    )
+  }
 }
 describe('DOM Clientside', function () {
   describe('render without data', function () {
     it('should render element', function () {
-      assertRendered(`<div></div>`, null, '<div></div>')
+      assertRenderedHTML(`<div></div>`, null, '<div></div>')
     })
     it('should render nested', function () {
-      assertRendered(`<div><img /></div>`, null, '<div><img /></div>')
+      assertRenderedHTML(`<div><img /></div>`, null, '<div><img /></div>')
     })
   })
   describe('render with data', function () {
     it('should render mapped attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="image" /></div>`,
         { image: 'a.jpg' },
         '<div><img data-path-src="image" src="a.jpg" /></div>'
       )
     })
     it('should not render missing attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="context.z" /></div>`,
         { image: 'a.jpg' },
         '<div><img data-path-src="context.z" /></div>'
       )
     })
     it('should fall back to catch all datasource', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="context.image" /></div>`,
         { _: { image: 'a.jpg' } },
         '<div><img data-path-src="context.image" src="a.jpg" /></div>'
       )
     })
     it('should fall back to catch root', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="context.image" /></div>`,
         { image: 'a.jpg' },
         '<div><img data-path-src="context.image" src="a.jpg" /></div>'
       )
     })
     it('should fall back to trimmed path', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="context.test.$.image" /></div>`,
         { context: { image: 'a.jpg' } },
         '<div><img data-path-src="context.test.$.image" src="a.jpg" /></div>'
       )
     })
     it('should fall back to catch all datasource only if path matches', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><img data-path-src="context.image" /></div>`,
         { _: { z: 'a.jpg' } },
         '<div><img data-path-src="context.image" /></div>'
       )
     })
     it('should render custom attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { test: 'a.jpg' },
         '<div data-path-custom-attribute="test" custom-attribute="a.jpg"></div>'
       )
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { missing: 'a.jpg' },
         '<div data-path-custom-attribute="test"></div>'
       )
     })
     it('should render attributes object', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-attributes="test"></div>`,
         { test: { a: 'a.jpg', b: 2, c: { user: 'yarik' } } },
         '<div data-path-attributes="test" a="a.jpg" b="2" c="{&quot;user&quot;:&quot;yarik&quot;}" data-attributes-keys="a,b,c"></div>'
       )
     })
     it('should render attributes in dynamic html', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path="html"></div>`,
         { html: '<img data-path-src="image" />', image: '1.jpg' },
         '<div data-path="html"><img data-path-src="image" src="1.jpg" /></div>'
       )
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { missing: 'a.jpg' },
         '<div data-path-custom-attribute="test"></div>'
       )
     })
     it('should render content hub docs as html', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path="html"></div>`,
         {
           html: {
@@ -162,28 +154,28 @@ describe('DOM Clientside', function () {
         },
         '<div data-path="html"><h1>Title 1</h1><p>Thing 1</p></div>'
       )
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { missing: 'a.jpg' },
         '<div data-path-custom-attribute="test"></div>'
       )
     })
     it('should fill parent link via attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><a><var data-path-href="image" data-path="image"></var></a></div>`,
         { image: 'a.jpg' },
         '<div><a href="a.jpg"><var data-path-href="image" data-path="image">a.jpg</a></div>'
       )
     })
     it('should fill child element via attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-href="image"><a><var data-path="image"></var></a></div>`,
         { image: 'a.jpg' },
         '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</a></div>'
       )
     })
     it('should fill image element via attribute', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-path-href="image"><a><var data-path="image"></var></a></div>`,
         { image: 'a.jpg' },
         '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</a></div>'
@@ -192,21 +184,21 @@ describe('DOM Clientside', function () {
   })
   describe('render with arrays', () => {
     it('should repeat element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: ['a', 'b'] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat element for primitive value with fallback', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { _: [{ items: ['a', 'b'] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat and fill element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`,
         { outside: [{ items: ['a', 'b'] }] },
         `<div>
@@ -216,21 +208,21 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: [{ a: '1' }, { a: '2' }] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat element for object value with fallback', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { _: [{ items: [{ a: '1' }, { a: '2' }] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '1' }, { title: '2' }] }] },
         `<div>
@@ -244,7 +236,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value thrice', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] },
         `<div>
@@ -261,7 +253,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for jsonpath', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="items[1:3]"><var data-path="items.*.title"></var></h1></div>`,
         { items: [{ title: '0' }, { title: '1' }, { title: '2' }] },
         `<div>
@@ -277,14 +269,14 @@ describe('DOM Clientside', function () {
   })
   describe('render with nested arrays', () => {
     it('should repeat element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: ['a', 'b'] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat and fill element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`,
         { outside: [{ items: ['a', 'b'] }] },
         `<div>
@@ -294,14 +286,14 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: [{ a: '1' }, { a: '2' }] }] },
         '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>'
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '1' }, { title: '2' }] }] },
         `<div>
@@ -315,7 +307,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value thrice', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] },
         `<div>
@@ -332,7 +324,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for jsonpath', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items[1:3]"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] },
         `<div>
@@ -349,7 +341,7 @@ describe('DOM Clientside', function () {
 
   describe('render multiplied with nested arrays and without parent context', () => {
     it('should repeat element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] },
         `<div>
@@ -362,7 +354,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat and fill element for primitive value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`,
         { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] },
         `<div>
@@ -375,7 +367,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"></h1></div>`,
         { outside: [{ items: [{ a: '1' }, { a: '2' }] }, { items: [{ a: '1' }, { a: '2' }, { c: '3' }] }] },
         `<div>
@@ -388,7 +380,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         {
           outside: [
@@ -416,7 +408,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for object value thrice', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] },
         `<div>
@@ -436,7 +428,7 @@ describe('DOM Clientside', function () {
       )
     })
     it('should repeat element for jsonpath', function () {
-      assertRendered(
+      assertRenderedHTML(
         `<div><h1 data-path-scope="outside.*.items[1:3]"><var data-path="outside.*.items.*.title"></var></h1></div>`,
         { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] },
         `<div>
@@ -489,7 +481,7 @@ describe('DOM Clientside', function () {
                 </section>
             </div>`
       ].forEach((input) => {
-        assertRendered(
+        assertRenderedHTML(
           input,
           { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] },
           `<div>
@@ -560,7 +552,7 @@ describe('DOM Clientside', function () {
                     </section>
                 </div>`
       ].forEach((input) => {
-        assertRendered(
+        assertRenderedHTML(
           input,
           { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] },
           `<div>
@@ -607,7 +599,7 @@ describe('DOM Clientside', function () {
                     </section>
                 </div>`
       ].forEach((input) => {
-        assertRendered(
+        assertRenderedHTML(
           input,
           { outside: [{ items: [{ a: '1' }, { a: '2' }] }, { items: [{ a: '1' }, { a: '2' }, { c: '3' }] }] },
           `<div>
@@ -666,7 +658,7 @@ describe('DOM Clientside', function () {
                     </section>
                 </div>`
       ].forEach((input) => {
-        assertRendered(
+        assertRenderedHTML(
           input,
           {
             outside: [
@@ -738,7 +730,7 @@ describe('DOM Clientside', function () {
                     </section>
                 </div>`
       ]
-      assertRendered(
+      assertRenderedHTML(
         `<div>
                     <section data-path-scope="outside.*">
                         <h1 data-path-scope="outside.*.items.*">
@@ -799,7 +791,7 @@ describe('DOM Clientside', function () {
                     </section>
                 </div>`
       ].forEach((input) => {
-        assertRendered(
+        assertRenderedHTML(
           input,
           { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] },
           `<div>
@@ -823,10 +815,11 @@ describe('DOM Clientside', function () {
   })
   describe('Scripts', () => {
     it('should autoload scripts initially', () => {
-      assertRendered(
+      assertRenderedHTML(
         `<div data-embed-src="http://example.com/script.js"></div>`,
         {},
-        `<div data-embed-src="http://example.com/script.js"></div>`,
+        `<div data-embed-src="http://example.com/script.js"></div>
+        <script src="http://example.com/script.js" type="module"></script>`,
         ['http://example.com/script.js']
       )
     })
@@ -837,7 +830,7 @@ describe('DOM Clientside', function () {
 
       return new Promise<void>((resolve) => {
         setTimeout(() => {
-          assertScriptLoaded(element, 'http://example.com/script.js')
+          assertScriptLoaded(element.closest('html'), 'http://example.com/script.js')
           resolve()
         }, 50)
       })
@@ -845,7 +838,7 @@ describe('DOM Clientside', function () {
   })
   describe('Various examples', () => {
     it('should render custom web components', () => {
-      assertRendered(
+      assertRenderedHTML(
         `<bx-accordion class='-embed' data-embed-src="https://1.www.s81c.com/common/carbon/web-components/version/v1.21.0/accordion.min.js">
           <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*">
           </bx-accordion-item>
@@ -875,30 +868,35 @@ describe('DOM Clientside', function () {
         <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*" title-text="Bye world" data-attributes-keys="title-text,html">
         Mystical island
         </bx-accordion-item>
-      </bx-accordion>`
+      </bx-accordion>
+      <script src="https://1.www.s81c.com/common/carbon/web-components/version/v1.21.0/accordion.min.js" type="module">
+      </script>`,
+        null,
+        null,
+        true
       )
     })
   })
   describe('customizations', function () {
     it('processTemplate', function () {
-      assertRenderedContent(`<div></div>`, null, '<h1>123</h1>', [], {
+      assertRenderedHTML(`<div></div>`, null, '<h1>123</h1>', [], {
         processTemplate: (element, template, data) => {
           return '<h1>123</h1>'
         }
       })
-      assertRenderedContent(`<div></div>`, null, '<div></div>', [], {
+      assertRenderedHTML(`<div></div>`, null, '<div></div>', [], {
         processTemplate: (element, template, data) => {
           return null
         }
       })
-      assertRenderedContent(`<div><h1></h1></div>`, null, '<div><h1></h1></div>', [], {
+      assertRenderedHTML(`<div><h1></h1></div>`, null, '<div><h1></h1></div>', [], {
         processTemplate: (element, template, data) => {
           return null
         }
       })
     })
     it('processData', function () {
-      assertRenderedContent(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { test: 'a.jpg' },
         '<div data-path-custom-attribute="test" custom-attribute="b.jpg"></div>',
@@ -911,7 +909,7 @@ describe('DOM Clientside', function () {
           }
         }
       )
-      assertRenderedContent(
+      assertRenderedHTML(
         `<div data-path-custom-attribute="test"></div>`,
         { test: 'a.jpg' },
         '<div data-path-custom-attribute="test" custom-attribute="a.jpg.gz"></div>',

package/types/basic.d.ts

@@ -1,6 +1,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/types/basic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../src/basic.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}
+{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../src/basic.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}

package/types/cloud.d.ts

@@ -15,12 +15,14 @@ export interface CloudStylesheet {
 }
 export declare function getComponentURL({ cdn, hostname, library, component, version, revision }: CloudTemplate): string;
 export declare function getStylesheetURL({ cdn, hostname, library, revision }: CloudStylesheet): string;
-export declare function fetchComponent(props: CloudTemplate, callback: (html: string) => void): Promise<{
+export declare function fetchAndRevalidateComponent(props: CloudTemplate, callback?: (html: string) => void, dontRevalidate?: boolean): Promise<{
     url: RequestInfo | URL;
     options: RequestInit;
     isCached: boolean;
     response: Response;
     validator: (resposne: Response) => boolean;
 } | (import("./fetch.js").ValidatableRequest & Required<Pick<import("./fetch.js").ValidatableRequest, "response">>)>;
+/** Fetches HTML of a component. */
+export declare function fetchComponentHTML(props: CloudTemplate): Promise<string>;
 export declare function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void): Promise<Response>;
 //# sourceMappingURL=cloud.d.ts.map

package/types/cloud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cloud.d.ts","sourceRoot":"","sources":["../src/cloud.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AACD,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;CACtD;AAED,wBAAgB,eAAe,CAAC,EAC9B,GAA2D,EAC3D,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAsB,EACvB,EAAE,aAAa,UAEf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAA2D,EAC3D,QAAQ,EACR,OAAO,EACP,QAAsB,EACvB,EAAE,eAAe,UAEjB;AAED,wBAAsB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;;;;;qHA4C1F;AAED,wBAAsB,eAAe,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,qBAe5F"}
+{"version":3,"file":"cloud.d.ts","sourceRoot":"","sources":["../src/cloud.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AACD,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;CACtD;AAED,wBAAgB,eAAe,CAAC,EAC9B,GAA2D,EAC3D,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAsB,EACvB,EAAE,aAAa,UAEf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAA2D,EAC3D,QAAQ,EACR,OAAO,EACP,QAAsB,EACvB,EAAE,eAAe,UAEjB;AAED,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,aAAa,EACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EACjC,cAAc,UAAQ;;;;;;qHA8CvB;AAED,mCAAmC;AACnC,wBAAsB,kBAAkB,CAAC,KAAK,EAAE,aAAa,mBAU5D;AAED,wBAAsB,eAAe,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,qBAe5F"}

package/types/dom.d.ts

@@ -24,6 +24,7 @@ export declare function autoloadScripts(element: HTMLElement, observe?: boolean)
 export declare function loadScript(element: HTMLElement, src: string): boolean;
 export declare function renderDOMElement(input: HTMLElement | DocumentFragment, datascopes?: any, config?: FEAASCustomizations, isNested?: boolean): HTMLElement;
 export declare function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations): HTMLElement;
+export declare function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations, fakeDOM?: boolean): string;
 export declare function renderStylesheet(props: CloudStylesheet, style?: HTMLStyleElement): HTMLStyleElement;
 export declare function renderStylesheetPromise(props: CloudStylesheet, style?: HTMLStyleElement): Promise<HTMLStyleElement>;
 export declare function renderComponent(props: FEAASComponentProps, root?: HTMLElement): HTMLElement;

package/types/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAmC,MAAM,YAAY,CAAA;AAE5F,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,MAAM,CAAA;IAC/E,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,GAAG,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAA;IAC5D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,GAAG,CAAC,gBAAgB,GAAG,aAAa,CAAC,GACpC,mBAAmB,CAAA;AAErB,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,UAAU,kBAS/E;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,UAE9C;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,UAEpD;AAsDD,wBAAgB,WAAW,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,UAAQ,EAAE,IAAI,GAAE,GAAY,OAsDjG;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAgEhH;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,oBAkBrD;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,UAAO,oBAOnE;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,WAiB3D;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eAwCnB;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAUpH;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,gBAAgB,oBAGhF;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,gBAAgB,6BAKvF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,EAAE,IAAI,CAAC,EAAE,WAAW,eAG7E;AAED,wBAAsB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,EAAE,IAAI,CAAC,EAAE,WAAW,wBAc1F;AAED,MAAM,MAAM,OAAO,GACf;IACE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B,GACD,OAAO,EAAE,CAAA;AAQb,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAqCtF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}

package/types/node.d.ts

@@ -0,0 +1,4 @@
+import { Datascopes, FEAASCustomizations } from './dom.js';
+export * from './basic.js';
+export declare function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations): string;
+//# sourceMappingURL=node.d.ts.map

package/types/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAsC,MAAM,UAAU,CAAA;AAE9F,cAAc,YAAY,CAAA;AAE1B,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,UAIlG"}