frontend-hamroun 1.2.84 → 1.2.88

package/dist/forms.js

@@ -0,0 +1,147 @@
+/**
+ * Form handling utilities for the framework
+ */
+import { useState, useEffect } from './hooks.js';
+export function useForm(options) {
+    const { initialValues, validate, onSubmit } = options;
+    const [values, setValues] = useState(initialValues);
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    const [dirty, setDirty] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitCount, setSubmitCount] = useState(0);
+    // Track form validity and dirty state
+    const isValid = Object.keys(errors).length === 0;
+    const isDirty = Object.values(dirty).some(Boolean);
+    // Validate form when values or validate function changes
+    useEffect(() => {
+        if (validate) {
+            const validationErrors = validate(values);
+            setErrors(validationErrors || {});
+        }
+    }, [values, validate]);
+    // Handle form input changes
+    const handleChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        const fieldValue = type === 'checkbox' ? checked : value;
+        setValues(prev => ({
+            ...prev,
+            [name]: fieldValue
+        }));
+        setDirty(prev => ({
+            ...prev,
+            [name]: true
+        }));
+    };
+    // Handle field blur
+    const handleBlur = (e) => {
+        const { name } = e.target;
+        setTouched(prev => ({
+            ...prev,
+            [name]: true
+        }));
+    };
+    // Set field value programmatically
+    const setFieldValue = (field, value) => {
+        setValues(prev => ({
+            ...prev,
+            [field]: value
+        }));
+        setDirty(prev => ({
+            ...prev,
+            [field]: true
+        }));
+    };
+    // Set field error programmatically
+    const setFieldError = (field, error) => {
+        setErrors(prev => ({
+            ...prev,
+            [field]: error
+        }));
+    };
+    // Update multiple values at once
+    const updateValues = (newValues) => {
+        setValues(prev => ({
+            ...prev,
+            ...newValues
+        }));
+        // Mark changed fields as dirty
+        const dirtyFields = {};
+        Object.keys(newValues).forEach(key => {
+            dirtyFields[key] = true;
+        });
+        setDirty(prev => ({
+            ...prev,
+            ...dirtyFields
+        }));
+    };
+    // Reset form to initial state
+    const resetForm = () => {
+        setValues(initialValues);
+        setErrors({});
+        setTouched({});
+        setDirty({});
+        setIsSubmitting(false);
+    };
+    // Handle form submission
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // Mark all fields as touched
+        const allTouched = {};
+        Object.keys(values).forEach(key => {
+            allTouched[key] = true;
+        });
+        setTouched(allTouched);
+        // Validate before submission
+        let validationErrors = {};
+        if (validate) {
+            validationErrors = validate(values);
+            setErrors(validationErrors || {});
+        }
+        // Only proceed if valid
+        if (Object.keys(validationErrors).length === 0 && onSubmit) {
+            setIsSubmitting(true);
+            setSubmitCount(count => count + 1);
+            try {
+                await onSubmit(values, {
+                    fields: Object.keys(values).reduce((acc, key) => {
+                        acc[key] = {
+                            value: values[key],
+                            error: errors[key],
+                            touched: touched[key] || false,
+                            dirty: dirty[key] || false
+                        };
+                        return acc;
+                    }, {}),
+                    isValid,
+                    isDirty,
+                    isSubmitting: true,
+                    submitCount: submitCount + 1
+                });
+            }
+            finally {
+                setIsSubmitting(false);
+            }
+        }
+    };
+    return {
+        values,
+        errors,
+        touched,
+        dirty,
+        isValid,
+        isDirty,
+        isSubmitting,
+        submitCount,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        setFieldValue,
+        setFieldError,
+        setValues: updateValues,
+        resetForm
+    };
+}
+export default {
+    useForm
+};

package/dist/hooks.d.ts

@@ -0,0 +1,12 @@
+export declare function setRenderCallback(callback: any, element: any, container: any): void;
+export declare function prepareRender(component?: any): number;
+export declare function finishRender(): void;
+export declare function useState<T>(initial: T): [T, (newValue: T | ((prev: T) => T)) => void];
+export declare function useEffect(callback: () => void | (() => void), deps?: any[]): void;
+export declare function useMemo<T>(factory: () => T, deps?: any[]): T;
+export declare function useRef<T>(initial: T): {
+    current: T;
+};
+export declare function useErrorBoundary(): [Error | null, () => void];
+export { createContext, useContext } from './context.js';
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAkBA,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,GAAG,IAAI,CAInF;AAED,wBAAgB,aAAa,CAAC,SAAS,GAAE,GAAU,GAAG,MAAM,CAK3D;AAED,wBAAgB,YAAY,IAAI,IAAI,CAGnC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAoCrF;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAyBjF;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAqB5D;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,CAqBpD;AAsBD,wBAAgB,gBAAgB,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,MAAM,IAAI,CAAC,CAG7D;AAGD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/hooks.js

