Rekord dynamiczny (dynamic record) to plik zawartości, którego tożsamość nie opiera się na sekwencyjnym indeksie ani nazwanym wariancie, lecz na dowolnym zestawie par klucz-wartość zadeklarowanych w polu meta. Intlayer używa tych pól jako selektora w czasie wykonywania programu, co umożliwia odwoływanie się do rekordów CMS, treści specyficznych dla użytkownika lub dowolnych danych, których klucze nie są znane na etapie kompilacji.

Deklarowanie rekordów dynamicznych

product-copy.abc.content.ts

Kopiuj kod

Skopiuj kod do schowka

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abc",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;

product-copy.abcd.content.ts

Kopiuj kod

Skopiuj kod do schowka

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abcd",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

Używanie rekordów dynamicznych

Wszystkie pola meta są wymagane w selektorze. Pominięcie któregokolwiek z pól zwraca null i powoduje błąd TypeScript.

ProductCopy.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript wymaga dostarczenia zarówno `id`, jak i `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript wymaga dostarczenia zarówno `id`, jak i `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.vue

Kopiuj kod

Skopiuj kod do schowka

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

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

ProductCopy.svelte

Kopiuj kod

Skopiuj kod do schowka

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

export let productId: string;
export let userId: string;

const content = useIntlayer("product-copy", { id: productId, userId });
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

ProductCopy.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript wymaga dostarczenia zarówno `id`, jak i `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // TypeScript wymaga dostarczenia zarówno `id`, jak i `userId`.

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product-copy.component.ts

Kopiuj kod

Skopiuj kod do schowka

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

@Component({
  selector: "app-product-copy",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductCopyComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
  }
}

product-copy.js

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

Ze specyficzną lokalizacją

tsx

Kopiuj kod

Skopiuj kod do schowka

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "pl",});

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "pl",});

Brak pola meta — błąd na etapie kompilacji

Kopiuj kod

Skopiuj kod do schowka

// Błąd typu: brakuje `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

// Błąd typu: brakuje `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

Tryb ładowania (loading mode)

Rekordy dynamiczne są zazwyczaj ładowane leniwie (lazy loading). Możesz to skonfigurować w słowniku za pomocą pola importMode:

Kopiuj kod

Skopiuj kod do schowka

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // lub "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

Szczegółowe informacje o trybach static, dynamic i fetch znajdziesz w sekcji optymalizacja paczek (bundle optimization).

Typowe przypadki użycia

Teksty marketingowe produktów zarządzane przez CMS
Treści specyficzne dla użytkownika lub konta
Dowolna zawartość pobierana na podstawie nieprzezroczystego identyfikatora runtime ID

Warianty

Plik dla każdej lokalizacji