@rettangoli/fe 0.0.14 → 1.0.0-rc1

package/src/core/runtime/componentOrchestrator.js

@@ -0,0 +1,156 @@
+import { parseView } from "../../parser.js";
+import { createTransformedHandlers, runAfterMount, runBeforeMount } from "./lifecycle.js";
+import { attachGlobalRefListeners } from "./globalListeners.js";
+import { collectRefElements } from "./refs.js";
+import {
+  createComponentRuntimeDeps,
+  cleanupEventRateLimitState,
+  syncRefIds,
+} from "./componentRuntime.js";
+import { buildOnUpdateChanges } from "./lifecycle.js";
+import { normalizeAttributeValue, toCamelCase } from "./props.js";
+
+export const createRuntimeDepsForInstance = ({ instance }) => {
+  return createComponentRuntimeDeps({
+    baseDeps: instance.deps,
+    refs: instance.refIds,
+    dispatchEvent: instance.dispatchEvent.bind(instance),
+    store: instance.store,
+    render: instance.render.bind(instance),
+  });
+};
+
+export const runConnectedComponentLifecycle = ({
+  instance,
+  parseAndRenderFn,
+  renderFn,
+  createTransformedHandlersFn = createTransformedHandlers,
+  runBeforeMountFn = runBeforeMount,
+  attachGlobalRefListenersFn = attachGlobalRefListeners,
+  runAfterMountFn = runAfterMount,
+}) => {
+  const runtimeDeps = createRuntimeDepsForInstance({ instance });
+
+  instance.transformedHandlers = createTransformedHandlersFn({
+    handlers: instance.handlers,
+    deps: runtimeDeps,
+    parseAndRenderFn,
+  });
+
+  instance._unmountCallback = runBeforeMountFn({
+    handlers: instance.handlers,
+    deps: runtimeDeps,
+  });
+
+  instance._globalListenersCleanup = attachGlobalRefListenersFn({
+    refs: instance.refs,
+    handlers: instance.transformedHandlers,
+    parseAndRenderFn,
+  });
+
+  renderFn();
+
+  runAfterMountFn({
+    handlers: instance.handlers,
+    deps: runtimeDeps,
+  });
+
+  return runtimeDeps;
+};
+
+export const runDisconnectedComponentLifecycle = ({
+  instance,
+  clearTimerFn = clearTimeout,
+}) => {
+  if (instance._unmountCallback) {
+    instance._unmountCallback();
+  }
+  if (instance._globalListenersCleanup) {
+    instance._globalListenersCleanup();
+  }
+  return cleanupEventRateLimitState({
+    transformedHandlers: instance.transformedHandlers,
+    clearTimerFn,
+  });
+};
+
+export const runAttributeChangedComponentLifecycle = ({
+  instance,
+  attributeName,
+  oldValue,
+  newValue,
+  scheduleFrameFn,
+}) => {
+  if (oldValue === newValue || !instance.render) {
+    return;
+  }
+
+  if (instance.handlers?.handleOnUpdate) {
+    const runtimeDeps = createRuntimeDepsForInstance({ instance });
+    const changes = buildOnUpdateChanges({
+      attributeName,
+      oldValue,
+      newValue,
+      deps: runtimeDeps,
+      propsSchemaKeys: instance._propsSchemaKeys,
+      toCamelCase,
+      normalizeAttributeValue,
+    });
+    instance.handlers.handleOnUpdate(runtimeDeps, changes);
+    return;
+  }
+
+  scheduleFrameFn(() => {
+    instance.render();
+  });
+};
+
+export const runRenderComponentLifecycle = ({
+  instance,
+  createComponentUpdateHookFn,
+  parseViewFn = parseView,
+  collectRefElementsFn = collectRefElements,
+  onError = (error) => {
+    console.error("Error during patching:", error);
+  },
+}) => {
+  if (!instance.patch) {
+    console.error("Patch function is not defined!");
+    return null;
+  }
+
+  if (!instance.template) {
+    console.error("Template is not defined!");
+    return null;
+  }
+
+  try {
+    const vDom = parseViewFn({
+      h: instance.h,
+      template: instance.template,
+      viewData: instance.viewData,
+      refs: instance.refs,
+      handlers: instance.transformedHandlers,
+      createComponentUpdateHook: createComponentUpdateHookFn,
+    });
+
+    if (!instance._oldVNode) {
+      instance._oldVNode = instance.patch(instance.renderTarget, vDom);
+    } else {
+      instance._oldVNode = instance.patch(instance._oldVNode, vDom);
+    }
+
+    const ids = collectRefElementsFn({
+      rootVNode: instance._oldVNode,
+      refs: instance.refs,
+    });
+    syncRefIds({
+      refIds: instance.refIds,
+      nextRefIds: ids,
+    });
+    return instance._oldVNode;
+  } catch (error) {
+    onError(error);
+    return null;
+  }
+};

