svelte-intlayer 8.5.2 → 8.6.0

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, 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;
@@ -35,7 +34,7 @@ export const intlayerNodePlugins = {
         typeof node === 'number',
     transform: (node, { children, ...rest }) => renderIntlayerNode({
         value: children ?? node,
-        component: isEnabled ? ContentSelector : undefined,
+        component: configuration.editor.enabled ? ContentSelector : undefined,
         props: rest,
     }),
 };
@@ -164,7 +163,7 @@ export const markdownStringPlugin = {
                 !metadataNode,
             transform: (metadataNode, props) => renderIntlayerNode({
                 value: metadataNode,
-                component: isEnabled
+                component: configuration.editor.enabled
                     ? (_MarkdownMetadataWithSelector ?? _MarkdownMetadataRenderer)
                     : _MarkdownMetadataRenderer,
                 props: {
@@ -183,7 +182,7 @@ export const markdownStringPlugin = {
         const render = (components) => {
             const nodeResult = renderIntlayerNode({
                 value: node,
-                component: isEnabled
+                component: configuration.editor.enabled
                     ? (_MarkdownWithSelector ?? _MarkdownRenderer)
                     : _MarkdownRenderer,
                 props: {
@@ -235,90 +234,27 @@ export const markdownPlugin = {
         });
     },
 };
-/**
- * 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 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) => {
+    transform: (node, props) => {
         const htmlString = node[NodeTypes.HTML];
         const _tags = node.tags ?? [];
-        const render = (userComponents) => {
-            const mergedComponents = {
-                ...getDefaultHTMLComponents(),
-                ...userComponents,
-            };
-            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);
-            };
-            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];
-                },
-            });
-        };
+        // 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();
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intlayer",
-  "version": "8.5.2",
+  "version": "8.6.0",
   "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.0",
+    "@intlayer/config": "8.6.0",
+    "@intlayer/core": "8.6.0",
+    "@intlayer/editor": "8.6.0",
+    "@intlayer/types": "8.6.0"
   },
   "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"