Intlayer v8 Baru - Apa yang Baru?

Selamat datang di Intlayer v8! Rilis ini berfokus pada peningkatan pengalaman pengembang dengan deteksi konten otomatis, memastikan integritas data melalui validasi skema, dan memberikan lebih banyak kontrol atas pengelolaan kamus.

Daftar Isi

Evolusi Konten Kaya: Markdown & HTML

Intlayer v8 membawa peningkatan besar pada cara penanganan konten kaya, memperkenalkan node HTML (yang tidak ada di v7) dan menyatukan API dengan node Markdown (yang ada di v7 tetapi telah ditingkatkan).

API .use() yang Terpadu

Kami memperkenalkan metode .use() untuk node Markdown dan HTML. Metode ini memungkinkan Anda menyesuaikan tag HTML atau komponen yang digunakan selama proses render.

• Penggantian Komponen: Anda dapat dengan mudah mengganti tag HTML atau komponen kustom dengan komponen framework Anda sendiri (misalnya, mengganti <a> dengan NextLink atau <CustomCmp> dengan komponen React).
• Keamanan Tipe (Type Safety): Semua fungsi untuk menyediakan komponen diketik sepenuhnya (fully typed), memastikan Anda menerima props yang benar.

Perilaku Render Default

Di v7, jika tidak ada provider yang didefinisikan, node Markdown dirender sebagai string mentah, seringkali membutuhkan library eksternal untuk memparsingnya.

Di v8, Intlayer menyertakan parser Markdown internalnya sendiri. Secara default, node Markdown sekarang dirender langsung sebagai HTML tanpa memerlukan library eksternal apa pun.

Utilitas Renderer & Provider Baru

Kami telah memperkenalkan fungsi renderer dan komponen mandiri baru untuk memberi Anda kontrol lebih besar di luar alur standar useIntlayer.

• Markdown: MarkdownRenderer, useMarkdownRenderer, renderMarkdown. (Catatan: MarkdownProvider sudah ada di v7 tetapi sekarang terintegrasi dengan alat-alat baru ini).
• HTML: HTMLRenderer, useHTMLRenderer, renderHTML, HTMLProvider.

Contoh: Alat Rendering Markdown

import { MarkdownRenderer } from "react-intlayer/markdown";

<MarkdownRenderer
forceBlock={true}
components={{
  h1: ({ children }) => <h1 className="text-2xl">{children}</h1>
}}
>
{"# My Title"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "react-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
components: {
  h1: ({ children }) => <h1 className="text-red-500">{children}</h1>
}
});

return <div>{renderMarkdown("# My Title")}</div>;

import { renderMarkdown } from "react-intlayer/markdown";

const html = renderMarkdown("# My Title", {
forceBlock: true
});

<script setup>
import { MarkdownRenderer } from "vue-intlayer/markdown";
</script>

<template>
<MarkdownRenderer :forceBlock="true" content="# My Title" />
</template>

<script>
import { MarkdownRenderer } from "svelte-intlayer/markdown";
</script>

<MarkdownRenderer forceBlock={true} value="# My Title" />

<script>
import { useMarkdownRenderer } from "svelte-intlayer/markdown";
const render = useMarkdownRenderer();
</script>

{@html render("# My Title")}

<script>
import { renderMarkdown } from "svelte-intlayer/markdown";
</script>

{@html renderMarkdown("# My Title")}

import { Component } from "@angular/core";
import { IntlayerMarkdownService } from "angular-intlayer";

@Component({ ... })
export class MyComponent {
constructor(private markdownService: IntlayerMarkdownService) {}

render(markdown: string) {
  return this.markdownService.renderMarkdown(markdown);
}
}

import { MarkdownRenderer } from "solid-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# My Title"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "solid-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# My Title")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";

return <div>{renderMarkdown("# My Title")}</div>;

import { MarkdownRenderer } from "preact-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# My Title"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "preact-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# My Title")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";

