@rettangoli/fe 1.1.2 → 1.2.0

package/src/core/runtime/props.js

@@ -29,6 +29,51 @@ export const readPropFallbackFromAttributes = (source, propName) => {
 };
 
 const REACTIVE_PROP_VALUES = Symbol("rtglReactivePropValues");
+const NATIVE_HOST_STYLE = Symbol("rtglNativeHostStyle");
+
+const findPrototypePropertyDescriptor = (source, propName) => {
+  let current = Object.getPrototypeOf(source);
+
+  while (current) {
+    const descriptor = Object.getOwnPropertyDescriptor(current, propName);
+    if (descriptor) {
+      return descriptor;
+    }
+    current = Object.getPrototypeOf(current);
+  }
+
+  return undefined;
+};
+
+export const getNativeHostStyle = (source) => {
+  if (!source || typeof source !== "object") {
+    return undefined;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(source, NATIVE_HOST_STYLE)) {
+    return source[NATIVE_HOST_STYLE];
+  }
+
+  const styleDescriptor = findPrototypePropertyDescriptor(source, "style");
+  let nativeStyle;
+
+  if (typeof styleDescriptor?.get === "function") {
+    nativeStyle = styleDescriptor.get.call(source);
+  } else if (source.style && typeof source.style === "object") {
+    nativeStyle = source.style;
+  }
+
+  if (nativeStyle && typeof nativeStyle === "object") {
+    Object.defineProperty(source, NATIVE_HOST_STYLE, {
+      value: nativeStyle,
+      enumerable: false,
+      configurable: false,
+      writable: false,
+    });
+  }
+
+  return nativeStyle;
+};
 
 const ensureReactivePropValues = (source) => {
   if (!Object.prototype.hasOwnProperty.call(source, REACTIVE_PROP_VALUES)) {
@@ -50,6 +95,10 @@ export const installReactiveProps = ({
 }) => {
   const reactiveValues = ensureReactivePropValues(source);
 
+  if (allowedKeys.includes("style")) {
+    getNativeHostStyle(source);
+  }
+
   allowedKeys.forEach((propName) => {
     if (typeof propName !== "string" || propName.length === 0) {
       return;

package/src/core/runtime/store.js

@@ -2,12 +2,20 @@ import { produce } from "immer";
 
 import { isObjectPayload } from "./payload.js";
 
-export const bindStore = (store, props, constants) => {
+export const bindStore = (store, props, constants, runtimeContext = {}) => {
   const { createInitialState, ...selectorsAndActions } = store;
   const selectors = {};
   const actions = {};
   let currentState = {};
 
+  const createStoreContext = (state) => ({
+    state,
+    props,
+    constants,
+    i18n: runtimeContext.getI18n?.() || {},
+    locale: runtimeContext.locale,
+  });
+
   if (createInitialState) {
     currentState = createInitialState({ props, constants });
   }
@@ -15,7 +23,7 @@ export const bindStore = (store, props, constants) => {
   Object.entries(selectorsAndActions).forEach(([key, fn]) => {
     if (key.startsWith("select")) {
       selectors[key] = (...args) => {
-        return fn({ state: currentState, props, constants }, ...args);
+        return fn(createStoreContext(currentState), ...args);
       };
       return;
     }
@@ -28,7 +36,7 @@ export const bindStore = (store, props, constants) => {
         );
       }
       currentState = produce(currentState, (draft) => {
-        return fn({ state: draft, props, constants }, normalizedPayload);
+        return fn(createStoreContext(draft), normalizedPayload);
       });
       return currentState;
     };

package/src/index.js

@@ -1,5 +1,7 @@
 import createComponent from './createComponent.js';
+import { createI18nRuntime } from "./core/runtime/i18n.js";
 
 export {
   createComponent,
+  createI18nRuntime,
 }

package/src/parser.js

@@ -227,6 +227,7 @@ export const createVirtualDom = ({
                     eventRateLimitState,
                     stateKey,
                     parseAndRenderFn: jemplParseAndRender,
+                    getPayloadContext: () => viewData,
                     onMissingHandler: (missingHandlerName) => {
                       console.warn(
                         `[Parser] Handler '${missingHandlerName}' for refKey '${bestMatchRefKey}' (matching '${matchIdentity}') is referenced but not found in available handlers.`,

package/src/web/componentDom.js

@@ -1,3 +1,5 @@
+import { getNativeHostStyle } from "../core/runtime/props.js";
+
 const COMMON_LINK_STYLE_TEXT = `
   a, a:link, a:visited, a:hover, a:active {
     display: contents;
@@ -98,7 +100,10 @@ export const initializeComponentDom = ({
   if (renderTarget.parentNode !== shadow) {
     shadow.appendChild(renderTarget);
   }
-  host.style.display = "contents";
+  const hostStyle = getNativeHostStyle(host);
+  if (hostStyle && typeof hostStyle === "object") {
+    hostStyle.display = "contents";
+  }
 
   return {
     shadow,

package/src/web/createWebComponentClass.js

@@ -52,6 +52,8 @@ export const createWebComponentClass = ({
     _globalListenersCleanup;
     _oldVNode;
     deps;
+    i18nRuntime;
+    _i18nUnsubscribe;
     _propsSchemaKeys = [];
     cssText;
 
@@ -64,7 +66,10 @@ export const createWebComponentClass = ({
       if (this.store.selectViewData) {
         data = this.store.selectViewData();
       }
-      return data;
+      return {
+        ...data,
+        i18n: this.i18nRuntime?.getMessages?.() || {},
+      };
     }
 
     connectedCallback() {
@@ -74,6 +79,11 @@ export const createWebComponentClass = ({
       });
       this.shadow = dom.shadow;
       this.renderTarget = dom.renderTarget;
+      if (this.i18nRuntime?.subscribe && !this._i18nUnsubscribe) {
+        this._i18nUnsubscribe = this.i18nRuntime.subscribe(() => {
+          this.render();
+        });
+      }
       runConnectedComponentLifecycle({
         instance: this,
         parseAndRenderFn: parseAndRender,
@@ -82,6 +92,10 @@ export const createWebComponentClass = ({
     }
 
     disconnectedCallback() {
+      if (this._i18nUnsubscribe) {
+        this._i18nUnsubscribe();
+        this._i18nUnsubscribe = undefined;
+      }
       runDisconnectedComponentLifecycle({
         instance: this,
         clearTimerFn: clearTimeout,
@@ -140,7 +154,11 @@ export const createWebComponentClass = ({
       this._propsSchemaKeys = propsSchemaKeys;
       this.elementName = elementName;
       this.styles = styles;
-      this.store = bindStore(store, this.props, this.constants);
+      this.i18nRuntime = deps?.__rtglI18nRuntime;
+      this.store = bindStore(store, this.props, this.constants, {
+        getI18n: () => this.i18nRuntime?.getMessages?.() || {},
+        locale: this.i18nRuntime?.locale,
+      });
       this.template = template;
       this.handlers = handlers;
       this.methods = methods;
@@ -148,12 +166,20 @@ export const createWebComponentClass = ({
       this.patch = patch;
       this.deps = {
         ...deps,
+        locale: this.i18nRuntime?.locale || deps?.locale,
         store: this.store,
         render: this.render,
         handlers,
         props: this.props,
         constants: this.constants,
       };
+      if (this.i18nRuntime) {
+        Object.defineProperty(this.deps, "i18n", {
+          enumerable: true,
+          configurable: true,
+          get: () => this.i18nRuntime.getMessages(),
+        });
+      }
       bindMethods(this, this.methods);
       // Keep the Snabbdom helper off public prop names (e.g. schema prop "h").
       this._snabbdomH = h;