@knapsack/renderer-react 4.69.8--canary.4739.0cd3f38.0 → 4.69.8--canary.4746.02d415c.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.mjs CHANGED
@@ -16,21 +16,23 @@ var __dirname = /* @__PURE__ */ getDirname();
16
16
 
17
17
  // src/renderer-react.ts
18
18
  import sleep from "sleep-promise";
19
- import { KnapsackRendererWebpackBase } from "@knapsack/renderer-webpack-base";
19
+ import { RendererWebpackBase } from "@knapsack/renderer-webpack-base";
20
20
  import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
21
- import { knapsackEvents, log as log2, KnapsackRendererBase } from "@knapsack/app";
21
+ import { knapsackEvents, log as log2 } from "@knapsack/app";
22
+ import {
23
+ babelCodeForBrowser,
24
+ createSlotOptionsHtmlTags
25
+ } from "@knapsack/app/renderers";
22
26
  import {
23
- isSlottedText,
24
- isSlottedTemplateReference,
25
- isSlottedTemplateDemo,
26
27
  rendererIds
27
28
  } from "@knapsack/types";
28
29
  import {
29
- exists,
30
+ exists as fileExists,
30
31
  findUpPkgJson,
31
32
  getJsExportNames as getJsExportNames2,
32
33
  readFile as readFile2,
33
- formatCode as formatCode2
34
+ formatCode as formatCode2,
35
+ resolvePath as resolvePath2
34
36
  } from "@knapsack/file-utils";
35
37
  import { join, relative, parse } from "path";
36
38
 
