@knapsack/renderer-react 4.69.9--canary.32dcae2.0 → 4.69.10--canary.4739.305bd52.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v4.69.9 (Sat Sep 14 2024)
+
+#### 🐛 Bug Fix
+
+- refactor Renderer clients [#4768](https://github.com/knapsack-labs/app-monorepo/pull/4768) ([@EvanLovely](https://github.com/EvanLovely))
+
+#### 🏠 Internal
+
+- update template stage ui [#4763](https://github.com/knapsack-labs/app-monorepo/pull/4763) ([@GormanDesign](https://github.com/GormanDesign))
+- add spacing under form feedback banner [#4747](https://github.com/knapsack-labs/app-monorepo/pull/4747) ([@GormanDesign](https://github.com/GormanDesign))
+
+#### Authors: 2
+
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
 # v4.69.8 (Thu Sep 12 2024)
 
 #### 🐛 Bug Fix

package/dist/client/init.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/client/init.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/client/init.js

@@ -0,0 +1,82 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/client/init.tsx
+var import_react = __toESM(require("react"));
+var import_client2 = __toESM(require("react-dom/client"));
+
+// src/client/ks-utils.ts
+var import_client = require("@knapsack/renderer-webpack-base/client");
+
+// src/types.ts
+var rendererMetaScriptTagId = "ks-react-meta";
+
+// src/client/ks-utils.ts
+var {
+  allAvailableImports,
+  getAllImports,
+  getExtraImport,
+  getImport,
+  getImports,
+  getPatternImport,
+  importedModules,
+  meta,
+  rendererMeta,
+  rendererMethods
+} = (0, import_client.getKsRendererClientGlobal)({
+  rendererMetaScriptTagId
+});
+
+// src/client/init.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+async function init() {
+  const { imports, disableReactStrictMode, demoWrapperProps } = rendererMeta;
+  const all = await getAllImports({
+    patterns: imports.filter((i) => i.type !== "extra"),
+    extras: imports.filter((i) => i.type === "extra").map(({ importInfo }) => ({ name: importInfo.name }))
+  });
+  const root = document.getElementById("render-root");
+  if (!root) {
+    throw new Error("No root element found");
+  }
+  const { DemoWrapper, ErrorCatcher, ...demoComponents } = all;
+  const DemoApp = rendererMethods.getDemoApp(demoComponents);
+  const app = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorCatcher, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoWrapper, { ...demoWrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoApp, {}) }) });
+  import_client2.default.createRoot(root).render(
+    disableReactStrictMode ? app : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.StrictMode, { children: app })
+  );
+}
+__name(init, "init");
+try {
+  init();
+} catch (e) {
+  console.error(e);
+  const errorElement = document.createElement("div");
+  errorElement.innerHTML = `
+    <h1>Error</h1>
+    <p>${e.message}</p>
+  `;
+  document.body.appendChild(errorElement);
+}
+//# sourceMappingURL=init.js.map

