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

package/CHANGELOG.md

@@ -1,15 +1,3 @@
-# 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,7 +2,6 @@ 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,7 +2,6 @@ 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  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":[]}
+{"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":[]}

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

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

package/dist/index.d.ts

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

package/dist/index.js

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