@knapsack/renderer-react 4.70.0--canary.4821.ef34743.0 → 4.70.0--canary.4821.82d27e9.0

package/dist/index.js

@@ -1,1304 +1,54 @@
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: 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
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  KnapsackReactRenderer: () => KnapsackReactRenderer
-});
-module.exports = __toCommonJS(src_exports);
+var ke = require('sleep-promise');
+var rendererWebpackBase = require('@knapsack/renderer-webpack-base');
+var utils = require('@knapsack/utils');
+var app = require('@knapsack/app');
+var renderers = require('@knapsack/app/renderers');
+var types = require('@knapsack/types');
+var fileUtils = require('@knapsack/file-utils');
+var g = require('path');
+var creatorUtils = require('@knapsack/creator-utils');
+var ksFileUtils = require('@knapsack/ks-file-utils');
 
-// src/renderer-react.ts
-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");
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-// src/utils.ts
-var import_app = require("@knapsack/app");
-var import_file_utils = require("@knapsack/file-utils");
-var import_utils = require("@knapsack/utils");
-var import_path = __toESM(require("path"));
-var import_types = require("@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}
+var ke__default = /*#__PURE__*/_interopDefault(ke);
+var g__default = /*#__PURE__*/_interopDefault(g);
+
+var Y=Object.defineProperty;var l=(s,t)=>Y(s,"name",{value:t,configurable:!0}),D=(s=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(s,{get:(t,e)=>(typeof require<"u"?require:t)[e]}):s)(function(s){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+s+'" is not supported')});function se({templateName:s,attributes:t,children:e}){return `
+    <${s}
+      ${t}
+      ${e?`>
+        ${e}
+      </${s}>`:"/>"}
+  `}l(se,"renderUsageTemplate");var E="DemoApp";function ae({imports:s="",children:t}){return `${s}
 
-function ${demoAppName}() {
+function ${E}() {
   return (
-    ${children}
+    ${t}
   )
 }
-`;
-}
-__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 ? (0, import_file_utils.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 (0, import_file_utils.formatCode)({
-    contents: code,
-    path: "x.tsx"
-    // doing this to set format language
-  });
-}
-__name(getDemoAppUsage, "getDemoAppUsage");
-async function getTypeScriptInfoFromFile({ src }) {
-  const tsConfigPath = await (0, import_file_utils.findUp)("tsconfig.json", {
-    cwd: import_path.default.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 }) => (0, import_utils.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) => (0, import_utils.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 ((0, import_types.isNumberProp)(spec.props.properties[propName])) {
-            spec.props.properties[propName].default = parseFloat(
-              defaultValue.value
-            );
-          } else {
-            spec.props.properties[propName].default = (0, import_utils.removeWrappingDoubleQuotes)(defaultValue.value);
-          }
-        }
-      }
-    });
-    return spec;
-  } catch (error) {
-    import_app.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 (0, import_file_utils.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" ? (0, import_utils.removeWrappingDoubleQuotes)(defaultValue.value) : defaultValue.value;
-        }
-      }
-    });
-    return spec;
-  } catch (error) {
-    import_app.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 ((0, import_types.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 (0, import_file_utils.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 (0, import_file_utils.resolvePath)({
-    path: unknownSrc,
-    resolveFromDir
-  });
-  if (!jsInfo.exists) return { type: "unknown" };
-  const { ext } = import_path.default.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(() => {
-  import_app.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 } = (0, import_file_utils.getModulePkgJson)("react");
-    const { version: reactDomVersion } = (0, import_file_utils.getModulePkgJson)("react-dom");
-    const reactRoot = import_path.default.dirname(
-      require.resolve("react", {
-        paths: [process.cwd()]
-      })
-    );
-    const reactDomRoot = import_path.default.dirname(
-      require.resolve("react-dom", {
-        paths: [process.cwd()]
-      })
-    );
-    await Promise.all([
-      (0, import_file_utils.copy)(
-        import_path.default.join(reactRoot, "umd/react.development.js"),
-        import_path.default.join(distDirAbsolute, `react.development.${reactVersion}.js`)
-      ),
-      (0, import_file_utils.copy)(
-        import_path.default.join(reactRoot, "umd/react.production.min.js"),
-        import_path.default.join(distDirAbsolute, `react.production.min.${reactVersion}.js`)
-      ),
-      (0, import_file_utils.copy)(
-        import_path.default.join(reactDomRoot, "umd/react-dom.production.min.js"),
-        import_path.default.join(
-          distDirAbsolute,
-          `react-dom.production.min.${reactDomVersion}.js`
-        )
-      ),
-      (0, import_file_utils.copy)(
-        import_path.default.join(reactDomRoot, "umd/react-dom.development.js"),
-        import_path.default.join(
-          distDirAbsolute,
-          `react-dom.development.${reactDomVersion}.js`
-        )
-      )
-    ]);
-    const reactFileSuffix = process.env.NODE_ENV === "production" ? "production.min" : "development";
-    return [
-      import_path.default.join(publicPath, `react.${reactFileSuffix}.${reactVersion}.js`),
-      import_path.default.join(
-        publicPath,
-        `react-dom.${reactFileSuffix}.${reactDomVersion}.js`
-      )
-    ];
-  } catch (error) {
-    import_app.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
-var import_file_utils2 = require("@knapsack/file-utils");
-var import_creator_utils = require("@knapsack/creator-utils");
-var import_ks_file_utils = require("@knapsack/ks-file-utils");
-var import_utils2 = require("@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 = (0, import_creator_utils.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 (0, import_ks_file_utils.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 (0, import_file_utils2.getJsExportNames)({
-      path: pkgPath
-    });
-    return [
-      {
-        title: "Pick Imports to add",
-        task: /* @__PURE__ */ __name((_, task) => import_creator_utils.tasks.runSubCreator({
-          task,
-          config,
-          creator: (0, import_creator_utils.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: (0, import_utils2.makeShortId)(),
-                        title: "Main",
-                        patternId,
-                        templateId: "react",
-                        data: {
-                          props: {},
-                          slots: {}
-                        }
-                      };
-                      const pattern = createPatternData({
-                        id: patternId,
-                        importName,
-                        pkgPath,
-                        initialDemoId: initialDemo.id
-                      });
-                      await Promise.all([
-                        (0, import_ks_file_utils.writeDemo)({
-                          dataDir,
-                          demo: initialDemo
-                        }),
-                        (0, import_ks_file_utils.writeKsPatternConfig)({
-                          dataDir,
-                          patternId,
-                          data: pattern
-                        })
-                      ]);
-                    }, "task")
-                  })
-                ),
-                {
-                  title: `Updating Nav`,
-                  task: /* @__PURE__ */ __name(async (__, subTask) => {
-                    const { byId } = await (0, import_ks_file_utils.readKsNavConfig)({
-                      dataDir
-                    });
-                    const componentsGroup = Object.values(byId).find(
-                      ({ path: path2, name, id }) => {
-                        if (path2) return false;
-                        if (name.toLowerCase() === "patterns") return true;
-                        if (name.toLowerCase() === "components") return true;
-                        return false;
-                      }
-                    );
-                    await (0, import_ks_file_utils.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 } = (0, import_file_utils3.findUpPkgJson)(__dirname);
-import_app2.log.setupUpdateNotifier({ ...pkg, name: pkg.name, version: pkg.version });
-var errorCatcherAbsolutePath = (0, import_path2.join)(__dirname, "./error-catcher.mjs");
-if (!(0, import_file_utils3.exists)(errorCatcherAbsolutePath)) {
-  throw new Error(
-    `Could not find error catcher at: ${errorCatcherAbsolutePath}`
-  );
-}
-var KnapsackReactRenderer = class _KnapsackReactRenderer extends import_renderer_webpack_base.RendererWebpackBase {
-  static {
-    __name(this, "KnapsackReactRenderer");
-  }
-  /**
-   * `react.js` & `react-dom.js` root relative paths
-   */
-  assets;
-  babelConfig;
-  #demoWrapperPath;
-  #disableReactStrictMode;
-  constructor({
-    webpackConfig,
-    demoWrapperPath = (0, import_path2.join)(__dirname, "./demo-wrapper.mjs"),
-    id = import_types2.rendererIds.react,
-    disableReactStrictMode
-  } = {}) {
-    super({
-      id,
-      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];
-  }
-  setConfig = /* @__PURE__ */ __name((opt) => {
-    super.setConfig(opt);
-    const {
-      absolutePath,
-      exists: demoWrapperPathExists,
-      type
-    } = this.resolvePathSync({
-      path: this.#demoWrapperPath,
-      resolveFromDir: this.userConfigDir
-    });
-    if (!demoWrapperPathExists) {
-      throw new Error(
-        `Could not find demo wrapper at: "${this.#demoWrapperPath}"
-Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`
-      );
-    }
-    this.registerExtraJsImports({
-      DemoWrapper: {
-        exportName: "DemoWrapper",
-        isDefaultExport: true,
-        path: type === "package" ? this.#demoWrapperPath : absolutePath
-      },
-      ErrorCatcher: {
-        exportName: "ErrorCatcher",
-        isDefaultExport: true,
-        path: errorCatcherAbsolutePath
-      }
-    });
-  }, "setConfig");
-  init = /* @__PURE__ */ __name(async () => {
-    this.assets = await copyReactAssets(this.outputDir, this.publicPath);
-  }, "init");
-  hydrate = /* @__PURE__ */ __name(async (opt) => {
-    await super.hydrate(opt);
-    await this.init({ missingFileVerbosity: "silent" });
-  }, "hydrate");
-  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) => (0, import_utils3.pascalCase)(str), "changeCase");
-  createWebpackConfig = /* @__PURE__ */ __name(() => {
-    const config = super.createWebpackConfig();
-    config.externals = {
-      react: "React",
-      "react-dom": "ReactDOM"
-    };
-    return config;
-  }, "createWebpackConfig");
-  async prepClientRenderResults({
-    usage,
-    demoApp,
-    importMap,
-    renderOptions: { demo, state, patternId, templateId }
-  }) {
-    const meta = {
-      demo,
-      disableReactStrictMode: this.#disableReactStrictMode,
-      neededImportsByCodeSrcId: (0, import_renderer_webpack_base.convertImportMapToNeededImportsByCodeSrcId)(importMap),
-      demoWrapperProps: {
-        patternId,
-        templateId,
-        demo
-      }
-    };
-    let code = `
+`}l(ae,"renderDemoAppTemplate");async function O(s){let t=Object.keys(s.props||{}).map(a=>{let o=s.props[a];return {key:a,value:o}}),{templateName:e,children:r,extraProps:n=[]}=s;if(!e)throw new Error('Cannot getUsage of a React Component when no "templateName" is provided.');let i=t.map(({key:a,value:o})=>{switch(typeof o){case"string":return o.startsWith("(")&&o.includes("=>")?`${a}={${o}}`:`${a}="${o}"`;case"boolean":return o?`${a}`:`${a}={${o}}`;default:return `${a}={${JSON.stringify(o)}}`}}),p=[],u={};n.forEach(({key:a,value:o})=>{u[a]=u[a]??[],u[a].push(o);}),Object.entries(u).forEach(([a,o])=>{let d=o.length===1?o[0]:`<>${o.join(`
+`)}</>`;p.push(`${a}={${d}}`);});let c=se({templateName:e,attributes:[...i,...p].join(" "),children:r});return s.format?fileUtils.formatCode({contents:c,path:"x.tsx"}).then(a=>a.trim()).catch(()=>c.trim()):c.trim()}l(O,"getUsage");async function v({children:s,imports:t,format:e}){let r=ae({children:s,imports:t});return e?fileUtils.formatCode({contents:r,path:"x.tsx"}):r}l(v,"getDemoAppUsage");async function J({src:s}){let t=await fileUtils.findUp("tsconfig.json",{cwd:g__default.default.dirname(s)}),e=await import('react-docgen-typescript'),r={shouldExtractLiteralValuesFromEnum:!0,savePropValueAsString:!0,skipChildrenPropWithoutDoc:!1,customComponentTypes:["VoidFunctionComponent","VFC"]};return {info:(t?e.withCustomConfig(t,r).parse:e.withDefaultConfig(r).parse)(s)}}l(J,"getTypeScriptInfoFromFile");function ne({info:s,exportName:t}){try{if(!s)return !1;let e={props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}},n=!t||t==="default"?s.pop():s.find(p=>p.displayName===t);if(!n)return !1;return Object.entries(n?.props||{}).forEach(([p,u])=>{let{name:c,description:a,defaultValue:o,required:d,type:f,parent:y}=u;switch(f?.name?.replace("| undefined","").replace(/<.*/g,"").trim()){case"string":e.props.properties[p]={type:"string"};break;case"number":e.props.properties[p]={type:"number"};break;case"boolean":case"bool":o&&"value"in o&&(o.value=o.value==="true"),e.props.properties[p]={type:"boolean"};break;case"enum":e.props.properties[p]={type:"string",enum:[...new Set(f.value.map(({value:h})=>utils.removeWrappingDoubleQuotes(h?.trim())).filter(Boolean))]};break;case"ReactNode":case"React.ReactNode":case"React.ReactElement":case"ReactElement":e.slots[p]={title:p},a&&(e.slots[p]={...e.slots[p],description:a});break;case"VFC":case"FC":e.slots[p]={title:p,description:a||"A reference to a component",isTemplateReference:!0,allowOnlyOne:!0,disallowText:!0};break;default:if(f?.name?.startsWith("("))e.props.properties[p]={typeof:"function",tsType:u?.type?.name};else if(f?.name?.includes("|")){let h=f.name.split("|").map(R=>utils.removeWrappingDoubleQuotes(R.trim())).filter(Boolean);h?.length&&(e.props.properties[p]={type:"string",enum:[...new Set(h)]});}else e.props.properties[p]={tsType:u?.type?.name};}e.props.properties[p]&&(d&&e.props.required.push(p),a&&!e.props.properties[p].description&&(e.props.properties[p].description=a),o&&"value"in o&&(types.isNumberProp(e.props.properties[p])?e.props.properties[p].default=parseFloat(o.value):e.props.properties[p].default=utils.removeWrappingDoubleQuotes(o.value)));}),e}catch(e){return app.log.verbose("Could not infer spec from React TypeScript file",{exportName:t,error:e},"react renderer"),!1}}l(ne,"extractSpecFromTypeScriptInfo");async function oe({src:s}){let t=await import('react-docgen'),{builtinResolvers:e}=t,r=await fileUtils.readFile(s),{FindExportedDefinitionsResolver:n}=e;return {info:t.parse(r,{resolver:new n,handlers:null,filename:s})}}l(oe,"getPropTypesInfoFromFile");function ie({info:s,exportName:t}){try{let r=!t||t==="default"?s.pop():s.find(i=>i.displayName===t),n={isInferred:!0,props:{$schema:"http://json-schema.org/draft-07/schema",type:"object",required:[],properties:{}},slots:{}};return Object.entries(r?.props||{}).forEach(([i,p])=>{let{required:u,description:c,defaultValue:a}=p;switch(p?.type?.name){case"string":n.props.properties[i]={type:"string"};break;case"func":n.props.properties[i]={type:"string"};break;case"bool":n.props.properties[i]={type:"boolean"};break;case"node":n.slots[i]={title:i,description:c};}n.props.properties[i]&&(u&&n.props.required.push(i),c&&!n.props.properties[i].description&&(n.props.properties[i].description=c),a&&"value"in a&&(n.props.properties[i].default=typeof a.value=="string"?utils.removeWrappingDoubleQuotes(a.value):a.value));}),n}catch(e){return app.log.verbose("Could not infer spec from React PropTypes",{exportName:t,error:e},"react renderer"),!1}}l(ie,"extractSpecFromPropTypesInfo");function pe({spec:s}){return s===!1||Object.entries(s?.props?.properties||{}).forEach(([t,e])=>{types.isOptionsProp(e)&&(e.enum.includes(e.default)||(e.default=void 0));}),s}l(pe,"cleanUpSpec");async function ce({src:s,resolveFromDir:t}){let e=await fileUtils.resolvePath({path:s,resolveFromDir:t,resolveType:"types"});if(e.exists){let i=await J({src:e.absolutePath});if(i)return {type:"typescript",info:i.info}}let r=await fileUtils.resolvePath({path:s,resolveFromDir:t});if(!r.exists)return {type:"unknown"};let{ext:n}=g__default.default.parse(r.absolutePath);switch(n){case".jsx":return {type:"propTypes",info:(await oe({src:r.absolutePath})).info};case".ts":case".tsx":return {type:"typescript",info:(await J({src:r.absolutePath})).info};default:return {type:"unknown"}}}l(ce,"getReactModuleInfoUncached");var S=new Map,q=l(()=>{app.log.info("Clearing React TypeScript inferSpec cache..."),S.clear();},"clearInferSpecCache");async function le(s){let t=JSON.stringify(s);return S.has(t)||S.set(t,ce(s)),S.get(t)}l(le,"getReactModuleInfo");async function de({src:s,exportName:t,resolveFromDir:e}){let r=await le({src:s,resolveFromDir:e});switch(r.type){case"typescript":return ne({info:r.info,exportName:t});case"propTypes":return ie({info:r.info,exportName:t});case"unknown":default:return !1}}l(de,"getReactSpec");async function B(s){return pe({spec:await de(s)})}l(B,"getReactDocs");async function _(s,t){try{let{version:e}=fileUtils.getModulePkgJson("react"),{version:r}=fileUtils.getModulePkgJson("react-dom"),n=g__default.default.dirname(D.resolve("react",{paths:[process.cwd()]})),i=g__default.default.dirname(D.resolve("react-dom",{paths:[process.cwd()]}));await Promise.all([fileUtils.copy(g__default.default.join(n,"umd/react.development.js"),g__default.default.join(s,`react.development.${e}.js`)),fileUtils.copy(g__default.default.join(n,"umd/react.production.min.js"),g__default.default.join(s,`react.production.min.${e}.js`)),fileUtils.copy(g__default.default.join(i,"umd/react-dom.production.min.js"),g__default.default.join(s,`react-dom.production.min.${r}.js`)),fileUtils.copy(g__default.default.join(i,"umd/react-dom.development.js"),g__default.default.join(s,`react-dom.development.${r}.js`))]);let p=process.env.NODE_ENV==="production"?"production.min":"development";return [g__default.default.join(t,`react.${p}.${e}.js`),g__default.default.join(t,`react-dom.${p}.${r}.js`)]}catch(e){app.log.warn('Error trying to copy "react" and "react-dom" JS files, are they installed? We want to use your exact versions.',e,"templateRenderer:react"),process.exit(1);}}l(_,"copyReactAssets");function Re(s){return s.toUpperCase()===s}l(Re,"isCapitalLetter");function be(s){return Re(s[0])}l(be,"startsWithCapitalLetter");function Te({importName:s,id:t,title:e=s,pkgPath:r,initialDemoId:n}){return {id:t,title:e,description:"",statuses:{main:"ready"},templates:[{id:"react",title:"react",path:r,alias:s,templateLanguageId:"react",spec:{isInferred:!0},demoIds:[n],blockIds:[]}],tabs:[{type:"template",id:"react"}],subPages:[]}}l(Te,"createPatternData");var N=creatorUtils.createCreator({id:"react-patterns",title:"React Ks Patterns",description:"Adds React templates as Knapsack Patterns",getQuestions:l(async()=>({pkgPath:{type:"text",title:"Package path"},importPrefix:{type:"text",title:"Import Prefix to Remove"}}),"getQuestions"),getTasks:l(async({answers:{pkgPath:s,importPrefix:t=""},config:e})=>{let r=e.dest,i=(await ksFileUtils.readKsPatternConfigs({dataDir:r})).reduce((u,c)=>{let a=c.templates?.filter(o=>o.templateLanguageId==="react")??[];return u.push(...a.map(o=>o.alias)),u},[]),{exports:p}=await fileUtils.getJsExportNames({path:s});return [{title:"Pick Imports to add",task:l((u,c)=>creatorUtils.tasks.runSubCreator({task:c,config:e,creator:creatorUtils.createCreator({id:"react-pattern-import-names",getQuestions:l(async()=>({importNames:{type:"choices",choices:p.filter(a=>be(a)&&!i.includes(a)).map(a=>({value:a}))}}),"getQuestions"),getTasks:l(async({answers:{importNames:a}})=>{let o=a.map(d=>({importName:d,patternId:d.startsWith(t)?d.slice(t.length).toLowerCase():d.toLowerCase()}));return [...o.map(({importName:d,patternId:f})=>({title:`Add ${d} React Template`,task:l(async(y,b)=>{let h={type:"data",id:utils.makeShortId(),title:"Main",patternId:f,templateId:"react",data:{props:{},slots:{}}},R=Te({id:f,importName:d,pkgPath:s,initialDemoId:h.id});await Promise.all([ksFileUtils.writeDemo({dataDir:r,demo:h}),ksFileUtils.writeKsPatternConfig({dataDir:r,patternId:f,data:R})]);},"task")})),{title:"Updating Nav",task:l(async(d,f)=>{let{byId:y}=await ksFileUtils.readKsNavConfig({dataDir:r}),b=Object.values(y).find(({path:h,name:R,id:X})=>h?!1:R.toLowerCase()==="patterns"||R.toLowerCase()==="components");await ksFileUtils.addKsNavItems({dataDir:r,navItems:o.map(({patternId:h})=>({navId:h,navPath:`/pattern/${h}`,navParent:b?.id||"root"}))});},"task")}]},"getTasks")})}),"task")}]},"getTasks")});var G="ks-react-meta";var{pkg:I}=fileUtils.findUpPkgJson(__dirname);app.log.setupUpdateNotifier({...I,name:I.name,version:I.version});var A=g.join(__dirname,"./error-catcher.mjs");if(!fileUtils.exists(A))throw new Error(`Could not find error catcher at: ${A}`);var H=class s extends rendererWebpackBase.RendererWebpackBase{static{l(this,"KnapsackReactRenderer");}assets;babelConfig;#e;#t;constructor({webpackConfig:t,demoWrapperPath:e=g.join(__dirname,"./demo-wrapper.mjs"),id:r=types.rendererIds.react,disableReactStrictMode:n}={}){super({id:r,language:"jsx",webpackConfig:t,extraScripts:["@knapsack/renderer-react/client"]}),this.language="jsx",this.assets=[],this.#e=e,this.#t=n,this.creators=[N];}setConfig=l(t=>{super.setConfig(t);let{absolutePath:e,exists:r,type:n}=this.resolvePathSync({path:this.#e,resolveFromDir:this.userConfigDir});if(!r)throw new Error(`Could not find demo wrapper at: "${this.#e}"
+Please adjust setting in "knapsack.config.js" or pass a different path when creating the React Renderer.`);this.registerExtraJsImports({DemoWrapper:{exportName:"DemoWrapper",isDefaultExport:!0,path:n==="package"?this.#e:e},ErrorCatcher:{exportName:"ErrorCatcher",isDefaultExport:!0,path:A}});},"setConfig");init=l(async()=>{this.assets=await _(this.outputDir,this.publicPath);},"init");hydrate=l(async t=>{await super.hydrate(t),await this.init({missingFileVerbosity:"silent"});},"hydrate");getMeta=l(()=>({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:I.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=l(t=>utils.pascalCase(t),"changeCase");createWebpackConfig=l(()=>{let t=super.createWebpackConfig();return t.externals={react:"React","react-dom":"ReactDOM"},t},"createWebpackConfig");async prepClientRenderResults({usage:t,demoApp:e,importMap:r,renderOptions:{demo:n,state:i,patternId:p,templateId:u}}){let c={demo:n,disableReactStrictMode:this.#t,neededImportsByCodeSrcId:rendererWebpackBase.convertImportMapToNeededImportsByCodeSrcId(r),demoWrapperProps:{patternId:p,templateId:u,demo:n}},a=`
     window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${[...importMap.keys()].join(", ")} }) => {
-      ${demoApp}
-      return ${demoAppName}
+    window.knapsack.getDemoApp = ({ ${[...r.keys()].join(", ")} }) => {
+      ${e}
+      return ${E}
     }
-    `;
-    let errorHtmlMsg = "";
-    try {
-      code = await (0, import_renderers.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>`;
-    }
-    const html = `
-    <script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
-      meta
-    )}</script>
-    <script type="application/javascript">${code}</script>
+    `,o="";try{a=await renderers.babelCodeForBrowser({code:a});}catch(f){console.log(a),console.log("---original code before babel error ^---"),console.trace(f.message),a=`console.error(${JSON.stringify(f.message)});`,o=`<pre><code>${f.message}</code></pre>`;}let d=`
+    <script type="application/json" id="${G}">${JSON.stringify(c)}</script>
+    <script type="application/javascript">${a}</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")}
-    ${import_renderer_webpack_base.RendererWebpackBase.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 (0, import_file_utils3.formatCode)({
-        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 (0, import_sleep_promise.default)(waitTime);
-        }
-      }
-      const [templateFileContents, { usage, importMap }] = await Promise.all([
-        (0, import_file_utils3.readFile)(templateDemoPath),
-        this.getUsageAndImports({
-          ...opt,
-          importMap: /* @__PURE__ */ new Map()
-        })
-      ]);
-      const demoApp = await getDemoAppUsage({
-        children: usage
-      });
-      const results = await this.prepClientRenderResults({
-        usage: templateFileContents,
-        demoApp,
-        renderOptions: opt,
-        importMap
-      });
-      return results;
-    }
-    if (opt.demo?.type === "data") {
-      const { usage, importMap } = await this.getUsageAndImports({
-        ...opt,
-        importMap: /* @__PURE__ */ new Map()
-      });
-      const importCode = import_renderer_webpack_base.RendererWebpackBase.createJsImportCodeBlock({
-        importMap
-      });
-      const [demoAppUsage, demoApp] = await Promise.all([
-        getDemoAppUsage({
-          children: usage,
-          imports: importCode,
-          format: true
-        }),
-        getDemoAppUsage({
-          children: usage
-        })
-      ]);
-      return this.prepClientRenderResults({
-        demoApp,
-        usage: demoAppUsage,
-        renderOptions: opt,
-        importMap
-      });
-    }
-  }, "render");
-  getUsageAndImports = /* @__PURE__ */ __name(async ({
-    patternId,
-    templateId,
-    demo,
-    state,
-    importMap
-  }) => {
-    if (!demo) {
-      throw new Error(
-        `No demo provided while rendering ${patternId} ${templateId}`
-      );
-    }
-    const pattern = state.patterns[patternId];
-    if (!pattern) {
-      throw new Error(`Could not find pattern: ${patternId}`);
-    }
-    if (demo.type === "data") {
-      const template = pattern.templates.find((t) => t.id === templateId);
-      if (!template) {
-        throw new Error(`Could not find template: ${templateId}`);
-      }
-      const {
-        data: { props, slots, slotsOptionsComputed }
-      } = demo;
-      const { name: templateName } = await this.addUniqueValueToImportMap({
-        importMap,
-        path: template.path,
-        alias: template.alias || "default"
-      });
-      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) return false;
-                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;
-                }
-                if (slotItem.type === "template-reference") {
-                  const slottedTemplate = state.patterns[slotItem.patternId]?.templates.find((t) => t.id === slotItem.templateId);
-                  if (!slottedTemplate) {
-                    throw new Error(
-                      `Could not find slotted template: ${slotItem.patternId} ${slotItem.templateId}`
-                    );
-                  }
-                  const templateRefImport = await this.addUniqueValueToImportMap({
-                    importMap,
-                    path: slottedTemplate.path,
-                    alias: slottedTemplate.alias || "default"
-                  });
-                  return templateRefImport.name;
-                }
-                if (slotItem.type === "template-demo") {
-                  const thisDemo = slotItem.demo;
-                  if (!thisDemo) {
-                    throw new Error(
-                      `Could not find slotted template demo ${JSON.stringify(
-                        slotItem
-                      )}`
-                    );
-                  }
-                  const { usage: usage2 } = await this.getUsageAndImports({
-                    patternId: thisDemo.patternId,
-                    templateId: thisDemo.templateId,
-                    demo: thisDemo,
-                    state,
-                    importMap
-                  });
-                  return usage2;
-                }
-                const _exhaustiveCheck2 = slotItem;
-                throw new Error(
-                  `Unknown slot item: ${JSON.stringify(slotItem)}`
-                );
-              })
-            );
-            return {
-              slotName,
-              slotItemsUsages
-            };
-          })
-        );
-        slotUsages.forEach(({ slotName, slotItemsUsages }) => {
-          const slotOptionsComputed = slotsOptionsComputed?.[slotName];
-          const { openTag, closeTag } = (0, import_renderers.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,
-        importMap
-      };
-    }
-    if (demo.type === "template") {
-      const { templateInfo } = demo;
-      const { name: templateName } = await this.addUniqueValueToImportMap({
-        importMap,
-        path: templateInfo.path,
-        alias: templateInfo.alias || "default"
-      });
-      const usage = await getUsage({ templateName });
-      return {
-        usage,
-        importMap
-      };
-    }
-    const _exhaustiveCheck = demo;
-    throw new Error(
-      `Unhandled demo type for ${patternId}-${templateId}: ${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 () => {
-    super.watch();
-    import_app2.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 } = (0, import_path2.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 './${(0, import_path2.relative)(metaDir, file.path).replace(".d.ts", "")}';`
-        );
-      }
-    });
-    imports.push("");
-    return [
-      ...files,
-      {
-        contents: imports.join("\n"),
-        encoding: "utf8",
-        path: (0, import_path2.join)(metaDir, "react.d.ts")
-      }
-    ];
-  }, "alterTemplateMetaFiles");
-  getTemplateSuggestions = /* @__PURE__ */ __name(async ({
-    newPath,
-    state
-  }) => {
-    const usedSuggestions = Object.values(state.patterns).reduce(
-      (acc, { templateDemos, templates }) => {
-        templates.forEach(({ path: path2, alias, templateLanguageId }) => {
-          if (templateLanguageId !== this.id) return;
-          acc.push({ path: path2, alias });
-        });
-        templateDemos.forEach(
-          ({ templateInfo: { path: path2, alias }, templateLanguageId }) => {
-            if (templateLanguageId !== this.id) return;
-            acc.push({ path: path2, alias });
-          }
-        );
-        return acc;
-      },
-      []
-    );
-    const codeSrcs = new Set(this.getCodeSrcs().map(({ path: path2 }) => path2));
-    const allPaths = [
-      .../* @__PURE__ */ new Set([
-        newPath,
-        ...Object.keys(this.pkgPathAliases || {}),
-        ...codeSrcs
-      ])
-    ];
-    const allSuggestions = await Promise.all(
-      allPaths.map(async (path2) => {
-        if (!path2) return [];
-        try {
-          const { exports: exports2, errorMsg } = await (0, import_file_utils3.getJsExportNames)({
-            path: path2,
-            resolveFromDir: this.dataDir,
-            pkgPathAliases: this.pkgPathAliases
-          });
-          if (errorMsg) {
-            throw new Error(errorMsg);
-          }
-          return exports2.filter((e) => e === "default" || (0, import_utils3.isFirstLetterCapital)(e)).map((name) => ({
-            alias: name,
-            path: path2
-          }));
-        } catch (e) {
-          import_app2.log.verbose(
-            `Error getting import names for ${path2}: ${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");
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  KnapsackReactRenderer
-});
+    ${this.assets.map(f=>`<script src="${f}"></script>`).join(`
+`)}
+    ${rendererWebpackBase.RendererWebpackBase.createHtmlTagsForAssetPaths({assets:this.getWebpackAssetPaths(),scriptTagsAreAsync:!1})}
+    ${o}
+    `;return {ok:!o,html:await fileUtils.formatCode({contents:d,path:"x.html"}),usage:t,templateLanguage:this.language}}render=l(async t=>{if(t.demo?.type==="template"){let e=[5,10,20,50,100,1e3,1e3],r,n=0;for(;;)try{let{absolutePath:o,exists:d}=await this.resolvePath(t.demo.templateInfo.path);if(!d)throw new Error(`Template demo file does not exist: ${o}`);r=o;break}catch(o){let d=e[n];if(!d)throw new Error(o);n+=1,await ke__default.default(d);}let[i,{usage:p,importMap:u}]=await Promise.all([fileUtils.readFile(r),this.getUsageAndImports({...t,importMap:new Map})]),c=await v({children:p});return await this.prepClientRenderResults({usage:i,demoApp:c,renderOptions:t,importMap:u})}if(t.demo?.type==="data"){let{usage:e,importMap:r}=await this.getUsageAndImports({...t,importMap:new Map}),n=rendererWebpackBase.RendererWebpackBase.createJsImportCodeBlock({importMap:r}),[i,p]=await Promise.all([v({children:e,imports:n,format:!0}),v({children:e})]);return this.prepClientRenderResults({demoApp:p,usage:i,renderOptions:t,importMap:r})}},"render");getUsageAndImports=l(async({patternId:t,templateId:e,demo:r,state:n,importMap:i})=>{if(!r)throw new Error(`No demo provided while rendering ${t} ${e}`);let p=n.patterns[t];if(!p)throw new Error(`Could not find pattern: ${t}`);if(r.type==="data"){let c=p.templates.find(R=>R.id===e);if(!c)throw new Error(`Could not find template: ${e}`);let{data:{props:a,slots:o,slotsOptionsComputed:d}}=r,{name:f}=await this.addUniqueValueToImportMap({importMap:i,path:c.path,alias:c.alias||"default"}),y=[],b=[];if(o){let R=Object.keys(o);(await Promise.all(R.map(async w=>{let T=o[w],j=await Promise.all(T.filter(m=>!(!m||m.type!=="text"&&(!m.patternId||!m.templateId||m.type==="template-demo"&&!m.demoId))).map(async m=>{if(m.type==="text")return T.length===1&&w!=="children"?`\`${m.text}\``:m.text;if(m.type==="template-reference"){let P=n.patterns[m.patternId]?.templates.find(z=>z.id===m.templateId);if(!P)throw new Error(`Could not find slotted template: ${m.patternId} ${m.templateId}`);return (await this.addUniqueValueToImportMap({importMap:i,path:P.path,alias:P.alias||"default"})).name}if(m.type==="template-demo"){let P=m.demo;if(!P)throw new Error(`Could not find slotted template demo ${JSON.stringify(m)}`);let{usage:K}=await this.getUsageAndImports({patternId:P.patternId,templateId:P.templateId,demo:P,state:n,importMap:i});return K}throw new Error(`Unknown slot item: ${JSON.stringify(m)}`)}));return {slotName:w,slotItemsUsages:j}}))).forEach(({slotName:w,slotItemsUsages:T})=>{let j=d?.[w],{openTag:m,closeTag:k}=renderers.createSlotOptionsHtmlTags({slotOptionsComputed:j,classAttributeName:"className",stylesValueType:"object"});m&&(w==="children"?y.push(m):b.push({key:w,value:m})),T.forEach(P=>{w==="children"?y.push(P):b.push({key:w,value:P});}),k&&(w==="children"?y.push(k):b.push({key:w,value:k}));});}return {usage:await O({templateName:f,props:a,children:y.join(`
+`),extraProps:b}),importMap:i}}if(r.type==="template"){let{templateInfo:c}=r,{name:a}=await this.addUniqueValueToImportMap({importMap:i,path:c.path,alias:c.alias||"default"});return {usage:await O({templateName:a}),importMap:i}}throw new Error(`Unhandled demo type for ${t}-${e}: ${JSON.stringify(r)}`)},"getUsageAndImports");inferSpec=l(async({template:t,templatePath:e})=>{let r=await B({src:t.path,exportName:t.alias||"default",resolveFromDir:this.config.data});if(r!==!1){let n=Object.keys(r?.props?.properties||{}).length,i=Object.keys(r?.slots||{}).length;if(n===0&&i===0)return !1}return r},"inferSpec");watch=l(async()=>{super.watch(),app.knapsackEvents.onPatternTemplateChanged(()=>{q();});},"watch");getTemplateMeta=l(async({pattern:t,template:e})=>{let r=[];if(e?.spec?.props){let n=JSON.parse(JSON.stringify(e.spec.props));e?.spec?.slots&&Object.entries(e.spec.slots).forEach(([p,u])=>{n.properties[p]={typeof:"function",tsType:"React.ReactNode",description:u.allowedPatternIds?`${u.description}. Only use: ${u.allowedPatternIds.join(", ")}`:u.description},n.required=n.required??[],u.isRequired&&n.required.push(p);});let i=await s.convertSchemaToTypeScriptDefs({schema:n,title:`${this.changeCase(t.id)}Props`,description:`[Knapsack Docs](http://localhost:3999/pattern/${t.id}/${e.id})`,patternId:t.id,templateId:e.id,postBanner:"import * as React from 'react';"});r.push({contents:i,encoding:"utf8",path:`${t.id}.${e.id}.spec.d.ts`}),r.push({contents:JSON.stringify(n,null,"  "),encoding:"utf8",path:`${t.id}.${e.id}.spec.json`});}return r},"getTemplateMeta");alterTemplateMetaFiles=l(async({files:t,metaDir:e})=>{let r=[],n=".spec.d.ts";return t.forEach(i=>{if(i.path.endsWith(n)){let{base:p}=g.parse(i.path),[u,c]=p.split("."),a=c===this.id,o=this.changeCase(`${u}Props`),d=this.changeCase(`${u}-${c}Props`);r.push(`export { ${a?o:`${o} as ${d}`} } from './${g.relative(e,i.path).replace(".d.ts","")}';`);}}),r.push(""),[...t,{contents:r.join(`
+`),encoding:"utf8",path:g.join(e,"react.d.ts")}]},"alterTemplateMetaFiles");getTemplateSuggestions=l(async({newPath:t,state:e})=>{let r=Object.values(e.patterns).reduce((c,{templateDemos:a,templates:o})=>(o.forEach(({path:d,alias:f,templateLanguageId:y})=>{y===this.id&&c.push({path:d,alias:f});}),a.forEach(({templateInfo:{path:d,alias:f},templateLanguageId:y})=>{y===this.id&&c.push({path:d,alias:f});}),c),[]),n=new Set(this.getCodeSrcs().map(({path:c})=>c)),i=[...new Set([t,...Object.keys(this.pkgPathAliases||{}),...n])];return {suggestions:(await Promise.all(i.map(async c=>{if(!c)return [];try{let{exports:a,errorMsg:o}=await fileUtils.getJsExportNames({path:c,resolveFromDir:this.dataDir,pkgPathAliases:this.pkgPathAliases});if(o)throw new Error(o);return a.filter(d=>d==="default"||utils.isFirstLetterCapital(d)).map(d=>({alias:d,path:c}))}catch(a){return app.log.verbose(`Error getting import names for ${c}: ${a.message}`,null,this.logPrefix),[]}})).then(c=>c.flat())).filter(c=>!r.find(a=>a.alias===c.alias&&a.path===c.path))}},"getTemplateSuggestions")};
+
+exports.KnapsackReactRenderer = H;
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map