@superblocksteam/cli 0.0.21 → 0.0.23

package/README.md

@@ -12,7 +12,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/0.0.21 linux-x64 node-v18.17.0
+@superblocksteam/cli/0.0.23 linux-x64 node-v18.17.1
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND
@@ -38,7 +38,10 @@ Creates a new Superblocks component in the current application folder
 
 ```
 USAGE
-  $ superblocks components create
+  $ superblocks components create [--example]
+
+FLAGS
+  --example  Create example component
 
 DESCRIPTION
   Creates a new Superblocks component in the current application folder

package/assets/custom-components/example/component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useSuperblocksContext } from "@superblocksteam/custom-components";
 import { type Props, type EventTriggers } from "./types";
 import { Task, ErrorComponent, validateTasks } from "./validation";

package/assets/custom-components/setup/gitignore_will_rename

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/assets/custom-components/setup/package.json

@@ -7,7 +7,7 @@
     "lint:fix": "npx eslint . --fix"
   },
   "dependencies": {
-    "@superblocksteam/custom-components": "0.0.21",
+    "@superblocksteam/custom-components": "0.0.23",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -19,6 +19,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "3.0.0",
     "sass": "^1.64.2",
     "typescript": "^5.1.6"

package/dist/commands/components/create.d.ts

@@ -2,6 +2,9 @@ import { AuthenticatedApplicationCommand } from "../../common/authenticated-comm
 export default class CreateComponent extends AuthenticatedApplicationCommand {
     static description: string;
     private dataTypeToDefaultControlType;
+    static flags: {
+        example: import("@oclif/core/lib/interfaces").BooleanFlag<boolean>;
+    };
     private initializeComponentByWizard;
     private initializeComponentByExample;
     run(): Promise<void>;

package/dist/commands/components/create.js

@@ -111,13 +111,16 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
                         label: propertyLabel,
                         controlType: this.dataTypeToDefaultControlType(propertyType),
                     };
+                    this.log(`You can configure the remaining display attributes (placeholder, etc) in the config.ts file directly.`);
                 }
                 properties.push({
                     path: propertyPath,
                     dataType: propertyType,
                     propertiesPanelDisplay,
+                    // Optional but include them by default
+                    isExternallyReadable: true,
+                    isExternallySettable: true,
                 });
-                this.log(`You can configure the remaining display attributes (tooltip, placeholder, etc) in the config.ts file directly.`);
                 this.log();
                 const addAnotherProperty = (await (0, enquirer_1.prompt)({
                     type: "confirm",
@@ -190,6 +193,9 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
         const componentTsx = (0, create_component_defaults_1.getDefaultComponentTsx)(properties, events.map((prop) => prop.path));
         if (isFirstTimeCreate) {
             await fs.copy(DEFAULT_PACKAGE_JSON_TEMPLATE_PATH, ".");
+            // There is a very old npm bug where it won't publish .gitignore files
+            // https://github.com/npm/npm/issues/3763
+            await fs.move("./gitignore_will_rename", "./.gitignore");
         }
         await fs.ensureDir("components/" + name);
         await fs.writeFile(`components/${name}/config.ts`, configTs);
@@ -202,6 +208,9 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
         };
     }
     async initializeComponentByExample() {
+        if (await fs.exists("components/ToDoList")) {
+            this.error("Example component ToDoList already exists", { exit: 1 });
+        }
         const response = {
             displayName: "To-Do List (Example)",
             name: "ToDoList",
@@ -214,6 +223,8 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
                         placeholder: "{ taskId: { taskName: 'Task Name', taskStatus: 'complete' | 'todo' } }",
                         controlType: "js-expr",
                     },
+                    isExternallyReadable: true,
+                    isExternallySettable: true,
                 },
             ],
             events: [
@@ -239,6 +250,11 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
                 .join(""),
         });
         await fs.copy(DEFAULT_PACKAGE_JSON_TEMPLATE_PATH, ".");
+        // There is a very old npm bug where it won't publish .gitignore files
+        // https://github.com/npm/npm/issues/3763
+        await fs.move("./gitignore_will_rename", "./.gitignore", {
+            overwrite: true,
+        });
         await fs.ensureDir("components/" + response.name);
         await fs.copy(DEFAULT_EXAMPLE_COMPONENT_TEMPLATE_PATH, `./components/${response.name}/`);
         await fs.writeFile(`components/${response.name}/config.ts`, configTs);
@@ -246,26 +262,27 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
     }
     async run() {
         this.log();
+        const { flags: parsedFlags } = await this.parse(CreateComponent);
         const isFirstTimeCreate = !(await fs.exists("package.json"));
-        let response;
         if (isFirstTimeCreate) {
             this.log(`${(0, colorette_1.cyanBright)("ℹ")} Welcome to Custom Components! In order to help you get started, we’ve built an example To-Do List Component. You can use this component as a template as you build your own Custom Component. To work with this component, we recommend following along with our quickstart guide: ${(0, colorette_1.magenta)("https://docs.superblocks.com/applications/custom-components/quickstart")}`);
             this.log();
+        }
+        let initExampleComponent = parsedFlags.example;
+        if (!parsedFlags.example && isFirstTimeCreate) {
+            // if the example component flag is not set and this is the first time the user is creating a component, prompt the user
             this.log(`If you choose to generate the example component, you will not have to provide any additional inputs. You can re-run superblocks components create once you are ready to create your own component from scratch. `);
             this.log();
-            const initExampleComponent = (await (0, enquirer_1.prompt)({
+            initExampleComponent = (await (0, enquirer_1.prompt)({
                 name: "value",
                 type: "confirm",
                 message: "Would you like to generate an example custom component?",
                 initial: false,
             })).value;
-            response = initExampleComponent
-                ? await this.initializeComponentByExample()
-                : await this.initializeComponentByWizard(isFirstTimeCreate);
-        }
-        else {
-            response = await this.initializeComponentByWizard(isFirstTimeCreate);
         }
+        const response = initExampleComponent
+            ? await this.initializeComponentByExample()
+            : await this.initializeComponentByWizard(isFirstTimeCreate);
         this.log((0, colorette_1.green)("Successfully created component! Added the following files:"));
         this.log();
         const tree = core_1.ux.tree();
@@ -292,8 +309,16 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
             }
             core_1.ux.action.stop();
         }
-        this.registerComponents();
+        const headers = {
+            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.CREATE,
+        };
+        this.registerComponents(headers);
     }
 }
 CreateComponent.description = "Creates a new Superblocks component in the current application folder";
+CreateComponent.flags = {
+    example: core_1.Flags.boolean({
+        description: "Create example component",
+    }),
+};
 exports.default = CreateComponent;

package/dist/commands/components/register.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("@superblocksteam/util");
 const authenticated_command_1 = require("../../common/authenticated-command");
 class Register extends authenticated_command_1.AuthenticatedApplicationCommand {
     async run() {
-        await this.registerComponents();
+        const headers = {
+            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.REGISTER,
+        };
+        await this.registerComponents(headers);
     }
 }
 Register.description = "Registers all local component config files";

package/dist/commands/components/upload.js

@@ -20,7 +20,10 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
                 exit: 1,
             });
         }
-        const configs = await this.registerComponents();
+        const headers = {
+            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.REGISTER,
+        };
+        const configs = await this.registerComponents(headers);
         if (!configs)
             return;
         // Map component name to component path- each name is a separate entry point
@@ -49,7 +52,20 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
                     write: true,
                 },
                 customLogger: viteLogger,
-                plugins: [(0, plugin_react_1.default)(), (0, react_shim_1.injectReactVersionsPlugin)(), (0, css_plugin_1.productionCssPlugin)()],
+                plugins: [
+                    (0, plugin_react_1.default)(),
+                    (0, react_shim_1.injectReactVersionsPlugin)(),
+                    (0, css_plugin_1.productionCssPlugin)(),
+                    {
+                        name: "remove-node-module-maps",
+                        apply: "build",
+                        transform(code, id) {
+                            if (id.includes("node_modules")) {
+                                return { code, map: { mappings: "" } }; // removes these sourcemaps
+                            }
+                        },
+                    },
+                ],
             });
         })();
         core_1.ux.action.stop();
@@ -65,6 +81,7 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
             const fileRelativePaths = [];
             const excluded = [
                 ".superblocks",
+                ".git",
                 "node_modules",
                 "apis",
                 "page.yaml",
@@ -77,8 +94,7 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
         }
         catch (e) {
             core_1.ux.action.stop();
-            this.log(e.message);
-            this.error("Failed to upload components", { exit: 1 });
+            this.error(`Failed to upload components - ${e.message}`, { exit: 1 });
         }
         this.log("You can now disable local dev mode and test your production assets");
     }

package/dist/commands/components/watch.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.healthEndpointMiddleware = void 0;
 const tslib_1 = require("tslib");
 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");
@@ -29,7 +30,10 @@ function healthEndpointMiddleware() {
 exports.healthEndpointMiddleware = healthEndpointMiddleware;
 class Watch extends authenticated_command_1.AuthenticatedApplicationCommand {
     async run() {
-        await this.registerComponents();
+        const headers = {
+            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.REGISTER,
+        };
+        await this.registerComponents(headers);
         this.log((0, colorette_1.yellow)("Remember to refresh your application to see any newly registered components."));
         this.log();
         const port = 3002;

package/dist/commands/init.js

@@ -28,7 +28,7 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                     ctx.writtenResources = {};
                     ctx.now = new Date().toISOString();
                     try {
-                        ctx.existingSuperblocksConfig = (await (0, util_1.getSuperblocksMonorepoConfigJson)())[0];
+                        ctx.existingSuperblocksConfig = (await (0, util_1.getSuperblocksMonorepoConfigJson)(true))[0];
                     }
                     catch {
                         // no existing superblocks config
@@ -62,7 +62,13 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                         task: async (ctx, task) => {
                             const [resourceId, resourceType] = getResourceIdFromUrl(args.resourceUrl);
                             if (resourceType === "APPLICATION") {
-                                const application = await this.getSdk().fetchApplication(resourceId);
+                                const headers = {
+                                    [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.INIT,
+                                };
+                                const application = await this.getSdk().fetchApplication({
+                                    applicationId: resourceId,
+                                    headers,
+                                });
                                 ctx.fetchedResources[application.application.id] = {
                                     resourceType,
                                     name: application.application.name,
@@ -104,7 +110,14 @@ class Initialize extends authenticated_command_1.AuthenticatedCommand {
                                 subtasks.push({
                                     title: `Fetching application ${resource.name}...`,
                                     task: async (_ctx, task) => {
-                                        const application = await this.getSdk().fetchApplication(resourceId, ctx.viewMode);
+                                        const headers = {
+                                            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.INIT,
+                                        };
+                                        const application = await this.getSdk().fetchApplication({
+                                            applicationId: resourceId,
+                                            viewMode: ctx.viewMode,
+                                            headers,
+                                        });
                                         task.title += `: fetched`;
                                         ctx.writtenResources[resourceId] =
                                             await (0, version_control_1.writeResourceToDisk)("APPLICATION", resourceId, application, now, process.cwd());

package/dist/commands/pull.js

@@ -51,7 +51,14 @@ class Pull extends authenticated_command_1.AuthenticatedCommand {
                                 subtasks.push({
                                     title: `Pulling application ${resource.location}...`,
                                     task: async (_ctx, task) => {
-                                        const application = await this.getSdk().fetchApplication(resourceId, viewMode);
+                                        const headers = {
+                                            [util_1.COMPONENT_EVENT_HEADER]: util_1.ComponentEvent.PULL,
+                                        };
+                                        const application = await this.getSdk().fetchApplication({
+                                            applicationId: resourceId,
+                                            viewMode,
+                                            headers,
+                                        });
                                         task.title += `: fetched`;
                                         ctx.writtenResources[resourceId] =
                                             await (0, version_control_1.writeResourceToDisk)("APPLICATION", resourceId, application, now, superblocksRootPath, resource.location);

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

@@ -12,5 +12,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>;
+    protected registerComponents(injectedHeaders?: Record<string, string>): Promise<Record<string, any> | undefined>;
 }

package/dist/common/authenticated-command.js

@@ -139,7 +139,7 @@ class AuthenticatedApplicationCommand extends AuthenticatedCommand {
             this.warn(`Could not read page.yaml to determine version compatibility: ${e.message}`);
         }
     }
-    async registerComponents() {
+    async registerComponents(injectedHeaders) {
         var _a;
         core_1.ux.action.start("Checking CLI version compatibility...");
         try {
@@ -150,7 +150,10 @@ class AuthenticatedApplicationCommand extends AuthenticatedCommand {
 
 ${(0, colorette_1.cyan)("superblocks migrate")}`);
             }
