@fluentui-react-native/use-slots 0.10.11 → 0.11.0

package/package.json

@@ -1,76 +1,83 @@
 {
   "name": "@fluentui-react-native/use-slots",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "Hook function to return styled slots",
+  "keywords": [],
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/use-slots"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.ts",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
+    "lint-package": "fluentui-scripts lint-package",
+    "prettier": "fluentui-scripts prettier",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",
     "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
-    "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
+    "update-snapshots": "fluentui-scripts jest -u"
   },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/framework-base": "0.2.0",
-    "@fluentui-react-native/use-slot": "0.6.11"
+    "@fluentui-react-native/framework-base": "0.3.0",
+    "@fluentui-react-native/use-slot": "0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@fluentui-react-native/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0"
+    "@fluentui-react-native/babel-config": "0.1.1",
+    "@fluentui-react-native/eslint-config-rules": "0.1.1",
+    "@fluentui-react-native/jest-config": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/metro-config": "^0.81.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0"
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
-        "babel-preset-react-native",
-        "core",
-        "core-android",
-        "core-ios",
-        "react"
+        "core-android-dev-only",
+        "core-dev-only",
+        "core-ios-dev-only",
+        "react",
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
+    },
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/__snapshots__/useSlots.samples.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`useSlots sample code test suite renders sample 1 - the two types of basic bold text components 1`] = `
-<div>
-  <span
+<View>
+  <Text
     style={
       {
         "color": "black",
@@ -11,8 +11,8 @@ exports[`useSlots sample code test suite renders sample 1 - the two types of bas
     }
   >
     Staged component at one level