package/src/core/runtime/componentRuntime.js

@@ -0,0 +1,54 @@
+import { createRuntimeDeps } from "./lifecycle.js";
+
+export const buildObservedAttributes = ({ propsSchemaKeys = [], toKebabCase }) => {
+  const observedAttrs = new Set(["key"]);
+  propsSchemaKeys.forEach((propKey) => {
+    observedAttrs.add(propKey);
+    observedAttrs.add(toKebabCase(propKey));
+  });
+  return [...observedAttrs];
+};
+
+export const createComponentRuntimeDeps = ({
+  baseDeps,
+  refs,
+  dispatchEvent,
+  store,
+  render,
+}) => {
+  return createRuntimeDeps({
+    baseDeps,
+    refs,
+    dispatchEvent,
+    store,
+    render,
+  });
+};
+
+export const syncRefIds = ({ refIds, nextRefIds = {} }) => {
+  Object.keys(refIds).forEach((key) => {
+    delete refIds[key];
+  });
+  Object.assign(refIds, nextRefIds);
+  return refIds;
+};
+
+export const cleanupEventRateLimitState = ({
+  transformedHandlers,
+  clearTimerFn = clearTimeout,
+}) => {
+  const eventRateLimitState = transformedHandlers?.__eventRateLimitState;
+  if (!(eventRateLimitState instanceof Map)) {
+    return 0;
+  }
+
+  let clearedTimers = 0;
+  eventRateLimitState.forEach((state) => {
+    if (state && state.debounceTimer) {
+      clearTimerFn(state.debounceTimer);
+      clearedTimers += 1;
+    }
+  });
+  eventRateLimitState.clear();
+  return clearedTimers;
+};

package/src/core/runtime/constants.js

@@ -0,0 +1,27 @@
+import { isObjectPayload } from "./payload.js";
+
+export const deepFreeze = (value) => {
+  if (!isObjectPayload(value) || Object.isFrozen(value)) {
+    return value;
+  }
+
+  Object.values(value).forEach((nestedValue) => {
+    deepFreeze(nestedValue);
+  });
+
+  return Object.freeze(value);
+};
+
+export const resolveConstants = ({ setupConstants, fileConstants }) => {
+  const normalizedSetupConstants = isObjectPayload(setupConstants)
+    ? setupConstants
+    : {};
+  const normalizedFileConstants = isObjectPayload(fileConstants)
+    ? fileConstants
+    : {};
+
+  return deepFreeze({
+    ...normalizedSetupConstants,
+    ...normalizedFileConstants,
+  });
+};

package/src/core/runtime/events.js

