@knapsack/renderer-react 4.69.9--canary.4739.282ee28.0 → 4.69.9--canary.4768.997c53b.0

package/dist/index.js

@@ -39,6 +39,7 @@ var import_sleep_promise = __toESM(require("sleep-promise"));
 var import_renderer_webpack_base = require("@knapsack/renderer-webpack-base");
 var import_utils3 = require("@knapsack/utils");
 var import_app2 = require("@knapsack/app");
+var import_renderers = require("@knapsack/app/renderers");
 var import_types2 = require("@knapsack/types");
 var import_file_utils3 = require("@knapsack/file-utils");
 var import_path2 = require("path");
@@ -63,13 +64,14 @@ function renderUsageTemplate({
   `;
 }
 __name(renderUsageTemplate, "renderUsageTemplate");
+var demoAppName = "DemoApp";
 function renderDemoAppTemplate({
-  imports,
+  imports = "",
   children
 }) {
   return `${imports}
 
-function DemoApp() {
+function ${demoAppName}() {
   return (
     ${children}
   )
@@ -128,12 +130,14 @@ async function getUsage(data) {
 __name(getUsage, "getUsage");
 async function getDemoAppUsage({
   children,
-  imports
+  imports,
+  format
 }) {
   const code = renderDemoAppTemplate({
     children,
     imports
   });
+  if (!format) return code;
   return (0, import_file_utils.formatCode)({
     contents: code,
     path: "x.tsx"
@@ -717,11 +721,13 @@ 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 });
-var { createSlotOptionsHtmlTags } = import_app2.KnapsackRendererBase;
-var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.KnapsackRendererWebpackBase {
+var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
   static {
     __name(this, "KnapsackReactRenderer");
   }
@@ -730,7 +736,6 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
    */
   assets;
   babelConfig;
-  creators;
   demoWrapperPath;
   disableReactStrictMode;
   constructor({
@@ -743,7 +748,11 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       id,
       extension: ".jsx",
       language: "jsx",
-      webpackConfig
+      webpackConfig,
+      extraScripts: [
+        // this is the code in `./client/init.mts`
+        "@knapsack/renderer-react/client"
+      ]
     });
     this.language = "jsx";
     this.assets = [];
@@ -751,7 +760,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
     this.disableReactStrictMode = disableReactStrictMode;
     this.creators = [createReactPattern];
   }
-  async init(opt) {
+  init = /* @__PURE__ */ __name(async (opt) => {
     await super.init(opt);
     this.assets = await copyReactAssets(this.outputDir, this.publicPath);
     if (!await (0, import_file_utils3.exists)(this.demoWrapperPath)) {
@@ -759,7 +768,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
         `Could not find demo wrapper at: "${this.demoWrapperPath}"`
       );
     }
-  }
+  }, "init");
   getMeta = /* @__PURE__ */ __name(() => ({
     id: this.id,
     title: "React",
@@ -789,18 +798,16 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       }
     }
   }), "getMeta");
-  changeCase(str) {
-    return (0, import_utils3.pascalCase)(str);
-  }
-  createWebpackConfig() {
+  changeCase = /* @__PURE__ */ __name((str) => (0, import_utils3.pascalCase)(str), "changeCase");
+  createWebpackConfig = /* @__PURE__ */ __name(() => {
     const config = super.createWebpackConfig();
     config.externals = {
       react: "React",
       "react-dom": "ReactDOM"
     };
     return config;
-  }
-  getJsImports() {
+  }, "createWebpackConfig");
+  getJsImports = /* @__PURE__ */ __name(() => {
     const imports = super.getJsImports();
     imports.push(
       {
@@ -821,174 +828,89 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       }
     );
     return imports;
-  }
+  }, "getJsImports");
   async prepClientRenderResults({
     usage,
     demoApp,
     imports: xImports,
     renderOptions: { pattern, template, demo }
   }) {
-    const extraImportNames = this.getJsImports().flatMap(
-      (imp) => imp.type === "extra" ? [imp.importInfo.name] : []
+    const extraImports = this.getJsImports().filter(
+      (imp) => imp.type === "extra"
     );
-    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: xImports });
+    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
     if (!isDeclaredVarsUnique) {
       import_app2.log.error(`${nameCollisions.join(", ")} are declared multiple times`, {
         imports
       });
     }
-    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
+    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
+              }
+            ];
           }
