@lattice-ui/core 0.1.1 → 0.3.0

package/out/slot.luau

@@ -77,6 +77,27 @@ local function mergeHandlerTable(a, b)
 	end
 	return out
 end
+local function moveHandlersToReactKeyedProps(props, key)
+	local handlers = toHandlerTable(props[key])
+	if not handlers then
+		props[key] = nil
+		return nil
+	end
+	local reactRuntime = React
+	local source = if key == "Event" then reactRuntime.Event else reactRuntime.Change
+	local dynamicProps = props
+	for rawKey, candidate in pairs(handlers) do
+		if not (type(rawKey) == "string") or not isFn(candidate) then
+			continue
+		end
+		local reactKey = source[rawKey]
+		if reactKey == nil then
+			continue
+		end
+		dynamicProps[reactKey] = candidate
+	end
+	props[key] = nil
+end
 local Slot = React.forwardRef(function(props, forwardedRef)
 	local child = props.children
 	local childProps = toSlotPropBag(child.props)
@@ -103,6 +124,9 @@ local Slot = React.forwardRef(function(props, forwardedRef)
 	local childRef = toForwardedRef(childProps.ref)
 	local mergedRef = composeRefs(childRef, forwardedRef, slotRef)
 	mergedProps.ref = mergedRef
+	-- cloneElement bypasses @rbxts/react createElement Event/Change normalization.
+	moveHandlersToReactKeyedProps(mergedProps, "Event")
+	moveHandlersToReactKeyedProps(mergedProps, "Change")
 	return React.cloneElement(child, mergedProps)
 end)
 Slot.displayName = "Slot"

package/out/useControllableState.luau

@@ -12,16 +12,27 @@ local function useControllableState(_param)
 	local inner, setInner = React.useState(defaultValue)
 	local controlled = value ~= nil
 	local state = if value ~= nil then value else inner
+	local stateRef = React.useRef(state)
+	local controlledRef = React.useRef(controlled)
+	local onChangeRef = React.useRef(onChange)
+	stateRef.current = state
+	controlledRef.current = controlled
+	onChangeRef.current = onChange
 	local setState = React.useCallback(function(nextValue)
-		local computed = if isUpdater(nextValue) then nextValue(state) else nextValue
-		if not controlled then
+		local current = stateRef.current
+		local computed = if isUpdater(nextValue) then nextValue(current) else nextValue
+		if computed == current then
+			return nil
+		end
+		stateRef.current = computed
+		if not controlledRef.current then
 			setInner(computed)
 		end
-		local _result = onChange
+		local _result = onChangeRef.current
 		if _result ~= nil then
 			_result(computed)
 		end
-	end, { controlled, onChange, state })
+	end, {})
 	return { state, setState }
 end
 return {

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@lattice-ui/core",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "files": [
+    "out",
+    "README.md"
+  ],
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
     "@rbxts/react-roblox": "17.3.7-ts.1"
@@ -13,10 +17,10 @@
     "@rbxts/react-roblox": "^17"
   },
   "scripts": {
-    "prebuild": "node ./scripts/ensure-hoisted-links.mjs",
     "build": "rbxtsc -p tsconfig.json",
+    "prebuild": "node ./scripts/ensure-hoisted-links.mjs",
     "prewatch": "node ./scripts/ensure-hoisted-links.mjs",
-    "watch": "rbxtsc -p tsconfig.json -w",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
   }
 }

package/scripts/ensure-hoisted-links.mjs

@@ -1,35 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const scriptDir = path.dirname(fileURLToPath(import.meta.url));
-const packageDir = path.resolve(scriptDir, "..");
-const packageNodeModulesDir = path.join(packageDir, "node_modules");
-const rootNodeModulesDir = path.resolve(packageDir, "../../node_modules");
-const scopedDirs = ["@rbxts", "@rbxts-js"];
-const symlinkType = process.platform === "win32" ? "junction" : "dir";
-
-fs.mkdirSync(packageNodeModulesDir, { recursive: true });
-
-for (const scopedDir of scopedDirs) {
-  const targetPath = path.join(rootNodeModulesDir, scopedDir);
-  const linkPath = path.join(packageNodeModulesDir, scopedDir);
-
-  if (!fs.existsSync(targetPath)) {
-    continue;
-  }
-
-  let shouldRelink = true;
-  if (fs.existsSync(linkPath)) {
-    const current = fs.realpathSync(linkPath);
-    const expected = fs.realpathSync(targetPath);
-    shouldRelink = current !== expected;
-  }
-
-  if (!shouldRelink) {
-    continue;
-  }
-
-  fs.rmSync(linkPath, { recursive: true, force: true });
-  fs.symlinkSync(targetPath, linkPath, symlinkType);
-}

