@knapsack/renderer-react 4.69.13--canary.4821.022ca72.0 → 4.69.13

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.mjs CHANGED
@@ -17,8 +17,7 @@ var __dirname = /* @__PURE__ */ getDirname();
17
17
  // src/renderer-react.ts
18
18
  import sleep from "sleep-promise";
19
19
  import {
20
- RendererWebpackBase,
21
- convertImportMapToNeededImportsByPath
20
+ RendererWebpackBase
22
21
  } from "@knapsack/renderer-webpack-base";
23
22
  import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
24
23
  import { knapsackEvents, log as log2 } from "@knapsack/app";
@@ -34,10 +33,9 @@ import {
34
33
  findUpPkgJson,
35
34
  getJsExportNames as getJsExportNames2,
36
35
  readFile as readFile2,
37
- formatCode as formatCode2,
38
- assertFileExists
36
+ formatCode as formatCode2
39
37
  } from "@knapsack/file-utils";
40
- import { join, relative, parse, isAbsolute } from "path";
38
+ import { join, relative, parse } from "path";
41
39
 
42
40
  // src/utils.ts
43
41
  import { log } from "@knapsack/app";
@@ -735,7 +733,6 @@ var rendererMetaScriptTagId = "ks-react-meta";
735
733
  // src/renderer-react.ts
736
734
  var { pkg } = findUpPkgJson(__dirname);
737
735
  log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
738
- var errorCatcherPath = join(__dirname, "./error-catcher.mjs");
739
736
  var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpackBase {
740
737
  static {
741
738
  __name(this, "KnapsackReactRenderer");
@@ -755,29 +752,22 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpack
755
752
  } = {}) {
756
753
  super({
757
754
  id,
755
+ extension: ".jsx",
758
756
  language: "jsx",
759
757
  webpackConfig,
760
758
  extraScripts: [
761
759
  // this is the code in `./client/init.mts`
762
760
  "@knapsack/renderer-react/client"
763
- ],
764
- codeSrcs: [demoWrapperPath, errorCatcherPath]
761
+ ]
765
762
  });
766
763
  this.language = "jsx";
767
764
  this.assets = [];
768
- this.demoWrapperPath = isAbsolute(demoWrapperPath) ? demoWrapperPath : this.resolvePathSync({
769
- path: demoWrapperPath,
770
- resolveFromDir: this.userConfigDir
771
- }).absolutePath;
772
- assertFileExists(
773
- this.demoWrapperPath,
774
- `Could not find demo wrapper at: "${this.demoWrapperPath}"
775
- Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`
776
- );
765
+ this.demoWrapperPath = demoWrapperPath;
777
766
  this.disableReactStrictMode = disableReactStrictMode;
778
767
  this.creators = [createReactPattern];
779
768
  }
