@knapsack/renderer-react 4.70.0--canary.3797.b249674.0 → 4.70.0--canary.4821.e250df4.0

package/dist/index.js

@@ -1,53 +1,1298 @@
-'use strict';
+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);
 
-var Ie = 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 h = require('path');
-var creatorUtils = require('@knapsack/creator-utils');
-var ksFileUtils = require('@knapsack/ks-file-utils');
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  KnapsackReactRenderer: () => KnapsackReactRenderer
+});
+module.exports = __toCommonJS(src_exports);
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+// 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");
 
-var Ie__default = /*#__PURE__*/_interopDefault(Ie);
-var h__default = /*#__PURE__*/_interopDefault(h);
-
-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/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}
 
-function ${O}() {
+function ${demoAppName}() {
   return (
-    ${e}
+    ${children}
   )
 }
-`}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?fileUtils.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?fileUtils.formatCode({contents:s,path:"x.tsx"}):s}c(v,"getDemoAppUsage");async function J({src:r}){let e=await fileUtils.findUp("tsconfig.json",{cwd:h__default.default.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})=>utils.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=>utils.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&&(types.isNumberProp(t.props.properties[i])?t.props.properties[i].default=parseFloat(p.value):t.props.properties[i].default=utils.removeWrappingDoubleQuotes(p.value)));}),t}catch(t){return app.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 fileUtils.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"?utils.removeWrappingDoubleQuotes(n.value):n.value));}),a}catch(t){return app.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])=>{types.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 fileUtils.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 fileUtils.resolvePath({path:r,resolveFromDir:e});if(!s.exists)return {type:"unknown"};let{ext:a}=h__default.default.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(()=>{app.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}=fileUtils.getModulePkgJson("react"),{version:s}=fileUtils.getModulePkgJson("react-dom"),a=h__default.default.dirname(K.resolve("react",{paths:[process.cwd()]})),o=h__default.default.dirname(K.resolve("react-dom",{paths:[process.cwd()]}));await Promise.all([fileUtils.copy(h__default.default.join(a,"umd/react.development.js"),h__default.default.join(r,`react.development.${t}.js`)),fileUtils.copy(h__default.default.join(a,"umd/react.production.min.js"),h__default.default.join(r,`react.production.min.${t}.js`)),fileUtils.copy(h__default.default.join(o,"umd/react-dom.production.min.js"),h__default.default.join(r,`react-dom.production.min.${s}.js`)),fileUtils.copy(h__default.default.join(o,"umd/react-dom.development.js"),h__default.default.join(r,`react-dom.development.${s}.js`))]);let i=process.env.NODE_ENV==="production"?"production.min":"development";return [h__default.default.join(e,`react.${i}.${t}.js`),h__default.default.join(e,`react-dom.${i}.${s}.js`)]}catch(t){app.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=creatorUtils.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 ksFileUtils.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 fileUtils.getJsExportNames({path:r});return [{title:"Pick Imports to add",task:c((l,m)=>creatorUtils.tasks.runSubCreator({task:m,config:t,creator:creatorUtils.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:utils.makeShortId(),title:"Main",patternId:f,templateId:"react",data:{props:{},slots:{}}},P=Pe({id:f,importName:u,pkgPath:r,initialDemoId:d.id});await Promise.all([ksFileUtils.writeDemo({dataDir:s,demo:d}),ksFileUtils.writeKsPatternConfig({dataDir:s,patternId:f,data:P})]);},"task")})),{title:"Updating Nav",task:c(async(u,f)=>{let{byId:y}=await ksFileUtils.readKsNavConfig({dataDir:s}),R=Object.values(y).find(({path:d,name:P,id:w})=>d?!1:P.toLowerCase()==="patterns"||P.toLowerCase()==="components");await ksFileUtils.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}=fileUtils.findUpPkgJson(__dirname);app.log.setupUpdateNotifier({...j,name:j.name,version:j.version});var Q=class r extends rendererWebpackBase.RendererWebpackBase{static{c(this,"KnapsackReactRenderer");}assets;babelConfig;demoWrapperPath;disableReactStrictMode;constructor({webpackConfig:e,demoWrapperPath:t=h.join(__dirname,"./demo-wrapper.mjs"),id:s=types.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 fileUtils.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=>utils.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:h.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||app.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=`
+`;
+}
+__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 errorCatcherPath = (0, import_path2.join)(__dirname, "./error-catcher.mjs");
+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"
+      ],
+      codeSrcs: [demoWrapperPath, errorCatcherPath]
+    });
+    this.language = "jsx";
+    this.assets = [];
+    this.demoWrapperPath = (0, import_path2.isAbsolute)(demoWrapperPath) ? demoWrapperPath : this.resolvePathSync({
+      path: demoWrapperPath,
+      resolveFromDir: this.userConfigDir
+    }).absolutePath;
+    (0, import_file_utils3.assertFileExists)(
+      this.demoWrapperPath,
+      `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.disableReactStrictMode = disableReactStrictMode;
+    this.creators = [createReactPattern];
+  }
+  init = /* @__PURE__ */ __name(async () => {
+    this.assets = await copyReactAssets(this.outputDir, this.publicPath);
+    if (!await (0, import_file_utils3.exists)(this.demoWrapperPath)) {
+      throw new Error(
+        `Could not find demo wrapper at: "${this.demoWrapperPath}"`
+      );
+    }
+  }, "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,
+      neededImportsByPath: (0, import_renderer_webpack_base.convertImportMapToNeededImportsByPath)(importMap),
+      extraImports: {
+        DemoWrapper: {
+          type: "default",
+          path: this.demoWrapperPath,
+          name: "DemoWrapper"
+        },
+        ErrorCatcher: {
+          type: "default",
+          path: errorCatcherPath,
+          name: "ErrorCatcher"
+        }
+      },
+      demoWrapperProps: {
+        patternId,
+        templateId,
+        demo
+      }
+    };
+    let code = `
     window.knapsack = window.knapsack || {};
-    window.knapsack.getDemoApp = ({ ${m.map(d=>d.importInfo.name).join(", ")} }) => {
-      ${t}
-      return ${O}
+    window.knapsack.getDemoApp = ({ ${[...importMap.keys()].join(", ")} }) => {
+      ${demoApp}
+      return ${demoAppName}
+    }
+    `;
+    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>`;
     }
-    `,y="";try{f=await renderers.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>
+    const html = `
+    <script type="application/json" id="${rendererMetaScriptTagId}">${JSON.stringify(
+      meta
+    )}</script>
+    <script type="application/javascript">${code}</script>
     <div id="render-root" class="knapsack-pattern-direct-parent" data-dev-note="Knapsack React Template Wrapper"></div>
-    ${this.assets.map(d=>`<script src="${d}"></script>`).join(`
-`)}
-    ${this.createHtmlTagsForAssetPaths({assets:this.getWebpackAssetPaths(),scriptTagsAreAsync:!1})}
-    ${y}
-    `;return {ok:!y,html:await fileUtils.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__default.default(u);}let[o,{usage:i,imports:l}]=await Promise.all([fileUtils.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}=renderers.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),app.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}=h.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 './${h.relative(t,o.path).replace(".d.ts","")}';`);}}),s.push(""),[...e,{contents:s.join(`
-`),encoding:"utf8",path:h.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 fileUtils.getJsExportNames({path:n,resolveFromDir:t,pkgPathAliases:this.pkgPathAliases});if(u)throw new Error(u);return p.filter(f=>f==="default"||utils.isFirstLetterCapital(f)).map(f=>({alias:f,path:n}))}catch(p){return app.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")};
-
-exports.KnapsackReactRenderer = Q;
-//# sourceMappingURL=index.js.map
+    ${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());
+    codeSrcs.delete(this.demoWrapperPath);
+    codeSrcs.delete(errorCatcherPath);
+    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
+});
 //# sourceMappingURL=index.js.map