-            if (!semver_1.default.satisfies(this.config.version, versionStr)) {
+            if (versionStr.startsWith("file:")) {
+                this.warn(`You are using a local version of the @superblocksteam/custom-components library. It is not possible to check its version compatibility with the CLI.`);
+            }
+            else if (!semver_1.default.satisfies(this.config.version, versionStr)) {
                 throw new Error(`You must upgrade the @superblocksteam/custom-components library. You are using ${versionStr} but the CLI is ${this.config.version}. Run:
 
 ${(0, colorette_1.cyan)("superblocks migrate")}`);
@@ -185,7 +188,7 @@ ${(0, colorette_1.cyan)("superblocks migrate")}`);
         core_1.ux.action.stop();
         try {
             core_1.ux.action.start("Registering components...");
-            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
+            await this.getSdk().registerComponents(this.applicationConfig.id, configs, injectedHeaders);
             core_1.ux.action.stop();
         }
         catch (e) {

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

@@ -18,16 +18,22 @@ export default {
   componentPath: "components/${name}/component.tsx",
   properties: [${indent(propertiesRendered, 4).trim()}],
   events: [${indent(eventHandlersRendered, 4).trim()}],
+  gridDimensions: {
+    initialColumns: 50,
+    initialRows: 30,
+  },
 } satisfies ComponentConfig;
 `;
 exports.getDefaultConfigTs = getDefaultConfigTs;
-const getDefaultComponentTsx = (properties, eventHandlers) => `import React from "react";
-import { useSuperblocksContext } from "@superblocksteam/custom-components";
+const getDefaultComponentTsx = (properties, eventHandlers) => `import { useSuperblocksContext, useSuperblocksIsLoading } from "@superblocksteam/custom-components";
 import { type Props, type EventTriggers } from "./types";
 
 export default function Component({${properties.length === 0
     ? ""
     : "\n" + properties.map((v) => indent(v.path, 2) + ",\n").join("")}}: Props) {
+  // If any of your component's properties are connected to APIs, you might want to show a loading indicator while the data is
+  // loading. The \`useSuperblocksIsLoading\` hook returns a boolean that indicates whether this is the case.
+  const isLoading = useSuperblocksIsLoading();
   const {
     updateProperties,
     events: {${"\n" + eventHandlers.map((v) => indent(v, 6) + ",\n").join("")}    },
@@ -44,7 +50,7 @@ export default function Component({${properties.length === 0
         backgroundColor: "#a7aebe",
       }}
     >
-      <h1 style={{ color: "white" }}>{"<Insert Component Here>"}</h1>
+      <h1 style={{ color: "white" }}>{isLoading ? <div>Loading...</div> : "<Insert Component Here>"}</h1>
     </div>
   );
 }

package/dist/util/migrationWarningsForApplications.js

@@ -17,8 +17,8 @@ const BREAKING_APPLICATION_VERSIONS = [
         version: "0.0.21",
         // This is an example message because 0.0.21 does not have a docs page for any migrations. This will be added
         // in a future release
-        message: `${(0, colorette_1.red)("Warning")}: You will not be able to use CLI commands on custom components until you manually migrate your components,
-due to breaking changes in the config.ts format and custom component API.
+        message: `${(0, colorette_1.red)("Error")}: This version of the CLI is incompatible with any Custom Components you've previously used,
+due to breaking changes introduced in the config.ts format and Custom Components React API.
     
 ${(0, colorette_1.bold)("Your existing components are safe.")}
 
@@ -26,6 +26,20 @@ To manually migrate:
 
 1. Rename "eventHandlers" to "events".
 2. Update your properties to use the new format: ${(0, colorette_1.magenta)("https://docs.superblocks.com/applications/custom-components/development-lifecycle#configts")}
+`,
+    },
+    {
+        version: "0.0.23",
+        message: `${(0, colorette_1.red)("Warning")}: Type definitions for custom components have changed to include null values,
+which were missing from previous types. The previous types were not accurate.
+Superblocks represents missing/undefined properties as null.
+
+To manually update, you should follow Typescript errors in your IDE and update your code
+to handle null values.
+
+${(0, colorette_1.bold)("Your existing components are safe.")}
+
+See changelog: ${(0, colorette_1.magenta)("https://github.com/superblocksteam/superblocks-cli/blob/main/CHANGELOG.md")}
 `,
     },
 ];

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.21",
+  "version": "0.0.23",
   "commands": {
     "init": {
       "id": "init",
@@ -113,7 +113,14 @@
       "pluginAlias": "@superblocksteam/cli",
       "pluginType": "core",
       "aliases": [],
-      "flags": {},
+      "flags": {
+        "example": {
+          "name": "example",
+          "type": "boolean",
+          "description": "Create example component",
+          "allowNo": false
+        }
+      },
       "args": {}
     },
     "components:register": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Official Superblocks CLI",
   "bin": {
     "superblocks": "bin/run"
@@ -18,12 +18,12 @@
     "@oclif/core": "^2.11.7",
     "@oclif/plugin-help": "^5.2.16",
     "@oclif/plugin-plugins": "^3.1.10",
-    "@superblocksteam/css-plugin": "*",
-    "@superblocksteam/react-shim": "*",
-    "@superblocksteam/sdk": "*",
-    "@superblocksteam/util": "*",
-    "@superblocksteam/vite-custom-component-reload-plugin": "*",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@superblocksteam/css-plugin": "0.0.23",
+    "@superblocksteam/react-shim": "0.0.23",
+    "@superblocksteam/sdk": "0.0.23",
+    "@superblocksteam/util": "0.0.23",
+    "@superblocksteam/vite-custom-component-reload-plugin": "0.0.23",
+    "@vitejs/plugin-react": "^4.0.4",
     "colorette": "^2.0.19",
     "enquirer": "^2.3.6",
     "fs-extra": "^11.1.1",
@@ -68,10 +68,12 @@
     "posttest": "npm run lint",
     "prepack": "npm run build && oclif manifest && oclif readme",
     "test": "mocha --forbid-only \"test/**/*.test.ts\"",
+    "typecheck": "tsc --noEmit",
     "update-readme": "oclif readme"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "keywords": [
     "oclif"