@knapsack/renderer-react 4.69.9--canary.4768.997c53b.0 → 4.69.9--canary.4739.c87ad2d.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.69.8 (Thu Sep 12 2024)
+
+#### 🐛 Bug Fix
+
+- refactor Renderers for cleaner types [#4746](https://github.com/knapsack-labs/app-monorepo/pull/4746) ([@EvanLovely](https://github.com/EvanLovely))
+
+#### Authors: 1
+
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+
+---
+
 # v4.69.7 (Wed Sep 11 2024)
 
 #### 🐛 Bug Fix

package/dist/demo-wrapper.d.mts

@@ -1,5 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DemoWrapperProps } from './types-D2eCZXsg.mjs';
+import { DemoWrapperProps } from './index.mjs';
+import '@knapsack/renderer-webpack-base';
+import '@knapsack/utils';
+import '@knapsack/app/renderers';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/demo-wrapper.d.ts

@@ -1,5 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DemoWrapperProps } from './types-D2eCZXsg.js';
+import { DemoWrapperProps } from './index.js';
+import '@knapsack/renderer-webpack-base';
+import '@knapsack/utils';
+import '@knapsack/app/renderers';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/demo-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './types';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,4CAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,4CAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}

package/dist/demo-wrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './types';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,oBAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,oBAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}

package/dist/index.d.mts

@@ -1,9 +1,17 @@
-import { RendererWebpackBase, Renderer, KsJsImport } from '@knapsack/renderer-webpack-base';
+import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
+import { Except } from '@knapsack/utils';
 import { Renderable } from '@knapsack/app/renderers';
-import { RendererId } from '@knapsack/types';
+import { RendererId, KsJsImport } from '@knapsack/types';
 import { KnapsackRenderParams } from '@knapsack/app/types';
-export { D as DemoWrapperProps } from './types-D2eCZXsg.mjs';
 
+type DemoWrapperProps = {
+    children: React.ReactNode;
+    patternsUsed: {
+        patternId: string;
+        templateId: string;
+        demoId?: string;
+    }[];
+} & Except<KnapsackRenderParams, 'patternManifest'>;
 declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
@@ -43,4 +51,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
     getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
-export { KnapsackReactRenderer };
+export { type DemoWrapperProps, KnapsackReactRenderer };

package/dist/index.d.ts

@@ -1,9 +1,17 @@
-import { RendererWebpackBase, Renderer, KsJsImport } from '@knapsack/renderer-webpack-base';
+import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
+import { Except } from '@knapsack/utils';
 import { Renderable } from '@knapsack/app/renderers';
-import { RendererId } from '@knapsack/types';
+import { RendererId, KsJsImport } from '@knapsack/types';
 import { KnapsackRenderParams } from '@knapsack/app/types';
-export { D as DemoWrapperProps } from './types-D2eCZXsg.js';
 
+type DemoWrapperProps = {
+    children: React.ReactNode;
+    patternsUsed: {
+        patternId: string;
+        templateId: string;
+        demoId?: string;
+    }[];
+} & Except<KnapsackRenderParams, 'patternManifest'>;
 declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
@@ -43,4 +51,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
     getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
-export { KnapsackReactRenderer };
+export { type DemoWrapperProps, KnapsackReactRenderer };

package/dist/index.js

@@ -64,14 +64,13 @@ function renderUsageTemplate({
   `;
 }
 __name(renderUsageTemplate, "renderUsageTemplate");
-var demoAppName = "DemoApp";
 function renderDemoAppTemplate({
-  imports = "",
+  imports,
   children
 }) {
   return `${imports}
 
-function ${demoAppName}() {
+function DemoApp() {
   return (
     ${children}
   )
@@ -130,14 +129,12 @@ async function getUsage(data) {
 __name(getUsage, "getUsage");
 async function getDemoAppUsage({
   children,
-  imports,
-  format
+  imports
 }) {
   const code = renderDemoAppTemplate({
     children,
     imports
   });
-  if (!format) return code;
   return (0, import_file_utils.formatCode)({
     contents: code,
     path: "x.tsx"
@@ -721,9 +718,6 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
   }, "getTasks")
 });
 
-// src/types.ts
-var rendererMetaScriptTagId = "ks-react-meta";
-
 // src/renderer-react.ts
 var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
 import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
@@ -748,11 +742,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       id,
       extension: ".jsx",
       language: "jsx",
-      webpackConfig,
-      extraScripts: [
-        // this is the code in `./client/init.mts`
-        "@knapsack/renderer-react/client"
-      ]
+      webpackConfig
     });
     this.language = "jsx";
     this.assets = [];
@@ -835,82 +825,167 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
     imports: xImports,
     renderOptions: { pattern, template, demo }
   }) {
-    const extraImports = this.getJsImports().filter(
-      (imp) => imp.type === "extra"
+    const extraImportNames = this.getJsImports().flatMap(
+      (imp) => imp.type === "extra" ? [imp.importInfo.name] : []
     );
-    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
+    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: xImports });
     if (!isDeclaredVarsUnique) {
       import_app2.log.error(`${nameCollisions.join(", ")} are declared multiple times`, {
         imports
       });
     }