return <div>{renderMarkdown("# My Title")}</div>;

Contoh: Alat Rendering HTML

import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer
components={{
  p: ({ children }) => <p className="mb-4">{children}</p>
}}
>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "react-intlayer/html";

const renderHTML = useHTMLRenderer({
components: {
  strong: ({ children }) => <b className="font-bold">{children}</b>
}
});

return <div>{renderHTML("<p>Hello <strong>World</strong></p>")}</div>;

import { renderHTML } from "react-intlayer/html";

const html = renderHTML("<p>Hello World</p>");

<script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

<script>
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

<script>
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

<script>
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

<div [innerHTML]="'<p>Hello World</p>'"></div>

import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

Untuk detail lebih lanjut, lihat Dokumentasi Konten HTML and Dokumentasi Markdown.

File Konten YAML & Markdown (v8.10.0)

Anda sekarang dapat mendeklarasikan konten secara langsung menggunakan ekstensi file .content.md dan .content.yaml. Ini sangat cocok untuk konten panjang, blog, dokumentasi, dan kebijakan privasi.

File-file ini sepenuhnya dapat diedit dari Visual Editor, menyediakan alur kerja yang efisien untuk anggota tim non-teknis.

Untuk detail lebih lanjut, lihat Dokumentasi File Konten YAML dan Dokumentasi File Konten Markdown.

Penulisan Ulang URL Kustom

Intlayer v8 memperkenalkan dukungan untuk Penulisan Ulang URL Kustom, yang memungkinkan Anda mendefinisikan jalur spesifik-locale yang berbeda dari struktur standar /locale/path. Ini adalah fitur yang kuat untuk meningkatkan SEO lokal dan memberikan pengalaman pengguna yang lebih alami bagi pengguna non-Inggris.

Peningkatan utama di v8:

• Framework Formatters: nextjsRewrite, svelteKitRewrite, reactRouterRewrite, vueRouterRewrite, solidRouterRewrite, tanstackRouterRewrite, nuxtRewrite, dan viteRewrite baru untuk menyediakan sintaks pola idiomatik bagi setiap router.
• Hook useRewriteURL: Hook sisi klien baru yang secara diam-diam memperbaiki bilah alamat ke URL lokal yang "cantik" tanpa memicu navigasi router.
• Automatic SEO Redirects: Proxy bawaan sekarang secara otomatis mengarahkan pengguna dari path kanonik yang diketik manual (mis. /fr/about) ke versi lokal yang lebih rapi (mis. /fr/a-propos).

Contoh Konfigurasi:

