@superblocksteam/util 0.0.15 → 0.0.16

package/dist/component-configs.d.ts

@@ -1,4 +1,4 @@
-export declare function getComponentConfigs(): Promise<{
+export declare function getComponentConfigs(generateTypesFiles: boolean): Promise<{
     configs: Record<string, any>;
     hasError: boolean;
 }>;

package/dist/component-configs.js

@@ -7,6 +7,7 @@ const node_os_1 = tslib_1.__importDefault(require("node:os"));
 const node_path_1 = tslib_1.__importDefault(require("node:path"));
 const fs = tslib_1.__importStar(require("fs-extra"));
 const constants_1 = require("./constants");
+const generate_component_types_1 = require("./generate-component-types");
 const validation_1 = require("./validation");
 const compileTypeScript = (inputFilePath, outputDir) => {
     return new Promise((resolve, reject) => {
@@ -66,14 +67,14 @@ async function getFolderPaths() {
         throw new Error("Could not access component directory, check your permissions");
     }
 }
-async function getComponentConfigs() {
+async function getComponentConfigs(generateTypesFiles) {
     const folderPaths = await getFolderPaths();
     let hasError = false;
     const promiseConfigFiles = folderPaths.map(async (ccpath) => {
         try {
-            const ret = await fs.readJSON(`${ccpath}/config.json`);
+            const config = await fs.readJSON(`${ccpath}/config.json`);
             console.log(`Found component in ${ccpath}`);
-            return ret;
+            return { ccpath, config };
         }
         catch (e) {
             // Noop because there is a fallback
@@ -91,15 +92,15 @@ async function getComponentConfigs() {
                 .slice(2)}`);
             await compileTypeScript(fileName, outputDirectory);
             console.log(`Typescript compiled to ${ccpath}`);
-            const ret = (await Promise.resolve(`${outputDirectory + "/config.js"}`).then(s => tslib_1.__importStar(require(s)))).default;
-            const isValid = (0, validation_1.validateCustomComponents)(ret);
+            const config = (await Promise.resolve(`${outputDirectory + "/config.js"}`).then(s => tslib_1.__importStar(require(s)))).default;
+            const isValid = (0, validation_1.validateCustomComponents)(config);
             if (!isValid.valid) {
                 // Not throwing because we don't need a stack trace here
                 console.log(`Invalid config.ts file found`);
                 console.log(isValid.message);
                 hasError = true;
             }
-            return ret;
+            return { ccpath, config };
         }
         catch (e) {
             console.error(e);
@@ -107,14 +108,22 @@ async function getComponentConfigs() {
             throw e;
         }
     });
-    const configFiles = (await Promise.all(promiseConfigFiles))
-        .filter((file) => file !== null)
-        .reduce((acc, config) => {
+    const configFiles = await Promise.all(promiseConfigFiles);
+    if (generateTypesFiles) {
+        for (const { config, ccpath } of configFiles) {
+            const typesFileContents = (0, generate_component_types_1.generateComponentTypesFile)(config);
+            await fs.writeFile(`${ccpath}/types.ts`, typesFileContents);
+            console.log(`Generated ${ccpath}/types.ts`);
+        }
+    }
+    const configs = configFiles
+        .filter((component) => component.config !== null)
+        .reduce((acc, { config }) => {
         acc[config.id] = config;
         return acc;
     }, {});
     return {
-        configs: configFiles,
+        configs,
         hasError,
     };
 }

package/dist/generate-component-types.d.ts

@@ -0,0 +1 @@
+export declare function generateComponentTypesFile(config: any): string;

package/dist/generate-component-types.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponentTypesFile = void 0;
+const input_types_1 = require("./input-types");
+const indent = (str, spaces) => {
+    const spacesString = " ".repeat(spaces);
+    return str
+        .split("\n")
+        .map((line) => `${spacesString}${line}`)
+        .join("\n");
+};
+function renderInputTypeAsTS(name, type, trailingChars, indentSpaces) {
+    return indent(`${name}: ${input_types_1.inputTypeDefinions[type].tsType}${trailingChars}`, indentSpaces);
+}
+function generateComponentTypesFile(config) {
+    var _a, _b;
+    const statefulProperties = (_a = config.statefulProperties) !== null && _a !== void 0 ? _a : [];
+    const eventHandlers = (_b = config.eventHandlers) !== null && _b !== void 0 ? _b : [];
+    return `// WARNING: This file is automatically generated and managed by Superblocks CLI and should not be edited manually.
+// Use the \`superblocks components watch\` command to regenerate this file from its source in config.ts
+
+// All stateful properties of your component are defined here.
+// These are the properties which are surfaced in the Superblocks properties panel
+// and can be referenced throughout your Superblocks Application
+export interface StatefulProperties {
+${statefulProperties
+        .map((v) => renderInputTypeAsTS(v.path, v.inputType, ";", 2) + "\n")
+        .join("")}}
+
+export interface Props extends StatefulProperties {
+  /**
+   * Update one (or more) of your component's stateful properties. This will cause the component to rerender,
+   * and will also notify any other components in your Application which depend on the updated properties, so they also rerender
+   * @param props An object with the properties to update along with their new values
+   */
+  updateStatefulProperties: (props: Partial<StatefulProperties>) => void;
+
+  // Call the subsequent function(s) to trigger event(s) in Superblocks from your component.
+  // These events can be wired up to event handlers in your Superblocks App
+${eventHandlers.length === 0
+        ? "  // Note: no event handlers defined\n"
+        : eventHandlers
+            .map((v) => indent(v.path, 2) + ": () => void;" + "\n")
+            .join("")}}
+`;
+}
+exports.generateComponentTypesFile = generateComponentTypesFile;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from "./constants";
 export * from "./component-configs";
 export * from "./login";
 export * from "./resource-configs";
+export * from "./input-types";

package/dist/index.js

@@ -5,3 +5,4 @@ tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./component-configs"), exports);
 tslib_1.__exportStar(require("./login"), exports);
 tslib_1.__exportStar(require("./resource-configs"), exports);
+tslib_1.__exportStar(require("./input-types"), exports);

package/dist/input-types.d.ts

@@ -0,0 +1,9 @@
+export declare const supportedInputTypes: readonly ["text", "number", "boolean", "js"];
+export type InputType = (typeof supportedInputTypes)[number];
+interface TypeInfo {
+    tsType: string;
+    prompt: string;
+}
+export declare const inputTypeDefinions: Record<InputType, TypeInfo>;
+export declare function isValidInputType(input: string): input is InputType;
+export {};

package/dist/input-types.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidInputType = exports.inputTypeDefinions = exports.supportedInputTypes = void 0;
+exports.supportedInputTypes = ["text", "number", "boolean", "js"];
+exports.inputTypeDefinions = {
+    text: {
+        tsType: "string",
+        prompt: "text",
+    },
+    number: {
+        tsType: "number",
+        prompt: "number",
+    },
+    boolean: {
+        tsType: "boolean",
+        prompt: "boolean",
+    },
+    js: {
+        tsType: "any",
+        prompt: "any (raw js expression)",
+    },
+};
+function isValidInputType(input) {
+    return Object.prototype.hasOwnProperty.call(exports.inputTypeDefinions, input);
+}
+exports.isValidInputType = isValidInputType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/util",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "main": "dist/index.js",
   "homepage": "https://www.superblocks.com",
   "scripts": {

package/src/component-configs.ts

@@ -3,6 +3,7 @@ import os from "node:os";
 import path from "node:path";
 import * as fs from "fs-extra";
 import { CUSTOM_COMPONENTS_PATH } from "./constants";
+import { generateComponentTypesFile } from "./generate-component-types";
 import { validateCustomComponents } from "./validation";
 
 const compileTypeScript = (inputFilePath: string, outputDir: string) => {
@@ -75,7 +76,9 @@ async function getFolderPaths() {
   }
 }
 
-export async function getComponentConfigs(): Promise<{
+export async function getComponentConfigs(
+  generateTypesFiles: boolean
+): Promise<{
   configs: Record<string, any>;
   hasError: boolean;
 }> {
@@ -83,9 +86,9 @@ export async function getComponentConfigs(): Promise<{
   let hasError = false;
   const promiseConfigFiles = folderPaths.map(async (ccpath) => {
     try {
-      const ret = await fs.readJSON(`${ccpath}/config.json`);
+      const config = await fs.readJSON(`${ccpath}/config.json`);
       console.log(`Found component in ${ccpath}`);
-      return ret;
+      return { ccpath, config };
     } catch (e: any) {
       // Noop because there is a fallback
     }
@@ -105,30 +108,38 @@ export async function getComponentConfigs(): Promise<{
       );
       await compileTypeScript(fileName, outputDirectory);
       console.log(`Typescript compiled to ${ccpath}`);
-      const ret = (await import(outputDirectory + "/config.js")).default;
+      const config = (await import(outputDirectory + "/config.js")).default;
 
-      const isValid = validateCustomComponents(ret);
+      const isValid = validateCustomComponents(config);
       if (!isValid.valid) {
         // Not throwing because we don't need a stack trace here
         console.log(`Invalid config.ts file found`);
         console.log(isValid.message);
         hasError = true;
       }
-      return ret;
+      return { ccpath, config };
     } catch (e: any) {
       console.error(e);
       console.error(e.message);
       throw e;
     }
   });
-  const configFiles = (await Promise.all(promiseConfigFiles))
-    .filter((file) => file !== null)
-    .reduce((acc, config) => {
+  const configFiles = await Promise.all(promiseConfigFiles);
+  if (generateTypesFiles) {
+    for (const { config, ccpath } of configFiles) {
+      const typesFileContents = generateComponentTypesFile(config);
+      await fs.writeFile(`${ccpath}/types.ts`, typesFileContents);
+      console.log(`Generated ${ccpath}/types.ts`);
+    }
+  }
+  const configs = configFiles
+    .filter((component) => component.config !== null)
+    .reduce((acc: Record<string, any>, { config }) => {
       acc[config.id] = config;
       return acc;
     }, {});
   return {
-    configs: configFiles,
+    configs,
     hasError,
   };
 }

package/src/generate-component-types.ts

@@ -0,0 +1,56 @@
+import { inputTypeDefinions, type InputType } from "./input-types";
+
+const indent = (str: string, spaces: number) => {
+  const spacesString = " ".repeat(spaces);
+
+  return str
+    .split("\n")
+    .map((line) => `${spacesString}${line}`)
+    .join("\n");
+};
+
+function renderInputTypeAsTS(
+  name: string,
+  type: InputType,
+  trailingChars: string,
+  indentSpaces: number
+) {
+  return indent(
+    `${name}: ${inputTypeDefinions[type].tsType}${trailingChars}`,
+    indentSpaces
+  );
+}
+
+export function generateComponentTypesFile(config: any) {
+  const statefulProperties = config.statefulProperties ?? [];
+  const eventHandlers = config.eventHandlers ?? [];
+  return `// WARNING: This file is automatically generated and managed by Superblocks CLI and should not be edited manually.
+// Use the \`superblocks components watch\` command to regenerate this file from its source in config.ts
+
+// All stateful properties of your component are defined here.
+// These are the properties which are surfaced in the Superblocks properties panel
+// and can be referenced throughout your Superblocks Application
+export interface StatefulProperties {
+${statefulProperties
+  .map((v: any) => renderInputTypeAsTS(v.path, v.inputType, ";", 2) + "\n")
+  .join("")}}
+
+export interface Props extends StatefulProperties {
+  /**
+   * Update one (or more) of your component's stateful properties. This will cause the component to rerender,
+   * and will also notify any other components in your Application which depend on the updated properties, so they also rerender
+   * @param props An object with the properties to update along with their new values
+   */
+  updateStatefulProperties: (props: Partial<StatefulProperties>) => void;
+
+  // Call the subsequent function(s) to trigger event(s) in Superblocks from your component.
+  // These events can be wired up to event handlers in your Superblocks App
+${
+  eventHandlers.length === 0
+    ? "  // Note: no event handlers defined\n"
+    : eventHandlers
+        .map((v: any) => indent(v.path, 2) + ": () => void;" + "\n")
+        .join("")
+}}
+`;
+}

package/src/index.ts

@@ -2,3 +2,4 @@ export * from "./constants";
 export * from "./component-configs";
 export * from "./login";
 export * from "./resource-configs";
+export * from "./input-types";

package/src/input-types.ts

@@ -0,0 +1,34 @@
+export const supportedInputTypes = ["text", "number", "boolean", "js"] as const;
+
+export type InputType = (typeof supportedInputTypes)[number];
+
+interface TypeInfo {
+  tsType: string;
+  prompt: string;
+}
+
+export const inputTypeDefinions: Record<InputType, TypeInfo> = {
+  text: {
+    tsType: "string",
+    prompt: "text",
+  },
+  number: {
+    tsType: "number",
+    prompt: "number",
+  },
+  boolean: {
+    tsType: "boolean",
+    prompt: "boolean",
+  },
+  js: {
+    tsType: "any",
+    prompt: "any (raw js expression)",
+  },
+};
+
+export function isValidInputType(input: string): input is InputType {
+  return Object.prototype.hasOwnProperty.call(
+    inputTypeDefinions,
+    input as InputType
+  );
+}