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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.69.8 (Thu Sep 12 2024)
+
+#### 🐛 Bug Fix
+
+- refactor Renderers for cleaner types [#4746](https://github.com/knapsack-labs/app-monorepo/pull/4746) ([@EvanLovely](https://github.com/EvanLovely))
+
+#### Authors: 1
+
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+
+---
+
 # v4.69.7 (Wed Sep 11 2024)
 
 #### 🐛 Bug Fix

package/dist/demo-wrapper.d.mts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DemoWrapperProps } from './index.mjs';
 import '@knapsack/renderer-webpack-base';
 import '@knapsack/utils';
+import '@knapsack/app/renderers';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/demo-wrapper.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DemoWrapperProps } from './index.js';
 import '@knapsack/renderer-webpack-base';
 import '@knapsack/utils';
+import '@knapsack/app/renderers';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/error-catcher.js.map

@@ -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":[]}
+{"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

@@ -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":[]}
+{"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

@@ -1,7 +1,8 @@
-import { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
+import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
 import { Except } from '@knapsack/utils';
+import { Renderable } from '@knapsack/app/renderers';
 import { RendererId, KsJsImport } from '@knapsack/types';
-import { KnapsackRenderParams, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
+import { KnapsackRenderParams } from '@knapsack/app/types';
 
 type DemoWrapperProps = {
     children: React.ReactNode;
@@ -11,17 +12,16 @@ type DemoWrapperProps = {
         demoId?: string;
     }[];
 } & Except<KnapsackRenderParams, 'patternManifest'>;
-declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
+declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
      */
     assets: string[];
     babelConfig: Record<string, unknown>;
-    creators: KnapsackTemplateRenderer['creators'];
     private demoWrapperPath;
     private disableReactStrictMode?;
     constructor({ webpackConfig, demoWrapperPath, id, disableReactStrictMode, }?: {
-        webpackConfig?: ConstructorParameters<typeof KnapsackRendererWebpackBase>[0]['webpackConfig'];
+        webpackConfig?: ConstructorParameters<typeof RendererWebpackBase>[0]['webpackConfig'];
         demoWrapperPath?: string;
         /** 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).
          *
@@ -31,31 +31,24 @@ declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implemen
         /** Don't set if calling from `knapsack.config.js`, only use if creating a new Renderer based on the React Renderer */
         id?: RendererId;
     });
-    init(opt: {
-        patterns: Patterns;
-        cacheDir: string;
-    }): Promise<void>;
-    getMeta: KnapsackTemplateRenderer['getMeta'];
-    changeCase(str: string): string;
-    createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
-    getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
+    init: Renderer['init'];
+    getMeta: Renderer['getMeta'];
+    changeCase: Renderer['changeCase'];
+    createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
+    getJsImports: RendererWebpackBase['getJsImports'];
     prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
         usage: string;
         demoApp: string;
         imports: KsJsImport[];
         renderOptions: KnapsackRenderParams;
-    }): Promise<KnapsackTemplateRendererResults>;
-    render(opt: KnapsackRenderParams): Promise<KnapsackTemplateRendererResults>;
-    getUsageAndImports(opt: KnapsackRenderParams): Promise<{
-        usage: string;
-        imports: KsJsImport[];
-    }>;
-    getUsage(opt: KnapsackRenderParams): Promise<string>;
-    inferSpec: KnapsackTemplateRendererBase['inferSpec'];
-    watch(opt: Parameters<KnapsackTemplateRendererBase['watch']>[0]): Promise<void>;
-    getTemplateMeta: KnapsackTemplateRendererBase['getTemplateMeta'];
-    alterTemplateMetaFiles: KnapsackTemplateRendererBase['alterTemplateMetaFiles'];
-    getTemplateSuggestions({ newPath, }: Parameters<KnapsackTemplateRendererBase['getTemplateSuggestions']>[0]): ReturnType<KnapsackTemplateRendererBase['getTemplateSuggestions']>;
+    }): ReturnType<Renderer['render']>;
+    render: Renderer['render'];
+    getUsageAndImports: RendererWebpackBase['getUsageAndImports'];
+    inferSpec: Renderer['inferSpec'];
+    watch: Renderer['watch'];
+    getTemplateMeta: Renderer['getTemplateMeta'];
+    alterTemplateMetaFiles: Renderer['alterTemplateMetaFiles'];
+    getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
 export { type DemoWrapperProps, KnapsackReactRenderer };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import { KnapsackRendererWebpackBase } from '@knapsack/renderer-webpack-base';
