@saolabs/client 1.2.1 → 1.5.0

package/src/core/bootstrap/bundle.ts

@@ -9,7 +9,7 @@
  */
 
 import type { ApplicationInterface } from "../contracts/ApplicationInterface.js";
-import type { MergedBundles, SaolaBundle } from "../contracts/BundleInterface.js";
+import type { MergeOptions, MergedBundles, SaolaBundle } from "../contracts/BundleInterface.js";
 import logger from "../services/LoggerService.js";
 
 /**
@@ -30,21 +30,83 @@ function emptyMerged(): MergedBundles {
     return { providers: [], services: {}, helpers: {}, views: {}, boots: [], loaded: [], failed: [] };
 }
 
+/** `A.B` phủ chính nó và `A.B.x`. */
+function covered(list: string[] | undefined, key: string): boolean {
+    return !!list?.some(p => key === p || key.startsWith(p + '.'));
+}
+
+/**
+ * Lý do bundle bị từ chối ở chế độ strict, hoặc null nếu hợp lệ.
+ * `owners` = khoá → tên bundle đã khai trước đó.
+ */
+function rejectReason(b: SaolaBundle, name: string, owners: Map<string, string>, o: MergeOptions, kind: string): string | null {
+    if (kind === 'theme') {
+        if (b.providers?.length) return `theme "${name}" không được khai providers`;
+        for (const key of [...Object.keys(b.services ?? {}), ...Object.keys(b.helpers ?? {})]) {
+            if (!covered(o.themeNamespaces, key)) return `theme "${name}" khai khoá "${key}" ngoài namespace trình bày cho phép`;
+        }
+    }
+    for (const [group, map] of [['services', b.services], ['helpers', b.helpers], ['views', b.views]] as const) {
+        for (const key of Object.keys(map ?? {})) {
+            const id = `${group}:${key}`;
+            const prev = owners.get(id);
+            if (!prev) continue;
+            // Override hợp lệ = bundle khai rõ VÀ context cho phép khoá đó.
+            if (b.overrides?.includes(key) && covered(o.overridable, key)) continue;
+            return `${group} "${key}" trùng giữa "${prev}" và "${name}" (không có overrides hợp lệ)`;
+        }
+    }
+    return null;
+}
+
 /**
  * Gộp nhiều manifest theo ĐÚNG THỨ TỰ mảng — không theo thứ tự resolve của
  * mạng. Bundle sau ĐÈ bundle trước ở `views`/`services`/`helpers`; `providers`
  * thì CỘNG THÊM chứ không thay, để một bundle không gỡ được provider của app.
+ *
+ * `opts.strict` bật hàng rào của hợp đồng gói context: bundle trùng khoá không
+ * có `overrides` hợp lệ, hoặc theme khai khoá ngoài phạm vi, bị BỎ NGUYÊN CẢ
+ * BUNDLE và ghi vào `failed` (không làm sập boot). Provider trùng `name` bị bỏ.
  */
