feat: basic hooks support

apps/web/components/ComponentTree.tsx

@@ -21,15 +21,15 @@ export default function ComponentTree({
   showMonitor,
 }: ComponentTreeParams) {
   return (
-    <div className="App">
+    <div className={`App ${isDebug ? 'bwe-debug' : ''}`}>
       <>
         {showMonitor && (
           <ComponentMonitor
             metrics={metrics}
             components={Object.values(components)}
           />
         )}
-        <div id={getAppDomId(rootComponentPath)} className="iframe">
+        <div id={getAppDomId(rootComponentPath)} className="container-child">
           {isDebug && '[root component placeholder]'}
         </div>
         <div className="iframes">

apps/web/styles.css

@@ -162,24 +162,18 @@
   font-weight: 700;
 }
 
-.iframe {
-  flex: 1;
-  justify-content: space-between;
-  margin: 4px;
-  padding: 8px;
-  border: 1px solid blue;
-}
-
-.iframe > div {
-  min-width: 60px;
-  min-height: 60px;
-}
-
 span {
   font-size: 12px;
 }
 
+.bwe-debug .container-child {
+  border: 1px solid blue;
+  padding: 0.5em;
+  margin-bottom: 1em;
+}
+
 .dom-label {
   font-size: 0.7em;
   font-family: 'Roboto Mono for Powerline';
+  text-align: center;
 }

packages/application/src/handlers.ts

@@ -86,26 +86,25 @@ export function onRender({
     children: [
       ...(isDebug
         ? [
-            React.createElement('span', { className: 'dom-label' }, [
+            React.createElement('div', { className: 'dom-label' }, [
               '[',
               React.createElement(
                 'a',
                 {
                   href: `/${componentPath}?isDebug=${isDebug}&showMonitor=${showMonitor}`,
                 },
-                componentPath
+                componentPath.split('/')[2]
               ),
               `(${getComponentRenderCount(componentId)})]`,
             ]),
-            React.createElement('br'),
           ]
         : []),
       ...(Array.isArray(componentChildren)
         ? componentChildren
         : [componentChildren]),
     ],
     id: componentId,
-    props: isDebug ? { ...props, className: 'iframe' } : props,
+    props,
     type: node.type,
     onMessageSent,
   });

packages/application/src/monitor.tsx

@@ -1,9 +1,6 @@
 import type { EventType, MessagePayload } from '@bos-web-engine/container';
 
-import type {
-  ComponentInstance,
-  ComponentMetrics,
-} from './types';
+import type { ComponentInstance, ComponentMetrics } from './types';
 import { BWEMessage } from './types';
 
 interface ComponentId {
@@ -139,7 +136,7 @@ export function ComponentMonitor({
     switch (message.type) {
       case 'component.render': {
         const { type, props } = message.node;
-        const formattedChildren = message.childComponents.length
+        const formattedChildren = message.childComponents?.length
           ? `with children ${message.childComponents
               .map(({ componentId }) =>
                 formatComponentId(parseComponentId(componentId))

packages/application/src/react.ts

@@ -7,6 +7,10 @@ import type {
   ComponentDOMElement,
 } from './types';
 
+function isChildrenAllowed(elementType: string) {
+  return !(elementType in ['img']);
+}
+
 export function createElement({
   children,
   id,
@@ -17,7 +21,7 @@ export function createElement({
   return React.createElement(
     type,
     deserializeProps({ id, props, onMessageSent }),
-    children
+    isChildrenAllowed(type) ? children : undefined
   );
 }
 

packages/container/src/events.ts

@@ -12,8 +12,10 @@ import type {
  * @param deserializeProps Function to deserialize props passed on the event
  * @param invokeCallback Function to execute the specified function in the current context
  * @param invokeComponentCallback Function to execute the specified function, either in the current context or another Component's
+ * @param parentContainerId ID of the parent container
  * @param postCallbackInvocationMessage Request invocation on external Component via window.postMessage
  * @param postCallbackResponseMessage Send callback execution result to calling Component via window.postMessage
+ * @param preactRootComponentName Name of the Preact Fragment Component function (i.e. the root Component's name)
  * @param renderDom Callback for rendering DOM within the component
  * @param renderComponent Callback for rendering the Component
  * @param requests The set of inter-Component callback requests being tracked by the Component
@@ -33,6 +35,7 @@ export function buildEventHandler({
   parentContainerId,
   postCallbackInvocationMessage,
   postCallbackResponseMessage,
+  preactRootComponentName,
   renderDom,
   renderComponent,
   requests,
@@ -120,6 +123,7 @@ export function buildEventHandler({
             callbacks,
             parentId: method,
             childComponents: [],
+            preactRootComponentName,
           })
         );
 

packages/container/src/serialize.ts

@@ -24,10 +24,23 @@ export function decodeJsonString(value: string) {
   return value.toString().replace(/⁣/g, '\n').replace(/⁤/g, '\t');
 }
 
+/**
+ * Serialize props of a child Component to be rendered in the outer application
+ * NB there is a circular dependency between this function and `serializeNode`
+ * due to the fact that a rendered Component may be passed as props to a child
+ * Component.
+ * @param builtinComponents Set of builtin BOS Web Engine Components
+ * @param callbacks Component container's callbacks
+ * @param parentId Component's parent container
+ * @param preactRootComponentName The name of the root/Fragment Preact function
+ * @param props The props for this container's Component
+ * @param componentId The target Component ID
+ */
 export function serializeProps({
   builtinComponents,
   callbacks,
   parentId,
+  preactRootComponentName,
   props,
   componentId,
 }: SerializePropsParams): Props {
@@ -51,6 +64,7 @@ export function serializeProps({
             childComponents: [],
             node: value,
             parentId,
+            preactRootComponentName,
           });
         } else if (typeof value === 'string') {
           serializedValue = decodeJsonString(serializedValue);
@@ -194,12 +208,22 @@ interface BuildComponentIdParams {
   parentComponentId: string;
 }
 
+/**
+ * Given a Preact node, build its Component tree and serialize for transmission
+ * @param builtinComponents Set of builtin BOS Web Engine Components
+ * @param callbacks Component container's callbacks
+ * @param childComponents Set of descendant Components accumulated across recursive invocations
+ * @param node The Preact Component to serialize
+ * @param parentId Component's parent container
+ * @param preactRootComponentName The name of the root/Fragment Preact function
+ */
 export function serializeNode({
   builtinComponents,
   node,
   childComponents,
   callbacks,
   parentId,
+  preactRootComponentName,
 }: SerializeNodeParams): SerializedNode {
   function buildComponentId({
     instanceId,
@@ -241,7 +265,7 @@ export function serializeNode({
 
   if (typeof type === 'function') {
     const { name: component } = type;
-    if (component === '_') {
+    if (component === preactRootComponentName) {
       serializedElementType = 'div';
       // @ts-expect-error
     } else if (builtinComponents[component]) {
@@ -270,6 +294,7 @@ export function serializeNode({
                 builtinComponents,
                 parentId,
                 componentId,
+                preactRootComponentName,
               })
             : {},
           source: src,
@@ -289,6 +314,7 @@ export function serializeNode({
           __bweMeta: {
             componentId: componentId,
           },
+          className: 'container-child',
         },
       };
     } else {
@@ -313,14 +339,21 @@ export function serializeNode({
         parentId: componentId,
         callbacks,
         childComponents,
+        preactRootComponentName,
       });
     }
   }
 
   return {
     type: serializedElementType,
     props: {
-      ...serializeProps({ props, builtinComponents, callbacks, parentId }),
+      ...serializeProps({
+        props,
+        builtinComponents,
+        callbacks,
+        parentId,
+        preactRootComponentName,
+      }),
       children: unifiedChildren.flat().map((c) =>
         c?.props
           ? serializeNode({
@@ -329,6 +362,7 @@ export function serializeNode({
               childComponents,
               callbacks,
               parentId,
+              preactRootComponentName,
             })
           : c
       ),

packages/container/src/types.ts

@@ -172,6 +172,7 @@ export interface ProcessEventParams {
   parentContainerId: string | null;
   postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
   postCallbackResponseMessage: PostMessageComponentResponseCallback;
+  preactRootComponentName: string;
   props: any;
   renderDom: (node: any) => object;
   renderComponent: () => void;
@@ -252,13 +253,15 @@ export interface SerializeNodeParams {
   childComponents: ComponentChildMetadata[];
   callbacks: CallbackMap;
   parentId: string;
+  preactRootComponentName: string;
 }
 export type SerializeNodeCallback = (
   args: SerializeNodeParams
 ) => SerializedNode;
 
 export interface SerializedNode {
   childComponents?: ComponentChildMetadata[];
+  className?: string;
   type: string;
   props: NodeProps | ComponentProps;
 }
@@ -273,6 +276,7 @@ export interface SerializePropsParams {
   builtinComponents: BuiltinComponents;
   callbacks: CallbackMap;
   parentId: string;
+  preactRootComponentName: string;
   props: any;
   componentId?: string;
 }
@@ -285,6 +289,7 @@ export interface SerializedComponentCallback {
 export interface ComponentProps {
   __bweMeta?: WebEngineMeta;
   children?: any[];
+  className?: string;
   id: string;
 }