@knapsack/renderer-react 4.69.13--canary.4860.ba46b2a.0 → 4.69.13--canary.4821.ae550c0.0

package/dist/index.mjs

@@ -17,9 +17,10 @@ var __dirname = /* @__PURE__ */ getDirname();
 // src/renderer-react.ts
 import sleep from "sleep-promise";
 import {
-  RendererWebpackBase
+  RendererWebpackBase,
+  convertImportMapToNeededImportsByPath
 } from "@knapsack/renderer-webpack-base";
-import { pascalCase, isFirstLetterCapital, groupBy } from "@knapsack/utils";
+import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
 import { knapsackEvents, log as log2 } from "@knapsack/app";
 import {
   babelCodeForBrowser,
@@ -34,9 +35,9 @@ import {
   getJsExportNames as getJsExportNames2,
   readFile as readFile2,
   formatCode as formatCode2,
-  resolvePath as resolvePath2
+  assertFileExists
 } from "@knapsack/file-utils";
-import { join, relative, parse } from "path";
+import { join, relative, parse, isAbsolute } from "path";
 
 // src/utils.ts
 import { log } from "@knapsack/app";
@@ -734,6 +735,7 @@ 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");
@@ -753,22 +755,29 @@ 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 = demoWrapperPath;
+    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.disableReactStrictMode = disableReactStrictMode;
     this.creators = [createReactPattern];
   }
-  init = /* @__PURE__ */ __name(async (opt) => {
-    await super.init(opt);
+  init = /* @__PURE__ */ __name(async () => {
     this.assets = await copyReactAssets(this.outputDir, this.publicPath);
     if (!await fileExists(this.demoWrapperPath)) {
       throw new Error(
@@ -814,80 +823,37 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     };
     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,
-    imports: xImports,
-    renderOptions: { pattern, template, demo }
+    importMap,
+    renderOptions: { demo, state, patternId, templateId }
   }) {
-    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 importInfos = imports.map(({ importInfo }) => importInfo);
     const meta = {
       demo,
-      moduleImports: groupBy(importInfos, (importInfo) => importInfo.path),
-      patternId: pattern.id,
-      templateId: template.id,
-      imports,
       disableReactStrictMode: this.disableReactStrictMode,
+      neededImportsByPath: convertImportMapToNeededImportsByPath(importMap),
+      extraImports: {
+        DemoWrapper: {
+          type: "default",
+          path: this.demoWrapperPath,
+          name: "DemoWrapper"
+        },
+        ErrorCatcher: {
+          type: "default",
+          path: errorCatcherPath,
+          name: "ErrorCatcher"
+        }
+      },
       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
-              }
-            ];
-          }
-          return [];
-        })
+        patternId,
+        templateId,
+        demo
       }
     };
     let code = `
     window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
+    window.knapsack.getDemoApp = ({ ${[...importMap.keys()].join(", ")} }) => {
       ${demoApp}
       return ${demoAppName}
     }
@@ -909,7 +875,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     <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({
+    ${RendererWebpackBase.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
@@ -934,11 +900,9 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       let attempt = 0;
       while (true) {
         try {
-          const { absolutePath, exists } = await resolvePath2({
-            path: opt.demo.templateInfo.path,
-            pkgPathAliases: this.pkgPathAliases,
-            resolveFromDir: this.dataDir
-          });
+          const { absolutePath, exists } = await this.resolvePath(
+            opt.demo.templateInfo.path
+          );
           if (!exists) {
             throw new Error(
               `Template demo file does not exist: ${absolutePath}`
@@ -955,9 +919,12 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
           await sleep(waitTime);
         }
       }
-      const [templateFileContents, { usage, imports }] = await Promise.all([
+      const [templateFileContents, { usage, importMap }] = await Promise.all([
         readFile2(templateDemoPath),
-        this.getUsageAndImports(opt)
+        this.getUsageAndImports({
+          ...opt,
+          importMap: /* @__PURE__ */ new Map()
+        })
       ]);
       const demoApp = await getDemoAppUsage({
         children: usage
@@ -965,15 +932,18 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       const results = await this.prepClientRenderResults({
         usage: templateFileContents,
         demoApp,
-        imports,
-        renderOptions: opt
+        renderOptions: opt,
+        importMap
       });
       return results;
     }
     if (opt.demo?.type === "data") {
-      const { usage, imports } = await this.getUsageAndImports(opt);
-      const { code: importCode } = this.createJsImportCodeBlock({
-        imports
+      const { usage, importMap } = await this.getUsageAndImports({
+        ...opt,
+        importMap: /* @__PURE__ */ new Map()
+      });
+      const importCode = RendererWebpackBase.createJsImportCodeBlock({
+        importMap
       });
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
@@ -988,32 +958,40 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       return this.prepClientRenderResults({
         demoApp,
         usage: demoAppUsage,
-        imports,
-        renderOptions: opt
+        renderOptions: opt,
+        importMap
       });
     }
   }, "render");
   getUsageAndImports = /* @__PURE__ */ __name(async ({
-    pattern,
-    template,
-    patternManifest,
-    demo
+    patternId,
+    templateId,
+    demo,
+    state,
+    importMap
   }) => {
-    if (demo?.type && demo.type === "data") {
+    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}`);
+      }
       const {
         data: { props, slots, slotsOptionsComputed }
       } = demo;