package/dist/client/init.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/init.tsx","../../src/client/ks-utils.ts","../../src/types.ts"],"sourcesContent":["/// <reference lib=\"dom\" />\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { rendererMeta, rendererMethods, getAllImports } from './ks-utils';\n\nasync function init() {\n  const { imports, disableReactStrictMode, demoWrapperProps } = rendererMeta;\n  const all = await getAllImports({\n    patterns: imports.filter((i) => i.type !== 'extra'),\n    extras: imports\n      .filter((i) => i.type === 'extra')\n      .map(({ importInfo }) => ({ name: importInfo.name })),\n  });\n\n  const root = document.getElementById('render-root');\n  if (!root) {\n    throw new Error('No root element found');\n  }\n  const { DemoWrapper, ErrorCatcher, ...demoComponents } = all;\n  const DemoApp = rendererMethods.getDemoApp(demoComponents);\n  const app = (\n    <ErrorCatcher>\n      <DemoWrapper {...demoWrapperProps}>\n        <DemoApp />\n      </DemoWrapper>\n    </ErrorCatcher>\n  );\n\n  ReactDOM.createRoot(root).render(\n    disableReactStrictMode ? app : <React.StrictMode>{app}</React.StrictMode>,\n  );\n}\n\ntry {\n  init();\n} catch (e) {\n  console.error(e);\n  // create html element with error message\n  const errorElement = document.createElement('div');\n  errorElement.innerHTML = `\n    <h1>Error</h1>\n    <p>${e.message}</p>\n  `;\n  document.body.appendChild(errorElement);\n}\n","import { getKsRendererClientGlobal } from '@knapsack/renderer-webpack-base/client';\nimport {\n  rendererMetaScriptTagId,\n  type KsReactMeta,\n  type Component,\n  type RendererMethods,\n} from '../types';\n\nexport const {\n  allAvailableImports,\n  getAllImports,\n  getExtraImport,\n  getImport,\n  getImports,\n  getPatternImport,\n  importedModules,\n  meta,\n  rendererMeta,\n  rendererMethods,\n} = getKsRendererClientGlobal<Component, KsReactMeta, RendererMethods>({\n  rendererMetaScriptTagId,\n});\n","import type { Demo, Except } from '@knapsack/types';\nimport type { ComponentType } from 'react';\nimport type {\n  KsJsImport,\n  KsJsImportInfo,\n} from '@knapsack/renderer-webpack-base/client';\nimport type { KnapsackRenderParams } from '@knapsack/app/types';\n\nexport type Component = ComponentType<Record<string, unknown>>;\n\nexport type DemoWrapperProps = {\n  children: React.ReactNode;\n  patternsUsed: {\n    patternId: string;\n    templateId: string;\n    demoId?: string;\n  }[];\n} & Except<KnapsackRenderParams, 'patternManifest'>;\n\n/**\n * Found as JSON in HTML `#ks-react-meta`\n */\nexport type KsReactMeta = {\n  imports: KsJsImport[];\n  moduleImports: {\n    [path: string]: KsJsImportInfo[];\n  };\n  disableReactStrictMode: boolean;\n  demo: Demo;\n  patternId: string;\n  templateId: string;\n  demoWrapperProps: Except<DemoWrapperProps, 'children'>;\n};\n\nexport const rendererMetaScriptTagId = 'ks-react-meta';\n\nexport type RendererMethods = {\n  getDemoApp: (components: Record<string, Component>) => Component;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,mBAAkB;AAClB,IAAAA,iBAAqB;;;ACFrB,oBAA0C;;;ACkCnC,IAAM,0BAA0B;;;AD1BhC,IAAM;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,QAAI,yCAAmE;AAAA,EACrE;AACF,CAAC;;;ADEO;AAlBR,eAAe,OAAO;AACpB,QAAM,EAAE,SAAS,wBAAwB,iBAAiB,IAAI;AAC9D,QAAM,MAAM,MAAM,cAAc;AAAA,IAC9B,UAAU,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,OAAO;AAAA,IAClD,QAAQ,QACL,OAAO,CAAC,MAAM,EAAE,SAAS,OAAO,EAChC,IAAI,CAAC,EAAE,WAAW,OAAO,EAAE,MAAM,WAAW,KAAK,EAAE;AAAA,EACxD,CAAC;AAED,QAAM,OAAO,SAAS,eAAe,aAAa;AAClD,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,uBAAuB;AAAA,EACzC;AACA,QAAM,EAAE,aAAa,cAAc,GAAG,eAAe,IAAI;AACzD,QAAM,UAAU,gBAAgB,WAAW,cAAc;AACzD,QAAM,MACJ,4CAAC,gBACC,sDAAC,eAAa,GAAG,kBACf,sDAAC,WAAQ,GACX,GACF;AAGF,iBAAAC,QAAS,WAAW,IAAI,EAAE;AAAA,IACxB,yBAAyB,MAAM,4CAAC,aAAAC,QAAM,YAAN,EAAkB,eAAI;AAAA,EACxD;AACF;AA1Be;AA4Bf,IAAI;AACF,OAAK;AACP,SAAS,GAAG;AACV,UAAQ,MAAM,CAAC;AAEf,QAAM,eAAe,SAAS,cAAc,KAAK;AACjD,eAAa,YAAY;AAAA;AAAA,SAElB,EAAE,OAAO;AAAA;AAEhB,WAAS,KAAK,YAAY,YAAY;AACxC;","names":["import_client","ReactDOM","React"]}

package/dist/client/init.mjs

