@sitecore-feaas/clientside 0.1.45 → 0.1.47

package/test/dom.test.ts

@@ -1,22 +1,14 @@
 import { JSDOM } from 'jsdom'
 import * as FEAAS from '../src/headless.js'
-import * as FEAASServerSide from '../src/node.js'
+import * as FEAASReact from '../src/ui/react.js'
 import { describe, it, assert, beforeAll } from 'vitest'
-import { parseHTML } from 'linkedom'
-
-export function renderHTMLContentFallback(
-  template: string,
-  data?: FEAAS.Datascopes,
-  config?: FEAAS.FEAASCustomizations
-) {
-  const newTemplate = config?.processTemplate?.(null, template, data) || template
-  const { document } = parseHTML(newTemplate)
-  return FEAAS.renderDOMElement(document, data, config).toString()
-}
+import { parseHTML, serializeHTML } from '../src/dom/html.js'
 
 function assertScriptLoaded(element: HTMLElement, src: string) {
   assert.equal(
-    Array.prototype.find.call(element.querySelectorAll('script'), (s: HTMLScriptElement) => s.src == src)?.src,
+    Array.prototype.find
+      .call(element.querySelectorAll('script'), (s: HTMLScriptElement) => s.getAttribute('src') == src)
+      ?.getAttribute('src'),
     src
   )
 }
