@cleanweb/oore 1.2.0-alpha.1 → 1.2.0-alpha.10

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,17 @@ var isElementChild = function (child) {
     return false;
 };
 exports.isElementChild = isElementChild;
-var getComponentSlotName = function (TargetComponent) {
+var getComponentSlotName = function (TargetComponent, child) {
+    if (child) {
+        var keyTypes = ['string', 'number', 'symbol'];
+        var slotName = child.props['data-slot-name'];
+        if (keyTypes.includes(typeof slotName)) {
+            if (typeof child.type === 'string') {
+                child.props.tagName = child.type;
+            }
+            return slotName;
+        }
+    }
     if (typeof TargetComponent === 'string') {
         return TargetComponent;
     }
@@ -23,13 +42,11 @@ var getComponentSlotName = function (TargetComponent) {
     else if ('displayName' in TargetComponent) {
         return TargetComponent.displayName;
     }
-    else
-        return undefined;
+    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 () {
         var entries = Object.entries(slotComponents);
         var aliasLookup = {};
@@ -44,11 +61,11 @@ var useSlots = function (children, slotComponents) {
         });
         return aliasLookup;
     }, [slotComponents]);
-    console.log({ slotsAliasLookup: slotsAliasLookup });
     var result = useMemo(function () {
         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 +82,24 @@ 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

@@ -1,22 +1,22 @@
-import type { ReactElement, ReactNode, JSXElementConstructor, FunctionComponent } from 'react';
+import type { ReactElement, ReactNode, JSXElementConstructor } 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);
+    [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, TSlotAliasArg extends TSlotAlias = TSlotAlias, TSlotsRecordArg extends TSlotsRecord<TSlotAliasArg> = TSlotsRecord<TSlotAliasArg>> {
-    (props: TProps): ReactNode;
+export type DisplayNamedComponent<TComponentArg extends TComponent = TComponent, TDisplayNameArg extends string = string> = TComponentArg & {
+    displayName: TDisplayNameArg;
+};
+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>) & {
+    isRequiredSlot?: boolean;
+};
+export type SlottedComponent<TComponentArg extends TComponent = TComponent, TSlotAliasArg extends TSlotAlias = TSlotAlias, TSlotsRecordArg extends TSlotsRecord<TSlotAliasArg> = TSlotsRecord<TSlotAliasArg>> = TComponentArg & {
     Slots: TSlotsRecordArg;
-}
+};
 export type TSlotNodes<TSlotAliasArg extends TSlotAlias> = {
     [Key in TSlotAliasArg]?: ReactElement<any>;
 };
@@ -26,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/build/slots/types.js

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

package/package.json

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