@sitecore-feaas/clientside 0.3.8 → 0.3.10

package/src/ui/FEAASExternal.tsx

@@ -82,14 +82,12 @@ export const parseProps = (propName: string, propValue: string, properties: JSON
   }
 }
 
-export function FEAASExternalProps(element: FEAASElement) {
-  const attributes = element.getAttributeNames()
+export function FEAASExternalProps(element: FEAASElement): any {
   const id = element.getAttribute('data-external-id')
   const schema: JSONSchema = FEAASExternal.registered[id]?.schema
-  const props = attributes.reduce((prev, curr) => {
-    if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
-      const value = element.getAttribute(curr)
-      return { ...prev, [reverseKebabCase(curr)]: parseProps(reverseKebabCase(curr), value, schema?.properties) }
+  const props = Array.from(element.attributes).reduce((prev, { name, value }) => {
+    if (!name.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(name)) {
+      return { ...prev, [reverseKebabCase(name)]: parseProps(reverseKebabCase(name), value, schema?.properties) }
     } else {
       return prev
     }

package/src/ui/react.tsx

@@ -1,5 +1,6 @@
 import {
   FEAASComponentProps,
+  FEAASElement,
   fetchComponent,
   getComponentURL,
   getStylesheetURL,
@@ -15,11 +16,10 @@ export * from './index.js'
 export * from '../headless.js'
 
 export type FEAASReactComponentProps = FEAASComponentProps & {
-  src?: string
   preload?: boolean
   lastModified?: Date | string
 }
-export const ServerComponent = async (props: FEAASComponentProps) => {
+export const ServerComponent = async (props: FEAASReactComponentProps) => {
   const fetchedData = await DataSettings.fetch(props?.data || {})
 
   const p: FEAASReactComponentProps = { ...props }
@@ -98,10 +98,23 @@ export function HTMLNodeToReact(
   }
   const children = Array.from(node.childNodes).map((child, index) => HTMLNodeToReact(child, callback, index))
 
-  const attributes: { [key: string]: string } = {}
+  const attributes: { [key: string]: string | Record<string, string> } = {}
   for (let i = 0; i < node.attributes.length; i++) {
     const { name, value } = node.attributes[i]
-    attributes[name] = value
+    if (name == 'style') {
+      attributes[name] = String(value || '')
+        .trim()
+        .split(/\s*;\s*/)
+        .reduce((object, pair) => {
+          const [k, v] = pair.split(':')
+          return {
+            ...object,
+            [k]: v
+          }
+        }, {})
+    } else {
+      attributes[name] = value
+    }
   }
 
   const reactNode = callback?.(node)

package/test/FEAASComponent.react.test.tsx

@@ -84,18 +84,10 @@ describe('React', () => {
       '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
-  it('render template with data with src and stringy data', async () => {
+  it('render template with style attribute', async () => {
     test(
       <section>
-        <Component src='library/test' template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
-      </section>,
-      '<section><feaas-component 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 and template', async () => {
-    test(
-      <section>
-        <Component template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
+        <Component template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
       '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )

package/test/ServerComponent.test.tsx

@@ -53,6 +53,20 @@ describe('React Server', () => {
       `<feaas-component library="library" component="test" src="library/test" data="{&quot;value&quot;:0}">Hey: <var data-path="value">0</var>!</feaas-component>`
     )
   })
+  it('pre-render data with style attribute', async () => {
+    vi.spyOn(global, 'fetch').mockImplementation(
+      async (url: string, options: Parameters<typeof fetch>[1] = {}) =>
+        new Response(
+          '<p style="text-align: left; color: red;;"><b style="cursor: 1">Hey:</b> <var data-path="value"></var>!</p>'
+        )
+    )
+
+    const Component = await ServerComponent({ src: 'library/test', data: { value: 0 } })
+    await test(
+      <>{Component}</>,
+      `<feaas-component library="library" component="test" src="library/test" data="{&quot;value&quot;:0}"><p style="text-align: left; color: red;"><b style="cursor: 1;">Hey:</b> <var data-path="value">0</var>!</p></feaas-component>`
+    )
+  })
   it('render external component', async () => {
     function MyComponent() {
       return <h1>My Component</h1>

package/types/ui/FEAASExternal.d.ts

@@ -7,7 +7,7 @@ import { FEAASComponentProps } from './react.js';
 import type { ExternalComponent, ExternalComponentOptions, JSONSchema } from '@sitecore-feaas/sdk';
 /** Parses a property value based on its property name and type defined in the JSON properties object. */
 export declare const parseProps: (propName: string, propValue: string, properties: JSONSchema['properties']) => any;
-export declare function FEAASExternalProps(element: FEAASElement): {};
+export declare function FEAASExternalProps(element: FEAASElement): any;
 export type RegisteredComponents = {
     [id: string]: ExternalComponent;
 };
@@ -23,7 +23,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     }>;
     update(): any;
     render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX;
-    getProps(): {};
+    getProps(): any;
     /**
      * Register React component to be renderable as Sitecore component (in Components and Pages). Properties are defined
      * as {@link https://json-schema.org JSON Schema}, from which a configuration form will be produced using

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,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;AAE3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,UAAU,EAAY,MAAM,qBAAqB,CAAA;AAyD5G,yGAAyG;AACzG,eAAO,MAAM,UAAU,aAAc,MAAM,aAAa,MAAM,cAAc,UAAU,CAAC,YAAY,CAAC,QAkBnG,CAAA;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,MAavD;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,EAAE,EAAE,MAAM,GAAG,iBAAiB,CAAA;CAChC,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnG,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAAK;IAC5C,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAA;IAC3C,IAAI;;;;IAIJ,MAAM;IAON,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IASpE,QAAQ;IAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,MAAM,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,wBAAwB;IAkB1F,MAAM,CAAC,uBAAuB;IAsC9B,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,YAAY,CAAC,EAAE,EAAE,MAAM;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,gBAAgB,EAAE;gBAChB,kBAAkB,EAAE,MAAM,CAAA;gBAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;aACnB,CAAA;SACF;KACF;CACF;AAKD,eAAO,MAAQ,YAAY,qCAAE,cAAc,uCAAE,iBAAiB,wCAAkB,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,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;AAE3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,UAAU,EAAY,MAAM,qBAAqB,CAAA;AAyD5G,yGAAyG;AACzG,eAAO,MAAM,UAAU,aAAc,MAAM,aAAa,MAAM,cAAc,UAAU,CAAC,YAAY,CAAC,QAkBnG,CAAA;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,GAAG,CAW7D;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,EAAE,EAAE,MAAM,GAAG,iBAAiB,CAAA;CAChC,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnG,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAAK;IAC5C,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAA;IAC3C,IAAI;;;;IAIJ,MAAM;IAON,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IASpE,QAAQ;IAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,MAAM,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,wBAAwB;IAkB1F,MAAM,CAAC,uBAAuB;IAsC9B,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,YAAY,CAAC,EAAE,EAAE,MAAM;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,gBAAgB,EAAE;gBAChB,kBAAkB,EAAE,MAAM,CAAA;gBAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;aACnB,CAAA;SACF;KACF;CACF;AAKD,eAAO,MAAQ,YAAY,qCAAE,cAAc,uCAAE,iBAAiB,wCAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}

package/types/ui/react.d.ts

@@ -6,11 +6,10 @@ export { External, linkComponents, registerComponent, getComponent } from './FEA
 export * from './index.js';
 export * from '../headless.js';
 export type FEAASReactComponentProps = FEAASComponentProps & {
-    src?: string;
     preload?: boolean;
     lastModified?: Date | string;
 };
-export declare const ServerComponent: (props: FEAASComponentProps) => Promise<JSX.Element>;
+export declare const ServerComponent: (props: FEAASReactComponentProps) => Promise<JSX.Element>;
 export declare function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps): JSX.Element;
 export declare function FEAASReactExternal(props: {
     'data-external-id': string;

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

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAKpB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAoB,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC9F,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAE9B,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,UAAiB,mBAAmB,yBAa/D,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eAyC/E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE,eAQvE;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC9E,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CAgBjB;AAED,eAAO,MAAM,SAAS,4BAAsB,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAMpB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAoB,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC9F,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAE9B,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,UAAiB,wBAAwB,yBAapE,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eAyC/E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE,eAQvE;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC9E,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CA6BjB;AAED,eAAO,MAAM,SAAS,4BAAsB,CAAA"}