zag-ripple 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Abraham
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "RippleJS Adapter for Zag JS",
   "keywords": [
     "js",
@@ -16,6 +16,7 @@
   "homepage": "https://github.com/anubra266/zag-ripple#readme",
   "license": "MIT",
   "main": "src/index.ripple",
+  "types": "src/index.d.ts",
   "repository": "https://github.com/anubra266/zag-ripple/tree/main/packages/zag-ripple",
   "sideEffects": false,
   "publishConfig": {
@@ -24,15 +25,18 @@
   "bugs": {
     "url": "https://github.com/anubra266i/zag-ripple/issues"
   },
-  "scripts": {
-    "test": "echo \"No test specified\""
-  },
   "dependencies": {
-    "@zag-js/core": "^1.3.3",
-    "@zag-js/types": "latest",
-    "@zag-js/utils": "latest"
+    "@zag-js/core": "^1.24.2",
+    "@zag-js/types": "^1.24.2",
+    "@zag-js/utils": "^1.24.2"
+  },
+  "peerDependencies": {
+    "ripple": ">=0.2.0"
   },
   "devDependencies": {
     "typescript": "~5.6.2"
+  },
+  "scripts": {
+    "test": "echo \"No test specified\""
   }
-}
+}

package/src/bindable.ripple

@@ -53,8 +53,8 @@ export function createBindable(props) {
   }
 }
 
-createBindable.cleanup = (_fn: VoidFunction) => {
-  effect(() => fn, [])
+createBindable.cleanup = (fn: VoidFunction) => {
+  effect(() => fn(), [])
 }
 
 createBindable.ref = (defaultValue: any) => {

package/src/index.d.ts

@@ -0,0 +1,48 @@
+import type { Machine, Scope } from "@zag-js/core";
+
+export { mergeProps } from "@zag-js/core";
+
+// From normalize-props.ripple
+export declare const normalizeProps: <T>(props: T) => T;
+
+// From machine.ripple  
+export interface MachineApi<TContext = Record<string, any>, TState extends string = string> {
+    state: {
+        value: TState;
+        matches(...values: TState[]): boolean;
+        hasTag(tag: string): boolean;
+        get(): TState;
+    };
+    send: (event: { type: string;[key: string]: any }) => void;
+    context: {
+        get(key: keyof TContext): any;
+        set(key: keyof TContext, value: any): void;
+        initial(key: keyof TContext): any;
+        hash(key: keyof TContext): string;
+    };
+    prop: (key: string) => any;
+    scope: Scope;
+    refs: Record<string, { current: any }>;
+    computed: (key: string) => any;
+    event: {
+        type: string;
+        current(): any;
+        previous(): any;
+        [key: string]: any;
+    };
+    getStatus: () => "started" | "stopped" | "not_started";
+}
+
+export interface MachineOptions {
+    id?: string;
+    ids?: Record<string, string>;
+    getRootNode?: () => Document | ShadowRoot | Node;
+}
+
+export declare function useMachine<
+    TContext = Record<string, any>,
+    TState extends string = string
+>(
+    machine: Machine<TContext>,
+    options?: MachineOptions | (() => MachineOptions)
+): MachineApi<TContext, TState>;

package/src/machine.ripple

@@ -108,6 +108,40 @@ export function useMachine(
 
   const refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
+  const send = (event) => {
+    
+    if (status !== MachineStatus.Started) return
+
+    previousEventRef.current = eventRef.current
+    eventRef.current = event
+
+    let currentState = state.get()
+
+    const transitions = 
+      machine.states[currentState]?.on?.[event.type] ?? 
+      machine.on?.[event.type]
+
+    const transition = choose(transitions)
+    if (!transition) return
+
+    // save current transition
+    transitionRef.current = transition
+    const target = transition.target ?? currentState
+
+    debug("transition", event.type, transition.target || currentState, `(${transition.actions})`)
+
+    const changed = target !== currentState
+    if (changed) {
+      state.set(target)
+    } else if (transition.reenter && !changed) {
+      // reenter will re-invoke the current state
+      state.invoke?.(currentState, currentState)
+    } else {
+      // call transition actions
+      action(transition.actions ?? [])
+    }
+  }
+  
   const getParams = () => ({
     state: getState(),
     context: ctx,
@@ -226,39 +260,6 @@ export function useMachine(
    const initialState = machine.initialState({ prop })
    state.set(initialState)
 
-   const send = (event) => {
-     if (status !== MachineStatus.Started) return
-
-     previousEventRef.current = eventRef.current
-     eventRef.current = event
-
-     let currentState = state.get()
-
-     const transitions = 
-       machine.states[currentState]?.on?.[event.type] ?? 
-       machine.on?.[event.type]
-
-     const transition = choose(transitions)
-     if (!transition) return
-
-     // save current transition
-     transitionRef.current = transition
-     const target = transition.target ?? currentState
-
-     debug("transition", event.type, transition.target || currentState, `(${transition.actions})`)
-
-     const changed = target !== currentState
-     if (changed) {
-       state.set(target)
-     } else if (transition.reenter && !changed) {
-       // reenter will re-invoke the current state
-       state.invoke?.(currentState, currentState)
-     } else {
-       // call transition actions
-       action(transition.actions ?? [])
-     }
-   }
-
   machine.watch?.(getParams())
 
   return {

package/src/normalize-props.ripple

@@ -1,6 +1,62 @@
 import { createNormalizer } from "@zag-js/types"
 
- 
 
-// Simple prop normalizer for RippleJS - just pass through
-export const normalizeProps = createNormalizer((props) => props)
+type Dict = Record<string, boolean | number | string | undefined>
+
+const propMap: Record<string, string> = {
+  className: "class",
+  defaultChecked: "checked",
+  defaultValue: "value",
+  htmlFor: "for",
+  onBlur: "onFocusOut",
+  onChange: "onInput",
+  onFocus: "onFocusIn",
+}
+
+export function toStyleString(style: Record<string, number | string>) {
+  let string = ""
+
+  for (let key in style) {
+    /**
+     * Ignore null and undefined values.
+     */
+    const value = style[key]
+    if (value === null || value === undefined) continue
+
+    /**
+     * Convert camelCase to kebab-case except for CSS custom properties.
+     */
+    if (!key.startsWith("--")) key = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+
+    string += `${key}:${value};`
+  }
+
+  return string
+}
+
+const preserveKeys = new Set<string>(
+  "viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(
+    ",",
+  ),
+)
+
+function toRippleProp(key: string) {
+  if (key in propMap) return propMap[key]
+  if (preserveKeys.has(key)) return key
+  return key.toLowerCase()
+}
+
+function toRipplePropValue(key: string, value: Dict[string]) {
+  if (key === "style" && typeof value === "object") return toStyleString(value)
+  return value
+}
+
+export const normalizeProps = createNormalizer<Record<string, any>>((props) => {
+  const normalized: Dict = {}
+
+  for (const key in props) {
+    normalized[toRippleProp(key)] = toRipplePropValue(key, props[key])
+  }
+
+  return normalized
+})