svelte-intlayer 8.5.2 → 8.6.1

package/dist/IntlayerNodeWrapper.svelte

@@ -9,10 +9,9 @@
     {value}
   </svelte:element>
 {:else if typeof Renderer === 'function'}
-  <svelte:component this={Renderer} {...rendererProps}>
+  <Renderer {...rendererProps}>
     {value}
-  </svelte:component>
+  </Renderer>
 {:else}
   {value}
 {/if}
-

package/dist/client/useLocaleStorage.js

@@ -1,10 +1,10 @@
 import { localeStorageOptions } from '@intlayer/core/localization';
-import { getLocaleFromStorage, LocaleStorage, setLocaleInStorage as setLocaleInStorageCore, } from '@intlayer/core/utils';
+import { getLocaleFromStorageClient, LocaleStorageClient, setLocaleInStorageClient as setLocaleInStorageCore, } from '@intlayer/core/utils';
 import { readable } from 'svelte/store';
 /**
  * Get the locale cookie
  */
-export const localeInStorage = getLocaleFromStorage(localeStorageOptions);
+export const localeInStorage = getLocaleFromStorageClient(localeStorageOptions);
 /**
  * @deprecated Use localeInStorage instead
  *
@@ -28,7 +28,7 @@ export const setLocaleCookie = setLocaleInStorage;
  * Composable that provides the locale storage and a function to set it
  */
 export const useLocaleStorage = (isCookieEnabled) => {
-    const storage = LocaleStorage({
+    const storage = LocaleStorageClient({
         ...localeStorageOptions,
         isCookieEnabled,
     });

package/dist/format/useNumber.d.ts

@@ -4,6 +4,6 @@
  * @returns {import('svelte/store').Readable<(...args: Parameters<typeof number>) => string>}
  * A store containing a number formatting function bound to the active locale.
  */
-export declare const useNumber: () => import("svelte/store").Readable<(value: string | number, options?: (Intl.NumberFormatOptions & {
+export declare const useNumber: () => import("svelte/store").Readable<(value: string | number, args_1?: (Intl.NumberFormatOptions & {
     locale?: import("@intlayer/types/module_augmentation").LocalesValues;
 }) | undefined) => string>;

package/dist/format/usePercentage.d.ts

@@ -1,3 +1,3 @@
-export declare const usePercentage: () => import("svelte/store").Readable<(value: string | number, options?: (Intl.NumberFormatOptions & {
+export declare const usePercentage: () => import("svelte/store").Readable<(value: string | number, args_1?: (Intl.NumberFormatOptions & {
     locale?: import("@intlayer/types/module_augmentation").LocalesValues;
 }) | undefined) => string>;

package/dist/html/index.d.ts

@@ -1,5 +1,5 @@
 import { type RenderHTMLOptions } from './context';
-export { getHTMLContext, type HTMLContext, type RenderHTMLOptions, setHTMLContext, setHTMLContext as setIntlayerHTML, } from './context';
+export { getHTMLContext, type RenderHTMLOptions, setHTMLContext, setHTMLContext as setIntlayerHTML, } from './context';
 export { default as HTMLProvider } from './HTMLProvider.svelte';
 export { default as HTMLRenderer } from './HTMLRenderer.svelte';
 export type RenderHTMLProps = RenderHTMLOptions;

package/dist/html/index.js

@@ -4,7 +4,45 @@ export { getHTMLContext, setHTMLContext, setHTMLContext as setIntlayerHTML, } fr
 export { default as HTMLProvider } from './HTMLProvider.svelte';
 export { default as HTMLRenderer } from './HTMLRenderer.svelte';
 export const renderHTML = (html, options = {}) => {
-    return getHTML(html, (options.components || {}));
+    const components = options.components || {};
+    // Proxy handles standard HTML tags lazily without a hardcoded list
+    const wrappedComponents = new Proxy(components, {
+        get(target, prop) {
+            if (typeof prop === 'string' && prop in target) {
+                return target[prop];
+            }
+            // Fallback: Lazily generate a wrapper for standard lowercase HTML tags
+            if (typeof prop === 'string' &&
+                /^[a-z][a-z0-9]*$/.test(prop) &&
+                typeof document !== 'undefined') {
+                return ({ children = [], ...props }) => {
+                    const element = document.createElement(prop);
+                    // Apply props as attributes
+                    for (const [key, value] of Object.entries(props)) {
+                        if (key.startsWith('on') && typeof value === 'function') {
+                            const eventName = key.slice(2).toLowerCase();
+                            element.addEventListener(eventName, value);
+                        }
+                        else if (value !== undefined && value !== null) {
+                            element.setAttribute(key, String(value));
+                        }
+                    }
+                    // Append children
+                    for (const child of children) {
+                        if (typeof child === 'string') {
+                            element.appendChild(document.createTextNode(child));
+                        }
+                        else if (child instanceof Node) {
+                            element.appendChild(child);
+                        }
+                    }
+                    return element;
+                };
+            }
+            return undefined;
+        },
+    });
+    return getHTML(html, wrappedComponents);
 };
 export const useHTMLRenderer = (options = {}) => {
     const context = getHTMLContext();

package/dist/plugins.d.ts

@@ -60,6 +60,9 @@ export type MarkdownCond<T, _S, L extends LocalesValues> = T extends {
     metadata: DeepTransformContent<U, L>;
 } & any : never;
 export declare const markdownPlugin: Plugins;
+/** ---------------------------------------------
+ * HTML PLUGIN
+ * --------------------------------------------- */
 export type HTMLPluginCond<T> = T extends {
     nodeType: NodeType | string;
     [NodeTypes.HTML]: infer I;

package/dist/plugins.js

@@ -1,9 +1,8 @@
 import configuration from '@intlayer/config/built';
-import { conditionPlugin, enumerationPlugin, filePlugin, genderPlugin, getHTML, nestedPlugin, translationPlugin, } from '@intlayer/core/interpreter';
-import { HTML_TAGS, } from '@intlayer/core/transpiler';
-import { isEnabled } from '@intlayer/editor/isEnabled';
+import { conditionPlugin, enumerationPlugin, fallbackPlugin, filePlugin, genderPlugin, nestedPlugin, translationPlugin, } from '@intlayer/core/interpreter';
 import * as NodeTypes from '@intlayer/types/nodeType';
 import { default as ContentSelector } from './editor/ContentSelector.svelte';
+import { HTMLRenderer } from './html/index';
 import { renderIntlayerNode } from './renderIntlayerNode';
 // Lazy pre-load heavy modules — creates separate code-split chunks
 let _getMarkdownMetadata = null;
@@ -28,17 +27,21 @@ void Promise.all([
  * Basic Intlayer node plugins for content handling
  * These handle the core content transformation logic
  */
-export const intlayerNodePlugins = {
-    id: 'intlayer-node-plugin',
-    canHandle: (node) => typeof node === 'bigint' ||
-        typeof node === 'string' ||
-        typeof node === 'number',
-    transform: (node, { children, ...rest }) => renderIntlayerNode({
-        value: children ?? node,
-        component: isEnabled ? ContentSelector : undefined,
-        props: rest,
-    }),
-};
+export const intlayerNodePlugins = process.env.INTLAYER_NODE_TYPE_INTLAYER_NODE === 'false'
+    ? fallbackPlugin
+    : {
+        id: 'intlayer-node-plugin',
+        canHandle: (node) => typeof node === 'bigint' ||
+            typeof node === 'string' ||
+            typeof node === 'number',
+        transform: (node, { children, ...rest }) => renderIntlayerNode({
+            value: children ?? node,
+            component: configuration.editor.enabled
+                ? ContentSelector
+                : undefined,
+            props: rest,
+        }),
+    };
 /**
  * Svelte-specific node plugins for handling basic content types
  * These plugins handle strings, numbers, and bigints in Svelte applications
@@ -94,234 +97,179 @@ const splitAndJoinInsertion = (template, values) => {
     return parts;
 };
 /** Insertion plugin for Svelte. Handles component insertion. */
-export const insertionPlugin = {
-    id: 'insertion-plugin',
-    canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.INSERTION,
-    transform: (node, props, deepTransformNode) => {
-        const newKeyPath = [
-            ...props.keyPath,
-            {
-                type: NodeTypes.INSERTION,
-            },
-        ];
-        const children = node[NodeTypes.INSERTION];
-        /** Insertion string plugin. Replaces string node with a component that render the insertion. */
-        const insertionStringPlugin = {
-            id: 'insertion-string-plugin',
-            canHandle: (node) => typeof node === 'string',
-            transform: (node, subProps, deepTransformNode) => {
-                const transformedResult = deepTransformNode(node, {
-                    ...subProps,
-                    children: node,
-                    plugins: [
-                        ...(props.plugins ?? []).filter((plugin) => plugin.id !== 'intlayer-node-plugin'),
-                    ],
-                });
-                return (values) => {
-                    const result = splitAndJoinInsertion(transformedResult, values);
-                    return deepTransformNode(result, {
+export const insertionPlugin = process.env.INTLAYER_NODE_TYPE_INSERTION === 'false'
+    ? fallbackPlugin
+    : {
+        id: 'insertion-plugin',
+        canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.INSERTION,
+        transform: (node, props, deepTransformNode) => {
+            const newKeyPath = [
+                ...props.keyPath,
+                {
+                    type: NodeTypes.INSERTION,
+                },
+            ];
+            const children = node[NodeTypes.INSERTION];
+            /** Insertion string plugin. Replaces string node with a component that render the insertion. */
+            const insertionStringPlugin = {
+                id: 'insertion-string-plugin',
+                canHandle: (node) => typeof node === 'string',
+                transform: (node, subProps, deepTransformNode) => {
+                    const transformedResult = deepTransformNode(node, {
                         ...subProps,
-                        plugins: props.plugins,
-                        children: result,
+                        children: node,
+                        plugins: [
+                            ...(props.plugins ?? []).filter((plugin) => plugin.id !== 'intlayer-node-plugin'),
+                        ],
                     });
-                };
-            },
-        };
-        const result = deepTransformNode(children, {
-            ...props,
-            children,
-            keyPath: newKeyPath,
-            plugins: [insertionStringPlugin, ...(props.plugins ?? [])],
-        });
-        if (typeof children === 'object' &&
-            children !== null &&
-            'nodeType' in children &&
-            [NodeTypes.ENUMERATION, NodeTypes.CONDITION].includes(children.nodeType)) {
-            return (values) => (arg) => {
-                const func = result;
-                const inner = func(arg);
-                if (typeof inner === 'function') {
-                    return inner(values);
-                }
-                return inner;
-            };
-        }
-        return result;
-    },
-};
-/** Markdown string plugin. Replaces string node with a component that render the markdown. */
-export const markdownStringPlugin = {
-    id: 'markdown-string-plugin',
-    canHandle: (node) => typeof node === 'string',
-    transform: (node, props, deepTransformNode) => {
-        const { ...rest } = props;
-        const metadata = _getMarkdownMetadata?.(node) ?? {};
-        const metadataPlugins = {
-            id: 'markdown-metadata-plugin',
-            canHandle: (metadataNode) => typeof metadataNode === 'string' ||
-                typeof metadataNode === 'number' ||
-                typeof metadataNode === 'boolean' ||
-                !metadataNode,
-            transform: (metadataNode, props) => renderIntlayerNode({
-                value: metadataNode,
-                component: isEnabled
-                    ? (_MarkdownMetadataWithSelector ?? _MarkdownMetadataRenderer)
-                    : _MarkdownMetadataRenderer,
-                props: {
-                    ...rest,
-                    value: node, // The full markdown string
-                    metadataKeyPath: props.keyPath,
-                },
-            }),
-        };
-        // Transform metadata while keeping the same structure
-        const metadataNodes = deepTransformNode(metadata, {
-            plugins: [metadataPlugins],
-            dictionaryKey: rest.dictionaryKey,
-            keyPath: [],
-        }) ?? {};
-        const render = (components) => {
-            const nodeResult = renderIntlayerNode({
-                value: node,
-                component: isEnabled
-                    ? (_MarkdownWithSelector ?? _MarkdownRenderer)
-                    : _MarkdownRenderer,
-                props: {
-                    ...rest,
-                    value: node,
-                    ...components,
-                },
-                additionalProps: {
-                    metadata: metadataNodes,
+                    return (values) => {
+                        const result = splitAndJoinInsertion(transformedResult, values);
+                        return deepTransformNode(result, {
+                            ...subProps,
+                            plugins: props.plugins,
+                            children: result,
+                        });
+                    };
                 },
+            };
+            const result = deepTransformNode(children, {
+                ...props,
+                children,
+                keyPath: newKeyPath,
+                plugins: [insertionStringPlugin, ...(props.plugins ?? [])],
             });
-            return new Proxy(nodeResult, {
-                get(target, prop, receiver) {
-                    if (prop === 'value') {
-                        return node;
-                    }
-                    if (prop === 'metadata') {
-                        return metadataNodes;
-                    }
-                    if (prop === 'use') {
-                        return (newComponents) => render(newComponents);
+            if (typeof children === 'object' &&
+                children !== null &&
+                'nodeType' in children &&
+                [NodeTypes.ENUMERATION, NodeTypes.CONDITION].includes(children.nodeType)) {
+                return (values) => (arg) => {
+                    const func = result;
+                    const inner = func(arg);
+                    if (typeof inner === 'function') {
+                        return inner(values);
                     }
-                    if (prop === 'toString') {
-                        return () => _compile?.(node, { runtime: _svelteHtmlRuntime, components: components }, {}) ?? node;
-                    }
-                    return Reflect.get(target, prop, receiver);
-                },
-            });
-        };
-        return render();
-    },
-};
-export const markdownPlugin = {
-    id: 'markdown-plugin',
-    canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.MARKDOWN,
-    transform: (node, props, deepTransformNode) => {
-        const newKeyPath = [
-            ...props.keyPath,
-            {
-                type: NodeTypes.MARKDOWN,
-            },
-        ];
-        const children = node[NodeTypes.MARKDOWN];
-        return deepTransformNode(children, {
-            ...props,
-            children,
-            keyPath: newKeyPath,
-            plugins: [markdownStringPlugin, ...(props.plugins ?? [])],
-        });
-    },
-};
-/**
- * Create default HTML tag components using DOM API.
- * Each component creates the corresponding HTML element with its props and children.
- * Note: This approach works in browser environments.
- */
-const createDefaultHTMLComponents = () => {
-    const components = {};
-    for (const tag of HTML_TAGS) {
-        components[tag] = ({ children = [], ...props }) => {
-            const element = document.createElement(tag);
-            // Apply props as attributes
-            for (const [key, value] of Object.entries(props)) {
-                if (key.startsWith('on') && typeof value === 'function') {
-                    // Handle event listeners
-                    const eventName = key.slice(2).toLowerCase();
-                    element.addEventListener(eventName, value);
-                }
-                else if (value !== undefined && value !== null) {
-                    element.setAttribute(key, String(value));
-                }
-            }
-            // Append children
-            for (const child of children) {
-                if (typeof child === 'string') {
-                    element.appendChild(document.createTextNode(child));
-                }
-                else if (child instanceof Node) {
-                    element.appendChild(child);
-                }
+                    return inner;
+                };
             }
-            return element;
-        };
-    }
-    return components;
-};
-let defaultHTMLComponents = null;
-const getDefaultHTMLComponents = () => {
-    if (typeof document === 'undefined') {
-        // SSR fallback: return empty object, user must provide all components
-        return {};
-    }
-    if (!defaultHTMLComponents) {
-        defaultHTMLComponents = createDefaultHTMLComponents();
-    }
-    return defaultHTMLComponents;
-};
-/** HTML plugin. Replaces node with a function that takes components => HTMLElement[]. */
-export const htmlPlugin = {
-    id: 'html-plugin',
-    canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.HTML,
-    transform: (node) => {
-        const htmlString = node[NodeTypes.HTML];
-        const _tags = node.tags ?? [];
-        const render = (userComponents) => {
-            const mergedComponents = {
-                ...getDefaultHTMLComponents(),
-                ...userComponents,
+            return result;
+        },
+    };
+/** Markdown string plugin. Replaces string node with a component that render the markdown. */
+export const markdownStringPlugin = process.env.INTLAYER_NODE_TYPE_MARKDOWN === 'false'
+    ? fallbackPlugin
+    : {
+        id: 'markdown-string-plugin',
+        canHandle: (node) => typeof node === 'string',
+        transform: (node, props, deepTransformNode) => {
+            const { ...rest } = props;
+            const metadata = _getMarkdownMetadata?.(node) ?? {};
+            const metadataPlugins = {
+                id: 'markdown-metadata-plugin',
+                canHandle: (metadataNode) => typeof metadataNode === 'string' ||
+                    typeof metadataNode === 'number' ||
+                    typeof metadataNode === 'boolean' ||
+                    !metadataNode,
+                transform: (metadataNode, props) => renderIntlayerNode({
+                    value: metadataNode,
+                    component: configuration.editor.enabled
+                        ? (_MarkdownMetadataWithSelector ?? _MarkdownMetadataRenderer)
+                        : _MarkdownMetadataRenderer,
+                    props: {
+                        ...rest,
+                        value: node, // The full markdown string
+                        metadataKeyPath: props.keyPath,
+                    },
+                }),
             };
-            const result = getHTML(htmlString, mergedComponents);
-            const toStringFn = () => {
-                if (Array.isArray(result)) {
-                    return result
-                        .map((item) => typeof item === 'string'
-                        ? item
-                        : item.outerHTML || String(item))
-                        .join('');
-                }
-                return typeof result === 'string'
-                    ? result
-                    : result.outerHTML || String(result);
+            // Transform metadata while keeping the same structure
+            const metadataNodes = deepTransformNode(metadata, {
+                plugins: [metadataPlugins],
+                dictionaryKey: rest.dictionaryKey,
+                keyPath: [],
+            }) ?? {};
+            const render = (components) => {
+                const nodeResult = renderIntlayerNode({
+                    value: node,
+                    component: configuration.editor.enabled
+                        ? (_MarkdownWithSelector ?? _MarkdownRenderer)
+                        : _MarkdownRenderer,
+                    props: {
+                        ...rest,
+                        value: node,
+                        ...components,
+                    },
+                    additionalProps: {
+                        metadata: metadataNodes,
+                    },
+                });
+                return new Proxy(nodeResult, {
+                    get(target, prop, receiver) {
+                        if (prop === 'value') {
+                            return node;
+                        }
+                        if (prop === 'metadata') {
+                            return metadataNodes;
+                        }
+                        if (prop === 'use') {
+                            return (newComponents) => render(newComponents);
+                        }
+                        if (prop === 'toString') {
+                            return () => _compile?.(node, { runtime: _svelteHtmlRuntime, components: components }, {}) ?? node;
+                        }
+                        return Reflect.get(target, prop, receiver);
+                    },
+                });
             };
-            const target = typeof result === 'object' && result !== null ? result : {};
-            return new Proxy(target, {
-                get(t, prop) {
-                    if (prop === 'toString')
-                        return toStringFn;
-                    if (prop === 'use')
-                        return (userComponents) => render(userComponents);
-                    if (prop === 'value')
-                        return htmlString;
-                    return t[prop] ?? result[prop];
+            return render();
+        },
+    };
+export const markdownPlugin = process.env.INTLAYER_NODE_TYPE_MARKDOWN === 'false'
+    ? fallbackPlugin
+    : {
+        id: 'markdown-plugin',
+        canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.MARKDOWN,
+        transform: (node, props, deepTransformNode) => {
+            const newKeyPath = [
+                ...props.keyPath,
+                {
+                    type: NodeTypes.MARKDOWN,
                 },
+            ];
+            const children = node[NodeTypes.MARKDOWN];
+            return deepTransformNode(children, {
+                ...props,
+                children,
+                keyPath: newKeyPath,
+                plugins: [markdownStringPlugin, ...(props.plugins ?? [])],
             });
-        };
-        return render();
-    },
-};
+        },
+    };
+/** HTML plugin. Replaces node with a function that takes components => HTMLElement[]. */
+export const htmlPlugin = process.env.INTLAYER_NODE_TYPE_HTML === 'false'
+    ? fallbackPlugin
+    : {
+        id: 'html-plugin',
+        canHandle: (node) => typeof node === 'object' && node?.nodeType === NodeTypes.HTML,
+        transform: (node, props) => {
+            const htmlString = node[NodeTypes.HTML];
+            const _tags = node.tags ?? [];
+            // Type-safe render function that accepts properly typed components
+            const render = (userComponents = {}) => renderIntlayerNode({
+                ...props,
+                value: htmlString,
+                component: HTMLRenderer,
+                props: {
+                    ...props,
+                    value: htmlString,
+                    components: userComponents,
+                },
+                additionalProps: {
+                    use: (components) => render(components),
+                },
+            });
+            return render();
+        },
+    };
 /**
  * Get the plugins array for Svelte content transformation.
  * This function is used by both getIntlayer and getDictionary to ensure consistent plugin configuration.
@@ -338,4 +286,4 @@ export const getPlugins = (locale, fallback = true) => [
     insertionPlugin,
     markdownPlugin,
     htmlPlugin,
-];
+].filter(Boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "8.5.2",
+  "version": "8.6.1",
   "description": "Easily internationalize i18n your Svelte applications with type-safe multilingual content management.",
   "keywords": [
     "intlayer",
@@ -82,11 +82,11 @@
     "typecheck": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@intlayer/api": "8.5.2",
-    "@intlayer/config": "8.5.2",
-    "@intlayer/core": "8.5.2",
-    "@intlayer/editor": "8.5.2",
-    "@intlayer/types": "8.5.2"
+    "@intlayer/api": "8.6.1",
+    "@intlayer/config": "8.6.1",
+    "@intlayer/core": "8.6.1",
+    "@intlayer/editor": "8.6.1",
+    "@intlayer/types": "8.6.1"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
@@ -99,10 +99,10 @@
     "rimraf": "6.1.3",
     "svelte": "5.55.0",
     "svelte-check": "4.4.5",
-    "tsdown": "0.21.4",
+    "tsdown": "0.21.7",
     "typescript": "6.0.2",
-    "vite": "8.0.2",
-    "vitest": "4.1.1"
+    "vite": "8.0.3",
+    "vitest": "4.1.2"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"