@rettangoli/fe 0.0.14 → 1.0.0-rc1

package/src/core/runtime/props.js

@@ -0,0 +1,79 @@
+export const toKebabCase = (value) => {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+};
+
+export const toCamelCase = (value) => {
+  return value.replace(/-([a-z0-9])/g, (_, chr) => chr.toUpperCase());
+};
+
+export const normalizeAttributeValue = (value) => {
+  if (value === null || value === undefined) {
+    return undefined;
+  }
+  return value === "" ? true : value;
+};
+
+export const readPropFallbackFromAttributes = (source, propName) => {
+  const directAttrValue = source.getAttribute(propName);
+  if (directAttrValue !== null) {
+    return normalizeAttributeValue(directAttrValue);
+  }
+  const kebabPropName = toKebabCase(propName);
+  if (kebabPropName !== propName) {
+    const kebabAttrValue = source.getAttribute(kebabPropName);
+    if (kebabAttrValue !== null) {
+      return normalizeAttributeValue(kebabAttrValue);
+    }
+  }
+  return undefined;
+};
+
+export const createPropsProxy = (source, allowedKeys) => {
+  const allowed = new Set(allowedKeys);
+  return new Proxy(
+    {},
+    {
+      get(_, prop) {
+        if (typeof prop === "string" && allowed.has(prop)) {
+          const propValue = source[prop];
+          if (propValue !== undefined) {
+            return propValue;
+          }
+          return readPropFallbackFromAttributes(source, prop);
+        }
+        return undefined;
+      },
+      set() {
+        throw new Error("Cannot assign to read-only proxy");
+      },
+      defineProperty() {
+        throw new Error("Cannot define properties on read-only proxy");
+      },
+      deleteProperty() {
+        throw new Error("Cannot delete properties from read-only proxy");
+      },
+      has(_, prop) {
+        return typeof prop === "string" && allowed.has(prop);
+      },
+      ownKeys() {
+        return [...allowed];
+      },
+      getOwnPropertyDescriptor(_, prop) {
+        if (typeof prop === "string" && allowed.has(prop)) {
+          return {
+            configurable: true,
+            enumerable: true,
+            get: () => {
+              const propValue = source[prop];
+              if (propValue !== undefined) {
+                return propValue;
+              }
+              return readPropFallbackFromAttributes(source, prop);
+            },
+          };
+        }
+        return undefined;
+      },
+    },
+  );
+};

package/src/core/runtime/refs.js

@@ -0,0 +1,70 @@
+import { createRefMatchers, resolveBestRefMatcher } from "../view/refs.js";
+
+export const createRuntimeRefMatchers = (refs) => createRefMatchers(refs);
+
+const getVNodeClassNames = (vNode) => {
+  const classNames = [];
+
+  const classObject = vNode?.data?.class;
+  if (classObject && typeof classObject === "object") {
+    Object.entries(classObject).forEach(([className, enabled]) => {
+      if (enabled) {
+        classNames.push(className);
+      }
+    });
+  }
+
+  const classAttr = vNode?.data?.attrs?.class;
+  if (typeof classAttr === "string") {
+    classAttr
+      .split(/\s+/)
+      .filter(Boolean)
+      .forEach((className) => classNames.push(className));
+  }
+
+  return [...new Set(classNames)];
+};
+
+export const matchesConfiguredRef = ({ id, classNames = [], refMatchers }) => {
+  if (refMatchers.length === 0) {
+    return false;
+  }
+
+  return Boolean(resolveBestRefMatcher({
+    elementIdForRefs: id,
+    classNames,
+    refMatchers,
+  }));
+};
+
+export const collectRefElements = ({ rootVNode, refs }) => {
+  const ids = {};
+  const refMatchers = createRuntimeRefMatchers(refs);
+
+  const findRefElements = (vNode) => {
+    if (!vNode || typeof vNode !== "object") {
+      return;
+    }
+
+    const id = vNode?.data?.attrs?.id;
+    const classNames = getVNodeClassNames(vNode);
+    const bestMatchRef = resolveBestRefMatcher({
+      elementIdForRefs: id,
+      classNames,
+      refMatchers,
+    });
+
+    if (vNode.elm && bestMatchRef) {
+      const key = id || bestMatchRef.refKey;
+      ids[key] = vNode.elm;
+    }
+
+    if (Array.isArray(vNode.children)) {
+      vNode.children.forEach(findRefElements);
+    }
+  };
+
+  findRefElements(rootVNode);
+
+  return ids;
+};

