@knapsack/renderer-react 4.69.8--canary.4746.1acd21a.0 → 4.69.8--canary.4739.f95990d.0

package/dist/index.mjs

@@ -16,23 +16,21 @@ var __dirname = /* @__PURE__ */ getDirname();
 
 // src/renderer-react.ts
 import sleep from "sleep-promise";
-import { RendererWebpackBase } from "@knapsack/renderer-webpack-base";
+import { KnapsackRendererWebpackBase } from "@knapsack/renderer-webpack-base";
 import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
-import { knapsackEvents, log as log2 } from "@knapsack/app";
-import {
-  babelCodeForBrowser,
-  createSlotOptionsHtmlTags
-} from "@knapsack/app/renderers";
+import { knapsackEvents, log as log2, KnapsackRendererBase } from "@knapsack/app";
 import {
+  isSlottedText,
+  isSlottedTemplateReference,
+  isSlottedTemplateDemo,
   rendererIds
 } from "@knapsack/types";
 import {
-  exists as fileExists,
+  exists,
   findUpPkgJson,
   getJsExportNames as getJsExportNames2,
   readFile as readFile2,
-  formatCode as formatCode2,
-  resolvePath as resolvePath2
+  formatCode as formatCode2
 } from "@knapsack/file-utils";
 import { join, relative, parse } from "path";
 
