what-core 0.6.1 → 0.6.3

package/dist/form.js

@@ -1,509 +0,0 @@
-// What Framework - Form Utilities
-// Controlled inputs, validation, and form state management
-
-import { signal, computed, batch, effect } from './reactive.js';
-import { h } from './h.js';
-
-// --- useForm Hook ---
-// Complete form state management with validation
-
-export function useForm(options = {}) {
-  const {
-    defaultValues = {},
-    mode = 'onSubmit', // 'onSubmit' | 'onChange' | 'onBlur'
-    reValidateMode = 'onChange',
-    resolver,
-  } = options;
-
-  // Per-field signals for granular reactivity (avoids full-form re-renders on each keystroke)
-  const fieldSignals = {};
-  const errorSignals = {};
-  const touchedSignals = {};
-
-  function getFieldSignal(name) {
-    if (!fieldSignals[name]) {
-      fieldSignals[name] = signal(defaultValues[name] ?? '');
-    }
-    return fieldSignals[name];
-  }
-
-  function getErrorSignal(name) {
-    if (!errorSignals[name]) {
-      errorSignals[name] = signal(null);
-    }
-    return errorSignals[name];
-  }
-
-  function getTouchedSignal(name) {
-    if (!touchedSignals[name]) {
-      touchedSignals[name] = signal(false);
-    }
-    return touchedSignals[name];
-  }
-
-  // Aggregate signals for bulk operations
-  const isDirty = signal(false);
-  const isSubmitting = signal(false);
-  const isSubmitted = signal(false);
-  const submitCount = signal(0);
-
-  // Helper: get all current values as a plain object
-  function getAllValues() {
-    const result = { ...defaultValues };
-    for (const [name, sig] of Object.entries(fieldSignals)) {
-      result[name] = sig.peek();
-    }
-    return result;
-  }
-
-  // Helper: get all current errors as a plain object
-  function getAllErrors() {
-    const result = {};
-    for (const [name, sig] of Object.entries(errorSignals)) {
-      const err = sig.peek();
-      if (err) result[name] = err;
-    }
-    return result;
-  }
-
-  // Computed states
-  const isValid = computed(() => {
-    for (const sig of Object.values(errorSignals)) {
-      if (sig()) return false;
-    }
-    return true;
-  });
-
-  const dirtyFields = computed(() => {
-    const dirty = {};
-    for (const [name, sig] of Object.entries(fieldSignals)) {
-      if (sig() !== (defaultValues[name] ?? '')) {
-        dirty[name] = true;
-      }
-    }
-    return dirty;
-  });
-
-  // Validation
-  async function validate(fieldName) {
-    if (!resolver) return true;
-
-    const result = await resolver(getAllValues());
-
-    if (fieldName) {
-      // Validate single field — only update that field's error signal
-      const errSig = getErrorSignal(fieldName);
-      if (result.errors[fieldName]) {
-        errSig.set(result.errors[fieldName]);
-        return false;
-      } else {
-        errSig.set(null);
-        return true;
-      }
-    } else {
-      // Validate all fields
-      batch(() => {
-        // Clear existing errors
-        for (const sig of Object.values(errorSignals)) {
-          sig.set(null);
-        }
-        // Set new errors
-        for (const [name, err] of Object.entries(result.errors || {})) {
-          getErrorSignal(name).set(err);
-        }
-      });
-      return Object.keys(result.errors || {}).length === 0;
-    }
-  }
-
-  // Register a field — only subscribes to THIS field's signal
-  function register(name, options = {}) {
-    const fieldSig = getFieldSignal(name);
-    return {
-      name,
-      // Use getter so value is always fresh, even if register result is cached
-      get value() { return fieldSig(); },
-      onInput: (e) => {
-        const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
-        setValue(name, value);
-
-        if (mode === 'onChange' || (isSubmitted.peek() && reValidateMode === 'onChange')) {
-          validate(name);
-        }
-      },
-      onBlur: () => {
-        getTouchedSignal(name).set(true);
-
-        if (mode === 'onBlur' || (isSubmitted.peek() && reValidateMode === 'onBlur')) {
-          validate(name);
-        }
-      },
-      onFocus: () => {},
-      ref: options.ref,
-    };
-  }
-
-  // Set single field value — only triggers re-render for components reading this field
-  function setValue(name, value, options = {}) {
-    const { shouldValidate = false, shouldDirty = true } = options;
-
-    getFieldSignal(name).set(value);
-    if (shouldDirty) isDirty.set(true);
-
-    if (shouldValidate) {
-      validate(name);
-    }
-  }
-
-  // Get single field value
-  function getValue(name) {
-    return getFieldSignal(name)();
-  }
-
-  // Set error for a field
-  function setError(name, error) {
-    getErrorSignal(name).set(error);
-  }
-
-  // Clear error for a field
-  function clearError(name) {
-    getErrorSignal(name).set(null);
-  }
-
-  // Clear all errors
-  function clearErrors() {
-    batch(() => {
-      for (const sig of Object.values(errorSignals)) {
-        sig.set(null);
-      }
-    });
-  }
-
-  // Reset form
-  function reset(newValues = defaultValues) {
-    batch(() => {
-      for (const [name, sig] of Object.entries(fieldSignals)) {
-        sig.set(newValues[name] ?? '');
-      }
-      for (const sig of Object.values(errorSignals)) {
-        sig.set(null);
-      }
-      for (const sig of Object.values(touchedSignals)) {
-        sig.set(false);
-      }
-      isDirty.set(false);
-      isSubmitted.set(false);
-    });
-  }
-
-  // Handle submit
-  function handleSubmit(onValid, onInvalid) {
-    return async (e) => {
-      if (e) e.preventDefault();
-
-      isSubmitting.set(true);
-      isSubmitted.set(true);
-      submitCount.set(submitCount.peek() + 1);
-
-      const isFormValid = await validate();
-
-      if (isFormValid) {
-        await onValid(getAllValues());
-      } else if (onInvalid) {
-        onInvalid(getAllErrors());
-      }
-
-      isSubmitting.set(false);
-    };
-  }
-
-  // Watch a field — returns a computed that subscribes only to this field
-  function watch(name) {
-    if (name) {
-      return computed(() => getFieldSignal(name)());
-    }
-    // Watch all: return a computed that reads all field signals
-    return computed(() => getAllValues());
-  }
-
-  return {
-    register,
-    handleSubmit,
-    setValue,
-    getValue,
-    setError,
-    clearError,
-    clearErrors,
-    reset,
-    watch,
-    validate,
-    // Form state — uses getters for errors/touched to enable per-field granularity
-    formState: {
-      get values() { return getAllValues(); },
-      get errors() { return getAllErrors(); },
-      get touched() {
-        const result = {};
-        for (const [name, sig] of Object.entries(touchedSignals)) {
-          if (sig()) result[name] = true;
-        }
-        return result;
-      },
-      isDirty: () => isDirty(),
-      isValid,
-      isSubmitting: () => isSubmitting(),
-      isSubmitted: () => isSubmitted(),
-      submitCount: () => submitCount(),
-      dirtyFields,
-    },
-  };
-}
-
-// --- Validation Resolvers ---
-
-export function zodResolver(schema) {
-  return async (values) => {
-    try {
-      const result = await schema.parseAsync(values);
-      return { values: result, errors: {} };
-    } catch (e) {
-      const errors = {};
-      for (const issue of e.errors || []) {
-        const path = issue.path.join('.');
-        if (!errors[path]) {
-          errors[path] = { type: issue.code, message: issue.message };
-        }
-      }
-      return { values: {}, errors };
-    }
-  };
-}
-
-export function yupResolver(schema) {
-  return async (values) => {
-    try {
-      const result = await schema.validate(values, { abortEarly: false });
-      return { values: result, errors: {} };
-    } catch (e) {
-      const errors = {};
-      for (const err of e.inner || []) {
-        if (!errors[err.path]) {
-          errors[err.path] = { type: err.type, message: err.message };
-        }
-      }
-      return { values: {}, errors };
-    }
-  };
-}
-
-// Simple validation resolver
-export function simpleResolver(rules) {
-  return async (values) => {
-    const errors = {};
-
-    for (const [field, fieldRules] of Object.entries(rules)) {
-      const value = values[field];
-
-      for (const rule of fieldRules) {
-        const error = rule(value, values);
-        if (error) {
-          errors[field] = { type: 'validation', message: error };
-          break;
-        }
-      }
-    }
-
-    return { values, errors };
-  };
-}
-
-// Built-in validation rules
-export const rules = {
-  required: (message = 'This field is required') => (value) => {
-    if (value === undefined || value === null || value === '') {
-      return message;
-    }
-  },
-
-  minLength: (min, message) => (value) => {
-    if (typeof value === 'string' && value.length < min) {
-      return message || `Must be at least ${min} characters`;
-    }
-  },
-
-  maxLength: (max, message) => (value) => {
-    if (typeof value === 'string' && value.length > max) {
-      return message || `Must be at most ${max} characters`;
-    }
-  },
-
-  min: (min, message) => (value) => {
-    if (typeof value === 'number' && value < min) {
-      return message || `Must be at least ${min}`;
-    }
-  },
-
-  max: (max, message) => (value) => {
-    if (typeof value === 'number' && value > max) {
-      return message || `Must be at most ${max}`;
-    }
-  },
-
-  pattern: (regex, message = 'Invalid format') => (value) => {
-    if (typeof value === 'string' && !regex.test(value)) {
-      return message;
-    }
-  },
-
-  email: (message = 'Invalid email address') => (value) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (typeof value === 'string' && !emailRegex.test(value)) {
-      return message;
-    }
-  },
-
-  url: (message = 'Invalid URL') => (value) => {
-    try {
-      if (typeof value === 'string' && value) {
-        new URL(value);
-      }
-    } catch {
-      return message;
-    }
-  },
-
-  match: (field, message) => (value, values) => {
-    if (value !== values[field]) {
-      return message || `Must match ${field}`;
-    }
-  },
-
-  custom: (validator) => validator,
-};
-
-// --- useField Hook ---
-// Individual field control
-
-export function useField(name, options = {}) {
-  const { validate: validateFn, defaultValue = '' } = options;
-
-  const value = signal(defaultValue);
-  const error = signal(null);
-  const isTouched = signal(false);
-  const isDirty = signal(false);
-
-  async function validate() {
-    if (!validateFn) return true;
-    const result = await validateFn(value.peek());
-    error.set(result || null);
-    return !result;
-  }
-
-  return {
-    name,
-    value: () => value(),
-    error: () => error(),
-    isTouched: () => isTouched(),
-    isDirty: () => isDirty(),
-    setValue: (v) => {
-      value.set(v);
-      isDirty.set(true);
-    },
-    setError: (e) => error.set(e),
-    validate,
-    reset: () => {
-      value.set(defaultValue);
-      error.set(null);
-      isTouched.set(false);
-      isDirty.set(false);
-    },
-    inputProps: () => ({
-      name,
-      value: value(),
-      onInput: (e) => {
-        value.set(e.target.value);
-        isDirty.set(true);
-      },
-      onBlur: () => {
-        isTouched.set(true);
-        validate();
-      },
-    }),
-  };
-}
-
-// --- Controlled Input Components ---
-
-export function Input(props) {
-  const { register, error, ...rest } = props;
-  const registered = register ? register(props.name) : {};
-
-  return h('input', {
-    ...rest,
-    ...registered,
-    'aria-invalid': error ? 'true' : undefined,
-  });
-}
-
-export function Textarea(props) {
-  const { register, error, ...rest } = props;
-  const registered = register ? register(props.name) : {};
-
-  return h('textarea', {
-    ...rest,
-    ...registered,
-    'aria-invalid': error ? 'true' : undefined,
-  });
-}
-
-export function Select(props) {
-  const { register, error, children, ...rest } = props;
-  const registered = register ? register(props.name) : {};
-
-  return h('select', {
-    ...rest,
-    ...registered,
-    'aria-invalid': error ? 'true' : undefined,
-  }, children);
-}
-
-export function Checkbox(props) {
-  const { register, ...rest } = props;
-  const registered = register ? register(props.name) : {};
-
-  return h('input', {
-    type: 'checkbox',
-    ...rest,
-    ...registered,
-    checked: registered.value,
-  });
-}
-
-export function Radio(props) {
-  const { register, value: radioValue, ...rest } = props;
-  const registered = register ? register(props.name) : {};
-
-  return h('input', {
-    type: 'radio',
-    value: radioValue,
-    ...rest,
-    checked: registered.value === radioValue,
-    onChange: (e) => {
-      if (e.target.checked && registered.onInput) {
-        registered.onInput({ target: { value: radioValue } });
-      }
-    },
-  });
-}
-
-// --- Form Error Display ---
-
-export function ErrorMessage({ name, errors, render }) {
-  const error = errors ? errors()[name] : null;
-  if (!error) return null;
-
-  if (render) {
-    return render({ message: error.message, type: error.type });
-  }
-
-  return h('span', { class: 'what-error', role: 'alert' }, error.message);
-}