package/src/core/runtime/store.js

@@ -0,0 +1,42 @@
+import { produce } from "immer";
+
+import { isObjectPayload } from "./payload.js";
+
+export const bindStore = (store, props, constants) => {
+  const { createInitialState, ...selectorsAndActions } = store;
+  const selectors = {};
+  const actions = {};
+  let currentState = {};
+
+  if (createInitialState) {
+    currentState = createInitialState({ props, constants });
+  }
+
+  Object.entries(selectorsAndActions).forEach(([key, fn]) => {
+    if (key.startsWith("select")) {
+      selectors[key] = (...args) => {
+        return fn({ state: currentState, props, constants }, ...args);
+      };
+      return;
+    }
+
+    actions[key] = (payload = {}) => {
+      const normalizedPayload = payload === undefined ? {} : payload;
+      if (!isObjectPayload(normalizedPayload)) {
+        throw new Error(
+          `[Store] Action '${key}' expects payload to be an object.`,
+        );
+      }
+      currentState = produce(currentState, (draft) => {
+        return fn({ state: draft, props, constants }, normalizedPayload);
+      });
+      return currentState;
+    };
+  });
+
+  return {
+    getState: () => currentState,
+    ...actions,
+    ...selectors,
+  };
+};

package/src/core/schema/validateSchemaContract.js

@@ -0,0 +1,26 @@
+export const validateSchemaContract = ({ schema, methodExports = [] }) => {
+  if (!schema || typeof schema !== "object" || Array.isArray(schema)) {
+    throw new Error("RTGL-SCHEMA-001: componentName is required.");
+  }
+
+  if (typeof schema.componentName !== "string" || schema.componentName.trim() === "") {
+    throw new Error("RTGL-SCHEMA-001: componentName is required.");
+  }
+
+  if (Object.prototype.hasOwnProperty.call(schema, "attrsSchema")) {
+    throw new Error("RTGL-SCHEMA-002: attrsSchema is not supported.");
+  }
+
+  if (Array.isArray(schema.methods)) {
+    for (const method of schema.methods) {
+      if (!method || typeof method.name !== "string" || method.name.trim() === "") {
+        continue;
+      }
+      if (!methodExports.includes(method.name)) {
+        throw new Error(`RTGL-SCHEMA-003: method '${method.name}' missing in .methods.js exports.`);
+      }
+    }
+  }
+
+  return true;
+};

package/src/core/style/yamlToCss.js

@@ -0,0 +1,44 @@
+export const yamlToCss = (_elementName, styleObject) => {
+  if (!styleObject || typeof styleObject !== "object") {
+    return "";
+  }
+
+  let css = ``;
+  const convertPropertiesToCss = (properties) => {
+    return Object.entries(properties)
+      .map(([property, value]) => `  ${property}: ${value};`)
+      .join("\n");
+  };
+
+  const processSelector = (selector, rules) => {
+    if (typeof rules !== "object" || rules === null) {
+      return "";
+    }
+
+    if (selector.startsWith("@")) {
+      const nestedCss = Object.entries(rules)
+        .map(([nestedSelector, nestedRules]) => {
+          const nestedProperties = convertPropertiesToCss(nestedRules);
+          return `  ${nestedSelector} {\n${nestedProperties
+            .split("\n")
+            .map((line) => (line ? `  ${line}` : ""))
+            .join("\n")}\n  }`;
+        })
+        .join("\n");
+
+      return `${selector} {\n${nestedCss}\n}`;
+    }
+
+    const properties = convertPropertiesToCss(rules);
+    return `${selector} {\n${properties}\n}`;
+  };
+
+  Object.entries(styleObject).forEach(([selector, rules]) => {
+    const selectorCss = processSelector(selector, rules);
+    if (selectorCss) {
+      css += (css ? "\n\n" : "") + selectorCss;
+    }
+  });
+
+  return css;
+};

package/src/core/view/bindings.js

