@knapsack/renderer-react 4.69.8 → 4.69.9--canary.4745.6c2414b.0

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.
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
@@ -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
 
@@ -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 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
+ {"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 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":[]}
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 { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
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 RendererWebpackBase implements Renderable {
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 RendererWebpackBase>[0]['webpackConfig'];
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: Renderer['init'];
35
- getMeta: Renderer['getMeta'];
36
- changeCase: Renderer['changeCase'];
37
- createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
38
- getJsImports: RendererWebpackBase['getJsImports'];
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
- }): 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'];
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 { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
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 RendererWebpackBase implements Renderable {
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 RendererWebpackBase>[0]['webpackConfig'];
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: Renderer['init'];
35
- getMeta: Renderer['getMeta'];
36
- changeCase: Renderer['changeCase'];
37
- createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
38
- getJsImports: RendererWebpackBase['getJsImports'];
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
- }): 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'];
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 KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
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
- init = /* @__PURE__ */ __name(async (opt) => {
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
- }, "init");
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 = /* @__PURE__ */ __name((str) => (0, import_utils3.pascalCase)(str), "changeCase");
792
- createWebpackConfig = /* @__PURE__ */ __name(() => {
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
- }, "createWebpackConfig");
800
- getJsImports = /* @__PURE__ */ __name(() => {
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
- }, "getJsImports");
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 (0, import_renderers.babelCodeForBrowser)({
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
- render = /* @__PURE__ */ __name(async (opt) => {
999
- if (opt.demo?.type === "template") {
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
- const { absolutePath, exists } = await (0, import_file_utils3.resolvePath)({
1006
- path: opt.demo.templateInfo.path,
1007
- pkgPathAliases: this.pkgPathAliases,
1008
- resolveFromDir: this.dataDir
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?.type === "data") {
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
- }, "render");
1063
- getUsageAndImports = /* @__PURE__ */ __name(async ({
1064
- pattern,
1065
- template,
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 (slotItem.type !== "text") {
1086
+ if (!(0, import_types2.isSlottedText)(slotItem)) {
1094
1087
  if (!slotItem.patternId) return false;
1095
1088
  if (!slotItem.templateId) return false;
1096
- if (slotItem.type === "template-demo" && !slotItem.demoId) {
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 (slotItem.type === "text") {
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 (slotItem.type === "template-reference") {
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 (slotItem.type === "template-demo") {
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 } = (0, import_renderers.createSlotOptionsHtmlTags)({
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.type === "template") {
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
- }, "getUsageAndImports");
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
- watch = /* @__PURE__ */ __name(async (opt) => {
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
- }, "watch");
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
- getTemplateSuggestions = /* @__PURE__ */ __name(async ({
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
- }, "getTemplateSuggestions");
1382
+ }
1389
1383
  };
1390
1384
  // Annotate the CommonJS export names for ESM import in node:
1391
1385
  0 && (module.exports = {