@knapsack/renderer-react 4.69.14--canary.4821.246c5f4.0 → 4.69.14

package/dist/index.mjs

@@ -17,8 +17,7 @@ var __dirname = /* @__PURE__ */ getDirname();
 // src/renderer-react.ts
 import sleep from "sleep-promise";
 import {
-  RendererWebpackBase,
-  convertImportMapToNeededImportsByPath
+  RendererWebpackBase
 } from "@knapsack/renderer-webpack-base";
 import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
 import { knapsackEvents, log as log2 } from "@knapsack/app";
@@ -34,10 +33,9 @@ import {
   findUpPkgJson,
   getJsExportNames as getJsExportNames2,
   readFile as readFile2,
-  formatCode as formatCode2,
-  assertFileExists
+  formatCode as formatCode2
 } from "@knapsack/file-utils";
-import { join, relative, parse, isAbsolute } from "path";
+import { join, relative, parse } from "path";
 
 // src/utils.ts
 import { log } from "@knapsack/app";
@@ -735,7 +733,6 @@ var rendererMetaScriptTagId = "ks-react-meta";
 // src/renderer-react.ts
 var { pkg } = findUpPkgJson(__dirname);
 log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
-var errorCatcherPath = join(__dirname, "./error-catcher.mjs");
 var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpackBase {
   static {
     __name(this, "KnapsackReactRenderer");
@@ -755,29 +752,22 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
   } = {}) {
     super({
       id,
+      extension: ".jsx",
       language: "jsx",
       webpackConfig,
       extraScripts: [
         // this is the code in `./client/init.mts`
         "@knapsack/renderer-react/client"
-      ],
-      codeSrcs: [demoWrapperPath, errorCatcherPath]
+      ]
     });
     this.language = "jsx";
     this.assets = [];
-    this.demoWrapperPath = isAbsolute(demoWrapperPath) ? demoWrapperPath : this.resolvePathSync({
-      path: demoWrapperPath,
-      resolveFromDir: this.userConfigDir
-    }).absolutePath;
-    assertFileExists(
-      this.demoWrapperPath,
-      `Could not find demo wrapper at: "${this.demoWrapperPath}"
-Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`
-    );
+    this.demoWrapperPath = demoWrapperPath;
     this.disableReactStrictMode = disableReactStrictMode;
     this.creators = [createReactPattern];
   }
