@knapsack/renderer-react 4.69.8--canary.4739.fd1795e.0 → 4.69.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/demo-wrapper.d.mts +1 -0
  3. package/dist/demo-wrapper.d.ts +1 -0
  4. package/dist/error-catcher.js.map +1 -1
  5. package/dist/error-catcher.mjs.map +1 -1
  6. package/dist/index.d.mts +18 -25
  7. package/dist/index.d.ts +18 -25
  8. package/dist/index.js +49 -43
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +57 -50
  11. package/dist/index.mjs.map +1 -1
  12. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
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
+
1
13
  # v4.69.7 (Wed Sep 11 2024)
2
14
 
3
15
  #### 🐛 Bug Fix
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 = {