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

package/dist/index.mjs

@@ -7,7 +7,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// ../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.5__@swc+core@1.3.57_@swc+helpers_qww7lehrx3uuw4jfw345astxp4/node_modules/tsup/assets/esm_shims.js
+// ../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.5__@swc+core@1.3.57_@swc+helpers_qewjfurrjspcqzwdqcz2r3oykm/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename = /* @__PURE__ */ __name(() => fileURLToPath(import.meta.url), "getFilename");
@@ -16,10 +16,8 @@ var __dirname = /* @__PURE__ */ getDirname();
 
 // src/renderer-react.ts
 import sleep from "sleep-promise";
-import {
-  RendererWebpackBase
-} from "@knapsack/renderer-webpack-base";
-import { pascalCase, isFirstLetterCapital, groupBy } from "@knapsack/utils";
+import { RendererWebpackBase } from "@knapsack/renderer-webpack-base";
+import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
 import { knapsackEvents, log as log2 } from "@knapsack/app";
 import {
   babelCodeForBrowser,
@@ -65,14 +63,13 @@ function renderUsageTemplate({
   `;
 }
 __name(renderUsageTemplate, "renderUsageTemplate");
-var demoAppName = "DemoApp";
 function renderDemoAppTemplate({
-  imports = "",
+  imports,
   children
 }) {
   return `${imports}
 
-function ${demoAppName}() {
+function DemoApp() {
   return (
     ${children}
   )
@@ -131,14 +128,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 formatCode({
     contents: code,
     path: "x.tsx"
@@ -728,9 +723,6 @@ var createReactPattern = createCreator({
   }, "getTasks")
 });
 
-// src/types.ts
-var rendererMetaScriptTagId = "ks-react-meta";
-
 // src/renderer-react.ts
 var { pkg } = findUpPkgJson(__dirname);
 log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
@@ -755,11 +747,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       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 = [];
@@ -842,82 +830,167 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     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) {
       log2.error(`${nameCollisions.join(", ")} are declared multiple times`, {
         imports
       });
     }
-    const importInfos = imports.map(({ importInfo }) => importInfo);
-    const meta = {
-      demo,
-      moduleImports: 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 babelCodeForBrowser({ code });
+      code = await 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 formatCode2({
+          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 formatCode2({
         contents: html,
         path: "x.html"
@@ -978,8 +1051,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
           children: usage,
-          imports: importCode,
-          format: true
+          imports: importCode
         }),
         getDemoAppUsage({
           children: usage