-  init = /* @__PURE__ */ __name(async () => {
+  init = /* @__PURE__ */ __name(async (opt) => {
+    await super.init(opt);
     this.assets = await copyReactAssets(this.outputDir, this.publicPath);
     if (!await fileExists(this.demoWrapperPath)) {
       throw new Error(
@@ -823,37 +813,76 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
     };
     return config;
   }, "createWebpackConfig");
+  getJsImports = /* @__PURE__ */ __name(() => {
+    const imports = super.getJsImports();
+    imports.push(
+      {
+        type: "extra",
+        importInfo: {
+          type: "default",
+          path: this.demoWrapperPath,
+          name: "DemoWrapper"
+        }
+      },
+      {
+        type: "extra",
+        importInfo: {
+          type: "default",
+          path: join(__dirname, "./error-catcher.mjs"),
+          name: "ErrorCatcher"
+        }
+      }
+    );
+    return imports;
+  }, "getJsImports");
   async prepClientRenderResults({
     usage,
     demoApp,
-    importMap,
-    renderOptions: { demo, state, patternId, templateId }
+    imports: xImports,
+    renderOptions: { pattern, template, demo }
   }) {
+    const extraImports = this.getJsImports().filter(
+      (imp) => imp.type === "extra"
+    );
+    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
+    if (!isDeclaredVarsUnique) {
+      log2.error(`${nameCollisions.join(", ")} are declared multiple times`, {
+        imports
+      });
+    }
     const meta = {
       demo,
       disableReactStrictMode: this.disableReactStrictMode,
-      neededImportsByPath: convertImportMapToNeededImportsByPath(importMap),
-      extraImports: {
-        DemoWrapper: {
-          type: "default",
-          path: this.demoWrapperPath,
-          name: "DemoWrapper"
-        },
-        ErrorCatcher: {
-          type: "default",
-          path: errorCatcherPath,
-          name: "ErrorCatcher"
-        }
-      },
+      neededImports: imports,
       demoWrapperProps: {
-        patternId,
-        templateId,
-        demo
+        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
+              }
+            ];
+          }
+          return [];
+        })
       }
     };
     let code = `
     window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${[...importMap.keys()].join(", ")} }) => {
+    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
       ${demoApp}
       return ${demoAppName}
     }
@@ -875,7 +904,7 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
     <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")}
-    ${RendererWebpackBase.createHtmlTagsForAssetPaths({
+    ${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
@@ -919,12 +948,9 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
           await sleep(waitTime);
         }
       }
-      const [templateFileContents, { usage, importMap }] = await Promise.all([
+      const [templateFileContents, { usage, imports }] = await Promise.all([
         readFile2(templateDemoPath),
-        this.getUsageAndImports({
-          ...opt,
-          importMap: /* @__PURE__ */ new Map()
-        })
+        this.getUsageAndImports(opt)
       ]);
       const demoApp = await getDemoAppUsage({
         children: usage
@@ -932,18 +958,15 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
       const results = await this.prepClientRenderResults({
         usage: templateFileContents,
         demoApp,
-        renderOptions: opt,
-        importMap
+        imports,
+        renderOptions: opt
       });
       return results;
     }
     if (opt.demo?.type === "data") {
-      const { usage, importMap } = await this.getUsageAndImports({
-        ...opt,
-        importMap: /* @__PURE__ */ new Map()
-      });
-      const importCode = RendererWebpackBase.createJsImportCodeBlock({
-        importMap
+      const { usage, imports } = await this.getUsageAndImports(opt);
+      const { code: importCode } = this.createJsImportCodeBlock({
+        imports
       });
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
@@ -958,40 +981,32 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
       return this.prepClientRenderResults({
         demoApp,
         usage: demoAppUsage,
-        renderOptions: opt,
-        importMap
+        imports,
+        renderOptions: opt
       });
     }
   }, "render");
   getUsageAndImports = /* @__PURE__ */ __name(async ({
-    patternId,
-    templateId,
-    demo,
-    state,
-    importMap
+    pattern,
+    template,
+    patternManifest,
+    demo
   }) => {
-    if (!demo) {
-      throw new Error(
-        `No demo provided while rendering ${patternId} ${templateId}`
-      );
-    }
-    const pattern = state.patterns[patternId];
-    if (!pattern) {
-      throw new Error(`Could not find pattern: ${patternId}`);
-    }
-    if (demo.type === "data") {
-      const template = pattern.templates.find((t) => t.id === templateId);
-      if (!template) {
-        throw new Error(`Could not find template: ${templateId}`);
-      }
+    if (demo?.type && demo.type === "data") {
       const {
         data: { props, slots, slotsOptionsComputed }
       } = demo;
-      const { name: templateName } = await this.addUniqueValueToImportMap({
-        importMap,
-        path: template.path,
-        alias: template.alias || "default"
+      const importInfo = this.getJsImport({
+        patternId: pattern.id,
+        templateId: template.id
       });
+      if (!importInfo) {
+        throw new Error(
+          `Could not find import for pattern-template: ${pattern.id}-${template.id}`
+        );
+      }
+      const { type, name: templateName } = importInfo.importInfo;
+      const importInfos = [importInfo];
       const children = [];
       const extraProps = [];
       if (slots) {
@@ -1001,7 +1016,6 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
             const slotItems = slots[slotName];
             const slotItemsUsages = await Promise.all(
               slotItems.filter((slotItem) => {
-                if (!slotItem) return false;
                 if (slotItem.type !== "text") {
                   if (!slotItem.patternId) return false;
                   if (!slotItem.templateId) return false;
@@ -1017,39 +1031,31 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
                   }
                   return slotItem.text;
                 }
+                const slotPattern = patternManifest.getPattern(
+                  slotItem.patternId
+                );
+                const slotTemplate = slotPattern.templates.find(
+                  (t) => t.id === slotItem.templateId
+                );
                 if (slotItem.type === "template-reference") {
-                  const slottedTemplate = state.patterns[slotItem.patternId]?.templates.find((t) => t.id === slotItem.templateId);
-                  if (!slottedTemplate) {
-                    throw new Error(
-                      `Could not find slotted template: ${slotItem.patternId} ${slotItem.templateId}`
-                    );
-                  }
-                  const templateRefImport = await this.addUniqueValueToImportMap({
-                    importMap,
-                    path: slottedTemplate.path,
-                    alias: slottedTemplate.alias || "default"
+                  const { usage: usage2, imports } = await this.getUsageAndImports({
+                    pattern: slotPattern,
+                    template: slotTemplate,
+                    patternManifest
                   });
-                  return templateRefImport.name;
+                  importInfos.push(...imports);
+                  return usage2;
                 }
                 if (slotItem.type === "template-demo") {
-                  const thisDemo = slotItem.demo;
-                  if (!thisDemo) {
-                    throw new Error(
-                      `Could not find slotted template demo ${JSON.stringify(
-                        slotItem
-                      )}`
-                    );
-                  }
-                  const { usage: usage2 } = await this.getUsageAndImports({
-                    patternId: thisDemo.patternId,
-                    templateId: thisDemo.templateId,
-                    demo: thisDemo,
-                    state,
-                    importMap
+                  const { usage: usage2, imports } = await this.getUsageAndImports({
+                    pattern: slotPattern,
+                    template: slotTemplate,
+                    demo: slotItem.demo || this.patterns.demosById[slotItem.demoId],
+                    patternManifest
                   });
+                  importInfos.push(...imports);
                   return usage2;
                 }
-                const _exhaustiveCheck2 = slotItem;
                 throw new Error(
                   `Unknown slot item: ${JSON.stringify(slotItem)}`
                 );
@@ -1108,25 +1114,50 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
       });
       return {
         usage,
-        importMap
+        imports: importInfos
       };
     }
-    if (demo.type === "template") {
-      const { templateInfo } = demo;
-      const { name: templateName } = await this.addUniqueValueToImportMap({
-        importMap,
-        path: templateInfo.path,
-        alias: templateInfo.alias || "default"
+    if (demo?.type && demo.type === "template") {
+      const importInfo = this.getJsImport({
+        patternId: pattern.id,
+        templateId: template.id,
+        demoId: demo.id
       });
+      if (!importInfo) {
+        throw new Error(
+          `Could not find import for pattern-template-demo: ${pattern.id}-${template.id}-${demo.id}`
+        );
+      }
+      const { type, name: templateName } = importInfo.importInfo;
       const usage = await getUsage({ templateName });
       return {
         usage,
-        importMap
+        imports: [importInfo]
+      };
+    }
+    if (!demo) {
+      const importInfo = this.getJsImport({
+        patternId: pattern.id,
+        templateId: template.id
+      });
+      if (!importInfo) {
+        throw new Error(
+          `Could not find import for pattern-template: ${pattern.id}-${template.id}`
+        );
+      }
+      const { type, name: templateName } = importInfo.importInfo;
+      return {
+        /**
+         * i.e. Given a React Component, `Button`, normally this would be `<Button>` with a demo, but since there is none this will just be a reference to it: `Button`
+         * @see {KsSlotInfo['isTemplateReference']}
+         * @see {SlottedTemplate}
+         */
+        usage: templateName,
+        imports: [importInfo]
       };
     }
-    const _exhaustiveCheck = demo;
     throw new Error(
-      `Unhandled demo type for ${patternId}-${templateId}: ${JSON.stringify(
+      `Unhandled demo type for ${pattern.id}-${template.id}: ${JSON.stringify(
         demo
       )}`
     );
@@ -1149,8 +1180,8 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
     }
     return spec;
   }, "inferSpec");