@@ -0,0 +1,90 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// ../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.5__@swc+core@1.3.57_@swc+helpers_qewjfurrjspcqzwdqcz2r3oykm/node_modules/tsup/assets/esm_shims.js
+var init_esm_shims = __esm({
+  "../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.5__@swc+core@1.3.57_@swc+helpers_qewjfurrjspcqzwdqcz2r3oykm/node_modules/tsup/assets/esm_shims.js"() {
+  }
+});
+
+// src/types.ts
+var rendererMetaScriptTagId;
+var init_types = __esm({
+  "src/types.ts"() {
+    init_esm_shims();
+    rendererMetaScriptTagId = "ks-react-meta";
+  }
+});
+
+// src/client/ks-utils.ts
+import { getKsRendererClientGlobal } from "@knapsack/renderer-webpack-base/client";
+var allAvailableImports, getAllImports, getExtraImport, getImport, getImports, getPatternImport, importedModules, meta, rendererMeta, rendererMethods;
+var init_ks_utils = __esm({
+  "src/client/ks-utils.ts"() {
+    init_esm_shims();
+    init_types();
+    ({
+      allAvailableImports,
+      getAllImports,
+      getExtraImport,
+      getImport,
+      getImports,
+      getPatternImport,
+      importedModules,
+      meta,
+      rendererMeta,
+      rendererMethods
+    } = getKsRendererClientGlobal({
+      rendererMetaScriptTagId
+    }));
+  }
+});
+
+// src/client/init.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { jsx } from "react/jsx-runtime";
+var require_init = __commonJS({
+  "src/client/init.tsx"() {
+    init_esm_shims();
+    init_ks_utils();
+    async function init() {
+      const { imports, disableReactStrictMode, demoWrapperProps } = rendererMeta;
+      const all = await getAllImports({
+        patterns: imports.filter((i) => i.type !== "extra"),
+        extras: imports.filter((i) => i.type === "extra").map(({ importInfo }) => ({ name: importInfo.name }))
+      });
+      const root = document.getElementById("render-root");
+      if (!root) {
+        throw new Error("No root element found");
+      }
+      const { DemoWrapper, ErrorCatcher, ...demoComponents } = all;
+      const DemoApp = rendererMethods.getDemoApp(demoComponents);
+      const app = /* @__PURE__ */ jsx(ErrorCatcher, { children: /* @__PURE__ */ jsx(DemoWrapper, { ...demoWrapperProps, children: /* @__PURE__ */ jsx(DemoApp, {}) }) });
+      ReactDOM.createRoot(root).render(
+        disableReactStrictMode ? app : /* @__PURE__ */ jsx(React.StrictMode, { children: app })
+      );
+    }
+    __name(init, "init");
+    try {
+      init();
+    } catch (e) {
+      console.error(e);
+      const errorElement = document.createElement("div");
+      errorElement.innerHTML = `
+    <h1>Error</h1>
+    <p>${e.message}</p>
+  `;
+      document.body.appendChild(errorElement);
+    }
+  }
+});
+export default require_init();
+//# sourceMappingURL=init.mjs.map