package/dist/h.js

@@ -1,152 +0,0 @@
-const EMPTY_OBJ = Object.create(null);
-const EMPTY_ARR = [];
-export function h(tag, props, ...children) {
-props = props || EMPTY_OBJ;
-const flat = flattenChildren(children);
-const key = props.key ?? null;
-if (props.key !== undefined) {
-props = { ...props };
-delete props.key;
-}
-return { tag, props, children: flat, key, _vnode: true };
-}
-export function Fragment({ children }) {
-return children;
-}
-function flattenChildren(children) {
-const out = [];
-for (let i = 0; i < children.length; i++) {
-const child = children[i];
-if (child == null || child === false || child === true) continue;
-if (Array.isArray(child)) {
-out.push(...flattenChildren(child));
-} else if (typeof child === 'object' && child._vnode) {
-out.push(child);
-} else if (typeof child === 'function') {
-out.push(child);
-} else {
-out.push(String(child));
-}
-}
-return out;
-}
-export function html(strings, ...values) {
-const src = strings.reduce((acc, str, i) =>
-acc + str + (i < values.length ? `\x00${i}\x00` : ''), '');
-return parseTemplate(src, values);
-}
-function parseTemplate(src, values) {
-src = src.trim();
-const nodes = [];
-let i = 0;
-while (i < src.length) {
-if (src[i] === '<') {
-const result = parseElement(src, i, values);
-if (result) {
-nodes.push(result.node);
-i = result.end;
-continue;
-}
-}
-const result = parseText(src, i, values);
-if (result.text) nodes.push(result.text);
-i = result.end;
-}
-return nodes.length === 1 ? nodes[0] : nodes;
-}
-function parseElement(src, start, values) {
-const openMatch = src.slice(start).match(/^<([a-zA-Z][a-zA-Z0-9-]*|[A-Z]\w*)/);
-if (!openMatch) return null;
-const tag = openMatch[1];
-let i = start + openMatch[0].length;
-const props = {};
-while (i < src.length) {
-while (i < src.length && /\s/.test(src[i])) i++;
-if (src.slice(i, i + 2) === '/>') {
-return { node: h(tag, Object.keys(props).length ? props : null), end: i + 2 };
-}
-if (src[i] === '>') {
-i++;
-break;
-}
-if (src.slice(i, i + 3) === '...') {
-const placeholder = src.slice(i + 3).match(/^\x00(\d+)\x00/);
-if (placeholder) {
-Object.assign(props, values[Number(placeholder[1])]);
-i += 3 + placeholder[0].length;
-continue;
-}
-}
-const attrMatch = src.slice(i).match(/^([a-zA-Z_@:][a-zA-Z0-9_:.-]*)/);
-if (!attrMatch) break;
-const attrName = attrMatch[1];
-i += attrMatch[0].length;
-while (i < src.length && /\s/.test(src[i])) i++;
-if (src[i] === '=') {
-i++;
-while (i < src.length && /\s/.test(src[i])) i++;
-const ph = src.slice(i).match(/^\x00(\d+)\x00/);
-if (ph) {
-props[attrName] = values[Number(ph[1])];
-i += ph[0].length;
-} else if (src[i] === '"' || src[i] === "'") {
-const q = src[i];
-i++;
-let val = '';
-while (i < src.length && src[i] !== q) {
-const tph = src.slice(i).match(/^\x00(\d+)\x00/);
-if (tph) {
-val += String(values[Number(tph[1])]);
-i += tph[0].length;
-} else {
-val += src[i];
-i++;
-}
-}
-i++; 
-props[attrName] = val;
-}
-} else {
-props[attrName] = true;
-}
-}
-const children = [];
-const closeTag = `</${tag}>`;
-while (i < src.length) {
-if (src.slice(i, i + closeTag.length) === closeTag) {
-i += closeTag.length;
-break;
-}
-if (src[i] === '<') {
-const child = parseElement(src, i, values);
-if (child) {
-children.push(child.node);
-i = child.end;
-continue;
-}
-}
-const text = parseText(src, i, values);
-if (text.text != null) children.push(text.text);
-i = text.end;
-}
-return {
-node: h(tag, Object.keys(props).length ? props : null, ...children),
-end: i,
-};
-}
-function parseText(src, start, values) {
-let i = start;
-let text = '';
-while (i < src.length && src[i] !== '<') {
-const ph = src.slice(i).match(/^\x00(\d+)\x00/);
-if (ph) {
-if (text.trim()) {
-return { text: text.trim(), end: i };
-}
-return { text: values[Number(ph[1])], end: i + ph[0].length };
-}
-text += src[i];
-i++;
-}
-return { text: text.trim() || null, end: i };
-}

