@knapsack/renderer-react 4.70.0--canary.4821.ef34743.0 → 4.70.0--canary.4821.82d27e9.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/client/init.js +15 -66
- package/dist/client/init.js.map +1 -1
- package/dist/client/init.mjs +10 -71
- package/dist/client/init.mjs.map +1 -1
- package/dist/demo-wrapper.js +7 -27
- package/dist/demo-wrapper.js.map +1 -1
- package/dist/demo-wrapper.mjs +5 -9
- package/dist/demo-wrapper.mjs.map +1 -1
- package/dist/error-catcher.js +28 -94
- package/dist/error-catcher.js.map +1 -1
- package/dist/error-catcher.mjs +6 -66
- package/dist/error-catcher.mjs.map +1 -1
- package/dist/index.js +43 -1293
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +38 -1301
- package/dist/index.mjs.map +1 -1
- package/dist/prototype-template.js +5 -26
- package/dist/prototype-template.js.map +1 -1
- package/dist/prototype-template.mjs +3 -8
- package/dist/prototype-template.mjs.map +1 -1
- package/package.json +13 -13
package/dist/index.js
CHANGED
@@ -1,1304 +1,54 @@
|
|
1
|
-
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
8
|
-
var __export = (target, all) => {
|
9
|
-
for (var name in all)
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
-
};
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
-
for (let key of __getOwnPropNames(from))
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
-
}
|
18
|
-
return to;
|
19
|
-
};
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
-
mod
|
27
|
-
));
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
1
|
+
'use strict';
|
29
2
|
|
30
|
-
|
31
|
-
var
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
3
|
+
var ke = require('sleep-promise');
|
4
|
+
var rendererWebpackBase = require('@knapsack/renderer-webpack-base');
|
5
|
+
var utils = require('@knapsack/utils');
|
6
|
+
var app = require('@knapsack/app');
|
7
|
+
var renderers = require('@knapsack/app/renderers');
|
8
|
+
var types = require('@knapsack/types');
|
9
|
+
var fileUtils = require('@knapsack/file-utils');
|
10
|
+
var g = require('path');
|
11
|
+
var creatorUtils = require('@knapsack/creator-utils');
|
12
|
+
var ksFileUtils = require('@knapsack/ks-file-utils');
|
36
13
|
|
37
|
-
|
38
|
-
var import_sleep_promise = __toESM(require("sleep-promise"));
|
39
|
-
var import_renderer_webpack_base = require("@knapsack/renderer-webpack-base");
|
40
|
-
var import_utils3 = require("@knapsack/utils");
|
41
|
-
var import_app2 = require("@knapsack/app");
|
42
|
-
var import_renderers = require("@knapsack/app/renderers");
|
43
|
-
var import_types2 = require("@knapsack/types");
|
44
|
-
var import_file_utils3 = require("@knapsack/file-utils");
|
45
|
-
var import_path2 = require("path");
|
14
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
46
15
|
|
47
|
-
|
48
|
-
var
|
49
|
-
|
50
|
-
var
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
children
|
57
|
-
}) {
|
58
|
-
return `
|
59
|
-
<${templateName}
|
60
|
-
${attributes}
|
61
|
-
${children ? `>
|
62
|
-
${children}
|
63
|
-
</${templateName}>` : "/>"}
|
64
|
-
`;
|
65
|
-
}
|
66
|
-
__name(renderUsageTemplate, "renderUsageTemplate");
|
67
|
-
var demoAppName = "DemoApp";
|
68
|
-
function renderDemoAppTemplate({
|
69
|
-
imports = "",
|
70
|
-
children
|
71
|
-
}) {
|
72
|
-
return `${imports}
|
16
|
+
var ke__default = /*#__PURE__*/_interopDefault(ke);
|
17
|
+
var g__default = /*#__PURE__*/_interopDefault(g);
|
18
|
+
|
19
|
+
var Y=Object.defineProperty;var l=(s,t)=>Y(s,"name",{value:t,configurable:!0}),D=(s=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(s,{get:(t,e)=>(typeof require<"u"?require:t)[e]}):s)(function(s){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+s+'" is not supported')});function se({templateName:s,attributes:t,children:e}){return `
|
20
|
+
<${s}
|
21
|
+
${t}
|
22
|
+
${e?`>
|
23
|
+
${e}
|
24
|
+
</${s}>`:"/>"}
|
25
|
+
`}l(se,"renderUsageTemplate");var E="DemoApp";function ae({imports:s="",children:t}){return `${s}
|
73
26
|
|
74
|
-
function ${
|
27
|
+
function ${E}() {
|
75
28
|
return (
|
76
|
-
${
|
29
|
+
${t}
|
77
30
|
)
|
78
31
|
}
|
79
|
-
`;
|
80
|
-
}
|
81
|
-
|
82
|
-
async function getUsage(data) {
|
83
|
-
const props = Object.keys(data.props || {}).map((key) => {
|
84
|
-
const value = data.props[key];
|
85
|
-
return {
|
86
|
-
key,
|
87
|
-
value
|
88
|
-
};
|
89
|
-
});
|
90
|
-
const { templateName, children, extraProps = [] } = data;
|
91
|
-
if (!templateName) {
|
92
|
-
throw new Error(
|
93
|
-
`Cannot getUsage of a React Component when no "templateName" is provided.`
|
94
|
-
);
|
95
|
-
}
|
96
|
-
const attributes = props.map(({ key, value }) => {
|
97
|
-
switch (typeof value) {
|
98
|
-
case "string":
|
99
|
-
if (value.startsWith("(") && value.includes("=>")) {
|
100
|
-
return `${key}={${value}}`;
|
101
|
-
}
|
102
|
-
return `${key}="${value}"`;
|
103
|
-
case "boolean":
|
104
|
-
return value ? `${key}` : `${key}={${value}}`;
|
105
|
-
default:
|
106
|
-
return `${key}={${JSON.stringify(value)}}`;
|
107
|
-
}
|
108
|
-
});
|
109
|
-
const extraAttributes = [];
|
110
|
-
const slotProps = {};
|
111
|
-
extraProps.forEach(({ key, value }) => {
|
112
|
-
slotProps[key] = slotProps[key] ?? [];
|
113
|
-
slotProps[key].push(value);
|
114
|
-
});
|
115
|
-
Object.entries(slotProps).forEach(([key, values]) => {
|
116
|
-
const value = values.length === 1 ? values[0] : `<>${values.join("\n")}</>`;
|
117
|
-
extraAttributes.push(`${key}={${value}}`);
|
118
|
-
});
|
119
|
-
const result = renderUsageTemplate({
|
120
|
-
templateName,
|
121
|
-
attributes: [...attributes, ...extraAttributes].join(" "),
|
122
|
-
children
|
123
|
-
});
|
124
|
-
return data.format ? (0, import_file_utils.formatCode)({
|
125
|
-
contents: result,
|
126
|
-
path: "x.tsx"
|
127
|
-
// doing this to set format language
|
128
|
-
}).then((code) => code.trim()).catch(() => result.trim()) : result.trim();
|
129
|
-
}
|
130
|
-
__name(getUsage, "getUsage");
|
131
|
-
async function getDemoAppUsage({
|
132
|
-
children,
|
133
|
-
imports,
|
134
|
-
format
|
135
|
-
}) {
|
136
|
-
const code = renderDemoAppTemplate({
|
137
|
-
children,
|
138
|
-
imports
|
139
|
-
});
|
140
|
-
if (!format) return code;
|
141
|
-
return (0, import_file_utils.formatCode)({
|
142
|
-
contents: code,
|
143
|
-
path: "x.tsx"
|
144
|
-
// doing this to set format language
|
145
|
-
});
|
146
|
-
}
|
147
|
-
__name(getDemoAppUsage, "getDemoAppUsage");
|
148
|
-
async function getTypeScriptInfoFromFile({ src }) {
|
149
|
-
const tsConfigPath = await (0, import_file_utils.findUp)("tsconfig.json", {
|
150
|
-
cwd: import_path.default.dirname(src)
|
151
|
-
});
|
152
|
-
const rdTs = await import("react-docgen-typescript");
|
153
|
-
const config = {
|
154
|
-
shouldExtractLiteralValuesFromEnum: true,
|
155
|
-
savePropValueAsString: true,
|
156
|
-
skipChildrenPropWithoutDoc: false,
|
157
|
-
// In addition to the ones listed here, which had not strangely included these below ~ https://github.com/styleguidist/react-docgen-typescript/blob/287e7012843cb26fed8f4bd8ee24e462c25a1414/src/parser.ts#L308
|
158
|
-
customComponentTypes: ["VoidFunctionComponent", "VFC"]
|
159
|
-
};
|
160
|
-
const parse2 = tsConfigPath ? rdTs.withCustomConfig(tsConfigPath, config).parse : rdTs.withDefaultConfig(config).parse;
|
161
|
-
return {
|
162
|
-
info: parse2(src)
|
163
|
-
};
|
164
|
-
}
|
165
|
-
__name(getTypeScriptInfoFromFile, "getTypeScriptInfoFromFile");
|
166
|
-
function extractSpecFromTypeScriptInfo({
|
167
|
-
info: results,
|
168
|
-
exportName
|
169
|
-
}) {
|
170
|
-
try {
|
171
|
-
if (!results) return false;
|
172
|
-
const spec = {
|
173
|
-
props: {
|
174
|
-
$schema: "http://json-schema.org/draft-07/schema",
|
175
|
-
type: "object",
|
176
|
-
required: [],
|
177
|
-
properties: {}
|
178
|
-
},
|
179
|
-
slots: {
|
180
|
-
// children: {
|
181
|
-
// title: 'children',
|
182
|
-
// },
|
183
|
-
}
|
184
|
-
};
|
185
|
-
const isDefaultExport = !exportName || exportName === "default";
|
186
|
-
const result = isDefaultExport ? results.pop() : results.find((r) => r.displayName === exportName);
|
187
|
-
if (!result) return false;
|
188
|
-
const { displayName } = result;
|
189
|
-
Object.entries(result?.props || {}).forEach(([propName, propDef]) => {
|
190
|
-
const { name, description, defaultValue, required, type, parent } = propDef;
|
191
|
-
const propType = type?.name?.replace("| undefined", "").replace(/<.*/g, "").trim();
|
192
|
-
switch (propType) {
|
193
|
-
case "string":
|
194
|
-
spec.props.properties[propName] = {
|
195
|
-
type: "string"
|
196
|
-
};
|
197
|
-
break;
|
198
|
-
case "number":
|
199
|
-
spec.props.properties[propName] = {
|
200
|
-
type: "number"
|
201
|
-
};
|
202
|
-
break;
|
203
|
-
case "boolean":
|
204
|
-
case "bool":
|
205
|
-
if (defaultValue && "value" in defaultValue) {
|
206
|
-
defaultValue.value = defaultValue.value === "true";
|
207
|
-
}
|
208
|
-
spec.props.properties[propName] = {
|
209
|
-
type: "boolean"
|
210
|
-
};
|
211
|
-
break;
|
212
|
-
case "enum":
|
213
|
-
spec.props.properties[propName] = {
|
214
|
-
type: "string",
|
215
|
-
// yes there is a double "value" & yes it is confusing
|
216
|
-
enum: [
|
217
|
-
// ensure list is unique
|
218
|
-
...new Set(
|
219
|
-
type.value.map(({ value }) => (0, import_utils.removeWrappingDoubleQuotes)(value?.trim())).filter(Boolean)
|
220
|
-
)
|
221
|
-
]
|
222
|
-
};
|
223
|
-
break;
|
224
|
-
case "ReactNode":
|
225
|
-
case "React.ReactNode":
|
226
|
-
case "React.ReactElement":
|
227
|
-
case "ReactElement":
|
228
|
-
spec.slots[propName] = {
|
229
|
-
title: propName
|
230
|
-
};
|
231
|
-
if (description) {
|
232
|
-
spec.slots[propName] = {
|
233
|
-
...spec.slots[propName],
|
234
|
-
description
|
235
|
-
};
|
236
|
-
}
|
237
|
-
break;
|
238
|
-
case "VFC":
|
239
|
-
case "FC":
|
240
|
-
spec.slots[propName] = {
|
241
|
-
title: propName,
|
242
|
-
description: description || "A reference to a component",
|
243
|
-
isTemplateReference: true,
|
244
|
-
allowOnlyOne: true,
|
245
|
-
disallowText: true
|
246
|
-
};
|
247
|
-
break;
|
248
|
-
default: {
|
249
|
-
if (type?.name?.startsWith("(")) {
|
250
|
-
spec.props.properties[propName] = {
|
251
|
-
// description: `\`${type.name}\` ${description}`,
|
252
|
-
typeof: "function",
|
253
|
-
tsType: propDef?.type?.name
|
254
|
-
};
|
255
|
-
} else if (type?.name?.includes("|")) {
|
256
|
-
const options = type.name.split("|").map((enumItem) => (0, import_utils.removeWrappingDoubleQuotes)(enumItem.trim())).filter(Boolean);
|
257
|
-
if (options?.length) {
|
258
|
-
spec.props.properties[propName] = {
|
259
|
-
type: "string",
|
260
|
-
// ensuring list is unique
|
261
|
-
enum: [...new Set(options)]
|
262
|
-
};
|
263
|
-
}
|
264
|
-
} else {
|
265
|
-
spec.props.properties[propName] = {
|
266
|
-
tsType: propDef?.type?.name
|
267
|
-
};
|
268
|
-
}
|
269
|
-
}
|
270
|
-
}
|
271
|
-
if (spec.props.properties[propName]) {
|
272
|
-
if (required) spec.props.required.push(propName);
|
273
|
-
if (description && !spec.props.properties[propName].description) {
|
274
|
-
spec.props.properties[propName].description = description;
|
275
|
-
}
|
276
|
-
if (defaultValue && "value" in defaultValue) {
|
277
|
-
if ((0, import_types.isNumberProp)(spec.props.properties[propName])) {
|
278
|
-
spec.props.properties[propName].default = parseFloat(
|
279
|
-
defaultValue.value
|
280
|
-
);
|
281
|
-
} else {
|
282
|
-
spec.props.properties[propName].default = (0, import_utils.removeWrappingDoubleQuotes)(defaultValue.value);
|
283
|
-
}
|
284
|
-
}
|
285
|
-
}
|
286
|
-
});
|
287
|
-
return spec;
|
288
|
-
} catch (error) {
|
289
|
-
import_app.log.verbose(
|
290
|
-
"Could not infer spec from React TypeScript file",
|
291
|
-
{
|
292
|
-
exportName,
|
293
|
-
error
|
294
|
-
},
|
295
|
-
"react renderer"
|
296
|
-
);
|
297
|
-
return false;
|
298
|
-
}
|
299
|
-
}
|
300
|
-
__name(extractSpecFromTypeScriptInfo, "extractSpecFromTypeScriptInfo");
|
301
|
-
async function getPropTypesInfoFromFile({ src }) {
|
302
|
-
const reactDocs = await import("react-docgen");
|
303
|
-
const { builtinResolvers } = reactDocs;
|
304
|
-
const fileSrc = await (0, import_file_utils.readFile)(src);
|
305
|
-
const { FindExportedDefinitionsResolver } = builtinResolvers;
|
306
|
-
const results = reactDocs.parse(fileSrc, {
|
307
|
-
resolver: new FindExportedDefinitionsResolver(),
|
308
|
-
handlers: null,
|
309
|
-
filename: src
|
310
|
-
// babelrc: false,
|
311
|
-
});
|
312
|
-
return {
|
313
|
-
info: results
|
314
|
-
};
|
315
|
-
}
|
316
|
-
__name(getPropTypesInfoFromFile, "getPropTypesInfoFromFile");
|
317
|
-
function extractSpecFromPropTypesInfo({
|
318
|
-
info: results,
|
319
|
-
exportName
|
320
|
-
}) {
|
321
|
-
try {
|
322
|
-
const isDefaultExport = !exportName || exportName === "default";
|
323
|
-
const result = isDefaultExport ? results.pop() : results.find((r) => r.displayName === exportName);
|
324
|
-
const spec = {
|
325
|
-
isInferred: true,
|
326
|
-
props: {
|
327
|
-
$schema: "http://json-schema.org/draft-07/schema",
|
328
|
-
type: "object",
|
329
|
-
required: [],
|
330
|
-
properties: {}
|
331
|
-
},
|
332
|
-
slots: {}
|
333
|
-
};
|
334
|
-
Object.entries(result?.props || {}).forEach(([propName, propDef]) => {
|
335
|
-
const { required, description, defaultValue } = propDef;
|
336
|
-
switch (propDef?.type?.name) {
|
337
|
-
case "string":
|
338
|
-
spec.props.properties[propName] = {
|
339
|
-
type: "string"
|
340
|
-
};
|
341
|
-
break;
|
342
|
-
case "func":
|
343
|
-
spec.props.properties[propName] = {
|
344
|
-
type: "string"
|
345
|
-
};
|
346
|
-
break;
|
347
|
-
case "bool":
|
348
|
-
spec.props.properties[propName] = {
|
349
|
-
type: "boolean"
|
350
|
-
};
|
351
|
-
break;
|
352
|
-
case "node":
|
353
|
-
spec.slots[propName] = {
|
354
|
-
title: propName,
|
355
|
-
description
|
356
|
-
};
|
357
|
-
}
|
358
|
-
if (spec.props.properties[propName]) {
|
359
|
-
if (required) spec.props.required.push(propName);
|
360
|
-
if (description && !spec.props.properties[propName].description) {
|
361
|
-
spec.props.properties[propName].description = description;
|
362
|
-
}
|
363
|
-
if (defaultValue && "value" in defaultValue) {
|
364
|
-
spec.props.properties[propName].default = typeof defaultValue.value === "string" ? (0, import_utils.removeWrappingDoubleQuotes)(defaultValue.value) : defaultValue.value;
|
365
|
-
}
|
366
|
-
}
|
367
|
-
});
|
368
|
-
return spec;
|
369
|
-
} catch (error) {
|
370
|
-
import_app.log.verbose(
|
371
|
-
"Could not infer spec from React PropTypes",
|
372
|
-
{
|
373
|
-
exportName,
|
374
|
-
error
|
375
|
-
},
|
376
|
-
"react renderer"
|
377
|
-
);
|
378
|
-
return false;
|
379
|
-
}
|
380
|
-
}
|
381
|
-
__name(extractSpecFromPropTypesInfo, "extractSpecFromPropTypesInfo");
|
382
|
-
function cleanUpSpec({
|
383
|
-
spec
|
384
|
-
}) {
|
385
|
-
if (spec === false) return spec;
|
386
|
-
Object.entries(spec?.props?.properties || {}).forEach(([propName, prop]) => {
|
387
|
-
if ((0, import_types.isOptionsProp)(prop)) {
|
388
|
-
if (!prop.enum.includes(prop.default)) {
|
389
|
-
prop.default = void 0;
|
390
|
-
}
|
391
|
-
}
|
392
|
-
});
|
393
|
-
return spec;
|
394
|
-
}
|
395
|
-
__name(cleanUpSpec, "cleanUpSpec");
|
396
|
-
async function getReactModuleInfoUncached({
|
397
|
-
src: unknownSrc,
|
398
|
-
resolveFromDir
|
399
|
-
}) {
|
400
|
-
const typesInfo = await (0, import_file_utils.resolvePath)({
|
401
|
-
path: unknownSrc,
|
402
|
-
resolveFromDir,
|
403
|
-
resolveType: "types"
|
404
|
-
});
|
405
|
-
if (typesInfo.exists) {
|
406
|
-
const typeScriptInfo = await getTypeScriptInfoFromFile({
|
407
|
-
src: typesInfo.absolutePath
|
408
|
-
});
|
409
|
-
if (typeScriptInfo) {
|
410
|
-
return {
|
411
|
-
type: "typescript",
|
412
|
-
info: typeScriptInfo.info
|
413
|
-
};
|
414
|
-
}
|
415
|
-
}
|
416
|
-
const jsInfo = await (0, import_file_utils.resolvePath)({
|
417
|
-
path: unknownSrc,
|
418
|
-
resolveFromDir
|
419
|
-
});
|
420
|
-
if (!jsInfo.exists) return { type: "unknown" };
|
421
|
-
const { ext } = import_path.default.parse(jsInfo.absolutePath);
|
422
|
-
switch (ext) {
|
423
|
-
case ".jsx": {
|
424
|
-
const propTypesInfo = await getPropTypesInfoFromFile({
|
425
|
-
src: jsInfo.absolutePath
|
426
|
-
});
|
427
|
-
return {
|
428
|
-
type: "propTypes",
|
429
|
-
info: propTypesInfo.info
|
430
|
-
};
|
431
|
-
}
|
432
|
-
case ".ts":
|
433
|
-
case ".tsx": {
|
434
|
-
const typeScriptInfo = await getTypeScriptInfoFromFile({
|
435
|
-
src: jsInfo.absolutePath
|
436
|
-
});
|
437
|
-
return {
|
438
|
-
type: "typescript",
|
439
|
-
info: typeScriptInfo.info
|
440
|
-
};
|
441
|
-
}
|
442
|
-
default:
|
443
|
-
return {
|
444
|
-
type: "unknown"
|
445
|
-
};
|
446
|
-
}
|
447
|
-
}
|
448
|
-
__name(getReactModuleInfoUncached, "getReactModuleInfoUncached");
|
449
|
-
var getReactModuleInfoCache = /* @__PURE__ */ new Map();
|
450
|
-
var clearInferSpecCache = /* @__PURE__ */ __name(() => {
|
451
|
-
import_app.log.info(`Clearing React TypeScript inferSpec cache...`);
|
452
|
-
getReactModuleInfoCache.clear();
|
453
|
-
}, "clearInferSpecCache");
|
454
|
-
async function getReactModuleInfo(args) {
|
455
|
-
const cacheKey = JSON.stringify(args);
|
456
|
-
if (!getReactModuleInfoCache.has(cacheKey)) {
|
457
|
-
getReactModuleInfoCache.set(cacheKey, getReactModuleInfoUncached(args));
|
458
|
-
}
|
459
|
-
return getReactModuleInfoCache.get(cacheKey);
|
460
|
-
}
|
461
|
-
__name(getReactModuleInfo, "getReactModuleInfo");
|
462
|
-
async function getReactSpec({
|
463
|
-
src,
|
464
|
-
exportName,
|
465
|
-
resolveFromDir
|
466
|
-
}) {
|
467
|
-
const reactModuleInfo = await getReactModuleInfo({
|
468
|
-
src,
|
469
|
-
resolveFromDir
|
470
|
-
});
|
471
|
-
switch (reactModuleInfo.type) {
|
472
|
-
case "typescript":
|
473
|
-
return extractSpecFromTypeScriptInfo({
|
474
|
-
info: reactModuleInfo.info,
|
475
|
-
exportName
|
476
|
-
});
|
477
|
-
case "propTypes":
|
478
|
-
return extractSpecFromPropTypesInfo({
|
479
|
-
info: reactModuleInfo.info,
|
480
|
-
exportName
|
481
|
-
});
|
482
|
-
case "unknown":
|
483
|
-
default:
|
484
|
-
return false;
|
485
|
-
}
|
486
|
-
}
|
487
|
-
__name(getReactSpec, "getReactSpec");
|
488
|
-
async function getReactDocs(opt) {
|
489
|
-
return cleanUpSpec({
|
490
|
-
spec: await getReactSpec(opt)
|
491
|
-
});
|
492
|
-
}
|
493
|
-
__name(getReactDocs, "getReactDocs");
|
494
|
-
async function copyReactAssets(distDirAbsolute, publicPath) {
|
495
|
-
try {
|
496
|
-
const { version: reactVersion } = (0, import_file_utils.getModulePkgJson)("react");
|
497
|
-
const { version: reactDomVersion } = (0, import_file_utils.getModulePkgJson)("react-dom");
|
498
|
-
const reactRoot = import_path.default.dirname(
|
499
|
-
require.resolve("react", {
|
500
|
-
paths: [process.cwd()]
|
501
|
-
})
|
502
|
-
);
|
503
|
-
const reactDomRoot = import_path.default.dirname(
|
504
|
-
require.resolve("react-dom", {
|
505
|
-
paths: [process.cwd()]
|
506
|
-
})
|
507
|
-
);
|
508
|
-
await Promise.all([
|
509
|
-
(0, import_file_utils.copy)(
|
510
|
-
import_path.default.join(reactRoot, "umd/react.development.js"),
|
511
|
-
import_path.default.join(distDirAbsolute, `react.development.${reactVersion}.js`)
|
512
|
-
),
|
513
|
-
(0, import_file_utils.copy)(
|
514
|
-
import_path.default.join(reactRoot, "umd/react.production.min.js"),
|
515
|
-
import_path.default.join(distDirAbsolute, `react.production.min.${reactVersion}.js`)
|
516
|
-
),
|
517
|
-
(0, import_file_utils.copy)(
|
518
|
-
import_path.default.join(reactDomRoot, "umd/react-dom.production.min.js"),
|
519
|
-
import_path.default.join(
|
520
|
-
distDirAbsolute,
|
521
|
-
`react-dom.production.min.${reactDomVersion}.js`
|
522
|
-
)
|
523
|
-
),
|
524
|
-
(0, import_file_utils.copy)(
|
525
|
-
import_path.default.join(reactDomRoot, "umd/react-dom.development.js"),
|
526
|
-
import_path.default.join(
|
527
|
-
distDirAbsolute,
|
528
|
-
`react-dom.development.${reactDomVersion}.js`
|
529
|
-
)
|
530
|
-
)
|
531
|
-
]);
|
532
|
-
const reactFileSuffix = process.env.NODE_ENV === "production" ? "production.min" : "development";
|
533
|
-
return [
|
534
|
-
import_path.default.join(publicPath, `react.${reactFileSuffix}.${reactVersion}.js`),
|
535
|
-
import_path.default.join(
|
536
|
-
publicPath,
|
537
|
-
`react-dom.${reactFileSuffix}.${reactDomVersion}.js`
|
538
|
-
)
|
539
|
-
];
|
540
|
-
} catch (error) {
|
541
|
-
import_app.log.warn(
|
542
|
-
'Error trying to copy "react" and "react-dom" JS files, are they installed? We want to use your exact versions.',
|
543
|
-
error,
|
544
|
-
"templateRenderer:react"
|
545
|
-
);
|
546
|
-
process.exit(1);
|
547
|
-
}
|
548
|
-
}
|
549
|
-
__name(copyReactAssets, "copyReactAssets");
|
550
|
-
|
551
|
-
// src/react-creators.ts
|
552
|
-
var import_file_utils2 = require("@knapsack/file-utils");
|
553
|
-
var import_creator_utils = require("@knapsack/creator-utils");
|
554
|
-
var import_ks_file_utils = require("@knapsack/ks-file-utils");
|
555
|
-
var import_utils2 = require("@knapsack/utils");
|
556
|
-
function isCapitalLetter(char) {
|
557
|
-
return char.toUpperCase() === char;
|
558
|
-
}
|
559
|
-
__name(isCapitalLetter, "isCapitalLetter");
|
560
|
-
function startsWithCapitalLetter(str) {
|
561
|
-
return isCapitalLetter(str[0]);
|
562
|
-
}
|
563
|
-
__name(startsWithCapitalLetter, "startsWithCapitalLetter");
|
564
|
-
function createPatternData({
|
565
|
-
importName,
|
566
|
-
id,
|
567
|
-
title = importName,
|
568
|
-
pkgPath,
|
569
|
-
initialDemoId
|
570
|
-
}) {
|
571
|
-
return {
|
572
|
-
id,
|
573
|
-
title,
|
574
|
-
description: "",
|
575
|
-
statuses: {
|
576
|
-
main: "ready"
|
577
|
-
},
|
578
|
-
templates: [
|
579
|
-
{
|
580
|
-
id: "react",
|
581
|
-
title: "react",
|
582
|
-
path: pkgPath,
|
583
|
-
alias: importName,
|
584
|
-
templateLanguageId: "react",
|
585
|
-
spec: {
|
586
|
-
isInferred: true
|
587
|
-
},
|
588
|
-
demoIds: [initialDemoId],
|
589
|
-
blockIds: []
|
590
|
-
}
|
591
|
-
],
|
592
|
-
tabs: [
|
593
|
-
{
|
594
|
-
type: "template",
|
595
|
-
id: "react"
|
596
|
-
}
|
597
|
-
],
|
598
|
-
subPages: []
|
599
|
-
};
|
600
|
-
}
|
601
|
-
__name(createPatternData, "createPatternData");
|
602
|
-
var createReactPattern = (0, import_creator_utils.createCreator)({
|
603
|
-
id: "react-patterns",
|
604
|
-
title: "React Ks Patterns",
|
605
|
-
description: "Adds React templates as Knapsack Patterns",
|
606
|
-
getQuestions: /* @__PURE__ */ __name(async () => ({
|
607
|
-
pkgPath: {
|
608
|
-
type: "text",
|
609
|
-
title: "Package path"
|
610
|
-
},
|
611
|
-
importPrefix: {
|
612
|
-
type: "text",
|
613
|
-
title: "Import Prefix to Remove"
|
614
|
-
}
|
615
|
-
}), "getQuestions"),
|
616
|
-
getTasks: /* @__PURE__ */ __name(async ({ answers: { pkgPath, importPrefix = "" }, config }) => {
|
617
|
-
const dataDir = config.dest;
|
618
|
-
const currentPatterns = await (0, import_ks_file_utils.readKsPatternConfigs)({
|
619
|
-
dataDir
|
620
|
-
});
|
621
|
-
const currentReactPatternsImportNames = currentPatterns.reduce(
|
622
|
-
(cur, pattern) => {
|
623
|
-
const reactTemplates = pattern.templates?.filter((t) => t.templateLanguageId === "react") ?? [];
|
624
|
-
cur.push(...reactTemplates.map((t) => t.alias));
|
625
|
-
return cur;
|
626
|
-
},
|
627
|
-
[]
|
628
|
-
);
|
629
|
-
const { exports: allImports } = await (0, import_file_utils2.getJsExportNames)({
|
630
|
-
path: pkgPath
|
631
|
-
});
|
632
|
-
return [
|
633
|
-
{
|
634
|
-
title: "Pick Imports to add",
|
635
|
-
task: /* @__PURE__ */ __name((_, task) => import_creator_utils.tasks.runSubCreator({
|
636
|
-
task,
|
637
|
-
config,
|
638
|
-
creator: (0, import_creator_utils.createCreator)({
|
639
|
-
id: "react-pattern-import-names",
|
640
|
-
getQuestions: /* @__PURE__ */ __name(async () => ({
|
641
|
-
importNames: {
|
642
|
-
type: "choices",
|
643
|
-
choices: allImports.filter(
|
644
|
-
(importName) => startsWithCapitalLetter(importName) && !currentReactPatternsImportNames.includes(importName)
|
645
|
-
).map((importName) => ({
|
646
|
-
value: importName
|
647
|
-
}))
|
648
|
-
}
|
649
|
-
}), "getQuestions"),
|
650
|
-
getTasks: /* @__PURE__ */ __name(async ({ answers: { importNames } }) => {
|
651
|
-
const patterns = importNames.map((importName) => ({
|
652
|
-
importName,
|
653
|
-
patternId: importName.startsWith(importPrefix) ? importName.slice(importPrefix.length).toLowerCase() : importName.toLowerCase()
|
654
|
-
}));
|
655
|
-
return [
|
656
|
-
...patterns.map(
|
657
|
-
({ importName, patternId }) => ({
|
658
|
-
title: `Add ${importName} React Template`,
|
659
|
-
task: /* @__PURE__ */ __name(async (__, subTask) => {
|
660
|
-
const initialDemo = {
|
661
|
-
type: "data",
|
662
|
-
id: (0, import_utils2.makeShortId)(),
|
663
|
-
title: "Main",
|
664
|
-
patternId,
|
665
|
-
templateId: "react",
|
666
|
-
data: {
|
667
|
-
props: {},
|
668
|
-
slots: {}
|
669
|
-
}
|
670
|
-
};
|
671
|
-
const pattern = createPatternData({
|
672
|
-
id: patternId,
|
673
|
-
importName,
|
674
|
-
pkgPath,
|
675
|
-
initialDemoId: initialDemo.id
|
676
|
-
});
|
677
|
-
await Promise.all([
|
678
|
-
(0, import_ks_file_utils.writeDemo)({
|
679
|
-
dataDir,
|
680
|
-
demo: initialDemo
|
681
|
-
}),
|
682
|
-
(0, import_ks_file_utils.writeKsPatternConfig)({
|
683
|
-
dataDir,
|
684
|
-
patternId,
|
685
|
-
data: pattern
|
686
|
-
})
|
687
|
-
]);
|
688
|
-
}, "task")
|
689
|
-
})
|
690
|
-
),
|
691
|
-
{
|
692
|
-
title: `Updating Nav`,
|
693
|
-
task: /* @__PURE__ */ __name(async (__, subTask) => {
|
694
|
-
const { byId } = await (0, import_ks_file_utils.readKsNavConfig)({
|
695
|
-
dataDir
|
696
|
-
});
|
697
|
-
const componentsGroup = Object.values(byId).find(
|
698
|
-
({ path: path2, name, id }) => {
|
699
|
-
if (path2) return false;
|
700
|
-
if (name.toLowerCase() === "patterns") return true;
|
701
|
-
if (name.toLowerCase() === "components") return true;
|
702
|
-
return false;
|
703
|
-
}
|
704
|
-
);
|
705
|
-
await (0, import_ks_file_utils.addKsNavItems)({
|
706
|
-
dataDir,
|
707
|
-
navItems: patterns.map(({ patternId }) => ({
|
708
|
-
navId: patternId,
|
709
|
-
navPath: `/pattern/${patternId}`,
|
710
|
-
navParent: componentsGroup?.id || "root"
|
711
|
-
}))
|
712
|
-
});
|
713
|
-
}, "task")
|
714
|
-
}
|
715
|
-
];
|
716
|
-
}, "getTasks")
|
717
|
-
})
|
718
|
-
}), "task")
|
719
|
-
}
|
720
|
-
];
|
721
|
-
}, "getTasks")
|
722
|
-
});
|
723
|
-
|
724
|
-
// src/types.ts
|
725
|
-
var rendererMetaScriptTagId = "ks-react-meta";
|
726
|
-
|
727
|
-
// src/renderer-react.ts
|
728
|
-
var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
|
729
|
-
import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
|
730
|
-
var errorCatcherAbsolutePath = (0, import_path2.join)(__dirname, "./error-catcher.mjs");
|
731
|
-
if (!(0, import_file_utils3.exists)(errorCatcherAbsolutePath)) {
|
732
|
-
throw new Error(
|
733
|
-
`Could not find error catcher at: ${errorCatcherAbsolutePath}`
|
734
|
-
);
|
735
|
-
}
|
736
|
-
var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
|
737
|
-
static {
|
738
|
-
__name(this, "KnapsackReactRenderer");
|
739
|
-
}
|
740
|
-
/**
|
741
|
-
* `react.js` & `react-dom.js` root relative paths
|
742
|
-
*/
|
743
|
-
assets;
|
744
|
-
babelConfig;
|
745
|
-
#demoWrapperPath;
|
746
|
-
#disableReactStrictMode;
|
747
|
-
constructor({
|
748
|
-
webpackConfig,
|
749
|
-
demoWrapperPath = (0, import_path2.join)(__dirname, "./demo-wrapper.mjs"),
|
750
|
-
id = import_types2.rendererIds.react,
|
751
|
-
disableReactStrictMode
|
752
|
-
} = {}) {
|
753
|
-
super({
|
754
|
-
id,
|
755
|
-
language: "jsx",
|
756
|
-
webpackConfig,
|
757
|
-
extraScripts: [
|
758
|
-
// this is the code in `./client/init.mts`
|
759
|
-
"@knapsack/renderer-react/client"
|
760
|
-
]
|
761
|
-
});
|
762
|
-
this.language = "jsx";
|
763
|
-
this.assets = [];
|
764
|
-
this.#demoWrapperPath = demoWrapperPath;
|
765
|
-
this.#disableReactStrictMode = disableReactStrictMode;
|
766
|
-
this.creators = [createReactPattern];
|
767
|
-
}
|
768
|
-
setConfig = /* @__PURE__ */ __name((opt) => {
|
769
|
-
super.setConfig(opt);
|
770
|
-
const {
|
771
|
-
absolutePath,
|
772
|
-
exists: demoWrapperPathExists,
|
773
|
-
type
|
774
|
-
} = this.resolvePathSync({
|
775
|
-
path: this.#demoWrapperPath,
|
776
|
-
resolveFromDir: this.userConfigDir
|
777
|
-
});
|
778
|
-
if (!demoWrapperPathExists) {
|
779
|
-
throw new Error(
|
780
|
-
`Could not find demo wrapper at: "${this.#demoWrapperPath}"
|
781
|
-
Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`
|
782
|
-
);
|
783
|
-
}
|
784
|
-
this.registerExtraJsImports({
|
785
|
-
DemoWrapper: {
|
786
|
-
exportName: "DemoWrapper",
|
787
|
-
isDefaultExport: true,
|
788
|
-
path: type === "package" ? this.#demoWrapperPath : absolutePath
|
789
|
-
},
|
790
|
-
ErrorCatcher: {
|
791
|
-
exportName: "ErrorCatcher",
|
792
|
-
isDefaultExport: true,
|
793
|
-
path: errorCatcherAbsolutePath
|
794
|
-
}
|
795
|
-
});
|
796
|
-
}, "setConfig");
|
797
|
-
init = /* @__PURE__ */ __name(async () => {
|
798
|
-
this.assets = await copyReactAssets(this.outputDir, this.publicPath);
|
799
|
-
}, "init");
|
800
|
-
hydrate = /* @__PURE__ */ __name(async (opt) => {
|
801
|
-
await super.hydrate(opt);
|
802
|
-
await this.init({ missingFileVerbosity: "silent" });
|
803
|
-
}, "hydrate");
|
804
|
-
getMeta = /* @__PURE__ */ __name(() => ({
|
805
|
-
id: this.id,
|
806
|
-
title: "React",
|
807
|
-
aliasUse: "optional",
|
808
|
-
aliasTitle: "Named Export",
|
809
|
-
aliasIsJsNamedExport: true,
|
810
|
-
aliasDescription: "If `export X` was used instead of `export default`, then provide X.",
|
811
|
-
enableDataDemos: true,
|
812
|
-
enableTemplateDemos: true,
|
813
|
-
hasSlotsSupport: true,
|
814
|
-
hasSlotOptionsSupport: true,
|
815
|
-
version: pkg.version,
|
816
|
-
hasInferSpecSupport: true,
|
817
|
-
syntaxHighlightingLanguage: "jsx",
|
818
|
-
hasTemplateSuggestionsSupport: true,
|
819
|
-
prototypingTemplate: {
|
820
|
-
path: "@knapsack/renderer-react/prototype-template",
|
821
|
-
spec: {
|
822
|
-
isInferred: false,
|
823
|
-
props: {
|
824
|
-
type: "object",
|
825
|
-
properties: {}
|
826
|
-
},
|
827
|
-
slots: {
|
828
|
-
children: { title: "Children" }
|
829
|
-
}
|
830
|
-
}
|
831
|
-
}
|
832
|
-
}), "getMeta");
|
833
|
-
changeCase = /* @__PURE__ */ __name((str) => (0, import_utils3.pascalCase)(str), "changeCase");
|
834
|
-
createWebpackConfig = /* @__PURE__ */ __name(() => {
|
835
|
-
const config = super.createWebpackConfig();
|
836
|
-
config.externals = {
|
837
|
-
react: "React",
|
838
|
-
"react-dom": "ReactDOM"
|
839
|
-
};
|
840
|
-
return config;
|
841
|
-
}, "createWebpackConfig");
|
842
|
-
async prepClientRenderResults({
|
843
|
-
usage,
|
844
|
-
demoApp,
|
845
|
-
importMap,
|
846
|
-
renderOptions: { demo, state, patternId, templateId }
|
847
|
-
}) {
|
848
|
-
const meta = {
|
849
|
-
demo,
|
850
|
-
disableReactStrictMode: this.#disableReactStrictMode,
|
851
|
-
neededImportsByCodeSrcId: (0, import_renderer_webpack_base.convertImportMapToNeededImportsByCodeSrcId)(importMap),
|
852
|
-
demoWrapperProps: {
|
853
|
-
patternId,
|
854
|
-
templateId,
|
855
|
-
demo
|
856
|
-
}
|
857
|
-
};
|
858
|
-
let code = `
|
32
|
+
`}l(ae,"renderDemoAppTemplate");async function O(s){let t=Object.keys(s.props||{}).map(a=>{let o=s.props[a];return {key:a,value:o}}),{templateName:e,children:r,extraProps:n=[]}=s;if(!e)throw new Error('Cannot getUsage of a React Component when no "templateName" is provided.');let i=t.map(({key:a,value:o})=>{switch(typeof o){case"string":return o.startsWith("(")&&o.includes("=>")?`${a}={${o}}`:`${a}="${o}"`;case"boolean":return o?`${a}`:`${a}={${o}}`;default:return `${a}={${JSON.stringify(o)}}`}}),p=[],u={};n.forEach(({key:a,value:o})=>{u[a]=u[a]??[],u[a].push(o);}),Object.entries(u).forEach(([a,o])=>{let d=o.length===1?o[0]:`<>${o.join(`
|
33
|
+
`)}</>`;p.push(`${a}={${d}}`);});let c=se({templateName:e,attributes:[...i,...p].join(" "),children:r});return s.format?fileUtils.formatCode({contents:c,path:"x.tsx"}).then(a=>a.trim()).catch(()=>c.trim()):c.trim()}l(O,"getUsage");async function v({children:s,imports:t,format:e}){let r=ae({children:s,imports:t});return e?fileUtils.formatCode({contents:r,path:"x.tsx"}):r}l(v,"getDemoAppUsage");async function J({src:s}){let t=await fileUtils.findUp("tsconfig.json",{cwd:g__default.default.dirname(s)}),e=await import('react-docgen-typescript'),r={shouldExtractLiteralValuesFromEnum:!0,savePropValueAsString:!0,skipChildrenPropWithoutDoc:!1,customComponentTypes:["VoidFunctionComponent","VFC"]};return {info:(t?e.withCustomConfig(t,r).parse:e.withDefaultConfig(r).parse)(s)}}l(J,"getTypeScriptInfoFromFile");function ne({info:s,exportName:t}){try{if(!s)return !1;let e={props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}},n=!t||t==="default"?s.pop():s.find(p=>p.displayName===t);if(!n)return !1;return Object.entries(n?.props||{}).forEach(([p,u])=>{let{name:c,description:a,defaultValue:o,required:d,type:f,parent:y}=u;switch(f?.name?.replace("| undefined","").replace(/<.*/g,"").trim()){case"string":e.props.properties[p]={type:"string"};break;case"number":e.props.properties[p]={type:"number"};break;case"boolean":case"bool":o&&"value"in o&&(o.value=o.value==="true"),e.props.properties[p]={type:"boolean"};break;case"enum":e.props.properties[p]={type:"string",enum:[...new Set(f.value.map(({value:h})=>utils.removeWrappingDoubleQuotes(h?.trim())).filter(Boolean))]};break;case"ReactNode":case"React.ReactNode":case"React.ReactElement":case"ReactElement":e.slots[p]={title:p},a&&(e.slots[p]={...e.slots[p],description:a});break;case"VFC":case"FC":e.slots[p]={title:p,description:a||"A reference to a component",isTemplateReference:!0,allowOnlyOne:!0,disallowText:!0};break;default:if(f?.name?.startsWith("("))e.props.properties[p]={typeof:"function",tsType:u?.type?.name};else if(f?.name?.includes("|")){let h=f.name.split("|").map(R=>utils.removeWrappingDoubleQuotes(R.trim())).filter(Boolean);h?.length&&(e.props.properties[p]={type:"string",enum:[...new Set(h)]});}else e.props.properties[p]={tsType:u?.type?.name};}e.props.properties[p]&&(d&&e.props.required.push(p),a&&!e.props.properties[p].description&&(e.props.properties[p].description=a),o&&"value"in o&&(types.isNumberProp(e.props.properties[p])?e.props.properties[p].default=parseFloat(o.value):e.props.properties[p].default=utils.removeWrappingDoubleQuotes(o.value)));}),e}catch(e){return app.log.verbose("Could not infer spec from React TypeScript file",{exportName:t,error:e},"react renderer"),!1}}l(ne,"extractSpecFromTypeScriptInfo");async function oe({src:s}){let t=await import('react-docgen'),{builtinResolvers:e}=t,r=await fileUtils.readFile(s),{FindExportedDefinitionsResolver:n}=e;return {info:t.parse(r,{resolver:new n,handlers:null,filename:s})}}l(oe,"getPropTypesInfoFromFile");function ie({info:s,exportName:t}){try{let r=!t||t==="default"?s.pop():s.find(i=>i.displayName===t),n={isInferred:!0,props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}};return Object.entries(r?.props||{}).forEach(([i,p])=>{let{required:u,description:c,defaultValue:a}=p;switch(p?.type?.name){case"string":n.props.properties[i]={type:"string"};break;case"func":n.props.properties[i]={type:"string"};break;case"bool":n.props.properties[i]={type:"boolean"};break;case"node":n.slots[i]={title:i,description:c};}n.props.properties[i]&&(u&&n.props.required.push(i),c&&!n.props.properties[i].description&&(n.props.properties[i].description=c),a&&"value"in a&&(n.props.properties[i].default=typeof a.value=="string"?utils.removeWrappingDoubleQuotes(a.value):a.value));}),n}catch(e){return app.log.verbose("Could not infer spec from React PropTypes",{exportName:t,error:e},"react renderer"),!1}}l(ie,"extractSpecFromPropTypesInfo");function pe({spec:s}){return s===!1||Object.entries(s?.props?.properties||{}).forEach(([t,e])=>{types.isOptionsProp(e)&&(e.enum.includes(e.default)||(e.default=void 0));}),s}l(pe,"cleanUpSpec");async function ce({src:s,resolveFromDir:t}){let e=await fileUtils.resolvePath({path:s,resolveFromDir:t,resolveType:"types"});if(e.exists){let i=await J({src:e.absolutePath});if(i)return {type:"typescript",info:i.info}}let r=await fileUtils.resolvePath({path:s,resolveFromDir:t});if(!r.exists)return {type:"unknown"};let{ext:n}=g__default.default.parse(r.absolutePath);switch(n){case".jsx":return {type:"propTypes",info:(await oe({src:r.absolutePath})).info};case".ts":case".tsx":return {type:"typescript",info:(await J({src:r.absolutePath})).info};default:return {type:"unknown"}}}l(ce,"getReactModuleInfoUncached");var S=new Map,q=l(()=>{app.log.info("Clearing React TypeScript inferSpec cache..."),S.clear();},"clearInferSpecCache");async function le(s){let t=JSON.stringify(s);return S.has(t)||S.set(t,ce(s)),S.get(t)}l(le,"getReactModuleInfo");async function de({src:s,exportName:t,resolveFromDir:e}){let r=await le({src:s,resolveFromDir:e});switch(r.type){case"typescript":return ne({info:r.info,exportName:t});case"propTypes":return ie({info:r.info,exportName:t});case"unknown":default:return !1}}l(de,"getReactSpec");async function B(s){return pe({spec:await de(s)})}l(B,"getReactDocs");async function _(s,t){try{let{version:e}=fileUtils.getModulePkgJson("react"),{version:r}=fileUtils.getModulePkgJson("react-dom"),n=g__default.default.dirname(D.resolve("react",{paths:[process.cwd()]})),i=g__default.default.dirname(D.resolve("react-dom",{paths:[process.cwd()]}));await Promise.all([fileUtils.copy(g__default.default.join(n,"umd/react.development.js"),g__default.default.join(s,`react.development.${e}.js`)),fileUtils.copy(g__default.default.join(n,"umd/react.production.min.js"),g__default.default.join(s,`react.production.min.${e}.js`)),fileUtils.copy(g__default.default.join(i,"umd/react-dom.production.min.js"),g__default.default.join(s,`react-dom.production.min.${r}.js`)),fileUtils.copy(g__default.default.join(i,"umd/react-dom.development.js"),g__default.default.join(s,`react-dom.development.${r}.js`))]);let p=process.env.NODE_ENV==="production"?"production.min":"development";return [g__default.default.join(t,`react.${p}.${e}.js`),g__default.default.join(t,`react-dom.${p}.${r}.js`)]}catch(e){app.log.warn('Error trying to copy "react" and "react-dom" JS files, are they installed? We want to use your exact versions.',e,"templateRenderer:react"),process.exit(1);}}l(_,"copyReactAssets");function Re(s){return s.toUpperCase()===s}l(Re,"isCapitalLetter");function be(s){return Re(s[0])}l(be,"startsWithCapitalLetter");function Te({importName:s,id:t,title:e=s,pkgPath:r,initialDemoId:n}){return {id:t,title:e,description:"",statuses:{main:"ready"},templates:[{id:"react",title:"react",path:r,alias:s,templateLanguageId:"react",spec:{isInferred:!0},demoIds:[n],blockIds:[]}],tabs:[{type:"template",id:"react"}],subPages:[]}}l(Te,"createPatternData");var N=creatorUtils.createCreator({id:"react-patterns",title:"React Ks Patterns",description:"Adds React templates as Knapsack Patterns",getQuestions:l(async()=>({pkgPath:{type:"text",title:"Package path"},importPrefix:{type:"text",title:"Import Prefix to Remove"}}),"getQuestions"),getTasks:l(async({answers:{pkgPath:s,importPrefix:t=""},config:e})=>{let r=e.dest,i=(await ksFileUtils.readKsPatternConfigs({dataDir:r})).reduce((u,c)=>{let a=c.templates?.filter(o=>o.templateLanguageId==="react")??[];return u.push(...a.map(o=>o.alias)),u},[]),{exports:p}=await fileUtils.getJsExportNames({path:s});return [{title:"Pick Imports to add",task:l((u,c)=>creatorUtils.tasks.runSubCreator({task:c,config:e,creator:creatorUtils.createCreator({id:"react-pattern-import-names",getQuestions:l(async()=>({importNames:{type:"choices",choices:p.filter(a=>be(a)&&!i.includes(a)).map(a=>({value:a}))}}),"getQuestions"),getTasks:l(async({answers:{importNames:a}})=>{let o=a.map(d=>({importName:d,patternId:d.startsWith(t)?d.slice(t.length).toLowerCase():d.toLowerCase()}));return [...o.map(({importName:d,patternId:f})=>({title:`Add ${d} React Template`,task:l(async(y,b)=>{let h={type:"data",id:utils.makeShortId(),title:"Main",patternId:f,templateId:"react",data:{props:{},slots:{}}},R=Te({id:f,importName:d,pkgPath:s,initialDemoId:h.id});await Promise.all([ksFileUtils.writeDemo({dataDir:r,demo:h}),ksFileUtils.writeKsPatternConfig({dataDir:r,patternId:f,data:R})]);},"task")})),{title:"Updating Nav",task:l(async(d,f)=>{let{byId:y}=await ksFileUtils.readKsNavConfig({dataDir:r}),b=Object.values(y).find(({path:h,name:R,id:X})=>h?!1:R.toLowerCase()==="patterns"||R.toLowerCase()==="components");await ksFileUtils.addKsNavItems({dataDir:r,navItems:o.map(({patternId:h})=>({navId:h,navPath:`/pattern/${h}`,navParent:b?.id||"root"}))});},"task")}]},"getTasks")})}),"task")}]},"getTasks")});var G="ks-react-meta";var{pkg:I}=fileUtils.findUpPkgJson(__dirname);app.log.setupUpdateNotifier({...I,name:I.name,version:I.version});var A=g.join(__dirname,"./error-catcher.mjs");if(!fileUtils.exists(A))throw new Error(`Could not find error catcher at: ${A}`);var H=class s extends rendererWebpackBase.RendererWebpackBase{static{l(this,"KnapsackReactRenderer");}assets;babelConfig;#e;#t;constructor({webpackConfig:t,demoWrapperPath:e=g.join(__dirname,"./demo-wrapper.mjs"),id:r=types.rendererIds.react,disableReactStrictMode:n}={}){super({id:r,language:"jsx",webpackConfig:t,extraScripts:["@knapsack/renderer-react/client"]}),this.language="jsx",this.assets=[],this.#e=e,this.#t=n,this.creators=[N];}setConfig=l(t=>{super.setConfig(t);let{absolutePath:e,exists:r,type:n}=this.resolvePathSync({path:this.#e,resolveFromDir:this.userConfigDir});if(!r)throw new Error(`Could not find demo wrapper at: "${this.#e}"
|
34
|
+
Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`);this.registerExtraJsImports({DemoWrapper:{exportName:"DemoWrapper",isDefaultExport:!0,path:n==="package"?this.#e:e},ErrorCatcher:{exportName:"ErrorCatcher",isDefaultExport:!0,path:A}});},"setConfig");init=l(async()=>{this.assets=await _(this.outputDir,this.publicPath);},"init");hydrate=l(async t=>{await super.hydrate(t),await this.init({missingFileVerbosity:"silent"});},"hydrate");getMeta=l(()=>({id:this.id,title:"React",aliasUse:"optional",aliasTitle:"Named Export",aliasIsJsNamedExport:!0,aliasDescription:"If `export X` was used instead of `export default`, then provide X.",enableDataDemos:!0,enableTemplateDemos:!0,hasSlotsSupport:!0,hasSlotOptionsSupport:!0,version:I.version,hasInferSpecSupport:!0,syntaxHighlightingLanguage:"jsx",hasTemplateSuggestionsSupport:!0,prototypingTemplate:{path:"@knapsack/renderer-react/prototype-template",spec:{isInferred:!1,props:{type:"object",properties:{}},slots:{children:{title:"Children"}}}}}),"getMeta");changeCase=l(t=>utils.pascalCase(t),"changeCase");createWebpackConfig=l(()=>{let t=super.createWebpackConfig();return t.externals={react:"React","react-dom":"ReactDOM"},t},"createWebpackConfig");async prepClientRenderResults({usage:t,demoApp:e,importMap:r,renderOptions:{demo:n,state:i,patternId:p,templateId:u}}){let c={demo:n,disableReactStrictMode:this.#t,neededImportsByCodeSrcId:rendererWebpackBase.convertImportMapToNeededImportsByCodeSrcId(r),demoWrapperProps:{patternId:p,templateId:u,demo:n}},a=`
|
859
35
|
window.knapsack = window.knapsack || {};
|
860
|
-
window.knapsack.getDemoApp = ({ ${[...
|
861
|
-
${
|
862
|
-
return ${
|
36
|
+
window.knapsack.getDemoApp = ({ ${[...r.keys()].join(", ")} }) => {
|
37
|
+
${e}
|
38
|
+
return ${E}
|
863
39
|
}
|
864
|
-
|
865
|
-
|
866
|
-
|
867
|
-
code = await (0, import_renderers.babelCodeForBrowser)({ code });
|
868
|
-
} catch (e) {
|
869
|
-
console.log(code);
|
870
|
-
console.log("---original code before babel error ^---");
|
871
|
-
console.trace(e.message);
|
872
|
-
code = `console.error(${JSON.stringify(e.message)});`;
|
873
|
-
errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
|
874
|
-
}
|
875
|
-
const html = `
|
876
|
-
<script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
|
877
|
-
meta
|
878
|
-
)}</script>
|
879
|
-
<script type="application/javascript">${code}</script>
|
40
|
+
`,o="";try{a=await renderers.babelCodeForBrowser({code:a});}catch(f){console.log(a),console.log("---original code before babel error ^---"),console.trace(f.message),a=`console.error(${JSON.stringify(f.message)});`,o=`<pre><code>${f.message}</code></pre>`;}let d=`
|
41
|
+
<script type="application/json" id="${G}">${JSON.stringify(c)}</script>
|
42
|
+
<script type="application/javascript">${a}</script>
|
880
43
|
<div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
|
881
|
-
${this.assets.map(
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
html: await (0, import_file_utils3.formatCode)({
|
892
|
-
contents: html,
|
893
|
-
path: "x.html"
|
894
|
-
// doing this to set format language
|
895
|
-
}),
|
896
|
-
usage,
|
897
|
-
templateLanguage: this.language
|
898
|
-
};
|
899
|
-
}
|
900
|
-
render = /* @__PURE__ */ __name(async (opt) => {
|
901
|
-
if (opt.demo?.type === "template") {
|
902
|
-
const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
|
903
|
-
let templateDemoPath;
|
904
|
-
let attempt = 0;
|
905
|
-
while (true) {
|
906
|
-
try {
|
907
|
-
const { absolutePath, exists } = await this.resolvePath(
|
908
|
-
opt.demo.templateInfo.path
|
909
|
-
);
|
910
|
-
if (!exists) {
|
911
|
-
throw new Error(
|
912
|
-
`Template demo file does not exist: ${absolutePath}`
|
913
|
-
);
|
914
|
-
}
|
915
|
-
templateDemoPath = absolutePath;
|
916
|
-
break;
|
917
|
-
} catch (e) {
|
918
|
-
const waitTime = waits[attempt];
|
919
|
-
if (!waitTime) {
|
920
|
-
throw new Error(e);
|
921
|
-
}
|
922
|
-
attempt += 1;
|
923
|
-
await (0, import_sleep_promise.default)(waitTime);
|
924
|
-
}
|
925
|
-
}
|
926
|
-
const [templateFileContents, { usage, importMap }] = await Promise.all([
|
927
|
-
(0, import_file_utils3.readFile)(templateDemoPath),
|
928
|
-
this.getUsageAndImports({
|
929
|
-
...opt,
|
930
|
-
importMap: /* @__PURE__ */ new Map()
|
931
|
-
})
|
932
|
-
]);
|
933
|
-
const demoApp = await getDemoAppUsage({
|
934
|
-
children: usage
|
935
|
-
});
|
936
|
-
const results = await this.prepClientRenderResults({
|
937
|
-
usage: templateFileContents,
|
938
|
-
demoApp,
|
939
|
-
renderOptions: opt,
|
940
|
-
importMap
|
941
|
-
});
|
942
|
-
return results;
|
943
|
-
}
|
944
|
-
if (opt.demo?.type === "data") {
|
945
|
-
const { usage, importMap } = await this.getUsageAndImports({
|
946
|
-
...opt,
|
947
|
-
importMap: /* @__PURE__ */ new Map()
|
948
|
-
});
|
949
|
-
const importCode = import_renderer_webpack_base.RendererWebpackBase.createJsImportCodeBlock({
|
950
|
-
importMap
|
951
|
-
});
|
952
|
-
const [demoAppUsage, demoApp] = await Promise.all([
|
953
|
-
getDemoAppUsage({
|
954
|
-
children: usage,
|
955
|
-
imports: importCode,
|
956
|
-
format: true
|
957
|
-
}),
|
958
|
-
getDemoAppUsage({
|
959
|
-
children: usage
|
960
|
-
})
|
961
|
-
]);
|
962
|
-
return this.prepClientRenderResults({
|
963
|
-
demoApp,
|
964
|
-
usage: demoAppUsage,
|
965
|
-
renderOptions: opt,
|
966
|
-
importMap
|
967
|
-
});
|
968
|
-
}
|
969
|
-
}, "render");
|
970
|
-
getUsageAndImports = /* @__PURE__ */ __name(async ({
|
971
|
-
patternId,
|
972
|
-
templateId,
|
973
|
-
demo,
|
974
|
-
state,
|
975
|
-
importMap
|
976
|
-
}) => {
|
977
|
-
if (!demo) {
|
978
|
-
throw new Error(
|
979
|
-
`No demo provided while rendering ${patternId} ${templateId}`
|
980
|
-
);
|
981
|
-
}
|
982
|
-
const pattern = state.patterns[patternId];
|
983
|
-
if (!pattern) {
|
984
|
-
throw new Error(`Could not find pattern: ${patternId}`);
|
985
|
-
}
|
986
|
-
if (demo.type === "data") {
|
987
|
-
const template = pattern.templates.find((t) => t.id === templateId);
|
988
|
-
if (!template) {
|
989
|
-
throw new Error(`Could not find template: ${templateId}`);
|
990
|
-
}
|
991
|
-
const {
|
992
|
-
data: { props, slots, slotsOptionsComputed }
|
993
|
-
} = demo;
|
994
|
-
const { name: templateName } = await this.addUniqueValueToImportMap({
|
995
|
-
importMap,
|
996
|
-
path: template.path,
|
997
|
-
alias: template.alias || "default"
|
998
|
-
});
|
999
|
-
const children = [];
|
1000
|
-
const extraProps = [];
|
1001
|
-
if (slots) {
|
1002
|
-
const slotNames = Object.keys(slots);
|
1003
|
-
const slotUsages = await Promise.all(
|
1004
|
-
slotNames.map(async (slotName) => {
|
1005
|
-
const slotItems = slots[slotName];
|
1006
|
-
const slotItemsUsages = await Promise.all(
|
1007
|
-
slotItems.filter((slotItem) => {
|
1008
|
-
if (!slotItem) return false;
|
1009
|
-
if (slotItem.type !== "text") {
|
1010
|
-
if (!slotItem.patternId) return false;
|
1011
|
-
if (!slotItem.templateId) return false;
|
1012
|
-
if (slotItem.type === "template-demo" && !slotItem.demoId) {
|
1013
|
-
return false;
|
1014
|
-
}
|
1015
|
-
}
|
1016
|
-
return true;
|
1017
|
-
}).map(async (slotItem) => {
|
1018
|
-
if (slotItem.type === "text") {
|
1019
|
-
if (slotItems.length === 1 && slotName !== "children") {
|
1020
|
-
return `\`${slotItem.text}\``;
|
1021
|
-
}
|
1022
|
-
return slotItem.text;
|
1023
|
-
}
|
1024
|
-
if (slotItem.type === "template-reference") {
|
1025
|
-
const slottedTemplate = state.patterns[slotItem.patternId]?.templates.find((t) => t.id === slotItem.templateId);
|
1026
|
-
if (!slottedTemplate) {
|
1027
|
-
throw new Error(
|
1028
|
-
`Could not find slotted template: ${slotItem.patternId} ${slotItem.templateId}`
|
1029
|
-
);
|
1030
|
-
}
|
1031
|
-
const templateRefImport = await this.addUniqueValueToImportMap({
|
1032
|
-
importMap,
|
1033
|
-
path: slottedTemplate.path,
|
1034
|
-
alias: slottedTemplate.alias || "default"
|
1035
|
-
});
|
1036
|
-
return templateRefImport.name;
|
1037
|
-
}
|
1038
|
-
if (slotItem.type === "template-demo") {
|
1039
|
-
const thisDemo = slotItem.demo;
|
1040
|
-
if (!thisDemo) {
|
1041
|
-
throw new Error(
|
1042
|
-
`Could not find slotted template demo ${JSON.stringify(
|
1043
|
-
slotItem
|
1044
|
-
)}`
|
1045
|
-
);
|
1046
|
-
}
|
1047
|
-
const { usage: usage2 } = await this.getUsageAndImports({
|
1048
|
-
patternId: thisDemo.patternId,
|
1049
|
-
templateId: thisDemo.templateId,
|
1050
|
-
demo: thisDemo,
|
1051
|
-
state,
|
1052
|
-
importMap
|
1053
|
-
});
|
1054
|
-
return usage2;
|
1055
|
-
}
|
1056
|
-
const _exhaustiveCheck2 = slotItem;
|
1057
|
-
throw new Error(
|
1058
|
-
`Unknown slot item: ${JSON.stringify(slotItem)}`
|
1059
|
-
);
|
1060
|
-
})
|
1061
|
-
);
|
1062
|
-
return {
|
1063
|
-
slotName,
|
1064
|
-
slotItemsUsages
|
1065
|
-
};
|
1066
|
-
})
|
1067
|
-
);
|
1068
|
-
slotUsages.forEach(({ slotName, slotItemsUsages }) => {
|
1069
|
-
const slotOptionsComputed = slotsOptionsComputed?.[slotName];
|
1070
|
-
const { openTag, closeTag } = (0, import_renderers.createSlotOptionsHtmlTags)({
|
1071
|
-
slotOptionsComputed,
|
1072
|
-
classAttributeName: "className",
|
1073
|
-
stylesValueType: "object"
|
1074
|
-
});
|
1075
|
-
if (openTag) {
|
1076
|
-
if (slotName === "children") {
|
1077
|
-
children.push(openTag);
|
1078
|
-
} else {
|
1079
|
-
extraProps.push({
|
1080
|
-
key: slotName,
|
1081
|
-
value: openTag
|
1082
|
-
});
|
1083
|
-
}
|
1084
|
-
}
|
1085
|
-
slotItemsUsages.forEach((usage2) => {
|
1086
|
-
if (slotName === "children") {
|
1087
|
-
children.push(usage2);
|
1088
|
-
} else {
|
1089
|
-
extraProps.push({
|
1090
|
-
key: slotName,
|
1091
|
-
value: usage2
|
1092
|
-
});
|
1093
|
-
}
|
1094
|
-
});
|
1095
|
-
if (closeTag) {
|
1096
|
-
if (slotName === "children") {
|
1097
|
-
children.push(closeTag);
|
1098
|
-
} else {
|
1099
|
-
extraProps.push({
|
1100
|
-
key: slotName,
|
1101
|
-
value: closeTag
|
1102
|
-
});
|
1103
|
-
}
|
1104
|
-
}
|
1105
|
-
});
|
1106
|
-
}
|
1107
|
-
const usage = await getUsage({
|
1108
|
-
templateName,
|
1109
|
-
props,
|
1110
|
-
children: children.join("\n"),
|
1111
|
-
extraProps
|
1112
|
-
});
|
1113
|
-
return {
|
1114
|
-
usage,
|
1115
|
-
importMap
|
1116
|
-
};
|
1117
|
-
}
|
1118
|
-
if (demo.type === "template") {
|
1119
|
-
const { templateInfo } = demo;
|
1120
|
-
const { name: templateName } = await this.addUniqueValueToImportMap({
|
1121
|
-
importMap,
|
1122
|
-
path: templateInfo.path,
|
1123
|
-
alias: templateInfo.alias || "default"
|
1124
|
-
});
|
1125
|
-
const usage = await getUsage({ templateName });
|
1126
|
-
return {
|
1127
|
-
usage,
|
1128
|
-
importMap
|
1129
|
-
};
|
1130
|
-
}
|
1131
|
-
const _exhaustiveCheck = demo;
|
1132
|
-
throw new Error(
|
1133
|
-
`Unhandled demo type for ${patternId}-${templateId}: ${JSON.stringify(
|
1134
|
-
demo
|
1135
|
-
)}`
|
1136
|
-
);
|
1137
|
-
}, "getUsageAndImports");
|
1138
|
-
inferSpec = /* @__PURE__ */ __name(async ({
|
1139
|
-
template,
|
1140
|
-
templatePath
|
1141
|
-
}) => {
|
1142
|
-
const spec = await getReactDocs({
|
1143
|
-
src: template.path,
|
1144
|
-
exportName: template.alias || "default",
|
1145
|
-
resolveFromDir: this.config.data
|
1146
|
-
});
|
1147
|
-
if (spec !== false) {
|
1148
|
-
const totalProps = Object.keys(spec?.props?.properties || {}).length;
|
1149
|
-
const totalSlots = Object.keys(spec?.slots || {}).length;
|
1150
|
-
if (totalProps === 0 && totalSlots === 0) {
|
1151
|
-
return false;
|
1152
|
-
}
|
1153
|
-
}
|
1154
|
-
return spec;
|
1155
|
-
}, "inferSpec");
|
1156
|
-
watch = /* @__PURE__ */ __name(async () => {
|
1157
|
-
super.watch();
|
1158
|
-
import_app2.knapsackEvents.onPatternTemplateChanged(() => {
|
1159
|
-
clearInferSpecCache();
|
1160
|
-
});
|
1161
|
-
}, "watch");
|
1162
|
-
getTemplateMeta = /* @__PURE__ */ __name(async ({
|
1163
|
-
pattern,
|
1164
|
-
template
|
1165
|
-
}) => {
|
1166
|
-
const files = [];
|
1167
|
-
if (template?.spec?.props) {
|
1168
|
-
const schema = JSON.parse(JSON.stringify(template.spec.props));
|
1169
|
-
if (template?.spec?.slots) {
|
1170
|
-
Object.entries(template.spec.slots).forEach(([id, info]) => {
|
1171
|
-
schema.properties[id] = {
|
1172
|
-
typeof: "function",
|
1173
|
-
tsType: "React.ReactNode",
|
1174
|
-
description: info.allowedPatternIds ? `${info.description}. Only use: ${info.allowedPatternIds.join(
|
1175
|
-
", "
|
1176
|
-
)}` : info.description
|
1177
|
-
};
|
1178
|
-
schema.required = schema.required ?? [];
|
1179
|
-
if (info.isRequired) schema.required.push(id);
|
1180
|
-
});
|
1181
|
-
}
|
1182
|
-
const typeDefs = await _KnapsackReactRenderer.convertSchemaToTypeScriptDefs({
|
1183
|
-
schema,
|
1184
|
-
title: `${this.changeCase(pattern.id)}Props`,
|
1185
|
-
// @todo pull in base url
|
1186
|
-
description: `[Knapsack Docs](http://localhost:3999/pattern/${pattern.id}/${template.id})`,
|
1187
|
-
patternId: pattern.id,
|
1188
|
-
templateId: template.id,
|
1189
|
-
postBanner: `import * as React from 'react';`
|
1190
|
-
});
|
1191
|
-
files.push({
|
1192
|
-
contents: typeDefs,
|
1193
|
-
encoding: "utf8",
|
1194
|
-
path: `${pattern.id}.${template.id}.spec.d.ts`
|
1195
|
-
});
|
1196
|
-
files.push({
|
1197
|
-
contents: JSON.stringify(schema, null, " "),
|
1198
|
-
encoding: "utf8",
|
1199
|
-
path: `${pattern.id}.${template.id}.spec.json`
|
1200
|
-
});
|
1201
|
-
}
|
1202
|
-
return files;
|
1203
|
-
}, "getTemplateMeta");
|
1204
|
-
alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
|
1205
|
-
files,
|
1206
|
-
metaDir
|
1207
|
-
}) => {
|
1208
|
-
const imports = [];
|
1209
|
-
const ext = ".spec.d.ts";
|
1210
|
-
files.forEach((file) => {
|
1211
|
-
if (file.path.endsWith(ext)) {
|
1212
|
-
const { base } = (0, import_path2.parse)(file.path);
|
1213
|
-
const [patternId, templateId] = base.split(".");
|
1214
|
-
const isFirst = templateId === this.id;
|
1215
|
-
const exportName = this.changeCase(`${patternId}Props`);
|
1216
|
-
const exportNameWithTemplateId = this.changeCase(
|
1217
|
-
`${patternId}-${templateId}Props`
|
1218
|
-
);
|
1219
|
-
imports.push(
|
1220
|
-
`export { ${isFirst ? exportName : `${exportName} as ${exportNameWithTemplateId}`} } from './${(0, import_path2.relative)(metaDir, file.path).replace(".d.ts", "")}';`
|
1221
|
-
);
|
1222
|
-
}
|
1223
|
-
});
|
1224
|
-
imports.push("");
|
1225
|
-
return [
|
1226
|
-
...files,
|
1227
|
-
{
|
1228
|
-
contents: imports.join("\n"),
|
1229
|
-
encoding: "utf8",
|
1230
|
-
path: (0, import_path2.join)(metaDir, "react.d.ts")
|
1231
|
-
}
|
1232
|
-
];
|
1233
|
-
}, "alterTemplateMetaFiles");
|
1234
|
-
getTemplateSuggestions = /* @__PURE__ */ __name(async ({
|
1235
|
-
newPath,
|
1236
|
-
state
|
1237
|
-
}) => {
|
1238
|
-
const usedSuggestions = Object.values(state.patterns).reduce(
|
1239
|
-
(acc, { templateDemos, templates }) => {
|
1240
|
-
templates.forEach(({ path: path2, alias, templateLanguageId }) => {
|
1241
|
-
if (templateLanguageId !== this.id) return;
|
1242
|
-
acc.push({ path: path2, alias });
|
1243
|
-
});
|
1244
|
-
templateDemos.forEach(
|
1245
|
-
({ templateInfo: { path: path2, alias }, templateLanguageId }) => {
|
1246
|
-
if (templateLanguageId !== this.id) return;
|
1247
|
-
acc.push({ path: path2, alias });
|
1248
|
-
}
|
1249
|
-
);
|
1250
|
-
return acc;
|
1251
|
-
},
|
1252
|
-
[]
|
1253
|
-
);
|
1254
|
-
const codeSrcs = new Set(this.getCodeSrcs().map(({ path: path2 }) => path2));
|
1255
|
-
const allPaths = [
|
1256
|
-
.../* @__PURE__ */ new Set([
|
1257
|
-
newPath,
|
1258
|
-
...Object.keys(this.pkgPathAliases || {}),
|
1259
|
-
...codeSrcs
|
1260
|
-
])
|
1261
|
-
];
|
1262
|
-
const allSuggestions = await Promise.all(
|
1263
|
-
allPaths.map(async (path2) => {
|
1264
|
-
if (!path2) return [];
|
1265
|
-
try {
|
1266
|
-
const { exports: exports2, errorMsg } = await (0, import_file_utils3.getJsExportNames)({
|
1267
|
-
path: path2,
|
1268
|
-
resolveFromDir: this.dataDir,
|
1269
|
-
pkgPathAliases: this.pkgPathAliases
|
1270
|
-
});
|
1271
|
-
if (errorMsg) {
|
1272
|
-
throw new Error(errorMsg);
|
1273
|
-
}
|
1274
|
-
return exports2.filter((e) => e === "default" || (0, import_utils3.isFirstLetterCapital)(e)).map((name) => ({
|
1275
|
-
alias: name,
|
1276
|
-
path: path2
|
1277
|
-
}));
|
1278
|
-
} catch (e) {
|
1279
|
-
import_app2.log.verbose(
|
1280
|
-
`Error getting import names for ${path2}: ${e.message}`,
|
1281
|
-
null,
|
1282
|
-
this.logPrefix
|
1283
|
-
);
|
1284
|
-
return [];
|
1285
|
-
}
|
1286
|
-
})
|
1287
|
-
).then((results) => {
|
1288
|
-
return results.flat();
|
1289
|
-
});
|
1290
|
-
const suggestions = allSuggestions.filter((s) => {
|
1291
|
-
return !usedSuggestions.find(
|
1292
|
-
(us) => us.alias === s.alias && us.path === s.path
|
1293
|
-
);
|
1294
|
-
});
|
1295
|
-
return {
|
1296
|
-
suggestions
|
1297
|
-
};
|
1298
|
-
}, "getTemplateSuggestions");
|
1299
|
-
};
|
1300
|
-
// Annotate the CommonJS export names for ESM import in node:
|
1301
|
-
0 && (module.exports = {
|
1302
|
-
KnapsackReactRenderer
|
1303
|
-
});
|
44
|
+
${this.assets.map(f=>`<script src="${f}"></script>`).join(`
|
45
|
+
`)}
|
46
|
+
${rendererWebpackBase.RendererWebpackBase.createHtmlTagsForAssetPaths({assets:this.getWebpackAssetPaths(),scriptTagsAreAsync:!1})}
|
47
|
+
${o}
|
48
|
+
`;return {ok:!o,html:await fileUtils.formatCode({contents:d,path:"x.html"}),usage:t,templateLanguage:this.language}}render=l(async t=>{if(t.demo?.type==="template"){let e=[5,10,20,50,100,1e3,1e3],r,n=0;for(;;)try{let{absolutePath:o,exists:d}=await this.resolvePath(t.demo.templateInfo.path);if(!d)throw new Error(`Template demo file does not exist: ${o}`);r=o;break}catch(o){let d=e[n];if(!d)throw new Error(o);n+=1,await ke__default.default(d);}let[i,{usage:p,importMap:u}]=await Promise.all([fileUtils.readFile(r),this.getUsageAndImports({...t,importMap:new Map})]),c=await v({children:p});return await this.prepClientRenderResults({usage:i,demoApp:c,renderOptions:t,importMap:u})}if(t.demo?.type==="data"){let{usage:e,importMap:r}=await this.getUsageAndImports({...t,importMap:new Map}),n=rendererWebpackBase.RendererWebpackBase.createJsImportCodeBlock({importMap:r}),[i,p]=await Promise.all([v({children:e,imports:n,format:!0}),v({children:e})]);return this.prepClientRenderResults({demoApp:p,usage:i,renderOptions:t,importMap:r})}},"render");getUsageAndImports=l(async({patternId:t,templateId:e,demo:r,state:n,importMap:i})=>{if(!r)throw new Error(`No demo provided while rendering ${t} ${e}`);let p=n.patterns[t];if(!p)throw new Error(`Could not find pattern: ${t}`);if(r.type==="data"){let c=p.templates.find(R=>R.id===e);if(!c)throw new Error(`Could not find template: ${e}`);let{data:{props:a,slots:o,slotsOptionsComputed:d}}=r,{name:f}=await this.addUniqueValueToImportMap({importMap:i,path:c.path,alias:c.alias||"default"}),y=[],b=[];if(o){let R=Object.keys(o);(await Promise.all(R.map(async w=>{let T=o[w],j=await Promise.all(T.filter(m=>!(!m||m.type!=="text"&&(!m.patternId||!m.templateId||m.type==="template-demo"&&!m.demoId))).map(async m=>{if(m.type==="text")return T.length===1&&w!=="children"?`\`${m.text}\``:m.text;if(m.type==="template-reference"){let P=n.patterns[m.patternId]?.templates.find(z=>z.id===m.templateId);if(!P)throw new Error(`Could not find slotted template: ${m.patternId} ${m.templateId}`);return (await this.addUniqueValueToImportMap({importMap:i,path:P.path,alias:P.alias||"default"})).name}if(m.type==="template-demo"){let P=m.demo;if(!P)throw new Error(`Could not find slotted template demo ${JSON.stringify(m)}`);let{usage:K}=await this.getUsageAndImports({patternId:P.patternId,templateId:P.templateId,demo:P,state:n,importMap:i});return K}throw new Error(`Unknown slot item: ${JSON.stringify(m)}`)}));return {slotName:w,slotItemsUsages:j}}))).forEach(({slotName:w,slotItemsUsages:T})=>{let j=d?.[w],{openTag:m,closeTag:k}=renderers.createSlotOptionsHtmlTags({slotOptionsComputed:j,classAttributeName:"className",stylesValueType:"object"});m&&(w==="children"?y.push(m):b.push({key:w,value:m})),T.forEach(P=>{w==="children"?y.push(P):b.push({key:w,value:P});}),k&&(w==="children"?y.push(k):b.push({key:w,value:k}));});}return {usage:await O({templateName:f,props:a,children:y.join(`
|
49
|
+
`),extraProps:b}),importMap:i}}if(r.type==="template"){let{templateInfo:c}=r,{name:a}=await this.addUniqueValueToImportMap({importMap:i,path:c.path,alias:c.alias||"default"});return {usage:await O({templateName:a}),importMap:i}}throw new Error(`Unhandled demo type for ${t}-${e}: ${JSON.stringify(r)}`)},"getUsageAndImports");inferSpec=l(async({template:t,templatePath:e})=>{let r=await B({src:t.path,exportName:t.alias||"default",resolveFromDir:this.config.data});if(r!==!1){let n=Object.keys(r?.props?.properties||{}).length,i=Object.keys(r?.slots||{}).length;if(n===0&&i===0)return !1}return r},"inferSpec");watch=l(async()=>{super.watch(),app.knapsackEvents.onPatternTemplateChanged(()=>{q();});},"watch");getTemplateMeta=l(async({pattern:t,template:e})=>{let r=[];if(e?.spec?.props){let n=JSON.parse(JSON.stringify(e.spec.props));e?.spec?.slots&&Object.entries(e.spec.slots).forEach(([p,u])=>{n.properties[p]={typeof:"function",tsType:"React.ReactNode",description:u.allowedPatternIds?`${u.description}. Only use: ${u.allowedPatternIds.join(", ")}`:u.description},n.required=n.required??[],u.isRequired&&n.required.push(p);});let i=await s.convertSchemaToTypeScriptDefs({schema:n,title:`${this.changeCase(t.id)}Props`,description:`[Knapsack Docs](http://localhost:3999/pattern/${t.id}/${e.id})`,patternId:t.id,templateId:e.id,postBanner:"import * as React from 'react';"});r.push({contents:i,encoding:"utf8",path:`${t.id}.${e.id}.spec.d.ts`}),r.push({contents:JSON.stringify(n,null," "),encoding:"utf8",path:`${t.id}.${e.id}.spec.json`});}return r},"getTemplateMeta");alterTemplateMetaFiles=l(async({files:t,metaDir:e})=>{let r=[],n=".spec.d.ts";return t.forEach(i=>{if(i.path.endsWith(n)){let{base:p}=g.parse(i.path),[u,c]=p.split("."),a=c===this.id,o=this.changeCase(`${u}Props`),d=this.changeCase(`${u}-${c}Props`);r.push(`export { ${a?o:`${o} as ${d}`} } from './${g.relative(e,i.path).replace(".d.ts","")}';`);}}),r.push(""),[...t,{contents:r.join(`
|
50
|
+
`),encoding:"utf8",path:g.join(e,"react.d.ts")}]},"alterTemplateMetaFiles");getTemplateSuggestions=l(async({newPath:t,state:e})=>{let r=Object.values(e.patterns).reduce((c,{templateDemos:a,templates:o})=>(o.forEach(({path:d,alias:f,templateLanguageId:y})=>{y===this.id&&c.push({path:d,alias:f});}),a.forEach(({templateInfo:{path:d,alias:f},templateLanguageId:y})=>{y===this.id&&c.push({path:d,alias:f});}),c),[]),n=new Set(this.getCodeSrcs().map(({path:c})=>c)),i=[...new Set([t,...Object.keys(this.pkgPathAliases||{}),...n])];return {suggestions:(await Promise.all(i.map(async c=>{if(!c)return [];try{let{exports:a,errorMsg:o}=await fileUtils.getJsExportNames({path:c,resolveFromDir:this.dataDir,pkgPathAliases:this.pkgPathAliases});if(o)throw new Error(o);return a.filter(d=>d==="default"||utils.isFirstLetterCapital(d)).map(d=>({alias:d,path:c}))}catch(a){return app.log.verbose(`Error getting import names for ${c}: ${a.message}`,null,this.logPrefix),[]}})).then(c=>c.flat())).filter(c=>!r.find(a=>a.alias===c.alias&&a.path===c.path))}},"getTemplateSuggestions")};
|
51
|
+
|
52
|
+
exports.KnapsackReactRenderer = H;
|
53
|
+
//# sourceMappingURL=index.js.map
|
1304
54
|
//# sourceMappingURL=index.js.map
|