@sitecore-feaas/clientside 0.5.7 → 0.5.9

package/src/ui/FEAASExternal.tsx

@@ -5,18 +5,19 @@ import { FEAASElement } from '../components/FEAASElement.js'
 import { ReactJSX, ReactModules } from '../components/FEAASReactElement.js'
 import { Component, FEAASComponentProps } from './react.js'
 
-export const FEAASExternalPropsObject = BYOC.getComponentProperties
+export const FEAASExternalPropsObject = BYOC.getMergedComponentProperties
 
-export function FEAASExternalProps(element: FEAASElement): any {
+export function FEAASExternalProps(element: FEAASElement): FEAASExternalProps {
   const props = BYOC.objectKeysToCamelCase(
     Array.from(element.attributes).reduce((prev, { name, value }) => {
+      if (name == 'data-external-id') name = 'component-name'
       return Object.assign(prev, { [name]: value })
     }, {} as any)
-  )
-  return FEAASExternalPropsObject(props.dataExternalId, props)
+  ) as FEAASExternalProps
+  return FEAASExternalPropsObject(props).merged
 }
 
-export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & { dataExternalId: string }
+export type FEAASExternalProps = { componentName: string; [key: string]: any }
 
 export default class FEAASExternal extends FEAASElement<FEAASExternalProps, ReactModules> {
   load() {
@@ -24,20 +25,21 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
   }
 
   update() {
-    const { dataExternalId: id } = this.props
-    const Component = BYOC.getComponent(id)?.component
+    const Component = BYOC.getComponent(this.getComponentName())?.component
     if (!Component && this.getAttribute('hydrate') == 'false') return
     return super.update()
   }
 
   render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX {
-    const { dataExternalId: id } = props
-    console.log(props)
-    const Component = BYOC.getComponent(id)?.component
+    const Component = BYOC.getComponent(this.getComponentName())?.component
     if (!Component) {
-      console.warn(`FEAASExternal: \`${id}\` is not registered`)
+      console.warn(`FEAASExternal: \`${this.getComponentName()}\` is not registered`)
     }
-    return <>{Component && <Component {...props} />}</>
+    return <>{Component && <Component componentName={this.getComponentName()} {...props} />}</>
+  }
+
+  getComponentName() {
+    return this.getAttribute('data-external-id')
   }
 
   getProps() {

package/test/FEAASExternal.test.tsx

@@ -63,6 +63,8 @@ describe('External', () => {
     Clientside.External.registerComponent(Hello, helloSchema)
     document.body.innerHTML =
       '<feaas-external id="external-component" class="-component" data-attributes-keys="first-name,telephone" first-name="Chuck" telephone="45657890875643" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="MyTestComponent" contenteditable="false"></feaas-external>'
+    debugger
+
     const component = document.getElementById('external-component') as FEAASExternal
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(component.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
@@ -96,4 +98,14 @@ describe('External', () => {
       '<div>Text: this is a string, Number + 1: 6, Boolean: it is true, Array (joined): 1, 2, 3, 4, 5, Object: object value</div>'
     )
   })
+  it('can spread data', async () => {
+    Clientside.External.registerComponent(TypesComponent, typesComponentSchema)
+    document.body.innerHTML = `<feaas-external id="types-component" class="-component" datasources='{"my": {"arrayProp": [1,2,3], "objectProp": {"value": 333}, "numberProp": 1, "booleanProp": false, "stringProp": "Hey"}}' data-external-id="TypesComponent" contenteditable="false"></feaas-external>`
+    const typesComponent = document.getElementById('types-component') as FEAASExternal
+
+    await expect(typesComponent.whenRendered).resolves.toEqual(typesComponent)
+    expect(typesComponent.innerHTML).toEqual(
+      '<div>Text: Hey, Number + 1: 2, Boolean: error, Array (joined): 1, 2, 3, Object: 333</div>'
+    )
+  })
 })

package/types/ui/FEAASExternal.d.ts

@@ -4,10 +4,11 @@ import ReactDOM from 'react-dom';
 import { FEAASElement } from '../components/FEAASElement.js';
 import { ReactJSX, ReactModules } from '../components/FEAASReactElement.js';
 import { FEAASComponentProps } from './react.js';
-export declare const FEAASExternalPropsObject: typeof BYOC.getComponentProperties;
-export declare function FEAASExternalProps(element: FEAASElement): any;
-export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & {
-    dataExternalId: string;
+export declare const FEAASExternalPropsObject: typeof BYOC.getMergedComponentProperties;
+export declare function FEAASExternalProps(element: FEAASElement): FEAASExternalProps;
+export type FEAASExternalProps = {
+    componentName: string;
+    [key: string]: any;
 };
 export default class FEAASExternal extends FEAASElement<FEAASExternalProps, ReactModules> {
     load(): Promise<{
@@ -16,7 +17,8 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     }>;
     update(): any;
     render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX;
-    getProps(): any;
+    getComponentName(): string;
+    getProps(): FEAASExternalProps;
     static Preview(props: Partial<FEAASComponentProps<any>> & {
         src: string;
     }): JSX.Element;

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,IAAI,MAAM,gBAAgB,CAAA;AACtC,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;AAC3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAE3D,eAAO,MAAM,wBAAwB,oCAA8B,CAAA;AAEnE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,GAAG,CAO7D;AAED,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,IAAI;;;;IAIJ,MAAM;IAON,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IAUpE,QAAQ;IAIR,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,UAAU,EAAE,IAAI,CAAC,oBAAoB,CAAkB;IAC9D,MAAM,CAAC,iBAAiB,gCAAyB;IACjD,MAAM,CAAC,uBAAuB,sCAA+B;IAC7D,MAAM,CAAC,YAAY,2BAAoB;CACxC;AAID,eAAO,MAAQ,YAAY,4BAAE,cAAc,uCAAE,iBAAiB,+BAAkB,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,IAAI,MAAM,gBAAgB,CAAA;AACtC,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;AAC3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAE3D,eAAO,MAAM,wBAAwB,0CAAoC,CAAA;AAEzE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,kBAAkB,CAQ5E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAE9E,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,IAAI;;;;IAIJ,MAAM;IAMN,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IAQpE,gBAAgB;IAIhB,QAAQ;IAIR,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,UAAU,EAAE,IAAI,CAAC,oBAAoB,CAAkB;IAC9D,MAAM,CAAC,iBAAiB,gCAAyB;IACjD,MAAM,CAAC,uBAAuB,sCAA+B;IAC7D,MAAM,CAAC,YAAY,2BAAoB;CACxC;AAID,eAAO,MAAQ,YAAY,4BAAE,cAAc,uCAAE,iBAAiB,+BAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}