@sitecore-feaas/clientside 0.3.9 → 0.3.10

package/src/ui/react.tsx

@@ -10,17 +10,16 @@ import React from 'react'
 import { renderHTMLContent, HTMLNode, parseHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
 export { renderHTMLContent }
-import { FEAASExternalProps, getComponent } from './FEAASExternal.js'
+import { getComponent } from './FEAASExternal.js'
 export { External, linkComponents, registerComponent, getComponent } from './FEAASExternal.js'
 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 }
@@ -46,8 +45,7 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
         node,
         (node) => {
           if (node.localName == 'feaas-external' && getComponent(node.getAttribute('data-external-id'))) {
-            const { dataExternalId, ...props } = FEAASExternalProps(node as any)
-            return [FEAASReactExternal, props]
+            return [FEAASReactExternal, {}]
           }
         },
         index
@@ -100,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>