@@ -0,0 +1,191 @@
+import { validateEventConfig } from "../view/refs.js";
+
+export const getEventRateLimitState = (handlers) => {
+  if (!handlers.__eventRateLimitState) {
+    Object.defineProperty(handlers, "__eventRateLimitState", {
+      value: new Map(),
+      enumerable: false,
+      configurable: true,
+    });
+  }
+  return handlers.__eventRateLimitState;
+};
+
+export const createEventDispatchCallback = ({
+  eventConfig,
+  handlers,
+  onMissingHandler,
+  parseAndRenderFn,
+}) => {
+  const getPayload = (event) => {
+    const payloadTemplate = (
+      eventConfig.payload
+      && typeof eventConfig.payload === "object"
+      && !Array.isArray(eventConfig.payload)
+    )
+      ? eventConfig.payload
+      : {};
+    if (typeof parseAndRenderFn !== "function") {
+      return payloadTemplate;
+    }
+    return parseAndRenderFn(payloadTemplate, {
+      _event: event,
+    });
+  };
+
+  if (eventConfig.action) {
+    if (typeof handlers.handleCallStoreAction !== "function") {
+      throw new Error(
+        `[Runtime] Action listener '${eventConfig.action}' requires handlers.handleCallStoreAction.`,
+      );
+    }
+    return (event) => {
+      const payload = getPayload(event);
+      handlers.handleCallStoreAction({
+        ...payload,
+        _event: event,
+        _action: eventConfig.action,
+      });
+    };
+  }
+
+  if (eventConfig.handler && handlers[eventConfig.handler]) {
+    return (event) => {
+      const payload = getPayload(event);
+      handlers[eventConfig.handler]({
+        ...payload,
+        _event: event,
+      });
+    };
+  }
+
+  if (eventConfig.handler) {
+    onMissingHandler?.(eventConfig.handler);
+  }
+
+  return null;
+};
+
+export const createManagedEventListener = ({
+  eventConfig,
+  callback,
+  hasDebounce,
+  hasThrottle,
+  stateKey,
+  eventRateLimitState,
+  fallbackCurrentTarget = null,
+  nowFn = Date.now,
+  setTimeoutFn = setTimeout,
+  clearTimeoutFn = clearTimeout,
+}) => {
+  return (event) => {
+    const state = eventRateLimitState.get(stateKey) || {};
+    const currentTarget = event.currentTarget || fallbackCurrentTarget;
+
+    if (eventConfig.once) {
+      if (currentTarget) {
+        if (!state.onceTargets) {
+          state.onceTargets = new WeakSet();
+        }
+        if (state.onceTargets.has(currentTarget)) {
+          eventRateLimitState.set(stateKey, state);
+          return;
+        }
+        state.onceTargets.add(currentTarget);
+      } else if (state.onceTriggered) {
+        eventRateLimitState.set(stateKey, state);
+        return;
+      } else {
+        state.onceTriggered = true;
+      }
+    }
+
+    if (eventConfig.targetOnly && event.target !== event.currentTarget) {
+      eventRateLimitState.set(stateKey, state);
+      return;
+    }
+
+    if (eventConfig.preventDefault) {
+      event.preventDefault();
+    }
+    if (eventConfig.stopImmediatePropagation) {
+      event.stopImmediatePropagation();
+    } else if (eventConfig.stopPropagation) {
+      event.stopPropagation();
+    }
+
+    if (hasDebounce) {
+      if (state.debounceTimer) {
+        clearTimeoutFn(state.debounceTimer);
+      }
+      state.debounceTimer = setTimeoutFn(() => {
+        callback(event);
+        state.debounceTimer = null;
+      }, eventConfig.debounce);
+      eventRateLimitState.set(stateKey, state);
+      return;
+    }
+
+    if (hasThrottle) {
+      if (!Object.prototype.hasOwnProperty.call(state, "lastThrottleAt")) {
+        state.lastThrottleAt = undefined;
+      }
+      const now = nowFn();
+      if (state.lastThrottleAt === undefined || now - state.lastThrottleAt >= eventConfig.throttle) {
+        state.lastThrottleAt = now;
+        eventRateLimitState.set(stateKey, state);
+        callback(event);
+        return;
+      }
+      eventRateLimitState.set(stateKey, state);
+      return;
+    }
+
+    eventRateLimitState.set(stateKey, state);
+    callback(event);
+  };
+};
+
+export const createConfiguredEventListener = ({
+  eventType,
+  eventConfig,
+  refKey,
+  handlers,
+  eventRateLimitState,
+  stateKey,
+  fallbackCurrentTarget = null,
+  parseAndRenderFn,
+  onMissingHandler,
+  nowFn = Date.now,
+  setTimeoutFn = setTimeout,
+  clearTimeoutFn = clearTimeout,
+}) => {
+  const { hasDebounce, hasThrottle } = validateEventConfig({
+    eventType,
+    eventConfig,
+    refKey,
+  });
+
+  const callback = createEventDispatchCallback({
+    eventConfig,
+    handlers,
+    onMissingHandler,
+    parseAndRenderFn,
+  });
+  if (!callback) {
+    return null;
+  }
+
+  return createManagedEventListener({
+    eventConfig,
+    callback,
+    hasDebounce,
+    hasThrottle,
+    stateKey,
+    eventRateLimitState,
+    fallbackCurrentTarget,
+    nowFn,
+    setTimeoutFn,
+    clearTimeoutFn,
+  });
+};