@@ -0,0 +1,142 @@
+import { batchUpdates, isBatching } from './batch.js';
+// Current render ID counter
+let currentRender = 0;
+let renderContext = null;
+// State storage
+const states = new Map();
+const stateIndices = new Map();
+const effects = new Map();
+const memos = new Map();
+const refs = new Map();
+// Rendering callbacks
+let globalRenderCallback = null;
+let globalContainer = null;
+let currentElement = null;
+export function setRenderCallback(callback, element, container) {
+    globalRenderCallback = callback;
+    globalContainer = container;
+    currentElement = element;
+}
+export function prepareRender(component = null) {
+    currentRender++;
+    renderContext = component;
+    stateIndices.set(currentRender, 0);
+    return currentRender;
+}
+export function finishRender() {
+    renderContext = null;
+    currentRender = 0;
+}
+export function useState(initial) {
+    if (!currentRender) {
+        throw new Error("useState must be called within a render");
+    }
+    if (!states.has(currentRender)) {
+        states.set(currentRender, []);
+    }
+    const componentStates = states.get(currentRender);
+    const index = stateIndices.get(currentRender) || 0;
+    if (index >= componentStates.length) {
+        componentStates.push(initial);
+    }
+    const state = componentStates[index];
+    const setState = (newValue) => {
+        const nextValue = typeof newValue === 'function'
+            ? newValue(componentStates[index])
+            : newValue;
+        if (componentStates[index] === nextValue)
+            return;
+        componentStates[index] = nextValue;
+        if (isBatching) {
+            batchUpdates(() => rerender(currentRender));
+        }
+        else {
+            rerender(currentRender);
+        }
+    };
+    stateIndices.set(currentRender, index + 1);
+    return [state, setState];
+}
+export function useEffect(callback, deps) {
+    if (!currentRender)
+        throw new Error("useEffect must be called within a render");
+    const effectIndex = stateIndices.get(currentRender) || 0;
+    if (!effects.has(currentRender)) {
+        effects.set(currentRender, []);
+    }
+    const componentEffects = effects.get(currentRender);
+    const prevEffect = componentEffects[effectIndex];
+    if (!prevEffect || !deps || !prevEffect.deps || deps.some((dep, i) => dep !== prevEffect.deps[i])) {
+        if (prevEffect?.cleanup) {
+            prevEffect.cleanup();
+        }
+        // Schedule effect execution after render is complete
+        queueMicrotask(() => {
+            const cleanup = callback() || undefined;
+            componentEffects[effectIndex] = { cleanup, deps: deps || [] };
+        });
+    }
+    stateIndices.set(currentRender, effectIndex + 1);
+}
+export function useMemo(factory, deps) {
+    if (!currentRender)
+        throw new Error("useMemo must be called within a render");
+    const memoIndex = stateIndices.get(currentRender) || 0;
+    if (!memos.has(currentRender)) {
+        memos.set(currentRender, []);
+    }
+    const componentMemos = memos.get(currentRender);
+    const prevMemo = componentMemos[memoIndex];
+    if (!prevMemo || (deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i])))) {
+        const value = factory();
+        componentMemos[memoIndex] = { value, deps: deps || [] };
+        stateIndices.set(currentRender, memoIndex + 1);
+        return value;
+    }
+    stateIndices.set(currentRender, memoIndex + 1);
+    return prevMemo.value;
+}
+export function useRef(initial) {
+    if (!currentRender)
+        throw new Error("useRef must be called within a render");
+    const refIndex = stateIndices.get(currentRender) || 0;
+    if (!refs.has(currentRender)) {
+        refs.set(currentRender, []);
+    }
+    const componentRefs = refs.get(currentRender);
+    if (refIndex >= componentRefs.length) {
+        const ref = { current: initial };
+        componentRefs.push(ref);
+        stateIndices.set(currentRender, refIndex + 1);
+        return ref;
+    }
+    const ref = componentRefs[refIndex];
+    stateIndices.set(currentRender, refIndex + 1);
+    return ref;
+}
+async function rerender(rendererId) {
+    try {
+        // Clean up effects
+        const componentEffects = effects.get(rendererId);
+        if (componentEffects) {
+            componentEffects.forEach(effect => {
+                if (effect.cleanup)
+                    effect.cleanup();
+            });
+            effects.set(rendererId, []);
+        }
+        // Trigger re-render
+        if (globalRenderCallback && globalContainer && currentElement) {
+            await globalRenderCallback(currentElement, globalContainer);
+        }
+    }
+    catch (error) {
+        console.error('Error during rerender:', error);
+    }
+}
+export function useErrorBoundary() {
+    const [error, setError] = useState(null);
+    return [error, () => setError(null)];
+}
+// Re-export from context
+export { createContext, useContext } from './context.js';