package/dist/head.js

@@ -1,51 +0,0 @@
-const headState = {
-title: null,
-metas: new Map(),
-links: new Map(),
-};
-export function Head({ title, meta, link, children }) {
-if (typeof document === 'undefined') return null;
-if (title) {
-document.title = title;
-headState.title = title;
-}
-if (meta) {
-for (const attrs of (Array.isArray(meta) ? meta : [meta])) {
-const key = attrs.name || attrs.property || attrs.httpEquiv || JSON.stringify(attrs);
-setHeadTag('meta', key, attrs);
-}
-}
-if (link) {
-for (const attrs of (Array.isArray(link) ? link : [link])) {
-const key = attrs.rel + (attrs.href || '');
-setHeadTag('link', key, attrs);
-}
-}
-return children || null;
-}
-function setHeadTag(tag, key, attrs) {
-const existing = document.head.querySelector(`[data-what-head="${key}"]`);
-if (existing) {
-updateElement(existing, attrs);
-return;
-}
-const el = document.createElement(tag);
-el.setAttribute('data-what-head', key);
-for (const [k, v] of Object.entries(attrs)) {
-el.setAttribute(k, v);
-}
-document.head.appendChild(el);
-}
-function updateElement(el, attrs) {
-for (const [k, v] of Object.entries(attrs)) {
-if (el.getAttribute(k) !== v) {
-el.setAttribute(k, v);
-}
-}
-}
-export function clearHead() {
-const tags = document.head.querySelectorAll('[data-what-head]');
-for (const tag of tags) tag.remove();
-headState.metas.clear();
-headState.links.clear();
-}