package/src/core/runtime/globalListeners.js

@@ -0,0 +1,87 @@
+import {
+  createConfiguredEventListener,
+  getEventRateLimitState,
+} from "./events.js";
+
+const resolveGlobalTarget = ({ refKey, targets }) => {
+  if (refKey === "window") {
+    return targets.window;
+  }
+  if (refKey === "document") {
+    return targets.document;
+  }
+  return null;
+};
+
+export const attachGlobalRefListeners = ({
+  refs = {},
+  handlers = {},
+  targets = {
+    window: globalThis.window,
+    document: globalThis.document,
+  },
+  parseAndRenderFn,
+  timing = {
+    nowFn: Date.now,
+    setTimeoutFn: setTimeout,
+    clearTimeoutFn: clearTimeout,
+  },
+  warnFn = console.warn,
+}) => {
+  const cleanupCallbacks = [];
+  const stateKeys = new Set();
+  const eventRateLimitState = getEventRateLimitState(handlers);
+
+  Object.entries(refs).forEach(([refKey, refConfig]) => {
+    if (refKey !== "window" && refKey !== "document") {
+      return;
+    }
+
+    const target = resolveGlobalTarget({ refKey, targets });
+    if (!target || !refConfig?.eventListeners) {
+      return;
+    }
+
+    Object.entries(refConfig.eventListeners).forEach(([eventType, eventConfig]) => {
+      const stateKey = `${refKey}:${eventType}`;
+      stateKeys.add(stateKey);
+      const listener = createConfiguredEventListener({
+        eventType,
+        eventConfig,
+        refKey,
+        handlers,
+        eventRateLimitState,
+        stateKey,
+        fallbackCurrentTarget: target,
+        parseAndRenderFn,
+        nowFn: timing.nowFn,
+        setTimeoutFn: timing.setTimeoutFn,
+        clearTimeoutFn: timing.clearTimeoutFn,
+        onMissingHandler: (missingHandlerName) => {
+          warnFn(
+            `[Runtime] Handler '${missingHandlerName}' for global ref '${refKey}' is referenced but not found in available handlers.`,
+          );
+        },
+      });
+      if (!listener) {
+        return;
+      }
+
+      target.addEventListener(eventType, listener);
+      cleanupCallbacks.push(() => {
+        target.removeEventListener(eventType, listener);
+      });
+    });
+  });
+
+  return () => {
+    cleanupCallbacks.forEach((cleanup) => cleanup());
+    stateKeys.forEach((stateKey) => {
+      const state = eventRateLimitState.get(stateKey);
+      if (state && state.debounceTimer) {
+        timing.clearTimeoutFn(state.debounceTimer);
+      }
+      eventRateLimitState.delete(stateKey);
+    });
+  };
+};

package/src/core/runtime/lifecycle.js

