@cedarjs/cli 9.0.0-canary.1784 → 9.0.0-canary.3124

package/dist/commands/experimental/templates/streamingSsr/entry.client.tsx.template

@@ -5,21 +5,21 @@ import { Document } from './Document'
 import Routes from './Routes'
 
 /**
- * When `#redwood-app` isn't empty then it's very likely that you're using
+ * When `#cedar-app` isn't empty then it's very likely that you're using
  * prerendering. So React attaches event listeners to the existing markup
  * rather than replacing it.
  * https://react.dev/reference/react-dom/client/hydrateRoot
  */
-const redwoodAppElement = document.getElementById('redwood-app')
+const cedarAppElement = document.getElementById('cedar-app')
 
-if (!redwoodAppElement) {
+if (!cedarAppElement) {
   throw new Error(
-    "Could not find an element with ID 'redwood-app'. Please ensure it " +
-      "exists in your 'web/src/index.html' file."
+    'Could not find an element with ID "cedar-app". Please ensure it exists ' +
+      'in your `web/index.html` file.'
   )
 }
 
-if (redwoodAppElement.children?.length > 0) {
+if (cedarAppElement.children?.length > 0) {
   hydrateRoot(
     document,
     <Document css={window.__assetMap?.()?.css}>

package/dist/commands/experimental/templates/streamingSsr/tsconfig.json.template

@@ -9,16 +9,16 @@
     "skipLibCheck": false,
     "rootDirs": [
       "./src",
-      "../.redwood/types/mirror/web/src",
+      "../.cedar/types/mirror/web/src",
       "../api/src",
-      "../.redwood/types/mirror/api/src"
+      "../.cedar/types/mirror/api/src"
     ],
     "paths": {
       "src/*": [
         "./src/*",
-        "../.redwood/types/mirror/web/src/*",
+        "../.cedar/types/mirror/web/src/*",
         "../api/src/*",
-        "../.redwood/types/mirror/api/src/*"
+        "../.cedar/types/mirror/api/src/*"
       ],
       "$api/*": [
         "../api/*"
@@ -46,8 +46,8 @@
   "include": [
     "src",
     "config",
-    "../.redwood/types/includes/all-*",
-    "../.redwood/types/includes/web-*",
+    "../.cedar/types/includes/all-*",
+    "../.cedar/types/includes/web-*",
     "../types",
     "./types"
   ]

package/dist/commands/experimental/util.js

@@ -2,45 +2,47 @@ import fs from "node:fs";
 import path from "node:path";
 import ansis from "ansis";
 import { terminalLink } from "termi-link";
+import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import { getPaths } from "../../lib/index.js";
 import { isTypeScriptProject, serverFileExists } from "../../lib/project.js";
-const link = (topicId, isTerminal = false) => {
+function link(topicId, isTerminal = false) {
   const communityLink = `https://community.redwoodjs.com/t/${topicId}`;
   if (isTerminal) {
     return terminalLink(communityLink, communityLink);
   } else {
     return communityLink;
   }
-};
-const getEpilogue = (command, description, topicId, isTerminal = false) => `This is an experimental feature to: ${description}.
+}
+function getEpilogue(command, description, topicId, isTerminal = false) {
+  let epilogue = `This is an experimental feature to: ${description}.
+
+If you need help with ${command}, please join our Discord community.
+ -> ${terminalLink("", "https://cedarjs.com/discord")}`;
+  if (topicId) {
+    epilogue += `
 
-Please find documentation and links to provide feedback for ${command} at:
- -> ${link(
-  topicId,
-  isTerminal
-)}`;
-const printTaskEpilogue = (command, description, topicId) => {
+You might also be able to find some information at:
+ -> ${link(topicId, isTerminal)}`;
+  }
+  return epilogue;
+}
+function printTaskEpilogue(command, description, topicId) {
+  const orangeLine = ansis.hex("#ff845e")("-".repeat(64));
   console.log(
-    `${ansis.hex("#ff845e")(
-      `------------------------------------------------------------------
- \u{1F9EA} ${ansis.green(
-        "Experimental Feature"
-      )} \u{1F9EA}
-------------------------------------------------------------------`
-    )}`
+    [
+      orangeLine,
+      `\u{1F9EA} ${ansis.green("Experimental Feature")} \u{1F9EA}`,
+      orangeLine
+    ].join("\n")
   );
   console.log(getEpilogue(command, description, topicId, false));
-  console.log(
-    `${ansis.hex("#ff845e")(
-      "------------------------------------------------------------------"
-    )}
-`
-  );
-};
+  console.log(`${orangeLine}
+`);
+}
 const isServerFileSetup = () => {
   if (!serverFileExists()) {
     throw new Error(
-      "CedarJS Realtime requires a serverful environment. Please run `yarn cedarjs setup server-file` first."
+      `CedarJS Realtime requires a serverful environment. Please run \`${formatCedarCommand(["setup", "server-file"])}\` first.`
     );
   }
   return true;
@@ -55,7 +57,7 @@ const realtimeExists = () => {
 const isRealtimeSetup = () => {
   if (!realtimeExists()) {
     throw new Error(
-      "Adding realtime events requires that CedarJS Realtime is setup. Please run `yarn cedar setup realtime` first."
+      `Adding realtime events requires that CedarJS Realtime is setup. Please run \`${formatCedarCommand(["setup", "realtime"])}\` first.`
     );
   }
   return true;

package/dist/commands/experimental.js

@@ -1,5 +1,6 @@
 import { terminalLink } from "termi-link";
-import detectRxVersion from "../middleware/detectProjectRxVersion.js";
+import { detectCedarVersion } from "../middleware/detectProjectCedarVersion.js";
+import * as experimentalLiveQueries from "./experimental/live-queries/liveQueries.js";
 import * as experimentalInngest from "./experimental/setupInngest.js";
 import * as experimentalOpenTelemetry from "./experimental/setupOpentelemetry.js";
 import * as experimentalReactCompiler from "./experimental/setupReactCompiler.js";
@@ -8,7 +9,7 @@ import * as experimentalStreamingSsr from "./experimental/setupStreamingSsr.js";
 const command = "experimental <command>";
 const aliases = ["exp"];
 const description = "Run or setup experimental features";
-const builder = (yargs) => yargs.command(experimentalInngest).command(experimentalOpenTelemetry).command(experimentalReactCompiler).command(experimentalRsc).command(experimentalStreamingSsr).demandCommand().middleware(detectRxVersion).epilogue(
+const builder = (yargs) => yargs.command(experimentalInngest).command(experimentalLiveQueries).command(experimentalOpenTelemetry).command(experimentalReactCompiler).command(experimentalRsc).command(experimentalStreamingSsr).demandCommand().middleware(detectCedarVersion).epilogue(
   `Also see the ${terminalLink(
     "CedarJS CLI Reference",
     "https://cedarjs.com/docs/cli-commands#experimental"

package/dist/commands/generate/cell/cell.js

@@ -22,6 +22,26 @@ const builder = createBuilder({
         default: "",
         description: "Use to enforce a specific query name within the generated cell - must be unique.",
         type: "string"
+      },
+      beforeQuery: {
+        default: false,
+        description: "Include a typed `beforeQuery` stub for configuring the query (e.g. variables, fetch policy).",
+        type: "boolean"
+      },
+      afterQuery: {
+        default: false,
+        description: "Include a typed `afterQuery` stub for sanitizing data returned from the query.",
+        type: "boolean"
+      },
+      isEmpty: {
+        default: false,
+        description: "Include a typed `isEmpty` stub for overriding the default check for the Empty component.",
+        type: "boolean"
+      },
+      fragment: {
+        default: "",
+        description: "Generate a fragment cell (exports FRAGMENT instead of QUERY) that reads its data from a parent Cell, given the GraphQL type it selects from - e.g. --fragment User.",
+        type: "string"
       }
     };
   }

package/dist/commands/generate/cell/cellHandler.js

@@ -1,7 +1,8 @@
 import pascalcase from "pascalcase";
+import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import { generate as generateTypes } from "@cedarjs/internal/dist/generate/generate";
-import { isPlural, singularize } from "../../../lib/cedarPluralize.js";
-import { nameVariants, transformTSToJS } from "../../../lib/index.js";
+import { isPlural, singularize } from "@cedarjs/utils/cedarPluralize";
+import { nameVariants, transformTSToJSMap } from "../../../lib/index.js";
 import { isWordPluralizable } from "../../../lib/pluralHelpers.js";
 import { addFunctionToRollback } from "../../../lib/rollback.js";
 import { getSchema } from "../../../lib/schemaHelpers.js";
@@ -18,8 +19,19 @@ import {
   uniqueOperationName
 } from "./utils/utils.js";
 const COMPONENT_SUFFIX = "Cell";
-const REDWOOD_WEB_PATH_NAME = "components";
-const files = async ({ name, typescript, ...argv }) => {
+const CEDAR_WEB_PATH_NAME = "components";
+const files = async ({
+  name,
+  typescript = false,
+  list = false,
+  query,
+  stories,
+  tests,
+  beforeQuery = false,
+  afterQuery = false,
+  isEmpty = false,
+  fragment = ""
+}) => {
   let cellName = removeGeneratorName(name, "cell");
   let idName = "id";
   let idType;
@@ -27,22 +39,49 @@ const files = async ({ name, typescript, ...argv }) => {
   let model = null;
   let templateNameSuffix = "";
   let typeName = cellName;
-  const shouldGenerateList = (isWordPluralizable(cellName) ? isPlural(cellName) : argv.list) || argv.list;
-  try {
-    model = await getSchema(pascalcase(singularize(cellName)));
-    idName = getIdName(model);
-    idType = getIdType(model);
-    typeName = model.name;
-    mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
-  } catch {
-    idType = "Int";
+  if (fragment) {
+    if (list) {
+      throw new Error(
+        "The --list flag cannot be combined with --fragment; fragment cells always render a single item."
+      );
+    }
+    if (beforeQuery) {
+      throw new Error(
+        "The --before-query flag cannot be combined with --fragment; fragment cells never fire a query of their own."
+      );
+    }
+    if (query) {
+      throw new Error(
+        "The --query flag cannot be combined with --fragment; fragment cells don't have an operation name."
+      );
+    }
+  }
+  const shouldGenerateList = !fragment && ((isWordPluralizable(cellName) ? isPlural(cellName) : list) || list);
+  if (!fragment) {
+    try {
+      model = await getSchema(pascalcase(singularize(cellName)));
+      idName = getIdName(model);
+      idType = getIdType(model);
+      typeName = model.name;
+      mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
+    } catch {
+      idType = "Int";
+    }
   }
   if (shouldGenerateList) {
     cellName = forcePluralizeWord(cellName);
     templateNameSuffix = "List";
   }
-  let operationName = argv.query;
-  if (operationName) {
+  let operationName = query;
+  let fragmentName;
+  let fragmentOnType;
+  let fragmentPropName;
+  if (fragment) {
+    const fragmentTypeVariants = nameVariants(fragment);
+    fragmentOnType = fragmentTypeVariants.pascalName;
+    fragmentPropName = fragmentTypeVariants.camelName;
+    fragmentName = `${nameVariants(cellName).pascalName}Cell_${fragmentPropName}`;
+  } else if (operationName) {
     const userSpecifiedOperationNameIsUnique = await operationNameIsUnique(operationName);
     if (!userSpecifiedOperationNameIsUnique) {
       throw new Error(`Specified query name: "${operationName}" is not unique!`);
@@ -57,23 +96,32 @@ const files = async ({ name, typescript, ...argv }) => {
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: `cell${templateNameSuffix}.tsx.template`,
-    templateVars: {
+    templatePath: fragment ? "cellFragment.tsx.template" : `cell${templateNameSuffix}.tsx.template`,
+    templateVars: fragment ? {
+      fragmentName,
+      fragmentOnType,
+      camelName: fragmentPropName,
+      afterQuery,
+      isEmpty
+    } : {
       operationName,
       idName,
-      idType
+      idType,
+      beforeQuery,
+      afterQuery,
+      isEmpty
     }
   });
   const testFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: `.test${extension}`,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "test.js.template",
-    templateVars: {
+    templatePath: fragment ? "testFragment.js.template" : "test.js.template",
+    templateVars: fragment ? { camelName: fragmentPropName } : {
       idName: shouldGenerateList ? void 0 : idName,
       mockIdValues: shouldGenerateList ? void 0 : mockIdValues
     }
@@ -82,46 +130,47 @@ const files = async ({ name, typescript, ...argv }) => {
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: `.stories${extension}`,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "stories.tsx.template"
+    templatePath: fragment ? "storiesFragment.tsx.template" : "stories.tsx.template"
   });
   const mockFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: typescript ? ".mock.ts" : ".mock.js",
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
     templatePath: `mock${templateNameSuffix}.ts.template`,
-    templateVars: {
+    templateVars: fragment ? {
+      idName,
+      mockIdValues,
+      typeName: fragmentOnType,
+      camelName: fragmentPropName
+    } : {
       idName,
       mockIdValues,
       typeName
     }
   });
   const files2 = [cellFile];
-  if (argv.stories) {
+  if (stories) {
     files2.push(storiesFile);
   }
-  if (argv.tests) {
+  if (tests) {
     files2.push(testFile);
   }
-  if (argv.stories || argv.tests) {
+  if (stories || tests) {
     files2.push(mockFile);
   }
-  return files2.reduce(async (accP, [outputPath, content]) => {
-    const acc = await accP;
-    const template = typescript ? content : await transformTSToJS(outputPath, content);
-    return {
-      [outputPath]: template,
-      ...acc
-    };
-  }, Promise.resolve({}));
+  return transformTSToJSMap(files2, typescript);
 };
 const handler = createHandler({
   componentName: "cell",
   filesFn: files,
-  includeAdditionalTasks: ({ name: cellName }) => {
+  includeAdditionalTasks: ({
+    name: cellName,
+    fragment
+  }) => {
     return [
       {
         title: `Generating types ...`,
@@ -129,7 +178,7 @@ const handler = createHandler({
           const queryFieldName = nameVariants(
             removeGeneratorName(cellName, "cell")
           ).camelName;
-          const projectHasSdl = await checkProjectForQueryField(queryFieldName);
+          const projectHasSdl = Boolean(fragment) || await checkProjectForQueryField(queryFieldName);
           if (projectHasSdl) {
             const { errors } = await generateTypes();
             for (const { message, error } of errors) {
@@ -141,7 +190,7 @@ const handler = createHandler({
             addFunctionToRollback(generateTypes, true);
           } else {
             task.skip(
-              `Skipping type generation: no SDL defined for "${queryFieldName}". To generate types, run 'yarn cedar generate sdl ${queryFieldName}'.`
+              `Skipping type generation: no SDL defined for "${queryFieldName}". To generate types, run '${formatCedarCommand(["generate", "sdl", queryFieldName])}'.`
             );
           }
         }

package/dist/commands/generate/cell/templates/cell.tsx.template

@@ -6,7 +6,9 @@ import type {
 import type {
   CellSuccessProps,
   CellFailureProps,
-  TypedDocumentNode,
+  TypedDocumentNode,<% if (beforeQuery) { %>
+  CellBeforeQueryResult,<% } %><% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
 } from '@cedarjs/web'
 
 export const QUERY: TypedDocumentNode<
@@ -19,7 +21,24 @@ export const QUERY: TypedDocumentNode<
     }
   }
 `
-
+<% if (beforeQuery) { %>
+export const beforeQuery = (
+  props: ${operationName}Variables,
+): CellBeforeQueryResult<${operationName}Variables> => {
+  return { variables: props, fetchPolicy: 'cache-and-network' }
+}
+<% } %><% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>

package/dist/commands/generate/cell/templates/cellFragment.tsx.template

@@ -0,0 +1,43 @@
+import type { ${fragmentName} } from 'types/graphql'
+
+import type {
+  CellSuccessProps,<% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
+} from '@cedarjs/web'
+
+// A parent Cell spreads this fragment by name in its own QUERY, and passes
+// the matching field down as the `${camelName}` prop - no import needed,
+// just render <${pascalName}Cell />:
+//
+//   query FindSomething($id: Int!) {
+//     something(id: $id) {
+//       id
+//       ...${fragmentName}
+//     }
+//   }
+//
+//   <${pascalName}Cell ${camelName}={something} />
+export const FRAGMENT = gql`
+  fragment ${fragmentName} on ${fragmentOnType} {
+    id
+  }
+`
+<% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
+export const Empty = () => <div>Empty</div>
+
+export const Success = ({
+  ${camelName},
+}: CellSuccessProps<{ ${camelName}: ${fragmentName} }>) => {
+  return <div>{JSON.stringify(${camelName})}</div>
+}

package/dist/commands/generate/cell/templates/cellList.tsx.template

@@ -3,7 +3,9 @@ import type { ${operationName}, ${operationName}Variables  } from 'types/graphql
 import type {
   CellSuccessProps,
   CellFailureProps,
-  TypedDocumentNode,
+  TypedDocumentNode,<% if (beforeQuery) { %>
+  CellBeforeQueryResult,<% } %><% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
 } from '@cedarjs/web'
 
 export const QUERY: TypedDocumentNode<
@@ -16,7 +18,24 @@ export const QUERY: TypedDocumentNode<
     }
   }
 `
-
+<% if (beforeQuery) { %>
+export const beforeQuery = (
+  props: ${operationName}Variables,
+): CellBeforeQueryResult<${operationName}Variables> => {
+  return { variables: props, fetchPolicy: 'cache-and-network' }
+}
+<% } %><% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>

package/dist/commands/generate/cell/templates/storiesFragment.tsx.template

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+const meta: Meta = {
+  title: 'Cells/${pascalName}Cell',
+  tags: ['autodocs']
+}
+
+export default meta
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  }
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  }
+}

package/dist/commands/generate/cell/templates/test.js.template

@@ -7,7 +7,7 @@ import { standard } from './${pascalName}Cell.mock'
 // and can fail without adjustments, e.g. Float and DateTime types.
 //           Please refer to the RedwoodJS Testing Docs:
 //        https://cedarjs.com/docs/testing#testing-cells
-// https://cedarjs.com/docs/testing#jest-expect-type-considerations
+// https://cedarjs.com/docs/testing#expect-type-considerations
 
 describe('${pascalName}Cell', () => {
   it('renders Loading successfully', () => {

package/dist/commands/generate/cell/templates/testFragment.js.template

@@ -0,0 +1,30 @@
+import { render } from '@cedarjs/testing/web'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://cedarjs.com/docs/testing#testing-cells
+// https://cedarjs.com/docs/testing#expect-type-considerations
+
+describe('${pascalName}Cell', () => {
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@cedarjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success ${camelName}={standard().${camelName}} />)
+    }).not.toThrow()
+  })
+})

package/dist/commands/generate/component/componentHandler.js

@@ -1,14 +1,19 @@
-import { transformTSToJS } from "../../../lib/index.js";
+import { transformTSToJSMap } from "../../../lib/index.js";
 import {
   createHandler,
   templateForComponentFile
 } from "../yargsHandlerHelpers.js";
-const REDWOOD_WEB_PATH_NAME = "components";
-const files = async ({ name, typescript = false, ...argv }) => {
+const CEDAR_WEB_PATH_NAME = "components";
+const files = async ({
+  name,
+  typescript = false,
+  stories,
+  tests
+}) => {
   const extension = typescript ? ".tsx" : ".jsx";
   const componentFile = await templateForComponentFile({
     name,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     extension,
     generator: "component",
     templatePath: "component.tsx.template"
@@ -16,34 +21,27 @@ const files = async ({ name, typescript = false, ...argv }) => {
   const testFile = await templateForComponentFile({
     name,
     extension: `.test${extension}`,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "component",
     templatePath: "test.tsx.template"
   });
   const storiesFile = await templateForComponentFile({
     name,
     extension: `.stories${extension}`,
-    webPathSection: REDWOOD_WEB_PATH_NAME,
+    webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "component",
     // Using two different template files here because we have a TS-specific
     // information in a comment in the .tsx template
     templatePath: typescript ? "stories.tsx.template" : "stories.jsx.template"
   });
   const files2 = [componentFile];
-  if (argv.stories) {
+  if (stories) {
     files2.push(storiesFile);
   }
-  if (argv.tests) {
+  if (tests) {
     files2.push(testFile);
   }
-  return files2.reduce(async (accP, [outputPath, content]) => {
-    const acc = await accP;
-    const template = typescript ? content : await transformTSToJS(outputPath, content);
-    return {
-      [outputPath]: template,
-      ...acc
-    };
-  }, Promise.resolve({}));
+  return transformTSToJSMap(files2, typescript);
 };
 const handler = createHandler({
   componentName: "component",