package/src/context.ts

@@ -1,15 +0,0 @@
-import React from "@rbxts/react";
-
-export function createStrictContext<T>(name: string) {
-  const Ctx = React.createContext<T | undefined>(undefined);
-
-  function useCtx(): T {
-    const v = React.useContext(Ctx);
-    if (v === undefined) {
-      error(`[${name}] context is undefined. Wrap components with <${name}.Provider>.`);
-    }
-    return v;
-  }
-
-  return [Ctx.Provider, useCtx] as const;
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from "./context";
-export { default as React } from "./react";
-export { default as ReactRoblox } from "./reactRoblox";
-export * from "./refs";
-export * from "./slot";
-export * from "./useControllableState";

package/src/react.ts

@@ -1,3 +0,0 @@
-import React = require("@rbxts/react");
-
-export default React;

package/src/reactRoblox.ts

@@ -1,3 +0,0 @@
-import ReactRoblox = require("@rbxts/react-roblox");
-
-export default ReactRoblox;

package/src/refs.ts

@@ -1,28 +0,0 @@
-import type React from "@rbxts/react";
-
-type AnyRef<T> = React.Ref<T> | React.ForwardedRef<T>;
-type RefCallback<T> = (value: T | undefined) => void;
-
-function isRefCallback<T>(ref: AnyRef<T> | undefined): ref is RefCallback<T> {
-  return typeIs(ref, "function");
-}
-
-function isMutableRefObject<T>(ref: AnyRef<T> | undefined): ref is React.MutableRefObject<T | undefined> {
-  return typeIs(ref, "table") && "current" in ref;
-}
-
-export function setRef<T>(ref: AnyRef<T> | undefined, value: T | undefined) {
-  if (isRefCallback(ref)) {
-    ref(value);
-    return;
-  }
-  if (isMutableRefObject(ref)) {
-    ref.current = value;
-  }
-}
-
-export function composeRefs<T>(...refs: Array<AnyRef<T> | undefined>) {
-  return (node: T | undefined) => {
-    for (const ref of refs) if (ref) setRef(ref, node);
-  };
-}

package/src/slot.tsx

@@ -1,116 +0,0 @@
-import React from "@rbxts/react";
-import { composeRefs } from "./refs";
-
-type Fn = (...args: unknown[]) => void;
-type HandlerTable = Partial<Record<string, Fn>>;
-type SlotRef = React.ForwardedRef<Instance>;
-type SlotPropBag = React.Attributes & Record<string, unknown>;
-type InstanceRefCallback = (instance: Instance | undefined) => void;
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeIs(value, "table");
-}
-
-function toSlotPropBag(value: unknown): SlotPropBag {
-  return isRecord(value) ? (value as SlotPropBag) : {};
-}
-
-function isFn(value: unknown): value is Fn {
-  return typeIs(value, "function");
-}
-
-function toHandlerTable(value: unknown): HandlerTable | undefined {
-  if (!isRecord(value)) {
-    return undefined;
-  }
-
-  const out: HandlerTable = {};
-  for (const [rawKey, candidate] of pairs(value)) {
-    if (!typeIs(rawKey, "string")) {
-      continue;
-    }
-
-    if (isFn(candidate)) {
-      out[rawKey] = candidate;
-    }
-  }
-
-  return next(out)[0] !== undefined ? out : undefined;
-}
-
-function toForwardedRef(value: unknown): SlotRef | undefined {
-  if (value === undefined) {
-    return undefined;
-  }
-
-  if (isInstanceRefCallback(value)) {
-    return value;
-  }
-
-  if (isInstanceMutableRefObject(value)) {
-    return value;
-  }
-
-  return undefined;
-}
-
-function isInstanceRefCallback(value: unknown): value is InstanceRefCallback {
-  return typeIs(value, "function");
-}
-
-function isInstanceMutableRefObject(value: unknown): value is React.MutableRefObject<Instance | undefined> {
-  return typeIs(value, "table") && "current" in value;
-}
-
-function mergeHandlerTable(a?: HandlerTable, b?: HandlerTable) {
-  if (!a) return b;
-  if (!b) return a;
-  const out: HandlerTable = { ...a };
-  for (const [rawKey, candidate] of pairs(b)) {
-    if (!typeIs(rawKey, "string") || !isFn(candidate)) {
-      continue;
-    }
-
-    const af = a[rawKey];
-    const bf = candidate;
-    out[rawKey] =
-      af && bf
-        ? (...args) => {
-            bf(...args);
-            af(...args);
-          }
-        : (bf ?? af)!;
-  }
-  return out;
-}
-
-export type SlotProps = {
-  children: React.ReactElement<SlotPropBag>;
-  ref?: SlotRef;
-} & SlotPropBag;
-
-export const Slot = React.forwardRef<Instance, SlotProps>((props, forwardedRef) => {
-  const child = props.children;
-  const childProps = toSlotPropBag((child as { props?: unknown }).props);
-
-  const mergedProps: SlotPropBag = { ...props, ...childProps };
-  mergedProps.children = childProps.children;
-
-  const slotEvent = toHandlerTable(props.Event);
-  const childEvent = toHandlerTable(childProps.Event);
-  const slotChange = toHandlerTable(props.Change);
-  const childChange = toHandlerTable(childProps.Change);
-
-  const Event = mergeHandlerTable(slotEvent, childEvent);
-  const Change = mergeHandlerTable(slotChange, childChange);
-  if (Event) mergedProps.Event = Event;
-  if (Change) mergedProps.Change = Change;
-
-  const slotRef = toForwardedRef(props.ref);
-  const childRef = toForwardedRef(childProps.ref);
-  const mergedRef = composeRefs(childRef, forwardedRef, slotRef);
-  mergedProps.ref = mergedRef;
-
-  return React.cloneElement(child, mergedProps);
-});
-Slot.displayName = "Slot";

