@superblocksteam/custom-components 0.0.21 → 0.0.23

package/dist/exportedTypes.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/hooksPlumbing.d.ts

@@ -0,0 +1,48 @@
+interface MutableRefObject<T> {
+    current: T;
+}
+/** The size of the area that is available for the custom component to render in */
+export interface WidgetSize {
+    /** The width in grid units */
+    widthGrid: number;
+    /** The height in grid units */
+    heightGrid: number;
+    /** The width in pixels */
+    widthPx: number;
+    /** The height in pixels */
+    heightPx: number;
+}
+/**
+ * The information that is passed down to each custom component. This information is specific to the widget that is
+ * currently being rendered. This is the information that is used to implement all superblocks hooks for custom components.
+ * We pass that information down via a React Context.
+ */
+interface CCRenderingContext {
+    widgetId: string;
+    /** This is the value returned by the `useSuperblocksContext` hook */
+    superblocksContext: any;
+    /**
+     * This is the set of subscribers to the `isLoading` property: each time the value of `isLoading` changes, these functions
+     * will be called. This is used internally by the `useSuperblocksIsLoading` hook.
+     */
+    isLoadingSubscribers: Set<(isLoading: boolean) => void>;
+    /** The current value of the `isLoading` property. Is is used internally by the `useSuperblocksIsLoading` hook */
+    isLoadingRef: MutableRefObject<boolean>;
+    /**
+     * The set of subscribers to the widget size object: each time the size of the widget changes, we need to
+     * call these functions to notify all custom components that have expressed interest in being notified of such
+     * changes. It is used internally by the `useSuperblocksWidgetSize` hook
+     */
+    widgetSizeSubscribers: Set<(widgetSize: WidgetSize) => void>;
+    /** The current size of the widget. Is is used internally by the `useSuperblocksWidgetSize` hook */
+    widgetSizeRef: MutableRefObject<WidgetSize>;
+}
+/**
+ * A React hook that is used internally by all superblocks hooks for custom components.
+ * @returns The React library namespace object used by custom components and the CCRenderingContext object provided by the UI
+ */
+export declare function useHooksInternalContext(): {
+    React: any;
+    ccRenderingContext: CCRenderingContext;
+};
+export {};

package/dist/hooksPlumbing.js

@@ -0,0 +1,24 @@
+// This files contains the basic plumbing that is needed to implement all hooks that are used by custom components.
+// The place where we store the `CCReactInfo` object
+const ccReactInfoRegister = globalThis.__cc_react_info;
+/**
+ * A React hook that is used internally by all superblocks hooks for custom components.
+ * @returns The React library namespace object used by custom components and the CCRenderingContext object provided by the UI
+ */
+export function useHooksInternalContext() {
+    if (ccReactInfoRegister === undefined) {
+        throw new Error("Cannot find the context object provided by the Superblocks Application Builder UI");
+    }
+    if (ccReactInfoRegister.current === undefined) {
+        throw new Error("No custom components have been registered, are you using the hook in the right place?");
+    }
+    const { React, SuperblocksCCReactContext } = ccReactInfoRegister.current;
+    const ccRenderingContext = React.useContext(SuperblocksCCReactContext);
+    if (ccRenderingContext === undefined) {
+        throw new Error("No React context found, are you using the hook in the right place?");
+    }
+    return {
+        React,
+        ccRenderingContext,
+    };
+}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./exportedTypes";
 export * from "./useSuperblocksContext";
+export * from "./useSuperblocksIsLoading";
+export * from "./useSuperblocksWidgetSize";

package/dist/index.js

@@ -1,5 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./exportedTypes"), exports);
-tslib_1.__exportStar(require("./useSuperblocksContext"), exports);
+export * from "./exportedTypes";
+export * from "./useSuperblocksContext";
+export * from "./useSuperblocksIsLoading";
+export * from "./useSuperblocksWidgetSize";

package/dist/useSuperblocksContext.js

@@ -1,26 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSuperblocksContext = void 0;
-// The place where we store the `CCReactInfo` object
-const ccReactInfoRegister = globalThis.__cc_react_info;
-// === End of internal types ===
+import { useHooksInternalContext } from "./hooksPlumbing";
 /**
  * A React hook that can be used to get the Superblocks context object that contains methods that enable custom components
  * to interact with the Superblocks Application.
  * @returns The Superblocks context object
  */
