feat: put Component source inside closure and assign alias to the ret…

…urned reference
near · Dec 12, 2023 · c3b25d4 · c3b25d4
1 parent 4f7a65a
commit c3b25d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 16 deletions.
diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts
@@ -4,6 +4,7 @@ import {
   buildComponentFunction,
   buildComponentFunctionName,
 } from './component';
+import { extractExport } from './export';
 import {
   buildComponentImportStatements,
   buildModuleImports,
@@ -134,19 +135,25 @@ export class ComponentCompiler {
     trustedRoot,
   }: ParseComponentTreeParams) {
     // separate out import statements from Component source
-    const { imports, source: cleanComponentSource } =
+    const { imports, source: importlessSource } =
       extractImportStatements(componentSource);
 
+    // get the exported reference's name and remove the export keyword(s) from Component source
+    // TODO halt parsing of the current Component if no export is found
+    const { exported, source: cleanComponentSource } =
+      extractExport(importlessSource);
+
     const componentImports = imports
       .map((moduleImport) => buildComponentImportStatements(moduleImport))
       .flat()
       .filter((statement) => !!statement) as string[];
 
-    // wrap the Component's JSX body source in a function to be rendered as a Component
+    // assign a known alias to the exported Component
     const componentFunctionSource = buildComponentFunction({
       componentPath,
       componentSource: cleanComponentSource,
       componentImports,
+      exported,
       isRoot,
     });
 

diff --git a/packages/compiler/src/component.ts b/packages/compiler/src/component.ts
@@ -15,34 +15,49 @@ interface BuildComponentFunctionParams {
   componentImports: string[];
   componentPath: string;
   componentSource: string;
+  exported: string | null;
   isRoot: boolean;
 }
 
 export function buildComponentFunction({
   componentImports,
   componentPath,
   componentSource,
+  exported,
   isRoot,
 }: BuildComponentFunctionParams) {
   const functionName = buildComponentFunctionName(isRoot ? '' : componentPath);
   const importAssignments = componentImports.join('\n');
+  const commentHeader = `${componentPath} ${isRoot ? '(root)' : ''}`;
+
+  // TODO remove once export is required
+  if (!exported) {
+    if (isRoot) {
+      return `
+        function ${functionName}() {
+          ${importAssignments}
+          ${componentSource}
+        }
+      `;
+    }
 
-  if (isRoot) {
     return `
-      function ${functionName}() {
+      /************************* ${componentPath} *************************/
+      function ${functionName}(__bweInlineComponentProps) {
         ${importAssignments}
+        const { __bweMeta, props: __componentProps } = __bweInlineComponentProps;
+        const props = Object.assign({ __bweMeta }, __componentProps); 
         ${componentSource}
       }
     `;
   }
 
   return `
-    /************************* ${componentPath} *************************/
-    function ${functionName}(__bweInlineComponentProps) {
+    /************************* ${commentHeader} *************************/
+    const ${functionName} = (() => {
       ${importAssignments}
-      const { __bweMeta, props: __componentProps } = __bweInlineComponentProps;
-      const props = Object.assign({ __bweMeta }, __componentProps); 
       ${componentSource}
-    }
+      return ${exported};
+    })();
   `;
 }
diff --git a/packages/iframe/src/SandboxedIframe.tsx b/packages/iframe/src/SandboxedIframe.tsx
@@ -41,6 +41,11 @@ function buildSandboxedComponent({
 
           const { createElement } = Preact;
 
+/******** BEGIN BOS SOURCE ********/
+/******** The root Component definition is inlined here as [function BWEComponent() {...}] ********/
+${scriptSrc}
+/******** END BOS SOURCE ********/
+
           const initContainer = ${initContainer.toString()};
 
           // placeholder function to bind to Component/Widget references 
@@ -91,7 +96,7 @@ function buildSandboxedComponent({
                 // if nothing has changed, the same [props] object will be returned
                 props = updateProps(props);
                 if (props !== originalProps) {
-                  Preact.render(createElement(BWEComponent), document.body);
+                  Preact.render(createElement(BWEComponent, props), document.body);
                 }
               },
               Widget,
@@ -101,11 +106,6 @@ function buildSandboxedComponent({
           // intialize props
           props = containerProps;
 
-/******** BEGIN BOS SOURCE ********/
-/******** The root Component definition is inlined here as [function BWEComponent() {...}] ********/
-${scriptSrc}
-/******** END BOS SOURCE ********/
-
           const oldCommit = Preact.options.__c;
           Preact.options.__c = (vnode, commitQueue) => {
             commit(vnode);
@@ -114,7 +114,7 @@ ${scriptSrc}
 
           window.addEventListener('message', processEvent);
 
-          Preact.render(createElement(BWEComponent), document.body);
+          Preact.render(createElement(BWEComponent, props), document.body);
         </script>
       </body>
     </html>