+import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
 import { Except } from '@knapsack/utils';
+import { Renderable } from '@knapsack/app/renderers';
 import { RendererId, KsJsImport } from '@knapsack/types';
-import { KnapsackRenderParams, KnapsackTemplateRenderer, Patterns, KnapsackTemplateRendererResults, KnapsackTemplateRendererBase } from '@knapsack/app/types';
+import { KnapsackRenderParams } from '@knapsack/app/types';
 
 type DemoWrapperProps = {
     children: React.ReactNode;
@@ -11,17 +12,16 @@ type DemoWrapperProps = {
         demoId?: string;
     }[];
 } & Except<KnapsackRenderParams, 'patternManifest'>;
-declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implements KnapsackTemplateRenderer {
+declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
      */
     assets: string[];
     babelConfig: Record<string, unknown>;
-    creators: KnapsackTemplateRenderer['creators'];
     private demoWrapperPath;
     private disableReactStrictMode?;
     constructor({ webpackConfig, demoWrapperPath, id, disableReactStrictMode, }?: {
-        webpackConfig?: ConstructorParameters<typeof KnapsackRendererWebpackBase>[0]['webpackConfig'];
+        webpackConfig?: ConstructorParameters<typeof RendererWebpackBase>[0]['webpackConfig'];
         demoWrapperPath?: string;
         /** 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).
          *
@@ -31,31 +31,24 @@ declare class KnapsackReactRenderer extends KnapsackRendererWebpackBase implemen
         /** Don't set if calling from `knapsack.config.js`, only use if creating a new Renderer based on the React Renderer */
         id?: RendererId;
     });
-    init(opt: {
-        patterns: Patterns;
-        cacheDir: string;
-    }): Promise<void>;
-    getMeta: KnapsackTemplateRenderer['getMeta'];
-    changeCase(str: string): string;
-    createWebpackConfig(): ReturnType<KnapsackRendererWebpackBase['createWebpackConfig']>;
-    getJsImports(): ReturnType<KnapsackRendererWebpackBase['getJsImports']>;
+    init: Renderer['init'];
+    getMeta: Renderer['getMeta'];
+    changeCase: Renderer['changeCase'];
+    createWebpackConfig: RendererWebpackBase['createWebpackConfig'];
+    getJsImports: RendererWebpackBase['getJsImports'];
     prepClientRenderResults({ usage, demoApp, imports: xImports, renderOptions: { pattern, template, demo }, }: {
         usage: string;
         demoApp: string;
         imports: KsJsImport[];
         renderOptions: KnapsackRenderParams;
-    }): Promise<KnapsackTemplateRendererResults>;
-    render(opt: KnapsackRenderParams): Promise<KnapsackTemplateRendererResults>;
-    getUsageAndImports(opt: KnapsackRenderParams): Promise<{
-        usage: string;
-        imports: KsJsImport[];
-    }>;
-    getUsage(opt: KnapsackRenderParams): Promise<string>;
-    inferSpec: KnapsackTemplateRendererBase['inferSpec'];
-    watch(opt: Parameters<KnapsackTemplateRendererBase['watch']>[0]): Promise<void>;
-    getTemplateMeta: KnapsackTemplateRendererBase['getTemplateMeta'];
-    alterTemplateMetaFiles: KnapsackTemplateRendererBase['alterTemplateMetaFiles'];
-    getTemplateSuggestions({ newPath, }: Parameters<KnapsackTemplateRendererBase['getTemplateSuggestions']>[0]): ReturnType<KnapsackTemplateRendererBase['getTemplateSuggestions']>;
+    }): ReturnType<Renderer['render']>;
+    render: Renderer['render'];
+    getUsageAndImports: RendererWebpackBase['getUsageAndImports'];
+    inferSpec: Renderer['inferSpec'];
+    watch: Renderer['watch'];
+    getTemplateMeta: Renderer['getTemplateMeta'];
+    alterTemplateMetaFiles: Renderer['alterTemplateMetaFiles'];
+    getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
 export { type DemoWrapperProps, KnapsackReactRenderer };

package/dist/index.js

@@ -39,6 +39,7 @@ var import_sleep_promise = __toESM(require("sleep-promise"));
 var import_renderer_webpack_base = require("@knapsack/renderer-webpack-base");
 var import_utils3 = require("@knapsack/utils");
 var import_app2 = require("@knapsack/app");
