@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.
Files changed (11) hide show
  1. package/dist/demo-wrapper.d.mts +1 -0
  2. package/dist/demo-wrapper.d.ts +1 -0
  3. package/dist/error-catcher.js.map +1 -1
  4. package/dist/error-catcher.mjs.map +1 -1
  5. package/dist/index.d.mts +18 -25
  6. package/dist/index.d.ts +18 -25
  7. package/dist/index.js +49 -43
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +57 -50
  10. package/dist/index.mjs.map +1 -1
  11. 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
 
package/dist/error-catcher.js.map CHANGED
@@ -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,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
+ {"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":[]}
package/dist/error-catcher.mjs.map CHANGED
@@ -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,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":[]}
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 { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
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, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
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 KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
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 KnapsackRendererWebpackBase>[0]['webpackConfig'];
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(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']>;
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
- }): 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']>;
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 { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
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, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
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 KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
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 KnapsackRendererWebpackBase>[0]['webpackConfig'];
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(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']>;
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
- }): 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']>;
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 { createSlotOptionsHtmlTags } = import_app2.KnapsackRendererBase;
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 init(opt) {
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
- return (0, import_utils3.pascalCase)(str);
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 this.babelCodeForBrowser({
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 render(opt) {
1002
- if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
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
- templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
1009
- patternId: opt.pattern.id,
1010
- templateId: opt.template.id,
1011
- demoId: opt.demo.id
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 (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
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 getUsageAndImports(opt) {
1061
- const { pattern, template, patternManifest, demo } = opt;
1062
- if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
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 (!(0, import_types2.isSlottedText)(slotItem)) {
1093
+ if (slotItem.type !== "text") {
1087
1094
  if (!slotItem.patternId) return false;
1088
1095
  if (!slotItem.templateId) return false;
1089
- if ((0, import_types2.isSlottedTemplateDemo)(slotItem) && !slotItem.demoId) {
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 ((0, import_types2.isSlottedText)(slotItem)) {
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 ((0, import_types2.isSlottedTemplateReference)(slotItem)) {
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 ((0, import_types2.isSlottedTemplateDemo)(slotItem)) {
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 && _KnapsackReactRenderer.isTemplateDemo(demo)) {
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 watch(opt) {
1255
- await super.watch(opt);
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 ({ files, metaDir }) => {
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 getTemplateSuggestions({
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 = {