@@ -726,7 +724,8 @@ var createReactPattern = createCreator({
 // src/renderer-react.ts
 var { pkg } = findUpPkgJson(__dirname);
 log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
-var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpackBase {
+var { createSlotOptionsHtmlTags } = KnapsackRendererBase;
+var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendererWebpackBase {
   static {
     __name(this, "KnapsackReactRenderer");
   }
@@ -735,6 +734,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
    */
   assets;
   babelConfig;
+  creators;
   demoWrapperPath;
   disableReactStrictMode;
   constructor({
@@ -755,15 +755,15 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
     this.disableReactStrictMode = disableReactStrictMode;
     this.creators = [createReactPattern];
   }
-  init = /* @__PURE__ */ __name(async (opt) => {
+  async init(opt) {
     await super.init(opt);
     this.assets = await copyReactAssets(this.outputDir, this.publicPath);
-    if (!await fileExists(this.demoWrapperPath)) {
+    if (!await exists(this.demoWrapperPath)) {
       throw new Error(
         `Could not find demo wrapper at: "${this.demoWrapperPath}"`
       );
     }
-  }, "init");
+  }
   getMeta = /* @__PURE__ */ __name(() => ({
     id: this.id,
     title: "React",
@@ -793,16 +793,18 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       }
     }
   }), "getMeta");
-  changeCase = /* @__PURE__ */ __name((str) => pascalCase(str), "changeCase");
-  createWebpackConfig = /* @__PURE__ */ __name(() => {
+  changeCase(str) {
+    return pascalCase(str);
+  }
+  createWebpackConfig() {
     const config = super.createWebpackConfig();
     config.externals = {
       react: "React",
       "react-dom": "ReactDOM"
     };
     return config;
-  }, "createWebpackConfig");
-  getJsImports = /* @__PURE__ */ __name(() => {
+  }
+  getJsImports() {
     const imports = super.getJsImports();
     imports.push(
       {
@@ -823,7 +825,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
       }
     );
     return imports;
-  }, "getJsImports");
+  }
   async prepClientRenderResults({
     usage,
     demoApp,
@@ -948,7 +950,7 @@ ${renderReact.name}({
     let codeHadError = false;
     let errorHtmlMsg = "";
     try {
-      code = await babelCodeForBrowser({
+      code = await this.babelCodeForBrowser({
         code
       });
     } catch (e) {
@@ -1000,24 +1002,18 @@ ${errorHtmlMsg}
       templateLanguage: this.language
     };
   }
-  render = /* @__PURE__ */ __name(async (opt) => {
-    if (opt.demo?.type === "template") {
+  async render(opt) {
+    if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
       const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
       let templateDemoPath;
       let attempt = 0;
       while (true) {
         try {
-          const { absolutePath, exists } = await resolvePath2({
-            path: opt.demo.templateInfo.path,
-            pkgPathAliases: this.pkgPathAliases,
-            resolveFromDir: this.dataDir
+          templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
+            patternId: opt.pattern.id,
+            templateId: opt.template.id,
+            demoId: opt.demo.id
           });
-          if (!exists) {
-            throw new Error(
-              `Template demo file does not exist: ${absolutePath}`
-            );
-          }
-          templateDemoPath = absolutePath;
           break;
         } catch (e) {
           const waitTime = waits[attempt];
@@ -1043,7 +1039,7 @@ ${errorHtmlMsg}
       });
       return results;
     }
-    if (opt.demo?.type === "data") {
+    if (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
       const { usage, imports } = await this.getUsageAndImports(opt);
       const { code: importCode } = this.createJsImportCodeBlock({
         imports
@@ -1064,14 +1060,10 @@ ${errorHtmlMsg}
         renderOptions: opt
       });
     }
-  }, "render");
-  getUsageAndImports = /* @__PURE__ */ __name(async ({
-    pattern,
-    template,
-    patternManifest,
-    demo
-  }) => {
-    if (demo?.type && demo.type === "data") {
+  }
+  async getUsageAndImports(opt) {
+    const { pattern, template, patternManifest, demo } = opt;
+    if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
       const {
         data: { props, slots, slotsOptionsComputed }
       } = demo;
@@ -1095,16 +1087,16 @@ ${errorHtmlMsg}
             const slotItems = slots[slotName];
             const slotItemsUsages = await Promise.all(
               slotItems.filter((slotItem) => {
-                if (slotItem.type !== "text") {
+                if (!isSlottedText(slotItem)) {
                   if (!slotItem.patternId) return false;
                   if (!slotItem.templateId) return false;
-                  if (slotItem.type === "template-demo" && !slotItem.demoId) {
+                  if (isSlottedTemplateDemo(slotItem) && !slotItem.demoId) {
                     return false;
                   }
                 }
                 return true;
               }).map(async (slotItem) => {
-                if (slotItem.type === "text") {
+                if (isSlottedText(slotItem)) {
                   if (slotItems.length === 1 && slotName !== "children") {
                     return `\`${slotItem.text}\``;
                   }
@@ -1116,7 +1108,7 @@ ${errorHtmlMsg}
                 const slotTemplate = slotPattern.templates.find(
                   (t) => t.id === slotItem.templateId
                 );
-                if (slotItem.type === "template-reference") {
+                if (isSlottedTemplateReference(slotItem)) {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1125,7 +1117,7 @@ ${errorHtmlMsg}
                   importInfos.push(...imports);
                   return usage2;
                 }
-                if (slotItem.type === "template-demo") {
+                if (isSlottedTemplateDemo(slotItem)) {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1196,7 +1188,7 @@ ${errorHtmlMsg}
         imports: importInfos
       };
     }
-    if (demo?.type && demo.type === "template") {
+    if (demo?.type && _KnapsackReactRenderer.isTemplateDemo(demo)) {
       const importInfo = this.getJsImport({
         patternId: pattern.id,
         templateId: template.id,
@@ -1240,7 +1232,11 @@ ${errorHtmlMsg}
         demo
       )}`
     );
-  }, "getUsageAndImports");
+  }
+  async getUsage(opt) {
+    const { usage } = await this.getUsageAndImports(opt);
+    return usage;
+  }
   inferSpec = /* @__PURE__ */ __name(async ({
     template,
     templatePath
@@ -1259,12 +1255,12 @@ ${errorHtmlMsg}
     }
     return spec;
   }, "inferSpec");
-  watch = /* @__PURE__ */ __name(async (opt) => {
-    super.watch(opt);
+  async watch(opt) {
+    await super.watch(opt);
     knapsackEvents.onPatternTemplateChanged(() => {
       clearInferSpecCache();
     });
-  }, "watch");
+  }
   getTemplateMeta = /* @__PURE__ */ __name(async ({
     pattern,
     template
@@ -1307,10 +1303,7 @@ ${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) => {
@@ -1337,9 +1330,9 @@ ${errorHtmlMsg}
       }
     ];
   }, "alterTemplateMetaFiles");
-  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
+  async getTemplateSuggestions({
     newPath
-  }) => {
+  }) {
     const { data: dataDir } = this.patterns.userConfig;
     const { allTemplateDemos, allTemplates } = this.getMyTemplates();
     const usedSuggestions = [
@@ -1390,7 +1383,7 @@ ${errorHtmlMsg}
     return {
       suggestions
     };
-  }, "getTemplateSuggestions");
+  }
 };
 export {
   KnapsackReactRenderer