+var import_renderers = require("@knapsack/app/renderers");
 var import_types2 = require("@knapsack/types");
 var import_file_utils3 = require("@knapsack/file-utils");
 var import_path2 = require("path");
@@ -720,8 +721,7 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
 // src/renderer-react.ts
 var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
 import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
-var { createSlotOptionsHtmlTags } = import_app2.KnapsackRendererBase;
-var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.KnapsackRendererWebpackBase {
+var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
   static {
     __name(this, "KnapsackReactRenderer");
   }
@@ -730,7 +730,6 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
    */
   assets;
   babelConfig;
-  creators;
   demoWrapperPath;
   disableReactStrictMode;
   constructor({
@@ -751,7 +750,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
     this.disableReactStrictMode = disableReactStrictMode;
     this.creators = [createReactPattern];
   }
-  async init(opt) {
+  init = /* @__PURE__ */ __name(async (opt) => {
     await super.init(opt);
     this.assets = await copyReactAssets(this.outputDir, this.publicPath);
     if (!await (0, import_file_utils3.exists)(this.demoWrapperPath)) {
@@ -759,7 +758,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
         `Could not find demo wrapper at: "${this.demoWrapperPath}"`
       );
     }
-  }
+  }, "init");
   getMeta = /* @__PURE__ */ __name(() => ({
     id: this.id,
     title: "React",
@@ -789,18 +788,16 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       }
     }
   }), "getMeta");