import { Locales, type IntlayerConfig } from "intlayer";
import { nextjsRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-no-default",
  rewrite: nextjsRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { reactRouterRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: reactRouterRewrite({
    "/:locale/about": {
      fr: "/:locale/a-propos",
      es: "/:locale/acerca-de",
    },
    "/:locale/products/:id": {
      fr: "/:locale/produits/:id",
      es: "/:locale/productos/:id",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { viteRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: viteRewrite({
    "/:locale/about": {
      fr: "/:locale/a-propos",
      es: "/:locale/acerca-de",
    },
    "/:locale/products/:id": {
      fr: "/:locale/produits/:id",
      es: "/:locale/productos/:id",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { nuxtRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: nuxtRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

import { Locales, type IntlayerConfig } from "intlayer";
import { svelteKitRewrite } from "intlayer/routing";

const config: IntlayerConfig = {
internationalization: {
  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  defaultLocale: Locales.ENGLISH,
},
routing: {
  mode: "prefix-all",
  rewrite: svelteKitRewrite({
    "/[locale]/about": {
      fr: "/[locale]/a-propos",
      es: "/[locale]/acerca-de",
    },
    "/[locale]/products/[id]": {
      fr: "/[locale]/produits/[id]",
      es: "/[locale]/productos/[id]",
    },
  }),
},
};

export default config;

Fitur ini didukung langsung (out-of-the-box) di Next.js dan Vite melalui proxy Intlayer, dan dapat dengan mudah diintegrasikan ke router lain seperti TanStack Router, React Router, Vue Router, SvelteKit, dan Solid Router.

Untuk informasi lebih lanjut dan panduan integrasi, lihat Dokumentasi Penulisan Ulang URL Kustom.

Nilai Insertion yang Ditingkatkan

Di v8, nilai insertion sekarang dapat menerima elemen React (atau node Vue) selain string dan angka. Ini memungkinkan Anda menyisipkan komponen interaktif yang kaya langsung ke dalam template insertion Anda.

Intlayer sekarang secara andal menangani node React dan Preact yang bersarang di dalam insertions, memastikan bahwa struktur UI yang kompleks dipertahankan dan dirender dengan benar.

Contoh:

import { insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myInsertion: insert("Hi {{name}}"),
  },
};

import { useIntlayer } from "next-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // angka
    // atau
    name: "John", // string
    // atau
    name: <span>John</span>, // elemen React
  })}
</div>
);

import { useIntlayer } from "react-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // angka
    // atau
    name: "John", // string
    // atau
    name: <span>John</span>, // elemen React
  })}
</div>
);

<script setup>
import { h } from "vue";
import { useIntlayer } from "vue-intlayer";

const { myInsertion } = useIntlayer("my-key");
</script>

<template>
<div>
  <component
    :is="myInsertion({
      name: 2,
      // atau
      name: 'John',
      // atau
      name: h('span', 'John'),
    })"
  />
</div>
</template>

import { useIntlayer } from "preact-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // angka
    // atau
    name: "John", // string
    // atau
    name: <span>John</span>, // elemen Preact
  })}
</div>
);

import { useIntlayer } from "solid-intlayer";

const { myInsertion } = useIntlayer("my-key");

return (
<div>
  {myInsertion({
    name: 2, // angka
    // atau
    name: "John", // string
    // atau
    name: <span>John</span>, // elemen Solid
  })}
</div>
);

<script>
import { useIntlayer } from "svelte-intlayer";

const { myInsertion } = useIntlayer("my-key");
</script>

<div>
{myInsertion({
  name: 2, // angka
  // atau
  name: "John", // string
})}
</div>

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-insertion-example",
template: `
  <div>
    {{ content().myInsertion({
      name: 'John'
    }) }}
  </div>
`,
})
export class InsertionExampleComponent {
content = useIntlayer("my-key");
}

Aturan Jamak Unicode CLDR (v8.8.0)