-        ];
-      }
-      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 = `
-
-${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>
-      )
+    window.knapsack = window.knapsack || {};
+    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
+      ${demoApp}
+      return ${demoAppName}
     }
-
-    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 this.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
     })}
-
-    <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
-    <script type="application/javascript">${code}</script>
-${errorHtmlMsg}
-
+    ${errorHtmlMsg}
     `;
     return {
-      ok: !codeHadError,
+      ok: !errorHtmlMsg,
       html: await (0, import_file_utils3.formatCode)({
         contents: html,
         path: "x.html"
@@ -998,18 +920,24 @@ ${errorHtmlMsg}
       templateLanguage: this.language
     };
   }
-  async render(opt) {
-    if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
+  render = /* @__PURE__ */ __name(async (opt) => {
+    if (opt.demo?.type === "template") {
       const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
       let templateDemoPath;
       let attempt = 0;
       while (true) {
         try {
-          templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
-            patternId: opt.pattern.id,
-            templateId: opt.template.id,
-            demoId: opt.demo.id
+          const { absolutePath, exists } = await (0, import_file_utils3.resolvePath)({
+            path: opt.demo.templateInfo.path,
+            pkgPathAliases: this.pkgPathAliases,
+            resolveFromDir: this.dataDir
           });
+          if (!exists) {
+            throw new Error(
+              `Template demo file does not exist: ${absolutePath}`
+            );
+          }
+          templateDemoPath = absolutePath;
           break;
         } catch (e) {
           const waitTime = waits[attempt];
@@ -1035,7 +963,7 @@ ${errorHtmlMsg}
       });
       return results;
     }
-    if (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
+    if (opt.demo?.type === "data") {
       const { usage, imports } = await this.getUsageAndImports(opt);
       const { code: importCode } = this.createJsImportCodeBlock({
         imports
@@ -1043,7 +971,8 @@ ${errorHtmlMsg}
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
           children: usage,
-          imports: importCode
+          imports: importCode,
+          format: true
         }),
         getDemoAppUsage({
           children: usage
@@ -1056,10 +985,14 @@ ${errorHtmlMsg}
         renderOptions: opt
       });
     }
-  }
-  async getUsageAndImports(opt) {
-    const { pattern, template, patternManifest, demo } = opt;
-    if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
+  }, "render");
+  getUsageAndImports = /* @__PURE__ */ __name(async ({
+    pattern,
+    template,
+    patternManifest,
+    demo
+  }) => {
+    if (demo?.type && demo.type === "data") {
       const {
         data: { props, slots, slotsOptionsComputed }
       } = demo;
@@ -1083,16 +1016,16 @@ ${errorHtmlMsg}
             const slotItems = slots[slotName];
             const slotItemsUsages = await Promise.all(
               slotItems.filter((slotItem) => {
-                if (!(0, import_types2.isSlottedText)(slotItem)) {
+                if (slotItem.type !== "text") {
                   if (!slotItem.patternId) return false;
                   if (!slotItem.templateId) return false;
-                  if ((0, import_types2.isSlottedTemplateDemo)(slotItem) && !slotItem.demoId) {
+                  if (slotItem.type === "template-demo" && !slotItem.demoId) {
                     return false;
                   }
                 }
                 return true;
               }).map(async (slotItem) => {
-                if ((0, import_types2.isSlottedText)(slotItem)) {
+                if (slotItem.type === "text") {
                   if (slotItems.length === 1 && slotName !== "children") {
                     return `\`${slotItem.text}\``;
                   }
@@ -1104,7 +1037,7 @@ ${errorHtmlMsg}
                 const slotTemplate = slotPattern.templates.find(
                   (t) => t.id === slotItem.templateId
                 );
-                if ((0, import_types2.isSlottedTemplateReference)(slotItem)) {
+                if (slotItem.type === "template-reference") {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1113,7 +1046,7 @@ ${errorHtmlMsg}
                   importInfos.push(...imports);
                   return usage2;
                 }
-                if ((0, import_types2.isSlottedTemplateDemo)(slotItem)) {
+                if (slotItem.type === "template-demo") {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1136,7 +1069,7 @@ ${errorHtmlMsg}
         );
         slotUsages.forEach(({ slotName, slotItemsUsages }) => {
           const slotOptionsComputed = slotsOptionsComputed?.[slotName];
-          const { openTag, closeTag } = createSlotOptionsHtmlTags({
+          const { openTag, closeTag } = (0, import_renderers.createSlotOptionsHtmlTags)({
             slotOptionsComputed,
             classAttributeName: "className",
             stylesValueType: "object"
@@ -1184,7 +1117,7 @@ ${errorHtmlMsg}
         imports: importInfos
       };
     }
-    if (demo?.type && _KnapsackReactRenderer.isTemplateDemo(demo)) {
+    if (demo?.type && demo.type === "template") {
       const importInfo = this.getJsImport({
         patternId: pattern.id,
         templateId: template.id,
@@ -1228,11 +1161,7 @@ ${errorHtmlMsg}
         demo
       )}`
     );
-  }
-  async getUsage(opt) {
-    const { usage } = await this.getUsageAndImports(opt);
-    return usage;
-  }
+  }, "getUsageAndImports");
   inferSpec = /* @__PURE__ */ __name(async ({
     template,
     templatePath
@@ -1251,12 +1180,12 @@ ${errorHtmlMsg}
     }
     return spec;
   }, "inferSpec");
-  async watch(opt) {
-    await super.watch(opt);
+  watch = /* @__PURE__ */ __name(async (opt) => {
+    super.watch(opt);
     import_app2.knapsackEvents.onPatternTemplateChanged(() => {
       clearInferSpecCache();
     });
-  }
+  }, "watch");
   getTemplateMeta = /* @__PURE__ */ __name(async ({
     pattern,
     template
@@ -1299,7 +1228,10 @@ ${errorHtmlMsg}
     }
     return files;
   }, "getTemplateMeta");
-  alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({ files, metaDir }) => {
+  alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
+    files,
+    metaDir
+  }) => {
     const imports = [];
     const ext = ".spec.d.ts";
     files.forEach((file) => {
@@ -1326,9 +1258,9 @@ ${errorHtmlMsg}
       }
     ];
   }, "alterTemplateMetaFiles");
-  async getTemplateSuggestions({
+  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
     newPath
-  }) {
+  }) => {
     const { data: dataDir } = this.patterns.userConfig;
     const { allTemplateDemos, allTemplates } = this.getMyTemplates();
     const usedSuggestions = [
@@ -1379,7 +1311,7 @@ ${errorHtmlMsg}
     return {
       suggestions
     };
-  }
+  }, "getTemplateSuggestions");
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {