@intlayer/docs 8.4.10 → 8.5.1

package/docs/it/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-03-24
 title: Contenuto HTML
 description: Scopri come dichiarare e usare contenuti HTML con componenti personalizzati in Intlayer. Segui questa documentazione per incorporare contenuti ricchi in stile HTML con sostituzione dinamica dei componenti nel tuo progetto internazionalizzato.
 keywords:
@@ -21,6 +21,12 @@ slugs:
   - content
   - html
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "spostare l'importazione da {{framework}}-intlayer a {{framework}}-intlayer/html"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Aggiunta dell'utility HTMLRenderer / useHTMLRenderer / renderHTML"
@@ -243,7 +249,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
   <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "react-intlayer";
+    import { HTMLProvider } from "react-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -257,18 +263,38 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     );
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "react-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('react-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
   <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
-    import { installIntlayer, installIntlayerHTML } from "vue-intlayer";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerHTML, {
+    app.use(intlayer);
+    app.use(intlayerHTML, {
       components: {
         p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
         CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
@@ -278,12 +304,35 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     app.mount("#app");
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```typescript fileName="main.ts"
+    import { createApp, h } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+    app.use(intlayerHTML, {
+      renderHTML: async (html) => {
+        const { renderHTML } = await import('vue-intlayer/html');
+        return renderHTML(html);
+      },
+    });
+
+    app.mount("#app");
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
   <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
-      import { HTMLProvider } from "svelte-intlayer";
+      import { HTMLProvider } from "svelte-intlayer/html";
       import MyCustomP from "./MyCustomP.svelte";
     </script>
 
@@ -296,11 +345,30 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     </HTMLProvider>
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { HTMLProvider } from "svelte-intlayer/html";
+    </script>
+
+    <HTMLProvider
+      renderHTML={async (html) => {
+        const { renderHTML } = await import('svelte-intlayer/html');
+        return renderHTML(html);
+      }}
+    >
+      <slot />
+    </HTMLProvider>
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
   <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "preact-intlayer";
+    import { HTMLProvider } from "preact-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -313,11 +381,30 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     );
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "preact-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('preact-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
   <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "solid-intlayer";
+    import { HTMLProvider } from "solid-intlayer/html";
 
     export const AppProvider = (props) => (
       <HTMLProvider
@@ -330,15 +417,34 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     );
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "solid-intlayer/html";
+
+    export const AppProvider = (props) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('solid-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {props.children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
   <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer";
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
 
     export const appConfig: ApplicationConfig = {
       providers: [
-        createIntlayerMarkdownProvider({
+        createIntlayerHTMLProvider({
           components: {
             p: { class: "prose" },
             CustomLink: { href: "/details" },
@@ -348,6 +454,25 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     };
     ```
 
+    Puoi anche utilizzare il tuo motore di rendering HTML:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerHTMLProvider({
+          renderMarkdown: async (html) => {
+            const { renderMarkdown } = await import('angular-intlayer/html');
+            return renderMarkdown(html);
+          },
+        }),
+      ],
+    };
+    ```
+
+    > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
+
   </Tab>
 </Tabs>
 
@@ -363,7 +488,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     Esegui il rendering di una stringa HTML con componenti specifici.
 
     ```tsx
-    import { HTMLRenderer } from "react-intlayer";
+    import { HTMLRenderer } from "react-intlayer/html";
 
     <HTMLRenderer components={{ p: MyCustomP }}>
       {"<p>Hello World</p>"}
@@ -375,7 +500,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     Ottieni una funzione di rendering preconfigurata.
 
     ```tsx
-    import { useHTMLRenderer } from "react-intlayer";
+    import { useHTMLRenderer } from "react-intlayer/html";
 
     const renderHTML = useHTMLRenderer({
       components: { strong: (props) => <strong {...props} className="text-red-500" /> }
@@ -389,7 +514,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     Utility standalone per il rendering al di fuori dei componenti.
 
     ```tsx
-    import { renderHTML } from "react-intlayer";
+    import { renderHTML } from "react-intlayer/html";
 
     const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
     ```
@@ -401,7 +526,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
    
     ```vue
     <script setup>
-    import { HTMLRenderer } from "vue-intlayer";
+    import { HTMLRenderer } from "vue-intlayer/html";
     </script>
 
     <template>
@@ -416,7 +541,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
    
     ```svelte
     <script lang="ts">
-    import { HTMLRenderer } from "svelte-intlayer";
+    import { HTMLRenderer } from "svelte-intlayer/html";
     </script>
 
     <HTMLRenderer value="<p>Hello World</p>" />
@@ -426,7 +551,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
 
     ```svelte
     <script lang="ts">
-    import { useHTMLRenderer } from "svelte-intlayer";
+    import { useHTMLRenderer } from "svelte-intlayer/html";
     const render = useHTMLRenderer();
     </script>
 
@@ -437,7 +562,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
 
     ```svelte
     <script lang="ts">
-    import { renderHTML } from "svelte-intlayer";
+    import { renderHTML } from "svelte-intlayer/html";
     </script>
 
     {@html renderHTML("<p>Hello World</p>")}
@@ -449,7 +574,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Componente `<HTMLRenderer />`
    
     ```tsx
-    import { HTMLRenderer } from "preact-intlayer";
+    import { HTMLRenderer } from "preact-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -459,7 +584,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Hook `useHTMLRenderer()`
 
     ```tsx
-    import { useHTMLRenderer } from "preact-intlayer";
+    import { useHTMLRenderer } from "preact-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -469,7 +594,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Utility `renderHTML()`
 
     ```tsx
-    import { renderHTML } from "preact-intlayer";
+    import { renderHTML } from "preact-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
@@ -480,7 +605,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Componente `<HTMLRenderer />`
    
     ```tsx
-    import { HTMLRenderer } from "solid-intlayer";
+    import { HTMLRenderer } from "solid-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -490,7 +615,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Hook `useHTMLRenderer()`
 
     ```tsx
-    import { useHTMLRenderer } from "solid-intlayer";
+    import { useHTMLRenderer } from "solid-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -500,21 +625,21 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     #### Utility `renderHTML()`
 
     ```tsx
-    import { renderHTML } from "solid-intlayer";
+    import { renderHTML } from "solid-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    #### Servizio `IntlayerMarkdownService`
+    #### Servizio `IntlayerHTMLService`
     Renderizza una stringa HTML utilizzando il servizio.
 
     ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer";
 
     export class MyComponent {
-      constructor(private markdownService: IntlayerMarkdownService) {}
+      constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
         return this.markdownService.renderMarkdown(html);