@sitecore-feaas/clientside 0.5.20 → 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'