@uniflowed/stylex 0.0.0-alpha.9 → 0.1.0

package/index.js

@@ -39,6 +39,32 @@
 // configuration flag. The preset is reached by importing it, so a project that
 // does not import it pays nothing, and one that imports half of it keeps half.
 //
+// # The half of a component catalogue that lives here
+//
+// "Not a component library" is a rule about what this package exports, and it
+// was read for a while as a rule about what it is responsible for. It is not.
+// About twenty of the catalogue `@uniflowed/ui` is measured against — Badge,
+// Card, Button, Input, Textarea, Label, Aspect Ratio and the rest — have no
+// behaviour at all: no role, no state machine, no keyboard map. A headless
+// package cannot ship them, because with the styles taken out a `Badge` is a
+// `<span>`. **They are this module's half of the split, and the answer is a
+// style function rather than a component** (ubugeeei-prod/uf#298).
+//
+// `buttonStyles({ tone, size })`, `cardStyles()`, `textStyles({ size, tone })`
+// and `fieldStyles()` are already that answer for four of them, and the shape
+// is the point: a caller spreads `{ className }` onto their own `<button>`, so
+// they keep `type="submit"`, `formAction`, the ref and every attribute a
+// wrapper would have had to remember to forward. Nothing here appears in
+// `@uniflowed/ui`'s types and nothing here renders an element — the rule holds
+// exactly as written; what changed is that the gap is now assigned rather than
+// left between the two packages.
+//
+// `crates/uf_lib/src/ui.rs` records the assignment component by component, and
+// `cargo test -p uf_lib` holds it to this file in both directions: an entry
+// there may not name a style `./preset.js` does not export, and a style
+// exported here must be named by some entry. A `badgeStyles` is the way to
+// close the Badge gap; a `<Badge>` in the other package is not.
+//
 // # Where the token values come from
 //
 // `@uniflowed/brand` owns uf's visual identity — the palette, the type,
@@ -53,7 +79,9 @@
 // # Readiness
 //
 // **Implemented.** `props`, `create`, `defineVars`, `createTheme`, pseudo-class
-// and pseudo-element conditions, at-rule conditions (`@media`, `@supports`),
+// and pseudo-element conditions, the state a headless part announces
+// (`:is([aria-selected=true])` — `crates/uf_stylex/src/condition.rs` says why
+// that shape and no wider), at-rule conditions (`@media`, `@supports`),
 // shorthand-versus-longhand ordering, unit inference, the preset tokens, the
 // base layer, and the shipped themes. Every one of them is compiled: the
 // runtime half of this package is `props` and three functions that throw.

package/native-props.js

@@ -0,0 +1,40 @@
+// @flow
+
+export type NativeStyleProps = { readonly style: { readonly [string]: string | number } };
+
+/** Return null for web namespaces; mixing renderer outputs is an error. */
+export function nativeProps(
+  styles: $ReadOnlyArray<mixed>,
+  nativeOnly: boolean = false,
+): NativeStyleProps | null {
+  let native = false;
+  let web = false;
+  const merged: { [string]: string | number } = {};
+  const pending = [...styles];
+  for (let index = 0; index < pending.length; index += 1) {
+    const value = pending[index];
+    if (Array.isArray(value)) {
+      pending.splice(index + 1, 0, ...value);
+      continue;
+    }
+    if (value == null || typeof value !== "object") continue;
+    // Static objects written by the compiler; validate their scalar fields.
+    const namespace: { [string]: mixed } = value as $FlowFixMe;
+    if (namespace.$$css === true) web = true;
+    if (namespace.$$native !== true) {
+      if (nativeOnly) throw new Error("StyleX native: expected a compiled native namespace");
+      continue;
+    }
+    native = true;
+    for (const property of Object.keys(namespace)) {
+      if (property === "$$native") continue;
+      const entry = namespace[property];
+      if (typeof entry !== "string" && typeof entry !== "number") {
+        throw new Error(`StyleX native: invalid compiled value for ${property}`);
+      }
+      merged[property] = entry;
+    }
+  }
+  if (native && web) throw new Error("StyleX: cannot mix native style objects with web classes");
+  return native ? { style: merged } : null;
+}

package/native.js

@@ -0,0 +1,40 @@
+// @flow
+import type { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { nativeRuntimeRequired } from "@uniflowed/core/native";
+import { nativeProps } from "./native-props.js";
+
+// Use one property map: a ViewStyle | TextStyle union would accept an invalid
+// fontWeight through its ViewStyle branch, whose optional fields all match.
+export type NativeStyle = $ReadOnly<{
+  ...$Exact<ViewStyle>,
+  ...$Exact<TextStyle>,
+  ...$Exact<ImageStyle>,
+}>;
+export type NativeStyleArgument<Style> =
+  | Style
+  | false
+  | null
+  | void
+  | $ReadOnlyArray<NativeStyleArgument<Style>>;
+type StyleFields<Value> = Value extends $ReadOnlyArray<infer Item>
+  ? StyleFields<Item>
+  : Value extends (false | null | void)
+    ? {}
+    : Value;
+
+/** Compile-time namespaces, checked against the app's React Native styles. */
+export function create<Styles extends { readonly [string]: NativeStyle }>(styles: Styles): Styles {
+  return nativeRuntimeRequired("@uniflowed/stylex/native", "stylex.create");
+}
+
+/** Native-only props retain the authored property types and never add className. */
+export function props<Args extends $ReadOnlyArray<NativeStyleArgument<NativeStyle>>>(
+  ...styles: Args
+): { readonly style: Partial<StyleFields<Args>> } {
+  const result = nativeProps(styles, true);
+  // The compiler validates the native subset and preserves every scalar value.
+  // The merger copies those fields, but its dynamic keys cannot retain Style.
+  return (result ?? { style: {} }) as $FlowFixMe;
+}
+
+export const stylex = { create, props };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/stylex",
-  "version": "0.0.0-alpha.9",
+  "version": "0.1.0",
   "description": "Flow declarations for @uniflowed/stylex, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -15,12 +15,22 @@
     "./props": "./props.js",
     "./preset": "./preset.js",
     "./theme": "./theme.js",
-    "./tokens.stylex.js": "./tokens.stylex.js"
+    "./tokens.stylex.js": "./tokens.stylex.js",
+    "./native": "./native.js"
   },
   "files": [
-    "*.js"
+    "*.js",
+    "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.9"
+    "@uniflowed/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.86.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   }
 }

package/props.js

@@ -1,4 +1,6 @@
 // @flow
+
+import { nativeProps } from "./native-props.js";
 //
 // `@uniflowed/stylex/props`: the merge, and the only part of StyleX that runs.
 //
@@ -56,7 +58,10 @@ export type CompiledStyle = {
 export type StyleArgument = mixed;
 
 /** What `props` hands to an element. */
-export type StyleProps = { readonly className?: string };
+export type StyleProps = {
+  readonly className?: string,
+  readonly style?: { readonly [string]: string | number },
+};
 
 /** What one property contributed, once the merge has picked a winner. */
 type Winner = string | null | CompiledClasses;
@@ -73,6 +78,8 @@ type Winner = string | null | CompiledClasses;
  * survived.
  */
 export function props(...styles: $ReadOnlyArray<StyleArgument>): StyleProps {
+  const native = nativeProps(styles);
+  if (native != null) return native;
   const winners: { [string]: Winner } = {};
   collect(styles, winners);