-      const importInfo = this.getJsImport({
-        patternId: pattern.id,
-        templateId: template.id
+      const { name: templateName } = await this.addUniqueValueToImportMap({
+        importMap,
+        path: template.path,
+        alias: template.alias || "default"
       });
-      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) {
@@ -1023,6 +1001,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
             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;
@@ -1038,31 +1017,39 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
                   }
                   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 { usage: usage2, imports } = await this.getUsageAndImports({
-                    pattern: slotPattern,
-                    template: slotTemplate,
-                    patternManifest
+                  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"
                   });
-                  importInfos.push(...imports);
-                  return usage2;
+                  return templateRefImport.name;
                 }
                 if (slotItem.type === "template-demo") {
-                  const { usage: usage2, imports } = await this.getUsageAndImports({
-                    pattern: slotPattern,
-                    template: slotTemplate,
-                    demo: slotItem.demo || this.patterns.demosById[slotItem.demoId],
-                    patternManifest
+                  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
                   });
-                  importInfos.push(...imports);
                   return usage2;
                 }
+                const _exhaustiveCheck2 = slotItem;
                 throw new Error(
                   `Unknown slot item: ${JSON.stringify(slotItem)}`
                 );
@@ -1121,50 +1108,25 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       });
       return {
         usage,
-        imports: importInfos
+        importMap
       };
     }
-    if (demo?.type && demo.type === "template") {
-      const importInfo = this.getJsImport({
-        patternId: pattern.id,
-        templateId: template.id,
-        demoId: demo.id
+    if (demo.type === "template") {
+      const { templateInfo } = demo;
+      const { name: templateName } = await this.addUniqueValueToImportMap({
+        importMap,
+        path: templateInfo.path,
+        alias: templateInfo.alias || "default"
       });
-      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,
-        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]
+        importMap
       };
     }
+    const _exhaustiveCheck = demo;
     throw new Error(
-      `Unhandled demo type for ${pattern.id}-${template.id}: ${JSON.stringify(
+      `Unhandled demo type for ${patternId}-${templateId}: ${JSON.stringify(
         demo
       )}`
     );
@@ -1187,8 +1149,8 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     }
     return spec;
   }, "inferSpec");
-  watch = /* @__PURE__ */ __name(async (opt) => {
-    super.watch(opt);
+  watch = /* @__PURE__ */ __name(async () => {
+    super.watch();
     knapsackEvents.onPatternTemplateChanged(() => {
       clearInferSpecCache();
     });
@@ -1266,21 +1228,31 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     ];
   }, "alterTemplateMetaFiles");
   getTemplateSuggestions = /* @__PURE__ */ __name(async ({
-    newPath
+    newPath,
+    state
   }) => {
-    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 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 allPaths = [
-      .../* @__PURE__ */ new Set([newPath, ...usedSuggestions.map(({ path: path3 }) => path3)])
+      .../* @__PURE__ */ new Set([
+        newPath,
+        ...Object.keys(this.pkgPathAliases || {}),
+        ...this.getCodeSrcs()
+      ])
     ];
     const allSuggestions = await Promise.all(
       allPaths.map(async (path3) => {
@@ -1288,7 +1260,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
         try {
           const { exports, errorMsg } = await getJsExportNames2({
             path: path3,
-            resolveFromDir: dataDir,
+            resolveFromDir: this.dataDir,
             pkgPathAliases: this.pkgPathAliases
           });
           if (errorMsg) {