@@ -29,9 +21,10 @@ function normalize(str: string) {
       .replace(/\n+/g, '\n')
       .replace(/<\//g, '\n</')
       .replace(/<\/?body[^>]*>/g, '')
+      .replace(/<img([^>]*?) ?\/?>/gi, '<img$1 />')
       // sort attributes
-      .replace(/<([a-z0-9-]+) ([^>]+?)(\s?\/?)>/g, (m, tag, attrs: string, closer = '') => {
-        const matches = attrs.match(/(\S+)=["']((?:.(?!["']\s+(?:\S+)=|\s*\/?[>"']))+.)["']/g)
+      .replace(/<([a-z0-9-]+) ([^>]+?)(\s?\/?)>/g, (m, tag, attrs, closer = '') => {
+        const matches = attrs.match(/\b([\w-]+)(?:\s*=\s*("[^"]*"|'[^']*'|[^'">\s]+))?/g)
         if (!matches) return m
         matches.sort()
         return '<' + tag + ' ' + matches.join(' ') + closer + '>'
@@ -51,18 +44,36 @@ function assertRenderedHTML(
 ) {
   const element = doc.createElement('body')
   const rendered = FEAAS.renderDOMContent(element, input, data, customizations)
-  const expectation = normalize(new JSDOM(expected).window.document.body.outerHTML)
-  assert.equal(normalize(rendered?.outerHTML), expectation)
+  assert.equal(normalize(rendered?.outerHTML), normalize(expected))
   if (scripts) {
     scripts.map((s) => assertScriptLoaded(rendered, s))
   }
 
   if (!ignoreHTML) {
-    assert.equal(normalize(FEAAS.renderHTMLContent('<body>' + input + '</body>', data, customizations)), expectation)
+    assert.equal(normalize(FEAAS.renderHTMLContent(input, data, customizations)), normalize(expected))
 
-    assert.equal(normalize(renderHTMLContentFallback('<body>' + input + '</body>', data, customizations)), expectation)
+    assert.equal(
+      normalize(FEAASReact.renderHTMLContent('<body>' + input + '</body>', data, customizations)),
+      normalize('<body>' + expected + '</body>')
+    )
   }
 }
+describe('HTML Parser', () => {
+  it('should handle basic parsing', function () {
+    const testCases = [
+      '<div id="container"><span>Hello</span> World</div>',
+      '<ul><li>Item 1</li><li>Item 2</li></ul>',
+      '<a href="https://example.com">Visit our site</a>',
+      '<p title="A &quot;quote&quot; inside an attribute">Text with "quote"</p>',
+      '<div onclick="alert(&#x27;Hello &amp; welcome!&#x27;)">Click me</div>',
+      '<input type="text" value="&amp;&quot;&#x27;" />',
+      'Text &amp; <strong>HTML</strong> mixed'
+    ]
+    testCases.forEach((c: string) => {
+      assert.equal(serializeHTML(parseHTML(c)), c)
+    })
+  })
+})
 describe('DOM Clientside', function () {
   describe('render without data', function () {
     it('should render element', function () {
@@ -80,6 +91,13 @@ describe('DOM Clientside', function () {
         '<div><img data-path-src="image" src="a.jpg" /></div>'
       )
     })
+    it('should render mapped attribute', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="image" /></div>`,
+        { image: null },
+        '<div><img data-path-src="image" /></div>'
+      )
+    })
     it('should not render missing attribute', function () {
       assertRenderedHTML(
         `<div><img data-path-src="context.z" /></div>`,
@@ -145,6 +163,11 @@ describe('DOM Clientside', function () {
         { missing: 'a.jpg' },
         '<div data-path-custom-attribute="test"></div>'
       )
+      assertRenderedHTML(
+        `<div data-path-custom-attribute="test"></div>`,
+        { test: null },
+        '<div data-path-custom-attribute="test"></div>'
+      )
     })
     it('should render content hub docs as html', function () {
       assertRenderedHTML(
@@ -170,21 +193,21 @@ describe('DOM Clientside', function () {
       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>'
+        '<div><a href="a.jpg"><var data-path-href="image" data-path="image">a.jpg</var></a></div>'
       )
     })
     it('should fill child element via attribute', function () {
       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>'
+        '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</var></a></div>'
       )
     })
     it('should fill image element via attribute', function () {
       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>'
+        '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</var></a></div>'
       )
     })
   })
@@ -845,7 +868,7 @@ describe('DOM Clientside', function () {
   describe('Various examples', () => {
     it('should render custom web components', () => {
       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 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>
         </bx-accordion>`,
@@ -867,8 +890,8 @@ describe('DOM Clientside', function () {
             ]
           }
         },
-        `<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.*" title-text="Hello world" open data-attributes-keys="title-text,html,open">
+        `<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.*" title-text="Hello world" open="" data-attributes-keys="title-text,html,open">
         Hola
         </bx-accordion-item>
         <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*" title-text="Bye world" data-attributes-keys="title-text,html">

package/types/dom/html.d.ts

@@ -0,0 +1,45 @@
+/** Lightweight DOM parser and serializer to use in server environments */
+import { Datascopes } from './data.js';
+import { FEAASCustomizations } from './rendering.js';
+type HTMLAttribute = {
+    name: string;
+    value: string;
+};
+declare class HTMLNode {
+    nodeName: string;
+    nodeType: number;
+    textContent?: string;
+    attributes: HTMLAttribute[];
+    childNodes: HTMLNode[];
+    parentNode?: HTMLNode;
+    constructor(nodeName: string, nodeType?: number, textContent?: string);
+    setAttribute(name: string, value: string): void;
+    getAttribute(name: string): string | undefined;
+    insertBefore(newNode: HTMLNode, referenceNode: HTMLNode | null): void;
+    removeAttribute(attrName: string): void;
+    appendChild(newNode: HTMLNode): void;
+    get tagName(): string;
+    get innerHTML(): string;
+    set innerHTML(html: string);
+    get outerHTML(): string;
+    closest(selector: string): HTMLNode | null;
+    querySelectorAll(selector: string): HTMLNode[];
+    querySelector(selector: string): HTMLNode;
+    private findSibling;
+    removeChild(child: HTMLNode): HTMLNode;
+    get previousSibling(): HTMLNode | null;
+    get nextSibling(): HTMLNode | null;
+    get previousElementSibling(): HTMLNode | null;
+    get nextElementSibling(): HTMLNode | null;
+    cloneNode(deep?: boolean): HTMLNode;
+    get parentElement(): HTMLNode;
+    ownerDocument: {
+        createElement(name: string): HTMLNode;
+    };
+}
+export declare function parseHTML(html: string): HTMLNode[];
+export declare function escapeHTML(input: string): string;
+export declare function serializeHTML(nodes: HTMLNode[]): string;
+export declare function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations): string;
+export {};
+//# sourceMappingURL=html.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/dom/html.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,mBAAmB,EAAoB,MAAM,gBAAgB,CAAA;AAEtE,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpD,cAAM,QAAQ;IACZ,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;IACD,IAAI,SAAS,IAGO,MAAM,CADzB;IACD,IAAI,SAAS,CAAC,IAAI,EAAE,MAAM,EAEzB;IACD,IAAI,SAAS,WAEZ;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,UAIlG"}

package/types/dom/rendering.d.ts

@@ -10,7 +10,7 @@ export interface FEAASCustomizations {
 export interface ExplicitTemplate {
     template: string;
 }
-export type FEAASComponentProps<T = Datascopes> = {
+export type FEAASComponentProps<T = Datascopes> = Partial<ExplicitTemplate> & {
     data?: T;
 } & (ExplicitTemplate | FEAASCDNComponentProps) & FEAASCustomizations;
 export declare function setDOMAttribute(element: HTMLElement, attribute: string, value: any, config?: FEAASCustomizations): void;

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

@@ -1 +1 @@
-{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,UAAU,EAA+D,MAAM,WAAW,CAAA;AAGnG,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,mBAAmB,CAAC,CAAC,GAAG,UAAU,IAAI;IAChD,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAgEhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA0CnB;AAKD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAcpH;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAYnH"}
+{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,UAAU,EAA+D,MAAM,WAAW,CAAA;AAInG,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,mBAAmB,CAAC,CAAC,GAAG,UAAU,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC5E,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAgEhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA0CnB;AAKD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAcpH;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAWnH"}