package/dist/client/init.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.5__@swc+core@1.3.57_@swc+helpers_qewjfurrjspcqzwdqcz2r3oykm/node_modules/tsup/assets/esm_shims.js","../../src/types.ts","../../src/client/ks-utils.ts","../../src/client/init.tsx"],"sourcesContent":["// Shim globals in esm bundle\nimport { fileURLToPath } from 'url'\nimport path from 'path'\n\nconst getFilename = () => fileURLToPath(import.meta.url)\nconst getDirname = () => path.dirname(getFilename())\n\nexport const __dirname = /* @__PURE__ */ getDirname()\nexport const __filename = /* @__PURE__ */ getFilename()\n","import type { Demo, Except } from '@knapsack/types';\nimport type { ComponentType } from 'react';\nimport type {\n  KsJsImport,\n  KsJsImportInfo,\n} from '@knapsack/renderer-webpack-base/client';\nimport type { KnapsackRenderParams } from '@knapsack/app/types';\n\nexport type Component = ComponentType<Record<string, unknown>>;\n\nexport type DemoWrapperProps = {\n  children: React.ReactNode;\n  patternsUsed: {\n    patternId: string;\n    templateId: string;\n    demoId?: string;\n  }[];\n} & Except<KnapsackRenderParams, 'patternManifest'>;\n\n/**\n * Found as JSON in HTML `#ks-react-meta`\n */\nexport type KsReactMeta = {\n  imports: KsJsImport[];\n  moduleImports: {\n    [path: string]: KsJsImportInfo[];\n  };\n  disableReactStrictMode: boolean;\n  demo: Demo;\n  patternId: string;\n  templateId: string;\n  demoWrapperProps: Except<DemoWrapperProps, 'children'>;\n};\n\nexport const rendererMetaScriptTagId = 'ks-react-meta';\n\nexport type RendererMethods = {\n  getDemoApp: (components: Record<string, Component>) => Component;\n};\n","import { getKsRendererClientGlobal } from '@knapsack/renderer-webpack-base/client';\nimport {\n  rendererMetaScriptTagId,\n  type KsReactMeta,\n  type Component,\n  type RendererMethods,\n} from '../types';\n\nexport const {\n  allAvailableImports,\n  getAllImports,\n  getExtraImport,\n  getImport,\n  getImports,\n  getPatternImport,\n  importedModules,\n  meta,\n  rendererMeta,\n  rendererMethods,\n} = getKsRendererClientGlobal<Component, KsReactMeta, RendererMethods>({\n  rendererMetaScriptTagId,\n});\n","/// <reference lib=\"dom\" />\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { rendererMeta, rendererMethods, getAllImports } from './ks-utils';\n\nasync function init() {\n  const { imports, disableReactStrictMode, demoWrapperProps } = rendererMeta;\n  const all = await getAllImports({\n    patterns: imports.filter((i) => i.type !== 'extra'),\n    extras: imports\n      .filter((i) => i.type === 'extra')\n      .map(({ importInfo }) => ({ name: importInfo.name })),\n  });\n\n  const root = document.getElementById('render-root');\n  if (!root) {\n    throw new Error('No root element found');\n  }\n  const { DemoWrapper, ErrorCatcher, ...demoComponents } = all;\n  const DemoApp = rendererMethods.getDemoApp(demoComponents);\n  const app = (\n    <ErrorCatcher>\n      <DemoWrapper {...demoWrapperProps}>\n        <DemoApp />\n      </DemoWrapper>\n    </ErrorCatcher>\n  );\n\n  ReactDOM.createRoot(root).render(\n    disableReactStrictMode ? app : <React.StrictMode>{app}</React.StrictMode>,\n  );\n}\n\ntry {\n  init();\n} catch (e) {\n  console.error(e);\n  // create html element with error message\n  const errorElement = document.createElement('div');\n  errorElement.innerHTML = `\n    <h1>Error</h1>\n    <p>${e.message}</p>\n  `;\n  document.body.appendChild(errorElement);\n}\n"],"mappings":";;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAkCa;AAlCb;AAAA;AAAA;AAkCO,IAAM,0BAA0B;AAAA;AAAA;;;AClCvC,SAAS,iCAAiC;AAA1C,IASE,qBACA,eACA,gBACA,WACA,YACA,kBACA,iBACA,MACA,cACA;AAlBF;AAAA;AAAA;AACA;AAOO,KAAM;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,0BAAmE;AAAA,MACrE;AAAA,IACF,CAAC;AAAA;AAAA;;;ACpBD,OAAO,WAAW;AAClB,OAAO,cAAc;AAqBb;AAvBR;AAAA;AAAA;AAGA;AAEA,mBAAe,OAAO;AACpB,YAAM,EAAE,SAAS,wBAAwB,iBAAiB,IAAI;AAC9D,YAAM,MAAM,MAAM,cAAc;AAAA,QAC9B,UAAU,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,OAAO;AAAA,QAClD,QAAQ,QACL,OAAO,CAAC,MAAM,EAAE,SAAS,OAAO,EAChC,IAAI,CAAC,EAAE,WAAW,OAAO,EAAE,MAAM,WAAW,KAAK,EAAE;AAAA,MACxD,CAAC;AAED,YAAM,OAAO,SAAS,eAAe,aAAa;AAClD,UAAI,CAAC,MAAM;AACT,cAAM,IAAI,MAAM,uBAAuB;AAAA,MACzC;AACA,YAAM,EAAE,aAAa,cAAc,GAAG,eAAe,IAAI;AACzD,YAAM,UAAU,gBAAgB,WAAW,cAAc;AACzD,YAAM,MACJ,oBAAC,gBACC,8BAAC,eAAa,GAAG,kBACf,8BAAC,WAAQ,GACX,GACF;AAGF,eAAS,WAAW,IAAI,EAAE;AAAA,QACxB,yBAAyB,MAAM,oBAAC,MAAM,YAAN,EAAkB,eAAI;AAAA,MACxD;AAAA,IACF;AA1Be;AA4Bf,QAAI;AACF,WAAK;AAAA,IACP,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAEf,YAAM,eAAe,SAAS,cAAc,KAAK;AACjD,mBAAa,YAAY;AAAA;AAAA,SAElB,EAAE,OAAO;AAAA;AAEhB,eAAS,KAAK,YAAY,YAAY;AAAA,IACxC;AAAA;AAAA;","names":[]}

