@superblocksteam/cli 0.0.22 → 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.22 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/package.json

@@ -7,7 +7,7 @@
     "lint:fix": "npx eslint . --fix"
   },
   "dependencies": {
-    "@superblocksteam/custom-components": "0.0.22",
+    "@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,6 +111,7 @@ 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,
@@ -120,7 +121,6 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
                     isExternallyReadable: true,
                     isExternallySettable: true,
                 });
-                this.log(`You can configure the remaining display attributes (placeholder, etc) in the config.ts file directly.`);
                 this.log();
                 const addAnotherProperty = (await (0, enquirer_1.prompt)({
                     type: "confirm",
@@ -208,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",
@@ -247,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);
@@ -254,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();
@@ -307,4 +316,9 @@ class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCo
     }
 }
 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/upload.js

@@ -52,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();
@@ -68,6 +81,7 @@ class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
             const fileRelativePaths = [];
             const excluded = [
                 ".superblocks",
+                ".git",
                 "node_modules",
                 "apis",
                 "page.yaml",
@@ -80,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/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

package/dist/common/authenticated-command.js

@@ -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")}`);

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

@@ -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.22",
+  "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.22",
+  "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"