@niibase/uniwind 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## What's Changed in 1.6.1
+
+
+
+### 🐛 Bug Fixes
+
+* pass data attributes to withUniwind (#477) by @Brentlok
+* p3 color parsing (#476) by @Brentlok
+
+### 🧪 Testing
+
+* advanced type check for ThemeName (#465) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'prepare-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.0...v1.6.1
+
+
 ## What's Changed in 1.6.0
 
 

package/dist/common/components/web/generateDataSet.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDataSet = void 0;
+const toCamelCase = str => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const generateDataSet = props => {
   const dataSet = props.dataSet !== void 0 ? {
     ...props.dataSet
   } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

package/dist/common/core/web/getWebStyles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWebVariable = exports.getWebStyles = void 0;
+var _generateDataSet = require("../../components/web/generateDataSet");
 var _cssListener = require("./cssListener");
 var _parseCSSValue = require("./parseCSSValue");
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -38,7 +39,7 @@ const getActiveStylesForClass = className => {
   });
   return extractedStyles;
 };
-const getWebStyles = (className, uniwindContext) => {
+const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -51,7 +52,17 @@ const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = (0, _generateDataSet.generateDataSet)(componentProps ?? {});
+  Object.entries(dataSet).forEach(([key, value]) => {
+    if (value === false || value === void 0) {
+      return;
+    }
+    dummy.dataset[key] = String(value);
+  });
   const computedStyles = getActiveStylesForClass(className);
+  Object.keys(dataSet).forEach(key => {
+    delete dummy.dataset[key];
+  });
   return Object.fromEntries(Object.entries(computedStyles).map(([key, value]) => {
     const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
     return [parsedKey, (0, _parseCSSValue.parseCSSValue)(value)];

package/dist/common/hoc/withUniwind.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.withUniwind = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _generateDataSet = require("../components/web/generateDataSet");
 var _context = require("../core/context");
 var _web = require("../core/web");
 var _withUniwindUtils = require("./withUniwindUtils");
@@ -23,7 +24,7 @@ const withAutoUniwind = Component2 => props => {
         return acc;
       }
       const className = propValue;
-      const color = (0, _web.getWebStyles)(className, uniwindContext).accentColor;
+      const color = (0, _web.getWebStyles)(className, props, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? (0, _web.formatColor)(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -54,7 +55,8 @@ const withAutoUniwind = Component2 => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };
 const withManualUniwind = (Component2, options) => props => {
@@ -71,7 +73,7 @@ const withManualUniwind = (Component2, options) => props => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = (0, _web.getWebStyles)(className, uniwindContext)[option.styleProperty];
+      const value = (0, _web.getWebStyles)(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? (0, _web.formatColor)(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -93,6 +95,7 @@ const withManualUniwind = (Component2, options) => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };

package/dist/common/hoc/withUniwind.native.js

@@ -26,7 +26,7 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;
@@ -36,7 +36,7 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -83,7 +83,7 @@ const withManualUniwind = (Component2, options) => props => {
       const {
         styles: styles2,
         dependencies: dependencies3
-      } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
@@ -91,7 +91,7 @@ const withManualUniwind = (Component2, options) => props => {
     const {
       styles,
       dependencies: dependencies2
-    } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!(0, _withUniwindUtils.isStyleProperty)(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/common/hooks/useResolveClassNames.js

@@ -10,7 +10,7 @@ var _web = require("../core/web");
 const emptyState = {};
 const useResolveClassNames = className => {
   const uniwindContext = (0, _context.useUniwindContext)();
-  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState);
+  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState);
   (0, _react.useLayoutEffect)(() => {
     if (className === "") {
       return;

package/dist/metro/metro-transformer.cjs

@@ -340,8 +340,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);

package/dist/metro/metro-transformer.mjs

@@ -333,8 +333,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);

package/dist/module/components/web/generateDataSet.d.ts

@@ -1,5 +1,5 @@
 export declare const generateDataSet: (props: Record<PropertyKey, any>) => DataSet;
-type DataSet = Record<string, string | boolean>;
+type DataSet = Record<string, string | boolean | undefined>;
 declare module 'react-native' {
     interface SwitchProps {
         dataSet?: DataSet;

package/dist/module/components/web/generateDataSet.js

@@ -1,8 +1,9 @@
+const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 export const generateDataSet = (props) => {
   const dataSet = props.dataSet !== void 0 ? { ...props.dataSet } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

package/dist/module/core/web/getWebStyles.d.ts

@@ -1,3 +1,3 @@
 import { RNStyle, UniwindContextType } from '../types';
-export declare const getWebStyles: (className: string | undefined, uniwindContext: UniwindContextType) => RNStyle;
+export declare const getWebStyles: (className: string | undefined, componentProps: Record<string, unknown> | undefined, uniwindContext: UniwindContextType) => RNStyle;
 export declare const getWebVariable: (name: string, uniwindContext: UniwindContextType) => string | undefined;

package/dist/module/core/web/getWebStyles.js

@@ -1,3 +1,4 @@
+import { generateDataSet } from "../../components/web/generateDataSet.js";
 import { CSSListener } from "./cssListener.js";
 import { parseCSSValue } from "./parseCSSValue.js";
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -33,7 +34,7 @@ const getActiveStylesForClass = (className) => {
   });
   return extractedStyles;
 };
-export const getWebStyles = (className, uniwindContext) => {
+export const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -46,7 +47,17 @@ export const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = generateDataSet(componentProps ?? {});
+  Object.entries(dataSet).forEach(([key, value]) => {
+    if (value === false || value === void 0) {
+      return;
+    }
+    dummy.dataset[key] = String(value);
+  });
   const computedStyles = getActiveStylesForClass(className);
+  Object.keys(dataSet).forEach((key) => {
+    delete dummy.dataset[key];
+  });
   return Object.fromEntries(
     Object.entries(computedStyles).map(([key, value]) => {
       const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

package/dist/module/hoc/withUniwind.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { generateDataSet } from "../components/web/generateDataSet.js";
 import { useUniwindContext } from "../core/context.js";
 import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
@@ -13,7 +14,7 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       const className = propValue;
-      const color = getWebStyles(className, uniwindContext).accentColor;
+      const color = getWebStyles(className, props, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? formatColor(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -40,7 +41,8 @@ const withAutoUniwind = (Component2) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };
@@ -55,7 +57,7 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = getWebStyles(className, uniwindContext)[option.styleProperty];
+      const value = getWebStyles(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? formatColor(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -73,7 +75,8 @@ const withManualUniwind = (Component2, options) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };

package/dist/module/hoc/withUniwind.native.js

@@ -13,14 +13,14 @@ const withAutoUniwind = (Component2) => (props) => {
       if (props[colorProp] !== void 0) {
         return acc;
       }
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;
     }
     if (isClassProperty(propName)) {
       const styleProp = classToStyle(propName);
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -61,12 +61,12 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
     }
-    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!isStyleProperty(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/module/hooks/useResolveClassNames.js

@@ -5,9 +5,9 @@ const emptyState = {};
 export const useResolveClassNames = (className) => {
   const uniwindContext = useUniwindContext();
   const [styles, recreate] = useReducer(
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState,
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState,
     void 0,
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState
   );
   useLayoutEffect(() => {
     if (className === "") {

package/dist/module/hooks/useUniwind.d.ts

@@ -1,4 +1,5 @@
+import { ThemeName } from '../core/types';
 export declare const useUniwind: () => {
-    theme: string;
+    theme: ThemeName;
     hasAdaptiveThemes: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.0",
+    "version": "1.6.1",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -21,6 +21,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "test:native": "jest --config jest.config.native.js",
         "test:web": "jest --config jest.config.web.js",
+        "test:types": "tsc --project tests/type-test/tsconfig.json",
         "test:e2e": "playwright test",
         "release": "release-it"
     },

package/src/components/web/generateDataSet.ts

@@ -1,17 +1,19 @@
+const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
 export const generateDataSet = (props: Record<PropertyKey, any>) => {
     const dataSet: DataSet = props.dataSet !== undefined ? { ...props.dataSet } : {}
 
     Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('data-')) {
             // Remove data- prefix
-            dataSet[key.slice(5)] = value
+            dataSet[toCamelCase(key.slice(5))] = value
         }
     })
 
     return dataSet
 }
 
-type DataSet = Record<string, string | boolean>
+type DataSet = Record<string, string | boolean | undefined>
 
 declare module 'react-native' {
     interface SwitchProps {

package/src/core/web/getWebStyles.ts

@@ -1,3 +1,4 @@
+import { generateDataSet } from '../../components/web/generateDataSet'
 import { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
@@ -52,7 +53,11 @@ const getActiveStylesForClass = (className: string) => {
     return extractedStyles
 }
 
-export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
+export const getWebStyles = (
+    className: string | undefined,
+    componentProps: Record<string, unknown> | undefined,
+    uniwindContext: UniwindContextType,
+): RNStyle => {
     if (className === undefined) {
         return {}
     }
@@ -69,8 +74,22 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
+    const dataSet = generateDataSet(componentProps ?? {})
+
+    Object.entries(dataSet).forEach(([key, value]) => {
+        if (value === false || value === undefined) {
+            return
+        }
+
+        dummy.dataset[key] = String(value)
+    })
+
     const computedStyles = getActiveStylesForClass(className)
 
+    Object.keys(dataSet).forEach(key => {
+        delete dummy.dataset[key]
+    })
+
     return Object.fromEntries(
         Object.entries(computedStyles)
             .map(([key, value]) => {

package/src/hoc/withUniwind.native.tsx

@@ -26,7 +26,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
@@ -36,7 +36,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
         if (isClassProperty(propName)) {
             const styleProp = classToStyle(propName)
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[styleProp] ??= []
@@ -90,7 +90,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
 
             acc.generatedProps[propName] = styles[option.styleProperty]
             acc.dependencies.push(...dependencies)
@@ -98,7 +98,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
             return acc
         }
 
-        const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+        const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
         acc.dependencies.push(...dependencies)
 
         if (!isStyleProperty(propName)) {

package/src/hoc/withUniwind.tsx

@@ -1,4 +1,5 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
@@ -26,7 +27,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             }
 
             const className = propValue
-            const color = getWebStyles(className, uniwindContext).accentColor
+            const color = getWebStyles(className, props, uniwindContext).accentColor
 
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
@@ -67,6 +68,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }
@@ -87,7 +89,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const value = getWebStyles(className, uniwindContext)[option.styleProperty]
+            const value = getWebStyles(className, props, uniwindContext)[option.styleProperty]
             const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
                 ? formatColor(value as string)
                 : value
@@ -115,6 +117,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }

package/src/hooks/useResolveClassNames.ts

@@ -8,9 +8,9 @@ const emptyState = {} as RNStyle
 export const useResolveClassNames = (className: string) => {
     const uniwindContext = useUniwindContext()
     const [styles, recreate] = useReducer(
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
         undefined,
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
     )
 
     useLayoutEffect(() => {

package/src/hooks/useUniwind.ts

@@ -5,7 +5,7 @@ import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
-export const useUniwind = () => {
+export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
     const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
@@ -26,7 +26,7 @@ export const useUniwind = () => {
     }, [uniwindContext])
 
     return {
-        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        theme: uniwindContext.scopedTheme ?? theme,
         hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }

package/src/metro/processor/color.ts

@@ -57,8 +57,9 @@ export class Color {
                 })
             }
 
+            const colorType = color.type === 'display-p3' ? 'p3' : color.type
             const result = this.toRgb({
-                mode: color.type,
+                mode: colorType,
                 ...color,
             } as ColorType)