Merge pull request #152 from near/feat/widget-component

feat: allow use of <Component />

packages/compiler/src/parser.ts

@@ -1,7 +1,7 @@
 function parseWidgetRenders(transpiledComponent: string) {
   const functionOffset = 'createElement'.length;
   const componentRegex =
-    /createElement\(Widget,\s*\{(?:[\w\W]*?)(?:\s*src:\s*["|'](?<src>((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/[\w.-]+))["|']/gi;
+    /createElement\((?:Widget|Component),\s*\{(?:[\w\W]*?)(?:\s*src:\s*["|'](?<src>((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/[\w.-]+))["|']/gi;
   return [...transpiledComponent.matchAll(componentRegex)].map((match) => {
     const openParenIndex = match.index! + functionOffset;
     let parenCount = 1;
@@ -53,7 +53,7 @@ export function parseChildComponents(
         const signaturePrefix = `${componentName},{__bweMeta:{parentMeta:props.__bweMeta},`;
         return componentSource.replaceAll(
           expression,
-          expression.replace(/Widget,\s*\{/, signaturePrefix)
+          expression.replace(/(Widget|Component),\s*\{/, signaturePrefix)
         );
       },
     };

packages/container/src/container.ts

@@ -20,6 +20,7 @@ export function initContainer({
     parentContainerId,
     trust,
     updateContainerProps,
+    Widget, // TODO remove when <Widget /> no longer supported
   },
 }: InitContainerParams) {
   const callbacks: { [key: string]: Function } = {};
@@ -35,16 +36,19 @@ export function initContainer({
     composeSerializationMethods({
       buildRequest,
       callbacks,
+      isComponent: (c) => c === Component,
+      isWidget: (c) => c === Widget, // TODO remove when <Widget /> no longer supported
       parentContainerId,
       postCallbackInvocationMessage,
       requests,
     });
 
   const { commit } = composeRenderMethods({
-    BWEComponent,
-    Component,
     componentId,
-    Fragment,
+    isComponent: (c) => c === Component,
+    isFragment: (c) => c === Fragment,
+    isRootComponent: (c) => c === BWEComponent,
+    isWidget: (c) => c === Widget, // TODO remove when <Widget /> no longer supported
     postComponentRenderMessage,
     serializeNode,
     trust,

packages/container/src/render.ts

@@ -1,4 +1,4 @@
-import type { ComponentChildren, VNode } from 'preact';
+import type { ComponentChildren, ComponentType, VNode } from 'preact';
 
 import type {
   BuildSafeProxyCallback,
@@ -50,10 +50,11 @@ interface RenderedVNode extends VNode<any> {
 type DispatchRenderCallback = (vnode: VNode) => void;
 
 export const composeRenderMethods: ComposeRenderMethodsCallback = ({
-  BWEComponent,
-  Component,
   componentId,
-  Fragment,
+  isRootComponent,
+  isComponent,
+  isFragment,
+  isWidget, // TODO remove when <Widget /> no longer supported
   postComponentRenderMessage,
   serializeNode,
   trust,
@@ -121,11 +122,11 @@ export const composeRenderMethods: ComposeRenderMethodsCallback = ({
       return node;
     }
 
-    if (node.type === Fragment) {
+    if (isFragment(node.type as ComponentType)) {
       const fragmentChildren = renderedChildren || [];
       if (
         fragmentChildren.length === 1 &&
-        fragmentChildren[0]?.type === BWEComponent
+        isRootComponent(fragmentChildren[0]?.type as ComponentType)
       ) {
         // this node is the root of a component defined in the container
         return parseRenderedTree(
@@ -150,8 +151,12 @@ export const composeRenderMethods: ComposeRenderMethodsCallback = ({
           )
         : node.props;
 
-    if (typeof node.type === 'function' && node.type !== Component) {
-      if (isBWEComponent(node) && node.type !== BWEComponent) {
+    if (
+      typeof node.type === 'function' &&
+      !isComponent(node.type) &&
+      !isWidget(node.type)
+    ) {
+      if (isBWEComponent(node) && !isRootComponent(node.type)) {
         const componentNode = buildBWEComponentNode(
           node as BWEComponentNode,
           renderedChildren

packages/container/src/serialize.ts

@@ -31,6 +31,8 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback =
   ({
     buildRequest,
     callbacks,
+    isComponent,
+    isWidget,
     parentContainerId,
     postCallbackInvocationMessage,
     requests,
@@ -201,16 +203,16 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback =
       componentPath,
       parentComponentId,
     }: BuildComponentIdParams) {
-      // TODO warn on missing instanceId (<Widget>'s id prop) here?
+      // TODO warn on missing instanceId (<Component>'s id prop) here?
       return [componentPath, instanceId?.toString(), parentComponentId].join(
         '##'
       );
     }
 
     /**
-     * Serialize a sandboxed <Widget /> component
+     * Serialize a sandboxed <Component /> component
      * @param parentId ID of the parent Component
-     * @param props Props passed to the <Widget /> component
+     * @param props Props passed to the <Component /> component
      */
     const serializeChildComponent = ({
       parentId,
@@ -294,10 +296,16 @@ export const composeSerializationMethods: ComposeSerializationMethodsCallback =
         });
 
       if (typeof type === 'function') {
-        if (type.name !== 'Widget') {
+        if (!isWidget(type) && !isComponent(type)) {
           throw new Error(`unrecognized Component function ${type.name}`);
         }
 
+        if (isWidget(type)) {
+          console.warn(
+            '<Widget /> will be deprecated in upcoming versions of BOS Web Engine. Please update your code to reference <Component /> instead.'
+          );
+        }
+
         const { child, placeholder } = serializeChildComponent({
           parentId,
           props,

packages/container/src/types.ts

@@ -155,10 +155,11 @@ export interface ComponentUpdate extends PostMessageParams {
 }
 
 interface ComposeRenderMethodsParams {
-  BWEComponent: FunctionComponent;
-  Component: Function;
   componentId: string;
-  Fragment: FunctionComponent;
+  isComponent: (component: Function) => boolean;
+  isFragment: (component: Function) => boolean;
+  isRootComponent: (component: Function) => boolean;
+  isWidget: (component: Function) => boolean; // TODO remove when <Widget /> no longer supported
   postComponentRenderMessage: PostMessageComponentRenderCallback;
   serializeNode: SerializeNodeCallback;
   trust: ComponentTrust;
@@ -173,6 +174,8 @@ export type ComposeRenderMethodsCallback = (
 export interface ComposeSerializationMethodsParams {
   buildRequest: BuildRequestCallback;
   callbacks: CallbackMap;
+  isComponent: (component: Function) => boolean;
+  isWidget: (component: Function) => boolean; // TODO remove when <Widget /> no longer supported
   parentContainerId: string | null;
   postCallbackInvocationMessage: PostMessageComponentInvocationCallback;
   requests: RequestMap;
@@ -236,6 +239,7 @@ export interface InitContainerParams {
     props: any;
     trust: ComponentTrust;
     updateContainerProps: UpdateContainerPropsCallback;
+    Widget: Function; // TODO remove when <Widget /> no longer supported
   };
 }
 

packages/iframe/src/SandboxedIframe.tsx

@@ -43,7 +43,8 @@ function buildSandboxedComponent({
 
           const initContainer = ${initContainer.toString()};
 
-          // placeholder to prevent <Widget /> references from breaking 
+          // placeholder function to bind to Component/Widget references 
+          function Component() {}
           function Widget() {}
 
           function useComponentCallback(cb, args) {
@@ -79,7 +80,7 @@ function buildSandboxedComponent({
             },
             context: {
               BWEComponent,
-              Component: Widget,
+              Component,
               componentId: '${id}',
               componentPropsJson: ${componentPropsJson},
               Fragment: Preact.Fragment,
@@ -93,6 +94,7 @@ function buildSandboxedComponent({
                   Preact.render(createElement(BWEComponent), document.body);
                 }
               },
+              Widget,
             },
           });