Helper node plural baru telah diperkenalkan berdasarkan aturan jamak yang didefinisikan oleh Unicode CLDR Project, meningkatkan dukungan untuk bahasa yang kompleks.

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      id: plural({
        other: "{{count}} lowongan",
      }),
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      fr: plural({
        one: "{{count}} offre",
        other: "{{count}} offres",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Anda kemudian dapat meneruskan jumlah (count) secara dinamis dalam komponen framework Anda:

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* Dalam bahasa Inggris:                       */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

Untuk informasi lebih lanjut, lihat Dokumentasi Pluralisasi.

Validasi Skema Konten

Intlayer v8 memperkenalkan validasi skema untuk dictionaries. Sekarang Anda dapat mendefinisikan skema validasi yang dapat digunakan ulang dalam konfigurasi Anda menggunakan Zod dan menerapkannya pada file konten Anda. Ini memastikan konten Anda selalu sesuai dengan struktur yang diharapkan, sehingga menangkap kesalahan saat proses build.

1. Definisikan Skema

Definisikan skema Anda di intlayer.config.ts:

import { z } from "zod";

export default {
  schemas: {
    "seo-metadata": z.object({
      title: z.string().min(50).max(60),
      description: z.string().min(150).max(160),
    }),
  },
};

2. Terapkan Skema ke Dictionaries

Referensikan kunci skema dalam definisi dictionary Anda:

import { type Dictionary } from "intlayer";

const aboutPageMetaContent = {
  key: "about-page-meta",
  schema: "seo-metadata", // <--
  content: {
    title: "About Our Company - Learn More About Us",
    description: "Discover our company's mission, values, and team.",
  },
} satisfies Dictionary;

export default aboutPageMetaContent;

Jika konten tidak cocok dengan skema (mis. judul terlalu pendek), proses build akan menghasilkan error.

TypeScript: Aksesor Primitif IntlayerNode

Tipe IntlayerNode telah diperbarui untuk memungkinkan pemanggilan metode JavaScript primitif secara langsung pada node konten. Ini memungkinkan Anda untuk berinteraksi dengan konten yang dilokalkan secara langsung seolah-olah itu adalah string, angka, boolean, atau array primitif standar.

Didukung di React, Preact, Solid, Svelte, Vue, dan Angular.

Contoh String

content.placeholder; // Mengembalikan IntlayerNode<string>
content.placeholder.value; // Mengembalikan string
content.placeholder.toString(); // Mengembalikan string
content.placeholder.toLowerCase(); // Mengembalikan string
String(content.placeholder); // Mengembalikan string
content.placeholder.toUpperCase(); // Mengembalikan string yang diubah menjadi huruf besar
content.placeholder.replace("a", "b"); // Mengembalikan string yang dimodifikasi

Contoh Array

content.myArrayOfString             // Mengembalikan IntlayerNode<Array<string>>
content.myArrayOfString.find(...)   // Mengembalikan elemen
content.myArrayOfString.join(', ')  // Mengembalikan string yang digabungkan

Pendeteksian Konten Otomatis yang Ditingkatkan

Di v8, Intlayer secara cerdas mendeteksi sintaks Markdown, tag HTML, dan penyisipan variabel dalam string konten Anda. Ini berarti Anda sering dapat menghilangkan fungsi pembantu seperti md(), html(), atau insert().

Perilaku ini diaktifkan secara default. Anda sekarang dapat menyetel deteksi ini baik secara global di intlayer.config.ts atau per kamus.

Kontrol Granular

Anda dapat mengaktifkan atau menonaktifkan jenis transformasi tertentu:

export default {
  dictionary: {
    // contentAutoTransformation: false (nilai default)
    contentAutoTransformation: {
      markdown: true,
      html: true,
      insertion: false, // Nonaktifkan deteksi insertion otomatis
    },
  },
};

Perilaku v7 (Pembungkusan Manual):

import { md, insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myMarkdown: md("## Hello World"),
    myInsertion: insert("Hi {{name}}"),
  },
};

Perilaku v8 (Deteksi otomatis):

export default {
  key: "my-key",
  contentAutoTransformation: true, // Dapat juga diatur oleh definisi kamus atau secara global di intlayer.config.ts
  content: {
    myMarkdown: "## Hello World", // Otomatis terdeteksi sebagai Markdown
    myHTML: "<p>Hello World</p>", // Otomatis terdeteksi sebagai HTML
    myInsertion: "Hi {{name}}", // Otomatis terdeteksi sebagai Insertion
  },
};

Hasil JSON dasar tetap sama, mempertahankan informasi tipe kaya yang diperlukan untuk rendering:

{
  "key": "my-key",
  "content": {
    "myMarkdown": {
      "nodeType": "markdown",
      "markdown": "## Hello World"
    },
    "myHTML": {
      "nodeType": "html",
      "html": "<p>Hello World</p>"
    },
    "myInsertion": {
      "nodeType": "insertion",
      "insertion": "Hi {{name}}"
    }
  }
}

Lokalisasi: hook useIntl baru

Hook useIntl() baru sekarang tersedia di React, Next.js dan Vue. Hook ini menyediakan objek Intl yang terikat pada locale yang secara otomatis menggunakan bahasa saat ini untuk memformat angka, tanggal, dan lainnya, tanpa perlu mengoper locale secara manual.

import { useIntl } from "next-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

import { useIntl } from "react-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

<script setup>
import { useIntl } from "vue-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);
</script>

import { useIntl } from "preact-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

import { useIntl } from "solid-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
style: "currency",
currency: "USD",
}).format(123.45);