package/src/useControllableState.ts

@@ -1,28 +0,0 @@
-import React from "@rbxts/react";
-
-type Props<T> = {
-  value?: T;
-  defaultValue: T;
-  onChange?: (next: T) => void;
-};
-
-function isUpdater<T>(value: T | ((prev: T) => T)): value is (prev: T) => T {
-  return typeIs(value, "function");
-}
-
-export function useControllableState<T>({ value, defaultValue, onChange }: Props<T>) {
-  const [inner, setInner] = React.useState(defaultValue);
-  const controlled = value !== undefined;
-  const state = value !== undefined ? value : inner;
-
-  const setState = React.useCallback(
-    (nextValue: T | ((prev: T) => T)) => {
-      const computed = isUpdater(nextValue) ? nextValue(state) : nextValue;
-      if (!controlled) setInner(computed);
-      onChange?.(computed);
-    },
-    [controlled, onChange, state],
-  );
-
-  return [state, setState] as const;
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "out",
-    "declaration": true,
-    "typeRoots": ["./node_modules/@rbxts", "../../node_modules/@rbxts"],
-    "types": ["types", "compiler-types"]
-  },
-  "include": ["src"]
-}

package/tsconfig.typecheck.json

@@ -1,25 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "baseUrl": "..",
-    "rootDir": "..",
-    "paths": {
-      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
-      "@lattice-ui/core": ["core/src/index.ts"],
-      "@lattice-ui/dialog": ["dialog/src/index.ts"],
-      "@lattice-ui/focus": ["focus/src/index.ts"],
-      "@lattice-ui/layer": ["layer/src/index.ts"],
-      "@lattice-ui/menu": ["menu/src/index.ts"],
-      "@lattice-ui/popover": ["popover/src/index.ts"],
-      "@lattice-ui/popper": ["popper/src/index.ts"],
-      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
-      "@lattice-ui/style": ["style/src/index.ts"],
-      "@lattice-ui/switch": ["switch/src/index.ts"],
-      "@lattice-ui/system": ["system/src/index.ts"],
-      "@lattice-ui/tabs": ["tabs/src/index.ts"],
-      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
-      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
-    }
-  }
-}