package/dist/demo-wrapper.d.mts

@@ -1,8 +1,5 @@
 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 { D as DemoWrapperProps } from './types-D2eCZXsg.mjs';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/demo-wrapper.d.ts

@@ -1,8 +1,5 @@
 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 { D as DemoWrapperProps } from './types-D2eCZXsg.js';
 import '@knapsack/types';
 import '@knapsack/app/types';
 

package/dist/demo-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,4CAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './types';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,4CAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}

package/dist/demo-wrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './renderer-react';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,oBAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../src/demo-wrapper.tsx"],"sourcesContent":["import type { DemoWrapperProps } from './types';\n\nconst DemoWrapper = ({ children }: DemoWrapperProps) => (\n  <div className=\"demo-wrapper\">{children}</div>\n);\n\nexport default DemoWrapper;\n"],"mappings":";;;;AAGE;AADF,IAAM,cAAc,wBAAC,EAAE,SAAS,MAC9B,oBAAC,SAAI,WAAU,gBAAgB,UAAS,GADtB;AAIpB,IAAO,uBAAQ;","names":[]}

package/dist/index.d.mts

@@ -1,17 +1,9 @@
-import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
-import { Except } from '@knapsack/utils';
+import { RendererWebpackBase, Renderer, KsJsImport } from '@knapsack/renderer-webpack-base';
 import { Renderable } from '@knapsack/app/renderers';
-import { RendererId, KsJsImport } from '@knapsack/types';
+import { RendererId } from '@knapsack/types';
 import { KnapsackRenderParams } from '@knapsack/app/types';
+export { D as DemoWrapperProps } from './types-D2eCZXsg.mjs';
 
-type DemoWrapperProps = {
-    children: React.ReactNode;
-    patternsUsed: {
-        patternId: string;
-        templateId: string;
-        demoId?: string;
-    }[];
-} & Except<KnapsackRenderParams, 'patternManifest'>;
 declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
@@ -51,4 +43,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
     getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
-export { type DemoWrapperProps, KnapsackReactRenderer };
+export { KnapsackReactRenderer };

package/dist/index.d.ts

@@ -1,17 +1,9 @@
-import { RendererWebpackBase, Renderer } from '@knapsack/renderer-webpack-base';
-import { Except } from '@knapsack/utils';
+import { RendererWebpackBase, Renderer, KsJsImport } from '@knapsack/renderer-webpack-base';
 import { Renderable } from '@knapsack/app/renderers';
-import { RendererId, KsJsImport } from '@knapsack/types';
+import { RendererId } from '@knapsack/types';
 import { KnapsackRenderParams } from '@knapsack/app/types';
+export { D as DemoWrapperProps } from './types-D2eCZXsg.js';
 
