@intlayer/docs 8.10.0-canary.1 → 8.10.1

package/docs/pl/dictionary/markdown.md

@@ -95,34 +95,34 @@ Możesz zadeklarować treść Markdown używając funkcji `md` lub po prostu jak
     ```
 
   </Tab>
-  <Tab label="Automatyczne wykrywanie" value="automatic-detection">
-    Jeśli ciąg znaków zawiera typowe wskaźniki Markdown (takie jak nagłówki, listy, linki itp.), Intlayer automatycznie je przekształci.
+  <Tab label="Pliki zewnętrzne" value="external-files">
+    Importuj pliki `.md` bezpośrednio za pomocą funkcji `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // Włącz automatyczne wykrywanie treści Markdown - Można ustawić globalnie w intlayer.config.ts
       content: {
-        myMarkdownContent: "## Mój tytuł \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          pl: md(file("./myMarkdown.pl.md")),
+        }),
       },
     };
     ```
 
   </Tab>
 
-  <Tab label="Pliki zewnętrzne" value="external-files">
-    Importuj pliki `.md` bezpośrednio za pomocą funkcji `file`.
+  <Tab label="Automatyczne wykrywanie" value="automatic-detection">
+    Jeśli ciąg znaków zawiera typowe wskaźniki Markdown (takie jak nagłówki, listy, linki itp.), Intlayer automatycznie je przekształci.
 
     ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
-
     export default {
       key: "app",
+      contentAutoTransformation: true, // Włącz automatyczne wykrywanie treści Markdown - Można ustawić globalnie w intlayer.config.ts
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          pl: md(file("./myMarkdown.pl.md")),
-        }),
+        myMarkdownContent: "## Mój tytuł \n\nLorem Ipsum",
       },
     };
     ```
@@ -130,8 +130,6 @@ Możesz zadeklarować treść Markdown używając funkcji `md` lub po prostu jak
   </Tab>
 </Tabs>
 
----
-
 ## Renderowanie Markdown
 
 Intlayer zapewnia dwa niezależne sposoby renderowania Markdown:
@@ -147,7 +145,7 @@ Renderowanie Markdown obsługuje **MDX** — użyj dowolnego komponentu JSX/fram
 ### 1. Automatyczne renderowanie (przez `useIntlayer`)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     Węzły Markdown można renderować bezpośrednio jako JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,6 +195,57 @@ Renderowanie Markdown obsługuje **MDX** — użyj dowolnego komponentu JSX/fram
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    Węzły Markdown można renderować bezpośrednio jako JSX.
+
+    ```tsx fileName="App.tsx"
+    import { useIntlayer } from "next-intlayer";
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    const AppContent = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div>{myMarkdownContent}</div>;
+    };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // Komponent MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > Jeśli `MarkdownProvider` nie jest obecny, Intlayer użyje domyślnego parsera Markdown do JSX do wyrenderowania markdownu.
+
+    Możesz również zapewnić lokalne nadpisania dla określonych węzłów za pomocą metody `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    Możesz pobrać Markdown jako ciąg znaków:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    Możesz uzyskać dostęp do metadanych markdown w ten sposób:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     W Vue, treść Markdown można renderować przy użyciu wbudowanego tagu `component` lub bezpośrednio jako węzeł.
@@ -441,7 +490,7 @@ Renderowanie Markdown obsługuje **MDX** — użyj dowolnego komponentu JSX/fram
 Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezależne od `useIntlayer`. Używaj ich, gdy musisz wyrenderować Markdown ze źródeł innych niż słowniki.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### Komponent `<MarkdownRenderer />`
 
@@ -479,6 +528,45 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     const jsx = renderMarkdown("# Mój Tytuł", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### Komponent `<MarkdownRenderer />`
+
+    Renderuje ciąg znaków Markdown z określonymi opcjami.
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# Mój Tytuł"}
+    </MarkdownRenderer>
+    ```
+
+    #### Hook `useMarkdownRenderer()`
+
+    Pobierz wstępnie skonfigurowaną funkcję renderowania.
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# Mój Tytuł");
+    ```
+
+    #### Narzędzie `renderMarkdown()`
+    Samodzielne narzędzie do renderowania poza komponentami.
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# Mój Tytuł", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +696,12 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
   </Tab>
 </Tabs>
 
----
-
 ## Konfiguracja globalna z `MarkdownProvider`
 
 `MarkdownProvider` (lub jego odpowiednik we frameworku) konfiguruje potok renderowania Markdown dla całej aplikacji. Dotyczy to zarówno automatycznego renderowania `useIntlayer`, jak i narzędzi pomocniczych. Ustawione tutaj opcje są ustawieniami domyślnymi — `.use()` nadpisuje je na poziomie węzła.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +719,7 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     );
     ```
 
+
     > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
 
     Możesz również użyć własnego renderera markdown:
@@ -643,6 +730,7 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
           const { renderMarkdown } = await import('react-intlayer/markdown');
           return renderMarkdown(md);
         }}
@@ -654,6 +742,48 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
 
     > Dynamiczne importowanie twojego renderera Markdown to świetny sposób na zmniejszenie rozmiaru pakietu twojej aplikacji.
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+
+    > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
+
+    Możesz również użyć własnego renderera markdown:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('next-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > Dynamiczne importowanie twojego renderera Markdown to świetny sposób na zmniejszenie rozmiaru pakietu twojej aplikacji.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -679,6 +809,9 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     app.mount("#app");
     ```
 
+
+    > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
+
     Możesz również użyć własnego renderera markdown:
 
     ```typescript fileName="main.ts"
@@ -720,6 +853,9 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     </MarkdownProvider>
     ```
 
+
+    > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
+
     Możesz również użyć własnego renderera markdown:
 
     ```svelte fileName="App.svelte"
@@ -756,6 +892,9 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     );
     ```
 
+
+    > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
+
     Możesz również użyć własnego renderera markdown:
 
     ```tsx fileName="AppProvider.tsx"
@@ -792,6 +931,9 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
     );
     ```
 
