@ecopages/radiant 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,3 +1,720 @@
-import"./decorators.js";import"./mixins/index.js";import{a as G}from"./mixins/with-kita.js";import"./core/index.js";import{b as u}from"./core/radiant-element.js";import{c as b}from"./decorators/event.js";import{d}from"./decorators/on-updated.js";import{e as c}from"./decorators/on-event.js";import{f as x}from"./decorators/custom-element.js";import{g as s}from"./decorators/reactive-field.js";import{h as g}from"./decorators/query.js";import{i as q}from"./decorators/reactive-prop.js";import{j as B,k as C}from"./context/context-provider.js";import"./context/index.js";import{l as v}from"./context/create-context.js";import{m as w,n as y,o as z,p as A}from"./context/events.js";import"./context/types.js";import{q as F}from"./context/decorators/context-selector.js";import{r as E}from"./context/decorators/consume-context.js";import{s as D}from"./context/decorators/provide-context.js";import"./utils/index.js";import{t as h,u as i,v as j,w as k,x as l,y as n}from"./utils/attribute-utils.js";import"./tools/index.js";import{z as H}from"./tools/stringify-attribute.js";import{A as a}from"./tools/event-emitter.js";export{l as writeAttributeValue,H as stringifyAttribute,k as readAttributeValue,q as reactiveProp,s as reactiveField,g as query,D as provideContext,i as parseAttributeTypeDefault,h as parseAttributeTypeConstant,d as onUpdated,c as onEvent,n as isValueOfType,b as event,j as defaultValueForType,x as customElement,v as createContext,F as contextSelector,E as consumeContext,G as WithKita,u as RadiantElement,B as HYDRATE_ATTRIBUTE,a as EventEmitter,A as ContextSubscriptionRequestEvent,y as ContextRequestEvent,C as ContextProvider,z as ContextOnMountEvent,w as ContextEventsTypes};
+// src/decorators/custom-element.ts
+function customElement(name) {
+  return (target) => {
+    if (!globalThis.window)
+      return;
+    if (!window.customElements.get(name)) {
+      window.customElements.define(name, target);
+    }
+  };
+}
 
