generate components

Author: charliecooper45

index.ts

@@ -5,13 +5,15 @@ import { version } from "./package.json";
 import { parseHookFiles } from "./src/hooks";
 import { parseMetadataFile } from "./src/metadata";
 import { parseSupabaseFile } from "./src/supabase";
+import { parseComponentFiles } from "./src/components";
 import { File, HookFile, fetchTypes } from "./src/types";
 import { DIRECTORY, log, logError } from "./src/utils";
 
 const writeFiles = async (
   supabaseFile: File,
   hookFiles: HookFile[],
-  metadataFile: File
+  metadataFile: File,
+  componentFiles: File[]
 ) => {
   await writeFile(
     `${DIRECTORY}/${supabaseFile.fileName}`,
@@ -27,6 +29,14 @@ const writeFiles = async (
     `${DIRECTORY}/${metadataFile.fileName}`,
     metadataFile.content
   );
+  await Promise.all(
+    componentFiles.map((hookFile) => {
+      return writeFile(
+        `${DIRECTORY}/components/${hookFile.fileName}`,
+        hookFile.content
+      );
+    })
+  );
 };
 
 const run = async () => {
@@ -35,13 +45,15 @@ const run = async () => {
 
   await remove(DIRECTORY);
   await ensureDir(`${DIRECTORY}/hooks`);
+  await ensureDir(`${DIRECTORY}/components`);
   await writeFile(`${DIRECTORY}/${types.fileName}`, types.content);
 
   const supabaseFile = await parseSupabaseFile();
   const hookFiles = await parseHookFiles(types);
   const metadataFile = await parseMetadataFile(hookFiles);
+  const componentFiles = await parseComponentFiles(hookFiles);
 
-  await writeFiles(supabaseFile, hookFiles, metadataFile);
+  await writeFiles(supabaseFile, hookFiles, metadataFile, componentFiles);
 
   log(`Generated ${hookFiles.length + 1} files in "${DIRECTORY}"`);
   log("Code generation completed 🚀");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backengine/codegen",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Generate code for Backengine projects.",
   "bin": "build/index.js",
   "files": [

src/components/index.ts

@@ -0,0 +1,63 @@
+import comment from "../comment";
+import type { File, HookFile } from "../types";
+import prettier from "prettier";
+import { parseNameFormats } from "../utils";
+
+const mapHookFileToComponent = async (hookFile: HookFile): Promise<File> => {
+  const {
+    file: { fileName },
+  } = hookFile;
+
+  const componentName = fileName.replace("use", "");
+  const { camelCasePlural } = parseNameFormats(componentName);
+
+  const content = `
+    ${comment}
+
+    "use client";
+
+    import ${fileName} from "../hooks/${fileName}";
+
+    export default function ${componentName}() {
+      const { ${camelCasePlural} } = ${fileName}();
+
+      return (
+        <div
+          style={{
+            paddingTop: "20px",
+          }}
+        >
+          <code>${camelCasePlural}</code>
+          <pre
+            className="border rounded-md text-xs"
+            style={{
+              marginTop: "4px",
+              padding: "16px",
+              height: "200px",
+              overflowY: "auto",
+            }}
+          >
+            {JSON.stringify(${camelCasePlural}, null, 2)}
+          </pre>
+        </div>
+      )
+    };
+  `;
+
+  const formattedContent = await prettier.format(content, {
+    parser: "typescript",
+  });
+
+  return {
+    fileName: `${componentName}.tsx`,
+    content: formattedContent,
+  };
+};
+
+export const parseComponentFiles = async (
+  hookFiles: HookFile[]
+): Promise<File[]> => {
+  const componentPromises = hookFiles.map(mapHookFileToComponent);
+  const files = await Promise.all(componentPromises);
+  return files;
+};