@cleanweb/oore 1.2.0-alpha.4 → 1.2.0-alpha.6

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

@@ -13,7 +13,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,6 +23,15 @@ 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;
 };
@@ -65,8 +74,7 @@ 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 });

package/build/slots/types.d.ts

@@ -1,17 +1,17 @@
-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);
 };
-export interface DisplayNamedComponent<TProps extends any = any> extends FunctionComponent<TProps> {
-    displayName: string;
-}
+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<Component extends TComponent = TComponent> = SlotNamedComponent | DisplayNamedComponent<Component>;
+export type SlotComponent<TComponentArg extends TComponent = TComponent> = SlotNamedComponent<TComponentArg> | DisplayNamedComponent<TComponentArg>;
 export type SlottedComponent<TComponentArg extends TComponent = TComponent, TSlotAliasArg extends TSlotAlias = TSlotAlias, TSlotsRecordArg extends TSlotsRecord<TSlotAliasArg> = TSlotsRecord<TSlotAliasArg>> = TComponentArg & {
     Slots: TSlotsRecordArg;
 };

package/build/slots/types.js

@@ -1,3 +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.4",
+	"version": "1.2.0-alpha.6",
 	"description": "A library of helpers for writing cleaner React function components with object-oriented patterns.",
 	"engines": {
 		"node": ">=20"