<script>
import { useIntl } from "svelte-intlayer";

const intl = useIntl();

const formattedPrice = new intl.NumberFormat({
  style: "currency",
  currency: "USD",
}).format(123.45);
</script>

import { Component, computed } from "@angular/core";
import { useIntl } from "angular-intlayer";

@Component({
selector: "app-intl-example",
template: `<div>{{ formattedPrice() }}</div>`,
})
export class IntlExampleComponent {
intl = useIntl();

formattedPrice = computed(() =>
  new (this.intl().NumberFormat)({
    style: "currency",
    currency: "USD",
  }).format(123.45)
);
}

Tooling: Peningkatan Ekstensi VSCode

Ekstensi Intlayer untuk VSCode menerima pembaruan besar di v8 untuk menyederhanakan alur kerja internasionalisasi Anda:

• Waktu Mulai: Peningkatan kinerja saat membuka proyek.
• Caching: Lapisan caching yang ditingkatkan untuk validasi dan autocompletion hampir seketika.
• Deteksi Kunci Tidak Terpakai & Duplikat: Fitur baru untuk secara otomatis mendeteksi kunci yang tidak terpakai dan kunci duplikat di seluruh kamus Anda, membantu menjaga konten tetap bersih dan efisien.

Tooling: C++ Watcher & LSP Berbasis OXC (v8.12.0)

Intlayer v8.12.0 membawa peningkatan besar pada pengalaman pengembang:

• Parcel Watcher: Pemantau konten (content watcher) telah dimigrasikan dari chokidar ke @parcel/watcher, memanfaatkan pemantauan file C++ asli untuk memberikan pembaruan yang lebih cepat dan konsumsi memori yang jauh lebih rendah.
• Language Server Protocol (LSP) Baru: LSP yang benar-benar baru kini telah tersedia. Dibangun dengan parsing berbasis OXC, ini membantu IDE dan agen AI Anda menghubungkan panggilan useIntlayer('my-key') secara mulus dengan file .content yang sesuai, dan sebaliknya.

Untuk detail lebih lanjut, lihat Dokumentasi LSP.

Optimisasi Kompiler

Intlayer v8 menyertakan lapisan caching baru untuk compiler Markdown dan HTML. Ini memastikan bahwa string konten yang identik dengan konfigurasi yang sama hanya diparse sekali, secara signifikan mengurangi overhead selama re-render atau saat menggunakan konten yang sama di beberapa tempat.

const {
intlayerExtractBabelPlugin,
intlayerOptimizeBabelPlugin,
getExtractPluginOptions,
getOptimizePluginOptions,
} = require('@intlayer/babel');

module.exports = {
presets: ['next/babel'],
plugins: [
  // Ekstrak konten dari komponen ke dalam kamus
  [intlayerExtractBabelPlugin, getExtractPluginOptions()],
  // Optimalkan impor dengan mengganti useIntlayer menjadi impor kamus langsung
  [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
],
};

import { defineConfig } from 'vite';
import { intlayer, intlayerCompiler } from "vite-intlayer";

export default defineConfig({
plugins: [intlayer(), intlayerCompiler()],
});

Optimisasi Build Eksperimental: Minify & Purge (v8.7.0)

Intlayer v8.7.0 memperkenalkan fitur build eksperimental baru di intlayer.config.ts Anda yang dirancang untuk mengoptimalkan bundle produksi Anda:

• Minifikasi Kamus (Dictionary Minification): Meminimalkan file kamus untuk memperkecil ukuran.
• Pembersihan Kunci yang Tidak Digunakan (Unused Key Purging): Memindai dan menghapus kunci terjemahan yang tidak digunakan dari kamus, mengubah nama kunci aktif menjadi karakter pendek (mis. "products" -> "a", "pricing" -> "b"). Ini mengurangi ukuran bundle hingga 5%.
• Menonaktifkan Pemeriksaan TypeScript: Mempercepat proses build dengan menonaktifkan typechecking TypeScript selama langkah kompilasi.

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
  dictionary: {
    importMode: "dynamic",
  },
  build: {
    /**
     * Minifikasi kamus untuk mengurangi ukuran bundle.
     */
    minify: true,

    /**
     * Bersihkan kunci yang tidak digunakan dalam kamus
     */
    purge: true,

    /**
     * Menunjukkan apakah build harus memeriksa tipe TypeScript
     */
    checkTypes: false,
  },
};

