@superblocksteam/cli 0.0.14 → 0.0.16

package/README.md

@@ -12,7 +12,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/0.0.14 linux-x64 node-v18.17.0
+@superblocksteam/cli/0.0.16 linux-x64 node-v18.17.0
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND

package/assets/custom-components/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     "plugin:react/jsx-runtime",
     "prettier",
     "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",

package/assets/custom-components/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@superblocksteam/cli": "0.0.14",
+    "@superblocksteam/cli": "0.0.16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

package/dist/commands/components/create.js

@@ -15,7 +15,6 @@ const lodash_1 = require("lodash");
 const authenticated_command_1 = require("../../common/authenticated-command");
 const create_component_defaults_1 = require("../../common/defaults/create-component-defaults");
 const identifiers_1 = require("../../util/identifiers");
-const types_1 = require("../../util/types");
 // eslint-disable-next-line unicorn/prefer-module
 const rootDirectory = node_path_1.default.resolve(__dirname, "../../../");
 const DEFAULT_PACKAGE_JSON_TEMPLATE_PATH = node_path_1.default.resolve(rootDirectory, "assets/custom-components");
@@ -76,7 +75,7 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
                     type: "select",
                     name: "type",
                     message: `What input type should ${statefulPropName} be?`,
-                    choices: Object.entries(types_1.inputTypeDefinions).map(([k, v]) => ({
+                    choices: Object.entries(util_1.inputTypeDefinions).map(([k, v]) => ({
                         name: k,
                         message: v.prompt,
                         value: k,
@@ -196,10 +195,7 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
             }
             core_1.ux.action.stop();
         }
-        core_1.ux.action.start("Registering components...");
-        const components = await (0, util_1.getComponentConfigs)();
-        await this.getSdk().registerComponents(this.applicationConfig.id, components);
-        core_1.ux.action.stop();
+        this.registerComponents();
     }
 }
 CreateComponent.description = "Creates a new Superblocks component in the current application folder";

package/dist/commands/components/register.js

@@ -1,36 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const core_1 = require("@oclif/core");
-const util_1 = require("@superblocksteam/util");
-const fs = tslib_1.__importStar(require("fs-extra"));
 const authenticated_command_1 = require("../../common/authenticated-command");
 class Register extends authenticated_command_1.AuthenticatedApplicationCommand {
     async run() {
-        core_1.ux.action.start("Scanning for Superblocks components...");
-        const exists = await fs.pathExists(util_1.CUSTOM_COMPONENTS_PATH);
-        if (!exists) {
-            core_1.ux.action.stop();
-            this.error("No components folder found in current directory, please run 'superblocks components create' first", {
-                exit: 1,
-            });
-        }
-        const configs = await (0, util_1.getComponentConfigs)();
-        if (configs.length === 0) {
-            core_1.ux.action.stop();
-            this.log("No components found in current components directory, please run 'superblocks components create' first");
-        }
-        core_1.ux.action.stop();
-        this.log(JSON.stringify(configs, null, 2));
-        try {
-            core_1.ux.action.start("Registering components...");
-            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
-            core_1.ux.action.stop();
-        }
-        catch {
-            core_1.ux.action.stop();
-            this.error("Failed to register components", { exit: 1 });
-        }
+        await this.registerComponents();
     }
 }
 Register.description = "Registers all local component config files";

package/dist/commands/components/upload.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const node_http_1 = tslib_1.__importDefault(require("node:http"));
 const path_1 = tslib_1.__importDefault(require("path"));
 const core_1 = require("@oclif/core");
+const css_plugin_1 = require("@superblocksteam/css-plugin");
 const react_shim_1 = require("@superblocksteam/react-shim");
 const util_1 = require("@superblocksteam/util");
 const plugin_react_1 = tslib_1.__importDefault(require("@vitejs/plugin-react"));
@@ -21,22 +22,9 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
                 exit: 1,
             });
         }
-        const configs = await (0, util_1.getComponentConfigs)();
-        if (configs.length === 0) {
-            core_1.ux.action.stop();
-            this.log("No components found in current components directory, please run 'superblocks components create' first");
-        }
-        core_1.ux.action.stop();
-        try {
-            core_1.ux.action.start("Registering components...");
-            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
-            core_1.ux.action.stop();
-        }
-        catch (e) {
-            core_1.ux.action.stop();
-            this.log(e.message);
-            this.error("Failed to register components", { exit: 1 });
-        }
+        const configs = await this.registerComponents();
+        if (!configs)
+            return;
         // Map component name to component path- each name is a separate entry point
         const entryFiles = Object.fromEntries(Object.values(configs).map((config) => [
             config.name,
@@ -63,7 +51,7 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
                     write: true,
                 },
                 customLogger: viteLogger,
-                plugins: [(0, plugin_react_1.default)(), (0, react_shim_1.injectReactVersionsPlugin)()],
+                plugins: [(0, plugin_react_1.default)(), (0, react_shim_1.injectReactVersionsPlugin)(), (0, css_plugin_1.productionCssPlugin)()],
             });
         })();
         core_1.ux.action.stop();