-    const importInfos = imports.map(({ importInfo }) => importInfo);
-    const meta = {
-      demo,
-      moduleImports: (0, import_utils3.groupBy)(importInfos, (importInfo) => importInfo.path),
-      patternId: pattern.id,
-      templateId: template.id,
-      imports,
-      disableReactStrictMode: this.disableReactStrictMode,
-      demoWrapperProps: {
-        pattern,
-        template,
-        demo,
-        patternsUsed: imports.flatMap((imp) => {
-          if (imp.type === "pattern-template") {
-            return [
-              {
-                patternId: imp.patternId,
-                templateId: imp.templateId
-              }
-            ];
+    const importNames = [
+      ...imports.map(({ importInfo: { name } }) => name),
+      ...extraImportNames
+    ];
+    const patternsUsed = imports.flatMap((imp) => {
+      if (imp.type === "pattern-template") {
+        return [
+          {
+            patternId: imp.patternId,
+            templateId: imp.templateId
           }
-          if (imp.type === "pattern-template-demo") {
-            return [
-              {
-                patternId: imp.patternId,
-                templateId: imp.templateId,
-                demoId: imp.demoId
-              }
-            ];
+        ];
+      }
+      if (imp.type === "pattern-template-demo") {
+        return [
+          {
+            patternId: imp.patternId,
+            templateId: imp.templateId,
+            demoId: imp.demoId
           }
-          return [];
-        })
+        ];
       }
+      return [];
+    });
+    const demoWrapperProps = {
+      patternsUsed,
+      pattern,
+      template,
+      demo
     };
+    const demoWrapperCode = await getUsage({
+      templateName: "DemoWrapper",
+      props: demoWrapperProps,
+      children: `<DemoApp />`
+      // extraProps,
+    });
+    async function renderReact({
+      patterns,
+      theExtraImportNames,
+      ksGlobal
+    }) {
+      if (!ksGlobal) {
+        throw new Error('"window.knapsack" is null');
+      }
+      const components = await ksGlobal.getAllImports({
+        patterns,
+        extras: theExtraImportNames.map((name) => ({ name }))
+      });
+      return components;
+    }
+    __name(renderReact, "renderReact");
     let code = `
-    window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
-      ${demoApp}
-      return ${demoAppName}
+
+${renderReact.toString()}
+${renderReact.name}({
+  ksGlobal: window.knapsack,
+  patterns: ${JSON.stringify(patternsUsed)},
+  theExtraImportNames: ${JSON.stringify(extraImportNames)},
+}).then((components) => {
+  const { ${importNames.join(", ")} } = components;
+  const root = document.getElementById('render-root');
+
+  ${demoApp}
+
+  const reactDomVersion = parseInt(ReactDOM.version.split('.')[0], 10);
+
+  const ReactRendererResult = () => {
+    if (reactDomVersion < 17 || ${this.disableReactStrictMode}){
+      return (
+        <ErrorCatcher>
+          ${demoWrapperCode}
+        </ErrorCatcher>
+      )
     }
+
+    return (
+      <React.StrictMode>
+        <ErrorCatcher>
+          ${demoWrapperCode}
+        </ErrorCatcher>
+      </React.StrictMode>
+    )
+  };
+
+
+  if (reactDomVersion > 17){
+    ReactDOM.createRoot(root).render(
+      <ReactRendererResult />
+    )
+  } else {
+    ReactDOM.render(
+      <ReactRendererResult />,
+      root
+    );
+  }
+}).catch((err) => {
+  console.error(err);
+  const root = document.getElementById('render-root');
+  // Create a new <div> element to contain the error message
+  const errorMsgDiv = document.createElement('div');
+  // Insert the new <div> element before the existing element
+  root.parentNode.insertBefore(errorMsgDiv, root);
+  // add error message so users can see it
+  errorMsgDiv.innerHTML = '<h1>Component Error</h1><p>' + err.message + '</p>';
+});
     `;
+    let codeHadError = false;
     let errorHtmlMsg = "";
     try {
-      code = await (0, import_renderers.babelCodeForBrowser)({ code });
+      code = await (0, import_renderers.babelCodeForBrowser)({
+        code
+      });
     } catch (e) {
+      codeHadError = true;
       console.log(code);
       console.log("---original code before babel error ^---");
       console.trace(e.message);
       code = `console.error(${JSON.stringify(e.message)});`;
       errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
     }
+    if (!codeHadError) {
+      try {
+        code = await (0, import_file_utils3.formatCode)({
+          contents: code,
+          path: "x.tsx"
+          // doing this to set format language
+        });
+      } catch (e) {
+        codeHadError = true;
+        console.log(code);
+        console.log("---original code before prettier error ^---");
+        console.trace(e.message);
+        code = `console.error(${JSON.stringify(e.message)});`;
+        errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
+      }
+    }
     const html = `
-    <script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
-      meta
-    )}</script>
-    <script type="application/javascript">${code}</script>
-    <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
     ${this.assets.map((asset) => `<script src="${asset}"></script>`).join("\n")}
+
     ${this.createHtmlTagsForAssetPaths({
       assets: this.getWebpackAssetPaths(),
       // we need the scripts to finish adding methods to the global knapsack object synchronously before the client-side code runs that is in the <script> tag below
       scriptTagsAreAsync: false
     })}
-    ${errorHtmlMsg}
+
+    <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
+    <script type="application/javascript">${code}</script>
+${errorHtmlMsg}
+
     `;
     return {
-      ok: !errorHtmlMsg,
+      ok: !codeHadError,
       html: await (0, import_file_utils3.formatCode)({
         contents: html,
         path: "x.html"
@@ -971,8 +1046,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
           children: usage,
-          imports: importCode,
-          format: true
+          imports: importCode
         }),
         getDemoAppUsage({
           children: usage