@@ -0,0 +1,124 @@
+export const createRuntimeDeps = ({
+  baseDeps,
+  refs,
+  dispatchEvent,
+  store,
+  render,
+}) => {
+  return {
+    ...baseDeps,
+    refs,
+    dispatchEvent,
+    store,
+    render,
+  };
+};
+
+export const createStoreActionDispatcher = ({
+  store,
+  render,
+  parseAndRenderFn,
+}) => {
+  return (payload) => {
+    const { _event, _action } = payload;
+    const context = parseAndRenderFn(payload, {
+      _event,
+    });
+
+    if (!store[_action]) {
+      throw new Error(`[Store] Action 'store.${_action}' is not defined.`);
+    }
+
+    store[_action](context);
+    render();
+  };
+};
+
+export const createTransformedHandlers = ({
+  handlers,
+  deps,
+  parseAndRenderFn,
+}) => {
+  const transformedHandlers = {
+    handleCallStoreAction: createStoreActionDispatcher({
+      store: deps.store,
+      render: deps.render,
+      parseAndRenderFn,
+    }),
+  };
+
+  Object.keys(handlers || {}).forEach((key) => {
+    transformedHandlers[key] = (payload) => {
+      return handlers[key](deps, payload);
+    };
+  });
+
+  return transformedHandlers;
+};
+
+export const ensureSyncBeforeMountResult = (beforeMountResult) => {
+  if (beforeMountResult && typeof beforeMountResult.then === "function") {
+    throw new Error("handleBeforeMount must be synchronous and cannot return a Promise.");
+  }
+  return beforeMountResult;
+};
+
+export const runBeforeMount = ({ handlers, deps }) => {
+  if (!handlers?.handleBeforeMount) {
+    return undefined;
+  }
+  const beforeMountResult = handlers.handleBeforeMount(deps);
+  return ensureSyncBeforeMountResult(beforeMountResult);
+};
+
+export const runAfterMount = ({ handlers, deps }) => {
+  if (!handlers?.handleAfterMount) {
+    return;
+  }
+  handlers.handleAfterMount(deps);
+};
+
+export const buildOnUpdateChanges = ({
+  attributeName,
+  oldValue,
+  newValue,
+  deps,
+  propsSchemaKeys,
+  toCamelCase,
+  normalizeAttributeValue,
+}) => {
+  const changedProp = toCamelCase(attributeName);
+  const newProps = {};
+
+  propsSchemaKeys.forEach((propKey) => {
+    const propValue = deps.props[propKey];
+    if (propValue !== undefined) {
+      newProps[propKey] = propValue;
+    }
+  });
+
+  const oldProps = {
+    ...newProps,
+  };
+
+  const normalizedOldValue = normalizeAttributeValue(oldValue);
+  const normalizedNewValue = normalizeAttributeValue(newValue);
+
+  if (normalizedOldValue === undefined) {
+    delete oldProps[changedProp];
+  } else {
+    oldProps[changedProp] = normalizedOldValue;
+  }
+
+  if (normalizedNewValue === undefined) {
+    delete newProps[changedProp];
+  } else {
+    newProps[changedProp] = normalizedNewValue;
+  }
+
+  return {
+    changedProp,
+    oldProps,
+    newProps,
+  };
+};

package/src/core/runtime/methods.js

@@ -0,0 +1,40 @@
+import { isObjectPayload } from "./payload.js";
+
+export const bindMethods = (element, methods) => {
+  if (!methods || typeof methods !== "object") {
+    return;
+  }
+
+  Object.entries(methods).forEach(([methodName, methodFn]) => {
+    if (methodName === "default") {
+      throw new Error(
+        "[Methods] Invalid method name 'default'. Use named exports in .methods.js; default export is not supported.",
+      );
+    }
+
+    if (typeof methodFn !== "function") {
+      return;
+    }
+
+    if (methodName in element) {
+      throw new Error(
+        `[Methods] Cannot define method '${methodName}' because it already exists on the component instance.`,
+      );
+    }
+
+    Object.defineProperty(element, methodName, {
+      configurable: true,
+      enumerable: false,
+      writable: false,
+      value: (payload = {}) => {
+        const normalizedPayload = payload === undefined ? {} : payload;
+        if (!isObjectPayload(normalizedPayload)) {
+          throw new Error(
+            `[Methods] Method '${methodName}' expects payload to be an object.`,
+          );
+        }
+        return methodFn.call(element, normalizedPayload);
+      },
+    });
+  });
+};

package/src/core/runtime/payload.js

@@ -0,0 +1,3 @@
+export const isObjectPayload = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+};