@sitecore-feaas/clientside 0.5.20-alpha.1 → 0.5.21

package/src/cdn.ts

@@ -45,7 +45,7 @@ export type FEAASCDNStylesheetSource = {
 export type FEAASCDNStylesheetProps = FEAASCDNStylesheetParams | FEAASCDNStylesheetSource | string
 
 export function parseComponentSource(source: string): FEAASCDNComponentParams {
-  const match = source?.match(
+  const match = source.match(
     /^(?:(.*?)\/components)?\/?([^\/]+)\/([^\/]+)(?:\/([^\/]+)(?:\/(published|staged|saved|\d+)(?:\.html?)?)?)?$/
   )
   if (match) {
@@ -75,7 +75,7 @@ export function getStylesheetSource(props: FEAASCDNStylesheetParams) {
 }
 
 export function parseStylesheetSource(source: string): FEAASCDNStylesheetParams {
-  const match = source?.match(/^(?:(.*?)\/styles\/)?([^\/]+)(?:\/(published|staged|saved|\d+)(?:.css)?)?$/)
+  const match = source.match(/^(?:(.*?)\/styles\/)?([^\/]+)(?:\/(published|staged|saved|\d+)(?:.css)?)?$/)
   if (match) {
     var [, cdn, library, revision] = match
     return { cdn, library, revision: revision as any }
@@ -93,11 +93,11 @@ export function getComponentURL(props: FEAASCDNComponentProps | string) {
   if (typeof props == 'string') {
     props = { src: props }
   }
-  if ('src' in props && props.src) {
+  if ('src' in props) {
     props = {
       ...parseComponentSource(props.src)
     }
-  } else props = { ...(props as FEAASCDNComponentParams) }
+  }
   return `${props.cdn || props.hostname || DEFAULT_CDN_URL}/components/${props.library}/${props.component}/${
     props.version || 'responsive'
   }/${props.revision || 'published'}.html`
@@ -114,7 +114,7 @@ export function getStylesheetURL(props: FEAASCDNStylesheetProps) {
     props = {
       ...parseStylesheetSource(props.src)
     }
-  } else props = { ...(props as FEAASCDNComponentParams) }
+  }
   return `${props.cdn || props.hostname || DEFAULT_CDN_URL}/styles/${props.library}/${
     props.revision == 'staged' ? 'staged' : props.revision == 'saved' ? 'saved' : 'published'
   }.css`

package/src/components/FEAASComponent.tsx

@@ -284,7 +284,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
 type FetchKeyword = 'data' | 'template' | 'stylesheet'
 
-declare module 'react' {
+declare global {
   namespace JSX {
     interface IntrinsicElements {
       'feaas-component': {

package/src/components/FEAASElement.tsx

@@ -341,8 +341,12 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     if (!ReactDOM) throw new Error(`${this.tagName}: ReactDOM is not present in payload`)
     if (this.getAttribute('hydrate') == 'false' && this.firstElementChild) return
     if (!this.refs.topReact && !this.forceUpdateReact) {
-      this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())
-      this.reactRoot.render(this.getReactElement())
+      if (ReactDOMClient) {
+        this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())
+        this.reactRoot.render(this.getReactElement())
+      } else {
+        ReactDOM.render(this.getReactElement(), this.getReactRootElement())
+      }
     } else if (this.forceUpdateReact && this.connected) {
       this.forceUpdateReact?.()
     } else {

package/src/components/FEAASReactElement.tsx

@@ -1,11 +1,9 @@
 import type { ReactNode, ReactElement, JSXElementConstructor, PropsWithChildren } from 'react'
 import { FEAASElement } from './FEAASElement.js'
-import type ReactDOMClient from 'react-dom/client'
 
 export type ReactModules = {
   React: typeof React
   ReactDOM: typeof ReactDOM
-  ReactDOMClient: typeof ReactDOMClient
 }
 export type ReactJSX = ReactNode | ReactElement<any, string | JSXElementConstructor<any>>
 export type FEAASReactRender<P> = {
@@ -18,11 +16,9 @@ export default class FEAASReactElement<P> extends FEAASElement<P, ReactModules>
       // @ts-ignore @webpack-ignore
       import('https://cdn.skypack.dev/react'),
       // @ts-ignore
-      import('https://cdn.skypack.dev/react-dom'),
-      // @ts-ignore
-      import('https://cdn.skypack.dev/react-dom/client')
-    ]).then(([React, ReactDOM, ReactDOMClient]) => {
-      return { React, ReactDOM, ReactDOMClient }
+      import('https://cdn.skypack.dev/react-dom')
+    ]).then(([React, ReactDOM]) => {
+      return { React, ReactDOM }
     })
   }
 

package/src/ui/FEAASExternal.tsx

@@ -21,12 +21,7 @@ export type FEAASExternalProps = { componentName: string; [key: string]: any }
 
 export default class FEAASExternal extends FEAASElement<FEAASExternalProps, ReactModules> {
   load() {
-    return Promise.all([
-      // @ts-ignore
-      import('https://cdn.skypack.dev/react-dom/client')
-    ]).then(([ReactDOMClient]) => {
-      return { React, ReactDOM, ReactDOMClient }
-    })
+    return Promise.resolve({ React, ReactDOM })
   }
 
   // observe all arttribute changes

package/test/FEAASComponent.react.test.tsx

@@ -1,7 +1,6 @@
-import { createRoot, hydrateRoot } from 'react-dom/client'
 import React, { useContext } from 'react'
-import { flushSync } from 'react-dom'
-import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest'
+import ReactDOM from 'react-dom'
+import { describe, expect, it, beforeEach, vi } from 'vitest'
 import {
   Component,
   ExternalComponent,
@@ -9,7 +8,6 @@ import {
   registerComponent,
   setElementImplementation
 } from '../src/ui/react.js'
-import ReactDOMClient from 'react-dom/client'
 
 function Hello(props: { firstName: string; telephone: string }) {
   const context = useContext(DataContext)
@@ -69,24 +67,24 @@ const helloDataSchema = {
 export async function validate(react: any, html: string) {
   const div = document.createElement('div')
   document.body.appendChild(div)
-  const root = createRoot(div)
-  flushSync(() => root.render(react))
+  const root = ReactDOM.render(react, div)
   expect(div.innerHTML).toEqual(html)
 
   const div2 = document.createElement('div')
   document.body.appendChild(div2)
   div2.innerHTML = html
 
-  flushSync(() => hydrateRoot(div2, react))
+  var onHydrate
+  const promise = new Promise((r) => {
+    onHydrate = r
+  })
+  ReactDOM.hydrate(react, div2, onHydrate)
+  await promise
   expect(div2.innerHTML).toEqual(html)
 }
 
 const DataContext = React.createContext('DEFAULT')
 
-vi.mock('https://cdn.skypack.dev/react-dom/client', () => {
-  return ReactDOMClient
-})
-
 describe('React', () => {
   beforeEach(() => {
     document.open()

package/test/FEAASExternal.test.tsx

@@ -2,12 +2,6 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import React from 'react'
 import * as Clientside from '../src/ui/react.js'
 import FEAASExternal from '../src/ui/FEAASExternal.js'
-import { vi } from 'vitest'
-import ReactDOMClient from 'react-dom/client'
-
-vi.mock('https://cdn.skypack.dev/react-dom/client', () => {
-  return ReactDOMClient
-})
 
 describe('External', () => {
   function Hello(props: { firstName: string; telephone: string }) {

package/test/ServerComponent.test.tsx

@@ -191,7 +191,7 @@ describe('React Server', () => {
     })
     function MyComponent() {
       const { test } = useContext(Context)
-      return <h1>{`My Component: ${test}`}</h1>
+      return <h1>My Component: {test}</h1>
     }
     registerComponent(MyComponent, {
       name: 'test-server-external-context'

package/types/ui/FEAASContext.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/context';
 import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js';
 import { ControlledPromise } from '../utils/promise.js';
@@ -53,7 +53,7 @@ export declare class FEAASContext extends FEAASElement<FEAASContextProps, typeof
     clientside: typeof FEAAS;
     onStatusChange: FEAASContextImports.SDKStatusCallback;
     whenSDKReady: ControlledPromise<FEAASContextImports.SDK>;
-    getPortalRoot(): FEAASElement<any, any> | HTMLElement | ShadowRoot;
+    getPortalRoot(): HTMLElement | ShadowRoot | FEAASElement<any, any>;
     render({ children, library }: React.PropsWithChildren<FEAASContextProps>, { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload): FEAASContextImports.React.JSX.Element;
 }
 declare global {

package/types/ui/FEAASEditor.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import type * as FEAASEditorImports from '@sitecore-feaas/frontend/editor';
 import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js';
 import { FEAASLoader } from '../components/FEAASLoader.js';

package/types/ui/FEAASPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import type * as FEAASPickerImports from '@sitecore-feaas/frontend/picker';
 import { FEAASElement } from '../components/FEAASElement.js';
 export declare function FEAASPickerProps(element: FEAASElement<any, any>): {

package/types/ui/react.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import * as BYOC from '@sitecore/byoc/react';
 import React from 'react';
 import { HTMLNode, renderHTMLContent } from '../dom/html.js';

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,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACvF,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAG5B;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAGtF;AAED,KAAK,wBAAwB,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC9E,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,wBAAwB,SAKtE;AAED,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;CAC3G,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,sBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,8BAAqC,wBAAwB,+BAqBlG,CAAA;AACD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAA;CAAE,qBAgElD;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CAuCjB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAA;AACxD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAA;AACtD,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,oBAAoB,kCAA4B,CAAA;AAC7D,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,8BAnK+C,wBAAwB,+BAmK3C,CAAA;AACxD,eAAO,MAAM,UAAU,UAlLqB,wBAAwB,GAAG,wBAAwB,sBAkLjD,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACvF,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAG5B;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAGtF;AAED,KAAK,wBAAwB,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC9E,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,wBAAwB,SAKtE;AAED,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;CAC3G,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,sBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,8BAAqC,wBAAwB,+BAqBlG,CAAA;AACD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAA;CAAE,qBAgElD;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CAuCjB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAA;AACxD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAA;AACtD,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,oBAAoB,kCAA4B,CAAA;AAC7D,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,8BAnK+C,wBAAwB,+BAmK3C,CAAA;AACxD,eAAO,MAAM,UAAU,UAlLqB,wBAAwB,GAAG,wBAAwB,sBAkLjD,CAAA"}