-  watch = /* @__PURE__ */ __name(async () => {
-    super.watch();
+  watch = /* @__PURE__ */ __name(async (opt) => {
+    super.watch(opt);
     knapsackEvents.onPatternTemplateChanged(() => {
       clearInferSpecCache();
     });
@@ -1228,34 +1259,21 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
     ];
   }, "alterTemplateMetaFiles");
   getTemplateSuggestions = /* @__PURE__ */ __name(async ({
-    newPath,
-    state
+    newPath
   }) => {
-    const usedSuggestions = Object.values(state.patterns).reduce(
-      (acc, { templateDemos, templates }) => {
-        templates.forEach(({ path: path3, alias, templateLanguageId }) => {
-          if (templateLanguageId !== this.id) return;
-          acc.push({ path: path3, alias });
-        });
-        templateDemos.forEach(
-          ({ templateInfo: { path: path3, alias }, templateLanguageId }) => {
-            if (templateLanguageId !== this.id) return;
-            acc.push({ path: path3, alias });
-          }
-        );
-        return acc;
-      },
-      []
-    );
-    const codeSrcs = new Set(this.getCodeSrcs());
-    codeSrcs.delete(this.demoWrapperPath);
-    codeSrcs.delete(errorCatcherPath);
+    const { data: dataDir } = this.patterns.userConfig;
+    const { allTemplateDemos, allTemplates } = this.getMyTemplates();
+    const usedSuggestions = [
+      ...allTemplateDemos,
+      ...allTemplates
+    ].map(({ path: path3, alias }) => {
+      return {
+        path: path3,
+        alias: alias || "default"
+      };
+    });
     const allPaths = [
-      .../* @__PURE__ */ new Set([
-        newPath,
-        ...Object.keys(this.pkgPathAliases || {}),
-        ...codeSrcs
-      ])
+      .../* @__PURE__ */ new Set([newPath, ...usedSuggestions.map(({ path: path3 }) => path3)])
     ];
     const allSuggestions = await Promise.all(
       allPaths.map(async (path3) => {
@@ -1263,7 +1281,7 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
         try {
           const { exports, errorMsg } = await getJsExportNames2({
             path: path3,
-            resolveFromDir: this.dataDir,
+            resolveFromDir: dataDir,
             pkgPathAliases: this.pkgPathAliases
           });
           if (errorMsg) {