-  </span>
-  <span
+  </Text>
+  <Text
     style={
       {
         "color": "black",
@@ -21,13 +21,13 @@ exports[`useSlots sample code test suite renders sample 1 - the two types of bas
     }
   >
     Standard component of a single level
-  </span>
-</div>
+  </Text>
+</View>
 `;
 
 exports[`useSlots sample code test suite renders sample 2 = the two types of two level header components 1`] = `
 <div>
-  <span
+  <Text
     style={
       {
         "color": "black",
@@ -37,8 +37,8 @@ exports[`useSlots sample code test suite renders sample 2 = the two types of two
     }
   >
     Staged component with two levels
-  </span>
-  <span
+  </Text>
+  <Text
     style={
       {
         "color": "black",
@@ -48,7 +48,7 @@ exports[`useSlots sample code test suite renders sample 2 = the two types of two
     }
   >
     Standard component with two levels
-  </span>
+  </Text>
 </div>
 `;
 
@@ -57,7 +57,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
   <span>
     --- SIMPLE USAGE COMPARISON ---
   </span>
-  <div
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -68,7 +68,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "fontSize": 20,
@@ -77,9 +77,9 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Standard HOC
-    </span>
-  </div>
-  <div
+    </Text>
+  </View>
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -90,7 +90,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "fontSize": 20,
@@ -99,12 +99,12 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Staged HOC
-    </span>
-  </div>
+    </Text>
+  </View>
   <span>
     --- COMPARISON WITH CAPTIONS ---
   </span>
-  <div
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -115,7 +115,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "fontSize": 20,
@@ -124,8 +124,8 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Standard HOC with Caption
-    </span>
-    <span
+    </Text>
+    <Text
       style={
         {
           "fontWeight": 900,
@@ -133,9 +133,9 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Caption text
-    </span>
-  </div>
-  <div
+    </Text>
+  </View>
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -146,7 +146,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "fontSize": 20,
@@ -155,8 +155,8 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Staged HOC with Caption
-    </span>
-    <span
+    </Text>
+    <Text
       style={
         {
           "fontWeight": 900,
@@ -164,12 +164,12 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Caption text
-    </span>
-  </div>
+    </Text>
+  </View>
   <span>
     --- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---
   </span>
-  <div
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -180,7 +180,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "color": "red",
@@ -190,8 +190,8 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Standard HOC with caption and customizations
-    </span>
-    <span
+    </Text>
+    <Text
       style={
         {
           "color": "yellow",
@@ -200,9 +200,9 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Caption text
-    </span>
-  </div>
-  <div
+    </Text>
+  </View>
+  <View
     style={
       {
         "backgroundColor": "gray",
@@ -213,7 +213,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     }
   >
-    <span
+    <Text
       style={
         {
           "color": "red",
@@ -223,8 +223,8 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Staged HOC with caption and customizations
-    </span>
-    <span
+    </Text>
+    <Text
       style={
         {
           "color": "yellow",
@@ -233,7 +233,7 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
       }
     >
       Caption text
-    </span>
-  </div>
+    </Text>
+  </View>
 </div>
 `;

package/src/buildUseSlots.test.tsx

@@ -1,9 +1,9 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { act } from 'react';
 import type { ViewProps, TextProps } from 'react-native';
 import { View, Text } from 'react-native';
 
-import { withSlots, stagedComponent } from '@fluentui-react-native/framework-base';
+import { stagedComponent } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
 
 import { buildUseSlots } from './buildUseSlots';
@@ -38,7 +38,10 @@ const CompBase = stagedComponent((props: ViewProps) => {
 
 describe('buildUseSlots test suite', () => {
   it('Simple component render', () => {
-    const tree = renderer.create(<CompBase style={{ width: 30, height: 20, borderColor: 'green', borderWidth: 1 }} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<CompBase style={{ width: 30, height: 20, borderColor: 'green', borderWidth: 1 }} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 });

package/src/buildUseSlots.ts

@@ -1,5 +1,5 @@
-import type { ComposableFunction, SlotFn, NativeReactType } from '@fluentui-react-native/framework-base';
-import { useSlot } from '@fluentui-react-native/use-slot';
+import { useSlot, type ComponentType } from '@fluentui-react-native/use-slot';
+import type { FunctionComponent, PropsFilter } from '@fluentui-react-native/framework-base';
 
 // type AsObject<T> = T extends object ? T : never
 
@@ -8,11 +8,11 @@ import { useSlot } from '@fluentui-react-native/use-slot';
  */
 type UseStyling<TSlotProps> = (...props: unknown[]) => TSlotProps;
 
-export type Slots<TSlotProps> = { [K in keyof TSlotProps]: SlotFn<TSlotProps[K]> };
+export type Slots<TSlotProps> = { [K in keyof TSlotProps]: FunctionComponent<TSlotProps[K]> };
 
 export type UseSlotOptions<TSlotProps> = {
-  slots: { [K in keyof TSlotProps]: NativeReactType | ComposableFunction<TSlotProps[K]> };
-  filters?: { [K in keyof TSlotProps]?: (propName: string) => boolean };
+  slots: { [K in keyof TSlotProps]: ComponentType<TSlotProps[K]> };
+  filters?: { [K in keyof TSlotProps]?: PropsFilter };
   useStyling?: TSlotProps | GetSlotProps<TSlotProps>;
 };
 
@@ -31,6 +31,9 @@ export function buildUseSlots<TSlotProps>(options: UseSlotOptions<TSlotProps>):
     const builtSlots: Slots<TSlotProps> = {} as Slots<TSlotProps>;
 
     // for each slot go through and either cache the slot props or call part one render if it is staged
+
+    // note: changing this to a for..in loop causes rule of hooks violations
+    // eslint-disable-next-line @rnx-kit/no-foreach-with-captured-variables
     Object.keys(slots).forEach((slotName) => {
       builtSlots[slotName] = useSlot(slots[slotName], slotProps[slotName], filters[slotName]);
     });

package/src/useSlots.samples.test.tsx

@@ -1,19 +1,13 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
-import type { CSSProperties } from 'react';
-
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { act } from 'react';
 import { mergeProps } from '@fluentui-react-native/framework-base';
-import { withSlots, stagedComponent } from '@fluentui-react-native/framework-base';
+import { phasedComponent } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
+import { View, Text } from 'react-native';
+import type { ViewProps, TextProps, ViewStyle, TextStyle } from 'react-native';
 
 import { buildUseSlots } from './buildUseSlots';
 
-// types for web
-type TextProps = { style?: CSSProperties };
-type ViewProps = { style?: CSSProperties };
-type ViewStyle = CSSProperties;
-type TextStyle = CSSProperties;
-
 /**
  * This file contains samples and description to help explain what the useSlots hook does and why it is useful
  * for building components.
@@ -47,7 +41,7 @@ describe('useSlots sample code test suite', () => {
      * Now render the text, merging the baseProps with the style updates with the rest param. Note that this leverages the fact
      * that mergeProps will reliably produce style objects with the same reference, given the same inputs.
      */
-    return <span {...mergeProps(boldBaseProps, rest)}>{children}</span>;
+    return <Text {...mergeProps(boldBaseProps, rest)}>{children}</Text>;
   };
   BoldTextStandard.displayName = 'BoldTextStandard';
 
@@ -55,19 +49,21 @@ describe('useSlots sample code test suite', () => {
    * To write the same component using the staged pattern is only slightly more complex. The pattern involves splitting the component rendering into
    * two parts and executing any hooks in the first part.
    *
-   * The stagedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
+   * The phasedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
    */
-  const BoldTextStaged = stagedComponent((props: React.PropsWithChildren<TextProps>) => {
+  const BoldTextStaged = phasedComponent((props: React.PropsWithChildren<TextProps>) => {
     /**
      * This section would be where hook/styling code would go, props here would include everything coming in from the base react tree with the
      * exception of children, which will be passed in stage 2.
      */
-    return (extra: TextProps, children: React.ReactNode) => {
+    return (extra: React.PropsWithChildren<TextProps>) => {
       /**
        * extra are additional props that may be filled in by a higher order component. They should not include styling and are only props the
        * enclosing component are passing to the JSX elements
        */
-      return <span {...mergeProps(boldBaseProps, props, extra)}>{children}</span>;
+
+      const { children, ...rest } = extra;
+      return <Text {...mergeProps(boldBaseProps, props, rest)}>{children}</Text>;
     };
   });
   BoldTextStaged.displayName = 'BoldTextStaged';
@@ -78,15 +74,16 @@ describe('useSlots sample code test suite', () => {
     /**
      * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const wrapper = renderer
-      .create(
-        <div>
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <View>
           <BoldTextStaged style={styleToMerge}>Staged component at one level</BoldTextStaged>
           <BoldTextStandard style={styleToMerge}>Standard component of a single level</BoldTextStandard>
-        </div>,
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
+        </View>,
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   /**
@@ -121,7 +118,7 @@ describe('useSlots sample code test suite', () => {
   /**
    * Now author the staged component using the slot hook
    */
-  const HeaderStaged = stagedComponent((props: React.PropsWithChildren<TextProps>) => {
+  const HeaderStaged = phasedComponent((props: React.PropsWithChildren<TextProps>) => {
     /**
      * Call the slots hook (or any hook) outside of the inner closure. The useSlots hook will return an object with each slot as a renderable
      * function. The hooks for sub-components will be called as part of this call. Props passed in at this point will be the props that appear
@@ -132,7 +129,8 @@ describe('useSlots sample code test suite', () => {
     const BoldText = useHeaderSlots(props).text;
 
     /** Now the inner closure, pretty much the same as before */
-    return (extra: TextProps, children: React.ReactNode) => {
+    return (extra: TextProps) => {
+      const { children, ...rest } = extra;
       /**
        * Instead of rendering the <BoldTextStageed> component directly we render using the slot. If this is a staged component it will call the
        * inner closure directly, without going through createElement. Entries passed into the JSX, including children, are what appear in the
@@ -141,7 +139,7 @@ describe('useSlots sample code test suite', () => {
        * NOTE: this requires using the withSlots helper via the jsx directive. This knows how to pick apart the entries and just call the second
        * part of the function
        */
-      return <BoldText {...mergeProps(headerBaseProps, props, extra)}>{children}</BoldText>;
+      return <BoldText {...mergeProps(headerBaseProps, props, rest)}>{children}</BoldText>;
     };
   });
   HeaderStaged.displayName = 'HeaderStaged';
@@ -156,15 +154,16 @@ describe('useSlots sample code test suite', () => {
     /**
      * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const wrapper = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <div>
           <HeaderStaged style={styleToMerge}>Staged component with two levels</HeaderStaged>
           <HeaderStandard style={styleToMerge}>Standard component with two levels</HeaderStandard>
         </div>,
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   /**
@@ -199,10 +198,10 @@ describe('useSlots sample code test suite', () => {
     const headerColorProps = getColorProps(headerColor);
     const captionColorProps = getColorProps(captionColor);
     return (
-      <div {...mergeProps(containerProps, rest)}>
+      <View {...mergeProps(containerProps, rest)}>
         <HeaderStandard {...headerColorProps}>{children}</HeaderStandard>
         {captionText && <BoldTextStandard {...captionColorProps}>{captionText}</BoldTextStandard>}
-      </div>
+      </View>
     );
   };
   CaptionedHeaderStandard.displayName = `CaptionedHeaderStandard';`;
@@ -213,7 +212,7 @@ describe('useSlots sample code test suite', () => {
   const useCaptionedHeaderSlots = buildUseSlots({
     /** Slots are just like above, this component will have three sub-components */
     slots: {
-      container: 'div',
+      container: View,
       header: HeaderStaged,
       caption: BoldTextStaged,
     },
@@ -231,12 +230,12 @@ describe('useSlots sample code test suite', () => {
   /**
    * now use the hook to implement it as a staged component
    */
-  const CaptionedHeaderStaged = stagedComponent<React.PropsWithChildren<HeaderWithCaptionProps>>((props) => {
+  const CaptionedHeaderStaged = phasedComponent<React.PropsWithChildren<HeaderWithCaptionProps>>((props) => {
     // At the point where this is called the slots are initialized with the initial prop values from useStyling above
     const Slots = useCaptionedHeaderSlots(props);
-    return (extra: HeaderWithCaptionProps, children: React.ReactNode) => {
+    return (extra: HeaderWithCaptionProps) => {
       // merge the props together, picking out the caption text and clearing any custom values we don't want forwarded to the view
-      const { captionText, ...rest } = mergeProps(props, extra, clearCustomProps);
+      const { children, captionText, ...rest } = mergeProps(props, extra, clearCustomProps);
 
       // now render using the slots. Any values passed in via JSX will be merged with values from the slot hook above
       return (
@@ -256,8 +255,9 @@ describe('useSlots sample code test suite', () => {
      * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
      * to add up.
      */
-    const wrapper = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <div>
           <span>--- SIMPLE USAGE COMPARISON ---</span>
           <CaptionedHeaderStandard style={styleToMerge}>Standard HOC</CaptionedHeaderStandard>
@@ -277,8 +277,8 @@ describe('useSlots sample code test suite', () => {
             Staged HOC with caption and customizations
           </CaptionedHeaderStaged>
         </div>,
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 });