@@ -724,8 +726,7 @@ var createReactPattern = createCreator({
724
726
  // src/renderer-react.ts
725
727
  var { pkg } = findUpPkgJson(__dirname);
726
728
  log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
727
- var { createSlotOptionsHtmlTags } = KnapsackRendererBase;
728
- var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendererWebpackBase {
729
+ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpackBase {
729
730
  static {
730
731
  __name(this, "KnapsackReactRenderer");
731
732
  }
@@ -734,7 +735,6 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendere
734
735
  */
735
736
  assets;
736
737
  babelConfig;
737
- creators;
738
738
  demoWrapperPath;
739
739
  disableReactStrictMode;
740
740
  constructor({
@@ -755,15 +755,15 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendere
755
755
  this.disableReactStrictMode = disableReactStrictMode;
756
756
  this.creators = [createReactPattern];
757
757
  }
758
- async init(opt) {
758
+ init = /* @__PURE__ */ __name(async (opt) => {
759
759
  await super.init(opt);
760
760
  this.assets = await copyReactAssets(this.outputDir, this.publicPath);
761
- if (!await exists(this.demoWrapperPath)) {
761
+ if (!await fileExists(this.demoWrapperPath)) {
762
762
  throw new Error(
763
763
  `Could not find demo wrapper at: "${this.demoWrapperPath}"`
764
764
  );
765
765
  }
766
- }
766
+ }, "init");
767
767
  getMeta = /* @__PURE__ */ __name(() => ({
768
768
  id: this.id,
769
769
  title: "React",
@@ -793,18 +793,16 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendere
793
793
  }
794
794
  }
795
795
  }), "getMeta");
796
- changeCase(str) {
797
- return pascalCase(str);
798
- }
799
- createWebpackConfig() {
796
+ changeCase = /* @__PURE__ */ __name((str) => pascalCase(str), "changeCase");
797
+ createWebpackConfig = /* @__PURE__ */ __name(() => {
800
798
  const config = super.createWebpackConfig();
801
799
  config.externals = {
802
800
  react: "React",
803
801
  "react-dom": "ReactDOM"
804
802
  };
805
803
  return config;
806
- }
807
- getJsImports() {
804
+ }, "createWebpackConfig");
805
+ getJsImports = /* @__PURE__ */ __name(() => {
808
806
  const imports = super.getJsImports();
809
807
  imports.push(
810
808
  {
@@ -825,7 +823,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends KnapsackRendere
825
823
  }
826
824
  );
827
825
  return imports;
828
- }
826
+ }, "getJsImports");
829
827
  async prepClientRenderResults({
830
828
  usage,
831
829
  demoApp,
@@ -950,7 +948,7 @@ ${renderReact.name}({
950
948
  let codeHadError = false;
951
949
  let errorHtmlMsg = "";
952
950
  try {
953
- code = await this.babelCodeForBrowser({
951
+ code = await babelCodeForBrowser({
954
952
  code
955
953
  });
956
954
  } catch (e) {
@@ -1002,18 +1000,24 @@ ${errorHtmlMsg}
1002
1000
  templateLanguage: this.language
1003
1001
  };
1004
1002
  }
1005
- async render(opt) {
1006
- if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
1003
+ render = /* @__PURE__ */ __name(async (opt) => {
1004
+ if (opt.demo?.type === "template") {
1007
1005
  const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
1008
1006
  let templateDemoPath;
1009
1007
  let attempt = 0;
1010
1008
  while (true) {
1011
1009
  try {
1012
- templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
1013
- patternId: opt.pattern.id,
1014
- templateId: opt.template.id,
1015
- demoId: opt.demo.id
1010
+ const { absolutePath, exists } = await resolvePath2({
1011
+ path: opt.demo.templateInfo.path,
1012
+ pkgPathAliases: this.pkgPathAliases,
1013
+ resolveFromDir: this.dataDir
1016
1014
  });
1015
+ if (!exists) {
1016
+ throw new Error(
1017
+ `Template demo file does not exist: ${absolutePath}`
1018
+ );
1019
+ }
1020
+ templateDemoPath = absolutePath;
1017
1021
  break;
1018
1022
  } catch (e) {
1019
1023
  const waitTime = waits[attempt];
@@ -1039,7 +1043,7 @@ ${errorHtmlMsg}
1039
1043
  });
1040
1044
  return results;
1041
1045
  }
1042
- if (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
1046
+ if (opt.demo?.type === "data") {
1043
1047
  const { usage, imports } = await this.getUsageAndImports(opt);
1044
1048
  const { code: importCode } = this.createJsImportCodeBlock({
1045
1049
  imports
@@ -1060,10 +1064,14 @@ ${errorHtmlMsg}
1060
1064
  renderOptions: opt
1061
1065
  });
1062
1066
  }
1063
- }
1064
- async getUsageAndImports(opt) {
1065
- const { pattern, template, patternManifest, demo } = opt;
1066
- if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
1067
+ }, "render");
1068
+ getUsageAndImports = /* @__PURE__ */ __name(async ({
1069
+ pattern,
1070
+ template,
1071
+ patternManifest,
1072
+ demo
1073
+ }) => {
1074
+ if (demo?.type && demo.type === "data") {
1067
1075
  const {
1068
1076
  data: { props, slots, slotsOptionsComputed }
1069
1077
  } = demo;
@@ -1087,16 +1095,16 @@ ${errorHtmlMsg}
1087
1095
  const slotItems = slots[slotName];
1088
1096
  const slotItemsUsages = await Promise.all(
1089
1097
  slotItems.filter((slotItem) => {
1090
- if (!isSlottedText(slotItem)) {
1098
+ if (slotItem.type !== "text") {
1091
1099
  if (!slotItem.patternId) return false;
1092
1100
  if (!slotItem.templateId) return false;
1093
- if (isSlottedTemplateDemo(slotItem) && !slotItem.demoId) {
1101
+ if (slotItem.type === "template-demo" && !slotItem.demoId) {
1094
1102
  return false;
1095
1103
  }
1096
1104
  }
1097
1105
  return true;
1098
1106
  }).map(async (slotItem) => {
1099
- if (isSlottedText(slotItem)) {
1107
+ if (slotItem.type === "text") {
1100
1108
  if (slotItems.length === 1 && slotName !== "children") {
1101
1109
  return `\`${slotItem.text}\``;
1102
1110
  }
@@ -1108,7 +1116,7 @@ ${errorHtmlMsg}
1108
1116
  const slotTemplate = slotPattern.templates.find(
1109
1117
  (t) => t.id === slotItem.templateId
1110
1118
  );
1111
- if (isSlottedTemplateReference(slotItem)) {
1119
+ if (slotItem.type === "template-reference") {
1112
1120
  const { usage: usage2, imports } = await this.getUsageAndImports({
1113
1121
  pattern: slotPattern,
1114
1122
  template: slotTemplate,
@@ -1117,7 +1125,7 @@ ${errorHtmlMsg}
1117
1125
  importInfos.push(...imports);
1118
1126
  return usage2;
1119
1127
  }
1120
- if (isSlottedTemplateDemo(slotItem)) {
1128
+ if (slotItem.type === "template-demo") {
1121
1129
  const { usage: usage2, imports } = await this.getUsageAndImports({
1122
1130
  pattern: slotPattern,
1123
1131
  template: slotTemplate,
@@ -1188,7 +1196,7 @@ ${errorHtmlMsg}
1188
1196
  imports: importInfos
1189
1197
  };
1190
1198
  }
1191
- if (demo?.type && _KnapsackReactRenderer.isTemplateDemo(demo)) {
1199
+ if (demo?.type && demo.type === "template") {
1192
1200
  const importInfo = this.getJsImport({
1193
1201
  patternId: pattern.id,
1194
1202
  templateId: template.id,
@@ -1232,11 +1240,7 @@ ${errorHtmlMsg}
1232
1240
  demo
1233
1241
  )}`
1234
1242
  );
1235
- }
1236
- async getUsage(opt) {
1237
- const { usage } = await this.getUsageAndImports(opt);
1238
- return usage;
1239
- }
1243
+ }, "getUsageAndImports");
1240
1244
  inferSpec = /* @__PURE__ */ __name(async ({
1241
1245
  template,
1242
1246
  templatePath
@@ -1255,12 +1259,12 @@ ${errorHtmlMsg}
1255
1259
  }
1256
1260
  return spec;
1257
1261
  }, "inferSpec");
1258
- async watch(opt) {
1259
- await super.watch(opt);
1262
+ watch = /* @__PURE__ */ __name(async (opt) => {
1263
+ super.watch(opt);
1260
1264
  knapsackEvents.onPatternTemplateChanged(() => {
1261
1265
  clearInferSpecCache();
1262
1266
  });
1263
- }
1267
+ }, "watch");
1264
1268
  getTemplateMeta = /* @__PURE__ */ __name(async ({
1265
1269
  pattern,
1266
1270
  template
@@ -1303,7 +1307,10 @@ ${errorHtmlMsg}
1303
1307
  }
1304
1308
  return files;
1305
1309
  }, "getTemplateMeta");
1306
- alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({ files, metaDir }) => {
1310
+ alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
1311
+ files,
1312
+ metaDir
1313
+ }) => {
1307
1314
  const imports = [];
1308
1315
  const ext = ".spec.d.ts";
1309
1316
  files.forEach((file) => {
@@ -1330,9 +1337,9 @@ ${errorHtmlMsg}
1330
1337
  }
1331
1338
  ];
1332
1339
  }, "alterTemplateMetaFiles");
1333
- async getTemplateSuggestions({
1340
+ getTemplateSuggestions = /* @__PURE__ */ __name(async ({
1334
1341
  newPath
1335
- }) {
1342
+ }) => {
1336
1343
  const { data: dataDir } = this.patterns.userConfig;
1337
1344
  const { allTemplateDemos, allTemplates } = this.getMyTemplates();
1338
1345
  const usedSuggestions = [
@@ -1383,7 +1390,7 @@ ${errorHtmlMsg}
1383
1390
  return {
1384
1391
  suggestions
1385
1392
  };
1386
- }
1393
+ }, "getTemplateSuggestions");
1387
1394
  };
1388
1395
  export {
1389
1396
  KnapsackReactRenderer