-//# debugId=A33923DA0AEA96AF64756E2164756E21
+// src/tools/event-emitter.ts
+class EventEmitter {
+  host;
+  eventConfig;
+  constructor(host, eventConfig) {
+    this.host = host;
+    this.eventConfig = eventConfig;
+  }
+  emit(detail) {
+    const event = new CustomEvent(this.eventConfig.name, {
+      detail,
+      bubbles: this.eventConfig.bubbles,
+      cancelable: this.eventConfig.cancelable,
+      composed: this.eventConfig.composed
+    });
+    this.host.dispatchEvent(event);
+  }
+}
+
+// src/decorators/event.ts
+function event(eventConfig) {
+  return (target, propertyKey) => {
+    if (!propertyKey) {
+      throw new Error("The propertyKey is missing for the event decorator.");
+    }
+    if (!eventConfig || !eventConfig.name) {
+      throw new Error("Invalid eventConfig provided.");
+    }
+    const uniqueKey = Symbol(eventConfig.name);
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        const emittersMap = eventEmitters.get(this) || new Map;
+        if (!emittersMap.has(uniqueKey)) {
+          emittersMap.set(uniqueKey, new EventEmitter(this, eventConfig));
+          eventEmitters.set(this, emittersMap);
+        }
+        return emittersMap.get(uniqueKey);
+      }
+    });
+  };
+}
+var eventEmitters = new WeakMap;
+
+// src/decorators/on-event.ts
+function onEvent(eventConfig) {
+  return (proto, _, descriptor) => {
+    const originalConnectedCallback = proto.connectedCallback;
+    const originalDisconnectedCallback = proto.disconnectedCallback;
+    if ("window" in eventConfig) {
+      proto.connectedCallback = function() {
+        window.addEventListener(eventConfig.type, descriptor.value.bind(this), eventConfig.options);
+        originalConnectedCallback.call(this);
+      };
+      proto.disconnectedCallback = function() {
+        window.removeEventListener(eventConfig.type, descriptor.value.bind(this), eventConfig.options);
+        originalDisconnectedCallback.call(this);
+      };
+      return descriptor;
+    }
+    if ("document" in eventConfig) {
+      proto.connectedCallback = function() {
+        document.addEventListener(eventConfig.type, descriptor.value.bind(this), eventConfig.options);
+        originalConnectedCallback.call(this);
+      };
+      proto.disconnectedCallback = function() {
+        document.removeEventListener(eventConfig.type, descriptor.value.bind(this), eventConfig.options);
+        originalDisconnectedCallback.call(this);
+      };
+      return descriptor;
+    }
+    const selector = "selector" in eventConfig ? eventConfig.selector : `[data-ref="${eventConfig.ref}"]`;
+    const originalMethod = descriptor.value;
+    const subscriptionId = `${eventConfig.type}-${selector}`;
+    proto.connectedCallback = function() {
+      this.subscribeEvent({
+        id: subscriptionId,
+        selector,
+        type: eventConfig.type,
+        listener: originalMethod.bind(this),
+        options: eventConfig?.options ?? undefined
+      });
+      originalConnectedCallback.call(this);
+    };
+    return descriptor;
+  };
+}
+
+// src/decorators/on-updated.ts
+function onUpdated(keyOrKeys) {
+  return (proto, methodName) => {
+    if (!("updatesRegistry" in proto)) {
+      Object.defineProperty(proto, "updatesRegistry", {
+        value: new Map,
+        configurable: true
+      });
+    }
+    const updatesRegistry = proto.updatesRegistry;
+    if (Array.isArray(keyOrKeys)) {
+      for (const key of keyOrKeys) {
+        if (!updatesRegistry.has(key)) {
+          updatesRegistry.set(key, new Set);
+        }
+        updatesRegistry.get(key)?.add(methodName);
+      }
+    } else if (typeof keyOrKeys === "string") {
+      if (!updatesRegistry.has(keyOrKeys)) {
+        updatesRegistry.set(keyOrKeys, new Set);
+      }
+      updatesRegistry.get(keyOrKeys)?.add(methodName);
+    }
+  };
+}
+
+// src/decorators/query.ts
+function query({
+  cache: shouldBeCached = true,
+  ...options
+}) {
+  const cache = new WeakMap;
+  return (proto, propertyKey) => {
+    const doQuery = function() {
+      if (shouldBeCached) {
+        const cachedResult = cache.get(this);
+        if (cachedResult !== undefined) {
+          return cachedResult;
+        }
+      }
+      const selector = "selector" in options ? options.selector : `[data-ref="${options.ref}"]`;
+      const queryResult = options.all ? this.querySelectorAll(selector) : this.querySelector(selector);
+      if (shouldBeCached) {
+        cache.set(this, queryResult);
+      }
+      return queryResult;
+    };
+    const originalConnectedCallback = proto.connectedCallback;
+    proto.connectedCallback = function() {
+      Object.defineProperty(this, propertyKey, {
+        get: doQuery,
+        enumerable: true,
+        configurable: true
+      });
+      originalConnectedCallback.call(this);
+    };
+  };
+}
+
+// src/utils/attribute-utils.ts
+function parseAttributeTypeConstant(constant) {
+  switch (constant) {
+    case Array:
+      return "array";
+    case Boolean:
+      return "boolean";
+    case Number:
+      return "number";
+    case Object:
+      return "object";
+    case String:
+      return "string";
+  }
+}
+function parseAttributeTypeDefault(defaultValue) {
+  switch (typeof defaultValue) {
+    case "boolean":
+      return "boolean";
+    case "number":
+      return "number";
+    case "string":
+      return "string";
+  }
+  if (Array.isArray(defaultValue))
+    return "array";
+  if (Object.prototype.toString.call(defaultValue) === "[object Object]")
+    return "object";
+}
+function defaultValueForType(type) {
+  switch (type) {
+    case Number:
+      return 0;
+    case String:
+      return "";
+    case Boolean:
+      return false;
+    default:
+      return null;
+  }
+}
+function parseJSON(value) {
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    throw new TypeError("Invalid JSON string");
+  }
+}
+function writeJSON(value) {
+  return JSON.stringify(value);
+}
+function writeString(value) {
+  return `${value}`;
+}
+function readAttributeValue(value, type) {
+  const readerType = parseAttributeTypeConstant(type);
+  if (!readerType)
+    throw new TypeError(`[radiant-element] Unknown type "${type}"`);
+  return readers[readerType](value);
+}
+function writeAttributeValue(value, type) {
+  const writerType = parseAttributeTypeConstant(type);
+  if (!writerType)
+    throw new TypeError(`[radiant-element] Unknown type "${type}"`);
+  return (writers[writerType] || writers.default)(value);
+}
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
+function isNumber(value) {
+  return typeof value === "number";
+}
+function isString(value) {
+  return typeof value === "string";
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function isObject(value) {
+  return typeof value === "object" && !Array.isArray(value) && value !== null;
+}
+function isValueOfType(type, defaultValue) {
+  switch (type) {
+    case Boolean:
+      return isBoolean(defaultValue);
+    case Number:
+      return isNumber(defaultValue);
+    case String:
+      return isString(defaultValue);
+    case Array:
+      return isArray(defaultValue);
+    case Object:
+      return isObject(defaultValue);
+    default:
+      return false;
+  }
+}
+var readers = {
+  array(value) {
+    const array = parseJSON(value);
+    if (!Array.isArray(array)) {
+      throw new TypeError(`Expected an array but got a value of type "${typeof array}"`);
+    }
+    return array;
+  },
+  boolean(value) {
+    return !(value === "0" || String(value).toLowerCase() === "false");
+  },
+  number(value) {
+    const number = Number(value.replace(/_/g, ""));
+    return number;
+  },
+  object(value) {
+    const object = JSON.parse(value);
+    if (object === null || typeof object !== "object" || Array.isArray(object)) {
+      throw new TypeError(`expected value of type "object" but instead got value "${value}" of type "${parseAttributeTypeDefault(object)}"`);
+    }
+    return object;
+  },
+  string(value) {
+    return value;
+  }
+};
+var writers = {
+  default: writeString,
+  array: writeJSON,
+  object: writeJSON
+};
+
+// src/decorators/reactive-prop.ts
+function reactiveProp({ type, attribute, reflect, defaultValue }) {
+  if (defaultValue !== undefined && !isValueOfType(type, defaultValue)) {
+    throw new Error(`defaultValue does not match the expected type for ${type.name}`);
+  }
+  return (target, propertyName) => {
+    const originalValues = new WeakMap;
+    const attributeKey = attribute ?? propertyName;
+    if (propertyName in target) {
+      throw new Error(`Property "${propertyName}" already exists on ${target.constructor.name}`);
+    }
+    const propertyMapping = {
+      type,
+      propertyName,
+      attributeKey,
+      converter: {
+        fromAttribute: (value) => readAttributeValue(value, type),
+        toAttribute: (value) => writeAttributeValue(value, type)
+      }
+    };
+    addPropertyToMappings(target, propertyMapping);
+    Object.defineProperty(target, propertyName, {
+      get: function() {
+        if (!originalValues.has(this)) {
+          const initialValue = getInitialValue(this, type, attributeKey, defaultValue);
+          originalValues.set(this, initialValue);
+        }
+        return originalValues.get(this);
+      },
+      set: function(newValue) {
+        const oldValue = originalValues.get(this);
+        if (oldValue === newValue)
+          return;
+        originalValues.set(this, newValue);
+        if (reflect) {
+          const attributeValue = propertyMapping.converter.toAttribute(newValue);
+          this.setAttribute(attributeKey, attributeValue);
+        }
+        this.updated(propertyName, oldValue, newValue);
+      },
+      enumerable: true,
+      configurable: true
+    });
+    const originalConnectedCallback = target.connectedCallback;
+    target.connectedCallback = function() {
+      originalConnectedCallback.call(this);
+      this.updated(propertyName, null, defaultValue);
+    };
+    addObservedAttribute(target, attributeKey);
+  };
+}
+function addObservedAttribute(target, attribute) {
+  const ctor = target.constructor;
+  const existingObservedAttributes = ctor.observedAttributes || [];
+  if (!existingObservedAttributes.includes(attribute)) {
+    const newObservedAttributes = [...existingObservedAttributes, attribute];
+    Object.defineProperty(ctor, "observedAttributes", {
+      get() {
+        return newObservedAttributes;
+      },
+      configurable: true
+    });
+  }
+}
+var getInitialValue = (target, type, attributeKey, defaultValue) => {
+  if (type === Boolean) {
+    const hasAttribute = target.hasAttribute(attributeKey);
+    return hasAttribute || defaultValue;
+  }
+  const attributeValue = target.getAttribute(attributeKey);
+  return attributeValue !== null ? readAttributeValue(attributeValue, type) : defaultValue || defaultValueForType(type);
+};
+var addPropertyToMappings = (target, propertyMapping) => {
+  if (!("propertyConfigMap" in target)) {
+    Object.defineProperty(target, "propertyConfigMap", {
+      value: new Map,
+      configurable: true
+    });
+  }
+  target.propertyConfigMap.set(propertyMapping.propertyName, propertyMapping);
+};
+
+// src/decorators/reactive-field.ts
+function reactiveField(proto, propertyKey) {
+  const originalValues = new WeakMap;
+  const isDefined = new WeakSet;
+  Object.defineProperty(proto, propertyKey, {
+    get: function() {
+      return originalValues.get(this);
+    },
+    set: function(newValue) {
+      if (isDefined.has(this)) {
+        const oldValue = originalValues.get(this);
+        if (oldValue !== newValue) {
+          originalValues.set(this, newValue);
+          this.updated(propertyKey, oldValue, newValue);
+        }
+      } else {
+        originalValues.set(this, newValue);
+        isDefined.add(this);
+      }
+    }
+  });
+}
+// src/core/radiant-element.ts
+class RadiantElement extends HTMLElement {
+  eventSubscriptions = new Map;
+  elementReady = false;
+  connectedCallback() {
+    this.elementReady = true;
+  }
+  connectedContextCallback(_contextName) {
+  }
+  disconnectedCallback() {
+    this.removeAllSubscribedEvents();
+  }
+  updated(changedProperty, oldValue, value) {
+    if (!this.elementReady || !this.updatesRegistry || oldValue === value)
+      return;
+    const updates = this.updatesRegistry.get(changedProperty);
+    if (updates) {
+      for (const update of updates) {
+        this[update]();
+      }
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.elementReady)
+      return;
+    if (name in this) {
+      const config = this.propertyConfigMap.get(name);
+      const transformedValue = newValue ? config?.converter.fromAttribute(newValue) : newValue;
+      const transformedOldValue = oldValue ? config?.converter.fromAttribute(oldValue) : oldValue;
+      this[name] = transformedValue;
+      this.updated(name, transformedOldValue, transformedValue);
+    }
+  }
+  renderTemplate({
+    target = this,
+    template,
+    insert = "replace"
+  }) {
+    switch (insert) {
+      case "replace":
+        target.innerHTML = template;
+        break;
+      case "beforeend":
+        target.insertAdjacentHTML("beforeend", template);
+        break;
+      case "afterbegin":
+        target.insertAdjacentHTML("afterbegin", template);
+        break;
+    }
+  }
+  subscribeEvents(events) {
+    for (const event3 of events) {
+      this.subscribeEvent(event3);
+    }
+  }
+  subscribeEvent(eventConfig) {
+    const delegatedListener = (delegatedEvent) => {
+      if (delegatedEvent.target && delegatedEvent.target.matches(eventConfig.selector)) {
+        eventConfig.listener.call(this, delegatedEvent);
+      }
+    };
+    this.addEventListener(eventConfig.type, delegatedListener, eventConfig.options);
+    this.eventSubscriptions.set(eventConfig.id, { ...eventConfig, listener: delegatedListener });
+  }
+  unsubscribeEvent(id) {
+    const eventSubscription = this.eventSubscriptions.get(id);
+    if (eventSubscription) {
+      this.removeEventListener(eventSubscription.type, eventSubscription.listener, eventSubscription.options);
+      this.eventSubscriptions.delete(id);
+    }
+  }
+  removeAllSubscribedEvents() {
+    for (const eventSubscription of this.eventSubscriptions.values()) {
+      this.removeEventListener(eventSubscription.type, eventSubscription.listener, eventSubscription.options);
+    }
+    this.eventSubscriptions.clear();
+  }
+}
+// src/context/create-context.ts
+var createContext = (key) => key;
+
+// src/context/events.ts
+var ContextEventsTypes;
+((ContextEventsTypes2) => {
+  ContextEventsTypes2["SUBSCRIPTION_REQUEST"] = "context--subscription-request";
+  ContextEventsTypes2["CONTEXT_REQUEST"] = "context-request";
+  ContextEventsTypes2["ON_MOUNT"] = "context--on-mount";
+})(ContextEventsTypes ||= {});
+
+class ContextRequestEvent extends Event {
+  context;
+  callback;
+  subscribe;
+  constructor(context, callback, subscribe) {
+    super("context-request" /* CONTEXT_REQUEST */, { bubbles: true, composed: true });
+    this.context = context;
+    this.callback = callback;
+    this.subscribe = subscribe;
+  }
+}
+
+class ContextOnMountEvent extends CustomEvent {
+  constructor(context) {
+    super("context--on-mount" /* ON_MOUNT */, {
+      detail: { context },
+      bubbles: true,
+      composed: true
+    });
+  }
+}
+
+class ContextSubscriptionRequestEvent extends Event {
+  context;
+  callback;
+  select;
+  subscribe;
+  constructor(context, callback, select, subscribe) {
+    super("context--subscription-request" /* SUBSCRIPTION_REQUEST */, {
+      bubbles: true,
+      composed: true
+    });
+    this.context = context;
+    this.callback = callback;
+    this.select = select;
+    this.subscribe = subscribe;
+  }
+}
+
+// src/context/context-provider.ts
+var HYDRATE_ATTRIBUTE = "hydrate-context";
+
+class ContextProvider {
+  host;
+  context;
+  value;
+  subscriptions = [];
+  constructor(host, options) {
+    this.host = host;
+    this.context = options.context;
+    let contextValue = options.initialValue;
+    if (options.hydrate) {
+      const hydrationValue = this.host.getAttribute(HYDRATE_ATTRIBUTE);
+      if (hydrationValue) {
+        const parsedHydrationValue = readAttributeValue(hydrationValue, options.hydrate);
+        this.host.removeAttribute(HYDRATE_ATTRIBUTE);
+        if (options.hydrate === Object && this.isObject(parsedHydrationValue) && (this.isObject(contextValue) || typeof contextValue === "undefined")) {
+          contextValue = {
+            ...contextValue ?? {},
+            ...parsedHydrationValue
+          };
+        } else {
+          contextValue = parsedHydrationValue;
+        }
+      }
+    }
+    this.value = contextValue;
+    this.registerEvents();
+    this.host.dispatchEvent(new ContextOnMountEvent(this.context));
+  }
+  setContext = (update, callback) => {
+    if (typeof this.value === "object") {
+      const oldContext = { ...this.value };
+      this.value = { ...this.value, ...update };
+      if (callback)
+        callback(this.value);
+      this.notifySubscribers(this.value, oldContext);
+    }
+  };
+  getContext = () => {
+    return this.value;
+  };
+  subscribe = ({ select, callback }) => {
+    this.subscriptions.push({ select, callback });
+  };
+  isObject(value) {
+    return typeof value === "object" && !Array.isArray(value) && value !== null;
+  }
+  notifySubscribers = (newContext, prevContext) => {
+    for (const sub of this.subscriptions) {
+      if (!sub.select)
+        return this.sendSubscriptionUpdate(sub, newContext);
+      const newSelected = sub.select(newContext);
+      const prevSelected = sub.select(prevContext);
+      if (newSelected !== prevSelected) {
+        this.sendSubscriptionUpdate(sub, newContext);
+      }
+    }
+  };
+  sendSubscriptionUpdate = ({ select, callback }, context) => {
+    if (!select)
+      callback(context);
+    else
+      callback(select(context));
+  };
+  handleSubscriptionRequest = ({
+    select,
+    callback,
+    subscribe
+  }) => {
+    if (subscribe)
+      this.subscribe({ select, callback });
+    if (!this.value)
+      return;
+    if (select) {
+      callback(select(this.value));
+    } else {
+      callback(this.value);
+    }
+  };
+  onSubscriptionRequest = (event3) => {
+    const { context, callback, subscribe, select, target } = event3;
+    if (context !== this.context)
+      return;
+    event3.stopPropagation();
+    target.dispatchEvent(new ContextOnMountEvent(this.context));
+    this.handleSubscriptionRequest({ select, callback, subscribe });
+  };
+  onContextRequest = (event3) => {
+    const { context, callback } = event3;
+    if (context !== this.context)
+      return;
+    event3.stopPropagation();
+    callback(this);
+  };
+  registerEvents = () => {
+    this.host.addEventListener("context--subscription-request" /* SUBSCRIPTION_REQUEST */, this.onSubscriptionRequest);
+    this.host.addEventListener("context-request" /* CONTEXT_REQUEST */, this.onContextRequest);
+  };
+}
+
+// src/context/decorators/provide-context.ts
+function provideContext({ context, initialValue, hydrate }) {
+  return (proto, propertyKey) => {
+    const originalConnectedCallback = proto.connectedCallback;
+    proto.connectedCallback = function() {
+      originalConnectedCallback.call(this);
+      this[propertyKey] = new ContextProvider(this, { context, initialValue, hydrate });
+      this.connectedContextCallback(context);
+    };
+  };
+}
+
+// src/context/decorators/consume-context.ts
+function consumeContext(contextToProvide) {
+  return (proto, propertyKey) => {
+    const originalConnectedCallback = proto.connectedCallback;
+    proto.connectedCallback = function() {
+      originalConnectedCallback.call(this);
+      this.dispatchEvent(new ContextRequestEvent(contextToProvide, (context) => {
+        this[propertyKey] = context;
+        this.connectedContextCallback(contextToProvide);
+      }));
+    };
+  };
+}
+
+// src/context/decorators/context-selector.ts
+function contextSelector({
+  context,
+  select,
+  subscribe = true
+}) {
+  return (proto, _, descriptor) => {
+    const originalMethod = descriptor.value;
+    const originalConnectedCallback = proto.connectedCallback;
+    proto.connectedCallback = function() {
+      originalConnectedCallback.call(this);
+      this.dispatchEvent(new ContextSubscriptionRequestEvent(context, originalMethod.bind(this), select, subscribe));
+    };
+    descriptor.value = function(...args) {
+      const result = originalMethod.apply(this, args);
+      return result;
+    };
+    return descriptor;
+  };
+}
+// src/mixins/with-kita.ts
+function WithKita(Base) {
+  return class extends Base {
+    async renderTemplate({ target = this, template, insert = "replace" }) {
+      const safeTemplate = typeof template !== "string" ? template.toString() : template;
+      switch (insert) {
+        case "replace":
+          target.innerHTML = safeTemplate;
+          break;
+        case "beforeend":
+          target.insertAdjacentHTML("beforeend", safeTemplate);
+          break;
+        case "afterbegin":
+          target.insertAdjacentHTML("afterbegin", safeTemplate);
+          break;
+      }
+    }
+  };
+}
+// src/tools/stringify-attribute.ts
+function stringifyAttribute(value) {
+  return JSON.stringify(value);
+}
+export {
+  writeAttributeValue,
+  stringifyAttribute,
+  readAttributeValue,
+  reactiveProp,
+  reactiveField,
+  query,
+  provideContext,
+  parseAttributeTypeDefault,
+  parseAttributeTypeConstant,
+  onUpdated,
+  onEvent,
+  isValueOfType,
+  event,
+  defaultValueForType,
+  customElement,
+  createContext,
+  contextSelector,
+  consumeContext,
+  WithKita,
+  RadiantElement,
+  HYDRATE_ATTRIBUTE,
+  EventEmitter,
+  ContextSubscriptionRequestEvent,
+  ContextRequestEvent,
+  ContextProvider,
+  ContextOnMountEvent,
+  ContextEventsTypes
+};
+
+//# debugId=9F8C73D65206CDB164756E2164756E21