@cleanweb/oore 1.1.0 → 1.2.0-alpha.0

package/build/helpers/errors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Throw an error with the provided message
+ * only when `NODE_ENV` is *not* 'production'.
+ *
+ * In production, this falls back to just a console warning.
+ *
+ * Useful for enforcing certain conditions in development
+ * while failing more gracefully in production.
+ */
+export declare const throwDevError: (message: string) => void;

package/build/helpers/errors.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throwDevError = void 0;
+/**
+ * Throw an error with the provided message
+ * only when `NODE_ENV` is *not* 'production'.
+ *
+ * In production, this falls back to just a console warning.
+ *
+ * Useful for enforcing certain conditions in development
+ * while failing more gracefully in production.
+ */
+var throwDevError = function (message) {
+    if (process.env.NODE_ENV === 'production') {
+        console.warn(message);
+    }
+    else {
+        throw new Error(message);
+    }
+};
+exports.throwDevError = throwDevError;

package/build/slots/hook.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { IUseSlots, PotentialSlotComponent } from './types';
+export declare const isElementChild: (child: ReactNode) => child is ReactElement<any, any>;
+export declare const getComponentSlotName: (TargetComponent: PotentialSlotComponent) => string | number | symbol | undefined;
+export declare const useSlots: IUseSlots;
+export type { SlotNamedComponent, SlottedComponent, TSlotsRecord, PotentialSlotComponent, } from './types';

package/build/slots/hook.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlots = exports.getComponentSlotName = exports.isElementChild = void 0;
+var errors_1 = require("../helpers/errors");
+var react_1 = __importDefault(require("react"));
+var isElementChild = function (child) {
+    if (child && typeof child === 'object' && 'type' in child) {
+        return true;
+    }
+    return false;
+};
+exports.isElementChild = isElementChild;
+var getComponentSlotName = function (TargetComponent) {
+    if (typeof TargetComponent === 'string') {
+        return TargetComponent;
+    }
+    else if ('slotName' in TargetComponent) {
+        return TargetComponent.slotName;
+    }
+    else if ('displayName' in TargetComponent) {
+        return TargetComponent.displayName;
+    }
+    else
+        return undefined;
+};
+exports.getComponentSlotName = getComponentSlotName;
+var useSlots = function (children, slotComponents) {
+    var useMemo = react_1.default.useMemo;
+    console.log({ slotComponents: slotComponents });
+    var slotsAliasLookup = useMemo(function () {
+        var entries = Object.entries(slotComponents);
+        var aliasLookup = {};
+        entries.forEach(function (_a) {
+            var alias = _a[0], RegisteredSlotComponent = _a[1];
+            var slotName = (0, exports.getComponentSlotName)(RegisteredSlotComponent);
+            if (!slotName) {
+                (0, errors_1.throwDevError)("A registered slot component did not have a slot name. All components registered as slots must either be a string tag-name or a React component with either \"slotName\" or \"displayName\". The affected component was: ".concat(RegisteredSlotComponent));
+                return;
+            }
+            return aliasLookup[slotName] = alias;
+        });
+        return aliasLookup;
+    }, [slotComponents]);
+    console.log({ slotsAliasLookup: slotsAliasLookup });
+    var result = useMemo(function () {
+        var slotNodes = {};
+        var unmatchedChildren = [];
+        var invalidChildren = [];
+        react_1.default.Children.forEach(children, function (child) {
+            if (!child) {
+                invalidChildren.push(child);
+                return;
+            }
+            if (!react_1.default.isValidElement(child)) {
+                console.warn("Invalid node found in JSX children while parsing slots. Got: \"".concat(child, "\"."));
+                invalidChildren.push(child);
+                return;
+            }
+            ;
+            if (!(0, exports.isElementChild)(child)) {
+                unmatchedChildren.push(child);
+                return;
+            }
+            var slotAlias = (function () {
+                var ChildComponent = child.type;
+                var slotName = (0, exports.getComponentSlotName)(ChildComponent);
+                return slotName ? slotsAliasLookup[slotName] : null;
+            })();
+            console.log('match:', { key: slotAlias });
+            if (slotAlias)
+                slotNodes[slotAlias] = child;
+            else
+                unmatchedChildren.push(child);
+        });
+        console.log({ unmatchedChildren: unmatchedChildren, invalidChildren: invalidChildren });
+        return [slotNodes, unmatchedChildren, invalidChildren];
+    }, [children]);
+    return result;
+};
+exports.useSlots = useSlots;

package/build/slots/index.d.ts

@@ -0,0 +1 @@
+export * from './hook';

package/build/slots/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hook"), exports);

package/build/slots/types.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode, JSXElementConstructor, FunctionComponent } from 'react';
+export type TComponent = JSXElementConstructor<any>;
+export type TSlotName = keyof any;
+export type TSlotAlias = keyof any;
+export type TSlotsRecord<TKey extends TSlotAlias = TSlotAlias> = {
+    [Key in TKey]: (string | SlotComponent);
+};
+export interface DisplayNamedComponent<TProps extends any = any> extends FunctionComponent<TProps> {
+    displayName: string;
+}
+export interface SlotNamedComponent<TProps extends any = any> {
+    (props: TProps): ReactNode;
+    slotName: TSlotName;
+}
+export type SlotComponent<Component extends TComponent = TComponent> = SlotNamedComponent | DisplayNamedComponent<Component>;
+export interface SlottedComponent<TProps = any, TSlotsRecordArg extends TSlotsRecord = TSlotsRecord> {
+    (props: TProps): ReactNode;
+    Slots: TSlotsRecordArg;
+}
+export type TSlotNodes<TSlotAliasArg extends TSlotAlias> = {
+    [Key in TSlotAliasArg]?: ReactElement<any>;
+};
+export type TUseSlotsResult<TSlotAliasArg extends TSlotAlias = TSlotAlias> = Readonly<[
+    slots: TSlotNodes<TSlotAliasArg>,
+    unmatchedChildren: ReactNode[],
+    invalidChildren: any[]
+]>;
+export interface IUseSlots {
+    <TSlotAliasArg extends TSlotAlias = TSlotAlias>(children: ReactNode, slotComponents: TSlotsRecord<TSlotAliasArg>): TUseSlotsResult<TSlotAliasArg>;
+}
+export type PotentialSlotComponent = string | SlotComponent | TComponent;

package/build/slots/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cleanweb/oore",
-	"version": "1.1.0",
+	"version": "1.2.0-alpha.0",
 	"description": "A library of helpers for writing cleaner React function components with object-oriented patterns.",
 	"engines": {
 		"node": ">=20"
@@ -10,15 +10,11 @@
 		".npmrc"
 	],
 	"main": "build/index.js",
-	"//exports/.": {
-		"require": "./src/index.cjs",
-		"import": "./src/index.mjs"
-	},
-	"//type": "module",
 	"exports": {
 		".": "./build/classy/index.js",
 		"./base": "./build/base/index.js",
 		"./helpers": "./build/helpers/index.js",
+		"./slots": "./build/slots/index.js",
 		"./all": "./build/index.js"
 	},
 	"scripts": {