-type DemoWrapperProps = {
-    children: React.ReactNode;
-    patternsUsed: {
-        patternId: string;
-        templateId: string;
-        demoId?: string;
-    }[];
-} & Except<KnapsackRenderParams, 'patternManifest'>;
 declare class KnapsackReactRenderer extends RendererWebpackBase implements Renderable {
     /**
      * `react.js` & `react-dom.js` root relative paths
@@ -51,4 +43,4 @@ declare class KnapsackReactRenderer extends RendererWebpackBase implements Rende
     getTemplateSuggestions: Renderer['getTemplateSuggestions'];
 }
 
-export { type DemoWrapperProps, KnapsackReactRenderer };
+export { KnapsackReactRenderer };

package/dist/index.js

@@ -64,13 +64,14 @@ function renderUsageTemplate({
   `;
 }
 __name(renderUsageTemplate, "renderUsageTemplate");
+var demoAppName = "DemoApp";
 function renderDemoAppTemplate({
-  imports,
+  imports = "",
   children
 }) {
   return `${imports}
 
-function DemoApp() {
+function ${demoAppName}() {
   return (
     ${children}
   )
@@ -129,12 +130,14 @@ async function getUsage(data) {
 __name(getUsage, "getUsage");
 async function getDemoAppUsage({
   children,
-  imports
+  imports,
+  format
 }) {
   const code = renderDemoAppTemplate({
     children,
     imports
   });
+  if (!format) return code;
   return (0, import_file_utils.formatCode)({
     contents: code,
     path: "x.tsx"
@@ -718,6 +721,9 @@ var createReactPattern = (0, import_creator_utils.createCreator)({
   }, "getTasks")
 });
 
+// src/types.ts
+var rendererMetaScriptTagId = "ks-react-meta";
+
 // src/renderer-react.ts
 var { pkg } = (0, import_file_utils3.findUpPkgJson)(__dirname);
 import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
@@ -742,7 +748,11 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
       id,
       extension: ".jsx",
       language: "jsx",
-      webpackConfig
+      webpackConfig,
+      extraScripts: [
+        // this is the code in `./client/init.mts`
+        "@knapsack/renderer-react/client"
+      ]
     });
     this.language = "jsx";
     this.assets = [];
@@ -825,167 +835,82 @@ var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer
     imports: xImports,
     renderOptions: { pattern, template, demo }
   }) {
-    const extraImportNames = this.getJsImports().flatMap(
-      (imp) => imp.type === "extra" ? [imp.importInfo.name] : []
+    const extraImports = this.getJsImports().filter(
+      (imp) => imp.type === "extra"
     );
-    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: xImports });
+    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
     if (!isDeclaredVarsUnique) {
       import_app2.log.error(`${nameCollisions.join(", ")} are declared multiple times`, {
         imports
       });
     }
-    const importNames = [
-      ...imports.map(({ importInfo: { name } }) => name),
-      ...extraImportNames
-    ];
-    const patternsUsed = imports.flatMap((imp) => {
-      if (imp.type === "pattern-template") {
-        return [
-          {
-            patternId: imp.patternId,
-            templateId: imp.templateId
+    const importInfos = imports.map(({ importInfo }) => importInfo);
+    const meta = {
+      demo,
+      moduleImports: (0, import_utils3.groupBy)(importInfos, (importInfo) => importInfo.path),
+      patternId: pattern.id,
+      templateId: template.id,
+      imports,
+      disableReactStrictMode: this.disableReactStrictMode,
+      demoWrapperProps: {
+        pattern,
+        template,
+        demo,
+        patternsUsed: imports.flatMap((imp) => {
+          if (imp.type === "pattern-template") {
+            return [
+              {
+                patternId: imp.patternId,
+                templateId: imp.templateId
+              }
+            ];
           }
-        ];
-      }
-      if (imp.type === "pattern-template-demo") {
-        return [
-          {
-            patternId: imp.patternId,
-            templateId: imp.templateId,
-            demoId: imp.demoId
+          if (imp.type === "pattern-template-demo") {
+            return [
+              {
+                patternId: imp.patternId,
+                templateId: imp.templateId,
+                demoId: imp.demoId
+              }
+            ];
           }
-        ];
+          return [];
+        })
       }
-      return [];
-    });
-    const demoWrapperProps = {
-      patternsUsed,
-      pattern,
-      template,
-      demo
     };
-    const demoWrapperCode = await getUsage({
-      templateName: "DemoWrapper",
-      props: demoWrapperProps,
-      children: `<DemoApp />`
-      // extraProps,
-    });
-    async function renderReact({
-      patterns,
-      theExtraImportNames,
-      ksGlobal
-    }) {
-      if (!ksGlobal) {
-        throw new Error('"window.knapsack" is null');
-      }
-      const components = await ksGlobal.getAllImports({
-        patterns,
-        extras: theExtraImportNames.map((name) => ({ name }))
-      });
-      return components;
-    }
-    __name(renderReact, "renderReact");
     let code = `
-
-${renderReact.toString()}
-${renderReact.name}({
-  ksGlobal: window.knapsack,
-  patterns: ${JSON.stringify(patternsUsed)},
-  theExtraImportNames: ${JSON.stringify(extraImportNames)},
-}).then((components) => {
-  const { ${importNames.join(", ")} } = components;
-  const root = document.getElementById('render-root');
-
-  ${demoApp}
-
-  const reactDomVersion = parseInt(ReactDOM.version.split('.')[0], 10);
-
-  const ReactRendererResult = () => {
-    if (reactDomVersion < 17 || ${this.disableReactStrictMode}){
-      return (
-        <ErrorCatcher>
-          ${demoWrapperCode}
-        </ErrorCatcher>
-      )
+    window.knapsack = window.knapsack || {};
+    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
+      ${demoApp}
+      return ${demoAppName}
     }
-
-    return (
-      <React.StrictMode>
-        <ErrorCatcher>
-          ${demoWrapperCode}
-        </ErrorCatcher>
-      </React.StrictMode>
-    )
-  };
-
-
-  if (reactDomVersion > 17){
-    ReactDOM.createRoot(root).render(
-      <ReactRendererResult />
-    )
-  } else {
-    ReactDOM.render(
-      <ReactRendererResult />,
-      root
-    );
-  }
-}).catch((err) => {
-  console.error(err);
-  const root = document.getElementById('render-root');
-  // Create a new <div> element to contain the error message
-  const errorMsgDiv = document.createElement('div');
-  // Insert the new <div> element before the existing element
-  root.parentNode.insertBefore(errorMsgDiv, root);
-  // add error message so users can see it
-  errorMsgDiv.innerHTML = '<h1>Component Error</h1><p>' + err.message + '</p>';
-});
     `;
-    let codeHadError = false;
     let errorHtmlMsg = "";
     try {
-      code = await (0, import_renderers.babelCodeForBrowser)({
-        code
-      });
+      code = await (0, import_renderers.babelCodeForBrowser)({ code });
     } catch (e) {
-      codeHadError = true;
       console.log(code);
       console.log("---original code before babel error ^---");
       console.trace(e.message);
       code = `console.error(${JSON.stringify(e.message)});`;
       errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
     }
-    if (!codeHadError) {
-      try {
-        code = await (0, import_file_utils3.formatCode)({
-          contents: code,
-          path: "x.tsx"
-          // doing this to set format language
-        });
-      } catch (e) {
-        codeHadError = true;
-        console.log(code);
-        console.log("---original code before prettier error ^---");
-        console.trace(e.message);
-        code = `console.error(${JSON.stringify(e.message)});`;
-        errorHtmlMsg = `<pre><code>${e.message}</code></pre>`;
-      }
-    }
     const html = `
+    <script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
+      meta
+    )}</script>
+    <script type="application/javascript">${code}</script>
+    <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
     ${this.assets.map((asset) => `<script src="${asset}"></script>`).join("\n")}
-
     ${this.createHtmlTagsForAssetPaths({
       assets: this.getWebpackAssetPaths(),
       // we need the scripts to finish adding methods to the global knapsack object synchronously before the client-side code runs that is in the <script> tag below
       scriptTagsAreAsync: false
     })}
-
-    <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
-    <script type="application/javascript">${code}</script>
-${errorHtmlMsg}
-
+    ${errorHtmlMsg}
     `;
     return {
-      ok: !codeHadError,
+      ok: !errorHtmlMsg,
       html: await (0, import_file_utils3.formatCode)({
         contents: html,
         path: "x.html"
@@ -1046,7 +971,8 @@ ${errorHtmlMsg}
       const [demoAppUsage, demoApp] = await Promise.all([
         getDemoAppUsage({
           children: usage,
-          imports: importCode
+          imports: importCode,
+          format: true
         }),
         getDemoAppUsage({
           children: usage