@@ -0,0 +1,189 @@
+const PROP_PREFIX = ":";
+
+const lodashGet = (obj, path) => {
+  if (!path) return obj;
+
+  const parts = [];
+  let current = "";
+  let inBrackets = false;
+  let quoteChar = null;
+
+  for (let i = 0; i < path.length; i++) {
+    const char = path[i];
+
+    if (!inBrackets && char === ".") {
+      if (current) {
+        parts.push(current);
+        current = "";
+      }
+    } else if (!inBrackets && char === "[") {
+      if (current) {
+        parts.push(current);
+        current = "";
+      }
+      inBrackets = true;
+    } else if (inBrackets && char === "]") {
+      if (current) {
+        if (
+          (current.startsWith('"') && current.endsWith('"'))
+          || (current.startsWith("'") && current.endsWith("'"))
+        ) {
+          parts.push(current.slice(1, -1));
+        } else {
+          const numValue = Number(current);
+          parts.push(Number.isNaN(numValue) ? current : numValue);
+        }
+        current = "";
+      }
+      inBrackets = false;
+      quoteChar = null;
+    } else if (inBrackets && (char === '"' || char === "'")) {
+      if (!quoteChar) {
+        quoteChar = char;
+      } else if (char === quoteChar) {
+        quoteChar = null;
+      }
+      current += char;
+    } else {
+      current += char;
+    }
+  }
+
+  if (current) {
+    parts.push(current);
+  }
+
+  return parts.reduce((acc, part) => acc && acc[part], obj);
+};
+
+export const toCamelCase = (value) => {
+  return value.replace(/-([a-z0-9])/g, (_, chr) => chr.toUpperCase());
+};
+
+export const parseNodeBindings = ({
+  attrsString = "",
+  viewData = {},
+  tagName,
+  isWebComponent,
+}) => {
+  const attrs = {};
+  const props = {};
+  const assertSupportedBooleanToggleAttr = (attrName) => {
+    if (
+      attrName === "role"
+      || attrName.startsWith("aria-")
+      || attrName.startsWith("data-")
+    ) {
+      throw new Error(
+        `[Parser] Invalid boolean attribute '?${attrName}'. Use normal binding for value-carrying attributes such as aria-*, data-*, and role.`,
+      );
+    }
+  };
+
+  const setComponentProp = (rawPropName, propValue, sourceLabel) => {
+    const normalizedPropName = toCamelCase(rawPropName);
+    if (!normalizedPropName) {
+      throw new Error(`[Parser] Invalid ${sourceLabel} prop name on '${tagName}'.`);
+    }
+    if (Object.prototype.hasOwnProperty.call(props, normalizedPropName)) {
+      throw new Error(
+        `[Parser] Duplicate prop binding '${normalizedPropName}' on '${tagName}'. Use only one of 'name=value' or ':name=value'.`,
+      );
+    }
+    props[normalizedPropName] = propValue;
+  };
+
+  if (!attrsString) {
+    return { attrs, props };
+  }
+
+  const attrRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|([^\s]+))/g;
+  let match;
+  const processedAttrs = new Set();
+
+  while ((match = attrRegex.exec(attrsString)) !== null) {
+    const rawBindingName = match[1];
+    const rawValue = match[2] || match[3] || match[4];
+    processedAttrs.add(rawBindingName);
+
+    if (rawBindingName.startsWith(".")) {
+      attrs[rawBindingName] = rawValue;
+      continue;
+    }
+
+    if (rawBindingName.startsWith(PROP_PREFIX)) {
+      const propName = rawBindingName.substring(1);
+      let propValue = rawValue;
+      if (match[4] !== undefined) {
+        const valuePathName = match[4];
+        const resolvedPathValue = lodashGet(viewData, valuePathName);
+        if (resolvedPathValue !== undefined) {
+          propValue = resolvedPathValue;
+        }
+      }
+      setComponentProp(propName, propValue, "property-form");
+      continue;
+    }
+
+    if (rawBindingName.startsWith("?")) {
+      const attrName = rawBindingName.substring(1);
+      const attrValue = rawValue;
+      assertSupportedBooleanToggleAttr(attrName);
+
+      let evalValue;
+      if (attrValue === "true") {
+        evalValue = true;
+      } else if (attrValue === "false") {
+        evalValue = false;
+      } else {
+        evalValue = lodashGet(viewData, attrValue);
+      }
+
+      if (evalValue) {
+        attrs[attrName] = "";
+      }
+      if (isWebComponent && attrName !== "id") {
+        setComponentProp(attrName, !!evalValue, "boolean attribute-form");
+      }
+      continue;
+    }
+
+    attrs[rawBindingName] = rawValue;
+    if (isWebComponent && rawBindingName !== "id") {
+      setComponentProp(rawBindingName, rawValue, "attribute-form");
+    }
+  }
+
+  let remainingAttrsString = attrsString;
+  const processedMatches = [];
+  let tempMatch;
+  const tempAttrRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|([^\s]+))/g;
+  while ((tempMatch = tempAttrRegex.exec(attrsString)) !== null) {
+    processedMatches.push(tempMatch[0]);
+  }
+
+  processedMatches.forEach((processedMatch) => {
+    remainingAttrsString = remainingAttrsString.replace(processedMatch, " ");
+  });
+
+  const booleanAttrRegex = /\b(\S+?)(?=\s|$)/g;
+  let boolMatch;
+  while ((boolMatch = booleanAttrRegex.exec(remainingAttrsString)) !== null) {
+    const attrName = boolMatch[1];
+    if (attrName.startsWith(".")) {
+      continue;
+    }
+    if (
+      !processedAttrs.has(attrName)
+      && !attrName.startsWith(PROP_PREFIX)
+      && !attrName.includes("=")
+    ) {
+      attrs[attrName] = "";
+      if (isWebComponent && attrName !== "id") {
+        setComponentProp(attrName, true, "boolean attribute-form");
+      }
+    }
+  }
+
+  return { attrs, props };
+};

