svelte-intlayer 9.0.0-canary.9 → 9.0.0

package/dist/IntlayerNodeWrapper.svelte

@@ -1,17 +1,42 @@
 <script lang="ts">
+// `Renderer` is either a component or — when it comes from a code-split chunk
+// that had not landed at interpretation time — a promise for one.
 export let Renderer: any = undefined;
 export let rendererProps: Record<string, any> = {};
 export let value: any = undefined;
+
+// Capitalised so Svelte resolves it as a component rather than an HTML element.
+let ResolvedRenderer: any;
+let isAwaitingRenderer = false;
+
+// Already-available renderers resolve synchronously, so SSR and the first paint
+// are never deferred; only a genuinely pending chunk is awaited.
+$: {
+  if (typeof Renderer?.then === 'function') {
+    isAwaitingRenderer = true;
+
+    Renderer.then((component: any) => {
+      ResolvedRenderer = component;
+      isAwaitingRenderer = false;
+    });
+  } else {
+    ResolvedRenderer = Renderer;
+    isAwaitingRenderer = false;
+  }
+}
 </script>
 
-{#if typeof Renderer === 'string'}
-  <svelte:element this={Renderer} {...rendererProps}>
+{#if isAwaitingRenderer}
+  <!-- Render nothing while the chunk loads: falling through to `value` would
+       flash the raw source (e.g. `**bold**`) before the renderer arrives. -->
+{:else if typeof ResolvedRenderer === 'string'}
+  <svelte:element this={ResolvedRenderer} {...rendererProps}>
     {value}
   </svelte:element>
-{:else if typeof Renderer === 'function'}
-  <Renderer {...rendererProps}>
+{:else if typeof ResolvedRenderer === 'function'}
+  <ResolvedRenderer {...rendererProps}>
     {value}
-  </Renderer>
+  </ResolvedRenderer>
 {:else}
   {value}
 {/if}

package/dist/analytics/exposureSink.d.ts

@@ -0,0 +1,28 @@
+import type { KeyPath } from '@intlayer/types/keyPath';
+/**
+ * Node metadata reported for a content exposure. Kept dependency-free (types
+ * only) so the interpreter hot path in `plugins.ts` never statically imports
+ * `@intlayer/analytics` — the package stays optional and tree-shakeable.
+ */
+export type ExposureInput = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    locale?: string;
+    nodeType?: string;
+};
+/** Consumer of exposure reports, installed by `useAnalytics` after init. */
+export type ExposureSink = (input: ExposureInput) => void;
+/**
+ * Installs (or clears) the exposure sink. `useAnalytics` sets this once the
+ * analytics client has loaded, and clears it on teardown.
+ *
+ * @param next - The sink to install, or `null` to clear.
+ */
+export declare const setExposureSink: (next: ExposureSink | null) => void;
+/**
+ * Forwards a content exposure to the installed sink. A cheap null-check when
+ * analytics is not running, so it is safe to call from every node resolution.
+ *
+ * @param input - The node metadata to report.
+ */
+export declare const reportExposure: (input: ExposureInput) => void;

package/dist/analytics/exposureSink.js

@@ -0,0 +1,19 @@
+let sink = null;
+/**
+ * Installs (or clears) the exposure sink. `useAnalytics` sets this once the
+ * analytics client has loaded, and clears it on teardown.
+ *
+ * @param next - The sink to install, or `null` to clear.
+ */
+export const setExposureSink = (next) => {
+    sink = next;
+};
+/**
+ * Forwards a content exposure to the installed sink. A cheap null-check when
+ * analytics is not running, so it is safe to call from every node resolution.
+ *
+ * @param input - The node metadata to report.
+ */
+export const reportExposure = (input) => {
+    sink?.(input);
+};

package/dist/analytics/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useAnalytics';
+export * from './useConversion';
+export * from './useExperiment';

package/dist/analytics/index.js

@@ -0,0 +1,3 @@
+export * from './useAnalytics';
+export * from './useConversion';
+export * from './useExperiment';

package/dist/analytics/useAnalytics.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Initializes the Intlayer analytics client singleton when analytics is
+ * enabled (mirrors {@link useEditor}). Records an initial page view, keeps the
+ * client aware of the current locale via `intlayerStore`, and wires node-level
+ * content exposures.
+ *
+ * The module is loaded via a dynamic `import()` so it ships as its own async
+ * chunk, off the critical rendering path. Apps that don't opt in
+ * (`analytics.enabled !== true`) pay nothing — the whole body is guarded by
+ * `INTLAYER_ANALYTICS_ENABLED` and dead-code-eliminated at build time.
+ */
+export declare const useAnalytics: () => void;

package/dist/analytics/useAnalytics.js

@@ -0,0 +1,66 @@
+import { isEnabled } from '@intlayer/analytics/isEnabled';
+import { onDestroy, onMount } from 'svelte';
+import { intlayerStore } from '../client/intlayerStore';
+import { setExposureSink } from './exposureSink';
+/**
+ * Initializes the Intlayer analytics client singleton when analytics is
+ * enabled (mirrors {@link useEditor}). Records an initial page view, keeps the
+ * client aware of the current locale via `intlayerStore`, and wires node-level
+ * content exposures.
+ *
+ * The module is loaded via a dynamic `import()` so it ships as its own async
+ * chunk, off the critical rendering path. Apps that don't opt in
+ * (`analytics.enabled !== true`) pay nothing — the whole body is guarded by
+ * `INTLAYER_ANALYTICS_ENABLED` and dead-code-eliminated at build time.
+ */
+export const useAnalytics = () => {
+    if (process.env.INTLAYER_ANALYTICS_ENABLED === 'false' || !isEnabled)
+        return;
+    let unsubscribeLocale = null;
+    let cancelled = false;
+    // Tracks whether initAnalyticsClient actually ran, so cleanup never calls
+    // stopAnalyticsClient for an init that was cancelled — that would decrement
+    // the shared reference count once too many.
+    let initialized = false;
+    onMount(() => {
+        import('@intlayer/analytics')
+            .then(({ initAnalyticsClient, buildContentExposure }) => {
+            if (cancelled)
+                return;
+            const client = initAnalyticsClient();
+            initialized = true;
+            // Svelte stores call the subscriber with the current value on
+            // subscription — that first call seeds the locale; later calls are
+            // locale switches, which are a real signal worth a page view.
+            let isInitialStoreValue = true;
+            unsubscribeLocale = intlayerStore.subscribe(({ locale }) => {
+                if (!locale)
+                    return;
+                client.setLocale(locale);
+                if (isInitialStoreValue) {
+                    isInitialStoreValue = false;
+                    return;
+                }
+                client.trackPageView({ reason: 'locale_change' });
+            });
+            client.trackPageView({ reason: 'initial' });
+            // Route node-level exposures (from the interpreter plugins) into the
+            // client. Serialization happens here, off the hot render path.
+            setExposureSink((input) => client.trackContentExposure(buildContentExposure(input)));
+        })
+            .catch(() => {
+            /* chunk failed to load — analytics stays a no-op */
+        });
+    });
+    onDestroy(() => {
+        cancelled = true;
+        unsubscribeLocale?.();
+        setExposureSink(null);
+        import('@intlayer/analytics')
+            .then(({ stopAnalyticsClient }) => {
+            if (initialized)
+                stopAnalyticsClient();
+        })
+            .catch(() => { });
+    });
+};

package/dist/analytics/useConversion.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Parameters describing a conversion to record.
+ */
+export type ConversionParams = {
+    /** The experiment this conversion is attributed to. */
+    experimentKey: string;
+    /** The variant the session was assigned. */
+    variant: string;
+    /** The goal reached (e.g. `"signup"`, `"cta_click"`). */
+    goal: string;
+    /** Optional numeric value (e.g. revenue). */
+    value?: number;
+};
+/**
+ * Returns a `trackConversion` callback for content A/B testing. Safe to call
+ * from any component: it resolves to a no-op when analytics is disabled or the
+ * client has not been initialized yet.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const trackConversion = useConversion();
+ * </script>
+ * <button on:click={() => trackConversion({
+ *   experimentKey: 'homepage-hero', variant: 'b', goal: 'cta_click',
+ * })}>Get started</button>
+ * ```
+ */
+export declare const useConversion: () => (params: ConversionParams) => void;

package/dist/analytics/useConversion.js

@@ -0,0 +1,28 @@
+import { isEnabled } from '@intlayer/analytics/isEnabled';
+/**
+ * Returns a `trackConversion` callback for content A/B testing. Safe to call
+ * from any component: it resolves to a no-op when analytics is disabled or the
+ * client has not been initialized yet.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const trackConversion = useConversion();
+ * </script>
+ * <button on:click={() => trackConversion({
+ *   experimentKey: 'homepage-hero', variant: 'b', goal: 'cta_click',
+ * })}>Get started</button>
+ * ```
+ */
+export const useConversion = () => {
+    return (params) => {
+        if (process.env.INTLAYER_ANALYTICS_ENABLED === 'false' || !isEnabled) {
+            return;
+        }
+        import('@intlayer/analytics')
+            .then(({ getGlobalAnalyticsClient }) => {
+            getGlobalAnalyticsClient()?.trackConversion(params);
+        })
+            .catch(() => { });
+    };
+};

package/dist/analytics/useExperiment.d.ts

@@ -0,0 +1,40 @@
+import { type Readable } from 'svelte/store';
+/**
+ * The state of an A/B experiment for the current session.
+ */
+export type ExperimentState = {
+    /**
+     * The variant assigned to this session. Until assignment resolves (and on
+     * the server, or when analytics is disabled), this is the first variant —
+     * treat the first variant as the control.
+     */
+    variant: Readable<string>;
+    /**
+     * `true` once the variant has been deterministically assigned and its
+     * exposure recorded. Useful to defer rendering when a flash of the control
+     * variant is not acceptable.
+     */
+    isAssigned: Readable<boolean>;
+};
+/**
+ * Assigns this session to a variant of an A/B experiment and records the
+ * exposure, scoped to `experimentKey`, so the backend can compute per-variant
+ * conversion rates against `useConversion` events.
+ *
+ * Assignment is deterministic per session (no server round-trip, stable across
+ * re-mounts). The exposure is recorded once per mount.
+ *
+ * @param experimentKey - Unique key identifying the experiment.
+ * @param variants - The candidate variant names; the first one is the control.
+ * @param weights - Optional relative weights, one per variant (e.g. `[9, 1]`).
+ * @returns The {@link ExperimentState} for this session.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const { variant } = useExperiment('homepage-hero', ['a', 'b']);
+ *   const content = useIntlayer($variant === 'b' ? 'hero-b' : 'hero');
+ * </script>
+ * ```
+ */
+export declare const useExperiment: (experimentKey: string, variants: string[], weights?: number[]) => ExperimentState;

package/dist/analytics/useExperiment.js

@@ -0,0 +1,68 @@
+import { isEnabled } from '@intlayer/analytics/isEnabled';
+import { onDestroy, onMount } from 'svelte';
+import { readonly, writable } from 'svelte/store';
+/**
+ * Assigns this session to a variant of an A/B experiment and records the
+ * exposure, scoped to `experimentKey`, so the backend can compute per-variant
+ * conversion rates against `useConversion` events.
+ *
+ * Assignment is deterministic per session (no server round-trip, stable across
+ * re-mounts). The exposure is recorded once per mount.
+ *
+ * @param experimentKey - Unique key identifying the experiment.
+ * @param variants - The candidate variant names; the first one is the control.
+ * @param weights - Optional relative weights, one per variant (e.g. `[9, 1]`).
+ * @returns The {@link ExperimentState} for this session.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const { variant } = useExperiment('homepage-hero', ['a', 'b']);
+ *   const content = useIntlayer($variant === 'b' ? 'hero-b' : 'hero');
+ * </script>
+ * ```
+ */
+export const useExperiment = (experimentKey, variants, weights) => {
+    const variant = writable(variants[0] ?? '');
+    const isAssigned = writable(false);
+    let cancelled = false;
+    let initialized = false;
+    onMount(() => {
+        if (process.env.INTLAYER_ANALYTICS_ENABLED === 'false' || !isEnabled) {
+            return;
+        }
+        import('@intlayer/analytics')
+            .then(({ initAnalyticsClient }) => {
+            if (cancelled)
+                return;
+            // Ref-counted: guarantees a live client even when this hook's import
+            // resolves before the provider's. Balanced by stop on destroy.
+            const client = initAnalyticsClient();
+            initialized = true;
+            const assigned = client.getVariant(experimentKey, variants, weights);
+            variant.set(assigned);
+            isAssigned.set(true);
+            // Experiment-level exposure — the denominator of the conversion rate.
+            client.trackContentExposure({
+                dictionaryKey: experimentKey,
+                keyPath: '',
+                nodeType: 'experiment',
+                experimentKey,
+                variant: assigned,
+            });
+        })
+            .catch(() => {
+            /* chunk failed to load — control variant stays in place */
+        });
+    });
+    onDestroy(() => {
+        cancelled = true;
+        import('@intlayer/analytics')
+            .then(({ stopAnalyticsClient }) => {
+            if (initialized)
+                stopAnalyticsClient();
+        })
+            .catch(() => { });
+    });
+    return { variant: readonly(variant), isAssigned: readonly(isAssigned) };
+};

package/dist/client/setupIntlayer.svelte.js

@@ -1,5 +1,6 @@
 import { internationalization } from '@intlayer/config/built';
 import { setIntlayerIdentifier } from '@intlayer/config/client';
+import { useAnalytics } from '../analytics/useAnalytics';
 import { useEditor } from '../editor/useEditor';
 import { setIntlayerContext } from './intlayerContext';
 import { intlayerStore } from './intlayerStore';
@@ -23,6 +24,7 @@ import { intlayerStore } from './intlayerStore';
 export const setupIntlayer = (initialLocale) => {
     setIntlayerIdentifier();
     useEditor();
+    useAnalytics();
     // Create Reactive State (Svelte 5)
     // We make the locale a "rune" so updates propagate
     let locale = $state(initialLocale);

package/dist/index.d.ts

@@ -4,6 +4,7 @@ declare module '@intlayer/core/interpreter' {
     interface IInterpreterPlugin<T, S, L extends LocalesValues> extends IInterpreterPluginSvelte<T, S, L> {
     }
 }
+export * from './analytics';
 export * from './client';
 export * from './getDictionary';
 export * from './getIntlayer';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './analytics';
 export * from './client';
 export * from './getDictionary';
 export * from './getIntlayer';

package/dist/markdownLazyRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/markdownLazyRenderer.test.js

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest';
+const mockConfig = vi.hoisted(() => ({
+    editor: { enabled: false },
+    internationalization: { defaultLocale: 'en', locales: ['en'] },
+}));
+vi.mock('@intlayer/config/built', () => ({
+    default: mockConfig,
+    editor: mockConfig.editor,
+    internationalization: mockConfig.internationalization,
+}));
+/**
+ * `renderIntlayerNode` is where the plugin hands off the Svelte component that
+ * will actually render the markdown. Capturing its arguments shows whether a
+ * renderer was resolved, or whether the node fell back to raw text because the
+ * lazily imported chunk had not landed yet.
+ */
+const capturedRenderArguments = vi.hoisted(() => []);
+vi.mock('./renderIntlayerNode', () => ({
+    renderIntlayerNode: (args) => {
+        capturedRenderArguments.push(args);
+        const node = () => undefined;
+        Object.defineProperty(node, 'value', { value: args.value });
+        return node;
+    },
+}));
+/**
+ * Runs the markdown string plugin against a raw markdown source and reports the
+ * component it selected for rendering.
+ */
+const resolveMarkdownRenderer = async () => {
+    const { markdownStringPlugin } = await import('./plugins');
+    capturedRenderArguments.length = 0;
+    markdownStringPlugin.transform('Some **bold** text', { dictionaryKey: 'markdown-lazy', keyPath: [] }, (() => ({})));
+    // The plugin hands over a promise so a not-yet-loaded chunk is awaited rather
+    // than snapshotted as `null`.
+    return await Promise.resolve(capturedRenderArguments.at(-1)?.component);
+};
+describe('markdown renderer lazy-loading', () => {
+    it('resolves a renderer once the lazily imported chunk has landed', async () => {
+        vi.resetModules();
+        await import('./plugins');
+        // Let the module-scope dynamic imports settle before interpreting.
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(await resolveMarkdownRenderer()).toBeTruthy();
+    });
+    it('resolves a renderer even when interpreted before the chunk lands', async () => {
+        vi.resetModules();
+        // No await here: this mirrors a dictionary read during the first synchronous
+        // render pass, while the markdown chunk is still in flight.
+        expect(await resolveMarkdownRenderer()).toBeTruthy();
+    });
+});

package/dist/plugins.js

@@ -1,6 +1,7 @@
 import { editor, internationalization } from '@intlayer/config/built';
-import { conditionPlugin, enumerationPlugin, fallbackPlugin, filePlugin, genderPlugin, nestedPlugin, pluralPlugin, translationPlugin, } from '@intlayer/core/interpreter';
+import { conditionPlugin, enumerationPlugin, fallbackPlugin, filePlugin, genderPlugin, isInterpolableWrapperNode, nestedPlugin, pluralPlugin, transformInterpolableNode, translationPlugin, } from '@intlayer/core/interpreter';
 import * as NodeTypes from '@intlayer/types/nodeType';
+import { reportExposure } from './analytics/exposureSink';
 import { default as ContentSelector } from './editor/ContentSelector.svelte';
 import { HTMLRenderer } from './html/index';
 import { renderIntlayerNode } from './renderIntlayerNode';
@@ -9,28 +10,62 @@ import { renderIntlayerNode } from './renderIntlayerNode';
 // entirely when the feature is disabled at build time.
 let _getMarkdownMetadata = null;
 let _compile = null;
-let _MarkdownMetadataRenderer = null;
-let _MarkdownMetadataWithSelector = null;
-let _MarkdownRenderer = null;
-let _MarkdownWithSelector = null;
 let _svelteHtmlRuntime = null;
 let _HTMLWithSelector = null;
+/**
+ * Kept as a promise rather than being unwrapped into module-level variables:
+ * a dictionary interpreted during the first synchronous render would otherwise
+ * snapshot a still-`null` renderer, and `IntlayerNodeWrapper` would silently
+ * fall back to printing the raw markdown source (`**bold**`) forever.
+ */
+let markdownRendererModulesPromise = null;
 if (process.env.INTLAYER_NODE_TYPE_MARKDOWN !== 'false') {
     void import('@intlayer/core/markdown').then((m) => {
         _getMarkdownMetadata = m.getMarkdownMetadata;
         _compile = m.compile;
     });
-    void Promise.all([
-        import('./markdown/MarkdownMetadataRenderer.svelte').then((m) => (_MarkdownMetadataRenderer = m.default)),
-        import('./markdown/MarkdownMetadataWithSelector.svelte').then((m) => (_MarkdownMetadataWithSelector = m.default)),
-        import('./markdown/MarkdownRenderer.svelte').then((m) => (_MarkdownRenderer = m.default)),
-        import('./markdown/MarkdownWithSelector.svelte').then((m) => (_MarkdownWithSelector = m.default)),
-        import('./markdown/runtime').then((m) => (_svelteHtmlRuntime = m.svelteHtmlRuntime)),
-    ]);
+    markdownRendererModulesPromise = Promise.all([
+        import('./markdown/MarkdownMetadataRenderer.svelte'),
+        import('./markdown/MarkdownMetadataWithSelector.svelte'),
+        import('./markdown/MarkdownRenderer.svelte'),
+        import('./markdown/MarkdownWithSelector.svelte'),
+        import('./markdown/runtime'),
+    ]).then(([metadataRendererModule, metadataWithSelectorModule, rendererModule, withSelectorModule, runtimeModule,]) => {
+        _svelteHtmlRuntime = runtimeModule.svelteHtmlRuntime;
+        return {
+            MarkdownMetadataRenderer: metadataRendererModule.default,
+            MarkdownMetadataWithSelector: metadataWithSelectorModule.default,
+            MarkdownRenderer: rendererModule.default,
+            MarkdownWithSelector: withSelectorModule.default,
+        };
+    });
 }
 if (process.env.INTLAYER_NODE_TYPE_HTML !== 'false') {
     void import('./html/HTMLWithSelector.svelte').then((m) => (_HTMLWithSelector = m.default));
 }
+/**
+ * Resolves the Svelte component that renders a markdown node, awaiting the
+ * code-split chunk so the renderer is never lost to a load race.
+ *
+ * @param pickMetadataRenderer - Selects the metadata renderer instead of the
+ * content renderer.
+ * @returns A promise for the renderer, or `undefined` when markdown nodes are
+ * tree-shaken out of the bundle.
+ */
+const resolveMarkdownRenderer = (pickMetadataRenderer = false) => {
+    const useEditorSelector = process.env.INTLAYER_EDITOR_ENABLED !== 'false' && editor.enabled;
+    return markdownRendererModulesPromise?.then((modules) => {
+        if (pickMetadataRenderer) {
+            return useEditorSelector
+                ? (modules.MarkdownMetadataWithSelector ??
+                    modules.MarkdownMetadataRenderer)
+                : modules.MarkdownMetadataRenderer;
+        }
+        return useEditorSelector
+            ? (modules.MarkdownWithSelector ?? modules.MarkdownRenderer)
+            : modules.MarkdownRenderer;
+    });
+};
 /**
  * Basic Intlayer node plugins for content handling
  * These handle the core content transformation logic
@@ -40,13 +75,25 @@ export const intlayerNodePlugins = {
     canHandle: (node) => typeof node === 'bigint' ||
         typeof node === 'string' ||
         typeof node === 'number',
-    transform: (node, { children, ...rest }) => renderIntlayerNode({
-        value: children ?? node,
-        component: process.env.INTLAYER_EDITOR_ENABLED !== 'false' && editor.enabled
-            ? ContentSelector
-            : undefined,
-        props: rest,
-    }),
+    transform: (node, { children, ...rest }) => {
+        // Node-level analytics: record which content is resolved for display.
+        // No-op (and dead-code-eliminated) when analytics is disabled.
+        if (process.env.INTLAYER_ANALYTICS_ENABLED !== 'false') {
+            reportExposure({
+                dictionaryKey: rest.dictionaryKey,
+                keyPath: rest.keyPath,
+                locale: rest.locale,
+                nodeType: 'text',
+            });
+        }
+        return renderIntlayerNode({
+            value: children ?? node,
+            component: process.env.INTLAYER_EDITOR_ENABLED !== 'false' && editor.enabled
+                ? ContentSelector
+                : undefined,
+            props: rest,
+        });
+    },
 };
 /**
  * Svelte-specific node plugins for handling basic content types
@@ -119,8 +166,14 @@ export const insertionPlugin = process.env.INTLAYER_NODE_TYPE_INSERTION === 'fal
             /** Insertion string plugin. Replaces string node with a component that render the insertion. */
             const insertionStringPlugin = {
                 id: 'insertion-string-plugin',
-                canHandle: (node) => typeof node === 'string',
+                canHandle: (node) => typeof node === 'string' || isInterpolableWrapperNode(node),
                 transform: (node, subProps, deepTransformNode) => {
+                    // `html()`/`markdown()` nodes carry their `{{ … }}` placeholders
+                    // inside a raw string. Interpolate into that string, then re-run
+                    // the transform so the html/markdown renderer applies afterwards.
+                    if (isInterpolableWrapperNode(node)) {
+                        return (values) => transformInterpolableNode(node, values, subProps, props.plugins, deepTransformNode);
+                    }
                     const transformedResult = deepTransformNode(node, {
                         ...subProps,
                         children: node,
@@ -177,11 +230,7 @@ export const markdownStringPlugin = process.env.INTLAYER_NODE_TYPE_MARKDOWN ===
                     !metadataNode,
                 transform: (metadataNode, props) => renderIntlayerNode({
                     value: metadataNode,
-                    component: process.env.INTLAYER_EDITOR_ENABLED !== 'false' &&
-                        editor.enabled
-                        ? (_MarkdownMetadataWithSelector ??
-                            _MarkdownMetadataRenderer)
-                        : _MarkdownMetadataRenderer,
+                    component: resolveMarkdownRenderer(true),
                     props: {
                         ...rest,
                         value: node, // The full markdown string
@@ -198,10 +247,7 @@ export const markdownStringPlugin = process.env.INTLAYER_NODE_TYPE_MARKDOWN ===
             const render = (components) => {
                 const nodeResult = renderIntlayerNode({
                     value: node,
-                    component: process.env.INTLAYER_EDITOR_ENABLED !== 'false' &&
-                        editor.enabled
-                        ? (_MarkdownWithSelector ?? _MarkdownRenderer)
-                        : _MarkdownRenderer,
+                    component: resolveMarkdownRenderer(),
                     props: {
                         ...rest,
                         value: node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "9.0.0-canary.9",
+  "version": "9.0.0",
   "description": "Easily internationalize i18n your Svelte applications with type-safe multilingual content management.",
   "keywords": [
     "intlayer",
@@ -82,31 +82,34 @@
     "typecheck": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@intlayer/api": "9.0.0-canary.9",
-    "@intlayer/config": "9.0.0-canary.9",
-    "@intlayer/core": "9.0.0-canary.9",
-    "@intlayer/editor": "9.0.0-canary.9",
-    "@intlayer/types": "9.0.0-canary.9"
+    "@intlayer/api": "9.0.0",
+    "@intlayer/config": "9.0.0",
+    "@intlayer/core": "9.0.0",
+    "@intlayer/editor": "9.0.0",
+    "@intlayer/types": "9.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
-    "@sveltejs/package": "2.5.7",
-    "@sveltejs/vite-plugin-svelte": "7.1.2",
-    "@types/node": "25.9.4",
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "@types/node": "26.1.1",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "@utils/tsdown-config": "1.0.4",
     "rimraf": "6.1.3",
-    "svelte": "5.55.8",
-    "svelte-check": "4.4.8",
-    "tsdown": "0.21.10",
-    "typescript": "6.0.3",
-    "vite": "8.1.0",
-    "vitest": "4.1.9"
+    "svelte": "5.56.7",
+    "svelte-check": "4.7.3",
+    "tsdown": "0.22.13",
+    "typescript": "5.9.3",
+    "vite": "8.1.5",
+    "vitest": "4.1.10"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"
   },
+  "optionalDependencies": {
+    "@intlayer/analytics": "9.0.0"
+  },
   "engines": {
     "node": ">=14.18"
   }