@cleanweb/oore 1.2.0-alpha.5 → 1.2.0-alpha.7

package/build/slots/hook.d.ts

@@ -1,6 +1,9 @@
 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;
+interface IGetSlotName {
+    (TargetComponent: PotentialSlotComponent, child?: ReactElement): string | undefined;
+}
+export declare const getComponentSlotName: IGetSlotName;
 export declare const useSlots: IUseSlots;
 export type { SlotNamedComponent, SlottedComponent, TSlotsRecord, PotentialSlotComponent, } from './types';

package/build/slots/hook.js

@@ -1,4 +1,13 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,7 +22,7 @@ var isElementChild = function (child) {
     return false;
 };
 exports.isElementChild = isElementChild;
-var getComponentSlotName = function (TargetComponent) {
+var getComponentSlotName = function (TargetComponent, child) {
     if (typeof TargetComponent === 'string') {
         return TargetComponent;
     }
@@ -23,11 +32,20 @@ var getComponentSlotName = function (TargetComponent) {
     else if ('displayName' in TargetComponent) {
         return TargetComponent.displayName;
     }
+    else if (child) {
+        var keyTypes = ['string', 'number', 'symbol'];
+        var slotName = child.props['data-slot-name'];
+        if (keyTypes.includes(typeof slotName)) {
+            return slotName;
+        }
+        else
+            return undefined;
+    }
     else
         return undefined;
 };
 exports.getComponentSlotName = getComponentSlotName;
-var useSlots = function (children, slotComponents) {
+var useSlots = function (children, slotComponents, _requiredSlots) {
     var useMemo = react_1.default.useMemo;
     console.log({ slotComponents: slotComponents });
     var slotsAliasLookup = useMemo(function () {
@@ -49,6 +67,7 @@ var useSlots = function (children, slotComponents) {
         var slotNodes = {};
         var unmatchedChildren = [];
         var invalidChildren = [];
+        var requiredSlots = __spreadArray([], (_requiredSlots !== null && _requiredSlots !== void 0 ? _requiredSlots : []), true);
         react_1.default.Children.forEach(children, function (child) {
             if (!child) {
                 invalidChildren.push(child);
@@ -65,17 +84,26 @@ var useSlots = function (children, slotComponents) {
                 return;
             }
             var slotAlias = (function () {
-                var ChildComponent = child.type;
-                var slotName = (0, exports.getComponentSlotName)(ChildComponent);
+                var slotName = (0, exports.getComponentSlotName)(child.type, child);
                 return slotName ? slotsAliasLookup[slotName] : null;
             })();
             console.log('match:', { key: slotAlias });
+            if (slotAlias && (typeof slotComponents[slotAlias] !== 'string')) {
+                if (slotComponents[slotAlias].isRequiredSlot) {
+                    requiredSlots.push(slotAlias);
+                }
+            }
             if (slotAlias)
                 slotNodes[slotAlias] = child;
             else
                 unmatchedChildren.push(child);
         });
         console.log({ unmatchedChildren: unmatchedChildren, invalidChildren: invalidChildren });
+        requiredSlots.forEach(function (slotAlias) {
+            if (!slotNodes[slotAlias]) {
+                (0, errors_1.throwDevError)("Missing required slot \"".concat(String(slotAlias), "\"."));
+            }
+        });
         return [slotNodes, unmatchedChildren, invalidChildren];
     }, [children]);
     return result;

package/build/slots/types.d.ts

@@ -3,7 +3,7 @@ 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);
+    [Key in TKey]: string | SlotComponent;
 };
 export type DisplayNamedComponent<TComponentArg extends TComponent = TComponent, TDisplayNameArg extends string = string> = TComponentArg & {
     displayName: TDisplayNameArg;
@@ -11,7 +11,9 @@ export type DisplayNamedComponent<TComponentArg extends TComponent = TComponent,
 export type SlotNamedComponent<TComponentArg extends TComponent = TComponent, TSlotNameArg extends TSlotName = TSlotName> = TComponentArg & {
     slotName: TSlotNameArg;
 };
-export type SlotComponent<TComponentArg extends TComponent = TComponent> = SlotNamedComponent<TComponentArg> | DisplayNamedComponent<TComponentArg>;
+export type SlotComponent<TComponentArg extends TComponent = TComponent> = (SlotNamedComponent<TComponentArg> | DisplayNamedComponent<TComponentArg>) & {
+    isRequiredSlot?: boolean;
+};
 export type SlottedComponent<TComponentArg extends TComponent = TComponent, TSlotAliasArg extends TSlotAlias = TSlotAlias, TSlotsRecordArg extends TSlotsRecord<TSlotAliasArg> = TSlotsRecord<TSlotAliasArg>> = TComponentArg & {
     Slots: TSlotsRecordArg;
 };
@@ -24,6 +26,6 @@ export type TUseSlotsResult<TSlotAliasArg extends TSlotAlias = TSlotAlias> = Rea
     invalidChildren: any[]
 ]>;
 export interface IUseSlots {
-    <TSlotAliasArg extends TSlotAlias = TSlotAlias>(children: ReactNode, slotComponents: TSlotsRecord<TSlotAliasArg>): TUseSlotsResult<TSlotAliasArg>;
+    <TSlotAliasArg extends TSlotAlias = TSlotAlias>(children: ReactNode, slotComponents: TSlotsRecord<TSlotAliasArg>, requiredSlots?: TSlotAliasArg[]): TUseSlotsResult<TSlotAliasArg>;
 }
 export type PotentialSlotComponent = string | SlotComponent | TComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cleanweb/oore",
-	"version": "1.2.0-alpha.5",
+	"version": "1.2.0-alpha.7",
 	"description": "A library of helpers for writing cleaner React function components with object-oriented patterns.",
 	"engines": {
 		"node": ">=20"