package/dist/commands/components/watch.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.healthEndpointMiddleware = void 0;
 const tslib_1 = require("tslib");
-const core_1 = require("@oclif/core");
 const react_shim_1 = require("@superblocksteam/react-shim");
-const util_1 = require("@superblocksteam/util");
 const vite_custom_component_reload_plugin_1 = require("@superblocksteam/vite-custom-component-reload-plugin");
 const plugin_react_1 = tslib_1.__importDefault(require("@vitejs/plugin-react"));
 const colorette_1 = require("colorette");
@@ -31,10 +29,7 @@ function healthEndpointMiddleware() {
 exports.healthEndpointMiddleware = healthEndpointMiddleware;
 class Watch extends authenticated_command_1.AuthenticatedApplicationCommand {
     async run() {
-        core_1.ux.action.start("Registering components...");
-        const components = await (0, util_1.getComponentConfigs)();
-        await this.getSdk().registerComponents(this.applicationConfig.id, components);
-        core_1.ux.action.stop();
+        await this.registerComponents();
         this.log((0, colorette_1.yellow)("Remember to refresh your application to see any newly registered components."));
         this.log();
         this.log((0, colorette_1.green)(`Visit ${await this.getBaseUrl()} and access your application in edit mode to see your components! 🐨`));
@@ -58,20 +53,6 @@ class Watch extends authenticated_command_1.AuthenticatedApplicationCommand {
         await (async () => {
             const server = await (0, vite_1.createServer)({
                 configFile: false,
-                build: {
-                    rollupOptions: {
-                        input: [
-                        // eslint-disable-next-line no-warning-comments
-                        /* TODO */
-                        ],
-                        preserveEntrySignatures: "strict",
-                        output: {
-                            entryFileNames: "[name].js",
-                        },
-                    },
-                    copyPublicDir: true,
-                    write: true,
-                },
                 base: `http://localhost:${port}`,
                 server: {
                     port,

package/dist/commands/init.js

@@ -40,10 +40,8 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                 task: (ctx, task) => task.newListr([
                     {
                         title: "Fetching applications...",
+                        enabled: () => !args.resourceUrl,
                         task: async (ctx, task) => {
-                            if (args.resourceUrl) {
-                                task.skip("Skipping fetching applications");
-                            }
                             // applications choices
                             const applications = await this.getSdk().fetchApplications();
                             for (const app of applications) {
@@ -58,6 +56,28 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                             task.title += `: completed`;
                         },
                     },
+                    {
+                        title: "Fetching resource by resourceUrl...",
+                        enabled: () => args.resourceUrl,
+                        task: async (ctx, task) => {
+                            const [resourceId, resourceType] = getResourceIdFromUrl(args.resourceUrl);
+                            if (resourceType === "APPLICATION") {
+                                const application = await this.getSdk().fetchApplication(resourceId);
+                                ctx.fetchedResources[application.application.id] = {
+                                    resourceType,
+                                    name: application.application.name,
+                                };
+                            }
+                            else if (resourceType === "BACKEND") {
+                                const api = await this.getSdk().fetchApi(resourceId);
+                                ctx.fetchedResources[api.id] = {
+                                    resourceType,
+                                    name: api.actions.name,
+                                };
+                            }
+                            task.title += `: completed`;
+                        },
+                    },
                 ]),
             },
             {
@@ -76,6 +96,9 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                     const now = new Date().toISOString();
                     for (const resourceId of ctx.resourceIdsToInitialize) {
                         const resource = ctx.fetchedResources[resourceId];
+                        if (!resource) {
+                            this.error(`Resource with id ${resourceId} does not exist in fetched resources`);
+                        }
                         switch (resource.resourceType) {
                             case "APPLICATION": {
                                 subtasks.push({
@@ -152,13 +175,8 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
         var _a, _b;
         if (args.resourceUrl) {
             try {
-                const resourceUrl = new URL(args.resourceUrl);
-                if (resourceUrl.pathname.startsWith("/applications") ||
-                    resourceUrl.pathname.startsWith("/workflows") ||
-                    resourceUrl.pathname.startsWith("/scheduled-jobs")) {
-                    return [resourceUrl.pathname.split("/")[2]];
-                }
-                throw new Error(`Failed to parse resource URL: ${args.resourceUrl}`);
+                const [resourceId] = getResourceIdFromUrl(args.resourceUrl);
+                return [resourceId];
             }
             catch {
                 throw new Error(`Invalid resource URL: ${args.resourceUrl}`);
@@ -245,3 +263,14 @@ Initialize.args = {
     }),
 };
 exports.default = Initialize;
+function getResourceIdFromUrl(resourceUrl) {
+    const url = new URL(resourceUrl);
+    if (url.pathname.startsWith("/applications")) {
+        return [url.pathname.split("/")[2], "APPLICATION"];
+    }
+    else if (url.pathname.startsWith("/workflows") ||
+        url.pathname.startsWith("/scheduled-jobs")) {
+        return [url.pathname.split("/")[2], "BACKEND"];
+    }
+    throw new Error(`Failed to parse resource URL: ${resourceUrl}`);
+}

package/dist/common/authenticated-command.d.ts

@@ -11,4 +11,5 @@ export declare abstract class AuthenticatedApplicationCommand extends Authentica
     applicationConfig: SuperblocksApplicationConfig;
     protected getEditModeUrl(): Promise<string>;
     protected init(): Promise<void>;
+    protected registerComponents(): Promise<Record<string, any> | undefined>;
 }

package/dist/common/authenticated-command.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthenticatedApplicationCommand = exports.AuthenticatedCommand = void 0;
+const tslib_1 = require("tslib");
 const core_1 = require("@oclif/core");
 const sdk_1 = require("@superblocksteam/sdk");
 const util_1 = require("@superblocksteam/util");
+const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
 class AuthenticatedCommand extends core_1.Command {
     async init() {
         await super.init();
@@ -54,5 +56,37 @@ class AuthenticatedApplicationCommand extends AuthenticatedCommand {
             });
         }
     }
+    async registerComponents() {
+        core_1.ux.action.start("Scanning for Superblocks components...");
+        const exists = await fs_extra_1.default.pathExists(util_1.CUSTOM_COMPONENTS_PATH);
+        if (!exists) {
+            core_1.ux.action.stop();
+            this.error("No components folder found in current directory, please run 'superblocks components create' first", {
+                exit: 1,
+            });
+        }
+        const { configs, hasError } = await (0, util_1.getComponentConfigs)(true);
+        if (hasError) {
+            core_1.ux.action.stop();
+            this.error("Failed to register components", { exit: 1 });
+            // Stop immediately
+            return;
+        }
+        if (configs.length === 0) {
+            core_1.ux.action.stop();
+            this.log("No components found in current components directory, please run 'superblocks components create' first");
+        }
+        core_1.ux.action.stop();
+        try {
+            core_1.ux.action.start("Registering components...");
+            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
+            core_1.ux.action.stop();
+        }
+        catch {
+            core_1.ux.action.stop();
+            this.error("Failed to register components", { exit: 1 });
+        }
+        return configs;
+    }
 }
 exports.AuthenticatedApplicationCommand = AuthenticatedApplicationCommand;

package/dist/common/defaults/create-component-defaults.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultComponentTsx = exports.getDefaultConfigTs = void 0;
-const types_1 = require("../../util/types");
 const indent = (str, spaces) => {
     const spacesString = " ".repeat(spaces);
     return str
@@ -9,9 +8,6 @@ const indent = (str, spaces) => {
         .map((line) => `${spacesString}${line}`)
         .join("\n");
 };
-function renderInputTypeAsTS(name, type, trailingChars, indentSpaces) {
-    return indent(`${name}: ${types_1.inputTypeDefinions[type].tsType}${trailingChars}`, indentSpaces);
-}
 const getDefaultConfigTs = ({ id, name, displayName, statefulPropsRendered, eventHandlersRendered, }) => `import { type ComponentConfig } from "@superblocksteam/cli";
 
 export default {
@@ -26,26 +22,7 @@ export default {
 `;
 exports.getDefaultConfigTs = getDefaultConfigTs;
 const getDefaultComponentTsx = (statefulProps, eventHandlers) => `import React from "react";
-
-// 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
-interface StatefulProperties {
-${statefulProps
-    .map((v) => renderInputTypeAsTS(v.path, v.inputType, ";", 2) + "\n")
-    .join("")}}
-
-interface Props extends StatefulProperties {
-  // Call updateStatefulProperties to 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
-  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, 2) + ": () => void;" + "\n").join("")}}
+import { Props } from "./types";
 
 export default function Component({
   updateStatefulProperties${statefulProps.length > 0

package/dist/common/types.d.ts

@@ -1,4 +1,4 @@
-import { type InputType } from "../util/types";
+import { type InputType } from "@superblocksteam/util";
 export interface StatefulProperty {
     label: string;
     path: string;

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.14",
+  "version": "0.0.16",
   "commands": {
     "init": {
       "id": "init",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Official Superblocks CLI",
   "bin": {
     "superblocks": "bin/run"
@@ -18,8 +18,9 @@
     "@oclif/core": "^2",
     "@oclif/plugin-help": "^5",
     "@oclif/plugin-plugins": "^2.4.4",
-    "@superblocksteam/sdk": "*",
+    "@superblocksteam/css-plugin": "*",
     "@superblocksteam/react-shim": "*",
+    "@superblocksteam/sdk": "*",
     "@superblocksteam/util": "*",
     "@superblocksteam/vite-custom-component-reload-plugin": "*",
     "@vitejs/plugin-react": "^4.0.0",
@@ -30,7 +31,7 @@
     "lodash": "^4.17.21",
     "serve-handler": "^6.1.5",
     "slugify": "^1.6.6",
-    "vite": "^4.3.9",
+    "vite": "^4.4.8",
     "vite-plugin-inspect": "^0.7.28",
     "yaml": "2.3.1"
   },

package/dist/util/types.d.ts

@@ -1,9 +0,0 @@
-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/util/types.js

@@ -1,26 +0,0 @@
-"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;