@rettangoli/fe 0.0.13 → 1.0.0-rc1

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);
+};

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 };
+};