export default config;

Fleksibilitas: Mode Impor Terpadu

Properti boolean live telah usang (deprecated) digantikan oleh properti importMode yang lebih komprehensif. Ini memungkinkan definisi eksplisit tentang bagaimana dictionary harus dimuat: secara statis, dinamis, atau melalui sinkronisasi langsung.

Mode

• static (Default): Dictionary dikemas pada saat build. Terbaik untuk performa.
• dynamic: Dictionary dimuat saat runtime (misalnya melalui fetch JSON atau suspense).
• fetch: Dictionary di-fetch dari CMS/Server saat runtime dan disinkronkan.

Migrasi:

Catatan: Di Intlayer v8, properti importMode telah dipindahkan dari konfigurasi build ke konfigurasi dictionary di intlayer.config.ts. Ini memungkinkan Anda mendefinisikan import mode default untuk semua kamus Anda sambil tetap dapat menimpanya pada tingkat per-kamus.

Contoh Konfigurasi Global:

export default {
  dictionary: {
    importMode: "dynamic", // Default untuk semua kamus
  },
  // ...
};

Contoh Kamus:

export default {
    key: 'my-key',
    importMode: "fetch", // Menimpa konfigurasi global
    content: { ... }
}

Kontrol Lokasi Kamus

v8 memperkenalkan properti location untuk secara eksplisit mengelola di mana dictionary berada dan bagaimana mereka disinkronkan. Ini sangat berguna untuk alur kerja hibrida yang melibatkan file lokal dan konten CMS remote.

Opsi

• local: Dictionary hanya ada secara lokal. Ini tidak akan didorong ke CMS remote.
• remote: Dictionary dikelola secara remote. Setelah didorong ke CMS, ia akan dipisahkan dari yang lokal. Dictionary remote akan ditarik dari CMS.
• local_and_remote: Dictionary ada di kedua tempat. Perubahan lokal didorong, dan perubahan remote ditarik (disinkronkan).

Contoh:

export default {
    key: 'my-key',
    location: "local", // Biarkan dictionary ini hanya lokal
    content: { ... }
}

Pemisahan Konfigurasi Sistem

Intlayer v8 memisahkan konfigurasi sumber konten dari jalur sistem internal dan jalur output. Ini membersihkan properti content dan membuatnya jelas pengaturan mana yang dimaksudkan untuk dikelola pengguna versus yang dikelola oleh sistem Intlayer.

Properti berikut telah dipindahkan dari content ke properti baru system di intlayer.config.ts:

• dictionariesDir
• moduleAugmentationDir
• unmergedDictionariesDir
• typesDir
• mainDir
• configDir
• cacheDir
• outputFilesPatternWithPath

Perilaku v7:

export default {
  content: {
    contentDir: ["src"],
    dictionariesDir: ".intlayer/dictionary", // Tercampur dengan konfigurasi sumber
  },
};

Perilaku v8:

export default {
  content: {
    contentDir: ["src"],
  },
  system: {
    dictionariesDir: ".intlayer/dictionary", // Dipisahkan dengan jelas
  },
};