+
+    > MDX jest obsługiwany — każda nazwa komponentu użyta wewnątrz twojego Markdown (np. `<MyCustomJSXComponent />`) jest rozwiązywana względem mapy `components`.
+
     Możesz również użyć własnego renderera markdown:
 
     ```tsx fileName="AppProvider.tsx"
@@ -835,3 +977,191 @@ Te narzędzia renderują **tylko surowe ciągi znaków Markdown** i są niezale
 
   </Tab>
 </Tabs>
+
+## Suspense
+
+Renderer Markdown Intlayer jest ładowany dynamicznie. Mimo optymalizacji, bazowy fragment parsera zajmuje około 55 kb. Synchroniczne ładowanie tego opóźnia początkowe renderowanie strony i pogarsza First Contentful Paint (FCP).
+
+Aby zapobiec blokowaniu interfejsu użytkownika, Intlayer integruje się z API Suspense Reacta. Pobiera parser w tle i rzuca Promise podczas pobierania.
+
+Zawiń dowolny komponent renderujący Intlayer Markdown w granicę `<Suspense>`. Wyświetli to zlokalizowany stan rezerwowy podczas pobierania fragmentu, umożliwiając natychmiastowe renderowanie reszty DOM.
+
+Ostrzeżenie: Jeśli nie zapewnisz granicy `<Suspense>`, React wstrzyma działanie na poziomie głównym lub zablokuje renderowanie całego drzewa komponentów do czasu pełnego załadowania 55 kb fragmentu.
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+W Next.js App Router można użyć React `Suspense` dla komponentów klienckich lub pliku `loading.tsx` dla komponentów serwerowych.
+
+**Komponent kliencki:**
+
+```tsx fileName="components/MyComponent.tsx"
+"use client";
+import { useIntlayer } from "next-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+**Komponent serwerowy z `loading.tsx`:**
+
+```tsx fileName="app/loading.tsx"
+export default function Loading() {
+  return <div>Loading...</div>;
+}
+```
+
+```tsx fileName="app/page.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+const MyPage = () => {
+  const markdownContent = useIntlayer("my-markdown");
+  return <div>{markdownContent}</div>;
+};
+
+export default MyPage;
+```
+
+  </Tab>
+
+  <Tab label="React" value="react">
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+ 
+  <Tab label="Vue" value="vue">
+
+Vue ma wbudowany komponent `<Suspense>`. Zawiń komponent renderujący zawartość Markdown w granicę `<Suspense>`.
+
+```vue fileName="MyComponent.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { markdownContent } = useIntlayer("my-markdown");
+</script>
+
+<template>
+  <Suspense>
+    <component :is="markdownContent" />
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Svelte nie ma odpowiednika API Suspense. Użyj bloku `{#await}`, aby obsłużyć asynchroniczne renderowanie zawartości Markdown.
+
+```svelte fileName="MyComponent.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my-markdown");
+</script>
+
+{#await $content.markdownContent}
+  <div>Loading...</div>
+{:then rendered}
+  {@html rendered}
+{/await}
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Preact obsługuje API Suspense Reacta przez `preact/compat`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "preact-intlayer";
+import { Suspense } from "preact/compat";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Solid ma swój własny komponent `<Suspense>` z `solid-js`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "solid-intlayer";
+import { Suspense } from "solid-js";
+
+const MyComponent = () => {
+  const { markdownContent } = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Angular nie ma API Suspense. Użyj odroczonych widoków (`@defer`) w Angular, aby obsługiwać leniwie ładowaną zawartość Markdown (wymaga Angular 17+).
+
+```typescript fileName="my.component.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my",
+  template: `
+    @defer {
+      <div [innerHTML]="content().markdownContent"></div>
+    } @loading {
+      <div>Loading...</div>
+    }
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("my-markdown");
+}
+```
+
+  </Tab>
+</Tabs>
+
+---
+
+## Opcje referencyjne
+
+Te opcje można przekazać do `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` i `renderMarkdown`.
+
+| Option                | Type        | Default | Opis                                                                                                    |
+| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------------------------ |
+| `forceBlock`          | `boolean`   | `false` | Wymusza zawijanie wyjścia w element blokowy (np. `<div>`).                                              |
+| `forceInline`         | `boolean`   | `false` | Wymusza zawijanie wyjścia w element liniowy (np. `<span>`).                                             |
+| `tagfilter`           | `boolean`   | `true`  | Włącza GitHub Tag Filter w celu zwiększenia bezpieczeństwa poprzez usuwanie niebezpiecznych tagów HTML. |
+| `preserveFrontmatter` | `boolean`   | `false` | Jeśli `true`, frontmatter na początku ciągu Markdown nie zostanie usunięty.                             |
+| `components`          | `Overrides` | `{}`    | Mapa tagów HTML na niestandardowe komponenty (np. `{ h1: MyHeading }`).                                 |
+| `wrapper`             | `Component` | `null`  | Niestandardowy komponent do zawijania renderowanego Markdown.                                           |
+| `renderMarkdown`      | `Function`  | `null`  | Niestandardowa funkcja renderowania, aby całkowicie zastąpić domyślny kompilator Markdown.              |

package/docs/pl/interest_of_intlayer.md

@@ -224,7 +224,7 @@ Takie podejście pozwala na:
 
 Gwiazdki na GitHubie są silnym wskaźnikiem popularności projektu, zaufania społeczności i długoterminowego znaczenia. Choć nie są bezpośrednią miarą jakości technicznej, odzwierciedlają, ilu programistów uważa projekt za przydatny, śledzi jego postępy i prawdopodobnie go przyjmie. Przy szacowaniu wartości projektu gwiazdki pomagają porównać zainteresowanie alternatywami i dostarczają wglądu w rozwój ekosystemu.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---
 

package/docs/pt/benchmark/solid.md

@@ -122,7 +122,7 @@ Comparamos **quatro estratégias de carregamento**:
 
 As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=solidjs-community%2Fsolid-primitives%2Cmbarzda%2Fsolid-i18next%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=solidjs-community%2Fsolid-primitives%2Cmbarzda%2Fsolid-i18next%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
 
 ## Resultados em detalhes
 

package/docs/pt/benchmark/svelte.md

@@ -120,7 +120,7 @@ Comparamos **quatro estratégias de carregamento**:
 
 As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=kaisermann%2Fsvelte-i18n%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=kaisermann%2Fsvelte-i18n%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
 
 ## Resultados em detalhes