package/src/core/view/refs.js

@@ -0,0 +1,234 @@
+export const REF_ID_KEY_REGEX = /^[a-z][a-zA-Z0-9]*\*?$/;
+export const REF_CLASS_KEY_REGEX = /^[a-zA-Z][a-zA-Z0-9_-]*\*?$/;
+export const REF_ID_REGEX = /^[a-z][a-zA-Z0-9]*$/;
+export const GLOBAL_REF_KEYS = new Set(["window", "document"]);
+
+export const createRefMatchers = (refs) => {
+  return Object.entries(refs || {}).map(([refKey, refConfig]) => {
+    if (GLOBAL_REF_KEYS.has(refKey)) {
+      return {
+        refKey,
+        refConfig,
+        targetType: "global",
+        isWildcard: false,
+        prefix: refKey,
+      };
+    }
+
+    let targetType = "id";
+    let rawKey = refKey;
+    if (refKey.startsWith(".")) {
+      targetType = "class";
+      rawKey = refKey.slice(1);
+    } else if (refKey.startsWith("#")) {
+      targetType = "id";
+      rawKey = refKey.slice(1);
+    }
+
+    const reservedBaseKey = rawKey.endsWith("*") ? rawKey.slice(0, -1) : rawKey;
+    if (GLOBAL_REF_KEYS.has(reservedBaseKey)) {
+      throw new Error(
+        `[Parser] Invalid ref key '${refKey}'. Reserved global keys must be exactly 'window' or 'document'.`,
+      );
+    }
+
+    if (targetType === "id" && !REF_ID_KEY_REGEX.test(rawKey)) {
+      throw new Error(
+        `[Parser] Invalid ref key '${refKey}'. Use camelCase IDs (optional '#', optional '*') or class refs with '.' prefix.`,
+      );
+    }
+    if (targetType === "class" && !REF_CLASS_KEY_REGEX.test(rawKey)) {
+      throw new Error(
+        `[Parser] Invalid ref key '${refKey}'. Class refs must start with '.' and use class-compatible names (optional '*').`,
+      );
+    }
+
+    const isWildcard = rawKey.endsWith("*");
+    const prefix = isWildcard ? rawKey.slice(0, -1) : rawKey;
+
+    return {
+      refKey,
+      refConfig,
+      targetType,
+      isWildcard,
+      prefix,
+    };
+  });
+};
+
+export const validateElementIdForRefs = (elementIdForRefs) => {
+  if (!REF_ID_REGEX.test(elementIdForRefs)) {
+    throw new Error(
+      `[Parser] Invalid element id '${elementIdForRefs}' for refs. Use camelCase ids only. Kebab-case ids are not supported.`,
+    );
+  }
+};
+
+const matchByPrefix = ({ value, prefix, isWildcard }) => {
+  if (typeof value !== "string" || value.length === 0) {
+    return false;
+  }
+  if (isWildcard) {
+    return value.startsWith(prefix);
+  }
+  return value === prefix;
+};
+
+export const resolveBestRefMatcher = ({
+  elementIdForRefs,
+  classNames = [],
+  refMatchers,
+}) => {
+  const candidates = [];
+  const normalizedClassNames = Array.isArray(classNames) ? classNames : [];
+
+  refMatchers.forEach((refMatcher) => {
+    if (refMatcher.targetType === "global") {
+      return;
+    }
+
+    if (refMatcher.targetType === "id") {
+      if (matchByPrefix({
+        value: elementIdForRefs,
+        prefix: refMatcher.prefix,
+        isWildcard: refMatcher.isWildcard,
+      })) {
+        candidates.push({
+          ...refMatcher,
+          matchedValue: elementIdForRefs,
+        });
+      }
+      return;
+    }
+
+    const matchingClassName = normalizedClassNames.find((className) => {
+      return matchByPrefix({
+        value: className,
+        prefix: refMatcher.prefix,
+        isWildcard: refMatcher.isWildcard,
+      });
+    });
+    if (matchingClassName) {
+      candidates.push({
+        ...refMatcher,
+        matchedValue: matchingClassName,
+      });
+    }
+  });
+
+  if (candidates.length === 0) {
+    return null;
+  }
+
+  candidates.sort((a, b) => {
+    const aTypeRank = a.targetType === "id" ? 2 : 1;
+    const bTypeRank = b.targetType === "id" ? 2 : 1;
+    if (aTypeRank !== bTypeRank) {
+      return bTypeRank - aTypeRank;
+    }
+    if (!a.isWildcard && b.isWildcard) return -1;
+    if (a.isWildcard && !b.isWildcard) return 1;
+    return b.prefix.length - a.prefix.length;
+  });
+
+  return candidates[0];
+};
+
+const assertBooleanEventOption = ({ optionName, optionValue, eventType, refKey }) => {
+  if (optionValue === undefined) {
+    return;
+  }
+  if (typeof optionValue !== "boolean") {
+    throw new Error(
+      `[Parser] Invalid '${optionName}' for event '${eventType}' on ref '${refKey}'. Expected boolean.`,
+    );
+  }
+};
+
+const assertNumberEventOption = ({ optionName, optionValue, eventType, refKey }) => {
+  if (optionValue === undefined) {
+    return;
+  }
+  if (
+    typeof optionValue !== "number"
+    || Number.isNaN(optionValue)
+    || !Number.isFinite(optionValue)
+    || optionValue < 0
+  ) {
+    throw new Error(
+      `[Parser] Invalid '${optionName}' for event '${eventType}' on ref '${refKey}'. Expected non-negative number.`,
+    );
+  }
+};
+
+export const validateEventConfig = ({ eventType, eventConfig, refKey }) => {
+  if (typeof eventConfig !== "object" || eventConfig === null) {
+    throw new Error(
+      `[Parser] Invalid event config for event '${eventType}' on ref '${refKey}'.`,
+    );
+  }
+
+  const hasDebounce = Object.prototype.hasOwnProperty.call(eventConfig, "debounce");
+  const hasThrottle = Object.prototype.hasOwnProperty.call(eventConfig, "throttle");
+
+  assertBooleanEventOption({
+    optionName: "preventDefault",
+    optionValue: eventConfig.preventDefault,
+    eventType,
+    refKey,
+  });
+  assertBooleanEventOption({
+    optionName: "stopPropagation",
+    optionValue: eventConfig.stopPropagation,
+    eventType,
+    refKey,
+  });
+  assertBooleanEventOption({
+    optionName: "stopImmediatePropagation",
+    optionValue: eventConfig.stopImmediatePropagation,
+    eventType,
+    refKey,
+  });
+  assertBooleanEventOption({
+    optionName: "targetOnly",
+    optionValue: eventConfig.targetOnly,
+    eventType,
+    refKey,
+  });
+  assertBooleanEventOption({
+    optionName: "once",
+    optionValue: eventConfig.once,
+    eventType,
+    refKey,
+  });
+  assertNumberEventOption({
+    optionName: "debounce",
+    optionValue: eventConfig.debounce,
+    eventType,
+    refKey,
+  });
+  assertNumberEventOption({
+    optionName: "throttle",
+    optionValue: eventConfig.throttle,
+    eventType,
+    refKey,
+  });
+
+  if (hasDebounce && hasThrottle) {
+    throw new Error(
+      `[Parser] Event '${eventType}' on ref '${refKey}' cannot define both 'debounce' and 'throttle'.`,
+    );
+  }
+
+  if (eventConfig.handler && eventConfig.action) {
+    throw new Error("Each listener can have handler or action but not both");
+  }
+  if (!eventConfig.handler && !eventConfig.action) {
+    throw new Error("Each listener must define either handler or action");
+  }
+
+  return {
+    hasDebounce,
+    hasThrottle,
+  };
+};