780
- init = /* @__PURE__ */ __name(async () => {
769
+ init = /* @__PURE__ */ __name(async (opt) => {
770
+ await super.init(opt);
781
771
  this.assets = await copyReactAssets(this.outputDir, this.publicPath);
782
772
  if (!await fileExists(this.demoWrapperPath)) {
783
773
  throw new Error(
@@ -823,37 +813,76 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
823
813
  };
824
814
  return config;
825
815
  }, "createWebpackConfig");
816
+ getJsImports = /* @__PURE__ */ __name(() => {
817
+ const imports = super.getJsImports();
818
+ imports.push(
819
+ {
820
+ type: "extra",
821
+ importInfo: {
822
+ type: "default",
823
+ path: this.demoWrapperPath,
824
+ name: "DemoWrapper"
825
+ }
826
+ },
827
+ {
828
+ type: "extra",
829
+ importInfo: {
830
+ type: "default",
831
+ path: join(__dirname, "./error-catcher.mjs"),
832
+ name: "ErrorCatcher"
833
+ }
834
+ }
835
+ );
836
+ return imports;
837
+ }, "getJsImports");
826
838
  async prepClientRenderResults({
827
839
  usage,
828
840
  demoApp,
829
- importMap,
830
- renderOptions: { demo, state, patternId, templateId }
841
+ imports: xImports,
842
+ renderOptions: { pattern, template, demo }
831
843
  }) {
844
+ const extraImports = this.getJsImports().filter(
845
+ (imp) => imp.type === "extra"
846
+ );
847
+ const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
848
+ if (!isDeclaredVarsUnique) {
849
+ log2.error(`${nameCollisions.join(", ")} are declared multiple times`, {
850
+ imports
851
+ });
852
+ }
832
853
  const meta = {
833
854
  demo,
834
855
  disableReactStrictMode: this.disableReactStrictMode,
835
- neededImportsByPath: convertImportMapToNeededImportsByPath(importMap),
836
- extraImports: {
837
- DemoWrapper: {
838
- type: "default",
839
- path: this.demoWrapperPath,
840
- name: "DemoWrapper"
841
- },
842
- ErrorCatcher: {
843
- type: "default",
844
- path: errorCatcherPath,
845
- name: "ErrorCatcher"
846
- }
847
- },
856
+ neededImports: imports,
848
857
  demoWrapperProps: {
849
- patternId,
850
- templateId,
851
- demo
858
+ pattern,
859
+ template,
860
+ demo,
861
+ patternsUsed: imports.flatMap((imp) => {
862
+ if (imp.type === "pattern-template") {
863
+ return [
864
+ {
865
+ patternId: imp.patternId,
866
+ templateId: imp.templateId
867
+ }
868
+ ];
869
+ }
870
+ if (imp.type === "pattern-template-demo") {
871
+ return [
872
+ {
873
+ patternId: imp.patternId,
874
+ templateId: imp.templateId,
875
+ demoId: imp.demoId
876
+ }
877
+ ];
878
+ }
879
+ return [];
880
+ })
852
881
  }
853
882
  };
854
883
  let code = `
855
884
  window.knapsack = window.knapsack || {};
856
- window.knapsack.getDemoApp = ({ ${[...importMap.keys()].join(", ")} }) => {
885
+ window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
857
886
  ${demoApp}
858
887
  return ${demoAppName}
859
888
  }
@@ -875,7 +904,7 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
875
904
  <script type="application/javascript">${code}</script>
876
905
  <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
877
906
  ${this.assets.map((asset) => `<script src="${asset}"></script>`).join("\n")}
878
- ${RendererWebpackBase.createHtmlTagsForAssetPaths({
907
+ ${this.createHtmlTagsForAssetPaths({
879
908
  assets: this.getWebpackAssetPaths(),
880
909
  // 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
881
910
  scriptTagsAreAsync: false
@@ -919,12 +948,9 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
919
948
  await sleep(waitTime);
920
949
  }
921
950
  }
922
- const [templateFileContents, { usage, importMap }] = await Promise.all([
951
+ const [templateFileContents, { usage, imports }] = await Promise.all([
923
952
  readFile2(templateDemoPath),
924
- this.getUsageAndImports({
925
- ...opt,
926
- importMap: /* @__PURE__ */ new Map()
927
- })
953
+ this.getUsageAndImports(opt)
928
954
  ]);
929
955
  const demoApp = await getDemoAppUsage({
930
956
  children: usage
@@ -932,18 +958,15 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
932
958
  const results = await this.prepClientRenderResults({
933
959
  usage: templateFileContents,
934
960
  demoApp,
935
- renderOptions: opt,
936
- importMap
961
+ imports,
962
+ renderOptions: opt
937
963
  });
938
964
  return results;
939
965
  }
940
966
  if (opt.demo?.type === "data") {
941
- const { usage, importMap } = await this.getUsageAndImports({
942
- ...opt,
943
- importMap: /* @__PURE__ */ new Map()
944
- });
945
- const importCode = RendererWebpackBase.createJsImportCodeBlock({
946
- importMap
967
+ const { usage, imports } = await this.getUsageAndImports(opt);
968
+ const { code: importCode } = this.createJsImportCodeBlock({
969
+ imports
947
970
  });
948
971
  const [demoAppUsage, demoApp] = await Promise.all([
949
972
  getDemoAppUsage({
@@ -958,40 +981,32 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
958
981
  return this.prepClientRenderResults({
959
982
  demoApp,
960
983
  usage: demoAppUsage,
961
- renderOptions: opt,
962
- importMap
984
+ imports,
985
+ renderOptions: opt
963
986
  });
964
987
  }
965
988
  }, "render");
966
989
  getUsageAndImports = /* @__PURE__ */ __name(async ({
967
- patternId,
968
- templateId,
969
- demo,
970
- state,
971
- importMap
990
+ pattern,
991
+ template,
992
+ patternManifest,
993
+ demo
972
994
  }) => {
973
- if (!demo) {
974
- throw new Error(
975
- `No demo provided while rendering ${patternId} ${templateId}`
976
- );
977
- }
978
- const pattern = state.patterns[patternId];
979
- if (!pattern) {
980
- throw new Error(`Could not find pattern: ${patternId}`);
981
- }
982
- if (demo.type === "data") {
983
- const template = pattern.templates.find((t) => t.id === templateId);
984
- if (!template) {
985
- throw new Error(`Could not find template: ${templateId}`);
986
- }
995
+ if (demo?.type && demo.type === "data") {
987
996
  const {
988
997
  data: { props, slots, slotsOptionsComputed }
989
998
  } = demo;
990
- const { name: templateName } = await this.addUniqueValueToImportMap({
991
- importMap,
992
- path: template.path,
993
- alias: template.alias || "default"
999
+ const importInfo = this.getJsImport({
1000
+ patternId: pattern.id,
1001
+ templateId: template.id
994
1002
  });
1003
+ if (!importInfo) {
1004
+ throw new Error(
1005
+ `Could not find import for pattern-template: ${pattern.id}-${template.id}`
1006
+ );
1007
+ }
1008
+ const { type, name: templateName } = importInfo.importInfo;
1009
+ const importInfos = [importInfo];
995
1010
  const children = [];
996
1011
  const extraProps = [];
997
1012
  if (slots) {
@@ -1001,7 +1016,6 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1001
1016
  const slotItems = slots[slotName];
1002
1017
  const slotItemsUsages = await Promise.all(
1003
1018
  slotItems.filter((slotItem) => {
1004
- if (!slotItem) return false;
1005
1019
  if (slotItem.type !== "text") {
1006
1020
  if (!slotItem.patternId) return false;
1007
1021
  if (!slotItem.templateId) return false;
@@ -1017,39 +1031,31 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1017
1031
  }
1018
1032
  return slotItem.text;
1019
1033
  }
1034
+ const slotPattern = patternManifest.getPattern(
1035
+ slotItem.patternId
1036
+ );
1037
+ const slotTemplate = slotPattern.templates.find(
1038
+ (t) => t.id === slotItem.templateId
1039
+ );
1020
1040
  if (slotItem.type === "template-reference") {
1021
- const slottedTemplate = state.patterns[slotItem.patternId]?.templates.find((t) => t.id === slotItem.templateId);
1022
- if (!slottedTemplate) {
1023
- throw new Error(
1024
- `Could not find slotted template: ${slotItem.patternId} ${slotItem.templateId}`
1025
- );
1026
- }
1027
- const templateRefImport = await this.addUniqueValueToImportMap({
1028
- importMap,
1029
- path: slottedTemplate.path,
1030
- alias: slottedTemplate.alias || "default"
1041
+ const { usage: usage2, imports } = await this.getUsageAndImports({
1042
+ pattern: slotPattern,
1043
+ template: slotTemplate,
1044
+ patternManifest
1031
1045
  });
1032
- return templateRefImport.name;
1046
+ importInfos.push(...imports);
1047
+ return usage2;
1033
1048
  }
1034
1049
  if (slotItem.type === "template-demo") {
1035
- const thisDemo = slotItem.demo;
1036
- if (!thisDemo) {
1037
- throw new Error(
1038
- `Could not find slotted template demo ${JSON.stringify(
1039
- slotItem
1040
- )}`
1041
- );
1042
- }
1043
- const { usage: usage2 } = await this.getUsageAndImports({
1044
- patternId: thisDemo.patternId,
1045
- templateId: thisDemo.templateId,
1046
- demo: thisDemo,
1047
- state,
1048
- importMap
1050
+ const { usage: usage2, imports } = await this.getUsageAndImports({
1051
+ pattern: slotPattern,
1052
+ template: slotTemplate,
1053
+ demo: slotItem.demo || this.patterns.demosById[slotItem.demoId],
1054
+ patternManifest
1049
1055
  });
1056
+ importInfos.push(...imports);
1050
1057
  return usage2;
1051
1058
  }
1052
- const _exhaustiveCheck2 = slotItem;
1053
1059
  throw new Error(
1054
1060
  `Unknown slot item: ${JSON.stringify(slotItem)}`
1055
1061
  );
@@ -1108,25 +1114,50 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1108
1114
  });
1109
1115
  return {
1110
1116
  usage,
1111
- importMap
1117
+ imports: importInfos
1112
1118
  };
1113
1119
  }
1114
- if (demo.type === "template") {
1115
- const { templateInfo } = demo;
1116
- const { name: templateName } = await this.addUniqueValueToImportMap({
1117
- importMap,
1118
- path: templateInfo.path,
1119
- alias: templateInfo.alias || "default"
1120
+ if (demo?.type && demo.type === "template") {
1121
+ const importInfo = this.getJsImport({
1122
+ patternId: pattern.id,
1123
+ templateId: template.id,
1124
+ demoId: demo.id
1120
1125
  });
1126
+ if (!importInfo) {
1127
+ throw new Error(
1128
+ `Could not find import for pattern-template-demo: ${pattern.id}-${template.id}-${demo.id}`
1129
+ );
1130
+ }
1131
+ const { type, name: templateName } = importInfo.importInfo;
1121
1132
  const usage = await getUsage({ templateName });
1122
1133
  return {
1123
1134
  usage,
1124
- importMap
1135
+ imports: [importInfo]
1136
+ };
1137
+ }
1138
+ if (!demo) {
1139
+ const importInfo = this.getJsImport({
1140
+ patternId: pattern.id,
1141
+ templateId: template.id
1142
+ });
1143
+ if (!importInfo) {
1144
+ throw new Error(
1145
+ `Could not find import for pattern-template: ${pattern.id}-${template.id}`
1146
+ );
1147
+ }
1148
+ const { type, name: templateName } = importInfo.importInfo;
1149
+ return {
1150
+ /**
1151
+ * 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`
1152
+ * @see {KsSlotInfo['isTemplateReference']}
1153
+ * @see {SlottedTemplate}
1154
+ */
1155
+ usage: templateName,
1156
+ imports: [importInfo]
1125
1157
  };
1126
1158
  }
1127
- const _exhaustiveCheck = demo;
1128
1159
  throw new Error(
1129
- `Unhandled demo type for ${patternId}-${templateId}: ${JSON.stringify(
1160
+ `Unhandled demo type for ${pattern.id}-${template.id}: ${JSON.stringify(
1130
1161
  demo
1131
1162
  )}`
1132
1163
  );
@@ -1149,8 +1180,8 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1149
1180
  }
1150
1181
  return spec;
1151
1182
  }, "inferSpec");
1152
- watch = /* @__PURE__ */ __name(async () => {
1153
- super.watch();
1183
+ watch = /* @__PURE__ */ __name(async (opt) => {
1184
+ super.watch(opt);
1154
1185
  knapsackEvents.onPatternTemplateChanged(() => {
1155
1186
  clearInferSpecCache();
1156
1187
  });
@@ -1228,34 +1259,21 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1228
1259
  ];
1229
1260
  }, "alterTemplateMetaFiles");
1230
1261
  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
1231
- newPath,
1232
- state
1262
+ newPath
1233
1263
  }) => {
1234
- const usedSuggestions = Object.values(state.patterns).reduce(
1235
- (acc, { templateDemos, templates }) => {
1236
- templates.forEach(({ path: path3, alias, templateLanguageId }) => {
1237
- if (templateLanguageId !== this.id) return;
1238
- acc.push({ path: path3, alias });
1239
- });
1240
- templateDemos.forEach(
1241
- ({ templateInfo: { path: path3, alias }, templateLanguageId }) => {
1242
- if (templateLanguageId !== this.id) return;
1243
- acc.push({ path: path3, alias });
1244
- }
1245
- );
1246
- return acc;
1247
- },
1248
- []
1249
- );
1250
- const codeSrcs = new Set(this.getCodeSrcs());
1251
- codeSrcs.delete(this.demoWrapperPath);
1252
- codeSrcs.delete(errorCatcherPath);
1264
+ const { data: dataDir } = this.patterns.userConfig;
1265
+ const { allTemplateDemos, allTemplates } = this.getMyTemplates();
1266
+ const usedSuggestions = [
1267
+ ...allTemplateDemos,
1268
+ ...allTemplates
1269
+ ].map(({ path: path3, alias }) => {
1270
+ return {
1271
+ path: path3,
1272
+ alias: alias || "default"
1273
+ };
1274
+ });
1253
1275
  const allPaths = [
1254
- .../* @__PURE__ */ new Set([
1255
- newPath,
1256
- ...Object.keys(this.pkgPathAliases || {}),
1257
- ...codeSrcs
1258
- ])
1276
+ .../* @__PURE__ */ new Set([newPath, ...usedSuggestions.map(({ path: path3 }) => path3)])
1259
1277
  ];
1260
1278
  const allSuggestions = await Promise.all(
1261
1279
  allPaths.map(async (path3) => {
@@ -1263,7 +1281,7 @@ Please adjust setting in "knapsack.config.js" or pass a different path when crea
1263
1281
  try {
1264
1282
  const { exports, errorMsg } = await getJsExportNames2({
1265
1283
  path: path3,
1266
- resolveFromDir: this.dataDir,
1284
+ resolveFromDir: dataDir,
1267
1285
  pkgPathAliases: this.pkgPathAliases
1268
1286
  });
1269
1287
  if (errorMsg) {