@knapsack/renderer-react 4.69.15--canary.4532.e420d28.0 → 4.69.15--canary.4771.9877e61.0

package/dist/index.mjs

@@ -1,1319 +1,46 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
+import Ie from 'sleep-promise';
+import { RendererWebpackBase } from '@knapsack/renderer-webpack-base';
+import { makeShortId, pascalCase, isFirstLetterCapital, removeWrappingDoubleQuotes } from '@knapsack/utils';
+import { log, knapsackEvents } from '@knapsack/app';
+import { babelCodeForBrowser, createSlotOptionsHtmlTags } from '@knapsack/app/renderers';
+import { rendererIds, isNumberProp, isOptionsProp } from '@knapsack/types';
+import { findUpPkgJson, formatCode, getJsExportNames, exists, readFile, findUp, resolvePath, getModulePkgJson, copy } from '@knapsack/file-utils';
+import h, { join, parse, relative } from 'path';
+import { createCreator, tasks } from '@knapsack/creator-utils';
+import { readKsPatternConfigs, writeDemo, writeKsPatternConfig, readKsNavConfig, addKsNavItems } from '@knapsack/ks-file-utils';
 
-// ../../../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.8_@types+node@20.16.6__@swc+core@1.3.57_@swc+helpers_iqa4vqpgdlzwuubzthdmdz7nfe/node_modules/tsup/assets/esm_shims.js
-import { fileURLToPath } from "url";
-import path from "path";
-var getFilename = /* @__PURE__ */ __name(() => fileURLToPath(import.meta.url), "getFilename");
-var getDirname = /* @__PURE__ */ __name(() => path.dirname(getFilename()), "getDirname");
-var __dirname = /* @__PURE__ */ getDirname();
+var N=Object.defineProperty;var c=(r,e)=>N(r,"name",{value:e,configurable:!0}),K=(r=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(r,{get:(e,t)=>(typeof require<"u"?require:e)[t]}):r)(function(r){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+r+'" is not supported')});function ee({templateName:r,attributes:e,children:t}){return `
+    <${r}
+      ${e}
+      ${t?`>
+        ${t}
+      </${r}>`:"/>"}
+  `}c(ee,"renderUsageTemplate");var O="DemoApp";function te({imports:r="",children:e}){return `${r}
 
-// src/renderer-react.ts
-import sleep from "sleep-promise";
-import {
-  RendererWebpackBase
-} from "@knapsack/renderer-webpack-base";
-import { pascalCase, isFirstLetterCapital } from "@knapsack/utils";
-import { knapsackEvents, log as log2 } from "@knapsack/app";
-import {
-  babelCodeForBrowser,
-  createSlotOptionsHtmlTags
-} from "@knapsack/app/renderers";
-import {
-  rendererIds
-} from "@knapsack/types";
-import {
-  exists as fileExists,
-  findUpPkgJson,
-  getJsExportNames as getJsExportNames2,
-  readFile as readFile2,
-  formatCode as formatCode2
-} from "@knapsack/file-utils";
-import { join, relative, parse } from "path";
-
-// src/utils.ts
-import { log } from "@knapsack/app";
-import {
-  getModulePkgJson,
-  readFile,
-  copy,
-  formatCode,
-  resolvePath,
-  findUp
-} from "@knapsack/file-utils";
-import { removeWrappingDoubleQuotes } from "@knapsack/utils";
-import path2 from "path";
-import { isNumberProp, isOptionsProp } from "@knapsack/types";
-function renderUsageTemplate({
-  templateName,
-  attributes,
-  children
-}) {
-  return `
-    <${templateName}
-      ${attributes}
-      ${children ? `>
-        ${children}
-      </${templateName}>` : "/>"}
-  `;
-}
-__name(renderUsageTemplate, "renderUsageTemplate");
-var demoAppName = "DemoApp";
-function renderDemoAppTemplate({
-  imports = "",
-  children
-}) {
-  return `${imports}
-
-function ${demoAppName}() {
+function ${O}() {
   return (
-    ${children}
+    ${e}
   )
 }
-`;
-}
-__name(renderDemoAppTemplate, "renderDemoAppTemplate");
-async function getUsage(data) {
-  const props = Object.keys(data.props || {}).map((key) => {
-    const value = data.props[key];
-    return {
-      key,
-      value
-    };
-  });
-  const { templateName, children, extraProps = [] } = data;
-  if (!templateName) {
-    throw new Error(
-      `Cannot getUsage of a React Component when no "templateName" is provided.`
-    );
-  }
-  const attributes = props.map(({ key, value }) => {
-    switch (typeof value) {
-      case "string":
-        if (value.startsWith("(") && value.includes("=>")) {
-          return `${key}={${value}}`;
-        }
-        return `${key}="${value}"`;
-      case "boolean":
-        return value ? `${key}` : `${key}={${value}}`;
-      default:
-        return `${key}={${JSON.stringify(value)}}`;
-    }
-  });
-  const extraAttributes = [];
-  const slotProps = {};
-  extraProps.forEach(({ key, value }) => {
-    slotProps[key] = slotProps[key] ?? [];
-    slotProps[key].push(value);
-  });
-  Object.entries(slotProps).forEach(([key, values]) => {
-    const value = values.length === 1 ? values[0] : `<>${values.join("\n")}</>`;
-    extraAttributes.push(`${key}={${value}}`);
-  });
-  const result = renderUsageTemplate({
-    templateName,
-    attributes: [...attributes, ...extraAttributes].join(" "),
-    children
-  });
-  return data.format ? formatCode({
-    contents: result,
-    path: "x.tsx"
-    // doing this to set format language
-  }).then((code) => code.trim()).catch(() => result.trim()) : result.trim();
-}
-__name(getUsage, "getUsage");
-async function getDemoAppUsage({
-  children,
-  imports,
-  format
-}) {
-  const code = renderDemoAppTemplate({
-    children,
-    imports
-  });
-  if (!format) return code;
-  return formatCode({
-    contents: code,
-    path: "x.tsx"
-    // doing this to set format language
-  });
-}
-__name(getDemoAppUsage, "getDemoAppUsage");
-async function getTypeScriptInfoFromFile({ src }) {
-  const tsConfigPath = await findUp("tsconfig.json", {
-    cwd: path2.dirname(src)
-  });
-  const rdTs = await import("react-docgen-typescript");
-  const config = {
-    shouldExtractLiteralValuesFromEnum: true,
-    savePropValueAsString: true,
-    skipChildrenPropWithoutDoc: false,
-    // In addition to the ones listed here, which had not strangely included these below ~ https://github.com/styleguidist/react-docgen-typescript/blob/287e7012843cb26fed8f4bd8ee24e462c25a1414/src/parser.ts#L308
-    customComponentTypes: ["VoidFunctionComponent", "VFC"]
-  };
-  const parse2 = tsConfigPath ? rdTs.withCustomConfig(tsConfigPath, config).parse : rdTs.withDefaultConfig(config).parse;
-  return {
-    info: parse2(src)
-  };
-}
-__name(getTypeScriptInfoFromFile, "getTypeScriptInfoFromFile");
-function extractSpecFromTypeScriptInfo({
-  info: results,
-  exportName
-}) {
-  try {
-    if (!results) return false;
-    const spec = {
-      props: {
-        $schema: "http://json-schema.org/draft-07/schema",
-        type: "object",
-        required: [],
-        properties: {}
-      },
-      slots: {
-        // children: {
-        //   title: 'children',
-        // },
-      }
-    };
-    const isDefaultExport = !exportName || exportName === "default";
-    const result = isDefaultExport ? results.pop() : results.find((r) => r.displayName === exportName);
-    if (!result) return false;
-    const { displayName } = result;
-    Object.entries(result?.props || {}).forEach(([propName, propDef]) => {
-      const { name, description, defaultValue, required, type, parent } = propDef;
-      const propType = type?.name?.replace("| undefined", "").replace(/<.*/g, "").trim();
-      switch (propType) {
-        case "string":
-          spec.props.properties[propName] = {
-            type: "string"
-          };
-          break;
-        case "number":
-          spec.props.properties[propName] = {
-            type: "number"
-          };
-          break;
-        case "boolean":
-        case "bool":
-          if (defaultValue && "value" in defaultValue) {
-            defaultValue.value = defaultValue.value === "true";
-          }
-          spec.props.properties[propName] = {
-            type: "boolean"
-          };
-          break;
-        case "enum":
-          spec.props.properties[propName] = {
-            type: "string",
-            // yes there is a double "value" & yes it is confusing
-            enum: [
-              // ensure list is unique
-              ...new Set(
-                type.value.map(({ value }) => removeWrappingDoubleQuotes(value?.trim())).filter(Boolean)
-              )
-            ]
-          };
-          break;
-        case "ReactNode":
-        case "React.ReactNode":
-        case "React.ReactElement":
-        case "ReactElement":
-          spec.slots[propName] = {
-            title: propName
-          };
-          if (description) {
-            spec.slots[propName] = {
-              ...spec.slots[propName],
-              description
-            };
-          }
-          break;
-        case "VFC":
-        case "FC":
-          spec.slots[propName] = {
-            title: propName,
-            description: description || "A reference to a component",
-            isTemplateReference: true,
-            allowOnlyOne: true,
-            disallowText: true
-          };
-          break;
-        default: {
-          if (type?.name?.startsWith("(")) {
-            spec.props.properties[propName] = {
-              // description: `\`${type.name}\` ${description}`,
-              typeof: "function",
-              tsType: propDef?.type?.name
-            };
-          } else if (type?.name?.includes("|")) {
-            const options = type.name.split("|").map((enumItem) => removeWrappingDoubleQuotes(enumItem.trim())).filter(Boolean);
-            if (options?.length) {
-              spec.props.properties[propName] = {
-                type: "string",
-                // ensuring list is unique
-                enum: [...new Set(options)]
-              };
-            }
-          } else {
-            spec.props.properties[propName] = {
-              tsType: propDef?.type?.name
-            };
-          }
-        }
-      }
-      if (spec.props.properties[propName]) {
-        if (required) spec.props.required.push(propName);
-        if (description && !spec.props.properties[propName].description) {
-          spec.props.properties[propName].description = description;
-        }
-        if (defaultValue && "value" in defaultValue) {
-          if (isNumberProp(spec.props.properties[propName])) {
-            spec.props.properties[propName].default = parseFloat(
-              defaultValue.value
-            );
-          } else {
-            spec.props.properties[propName].default = removeWrappingDoubleQuotes(defaultValue.value);
-          }
-        }
-      }
-    });
-    return spec;
-  } catch (error) {
-    log.verbose(
-      "Could not infer spec from React TypeScript file",
-      {
-        exportName,
-        error
-      },
-      "react renderer"
-    );
-    return false;
-  }
-}
-__name(extractSpecFromTypeScriptInfo, "extractSpecFromTypeScriptInfo");
-async function getPropTypesInfoFromFile({ src }) {
-  const reactDocs = await import("react-docgen");
-  const { builtinResolvers } = reactDocs;
-  const fileSrc = await readFile(src);
-  const { FindExportedDefinitionsResolver } = builtinResolvers;
-  const results = reactDocs.parse(fileSrc, {
-    resolver: new FindExportedDefinitionsResolver(),
-    handlers: null,
-    filename: src
-    // babelrc: false,
-  });
-  return {
-    info: results
-  };
-}
-__name(getPropTypesInfoFromFile, "getPropTypesInfoFromFile");
-function extractSpecFromPropTypesInfo({
-  info: results,
-  exportName
-}) {
-  try {
-    const isDefaultExport = !exportName || exportName === "default";
-    const result = isDefaultExport ? results.pop() : results.find((r) => r.displayName === exportName);
-    const spec = {
-      isInferred: true,
-      props: {
-        $schema: "http://json-schema.org/draft-07/schema",
-        type: "object",
-        required: [],
-        properties: {}
-      },
-      slots: {}
-    };
-    Object.entries(result?.props || {}).forEach(([propName, propDef]) => {
-      const { required, description, defaultValue } = propDef;
-      switch (propDef?.type?.name) {
-        case "string":
-          spec.props.properties[propName] = {
-            type: "string"
-          };
-          break;
-        case "func":
-          spec.props.properties[propName] = {
-            type: "string"
-          };
-          break;
-        case "bool":
-          spec.props.properties[propName] = {
-            type: "boolean"
-          };
-          break;
-        case "node":
-          spec.slots[propName] = {
-            title: propName,
-            description
-          };
-      }
-      if (spec.props.properties[propName]) {
-        if (required) spec.props.required.push(propName);
-        if (description && !spec.props.properties[propName].description) {
-          spec.props.properties[propName].description = description;
-        }
-        if (defaultValue && "value" in defaultValue) {
-          spec.props.properties[propName].default = typeof defaultValue.value === "string" ? removeWrappingDoubleQuotes(defaultValue.value) : defaultValue.value;
-        }
-      }
-    });
-    return spec;
-  } catch (error) {
-    log.verbose(
-      "Could not infer spec from React PropTypes",
-      {
-        exportName,
-        error
-      },
-      "react renderer"
-    );
-    return false;
-  }
-}
-__name(extractSpecFromPropTypesInfo, "extractSpecFromPropTypesInfo");
-function cleanUpSpec({
-  spec
-}) {
-  if (spec === false) return spec;
-  Object.entries(spec?.props?.properties || {}).forEach(([propName, prop]) => {
-    if (isOptionsProp(prop)) {
-      if (!prop.enum.includes(prop.default)) {
-        prop.default = void 0;
-      }
-    }
-  });
-  return spec;
-}
-__name(cleanUpSpec, "cleanUpSpec");
-async function getReactModuleInfoUncached({
-  src: unknownSrc,
-  resolveFromDir
-}) {
-  const typesInfo = await resolvePath({
-    path: unknownSrc,
-    resolveFromDir,
-    resolveType: "types"
-  });
-  if (typesInfo.exists) {
-    const typeScriptInfo = await getTypeScriptInfoFromFile({
-      src: typesInfo.absolutePath
-    });
-    if (typeScriptInfo) {
-      return {
-        type: "typescript",
-        info: typeScriptInfo.info
-      };
-    }
-  }
-  const jsInfo = await resolvePath({
-    path: unknownSrc,
-    resolveFromDir
-  });
-  if (!jsInfo.exists) return { type: "unknown" };
-  const { ext } = path2.parse(jsInfo.absolutePath);
-  switch (ext) {
-    case ".jsx": {
-      const propTypesInfo = await getPropTypesInfoFromFile({
-        src: jsInfo.absolutePath
-      });
-      return {
-        type: "propTypes",
-        info: propTypesInfo.info
-      };
-    }
-    case ".ts":
-    case ".tsx": {
-      const typeScriptInfo = await getTypeScriptInfoFromFile({
-        src: jsInfo.absolutePath
-      });
-      return {
-        type: "typescript",
-        info: typeScriptInfo.info
-      };
-    }
-    default:
-      return {
-        type: "unknown"
-      };
-  }
-}
-__name(getReactModuleInfoUncached, "getReactModuleInfoUncached");
-var getReactModuleInfoCache = /* @__PURE__ */ new Map();
-var clearInferSpecCache = /* @__PURE__ */ __name(() => {
-  log.info(`Clearing React TypeScript inferSpec cache...`);
-  getReactModuleInfoCache.clear();
-}, "clearInferSpecCache");
-async function getReactModuleInfo(args) {
-  const cacheKey = JSON.stringify(args);
-  if (!getReactModuleInfoCache.has(cacheKey)) {
-    getReactModuleInfoCache.set(cacheKey, getReactModuleInfoUncached(args));
-  }
-  return getReactModuleInfoCache.get(cacheKey);
-}
-__name(getReactModuleInfo, "getReactModuleInfo");
-async function getReactSpec({
-  src,
-  exportName,
-  resolveFromDir
-}) {
-  const reactModuleInfo = await getReactModuleInfo({
-    src,
-    resolveFromDir
-  });
-  switch (reactModuleInfo.type) {
-    case "typescript":
-      return extractSpecFromTypeScriptInfo({
-        info: reactModuleInfo.info,
-        exportName
-      });
-    case "propTypes":
-      return extractSpecFromPropTypesInfo({
-        info: reactModuleInfo.info,
-        exportName
-      });
-    case "unknown":
-    default:
-      return false;
-  }
-}
-__name(getReactSpec, "getReactSpec");
-async function getReactDocs(opt) {
-  return cleanUpSpec({
-    spec: await getReactSpec(opt)
-  });
-}
-__name(getReactDocs, "getReactDocs");
-async function copyReactAssets(distDirAbsolute, publicPath) {
-  try {
-    const { version: reactVersion } = getModulePkgJson("react");
-    const { version: reactDomVersion } = getModulePkgJson("react-dom");
-    const reactRoot = path2.dirname(
-      __require.resolve("react", {
-        paths: [process.cwd()]
-      })
-    );
-    const reactDomRoot = path2.dirname(
-      __require.resolve("react-dom", {
-        paths: [process.cwd()]
-      })
-    );
-    await Promise.all([
-      copy(
-        path2.join(reactRoot, "umd/react.development.js"),
-        path2.join(distDirAbsolute, `react.development.${reactVersion}.js`)
-      ),
-      copy(
-        path2.join(reactRoot, "umd/react.production.min.js"),
-        path2.join(distDirAbsolute, `react.production.min.${reactVersion}.js`)
-      ),
-      copy(
-        path2.join(reactDomRoot, "umd/react-dom.production.min.js"),
-        path2.join(
-          distDirAbsolute,
-          `react-dom.production.min.${reactDomVersion}.js`
-        )
-      ),
-      copy(
-        path2.join(reactDomRoot, "umd/react-dom.development.js"),
-        path2.join(
-          distDirAbsolute,
-          `react-dom.development.${reactDomVersion}.js`
-        )
-      )
-    ]);
-    const reactFileSuffix = process.env.NODE_ENV === "production" ? "production.min" : "development";
-    return [
-      path2.join(publicPath, `react.${reactFileSuffix}.${reactVersion}.js`),
-      path2.join(
-        publicPath,
-        `react-dom.${reactFileSuffix}.${reactDomVersion}.js`
-      )
-    ];
-  } catch (error) {
-    log.warn(
-      'Error trying to copy "react" and "react-dom" JS files, are they installed? We want to use your exact versions.',
-      error,
-      "templateRenderer:react"
-    );
-    process.exit(1);
-  }
-}
-__name(copyReactAssets, "copyReactAssets");
-
-// src/react-creators.ts
-import { getJsExportNames } from "@knapsack/file-utils";
-import { createCreator, tasks } from "@knapsack/creator-utils";
-import {
-  readKsPatternConfigs,
-  writeKsPatternConfig,
-  readKsNavConfig,
-  addKsNavItems,
-  writeDemo
-} from "@knapsack/ks-file-utils";
-import { makeShortId } from "@knapsack/utils";
-function isCapitalLetter(char) {
-  return char.toUpperCase() === char;
-}
-__name(isCapitalLetter, "isCapitalLetter");
-function startsWithCapitalLetter(str) {
-  return isCapitalLetter(str[0]);
-}
-__name(startsWithCapitalLetter, "startsWithCapitalLetter");
-function createPatternData({
-  importName,
-  id,
-  title = importName,
-  pkgPath,
-  initialDemoId
-}) {
-  return {
-    id,
-    title,
-    description: "",
-    statuses: {
-      main: "ready"
-    },
-    templates: [
-      {
-        id: "react",
-        title: "react",
-        path: pkgPath,
-        alias: importName,
-        templateLanguageId: "react",
-        spec: {
-          isInferred: true
-        },
-        demoIds: [initialDemoId],
-        blockIds: []
-      }
-    ],
-    tabs: [
-      {
-        type: "template",
-        id: "react"
-      }
-    ],
-    subPages: []
-  };
-}
-__name(createPatternData, "createPatternData");
-var createReactPattern = createCreator({
-  id: "react-patterns",
-  title: "React Ks Patterns",
-  description: "Adds React templates as Knapsack Patterns",
-  getQuestions: /* @__PURE__ */ __name(async () => ({
-    pkgPath: {
-      type: "text",
-      title: "Package path"
-    },
-    importPrefix: {
-      type: "text",
-      title: "Import Prefix to Remove"
-    }
-  }), "getQuestions"),
-  getTasks: /* @__PURE__ */ __name(async ({ answers: { pkgPath, importPrefix = "" }, config }) => {
-    const dataDir = config.dest;
-    const currentPatterns = await readKsPatternConfigs({
-      dataDir
-    });
-    const currentReactPatternsImportNames = currentPatterns.reduce(
-      (cur, pattern) => {
-        const reactTemplates = pattern.templates?.filter((t) => t.templateLanguageId === "react") ?? [];
-        cur.push(...reactTemplates.map((t) => t.alias));
-        return cur;
-      },
-      []
-    );
-    const { exports: allImports } = await getJsExportNames({
-      path: pkgPath
-    });
-    return [
-      {
-        title: "Pick Imports to add",
-        task: /* @__PURE__ */ __name((_, task) => tasks.runSubCreator({
-          task,
-          config,
-          creator: createCreator({
-            id: "react-pattern-import-names",
-            getQuestions: /* @__PURE__ */ __name(async () => ({
-              importNames: {
-                type: "choices",
-                choices: allImports.filter(
-                  (importName) => startsWithCapitalLetter(importName) && !currentReactPatternsImportNames.includes(importName)
-                ).map((importName) => ({
-                  value: importName
-                }))
-              }
-            }), "getQuestions"),
-            getTasks: /* @__PURE__ */ __name(async ({ answers: { importNames } }) => {
-              const patterns = importNames.map((importName) => ({
-                importName,
-                patternId: importName.startsWith(importPrefix) ? importName.slice(importPrefix.length).toLowerCase() : importName.toLowerCase()
-              }));
-              return [
-                ...patterns.map(
-                  ({ importName, patternId }) => ({
-                    title: `Add ${importName} React Template`,
-                    task: /* @__PURE__ */ __name(async (__, subTask) => {
-                      const initialDemo = {
-                        type: "data",
-                        id: makeShortId(),
-                        title: "Main",
-                        patternId,
-                        templateId: "react",
-                        data: {
-                          props: {},
-                          slots: {}
-                        }
-                      };
-                      const pattern = createPatternData({
-                        id: patternId,
-                        importName,
-                        pkgPath,
-                        initialDemoId: initialDemo.id
-                      });
-                      await Promise.all([
-                        writeDemo({
-                          dataDir,
-                          demo: initialDemo
-                        }),
-                        writeKsPatternConfig({
-                          dataDir,
-                          patternId,
-                          data: pattern
-                        })
-                      ]);
-                    }, "task")
-                  })
-                ),
-                {
-                  title: `Updating Nav`,
-                  task: /* @__PURE__ */ __name(async (__, subTask) => {
-                    const { byId } = await readKsNavConfig({
-                      dataDir
-                    });
-                    const componentsGroup = Object.values(byId).find(
-                      ({ path: path3, name, id }) => {
-                        if (path3) return false;
-                        if (name.toLowerCase() === "patterns") return true;
-                        if (name.toLowerCase() === "components") return true;
-                        return false;
-                      }
-                    );
-                    await addKsNavItems({
-                      dataDir,
-                      navItems: patterns.map(({ patternId }) => ({
-                        navId: patternId,
-                        navPath: `/pattern/${patternId}`,
-                        navParent: componentsGroup?.id || "root"
-                      }))
-                    });
-                  }, "task")
-                }
-              ];
-            }, "getTasks")
-          })
-        }), "task")
-      }
-    ];
-  }, "getTasks")
-});
-
-// src/types.ts
-var rendererMetaScriptTagId = "ks-react-meta";
-
-// src/renderer-react.ts
-var { pkg } = findUpPkgJson(__dirname);
-log2.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
-var KnapsackReactRenderer = class _KnapsackReactRenderer extends RendererWebpackBase {
-  static {
-    __name(this, "KnapsackReactRenderer");
-  }
-  /**
-   * `react.js` & `react-dom.js` root relative paths
-   */
-  assets;
-  babelConfig;
-  demoWrapperPath;
-  disableReactStrictMode;
-  constructor({
-    webpackConfig,
-    demoWrapperPath = join(__dirname, "./demo-wrapper.mjs"),
-    id = rendererIds.react,
-    disableReactStrictMode
-  } = {}) {
-    super({
-      id,
-      extension: ".jsx",
-      language: "jsx",
-      webpackConfig,
-      extraScripts: [
-        // this is the code in `./client/init.mts`
-        "@knapsack/renderer-react/client"
-      ]
-    });
-    this.language = "jsx";
-    this.assets = [];
-    this.demoWrapperPath = demoWrapperPath;
-    this.disableReactStrictMode = disableReactStrictMode;
-    this.creators = [createReactPattern];
-  }
-  init = /* @__PURE__ */ __name(async (opt) => {
-    await super.init(opt);
-    this.assets = await copyReactAssets(this.outputDir, this.publicPath);
-    if (!await fileExists(this.demoWrapperPath)) {
-      throw new Error(
-        `Could not find demo wrapper at: "${this.demoWrapperPath}"`
-      );
-    }
-  }, "init");
-  getMeta = /* @__PURE__ */ __name(() => ({
-    id: this.id,
-    title: "React",
-    aliasUse: "optional",
-    aliasTitle: "Named Export",
-    aliasIsJsNamedExport: true,
-    aliasDescription: "If `export X` was used instead of `export default`, then provide X.",
-    enableDataDemos: true,
-    enableTemplateDemos: true,
-    hasSlotsSupport: true,
-    hasSlotOptionsSupport: true,
-    version: pkg.version,
-    hasInferSpecSupport: true,
-    syntaxHighlightingLanguage: "jsx",
-    hasTemplateSuggestionsSupport: true,
-    prototypingTemplate: {
-      path: "@knapsack/renderer-react/prototype-template",
-      spec: {
-        isInferred: false,
-        props: {
-          type: "object",
-          properties: {}
-        },
-        slots: {
-          children: { title: "Children" }
-        }
-      }
-    }
-  }), "getMeta");
-  changeCase = /* @__PURE__ */ __name((str) => pascalCase(str), "changeCase");
-  createWebpackConfig = /* @__PURE__ */ __name(() => {
-    const config = super.createWebpackConfig();
-    config.externals = {
-      react: "React",
-      "react-dom": "ReactDOM"
-    };
-    return config;
-  }, "createWebpackConfig");
-  getJsImports = /* @__PURE__ */ __name(() => {
-    const imports = super.getJsImports();
-    imports.push(
-      {
-        type: "extra",
-        importInfo: {
-          type: "default",
-          path: this.demoWrapperPath,
-          name: "DemoWrapper"
-        }
-      },
-      {
-        type: "extra",
-        importInfo: {
-          type: "default",
-          path: join(__dirname, "./error-catcher.mjs"),
-          name: "ErrorCatcher"
-        }
-      }
-    );
-    return imports;
-  }, "getJsImports");
-  async prepClientRenderResults({
-    usage,
-    demoApp,
-    imports: xImports,
-    renderOptions: { pattern, template, demo }
-  }) {
-    const extraImports = this.getJsImports().filter(
-      (imp) => imp.type === "extra"
-    );
-    const { imports, isDeclaredVarsUnique, nameCollisions } = this.makeKsJsImportsUnique({ imports: [...xImports, ...extraImports] });
-    if (!isDeclaredVarsUnique) {
-      log2.error(`${nameCollisions.join(", ")} are declared multiple times`, {
-        imports
-      });
-    }
-    const meta = {
-      demo,
-      disableReactStrictMode: this.disableReactStrictMode,
-      neededImports: imports,
-      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
-              }
-            ];
-          }
-          return [];
-        })
-      }
-    };
-    let code = `
+`}c(te,"renderDemoAppTemplate");async function M(r){let e=Object.keys(r.props||{}).map(n=>{let p=r.props[n];return {key:n,value:p}}),{templateName:t,children:s,extraProps:a=[]}=r;if(!t)throw new Error('Cannot getUsage of a React Component when no "templateName" is provided.');let o=e.map(({key:n,value:p})=>{switch(typeof p){case"string":return p.startsWith("(")&&p.includes("=>")?`${n}={${p}}`:`${n}="${p}"`;case"boolean":return p?`${n}`:`${n}={${p}}`;default:return `${n}={${JSON.stringify(p)}}`}}),i=[],l={};a.forEach(({key:n,value:p})=>{l[n]=l[n]??[],l[n].push(p);}),Object.entries(l).forEach(([n,p])=>{let u=p.length===1?p[0]:`<>${p.join(`
+`)}</>`;i.push(`${n}={${u}}`);});let m=ee({templateName:t,attributes:[...o,...i].join(" "),children:s});return r.format?formatCode({contents:m,path:"x.tsx"}).then(n=>n.trim()).catch(()=>m.trim()):m.trim()}c(M,"getUsage");async function v({children:r,imports:e,format:t}){let s=te({children:r,imports:e});return t?formatCode({contents:s,path:"x.tsx"}):s}c(v,"getDemoAppUsage");async function J({src:r}){let e=await findUp("tsconfig.json",{cwd:h.dirname(r)}),t=await import('react-docgen-typescript'),s={shouldExtractLiteralValuesFromEnum:!0,savePropValueAsString:!0,skipChildrenPropWithoutDoc:!1,customComponentTypes:["VoidFunctionComponent","VFC"]};return {info:(e?t.withCustomConfig(e,s).parse:t.withDefaultConfig(s).parse)(r)}}c(J,"getTypeScriptInfoFromFile");function re({info:r,exportName:e}){try{if(!r)return !1;let t={props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}},a=!e||e==="default"?r.pop():r.find(i=>i.displayName===e);if(!a)return !1;return Object.entries(a?.props||{}).forEach(([i,l])=>{let{name:m,description:n,defaultValue:p,required:u,type:f,parent:y}=l;switch(f?.name?.replace("| undefined","").replace(/<.*/g,"").trim()){case"string":t.props.properties[i]={type:"string"};break;case"number":t.props.properties[i]={type:"number"};break;case"boolean":case"bool":p&&"value"in p&&(p.value=p.value==="true"),t.props.properties[i]={type:"boolean"};break;case"enum":t.props.properties[i]={type:"string",enum:[...new Set(f.value.map(({value:d})=>removeWrappingDoubleQuotes(d?.trim())).filter(Boolean))]};break;case"ReactNode":case"React.ReactNode":case"React.ReactElement":case"ReactElement":t.slots[i]={title:i},n&&(t.slots[i]={...t.slots[i],description:n});break;case"VFC":case"FC":t.slots[i]={title:i,description:n||"A reference to a component",isTemplateReference:!0,allowOnlyOne:!0,disallowText:!0};break;default:if(f?.name?.startsWith("("))t.props.properties[i]={typeof:"function",tsType:l?.type?.name};else if(f?.name?.includes("|")){let d=f.name.split("|").map(P=>removeWrappingDoubleQuotes(P.trim())).filter(Boolean);d?.length&&(t.props.properties[i]={type:"string",enum:[...new Set(d)]});}else t.props.properties[i]={tsType:l?.type?.name};}t.props.properties[i]&&(u&&t.props.required.push(i),n&&!t.props.properties[i].description&&(t.props.properties[i].description=n),p&&"value"in p&&(isNumberProp(t.props.properties[i])?t.props.properties[i].default=parseFloat(p.value):t.props.properties[i].default=removeWrappingDoubleQuotes(p.value)));}),t}catch(t){return log.verbose("Could not infer spec from React TypeScript file",{exportName:e,error:t},"react renderer"),!1}}c(re,"extractSpecFromTypeScriptInfo");async function se({src:r}){let e=await import('react-docgen'),{builtinResolvers:t}=e,s=await readFile(r),{FindExportedDefinitionsResolver:a}=t;return {info:e.parse(s,{resolver:new a,handlers:null,filename:r})}}c(se,"getPropTypesInfoFromFile");function ae({info:r,exportName:e}){try{let s=!e||e==="default"?r.pop():r.find(o=>o.displayName===e),a={isInferred:!0,props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}};return Object.entries(s?.props||{}).forEach(([o,i])=>{let{required:l,description:m,defaultValue:n}=i;switch(i?.type?.name){case"string":a.props.properties[o]={type:"string"};break;case"func":a.props.properties[o]={type:"string"};break;case"bool":a.props.properties[o]={type:"boolean"};break;case"node":a.slots[o]={title:o,description:m};}a.props.properties[o]&&(l&&a.props.required.push(o),m&&!a.props.properties[o].description&&(a.props.properties[o].description=m),n&&"value"in n&&(a.props.properties[o].default=typeof n.value=="string"?removeWrappingDoubleQuotes(n.value):n.value));}),a}catch(t){return log.verbose("Could not infer spec from React PropTypes",{exportName:e,error:t},"react renderer"),!1}}c(ae,"extractSpecFromPropTypesInfo");function ne({spec:r}){return r===!1||Object.entries(r?.props?.properties||{}).forEach(([e,t])=>{isOptionsProp(t)&&(t.enum.includes(t.default)||(t.default=void 0));}),r}c(ne,"cleanUpSpec");async function oe({src:r,resolveFromDir:e}){let t=await resolvePath({path:r,resolveFromDir:e,resolveType:"types"});if(t.exists){let o=await J({src:t.absolutePath});if(o)return {type:"typescript",info:o.info}}let s=await resolvePath({path:r,resolveFromDir:e});if(!s.exists)return {type:"unknown"};let{ext:a}=h.parse(s.absolutePath);switch(a){case".jsx":return {type:"propTypes",info:(await se({src:s.absolutePath})).info};case".ts":case".tsx":return {type:"typescript",info:(await J({src:s.absolutePath})).info};default:return {type:"unknown"}}}c(oe,"getReactModuleInfoUncached");var $=new Map,V=c(()=>{log.info("Clearing React TypeScript inferSpec cache..."),$.clear();},"clearInferSpecCache");async function ie(r){let e=JSON.stringify(r);return $.has(e)||$.set(e,oe(r)),$.get(e)}c(ie,"getReactModuleInfo");async function pe({src:r,exportName:e,resolveFromDir:t}){let s=await ie({src:r,resolveFromDir:t});switch(s.type){case"typescript":return re({info:s.info,exportName:e});case"propTypes":return ae({info:s.info,exportName:e});case"unknown":default:return !1}}c(pe,"getReactSpec");async function B(r){return ne({spec:await pe(r)})}c(B,"getReactDocs");async function L(r,e){try{let{version:t}=getModulePkgJson("react"),{version:s}=getModulePkgJson("react-dom"),a=h.dirname(K.resolve("react",{paths:[process.cwd()]})),o=h.dirname(K.resolve("react-dom",{paths:[process.cwd()]}));await Promise.all([copy(h.join(a,"umd/react.development.js"),h.join(r,`react.development.${t}.js`)),copy(h.join(a,"umd/react.production.min.js"),h.join(r,`react.production.min.${t}.js`)),copy(h.join(o,"umd/react-dom.production.min.js"),h.join(r,`react-dom.production.min.${s}.js`)),copy(h.join(o,"umd/react-dom.development.js"),h.join(r,`react-dom.development.${s}.js`))]);let i=process.env.NODE_ENV==="production"?"production.min":"development";return [h.join(e,`react.${i}.${t}.js`),h.join(e,`react-dom.${i}.${s}.js`)]}catch(t){log.warn('Error trying to copy "react" and "react-dom" JS files, are they installed? We want to use your exact versions.',t,"templateRenderer:react"),process.exit(1);}}c(L,"copyReactAssets");function ye(r){return r.toUpperCase()===r}c(ye,"isCapitalLetter");function we(r){return ye(r[0])}c(we,"startsWithCapitalLetter");function Pe({importName:r,id:e,title:t=r,pkgPath:s,initialDemoId:a}){return {id:e,title:t,description:"",statuses:{main:"ready"},templates:[{id:"react",title:"react",path:s,alias:r,templateLanguageId:"react",spec:{isInferred:!0},demoIds:[a],blockIds:[]}],tabs:[{type:"template",id:"react"}],subPages:[]}}c(Pe,"createPatternData");var G=createCreator({id:"react-patterns",title:"React Ks Patterns",description:"Adds React templates as Knapsack Patterns",getQuestions:c(async()=>({pkgPath:{type:"text",title:"Package path"},importPrefix:{type:"text",title:"Import Prefix to Remove"}}),"getQuestions"),getTasks:c(async({answers:{pkgPath:r,importPrefix:e=""},config:t})=>{let s=t.dest,o=(await readKsPatternConfigs({dataDir:s})).reduce((l,m)=>{let n=m.templates?.filter(p=>p.templateLanguageId==="react")??[];return l.push(...n.map(p=>p.alias)),l},[]),{exports:i}=await getJsExportNames({path:r});return [{title:"Pick Imports to add",task:c((l,m)=>tasks.runSubCreator({task:m,config:t,creator:createCreator({id:"react-pattern-import-names",getQuestions:c(async()=>({importNames:{type:"choices",choices:i.filter(n=>we(n)&&!o.includes(n)).map(n=>({value:n}))}}),"getQuestions"),getTasks:c(async({answers:{importNames:n}})=>{let p=n.map(u=>({importName:u,patternId:u.startsWith(e)?u.slice(e.length).toLowerCase():u.toLowerCase()}));return [...p.map(({importName:u,patternId:f})=>({title:`Add ${u} React Template`,task:c(async(y,R)=>{let d={type:"data",id:makeShortId(),title:"Main",patternId:f,templateId:"react",data:{props:{},slots:{}}},P=Pe({id:f,importName:u,pkgPath:r,initialDemoId:d.id});await Promise.all([writeDemo({dataDir:s,demo:d}),writeKsPatternConfig({dataDir:s,patternId:f,data:P})]);},"task")})),{title:"Updating Nav",task:c(async(u,f)=>{let{byId:y}=await readKsNavConfig({dataDir:s}),R=Object.values(y).find(({path:d,name:P,id:w})=>d?!1:P.toLowerCase()==="patterns"||P.toLowerCase()==="components");await addKsNavItems({dataDir:s,navItems:p.map(({patternId:d})=>({navId:d,navPath:`/pattern/${d}`,navParent:R?.id||"root"}))});},"task")}]},"getTasks")})}),"task")}]},"getTasks")});var H="ks-react-meta";var{pkg:j}=findUpPkgJson(__dirname);log.setupUpdateNotifier({...j,name:j.name,version:j.version});var Q=class r extends RendererWebpackBase{static{c(this,"KnapsackReactRenderer");}assets;babelConfig;demoWrapperPath;disableReactStrictMode;constructor({webpackConfig:e,demoWrapperPath:t=join(__dirname,"./demo-wrapper.mjs"),id:s=rendererIds.react,disableReactStrictMode:a}={}){super({id:s,extension:".jsx",language:"jsx",webpackConfig:e,extraScripts:["@knapsack/renderer-react/client"]}),this.language="jsx",this.assets=[],this.demoWrapperPath=t,this.disableReactStrictMode=a,this.creators=[G];}init=c(async e=>{if(await super.init(e),this.assets=await L(this.outputDir,this.publicPath),!await exists(this.demoWrapperPath))throw new Error(`Could not find demo wrapper at: "${this.demoWrapperPath}"`)},"init");getMeta=c(()=>({id:this.id,title:"React",aliasUse:"optional",aliasTitle:"Named Export",aliasIsJsNamedExport:!0,aliasDescription:"If `export X` was used instead of `export default`, then provide X.",enableDataDemos:!0,enableTemplateDemos:!0,hasSlotsSupport:!0,hasSlotOptionsSupport:!0,version:j.version,hasInferSpecSupport:!0,syntaxHighlightingLanguage:"jsx",hasTemplateSuggestionsSupport:!0,prototypingTemplate:{path:"@knapsack/renderer-react/prototype-template",spec:{isInferred:!1,props:{type:"object",properties:{}},slots:{children:{title:"Children"}}}}}),"getMeta");changeCase=c(e=>pascalCase(e),"changeCase");createWebpackConfig=c(()=>{let e=super.createWebpackConfig();return e.externals={react:"React","react-dom":"ReactDOM"},e},"createWebpackConfig");getJsImports=c(()=>{let e=super.getJsImports();return e.push({type:"extra",importInfo:{type:"default",path:this.demoWrapperPath,name:"DemoWrapper"}},{type:"extra",importInfo:{type:"default",path:join(__dirname,"./error-catcher.mjs"),name:"ErrorCatcher"}}),e},"getJsImports");async prepClientRenderResults({usage:e,demoApp:t,imports:s,renderOptions:{pattern:a,template:o,demo:i}}){let l=this.getJsImports().filter(d=>d.type==="extra"),{imports:m,isDeclaredVarsUnique:n,nameCollisions:p}=this.makeKsJsImportsUnique({imports:[...s,...l]});n||log.error(`${p.join(", ")} are declared multiple times`,{imports:m});let u={demo:i,disableReactStrictMode:this.disableReactStrictMode,neededImports:m,demoWrapperProps:{pattern:a,template:o,demo:i,patternsUsed:m.flatMap(d=>d.type==="pattern-template"?[{patternId:d.patternId,templateId:d.templateId}]:d.type==="pattern-template-demo"?[{patternId:d.patternId,templateId:d.templateId,demoId:d.demoId}]:[])}},f=`
     window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${imports.map((i) => i.importInfo.name).join(", ")} }) => {
-      ${demoApp}
-      return ${demoAppName}
-    }
-    `;
-    let errorHtmlMsg = "";
-    try {
-      code = await babelCodeForBrowser({ code });
-    } catch (e) {
-      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>`;
+    window.knapsack.getDemoApp = ({ ${m.map(d=>d.importInfo.name).join(", ")} }) => {
+      ${t}
+      return ${O}
     }
-    const html = `
-    <script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
-      meta
-    )}</script>
-    <script type="application/javascript">${code}</script>
+    `,y="";try{f=await babelCodeForBrowser({code:f});}catch(d){console.log(f),console.log("---original code before babel error ^---"),console.trace(d.message),f=`console.error(${JSON.stringify(d.message)});`,y=`<pre><code>${d.message}</code></pre>`;}let R=`
+    <script type="application/json" id="${H}">${JSON.stringify(u)}</script>
+    <script type="application/javascript">${f}</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
-    })}
-    ${errorHtmlMsg}
-    `;
-    return {
-      ok: !errorHtmlMsg,
-      html: await formatCode2({
-        contents: html,
-        path: "x.html"
-        // doing this to set format language
-      }),
-      usage,
-      templateLanguage: this.language
-    };
-  }
-  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 {
-          const { absolutePath, exists } = await this.resolvePath(
-            opt.demo.templateInfo.path
-          );
-          if (!exists) {
-            throw new Error(
-              `Template demo file does not exist: ${absolutePath}`
-            );
-          }
-          templateDemoPath = absolutePath;
-          break;
-        } catch (e) {
-          const waitTime = waits[attempt];
-          if (!waitTime) {
-            throw new Error(e);
-          }
-          attempt += 1;
-          await sleep(waitTime);
-        }
-      }
-      const [templateFileContents, { usage, imports }] = await Promise.all([
-        readFile2(templateDemoPath),
-        this.getUsageAndImports(opt)
-      ]);
-      const demoApp = await getDemoAppUsage({
-        children: usage
-      });
-      const results = await this.prepClientRenderResults({
-        usage: templateFileContents,
-        demoApp,
-        imports,
-        renderOptions: opt
-      });
-      return results;
-    }
-    if (opt.demo?.type === "data") {
-      const { usage, imports } = await this.getUsageAndImports(opt);
-      const { code: importCode } = this.createJsImportCodeBlock({
-        imports
-      });
-      const [demoAppUsage, demoApp] = await Promise.all([
-        getDemoAppUsage({
-          children: usage,
-          imports: importCode,
-          format: true
-        }),
-        getDemoAppUsage({
-          children: usage
-        })
-      ]);
-      return this.prepClientRenderResults({
-        demoApp,
-        usage: demoAppUsage,
-        imports,
-        renderOptions: opt
-      });
-    }
-  }, "render");
-  getUsageAndImports = /* @__PURE__ */ __name(async ({
-    pattern,
-    template,
-    patternManifest,
-    demo
-  }) => {
-    if (demo?.type && demo.type === "data") {
-      const {
-        data: { props, slots, slotsOptionsComputed }
-      } = demo;
-      const importInfo = this.getJsImport({
-        patternId: pattern.id,
-        templateId: template.id
-      });
-      if (!importInfo) {
-        throw new Error(
-          `Could not find import for pattern-template: ${pattern.id}-${template.id}`
-        );
-      }
-      const { type, name: templateName } = importInfo.importInfo;
-      const importInfos = [importInfo];
-      const children = [];
-      const extraProps = [];
-      if (slots) {
-        const slotNames = Object.keys(slots);
-        const slotUsages = await Promise.all(
-          slotNames.map(async (slotName) => {
-            const slotItems = slots[slotName];
-            const slotItemsUsages = await Promise.all(
-              slotItems.filter((slotItem) => {
-                if (slotItem.type !== "text") {
-                  if (!slotItem.patternId) return false;
-                  if (!slotItem.templateId) return false;
-                  if (slotItem.type === "template-demo" && !slotItem.demoId) {
-                    return false;
-                  }
-                }
-                return true;
-              }).map(async (slotItem) => {
-                if (slotItem.type === "text") {
-                  if (slotItems.length === 1 && slotName !== "children") {
-                    return `\`${slotItem.text}\``;
-                  }
-                  return slotItem.text;
-                }
-                const slotPattern = patternManifest.getPattern(
-                  slotItem.patternId
-                );
-                const slotTemplate = slotPattern.templates.find(
-                  (t) => t.id === slotItem.templateId
-                );
-                if (slotItem.type === "template-reference") {
-                  const { usage: usage2, imports } = await this.getUsageAndImports({
-                    pattern: slotPattern,
-                    template: slotTemplate,
-                    patternManifest
-                  });
-                  importInfos.push(...imports);
-                  return usage2;
-                }
-                if (slotItem.type === "template-demo") {
-                  const { usage: usage2, imports } = await this.getUsageAndImports({
-                    pattern: slotPattern,
-                    template: slotTemplate,
-                    demo: slotItem.demo || this.patterns.demosById[slotItem.demoId],
-                    patternManifest
-                  });
-                  importInfos.push(...imports);
-                  return usage2;
-                }
-                throw new Error(
-                  `Unknown slot item: ${JSON.stringify(slotItem)}`
-                );
-              })
-            );
-            return {
-              slotName,
-              slotItemsUsages
-            };
-          })
-        );
-        slotUsages.forEach(({ slotName, slotItemsUsages }) => {
-          const slotOptionsComputed = slotsOptionsComputed?.[slotName];
-          const { openTag, closeTag } = createSlotOptionsHtmlTags({
-            slotOptionsComputed,
-            classAttributeName: "className",
-            stylesValueType: "object"
-          });
-          if (openTag) {
-            if (slotName === "children") {
-              children.push(openTag);
-            } else {
-              extraProps.push({
-                key: slotName,
-                value: openTag
-              });
-            }
-          }
-          slotItemsUsages.forEach((usage2) => {
-            if (slotName === "children") {
-              children.push(usage2);
-            } else {
-              extraProps.push({
-                key: slotName,
-                value: usage2
-              });
-            }
-          });
-          if (closeTag) {
-            if (slotName === "children") {
-              children.push(closeTag);
-            } else {
-              extraProps.push({
-                key: slotName,
-                value: closeTag
-              });
-            }
-          }
-        });
-      }
-      const usage = await getUsage({
-        templateName,
-        props,
-        children: children.join("\n"),
-        extraProps
-      });
-      return {
-        usage,
-        imports: importInfos
-      };
-    }
-    if (demo?.type && demo.type === "template") {
-      const importInfo = this.getJsImport({
-        patternId: pattern.id,
-        templateId: template.id,
-        demoId: demo.id
-      });
-      if (!importInfo) {
-        throw new Error(
-          `Could not find import for pattern-template-demo: ${pattern.id}-${template.id}-${demo.id}`
-        );
-      }
-      const { type, name: templateName } = importInfo.importInfo;
-      const usage = await getUsage({ templateName });
-      return {
-        usage,
-        imports: [importInfo]
-      };
-    }
-    if (!demo) {
-      const importInfo = this.getJsImport({
-        patternId: pattern.id,
-        templateId: template.id
-      });
-      if (!importInfo) {
-        throw new Error(
-          `Could not find import for pattern-template: ${pattern.id}-${template.id}`
-        );
-      }
-      const { type, name: templateName } = importInfo.importInfo;
-      return {
-        /**
-         * i.e. Given a React Component, `Button`, normally this would be `<Button>` with a demo, but since there is none this will just be a reference to it: `Button`
-         * @see {KsSlotInfo['isTemplateReference']}
-         * @see {SlottedTemplate}
-         */
-        usage: templateName,
-        imports: [importInfo]
-      };
-    }
-    throw new Error(
-      `Unhandled demo type for ${pattern.id}-${template.id}: ${JSON.stringify(
-        demo
-      )}`
-    );
-  }, "getUsageAndImports");
-  inferSpec = /* @__PURE__ */ __name(async ({
-    template,
-    templatePath
-  }) => {
-    const spec = await getReactDocs({
-      src: template.path,
-      exportName: template.alias || "default",
-      resolveFromDir: this.config.data
-    });
-    if (spec !== false) {
-      const totalProps = Object.keys(spec?.props?.properties || {}).length;
-      const totalSlots = Object.keys(spec?.slots || {}).length;
-      if (totalProps === 0 && totalSlots === 0) {
-        return false;
-      }
-    }
-    return spec;
-  }, "inferSpec");
-  watch = /* @__PURE__ */ __name(async (opt) => {
-    super.watch(opt);
-    knapsackEvents.onPatternTemplateChanged(() => {
-      clearInferSpecCache();
-    });
-  }, "watch");
-  getTemplateMeta = /* @__PURE__ */ __name(async ({
-    pattern,
-    template
-  }) => {
-    const files = [];
-    if (template?.spec?.props) {
-      const schema = JSON.parse(JSON.stringify(template.spec.props));
-      if (template?.spec?.slots) {
-        Object.entries(template.spec.slots).forEach(([id, info]) => {
-          schema.properties[id] = {
-            typeof: "function",
-            tsType: "React.ReactNode",
-            description: info.allowedPatternIds ? `${info.description}. Only use: ${info.allowedPatternIds.join(
-              ", "
-            )}` : info.description
-          };
-          schema.required = schema.required ?? [];
-          if (info.isRequired) schema.required.push(id);
-        });
-      }
-      const typeDefs = await _KnapsackReactRenderer.convertSchemaToTypeScriptDefs({
-        schema,
-        title: `${this.changeCase(pattern.id)}Props`,
-        // @todo pull in base url
-        description: `[Knapsack Docs](http://localhost:3999/pattern/${pattern.id}/${template.id})`,
-        patternId: pattern.id,
-        templateId: template.id,
-        postBanner: `import * as React from 'react';`
-      });
-      files.push({
-        contents: typeDefs,
-        encoding: "utf8",
-        path: `${pattern.id}.${template.id}.spec.d.ts`
-      });
-      files.push({
-        contents: JSON.stringify(schema, null, "  "),
-        encoding: "utf8",
-        path: `${pattern.id}.${template.id}.spec.json`
-      });
-    }
-    return files;
-  }, "getTemplateMeta");
-  alterTemplateMetaFiles = /* @__PURE__ */ __name(async ({
-    files,
-    metaDir
-  }) => {
-    const imports = [];
-    const ext = ".spec.d.ts";
-    files.forEach((file) => {
-      if (file.path.endsWith(ext)) {
-        const { base } = parse(file.path);
-        const [patternId, templateId] = base.split(".");
-        const isFirst = templateId === this.id;
-        const exportName = this.changeCase(`${patternId}Props`);
-        const exportNameWithTemplateId = this.changeCase(
-          `${patternId}-${templateId}Props`
-        );
-        imports.push(
-          `export { ${isFirst ? exportName : `${exportName} as ${exportNameWithTemplateId}`} } from './${relative(metaDir, file.path).replace(".d.ts", "")}';`
-        );
-      }
-    });
-    imports.push("");
-    return [
-      ...files,
-      {
-        contents: imports.join("\n"),
-        encoding: "utf8",
-        path: join(metaDir, "react.d.ts")
-      }
-    ];
-  }, "alterTemplateMetaFiles");
-  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
-    newPath
-  }) => {
-    const { data: dataDir } = this.patterns.userConfig;
-    const { allTemplateDemos, allTemplates } = this.getMyTemplates();
-    const usedSuggestions = [
-      ...allTemplateDemos,
-      ...allTemplates
-    ].map(({ path: path3, alias }) => {
-      return {
-        path: path3,
-        alias: alias || "default"
-      };
-    });
-    const allPaths = [
-      .../* @__PURE__ */ new Set([newPath, ...usedSuggestions.map(({ path: path3 }) => path3)])
-    ];
-    const allSuggestions = await Promise.all(
-      allPaths.map(async (path3) => {
-        if (!path3) return [];
-        try {
-          const { exports, errorMsg } = await getJsExportNames2({
-            path: path3,
-            resolveFromDir: dataDir,
-            pkgPathAliases: this.pkgPathAliases
-          });
-          if (errorMsg) {
-            throw new Error(errorMsg);
-          }
-          return exports.filter((e) => e === "default" || isFirstLetterCapital(e)).map((name) => ({
-            alias: name,
-            path: path3
-          }));
-        } catch (e) {
-          log2.verbose(
-            `Error getting import names for ${path3}: ${e.message}`,
-            null,
-            this.logPrefix
-          );
-          return [];
-        }
-      })
-    ).then((results) => {
-      return results.flat();
-    });
-    const suggestions = allSuggestions.filter((s) => {
-      return !usedSuggestions.find(
-        (us) => us.alias === s.alias && us.path === s.path
-      );
-    });
-    return {
-      suggestions
-    };
-  }, "getTemplateSuggestions");
-};
-export {
-  KnapsackReactRenderer
-};
+    ${this.assets.map(d=>`<script src="${d}"></script>`).join(`
+`)}
+    ${this.createHtmlTagsForAssetPaths({assets:this.getWebpackAssetPaths(),scriptTagsAreAsync:!1})}
+    ${y}
+    `;return {ok:!y,html:await formatCode({contents:R,path:"x.html"}),usage:e,templateLanguage:this.language}}render=c(async e=>{if(e.demo?.type==="template"){let t=[5,10,20,50,100,1e3,1e3],s,a=0;for(;;)try{let{absolutePath:p,exists:u}=await this.resolvePath(e.demo.templateInfo.path);if(!u)throw new Error(`Template demo file does not exist: ${p}`);s=p;break}catch(p){let u=t[a];if(!u)throw new Error(p);a+=1,await Ie(u);}let[o,{usage:i,imports:l}]=await Promise.all([readFile(s),this.getUsageAndImports(e)]),m=await v({children:i});return await this.prepClientRenderResults({usage:o,demoApp:m,imports:l,renderOptions:e})}if(e.demo?.type==="data"){let{usage:t,imports:s}=await this.getUsageAndImports(e),{code:a}=this.createJsImportCodeBlock({imports:s}),[o,i]=await Promise.all([v({children:t,imports:a,format:!0}),v({children:t})]);return this.prepClientRenderResults({demoApp:i,usage:o,imports:s,renderOptions:e})}},"render");getUsageAndImports=c(async({pattern:e,template:t,patternManifest:s,demo:a})=>{if(a?.type&&a.type==="data"){let{data:{props:o,slots:i,slotsOptionsComputed:l}}=a,m=this.getJsImport({patternId:e.id,templateId:t.id});if(!m)throw new Error(`Could not find import for pattern-template: ${e.id}-${t.id}`);let{type:n,name:p}=m.importInfo,u=[m],f=[],y=[];if(i){let d=Object.keys(i);(await Promise.all(d.map(async w=>{let T=i[w],D=await Promise.all(T.filter(g=>!(g.type!=="text"&&(!g.patternId||!g.templateId||g.type==="template-demo"&&!g.demoId))).map(async g=>{if(g.type==="text")return T.length===1&&w!=="children"?`\`${g.text}\``:g.text;let I=s.getPattern(g.patternId),b=I.templates.find(k=>k.id===g.templateId);if(g.type==="template-reference"){let{usage:k,imports:E}=await this.getUsageAndImports({pattern:I,template:b,patternManifest:s});return u.push(...E),k}if(g.type==="template-demo"){let{usage:k,imports:E}=await this.getUsageAndImports({pattern:I,template:b,demo:g.demo||this.patterns.demosById[g.demoId],patternManifest:s});return u.push(...E),k}throw new Error(`Unknown slot item: ${JSON.stringify(g)}`)}));return {slotName:w,slotItemsUsages:D}}))).forEach(({slotName:w,slotItemsUsages:T})=>{let D=l?.[w],{openTag:g,closeTag:I}=createSlotOptionsHtmlTags({slotOptionsComputed:D,classAttributeName:"className",stylesValueType:"object"});g&&(w==="children"?f.push(g):y.push({key:w,value:g})),T.forEach(b=>{w==="children"?f.push(b):y.push({key:w,value:b});}),I&&(w==="children"?f.push(I):y.push({key:w,value:I}));});}return {usage:await M({templateName:p,props:o,children:f.join(`
+`),extraProps:y}),imports:u}}if(a?.type&&a.type==="template"){let o=this.getJsImport({patternId:e.id,templateId:t.id,demoId:a.id});if(!o)throw new Error(`Could not find import for pattern-template-demo: ${e.id}-${t.id}-${a.id}`);let{type:i,name:l}=o.importInfo;return {usage:await M({templateName:l}),imports:[o]}}if(!a){let o=this.getJsImport({patternId:e.id,templateId:t.id});if(!o)throw new Error(`Could not find import for pattern-template: ${e.id}-${t.id}`);let{type:i,name:l}=o.importInfo;return {usage:l,imports:[o]}}throw new Error(`Unhandled demo type for ${e.id}-${t.id}: ${JSON.stringify(a)}`)},"getUsageAndImports");inferSpec=c(async({template:e,templatePath:t})=>{let s=await B({src:e.path,exportName:e.alias||"default",resolveFromDir:this.config.data});if(s!==!1){let a=Object.keys(s?.props?.properties||{}).length,o=Object.keys(s?.slots||{}).length;if(a===0&&o===0)return !1}return s},"inferSpec");watch=c(async e=>{super.watch(e),knapsackEvents.onPatternTemplateChanged(()=>{V();});},"watch");getTemplateMeta=c(async({pattern:e,template:t})=>{let s=[];if(t?.spec?.props){let a=JSON.parse(JSON.stringify(t.spec.props));t?.spec?.slots&&Object.entries(t.spec.slots).forEach(([i,l])=>{a.properties[i]={typeof:"function",tsType:"React.ReactNode",description:l.allowedPatternIds?`${l.description}. Only use: ${l.allowedPatternIds.join(", ")}`:l.description},a.required=a.required??[],l.isRequired&&a.required.push(i);});let o=await r.convertSchemaToTypeScriptDefs({schema:a,title:`${this.changeCase(e.id)}Props`,description:`[Knapsack Docs](http://localhost:3999/pattern/${e.id}/${t.id})`,patternId:e.id,templateId:t.id,postBanner:"import * as React from 'react';"});s.push({contents:o,encoding:"utf8",path:`${e.id}.${t.id}.spec.d.ts`}),s.push({contents:JSON.stringify(a,null,"  "),encoding:"utf8",path:`${e.id}.${t.id}.spec.json`});}return s},"getTemplateMeta");alterTemplateMetaFiles=c(async({files:e,metaDir:t})=>{let s=[],a=".spec.d.ts";return e.forEach(o=>{if(o.path.endsWith(a)){let{base:i}=parse(o.path),[l,m]=i.split("."),n=m===this.id,p=this.changeCase(`${l}Props`),u=this.changeCase(`${l}-${m}Props`);s.push(`export { ${n?p:`${p} as ${u}`} } from './${relative(t,o.path).replace(".d.ts","")}';`);}}),s.push(""),[...e,{contents:s.join(`
+`),encoding:"utf8",path:join(t,"react.d.ts")}]},"alterTemplateMetaFiles");getTemplateSuggestions=c(async({newPath:e})=>{let{data:t}=this.patterns.userConfig,{allTemplateDemos:s,allTemplates:a}=this.getMyTemplates(),o=[...s,...a].map(({path:n,alias:p})=>({path:n,alias:p||"default"})),i=[...new Set([e,...o.map(({path:n})=>n)])];return {suggestions:(await Promise.all(i.map(async n=>{if(!n)return [];try{let{exports:p,errorMsg:u}=await getJsExportNames({path:n,resolveFromDir:t,pkgPathAliases:this.pkgPathAliases});if(u)throw new Error(u);return p.filter(f=>f==="default"||isFirstLetterCapital(f)).map(f=>({alias:f,path:n}))}catch(p){return log.verbose(`Error getting import names for ${n}: ${p.message}`,null,this.logPrefix),[]}})).then(n=>n.flat())).filter(n=>!o.find(p=>p.alias===n.alias&&p.path===n.path))}},"getTemplateSuggestions")};
+
+export { Q as KnapsackReactRenderer };
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map