Pemisahan Direktori Konten dan Kode

Intlayer v8 memisahkan konfigurasi untuk file definisi konten dari konfigurasi untuk transformasi kode. Ini memungkinkan pemantauan dan pemindaian yang lebih tepat, meningkatkan performa build.

Sebelumnya, contentDir digunakan untuk kedua pemantauan file .content.* dan pemindaian kode untuk pemanggilan useIntlayer. Sekarang:

• contentDir: Secara khusus untuk file deklarasi konten Anda.
• codeDir: Secara khusus untuk kode aplikasi Anda yang membutuhkan transformasi (mis. pruning, optimasi).

Migrasi:

Jika sebelumnya Anda telah mengatur contentDir, Intlayer v8 akan menggunakannya sebagai default untuk codeDir juga, tetapi akan mencatat peringatan. Anda harus secara eksplisit mendefinisikan codeDir dalam konfigurasi Anda.

Perilaku v7:

export default {
  content: {
    contentDir: ["src", "@packages/design-system"], // Digunakan untuk konten dan kode
  },
};

Perilaku v8:

export default {
  content: {
    contentDir: ["src/content", "@packages/design-system"], // Hanya memantau file src/content/*.content.* di sini dan file @packages/design-system/dist/*.content.*
    codeDir: ["src", "@packages/design-system"], // Hanya memindai untuk transformasi kode di sini
  },
};

Framework: Peningkatan Svelte

Konten Markdown dan HTML di Svelte sekarang secara otomatis di-parse menjadi HTML saat distringifikasi. Hal ini membuatnya jauh lebih mudah digunakan dengan sintaks {@html} Svelte, karena Anda sekarang dapat langsung meneruskan node konten.

Dukungan Angular: Vite Bundler (v8.11.0)

Untuk pengguna Angular, Intlayer sekarang secara native mendukung bundler Vite melalui plugin esbuild kustom baru, mempercepat waktu pengembangan dan build.

Untuk detail tentang konfigurasi, lihat Dokumentasi Lingkungan Angular.

Pembuatan Sitemap (v8.6.0)

Intlayer sekarang menghasilkan sitemap secara otomatis berdasarkan locale dan mode routing Anda. Ini sangat berguna untuk optimisasi SEO dalam arsitektur router seperti TanStack Router:

import { createFileRoute } from "@tanstack/react-router";
import { generateSitemap } from "intlayer";

const SITE_URL = (
  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
).replace(/\/$/, "");

export const Route = createFileRoute("/sitemap.xml")({
  server: {
    handlers: {
      GET: async () => {
        const sitemap = generateSitemap(
          [
            { path: "/", changefreq: "daily", priority: 1.0 },
            { path: "/about", changefreq: "monthly", priority: 0.8 },
          ],
          { siteUrl: SITE_URL }
        );

        return new Response(sitemap, {
          headers: { "Content-Type": "application/xml" },
        });
      },
    },
  },
});

Catatan migrasi dari v7

Perubahan Konfigurasi

• Properti live: Properti live pada kamus telah dihapus. Gunakan importMode: 'fetch' sebagai gantinya.
• importMode: Properti build.importMode dalam konfigurasi sudah deprecated. Gunakan dictionary.importMode sebagai gantinya.
• contentDir dan codeDir: contentDir sekarang secara khusus untuk file konten. Properti baru codeDir ditambahkan untuk transformasi kode. Jika codeDir tidak diatur, Intlayer akan menggunakan contentDir sebagai fallback dan menampilkan peringatan di log.
• Validasi Skema: Untuk menggunakan fitur schema baru, pastikan Anda telah menginstal zod di proyek Anda.

Tautan berguna

• Konfigurasi Referensi
• Dokumentasi File Konten
• Dokumentasi Konten HTML
• Dokumentasi Konten Markdown
• Dokumentasi Penulisan Ulang URL Kustom