-export function mergeBundles(bundles: Array<SaolaBundle | null | undefined>): MergedBundles {
+export function mergeBundles(bundles: Array<SaolaBundle | null | undefined>, opts: MergeOptions = {}): MergedBundles {
     const out = emptyMerged();
+    const owners = new Map<string, string>();
+    const providerNames = new Set<string>();
 
     for (const bundle of bundles) {
         if (!bundle || typeof bundle !== 'object') continue;
-        out.loaded.push(bundle.name ?? '(không tên)');
-        if (Array.isArray(bundle.providers)) out.providers.push(...bundle.providers);
+        const name = bundle.name ?? '(không tên)';
+
+        if (opts.strict) {
+            const kind = opts.kind ?? bundle.kind ?? 'package';
+            const why = rejectReason(bundle, name, owners, opts, kind);
+            if (why) {
+                out.failed.push([name, why]);
+                logger.error(`[Bundle] Bỏ bundle: ${why}`);
+                continue;
+            }
+        }
+
+        out.loaded.push(name);
+        if (Array.isArray(bundle.providers)) {
+            for (const p of bundle.providers) {
+                const pn = p && typeof p === 'object' ? (p as any).name : undefined;
+                if (opts.strict && typeof pn === 'string') {
+                    if (providerNames.has(pn)) {
+                        out.failed.push([name, `provider "${pn}" trùng tên, bỏ`]);
+                        continue;
+                    }
+                    providerNames.add(pn);
+                }
+                out.providers.push(p);
+            }
+        }
         if (bundle.services) Object.assign(out.services, bundle.services);
         if (bundle.helpers) Object.assign(out.helpers, bundle.helpers);
         if (bundle.views) Object.assign(out.views, bundle.views);
+        for (const [group, map] of [['services', bundle.services], ['helpers', bundle.helpers], ['views', bundle.views]] as const) {
+            for (const key of Object.keys(map ?? {})) owners.set(`${group}:${key}`, name);
+        }
         if (typeof bundle.boot === 'function') out.boots.push(bundle.boot.bind(bundle));
     }
 
@@ -60,8 +122,8 @@ export function mergeBundles(bundles: Array<SaolaBundle | null | undefined>): Me
  * Một URL hỏng KHÔNG làm sập boot: ghi vào `failed` rồi đi tiếp. Theme lỗi thì
  * site chạy bằng view gốc, còn hơn trắng trang.
  */
-export async function loadBundles(urls: string[] | null | undefined): Promise<MergedBundles> {
-    if (!Array.isArray(urls) || urls.length === 0) return emptyMerged();
+export async function loadBundles(urls: string[] | null | undefined, opts: MergeOptions = {}): Promise<MergedBundles> {
+    if (!Array.isArray(urls) || urls.length === 0) return mergeBundles(opts.initialBundle ? [opts.initialBundle] : [], opts);
 
     const results = await Promise.all(urls.map(async (url): Promise<[string, SaolaBundle | null, string | null]> => {
         try {
@@ -78,7 +140,21 @@ export async function loadBundles(urls: string[] | null | undefined): Promise<Me
         }
     }));
 
-    const merged = mergeBundles(results.map(([, bundle]) => bundle));
+    const classificationErrors: Array<[string, string]> = [];
+    const classified = results.map(([url, bundle]) => {
+        if (!bundle) return null;
+        const kind = opts.bundleKinds?.[url];
+        if (opts.strict && opts.bundleKinds && kind !== 'package' && kind !== 'theme') {
+            classificationErrors.push([url, 'Missing trusted bundle kind from server']);
+            return null;
+        }
+        return kind ? {...bundle, kind} : bundle;
+    });
+    const merged = mergeBundles([opts.initialBundle, ...classified], opts);
+    for (const failure of classificationErrors) {
+        merged.failed.push(failure);
+        logger.error(`[Bundle] ${failure[1]}: ${failure[0]}`);
+    }
     for (const [url, , error] of results) {
         if (error) {
             merged.failed.push([url, error]);

package/src/core/bootstrap/providers/default-providers.ts

@@ -26,11 +26,12 @@ const SYSTEM_SERVICE_KEYS = new Set(['Store', 'Storage', 'Event', 'Http', 'View'
  * services: { Auth: AuthService, Toast: ToastService }
  * → 2 providers, mỗi cái dependsOn ['core'], register = app.set(name, new Class(app))
  */
-function servicesFromMap(map: Record<string, any>): ServiceProviderInterface[] {
+function servicesFromMap(map: Record<string, any>, strict = false): ServiceProviderInterface[] {
     const appInstance = app<ApplicationInterface>();
     return Object.entries(map)
         .filter(([name]) => {
             if (SYSTEM_SERVICE_KEYS.has(name)) {
+                if (strict) throw new Error(`[Bootstrap] Không được ghi đè service hệ thống "${name}" qua config.services.`);
                 console.warn(`[Bootstrap] Cannot override system service "${name}" via config.services. Ignored.`);
                 return false;
             }
@@ -44,7 +45,9 @@ function servicesFromMap(map: Record<string, any>): ServiceProviderInterface[] {
                 // không phải class — `new` vô điều kiện sẽ ném "is not a
                 // constructor". Chỉ dựng khi thật sự là class.
                 const isClass = typeof value === 'function' && value.prototype;
-                appInstance.set(name, isClass ? new value(appInstance) : value);
+                // Dạng `{ factory }`: mỗi Application dựng instance riêng.
+                const isFactory = !!value && typeof value === 'object' && typeof value.factory === 'function';
+                appInstance.set(name, isClass ? new value(appInstance) : isFactory ? value.factory(appInstance) : value);
             }
         }));
 }
@@ -92,6 +95,8 @@ export function buildDefaultProviders(config: Record<string, any> = {}): NamedSe
     HelperServiceProvider.config = { i18n: config.i18n };
     ApiServiceProvider.config = config.api || {};
     const App = app<ApplicationInterface>();
+    const strict = !!config.strictBundles;
+    App.strictBundles = strict;
     const defaults: NamedServiceProvider[] = [
         CoreServiceProvider,
         ViewServiceProvider,
@@ -102,7 +107,7 @@ export function buildDefaultProviders(config: Record<string, any> = {}): NamedSe
 
     // config.services: { Name: Class } → auto-wrap providers
     const serviceProviders = config.services
-        ? servicesFromMap(config.services)
+        ? servicesFromMap(config.services, strict)
         : [];
 
     // config.helpers: { tên: fn } → một provider phụ thuộc `helper`
@@ -118,6 +123,7 @@ export function buildDefaultProviders(config: Record<string, any> = {}): NamedSe
             )
             .filter(p => {
                 if (SYSTEM_PROVIDER_NAMES.has(p.name as any)) {
+                    if (strict) throw new Error(`[Bootstrap] Không được ghi đè provider hệ thống "${p.name}".`);
                     console.warn(`[Bootstrap] Cannot override system provider "${p.name}". Ignored.`);
                     return false;
                 }

package/src/core/contracts/BundleInterface.ts

@@ -22,10 +22,41 @@ export interface SaolaBundle {
     helpers?: Record<string, any>;
     /** { 'dot.path': factory } → View.setViewRegistry(). Nạp sau ĐÈ nạp trước. */
     views?: Record<string, ViewFactory>;
+    /**
+     * Khoá (service/helper/view) bundle này CỐ Ý thay của bundle trước. Chỉ có hiệu
+     * lực ở chế độ strict và chỉ khi khoá nằm trong `overridable` của context.
+     */
+    overrides?: string[];
+    /** `'theme'` = lớp trình bày, bị giới hạn khoá (xem MergeOptions.themeNamespaces). */
+    kind?: 'theme' | 'package';
     /** Chạy sau khi mọi bundle đã merge và App đã init. */
     boot?(app: ApplicationInterface): void;
 }
 
+/**
+ * Dạng khai service có factory: App gọi `factory(app)` khi đăng ký, nên mỗi
+ * Application có instance RIÊNG (không dùng instance tạo ở phạm vi module).
+ */
+export interface ServiceFactory<T = any> {
+    factory: (app: ApplicationInterface) => T;
+}
+
+/** Tuỳ chọn gộp bundle. Mặc định (không truyền) = hành vi cũ: sau đè trước, im lặng. */
+export interface MergeOptions {
+    /** Bật kiểm: trùng khoá, provider trùng tên, giới hạn khoá của theme. */
+    strict?: boolean;
+    /** Khoá được phép `overrides`; mục `A.B` phủ cả `A.B.x`. */
+    overridable?: string[];
+    /** Với bundle `kind: 'theme'`: tiền tố khoá services/helpers được phép. Thiếu = không cho khoá nào. */
+    themeNamespaces?: string[];
+    /** Ép mọi bundle trong lượt gộp là loại này (server quyết, bundle không tự nâng quyền được). */
+    kind?: 'theme' | 'package';
+    /** Trusted server classification by URL; bundle contents cannot promote a theme. */
+    bundleKinds?: Record<string, 'theme' | 'package'>;
+    /** Already registered source services/providers participate in strict collision checks. */
+    initialBundle?: SaolaBundle;
+}
+
 /** Kết quả gộp nhiều bundle, theo đúng thứ tự mảng URL. */
 export interface MergedBundles {
     providers: (ServiceProviderInterface | any)[];

package/src/core/contracts/HelperInterface.ts

@@ -54,6 +54,12 @@ export interface CollectionProxyInterface {
 export interface HelperInterface {
     initTranslations(config: import('../services/TranslationService.js').TranslationConfig): void;
     getLocale(): string;
+    getLanguageScope(): string | undefined;
+    applyLanguageConfig(config: import('../services/TranslationService.js').TranslationConfig): void;
+    text(key: string, replace?: Record<string, any> | string | null, defaultValue?: string | null, locale?: string): string;
+    installLanguage(locale: string, snapshot: import('../services/TranslationService.js').LanguageSnapshot): boolean;
+    loadLanguage(locale: string, load: (locale: string) => Promise<import('../services/TranslationService.js').LanguageSnapshot>): Promise<boolean>;
+    changeLanguage(locale: string, load: (locale: string) => Promise<import('../services/TranslationService.js').LanguageSnapshot>, canLeave?: () => boolean | Promise<boolean>): Promise<boolean>;
     setLocale(locale: string): void;
     __(key: string, replace?: Record<string, any>, locale?: string): string;
     trans(key: string, replace?: Record<string, any>, locale?: string): string;
@@ -261,4 +267,4 @@ export interface HelperInterface {
     data_get(obj: any, path: string, defaultValue?: any): any;
     data_set(obj: any, path: string, value: any): void;
     old(key: string, defaultValue?: any): any;
-}
+}

package/src/core/elements/Html.ts

@@ -732,6 +732,13 @@ export class Html implements HtmlInterface {
         if (this.isSingleElement()) {
             return this.element;
         }
+        // Editors own their inner DOM, selection and composition state. Reconcile the
+        // host's attributes/events normally, but leave an explicitly declared island alone.
+        if (this.element.hasAttribute('data-sao-preserve-children')) {
+            this.initMode = InitModes.CREATE;
+            this.maybeRunEnter();
+            return this.element;
+        }
         if (this.config.content) {
             this.renderTextContent();
             return this.element;

package/src/core/routers/Router.ts

@@ -176,6 +176,7 @@ export class Router {
 
     /** Navigation guards */
     private _beforeEach: NavigationGuard | null = null;
+    private navigationGuards = new Set<NavigationGuard>();
     /**
      * NHIỀU hook, không phải một.
      *
@@ -389,6 +390,12 @@ export class Router {
         return this;
     }
 
+    /** Add a disposable guard without replacing the host's beforeEach guard. */
+    addNavigationGuard(guard: NavigationGuard): () => void {
+        this.navigationGuards.add(guard);
+        return () => { this.navigationGuards.delete(guard); };
+    }
+
     /** Đăng ký hook chạy sau mỗi lần điều hướng. Trả về hàm HUỶ đăng ký. */
     afterEach(hook: AfterNavigationHook): () => void {
         this.afterHooks.add(hook);
@@ -656,6 +663,7 @@ export class Router {
         this.routeConfigs = {};
         this.routeCache.clear();
         this._beforeEach = null;
+        this.navigationGuards.clear();
         this.afterHooks.clear();
         this.currentRoute = null;
         this.liveRegion?.remove();
@@ -752,7 +760,18 @@ export class Router {
             // Before guard — chạy TRƯỚC khi đụng vào history: guard chặn thì URL giữ nguyên
             if (this._beforeEach) {
                 const allow = await this._beforeEach(route, from, normalizedPath);
-                if (allow === false) return;
+                if (allow === false) {
+                    if (type === 'pop') this.restoreUrlAfterFailedPop(from);
+                    return;
+                }
+            }
+            for (const guard of [...this.navigationGuards]) {
+                if (!this.navigationGuards.has(guard)) continue;
+                if (requestId !== this.navigationSequence) return;
+                if (await guard(route, from, normalizedPath) === false) {
+                    if (type === 'pop') this.restoreUrlAfterFailedPop(from);
+                    return;
+                }
             }
             if (requestId !== this.navigationSequence) return;
 
@@ -835,9 +854,9 @@ export class Router {
 
     /** Pop đã đổi address bar; render fail thì đưa URL về chain còn active. */
     private restoreUrlAfterFailedPop(from: ActiveRoute | null): void {
-        if (this.mode !== 'history' || !from) return;
+        if (!from) return;
         const target = from.$fragment ? `${from.$uri}#${from.$fragment}` : from.$uri;
-        window.history.replaceState(window.history.state, '', target);
+        window.history.replaceState(window.history.state, '', this.mode === 'hash' ? '#' + target : target);
     }
 
     /**

package/src/core/services/HelperService.ts

@@ -39,6 +39,7 @@ import { app } from "../helpers/app.js";
 export class HelperService implements HelperInterface {
     public App: any = null;
     private translations = new TranslationService();
+    private languageChangeSequence = 0;
     private config: Record<string, any> = {};
 
     constructor(App?: any) {
@@ -63,11 +64,45 @@ export class HelperService implements HelperInterface {
     }
 
     initTranslations(config: TranslationConfig): void {
+        this.languageChangeSequence++;
         this.translations.init(config);
         this.syncLocale();
     }
 
     getLocale(): string { return this.translations.locale; }
+    getLanguageScope(): string | undefined { return this.translations.getScope(); }
+    applyLanguageConfig(config: TranslationConfig): void {
+        if (!config.scope || config.scope !== this.getLanguageScope()) {
+            this.initTranslations(config);
+            return;
+        }
+        // Page-data refreshes revisions without resetting the chosen locale.
+        this.translations.refresh(config);
+    }
+    text(key: string, replace: Record<string, any> | string | null = {}, defaultValue: string | null = null, locale?: string): string {
+        if (typeof replace === 'string' && defaultValue === null) defaultValue = replace;
+        return this.translations.text(key, replace && typeof replace === 'object' ? replace : {}, defaultValue, locale);
+    }
+    installLanguage(locale: string, snapshot: import('./TranslationService.js').LanguageSnapshot): boolean {
+        return this.translations.install(locale, snapshot);
+    }
+    async loadLanguage(locale: string, load: (locale: string) => Promise<import('./TranslationService.js').LanguageSnapshot>): Promise<boolean> {
+        return this.installLanguage(locale, await load(locale));
+    }
+    async changeLanguage(
+        locale: string,
+        load: (locale: string) => Promise<import('./TranslationService.js').LanguageSnapshot>,
+        canLeave: () => boolean | Promise<boolean> = () => true,
+    ): Promise<boolean> {
+        const sequence = ++this.languageChangeSequence;
+        if (!await canLeave() || sequence !== this.languageChangeSequence) return false;
+        const snapshot = await load(locale);
+        if (sequence !== this.languageChangeSequence || !await canLeave()) return false;
+        if (sequence !== this.languageChangeSequence) return false;
+        this.installLanguage(locale, snapshot);
+        this.setLocale(locale);
+        return true;
+    }
     __(key: string, replace: Record<string, any> = {}, locale?: string): string { return this.translations.trans(key, replace, locale); }
     trans(key: string, replace: Record<string, any> = {}, locale?: string): string { return this.__(key, replace, locale); }
     lang(key: string, replace: Record<string, any> = {}, locale?: string): string { return this.__(key, replace, locale); }
@@ -1680,4 +1715,4 @@ export class CollectionProxy implements CollectionProxyInterface {
     pipe<T>(cb: (collection: CollectionProxy) => T): T { return cb(this); }
     toJSON(): any[] { return this.toArray(); }
     toString(): string { return JSON.stringify(this.items); }
-}
+}

package/src/core/services/TranslationService.ts

@@ -1,23 +1,42 @@
 export interface TranslationConfig {
+    scope?: string;
     locale?: string;
     fallbackLocale?: string;
     messages?: Record<string, { json?: Record<string, string>; groups?: Record<string, any> }>;
+    /** Saola DB dictionaries. Kept separate from Laravel json/groups. */
+    catalogs?: Record<string, LanguageSnapshot>;
 }
 
-/** Synchronous lookup of dictionaries already present in the application bundle. */
+export interface LanguageTree { [key: string]: string | LanguageTree }
+export interface LanguageSnapshot { revision: number; messages: LanguageTree; scope?: string }
+
+/** Synchronous lookup; snapshots may be supplied at bootstrap or installed at runtime. */
 export class TranslationService {
     locale = 'en';
     fallbackLocale = 'en';
     private messages: NonNullable<TranslationConfig['messages']> = {};
+    private catalogs: Record<string, LanguageSnapshot> = {};
+    private catalogScope?: string;
+
+    getScope(): string | undefined { return this.catalogScope; }
+
+    refresh(config: TranslationConfig): void {
+        if (config.scope !== this.catalogScope) throw new Error('Language snapshot scope differs from the active catalog');
+        for (const [locale, snapshot] of Object.entries(config.catalogs || {})) this.install(locale, snapshot);
+        if (config.fallbackLocale) this.fallbackLocale = config.fallbackLocale;
+    }
 
     init(config: TranslationConfig): void {
+        this.catalogScope = config.scope;
         this.locale = config.locale || 'en';
         this.fallbackLocale = config.fallbackLocale || 'en';
         this.messages = config.messages || {};
+        this.catalogs = {};
+        for (const [locale, snapshot] of Object.entries(config.catalogs || {})) this.install(locale, snapshot);
     }
 
     setLocale(locale: string): boolean {
-        if (!Object.prototype.hasOwnProperty.call(this.messages, locale)) throw new Error(`Locale is not bundled: ${locale}`);
+        if (!Object.prototype.hasOwnProperty.call(this.messages, locale) && !Object.prototype.hasOwnProperty.call(this.catalogs, locale)) throw new Error(`Locale is not loaded: ${locale}`);
         if (locale === this.locale) return false;
         this.locale = locale;
         return true;
@@ -28,6 +47,40 @@ export class TranslationService {
         return this.interpolate(value, replace);
     }
 
+    text(key: string, replace: Record<string, any> = {}, defaultValue: string | null = null, locale = this.locale): string {
+        const value = this.lookupTree(this.catalogs[locale]?.messages, key)
+            ?? this.lookupTree(this.catalogs[this.fallbackLocale]?.messages, key) ?? defaultValue ?? key;
+        return this.interpolate(value, replace);
+    }
+
+    install(locale: string, snapshot: LanguageSnapshot): boolean {
+        if (snapshot.scope !== this.catalogScope) throw new Error('Language snapshot scope differs from the active catalog');
+        if (!Number.isSafeInteger(snapshot.revision) || snapshot.revision < 0) throw new Error('Invalid language revision');
+        const validate = (value: any, depth = 0): LanguageTree => {
+            if (!value || typeof value !== 'object' || Array.isArray(value) || depth > 32) throw new Error('Invalid language tree');
+            const copy: LanguageTree = Object.create(null);
+            for (const [key, child] of Object.entries(value)) {
+                if (!key || key.includes('.') || /\s/u.test(key) || ['__proto__', 'constructor', 'prototype'].includes(key)) throw new Error('Invalid language key');
+                copy[key] = typeof child === 'string' ? child : validate(child, depth + 1);
+            }
+            return copy;
+        };
+        const messages = validate(snapshot.messages);
+        if (this.catalogs[locale] && this.catalogs[locale].revision > snapshot.revision) return false;
+        // Replace, rather than deep merge: removed keys must disappear.
+        this.catalogs = { ...this.catalogs, [locale]: { revision: snapshot.revision, messages, scope: snapshot.scope } };
+        return true;
+    }
+
+    private lookupTree(tree: LanguageTree | undefined, key: string): string | undefined {
+        let value: string | LanguageTree | undefined = tree;
+        for (const part of key.split('.')) {
+            if (!value || typeof value !== 'object' || !Object.prototype.hasOwnProperty.call(value, part)) return undefined;
+            value = value[part];
+        }
+        return typeof value === 'string' ? value : undefined;
+    }
+
     choice(key: string, count: number, replace: Record<string, any> = {}, locale = this.locale): string {
         const local = this.lookup(key, locale);
         const value = local ?? this.lookup(key, this.fallbackLocale) ?? key;
@@ -77,6 +130,7 @@ export class TranslationService {
     }
 
     private interpolate(value: string, replace: Record<string, any>): string {
+        const parameters: Record<string, string> = Object.create(null);
         const keys = Object.keys(replace).sort((a, b) => b.length - a.length);
         for (const key of keys) {
             const text = String(replace[key]);
@@ -84,8 +138,12 @@ export class TranslationService {
                 [key]: text, [key.toUpperCase()]: text.toUpperCase(),
                 [key.charAt(0).toUpperCase() + key.slice(1)]: text.charAt(0).toUpperCase() + text.slice(1),
             };
-            for (const [name, content] of Object.entries(variants)) value = value.split(':' + name).join(content);
+            // Build substitutions first; inserted text must never be interpolated again.
+            Object.assign(parameters, Object.fromEntries(Object.entries(variants).map(([name, content]) => [':' + name, content])));
         }
-        return value;
+        const names = Object.keys(parameters).sort((a, b) => b.length - a.length);
+        if (!names.length) return value;
+        const pattern = new RegExp(names.map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'g');
+        return value.replace(pattern, match => parameters[match]);
     }
 }

package/src/core/view/ViewManager.ts

@@ -902,6 +902,7 @@ export class ViewManager implements ViewManagerInterface {
             let asyncData: Record<string, any> = {};
             try {
                 const response = await Http.get(fetchUrl, this.fetchOptions);
+                if (!this.isNavigationCurrent(navigationGeneration)) return this.createRenderPageViewCancelled(view);
                 asyncData = this.extractAsyncData(response);
             } catch (err) {
                 if (!this.isNavigationCurrent(navigationGeneration)) {
@@ -1607,6 +1608,7 @@ export class ViewManager implements ViewManagerInterface {
             && Object.prototype.hasOwnProperty.call(payload, 'data')
             && (Object.prototype.hasOwnProperty.call(payload, 'viewContext')
                 || Object.prototype.hasOwnProperty.call(payload, 'view'))) {
+            if (payload.i18n) this.App?.Helper?.applyLanguageConfig?.(payload.i18n);
             return payload.data ?? {};
         }
         return payload;