@knapsack/renderer-react 4.69.8 → 4.69.9--canary.4745.6c2414b.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +0 -12
- package/dist/demo-wrapper.d.mts +0 -1
- package/dist/demo-wrapper.d.ts +0 -1
- package/dist/error-catcher.js.map +1 -1
- package/dist/error-catcher.mjs.map +1 -1
- package/dist/index.d.mts +25 -18
- package/dist/index.d.ts +25 -18
- package/dist/index.js +43 -49
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +50 -57
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
@@ -1,15 +1,3 @@
|
|
1
|
-
# v4.69.8 (Thu Sep 12 2024)
|
2
|
-
|
3
|
-
#### 🐛 Bug Fix
|
4
|
-
|
5
|
-
- refactor Renderers for cleaner types [#4746](https://github.com/knapsack-labs/app-monorepo/pull/4746) ([@EvanLovely](https://github.com/EvanLovely))
|
6
|
-
|
7
|
-
#### Authors: 1
|
8
|
-
|
9
|
-
- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
|
10
|
-
|
11
|
-
---
|
12
|
-
|
13
1
|
# v4.69.7 (Wed Sep 11 2024)
|
14
2
|
|
15
3
|
#### 🐛 Bug Fix
|
package/dist/demo-wrapper.d.mts
CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { DemoWrapperProps } from './index.mjs';
|
3
3
|
import '@knapsack/renderer-webpack-base';
|
4
4
|
import '@knapsack/utils';
|
5
|
-
import '@knapsack/app/renderers';
|
6
5
|
import '@knapsack/types';
|
7
6
|
import '@knapsack/app/types';
|
8
7
|
|
package/dist/demo-wrapper.d.ts
CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { DemoWrapperProps } from './index.js';
|
3
3
|
import '@knapsack/renderer-webpack-base';
|
4
4
|
import '@knapsack/utils';
|
5
|
-
import '@knapsack/app/renderers';
|
6
5
|
import '@knapsack/types';
|
7
6
|
import '@knapsack/app/types';
|
8
7
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/error-catcher.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype State = {\n hasError: boolean;\n componentStack?: string;\n error?: Error;\n};\n\nexport default class ErrorCatcher extends React.Component<\n { children: React.ReactNode },\n State\n> {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n componentStack: '',\n error: null,\n };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return {\n hasError: true,\n };\n }\n\n
|
1
|
+
{"version":3,"sources":["../src/error-catcher.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype State = {\n hasError: boolean;\n componentStack?: string;\n error?: Error;\n};\n\nexport default class ErrorCatcher extends React.Component<\n { children: React.ReactNode },\n State\n> {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n componentStack: '',\n error: null,\n };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return {\n hasError: true,\n };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { componentStack } = errorInfo;\n this.setState({\n error,\n componentStack,\n });\n }\n\n render() {\n if (this.state.hasError) {\n return (\n <div\n style={{\n padding: '5px',\n }}\n >\n <h5>Error caught in React Components</h5>\n {this.state.error?.name && (\n <h5>\n Error Name: <code>{this.state.error?.name}</code>\n </h5>\n )}\n {this.state.error?.message && (\n <h5>\n Message:\n {this.state.error?.message}\n </h5>\n )}\n {this.state.componentStack && (\n <>\n <h6>Component Stack:</h6>\n <pre>\n <code>{this.state.componentStack}</code>\n </pre>\n <br />\n </>\n )}\n {this.state.error?.stack && (\n <>\n <h6>Error Stack:</h6>\n <pre>\n <code>{this.state.error?.stack}</code>\n </pre>\n </>\n )}\n </div>\n );\n }\n\n return this.props.children;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AA4Cb;AApCV,IAAqB,eAArB,cAAgD,gBAG9C;AAAA,EAXF,OAWE;AAAA;AAAA;AAAA,EACA,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAE5C,WAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,kBAAkB,OAAc,WAAkC;AAChE,UAAM,EAAE,eAAe,IAAI;AAC3B,SAAK,SAAS;AAAA,MACZ;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,UACX;AAAA,UAEA;AAAA,wDAAC,QAAG,8CAAgC;AAAA,YACnC,KAAK,MAAM,OAAO,QACjB,6CAAC,QAAG;AAAA;AAAA,cACU,4CAAC,UAAM,eAAK,MAAM,OAAO,MAAK;AAAA,eAC5C;AAAA,YAED,KAAK,MAAM,OAAO,WACjB,6CAAC,QAAG;AAAA;AAAA,cAED,KAAK,MAAM,OAAO;AAAA,eACrB;AAAA,YAED,KAAK,MAAM,kBACV,4EACE;AAAA,0DAAC,QAAG,8BAAgB;AAAA,cACpB,4CAAC,SACC,sDAAC,UAAM,eAAK,MAAM,gBAAe,GACnC;AAAA,cACA,4CAAC,QAAG;AAAA,eACN;AAAA,YAED,KAAK,MAAM,OAAO,SACjB,4EACE;AAAA,0DAAC,QAAG,0BAAY;AAAA,cAChB,4CAAC,SACC,sDAAC,UAAM,eAAK,MAAM,OAAO,OAAM,GACjC;AAAA,eACF;AAAA;AAAA;AAAA,MAEJ;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/error-catcher.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype State = {\n hasError: boolean;\n componentStack?: string;\n error?: Error;\n};\n\nexport default class ErrorCatcher extends React.Component<\n { children: React.ReactNode },\n State\n> {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n componentStack: '',\n error: null,\n };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return {\n hasError: true,\n };\n }\n\n
|
1
|
+
{"version":3,"sources":["../src/error-catcher.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype State = {\n hasError: boolean;\n componentStack?: string;\n error?: Error;\n};\n\nexport default class ErrorCatcher extends React.Component<\n { children: React.ReactNode },\n State\n> {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n componentStack: '',\n error: null,\n };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return {\n hasError: true,\n };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { componentStack } = errorInfo;\n this.setState({\n error,\n componentStack,\n });\n }\n\n render() {\n if (this.state.hasError) {\n return (\n <div\n style={{\n padding: '5px',\n }}\n >\n <h5>Error caught in React Components</h5>\n {this.state.error?.name && (\n <h5>\n Error Name: <code>{this.state.error?.name}</code>\n </h5>\n )}\n {this.state.error?.message && (\n <h5>\n Message:\n {this.state.error?.message}\n </h5>\n )}\n {this.state.componentStack && (\n <>\n <h6>Component Stack:</h6>\n <pre>\n <code>{this.state.componentStack}</code>\n </pre>\n <br />\n </>\n )}\n {this.state.error?.stack && (\n <>\n <h6>Error Stack:</h6>\n <pre>\n <code>{this.state.error?.stack}</code>\n </pre>\n </>\n )}\n </div>\n );\n }\n\n return this.props.children;\n }\n}\n"],"mappings":";;;;AAAA,YAAY,WAAW;AA4Cb,SAaE,UAbF,KAEE,YAFF;AApCV,IAAqB,eAArB,cAAgD,gBAG9C;AAAA,EAXF,OAWE;AAAA;AAAA;AAAA,EACA,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAE5C,WAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,kBAAkB,OAAc,WAAkC;AAChE,UAAM,EAAE,eAAe,IAAI;AAC3B,SAAK,SAAS;AAAA,MACZ;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,UACX;AAAA,UAEA;AAAA,gCAAC,QAAG,8CAAgC;AAAA,YACnC,KAAK,MAAM,OAAO,QACjB,qBAAC,QAAG;AAAA;AAAA,cACU,oBAAC,UAAM,eAAK,MAAM,OAAO,MAAK;AAAA,eAC5C;AAAA,YAED,KAAK,MAAM,OAAO,WACjB,qBAAC,QAAG;AAAA;AAAA,cAED,KAAK,MAAM,OAAO;AAAA,eACrB;AAAA,YAED,KAAK,MAAM,kBACV,iCACE;AAAA,kCAAC,QAAG,8BAAgB;AAAA,cACpB,oBAAC,SACC,8BAAC,UAAM,eAAK,MAAM,gBAAe,GACnC;AAAA,cACA,oBAAC,QAAG;AAAA,eACN;AAAA,YAED,KAAK,MAAM,OAAO,SACjB,iCACE;AAAA,kCAAC,QAAG,0BAAY;AAAA,cAChB,oBAAC,SACC,8BAAC,UAAM,eAAK,MAAM,OAAO,OAAM,GACjC;AAAA,eACF;AAAA;AAAA;AAAA,MAEJ;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
|
package/dist/index.d.mts
CHANGED
@@ -1,8 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
|
2
2
|
import { Except } from '@knapsack/utils';
|
3
|
-
import { Renderable } from '@knapsack/app/renderers';
|
4
3
|
import { RendererId, KsJsImport } from '@knapsack/types';
|
5
|
-
import { KnapsackRenderParams } from '@knapsack/app/types';
|
4
|
+
import { KnapsackRenderParams, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
|
6
5
|
|
7
6
|
type DemoWrapperProps = {
|
8
7
|
children: React.ReactNode;
|
@@ -12,16 +11,17 @@ type DemoWrapperProps = {
|
|
12
11
|
demoId?: string;
|
13
12
|
}[];
|
14
13
|
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
15
|
-
declare class KnapsackReactRenderer extends
|
14
|
+
declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
|
16
15
|
/**
|
17
16
|
* `react.js` & `react-dom.js` root relative paths
|
18
17
|
*/
|
19
18
|
assets: string[];
|
20
19
|
babelConfig: Record<string, unknown>;
|
20
|
+
creators: KnapsackTemplateRenderer['creators'];
|
21
21
|
private demoWrapperPath;
|
22
22
|
private disableReactStrictMode?;
|
23
23
|
constructor({ webpackConfig, demoWrapperPath, id, disableReactStrictMode, }?: {
|
24
|
-
webpackConfig?: ConstructorParameters<typeof
|
24
|
+
webpackConfig?: ConstructorParameters<typeof KnapsackRendererWebpackBase>[0]['webpackConfig'];
|
25
25
|
demoWrapperPath?: string;
|
26
26
|
/** When using React v18+, this option allows a workspace to _disable_ React's Strict Mode from running in Knapsack's React Renderer (StrictMode is enabled by default).
|
27
27
|
*
|
@@ -31,24 +31,31 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
|
|
31
31
|
/** Don't set if calling from `knapsack.config.js`, only use if creating a new Renderer based on the React Renderer */
|
32
32
|
id?: RendererId;
|
33
33
|
});
|
34
|
-
init:
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
34
|
+
init(opt: {
|
35
|
+
patterns: Patterns;
|
36
|
+
cacheDir: string;
|
37
|
+
}): Promise<void>;
|
38
|
+
getMeta: KnapsackTemplateRenderer['getMeta'];
|
39
|
+
changeCase(str: string): string;
|
40
|
+
createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
|
41
|
+
getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
|
39
42
|
prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
|
40
43
|
usage: string;
|
41
44
|
demoApp: string;
|
42
45
|
imports: KsJsImport[];
|
43
46
|
renderOptions: KnapsackRenderParams;
|
44
|
-
}):
|
45
|
-
render:
|
46
|
-
getUsageAndImports:
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
47
|
+
}): Promise<KnapsackTemplateRendererResults>;
|
48
|
+
render(opt: KnapsackRenderParams): Promise<KnapsackTemplateRendererResults>;
|
49
|
+
getUsageAndImports(opt: KnapsackRenderParams): Promise<{
|
50
|
+
usage: string;
|
51
|
+
imports: KsJsImport[];
|
52
|
+
}>;
|
53
|
+
getUsage(opt: KnapsackRenderParams): Promise<string>;
|
54
|
+
inferSpec: KnapsackTemplateRendererBase['inferSpec'];
|
55
|
+
watch(opt: Parameters<KnapsackTemplateRendererBase['watch']>[0]): Promise<void>;
|
56
|
+
getTemplateMeta: KnapsackTemplateRendererBase['getTemplateMeta'];
|
57
|
+
alterTemplateMetaFiles: KnapsackTemplateRendererBase['alterTemplateMetaFiles'];
|
58
|
+
getTemplateSuggestions({ newPath, }: Parameters<KnapsackTemplateRendererBase['getTemplateSuggestions']>[0]): ReturnType<KnapsackTemplateRendererBase['getTemplateSuggestions']>;
|
52
59
|
}
|
53
60
|
|
54
61
|
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.d.ts
CHANGED
@@ -1,8 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
|
2
2
|
import { Except } from '@knapsack/utils';
|
3
|
-
import { Renderable } from '@knapsack/app/renderers';
|
4
3
|
import { RendererId, KsJsImport } from '@knapsack/types';
|
5
|
-
import { KnapsackRenderParams } from '@knapsack/app/types';
|
4
|
+
import { KnapsackRenderParams, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
|
6
5
|
|
7
6
|
type DemoWrapperProps = {
|
8
7
|
children: React.ReactNode;
|
@@ -12,16 +11,17 @@ type DemoWrapperProps = {
|
|
12
11
|
demoId?: string;
|
13
12
|
}[];
|
14
13
|
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
15
|
-
declare class KnapsackReactRenderer extends
|
14
|
+
declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
|
16
15
|
/**
|
17
16
|
* `react.js` & `react-dom.js` root relative paths
|
18
17
|
*/
|
19
18
|
assets: string[];
|
20
19
|
babelConfig: Record<string, unknown>;
|
20
|
+
creators: KnapsackTemplateRenderer['creators'];
|
21
21
|
private demoWrapperPath;
|
22
22
|
private disableReactStrictMode?;
|
23
23
|
constructor({ webpackConfig, demoWrapperPath, id, disableReactStrictMode, }?: {
|
24
|
-
webpackConfig?: ConstructorParameters<typeof
|
24
|
+
webpackConfig?: ConstructorParameters<typeof KnapsackRendererWebpackBase>[0]['webpackConfig'];
|
25
25
|
demoWrapperPath?: string;
|
26
26
|
/** When using React v18+, this option allows a workspace to _disable_ React's Strict Mode from running in Knapsack's React Renderer (StrictMode is enabled by default).
|
27
27
|
*
|
@@ -31,24 +31,31 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
|
|
31
31
|
/** Don't set if calling from `knapsack.config.js`, only use if creating a new Renderer based on the React Renderer */
|
32
32
|
id?: RendererId;
|
33
33
|
});
|
34
|
-
init:
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
34
|
+
init(opt: {
|
35
|
+
patterns: Patterns;
|
36
|
+
cacheDir: string;
|
37
|
+
}): Promise<void>;
|
38
|
+
getMeta: KnapsackTemplateRenderer['getMeta'];
|
39
|
+
changeCase(str: string): string;
|
40
|
+
createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
|
41
|
+
getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
|
39
42
|
prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
|
40
43
|
usage: string;
|
41
44
|
demoApp: string;
|
42
45
|
imports: KsJsImport[];
|
43
46
|
renderOptions: KnapsackRenderParams;
|
44
|
-
}):
|
45
|
-
render:
|
46
|
-
getUsageAndImports:
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
47
|
+
}): Promise<KnapsackTemplateRendererResults>;
|
48
|
+
render(opt: KnapsackRenderParams): Promise<KnapsackTemplateRendererResults>;
|
49
|
+
getUsageAndImports(opt: KnapsackRenderParams): Promise<{
|
50
|
+
usage: string;
|
51
|
+
imports: KsJsImport[];
|
52
|
+
}>;
|
53
|
+
getUsage(opt: KnapsackRenderParams): Promise<string>;
|
54
|
+
inferSpec: KnapsackTemplateRendererBase['inferSpec'];
|
55
|
+
watch(opt: Parameters<KnapsackTemplateRendererBase['watch']>[0]): Promise<void>;
|
56
|
+
getTemplateMeta: KnapsackTemplateRendererBase['getTemplateMeta'];
|
57
|
+
alterTemplateMetaFiles: KnapsackTemplateRendererBase['alterTemplateMetaFiles'];
|
58
|
+
getTemplateSuggestions({ newPath, }: Parameters<KnapsackTemplateRendererBase['getTemplateSuggestions']>[0]): ReturnType<KnapsackTemplateRendererBase['getTemplateSuggestions']>;
|
52
59
|
}
|
53
60
|
|
54
61
|
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.js
CHANGED
@@ -39,7 +39,6 @@ var import_sleep_promise = __toESM(require("sleep-promise"));
|
|
39
39
|
var import_renderer_webpack_base = require("@knapsack/renderer-webpack-base");
|
40
40
|
var import_utils3 = require("@knapsack/utils");
|
41
41
|
var import_app2 = require("@knapsack/app");
|
42
|
-
var import_renderers = require("@knapsack/app/renderers");
|
43
42
|
var import_types2 = require("@knapsack/types");
|
44
43
|
var import_file_utils3 = require("@knapsack/file-utils");
|
45
44
|
var import_path2 = require("path");
|
@@ -721,7 +720,8 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
|
|
721
720
|
// src/renderer-react.ts
|
722
721
|
var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
|
723
722
|
import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
|
724
|
-
var
|
723
|
+
var { createSlotOptionsHtmlTags } = import_app2.KnapsackRendererBase;
|
724
|
+
var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.KnapsackRendererWebpackBase {
|
725
725
|
static {
|
726
726
|
__name(this, "KnapsackReactRenderer");
|
727
727
|
}
|
@@ -730,6 +730,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
730
730
|
*/
|
731
731
|
assets;
|
732
732
|
babelConfig;
|
733
|
+
creators;
|
733
734
|
demoWrapperPath;
|
734
735
|
disableReactStrictMode;
|
735
736
|
constructor({
|
@@ -750,7 +751,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
750
751
|
this.disableReactStrictMode = disableReactStrictMode;
|
751
752
|
this.creators = [createReactPattern];
|
752
753
|
}
|
753
|
-
|
754
|
+
async init(opt) {
|
754
755
|
await super.init(opt);
|
755
756
|
this.assets = await copyReactAssets(this.outputDir, this.publicPath);
|
756
757
|
if (!await (0, import_file_utils3.exists)(this.demoWrapperPath)) {
|
@@ -758,7 +759,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
758
759
|
`Could not find demo wrapper at: "${this.demoWrapperPath}"`
|
759
760
|
);
|
760
761
|
}
|
761
|
-
}
|
762
|
+
}
|
762
763
|
getMeta = /* @__PURE__ */ __name(() => ({
|
763
764
|
id: this.id,
|
764
765
|
title: "React",
|
@@ -788,16 +789,18 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
788
789
|
}
|
789
790
|
}
|
790
791
|
}), "getMeta");
|
791
|
-
changeCase
|
792
|
-
|
792
|
+
changeCase(str) {
|
793
|
+
return (0, import_utils3.pascalCase)(str);
|
794
|
+
}
|
795
|
+
createWebpackConfig() {
|
793
796
|
const config = super.createWebpackConfig();
|
794
797
|
config.externals = {
|
795
798
|
react: "React",
|
796
799
|
"react-dom": "ReactDOM"
|
797
800
|
};
|
798
801
|
return config;
|
799
|
-
}
|
800
|
-
getJsImports
|
802
|
+
}
|
803
|
+
getJsImports() {
|
801
804
|
const imports = super.getJsImports();
|
802
805
|
imports.push(
|
803
806
|
{
|
@@ -818,7 +821,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
818
821
|
}
|
819
822
|
);
|
820
823
|
return imports;
|
821
|
-
}
|
824
|
+
}
|
822
825
|
async prepClientRenderResults({
|
823
826
|
usage,
|
824
827
|
demoApp,
|
@@ -943,7 +946,7 @@ ${renderReact.name}({
|
|
943
946
|
let codeHadError = false;
|
944
947
|
let errorHtmlMsg = "";
|
945
948
|
try {
|
946
|
-
code = await
|
949
|
+
code = await this.babelCodeForBrowser({
|
947
950
|
code
|
948
951
|
});
|
949
952
|
} catch (e) {
|
@@ -995,24 +998,18 @@ ${errorHtmlMsg}
|
|
995
998
|
templateLanguage: this.language
|
996
999
|
};
|
997
1000
|
}
|
998
|
-
|
999
|
-
if (opt.demo
|
1001
|
+
async render(opt) {
|
1002
|
+
if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
|
1000
1003
|
const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
|
1001
1004
|
let templateDemoPath;
|
1002
1005
|
let attempt = 0;
|
1003
1006
|
while (true) {
|
1004
1007
|
try {
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1008
|
+
templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
|
1009
|
+
patternId: opt.pattern.id,
|
1010
|
+
templateId: opt.template.id,
|
1011
|
+
demoId: opt.demo.id
|
1009
1012
|
});
|
1010
|
-
if (!exists) {
|
1011
|
-
throw new Error(
|
1012
|
-
`Template demo file does not exist: ${absolutePath}`
|
1013
|
-
);
|
1014
|
-
}
|
1015
|
-
templateDemoPath = absolutePath;
|
1016
1013
|
break;
|
1017
1014
|
} catch (e) {
|
1018
1015
|
const waitTime = waits[attempt];
|
@@ -1038,7 +1035,7 @@ ${errorHtmlMsg}
|
|
1038
1035
|
});
|
1039
1036
|
return results;
|
1040
1037
|
}
|
1041
|
-
if (opt.demo
|
1038
|
+
if (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
|
1042
1039
|
const { usage, imports } = await this.getUsageAndImports(opt);
|
1043
1040
|
const { code: importCode } = this.createJsImportCodeBlock({
|
1044
1041
|
imports
|
@@ -1059,14 +1056,10 @@ ${errorHtmlMsg}
|
|
1059
1056
|
renderOptions: opt
|
1060
1057
|
});
|
1061
1058
|
}
|
1062
|
-
}
|
1063
|
-
getUsageAndImports
|
1064
|
-
pattern,
|
1065
|
-
|
1066
|
-
patternManifest,
|
1067
|
-
demo
|
1068
|
-
}) => {
|
1069
|
-
if (demo?.type && demo.type === "data") {
|
1059
|
+
}
|
1060
|
+
async getUsageAndImports(opt) {
|
1061
|
+
const { pattern, template, patternManifest, demo } = opt;
|
1062
|
+
if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
|
1070
1063
|
const {
|
1071
1064
|
data: { props, slots, slotsOptionsComputed }
|
1072
1065
|
} = demo;
|
@@ -1090,16 +1083,16 @@ ${errorHtmlMsg}
|
|
1090
1083
|
const slotItems = slots[slotName];
|
1091
1084
|
const slotItemsUsages = await Promise.all(
|
1092
1085
|
slotItems.filter((slotItem) => {
|
1093
|
-
if (
|
1086
|
+
if (!(0, import_types2.isSlottedText)(slotItem)) {
|
1094
1087
|
if (!slotItem.patternId) return false;
|
1095
1088
|
if (!slotItem.templateId) return false;
|
1096
|
-
if (slotItem
|
1089
|
+
if ((0, import_types2.isSlottedTemplateDemo)(slotItem) && !slotItem.demoId) {
|
1097
1090
|
return false;
|
1098
1091
|
}
|
1099
1092
|
}
|
1100
1093
|
return true;
|
1101
1094
|
}).map(async (slotItem) => {
|
1102
|
-
if (
|
1095
|
+
if ((0, import_types2.isSlottedText)(slotItem)) {
|
1103
1096
|
if (slotItems.length === 1 && slotName !== "children") {
|
1104
1097
|
return `\`${slotItem.text}\``;
|
1105
1098
|
}
|
@@ -1111,7 +1104,7 @@ ${errorHtmlMsg}
|
|
1111
1104
|
const slotTemplate = slotPattern.templates.find(
|
1112
1105
|
(t) => t.id === slotItem.templateId
|
1113
1106
|
);
|
1114
|
-
if (
|
1107
|
+
if ((0, import_types2.isSlottedTemplateReference)(slotItem)) {
|
1115
1108
|
const { usage: usage2, imports } = await this.getUsageAndImports({
|
1116
1109
|
pattern: slotPattern,
|
1117
1110
|
template: slotTemplate,
|
@@ -1120,7 +1113,7 @@ ${errorHtmlMsg}
|
|
1120
1113
|
importInfos.push(...imports);
|
1121
1114
|
return usage2;
|
1122
1115
|
}
|
1123
|
-
if (
|
1116
|
+
if ((0, import_types2.isSlottedTemplateDemo)(slotItem)) {
|
1124
1117
|
const { usage: usage2, imports } = await this.getUsageAndImports({
|
1125
1118
|
pattern: slotPattern,
|
1126
1119
|
template: slotTemplate,
|
@@ -1143,7 +1136,7 @@ ${errorHtmlMsg}
|
|
1143
1136
|
);
|
1144
1137
|
slotUsages.forEach(({ slotName, slotItemsUsages }) => {
|
1145
1138
|
const slotOptionsComputed = slotsOptionsComputed?.[slotName];
|
1146
|
-
const { openTag, closeTag } =
|
1139
|
+
const { openTag, closeTag } = createSlotOptionsHtmlTags({
|
1147
1140
|
slotOptionsComputed,
|
1148
1141
|
classAttributeName: "className",
|
1149
1142
|
stylesValueType: "object"
|
@@ -1191,7 +1184,7 @@ ${errorHtmlMsg}
|
|
1191
1184
|
imports: importInfos
|
1192
1185
|
};
|
1193
1186
|
}
|
1194
|
-
if (demo?.type && demo
|
1187
|
+
if (demo?.type && _KnapsackReactRenderer.isTemplateDemo(demo)) {
|
1195
1188
|
const importInfo = this.getJsImport({
|
1196
1189
|
patternId: pattern.id,
|
1197
1190
|
templateId: template.id,
|
@@ -1235,7 +1228,11 @@ ${errorHtmlMsg}
|
|
1235
1228
|
demo
|
1236
1229
|
)}`
|
1237
1230
|
);
|
1238
|
-
}
|
1231
|
+
}
|
1232
|
+
async getUsage(opt) {
|
1233
|
+
const { usage } = await this.getUsageAndImports(opt);
|
1234
|
+
return usage;
|
1235
|
+
}
|
1239
1236
|
inferSpec = /* @__PURE__ */ __name(async ({
|
1240
1237
|
template,
|
1241
1238
|
templatePath
|
@@ -1254,12 +1251,12 @@ ${errorHtmlMsg}
|
|
1254
1251
|
}
|
1255
1252
|
return spec;
|
1256
1253
|
}, "inferSpec");
|
1257
|
-
|
1258
|
-
super.watch(opt);
|
1254
|
+
async watch(opt) {
|
1255
|
+
await super.watch(opt);
|
1259
1256
|
import_app2.knapsackEvents.onPatternTemplateChanged(() => {
|
1260
1257
|
clearInferSpecCache();
|
1261
1258
|
});
|
1262
|
-
}
|
1259
|
+
}
|
1263
1260
|
getTemplateMeta = /* @__PURE__ */ __name(async ({
|
1264
1261
|
pattern,
|
1265
1262
|
template
|
@@ -1302,10 +1299,7 @@ ${errorHtmlMsg}
|
|
1302
1299
|
}
|
1303
1300
|
return files;
|
1304
1301
|
}, "getTemplateMeta");
|
1305
|
-
alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
|
1306
|
-
files,
|
1307
|
-
metaDir
|
1308
|
-
}) => {
|
1302
|
+
alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({ files, metaDir }) => {
|
1309
1303
|
const imports = [];
|
1310
1304
|
const ext = ".spec.d.ts";
|
1311
1305
|
files.forEach((file) => {
|
@@ -1332,9 +1326,9 @@ ${errorHtmlMsg}
|
|
1332
1326
|
}
|
1333
1327
|
];
|
1334
1328
|
}, "alterTemplateMetaFiles");
|
1335
|
-
|
1329
|
+
async getTemplateSuggestions({
|
1336
1330
|
newPath
|
1337
|
-
})
|
1331
|
+
}) {
|
1338
1332
|
const { data: dataDir } = this.patterns.userConfig;
|
1339
1333
|
const { allTemplateDemos, allTemplates } = this.getMyTemplates();
|
1340
1334
|
const usedSuggestions = [
|
@@ -1385,7 +1379,7 @@ ${errorHtmlMsg}
|
|
1385
1379
|
return {
|
1386
1380
|
suggestions
|
1387
1381
|
};
|
1388
|
-
}
|
1382
|
+
}
|
1389
1383
|
};
|
1390
1384
|
// Annotate the CommonJS export names for ESM import in node:
|
1391
1385
|
0 && (module.exports = {
|