@knapsack/renderer-react 4.69.8--canary.4762.be86288.0 → 4.69.8--canary.4746.1acd21a.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/demo-wrapper.d.mts +1 -0
- package/dist/demo-wrapper.d.ts +1 -0
- package/dist/error-catcher.js.map +1 -1
- package/dist/error-catcher.mjs.map +1 -1
- package/dist/index.d.mts +18 -25
- package/dist/index.d.ts +18 -25
- package/dist/index.js +49 -43
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +57 -50
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -13
package/dist/demo-wrapper.d.mts
CHANGED
@@ -2,6 +2,7 @@ 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';
|
5
6
|
import '@knapsack/types';
|
6
7
|
import '@knapsack/app/types';
|
7
8
|
|
package/dist/demo-wrapper.d.ts
CHANGED
@@ -2,6 +2,7 @@ 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';
|
5
6
|
import '@knapsack/types';
|
6
7
|
import '@knapsack/app/types';
|
7
8
|
|
@@ -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 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,
|
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 override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { componentStack } = errorInfo;\n this.setState({\n error,\n componentStack,\n });\n }\n\n override 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,EAES,kBAAkB,OAAc,WAAkC;AACzE,UAAM,EAAE,eAAe,IAAI;AAC3B,SAAK,SAAS;AAAA,MACZ;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,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 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,
|
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 override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { componentStack } = errorInfo;\n this.setState({\n error,\n componentStack,\n });\n }\n\n override 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,EAES,kBAAkB,OAAc,WAAkC;AACzE,UAAM,EAAE,eAAe,IAAI;AAC3B,SAAK,SAAS;AAAA,MACZ;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,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,7 +1,8 @@
|
|
1
|
-
import {
|
1
|
+
import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
|
2
2
|
import { Except } from '@knapsack/utils';
|
3
|
+
import { Renderable } from '@knapsack/app/renderers';
|
3
4
|
import { RendererId, KsJsImport } from '@knapsack/types';
|
4
|
-
import { KnapsackRenderParams
|
5
|
+
import { KnapsackRenderParams } from '@knapsack/app/types';
|
5
6
|
|
6
7
|
type DemoWrapperProps = {
|
7
8
|
children: React.ReactNode;
|
@@ -11,17 +12,16 @@ type DemoWrapperProps = {
|
|
11
12
|
demoId?: string;
|
12
13
|
}[];
|
13
14
|
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
14
|
-
declare class KnapsackReactRenderer extends
|
15
|
+
declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
|
15
16
|
/**
|
16
17
|
* `react.js` & `react-dom.js` root relative paths
|
17
18
|
*/
|
18
19
|
assets: string[];
|
19
20
|
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 RendererWebpackBase>[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,31 +31,24 @@ declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implemen
|
|
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
|
-
|
39
|
-
changeCase(str: string): string;
|
40
|
-
createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
|
41
|
-
getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
|
34
|
+
init: Renderer['init'];
|
35
|
+
getMeta: Renderer['getMeta'];
|
36
|
+
changeCase: Renderer['changeCase'];
|
37
|
+
createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
|
38
|
+
getJsImports: RendererWebpackBase['getJsImports'];
|
42
39
|
prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
|
43
40
|
usage: string;
|
44
41
|
demoApp: string;
|
45
42
|
imports: KsJsImport[];
|
46
43
|
renderOptions: KnapsackRenderParams;
|
47
|
-
}):
|
48
|
-
render
|
49
|
-
getUsageAndImports
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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']>;
|
44
|
+
}): ReturnType<Renderer['render']>;
|
45
|
+
render: Renderer['render'];
|
46
|
+
getUsageAndImports: RendererWebpackBase['getUsageAndImports'];
|
47
|
+
inferSpec: Renderer['inferSpec'];
|
48
|
+
watch: Renderer['watch'];
|
49
|
+
getTemplateMeta: Renderer['getTemplateMeta'];
|
50
|
+
alterTemplateMetaFiles: Renderer['alterTemplateMetaFiles'];
|
51
|
+
getTemplateSuggestions: Renderer['getTemplateSuggestions'];
|
59
52
|
}
|
60
53
|
|
61
54
|
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.d.ts
CHANGED
@@ -1,7 +1,8 @@
|
|
1
|
-
import {
|
1
|
+
import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
|
2
2
|
import { Except } from '@knapsack/utils';
|
3
|
+
import { Renderable } from '@knapsack/app/renderers';
|
3
4
|
import { RendererId, KsJsImport } from '@knapsack/types';
|
4
|
-
import { KnapsackRenderParams
|
5
|
+
import { KnapsackRenderParams } from '@knapsack/app/types';
|
5
6
|
|
6
7
|
type DemoWrapperProps = {
|
7
8
|
children: React.ReactNode;
|
@@ -11,17 +12,16 @@ type DemoWrapperProps = {
|
|
11
12
|
demoId?: string;
|
12
13
|
}[];
|
13
14
|
} & Except<KnapsackRenderParams, 'patternManifest'>;
|
14
|
-
declare class KnapsackReactRenderer extends
|
15
|
+
declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
|
15
16
|
/**
|
16
17
|
* `react.js` & `react-dom.js` root relative paths
|
17
18
|
*/
|
18
19
|
assets: string[];
|
19
20
|
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 RendererWebpackBase>[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,31 +31,24 @@ declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implemen
|
|
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
|
-
|
39
|
-
changeCase(str: string): string;
|
40
|
-
createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
|
41
|
-
getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
|
34
|
+
init: Renderer['init'];
|
35
|
+
getMeta: Renderer['getMeta'];
|
36
|
+
changeCase: Renderer['changeCase'];
|
37
|
+
createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
|
38
|
+
getJsImports: RendererWebpackBase['getJsImports'];
|
42
39
|
prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
|
43
40
|
usage: string;
|
44
41
|
demoApp: string;
|
45
42
|
imports: KsJsImport[];
|
46
43
|
renderOptions: KnapsackRenderParams;
|
47
|
-
}):
|
48
|
-
render
|
49
|
-
getUsageAndImports
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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']>;
|
44
|
+
}): ReturnType<Renderer['render']>;
|
45
|
+
render: Renderer['render'];
|
46
|
+
getUsageAndImports: RendererWebpackBase['getUsageAndImports'];
|
47
|
+
inferSpec: Renderer['inferSpec'];
|
48
|
+
watch: Renderer['watch'];
|
49
|
+
getTemplateMeta: Renderer['getTemplateMeta'];
|
50
|
+
alterTemplateMetaFiles: Renderer['alterTemplateMetaFiles'];
|
51
|
+
getTemplateSuggestions: Renderer['getTemplateSuggestions'];
|
59
52
|
}
|
60
53
|
|
61
54
|
export { type DemoWrapperProps, KnapsackReactRenderer };
|
package/dist/index.js
CHANGED
@@ -39,6 +39,7 @@ 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");
|
42
43
|
var import_types2 = require("@knapsack/types");
|
43
44
|
var import_file_utils3 = require("@knapsack/file-utils");
|
44
45
|
var import_path2 = require("path");
|
@@ -720,8 +721,7 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
|
|
720
721
|
// src/renderer-react.ts
|
721
722
|
var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
|
722
723
|
import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
|
723
|
-
var
|
724
|
-
var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.KnapsackRendererWebpackBase {
|
724
|
+
var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
|
725
725
|
static {
|
726
726
|
__name(this, "KnapsackReactRenderer");
|
727
727
|
}
|
@@ -730,7 +730,6 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
730
730
|
*/
|
731
731
|
assets;
|
732
732
|
babelConfig;
|
733
|
-
creators;
|
734
733
|
demoWrapperPath;
|
735
734
|
disableReactStrictMode;
|
736
735
|
constructor({
|
@@ -751,7 +750,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
751
750
|
this.disableReactStrictMode = disableReactStrictMode;
|
752
751
|
this.creators = [createReactPattern];
|
753
752
|
}
|
754
|
-
async
|
753
|
+
init = /* @__PURE__ */ __name(async (opt) => {
|
755
754
|
await super.init(opt);
|
756
755
|
this.assets = await copyReactAssets(this.outputDir, this.publicPath);
|
757
756
|
if (!await (0, import_file_utils3.exists)(this.demoWrapperPath)) {
|
@@ -759,7 +758,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
759
758
|
`Could not find demo wrapper at: "${this.demoWrapperPath}"`
|
760
759
|
);
|
761
760
|
}
|
762
|
-
}
|
761
|
+
}, "init");
|
763
762
|
getMeta = /* @__PURE__ */ __name(() => ({
|
764
763
|
id: this.id,
|
765
764
|
title: "React",
|
@@ -789,18 +788,16 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
789
788
|
}
|
790
789
|
}
|
791
790
|
}), "getMeta");
|
792
|
-
changeCase(str)
|
793
|
-
|
794
|
-
}
|
795
|
-
createWebpackConfig() {
|
791
|
+
changeCase = /* @__PURE__ */ __name((str) => (0, import_utils3.pascalCase)(str), "changeCase");
|
792
|
+
createWebpackConfig = /* @__PURE__ */ __name(() => {
|
796
793
|
const config = super.createWebpackConfig();
|
797
794
|
config.externals = {
|
798
795
|
react: "React",
|
799
796
|
"react-dom": "ReactDOM"
|
800
797
|
};
|
801
798
|
return config;
|
802
|
-
}
|
803
|
-
getJsImports() {
|
799
|
+
}, "createWebpackConfig");
|
800
|
+
getJsImports = /* @__PURE__ */ __name(() => {
|
804
801
|
const imports = super.getJsImports();
|
805
802
|
imports.push(
|
806
803
|
{
|
@@ -821,7 +818,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
|
|
821
818
|
}
|
822
819
|
);
|
823
820
|
return imports;
|
824
|
-
}
|
821
|
+
}, "getJsImports");
|
825
822
|
async prepClientRenderResults({
|
826
823
|
usage,
|
827
824
|
demoApp,
|
@@ -946,7 +943,7 @@ ${renderReact.name}({
|
|
946
943
|
let codeHadError = false;
|
947
944
|
let errorHtmlMsg = "";
|
948
945
|
try {
|
949
|
-
code = await
|
946
|
+
code = await (0, import_renderers.babelCodeForBrowser)({
|
950
947
|
code
|
951
948
|
});
|
952
949
|
} catch (e) {
|
@@ -998,18 +995,24 @@ ${errorHtmlMsg}
|
|
998
995
|
templateLanguage: this.language
|
999
996
|
};
|
1000
997
|
}
|
1001
|
-
async
|
1002
|
-
if (
|
998
|
+
render = /* @__PURE__ */ __name(async (opt) => {
|
999
|
+
if (opt.demo?.type === "template") {
|
1003
1000
|
const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
|
1004
1001
|
let templateDemoPath;
|
1005
1002
|
let attempt = 0;
|
1006
1003
|
while (true) {
|
1007
1004
|
try {
|
1008
|
-
|
1009
|
-
|
1010
|
-
|
1011
|
-
|
1005
|
+
const { absolutePath, exists } = await (0, import_file_utils3.resolvePath)({
|
1006
|
+
path: opt.demo.templateInfo.path,
|
1007
|
+
pkgPathAliases: this.pkgPathAliases,
|
1008
|
+
resolveFromDir: this.dataDir
|
1012
1009
|
});
|
1010
|
+
if (!exists) {
|
1011
|
+
throw new Error(
|
1012
|
+
`Template demo file does not exist: ${absolutePath}`
|
1013
|
+
);
|
1014
|
+
}
|
1015
|
+
templateDemoPath = absolutePath;
|
1013
1016
|
break;
|
1014
1017
|
} catch (e) {
|
1015
1018
|
const waitTime = waits[attempt];
|
@@ -1035,7 +1038,7 @@ ${errorHtmlMsg}
|
|
1035
1038
|
});
|
1036
1039
|
return results;
|
1037
1040
|
}
|
1038
|
-
if (
|
1041
|
+
if (opt.demo?.type === "data") {
|
1039
1042
|
const { usage, imports } = await this.getUsageAndImports(opt);
|
1040
1043
|
const { code: importCode } = this.createJsImportCodeBlock({
|
1041
1044
|
imports
|
@@ -1056,10 +1059,14 @@ ${errorHtmlMsg}
|
|
1056
1059
|
renderOptions: opt
|
1057
1060
|
});
|
1058
1061
|
}
|
1059
|
-
}
|
1060
|
-
async
|
1061
|
-
|
1062
|
-
|
1062
|
+
}, "render");
|
1063
|
+
getUsageAndImports = /* @__PURE__ */ __name(async ({
|
1064
|
+
pattern,
|
1065
|
+
template,
|
1066
|
+
patternManifest,
|
1067
|
+
demo
|
1068
|
+
}) => {
|
1069
|
+
if (demo?.type && demo.type === "data") {
|
1063
1070
|
const {
|
1064
1071
|
data: { props, slots, slotsOptionsComputed }
|
1065
1072
|
} = demo;
|
@@ -1083,16 +1090,16 @@ ${errorHtmlMsg}
|
|
1083
1090
|
const slotItems = slots[slotName];
|
1084
1091
|
const slotItemsUsages = await Promise.all(
|
1085
1092
|
slotItems.filter((slotItem) => {
|
1086
|
-
if (
|
1093
|
+
if (slotItem.type !== "text") {
|
1087
1094
|
if (!slotItem.patternId) return false;
|
1088
1095
|
if (!slotItem.templateId) return false;
|
1089
|
-
if (
|
1096
|
+
if (slotItem.type === "template-demo" && !slotItem.demoId) {
|
1090
1097
|
return false;
|
1091
1098
|
}
|
1092
1099
|
}
|
1093
1100
|
return true;
|
1094
1101
|
}).map(async (slotItem) => {
|
1095
|
-
if (
|
1102
|
+
if (slotItem.type === "text") {
|
1096
1103
|
if (slotItems.length === 1 && slotName !== "children") {
|
1097
1104
|
return `\`${slotItem.text}\``;
|
1098
1105
|
}
|
@@ -1104,7 +1111,7 @@ ${errorHtmlMsg}
|
|
1104
1111
|
const slotTemplate = slotPattern.templates.find(
|
1105
1112
|
(t) => t.id === slotItem.templateId
|
1106
1113
|
);
|
1107
|
-
if (
|
1114
|
+
if (slotItem.type === "template-reference") {
|
1108
1115
|
const { usage: usage2, imports } = await this.getUsageAndImports({
|
1109
1116
|
pattern: slotPattern,
|
1110
1117
|
template: slotTemplate,
|
@@ -1113,7 +1120,7 @@ ${errorHtmlMsg}
|
|
1113
1120
|
importInfos.push(...imports);
|
1114
1121
|
return usage2;
|
1115
1122
|
}
|
1116
|
-
if (
|
1123
|
+
if (slotItem.type === "template-demo") {
|
1117
1124
|
const { usage: usage2, imports } = await this.getUsageAndImports({
|
1118
1125
|
pattern: slotPattern,
|
1119
1126
|
template: slotTemplate,
|
@@ -1136,7 +1143,7 @@ ${errorHtmlMsg}
|
|
1136
1143
|
);
|
1137
1144
|
slotUsages.forEach(({ slotName, slotItemsUsages }) => {
|
1138
1145
|
const slotOptionsComputed = slotsOptionsComputed?.[slotName];
|
1139
|
-
const { openTag, closeTag } = createSlotOptionsHtmlTags({
|
1146
|
+
const { openTag, closeTag } = (0, import_renderers.createSlotOptionsHtmlTags)({
|
1140
1147
|
slotOptionsComputed,
|
1141
1148
|
classAttributeName: "className",
|
1142
1149
|
stylesValueType: "object"
|
@@ -1184,7 +1191,7 @@ ${errorHtmlMsg}
|
|
1184
1191
|
imports: importInfos
|
1185
1192
|
};
|
1186
1193
|
}
|
1187
|
-
if (demo?.type &&
|
1194
|
+
if (demo?.type && demo.type === "template") {
|
1188
1195
|
const importInfo = this.getJsImport({
|
1189
1196
|
patternId: pattern.id,
|
1190
1197
|
templateId: template.id,
|
@@ -1228,11 +1235,7 @@ ${errorHtmlMsg}
|
|
1228
1235
|
demo
|
1229
1236
|
)}`
|
1230
1237
|
);
|
1231
|
-
}
|
1232
|
-
async getUsage(opt) {
|
1233
|
-
const { usage } = await this.getUsageAndImports(opt);
|
1234
|
-
return usage;
|
1235
|
-
}
|
1238
|
+
}, "getUsageAndImports");
|
1236
1239
|
inferSpec = /* @__PURE__ */ __name(async ({
|
1237
1240
|
template,
|
1238
1241
|
templatePath
|
@@ -1251,12 +1254,12 @@ ${errorHtmlMsg}
|
|
1251
1254
|
}
|
1252
1255
|
return spec;
|
1253
1256
|
}, "inferSpec");
|
1254
|
-
async
|
1255
|
-
|
1257
|
+
watch = /* @__PURE__ */ __name(async (opt) => {
|
1258
|
+
super.watch(opt);
|
1256
1259
|
import_app2.knapsackEvents.onPatternTemplateChanged(() => {
|
1257
1260
|
clearInferSpecCache();
|
1258
1261
|
});
|
1259
|
-
}
|
1262
|
+
}, "watch");
|
1260
1263
|
getTemplateMeta = /* @__PURE__ */ __name(async ({
|
1261
1264
|
pattern,
|
1262
1265
|
template
|
@@ -1299,7 +1302,10 @@ ${errorHtmlMsg}
|
|
1299
1302
|
}
|
1300
1303
|
return files;
|
1301
1304
|
}, "getTemplateMeta");
|
1302
|
-
alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
|
1305
|
+
alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
|
1306
|
+
files,
|
1307
|
+
metaDir
|
1308
|
+
}) => {
|
1303
1309
|
const imports = [];
|
1304
1310
|
const ext = ".spec.d.ts";
|
1305
1311
|
files.forEach((file) => {
|
@@ -1326,9 +1332,9 @@ ${errorHtmlMsg}
|
|
1326
1332
|
}
|
1327
1333
|
];
|
1328
1334
|
}, "alterTemplateMetaFiles");
|
1329
|
-
async
|
1335
|
+
getTemplateSuggestions = /* @__PURE__ */ __name(async ({
|
1330
1336
|
newPath
|
1331
|
-
}) {
|
1337
|
+
}) => {
|
1332
1338
|
const { data: dataDir } = this.patterns.userConfig;
|
1333
1339
|
const { allTemplateDemos, allTemplates } = this.getMyTemplates();
|
1334
1340
|
const usedSuggestions = [
|
@@ -1379,7 +1385,7 @@ ${errorHtmlMsg}
|
|
1379
1385
|
return {
|
1380
1386
|
suggestions
|
1381
1387
|
};
|
1382
|
-
}
|
1388
|
+
}, "getTemplateSuggestions");
|
1383
1389
|
};
|
1384
1390
|
// Annotate the CommonJS export names for ESM import in node:
|
1385
1391
|
0 && (module.exports = {
|