-function useSuperblocksContext() {
-    if (ccReactInfoRegister === undefined) {
-        throw new Error("Cannot find the context object provided by the Superblocks Application Builder UI");
-    }
-    if (ccReactInfoRegister.current === undefined) {
-        throw new Error("No custom components have been registered, are you using the hook in the right place?");
-    }
-    const { React, SuperblocksCCReactContext } = ccReactInfoRegister.current;
-    const ccRenderingContext = React.useContext(SuperblocksCCReactContext);
-    if (ccRenderingContext === undefined) {
-        throw new Error("No React context found, are you using the hook in the right place?");
-    }
-    return ccRenderingContext === null || ccRenderingContext === void 0 ? void 0 : ccRenderingContext.superblocksContext;
+export function useSuperblocksContext() {
+    const { ccRenderingContext } = useHooksInternalContext();
+    return ccRenderingContext.superblocksContext;
 }
-exports.useSuperblocksContext = useSuperblocksContext;

package/dist/useSuperblocksIsLoading.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A React hook that returns a boolean that indicates whether the current custom component depends on any data that is
+ * currently being loaded. This can be used to show a loading indicator in your custom component.
+ */
+export declare function useSuperblocksIsLoading(): boolean;

package/dist/useSuperblocksIsLoading.js

@@ -0,0 +1,16 @@
+import { useHooksInternalContext } from "./hooksPlumbing";
+/**
+ * A React hook that returns a boolean that indicates whether the current custom component depends on any data that is
+ * currently being loaded. This can be used to show a loading indicator in your custom component.
+ */
+export function useSuperblocksIsLoading() {
+    const { React, ccRenderingContext } = useHooksInternalContext();
+    const [isLoading, setIsLoading] = React.useState(ccRenderingContext.isLoadingRef.current);
+    ccRenderingContext.isLoadingSubscribers.add(setIsLoading);
+    React.useEffect(() => {
+        return () => {
+            ccRenderingContext.isLoadingSubscribers.delete(setIsLoading);
+        };
+    }, []);
+    return isLoading;
+}

package/dist/useSuperblocksWidgetSize.d.ts

@@ -0,0 +1,7 @@
+import { WidgetSize } from "./hooksPlumbing";
+export { WidgetSize };
+/**
+ * A React hook that returns the size of the area that is available for the custom component to render in. Calling this
+ * hook will cause your custom component to be re-rendered whenever that size changes.
+ */
+export declare function useSuperblocksWidgetSize(): WidgetSize;

package/dist/useSuperblocksWidgetSize.js

@@ -0,0 +1,16 @@
+import { useHooksInternalContext } from "./hooksPlumbing";
+/**
+ * A React hook that returns the size of the area that is available for the custom component to render in. Calling this
+ * hook will cause your custom component to be re-rendered whenever that size changes.
+ */
+export function useSuperblocksWidgetSize() {
+    const { React, ccRenderingContext } = useHooksInternalContext();
+    const [widgetSize, setWidgetSize] = React.useState(ccRenderingContext.widgetSizeRef.current);
+    ccRenderingContext.widgetSizeSubscribers.add(setWidgetSize);
+    React.useEffect(() => {
+        return () => {
+            ccRenderingContext.widgetSizeSubscribers.delete(setWidgetSize);
+        };
+    }, []);
+    return widgetSize;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/custom-components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Official Superblocks SDK for developing custom components",
   "homepage": "https://www.superblocks.com/",
   "keywords": [
@@ -18,10 +18,12 @@
     "clean": "npm run clean:build && rm -rf node_modules",
     "clean:build": "tsc --build --clean && rm -rf dist tsconfig.tsbuildinfo",
     "lint": "eslint . --ext .ts --config .eslintrc.json",
-    "lint:fix": "eslint . --ext .ts --config .eslintrc.json --fix"
+    "lint:fix": "eslint . --ext .ts --config .eslintrc.json --fix",
+    "typecheck": "tsc --noEmit"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.60.1",
@@ -35,7 +37,7 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@superblocksteam/util": "*",
+    "@superblocksteam/util": "0.0.23",
     "tslib": "^2.6.1"
   }
 }