@sitecore-feaas/clientside 0.3.17 → 0.3.18

package/src/components/FEAASComponent.tsx

@@ -259,6 +259,7 @@ declare global {
     interface IntrinsicElements {
       'feaas-component': {
         data?: any
+        class?: string
         suppressHydrationWarning?: boolean
         template?: string
         instance?: string
@@ -288,4 +289,4 @@ declare global {
 }
 FEAASComponent.register('feaas-component')
 
-export { FEAASComponent as Component, FEAASComponentsProps as ComponentProps }
+export { FEAASComponent as Component, FEAASComponentsProps as ComponentProps }

package/src/ui/react.tsx

@@ -108,6 +108,7 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
         </>
       )}
       <feaas-component
+        class='-feaas'
         {...props}
         suppressHydrationWarning
         template={null}

package/test/FEAASComponent.react.test.tsx

@@ -53,7 +53,7 @@ describe('React', () => {
       <section>
         <Component src='library/test'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react with empty template', async () => {
@@ -61,7 +61,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' template=''></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react component with src and overrides', async () => {
@@ -69,7 +69,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' component='test2'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test2" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test2" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react component with extras', async () => {
@@ -77,7 +77,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' version='v1'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" version="v1" src="library/test" hydrate="false"></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" version="v1" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react template', async () => {
@@ -85,7 +85,7 @@ describe('React', () => {
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with data and src', async () => {
@@ -93,7 +93,7 @@ describe('React', () => {
       <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}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with data but without src', async () => {
@@ -106,7 +106,7 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" library="library" component="test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with style attribute', async () => {
@@ -114,7 +114,7 @@ describe('React', () => {
       <section>
         <Component template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render unwrapped external component with stringified values', async () => {
@@ -137,7 +137,7 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
     )
   })
   it('render wrapped external component with context provider', async () => {
@@ -153,7 +153,7 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
   it('render wrapped external component with context provider and data mapping', async () => {
@@ -169,7 +169,7 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component data="{&quot;telephone&quot;:321}" hydrate="false"><feaas-external data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}" hydrate="false"><feaas-external data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
 })

package/test/ServerComponent.test.tsx

@@ -27,7 +27,7 @@ describe('React Server', () => {
 
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;data&quot;:&quot;1&quot;}">{"data": "1"}</feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;data&quot;:&quot;1&quot;}">{"data": "1"}</feaas-component>`
     )
   })
   it('render with object data', async () => {
@@ -38,7 +38,7 @@ describe('React Server', () => {
     const Component = await ServerComponent({ src: 'library/test', data: { data: '2' } })
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;data&quot;:&quot;2&quot;}">Test</feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;data&quot;:&quot;2&quot;}">Test</feaas-component>`
     )
   })
   it('pre-render data', async () => {
@@ -50,7 +50,7 @@ describe('React Server', () => {
     const Component = await ServerComponent({ src: 'library/test', data: { value: 0 } })
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}">Hey: <var data-path="value">0</var>!</feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}">Hey: <var data-path="value">0</var>!</feaas-component>`
     )
   })
   it('pre-render data with style attribute', async () => {
@@ -64,7 +64,7 @@ describe('React Server', () => {
     const Component = await ServerComponent({ src: 'library/test', data: { value: 0 } })
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" 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>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" 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('pre-render data with whitespace', async () => {
@@ -76,7 +76,7 @@ describe('React Server', () => {
     const Component = await ServerComponent({ src: 'library/test', data: { value: 0 } })
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>Test <b>Hey:</b> <i>Dawg</i> <var data-path="value">0</var>!</p></feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>Test <b>Hey:</b> <i>Dawg</i> <var data-path="value">0</var>!</p></feaas-component>`
     )
   })
   it('render external component', async () => {
@@ -96,7 +96,7 @@ describe('React Server', () => {
     const Component = await ServerComponent({ src: 'library/test', data: { value: 0 } })
     await validate(
       <>{Component}</>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>This?</p><feaas-external hydrate="false" data-external-id="test-server-external"><h1>My Component</h1></feaas-external></feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>This?</p><feaas-external hydrate="false" data-external-id="test-server-external"><h1>My Component</h1></feaas-external></feaas-component>`
     )
   })
   it('render external component with context', async () => {
@@ -122,7 +122,7 @@ describe('React Server', () => {
       <Context.Provider value={{ test: 'cde' }}>
         <>{Component}</>
       </Context.Provider>,
-      `<feaas-component library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>This?</p><feaas-external hydrate="false" data-external-id="test-server-external-context"><h1>My Component: cde</h1></feaas-external></feaas-component>`
+      `<feaas-component class="-feaas" library="library" component="test" src="library/test" hydrate="false" data="{&quot;value&quot;:0}"><p>This?</p><feaas-external hydrate="false" data-external-id="test-server-external-context"><h1>My Component: cde</h1></feaas-external></feaas-component>`
     )
   })
-})
+})

package/types/components/FEAASComponent.d.ts

@@ -96,6 +96,7 @@ declare global {
         interface IntrinsicElements {
             'feaas-component': {
                 data?: any;
+                class?: string;
                 suppressHydrationWarning?: boolean;
                 template?: string;
                 instance?: string;

package/types/components/FEAASComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EAkCzD;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,SAAS,EAAE,GAAG,CAAK;IACnB,aAAa,yBAGZ;IAED,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAQsB;IAElC,YAAY,EAAE,OAAO,CAAA;IAErB,OAAO,CAAC,IAAI,EAAE,WAAW;IAIzB,QAAQ;;;;;;;;;;;;;;;IAIR,eAAe,CAAC,IAAI,EAAE,MAAM,oBAAoB;IAIhD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAkB1E,SAAS;IAef,SAAS,IAAI,GAAG;;IAkBhB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAkCV,eAAe,EAAE,OAAO,CAAA;IAExB,KAAK;IAML,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,wBAAwB,CAAC,EAAE,OAAO,CAAA;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;gBAC1B,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE;;mBAEG;gBACH,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EAkCzD;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,SAAS,EAAE,GAAG,CAAK;IACnB,aAAa,yBAGZ;IAED,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAQsB;IAElC,YAAY,EAAE,OAAO,CAAA;IAErB,OAAO,CAAC,IAAI,EAAE,WAAW;IAIzB,QAAQ;;;;;;;;;;;;;;;IAIR,eAAe,CAAC,IAAI,EAAE,MAAM,oBAAoB;IAIhD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAkB1E,SAAS;IAef,SAAS,IAAI,GAAG;;IAkBhB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAkCV,eAAe,EAAE,OAAO,CAAA;IAExB,KAAK;IAML,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,KAAK,CAAC,EAAE,MAAM,CAAA;gBACd,wBAAwB,CAAC,EAAE,OAAO,CAAA;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;gBAC1B,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE;;mBAEG;gBACH,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}