-  changeCase(str) {
-    return (0, import_utils3.pascalCase)(str);
-  }
-  createWebpackConfig() {
+  changeCase = /* @__PURE__ */ __name((str) => (0, import_utils3.pascalCase)(str), "changeCase");
+  createWebpackConfig = /* @__PURE__ */ __name(() => {
     const config = super.createWebpackConfig();
     config.externals = {
       react: "React",
       "react-dom": "ReactDOM"
     };
     return config;
-  }
-  getJsImports() {
+  }, "createWebpackConfig");
+  getJsImports = /* @__PURE__ */ __name(() => {
     const imports = super.getJsImports();
     imports.push(
       {
@@ -821,7 +818,7 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       }
     );
     return imports;
-  }
+  }, "getJsImports");
   async prepClientRenderResults({
     usage,
     demoApp,
@@ -946,7 +943,7 @@ ${renderReact.name}({
     let codeHadError = false;
     let errorHtmlMsg = "";
     try {
-      code = await this.babelCodeForBrowser({
+      code = await (0, import_renderers.babelCodeForBrowser)({
         code
       });
     } catch (e) {
@@ -998,18 +995,24 @@ ${errorHtmlMsg}
       templateLanguage: this.language
     };
   }
-  async render(opt) {
-    if (_KnapsackReactRenderer.isTemplateDemo(opt.demo)) {
+  render = /* @__PURE__ */ __name(async (opt) => {
+    if (opt.demo?.type === "template") {
       const waits = [5, 10, 20, 50, 100, 1e3, 1e3];
       let templateDemoPath;
       let attempt = 0;
       while (true) {
         try {
-          templateDemoPath = opt.patternManifest.getTemplateDemoAbsolutePath({
-            patternId: opt.pattern.id,
-            templateId: opt.template.id,
-            demoId: opt.demo.id
+          const { absolutePath, exists } = await (0, import_file_utils3.resolvePath)({
+            path: opt.demo.templateInfo.path,
+            pkgPathAliases: this.pkgPathAliases,
+            resolveFromDir: this.dataDir
           });
+          if (!exists) {
+            throw new Error(
+              `Template demo file does not exist: ${absolutePath}`
+            );
+          }
+          templateDemoPath = absolutePath;
           break;
         } catch (e) {
           const waitTime = waits[attempt];
@@ -1035,7 +1038,7 @@ ${errorHtmlMsg}
       });
       return results;
     }
-    if (_KnapsackReactRenderer.isDataDemo(opt.demo)) {
+    if (opt.demo?.type === "data") {
       const { usage, imports } = await this.getUsageAndImports(opt);
       const { code: importCode } = this.createJsImportCodeBlock({
         imports
@@ -1056,10 +1059,14 @@ ${errorHtmlMsg}
         renderOptions: opt
       });
     }
-  }
-  async getUsageAndImports(opt) {
-    const { pattern, template, patternManifest, demo } = opt;
-    if (demo?.type && _KnapsackReactRenderer.isDataDemo(demo)) {
+  }, "render");
+  getUsageAndImports = /* @__PURE__ */ __name(async ({
+    pattern,
+    template,
+    patternManifest,
+    demo
+  }) => {
+    if (demo?.type && demo.type === "data") {
       const {
         data: { props, slots, slotsOptionsComputed }
       } = demo;
@@ -1083,16 +1090,16 @@ ${errorHtmlMsg}
             const slotItems = slots[slotName];
             const slotItemsUsages = await Promise.all(
               slotItems.filter((slotItem) => {
-                if (!(0, import_types2.isSlottedText)(slotItem)) {
+                if (slotItem.type !== "text") {
                   if (!slotItem.patternId) return false;
                   if (!slotItem.templateId) return false;
-                  if ((0, import_types2.isSlottedTemplateDemo)(slotItem) && !slotItem.demoId) {
+                  if (slotItem.type === "template-demo" && !slotItem.demoId) {
                     return false;
                   }
                 }
                 return true;
               }).map(async (slotItem) => {
-                if ((0, import_types2.isSlottedText)(slotItem)) {
+                if (slotItem.type === "text") {
                   if (slotItems.length === 1 && slotName !== "children") {
                     return `\`${slotItem.text}\``;
                   }
@@ -1104,7 +1111,7 @@ ${errorHtmlMsg}
                 const slotTemplate = slotPattern.templates.find(
                   (t) => t.id === slotItem.templateId
                 );
-                if ((0, import_types2.isSlottedTemplateReference)(slotItem)) {
+                if (slotItem.type === "template-reference") {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1113,7 +1120,7 @@ ${errorHtmlMsg}
                   importInfos.push(...imports);
                   return usage2;
                 }
-                if ((0, import_types2.isSlottedTemplateDemo)(slotItem)) {
+                if (slotItem.type === "template-demo") {
                   const { usage: usage2, imports } = await this.getUsageAndImports({
                     pattern: slotPattern,
                     template: slotTemplate,
@@ -1136,7 +1143,7 @@ ${errorHtmlMsg}
         );
         slotUsages.forEach(({ slotName, slotItemsUsages }) => {
           const slotOptionsComputed = slotsOptionsComputed?.[slotName];
-          const { openTag, closeTag } = createSlotOptionsHtmlTags({
+          const { openTag, closeTag } = (0, import_renderers.createSlotOptionsHtmlTags)({
             slotOptionsComputed,
             classAttributeName: "className",
             stylesValueType: "object"
@@ -1184,7 +1191,7 @@ ${errorHtmlMsg}
         imports: importInfos
       };
     }
-    if (demo?.type && _KnapsackReactRenderer.isTemplateDemo(demo)) {
+    if (demo?.type && demo.type === "template") {
       const importInfo = this.getJsImport({
         patternId: pattern.id,
         templateId: template.id,
@@ -1228,11 +1235,7 @@ ${errorHtmlMsg}
         demo
       )}`
     );
-  }
-  async getUsage(opt) {
-    const { usage } = await this.getUsageAndImports(opt);
-    return usage;
-  }
+  }, "getUsageAndImports");
   inferSpec = /* @__PURE__ */ __name(async ({
     template,
     templatePath
@@ -1251,12 +1254,12 @@ ${errorHtmlMsg}
     }
     return spec;
   }, "inferSpec");
-  async watch(opt) {
-    await super.watch(opt);
+  watch = /* @__PURE__ */ __name(async (opt) => {
+    super.watch(opt);
     import_app2.knapsackEvents.onPatternTemplateChanged(() => {
       clearInferSpecCache();
     });
-  }
+  }, "watch");
   getTemplateMeta = /* @__PURE__ */ __name(async ({
     pattern,
     template
@@ -1299,7 +1302,10 @@ ${errorHtmlMsg}
     }
     return files;
   }, "getTemplateMeta");
-  alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({ files, metaDir }) => {
+  alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
+    files,
+    metaDir
+  }) => {
     const imports = [];
     const ext = ".spec.d.ts";
     files.forEach((file) => {
@@ -1326,9 +1332,9 @@ ${errorHtmlMsg}
       }
     ];
   }, "alterTemplateMetaFiles");
-  async getTemplateSuggestions({
+  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
     newPath
-  }) {
+  }) => {
     const { data: dataDir } = this.patterns.userConfig;
     const { allTemplateDemos, allTemplates } = this.getMyTemplates();
     const usedSuggestions = [
@@ -1379,7 +1385,7 @@ ${errorHtmlMsg}
     return {
       suggestions
     };
-  }
+  }, "getTemplateSuggestions");
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {