@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/ko/dictionary/content_file.md

@@ -58,7 +58,7 @@ Intlayer에서 콘텐츠 파일은 사전 정의를 포함하는 파일입니다
 
 콘텐츠 파일 예시:
 
-```tsx fileName="src/example.content.tsx" contentDeclarationFormat="typescript"
+```tsx fileName="src/example.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { type ReactNode } from "react";
 import {
   t,
@@ -140,107 +140,6 @@ export default {
 } satisfies Dictionary<Content>; // [선택 사항] Dictionary는 제네릭이며 사전의 형식을 강화할 수 있습니다
 ```
 
-```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md, insert, file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-export default {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Hello World",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "마이너스 1대 미만의 자동차",
-      "-1": "마이너스 1대의 자동차",
-      "0": "자동차 없음",
-      "1": "자동차 1대",
-      ">5": "몇 대의 자동차",
-      ">19": "많은 자동차",
-    }),
-    conditionalContent: cond({
-      true: "검증이 활성화됨",
-      false: "검증이 비활성화됨",
-    }),
-    insertionContent: insert("안녕하세요 {{name}}!"),
-    nestedContent: nest(
-      "navbar", // 중첩할 사전의 키
-      "login.button" // [선택 사항] 중첩할 콘텐츠의 경로
-    ),
-    markdownContent: md("# 마크다운 예제"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // `react-intlayer` 또는 `next-intlayer`를 사용할 때만 사용 가능
-    jsxContent: <h1>내 제목</h1>,
-  },
-};
-```
-
-```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md, insert, file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-module.exports = {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Hello World",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      ko: "한국어 콘텐츠",
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "마이너스 1대 미만의 자동차",
-      "-1": "마이너스 1대의 자동차",
-      "0": "자동차 없음",
-      "1": "자동차 1대",
-      ">5": "몇 대의 자동차",
-      ">19": "많은 자동차",
-    }),
-    conditionalContent: cond({
-      true: "검증이 활성화됨",
-      false: "검증이 비활성화됨",
-    }),
-    insertionContent: insert("안녕하세요 {{name}}!"),
-    nestedContent: nest(
-      "navbar", // 중첩할 사전의 키
-      "login.button" // [선택 사항] 중첩할 콘텐츠 경로
-    ),
-    markdownContent: md("# 마크다운 예제"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // `react-intlayer` 또는 `next-intlayer`를 사용할 때만 사용 가능
-    jsxContent: <h1>내 제목</h1>,
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -962,7 +861,7 @@ export default {
 
 예시:
 
-```javascript fileName="src/example.content.tsx" contentDeclarationFormat="typescript"
+```javascript fileName="src/example.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, enu, cond, nest, md, type Dictionary } from "intlayer";
 
 const getName = async () => "John Doe";
@@ -1010,104 +909,6 @@ export default {
 } satisfies Dictionary;
 ```
 
-```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md } from "intlayer";
-
-const getName = async () => "John Doe";
-
-/** @type {import('intlayer').Dictionary} */
-export default {
-  key: "page",
-  content: {
-    // `getIntlayer('page','en').hiMessage`는 `['Hi', ' ', 'John Doe']`를 반환합니다.
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // 조건, 열거형, 다국어 콘텐츠를 중첩한 복합 콘텐츠
-    // `getIntlayer('page','en').advancedContent(true)(10)`는 'Multiple items found'를 반환합니다.
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        en: "No valid data available",
-        fr: "Aucune donnée valide disponible",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-```
-
-```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md } = require("intlayer");
-
-const getName = async () => "John Doe";
-
-/** @type {import('intlayer').Dictionary} */
-module.exports = {
-  key: "page",
-  content: {
-    // `getIntlayer('page','en').hiMessage`는 `['Hi', ' ', 'John Doe']`를 반환합니다.
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // 조건, 열거형, 다국어 콘텐츠를 포함하는 복합 콘텐츠
-    // `getIntlayer('page','en').advancedContent(true)(10)`는 '여러 항목이 발견됨'을 반환합니다.
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        en: "No valid data available",
-        fr: "Aucune donnée valide disponible",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",

package/docs/ko/dictionary/enumeration.md

@@ -32,7 +32,7 @@ Intlayer에서 열거형은 특정 키를 해당 콘텐츠에 매핑하는 `enu`
 
 Intlayer 프로젝트에서 열거형을 설정하려면, 열거형 정의를 포함하는 콘텐츠 모듈을 생성해야 합니다. 다음은 자동차 수에 대한 간단한 열거형 예시입니다:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { enu, type Dictionary } from "intlayer";
 
 const carEnumeration = {
@@ -53,50 +53,6 @@ const carEnumeration = {
 export default carEnumeration;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { enu } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const carEnumeration = {
-  key: "car_count",
-  content: {
-    numberOfCar: enu({
-      "<-1": "마이너스 1대 미만의 자동차",
-      "-1": "마이너스 1대의 자동차",
-      "0": "자동차 없음",
-      "1": "자동차 1대",
-      ">5": "몇 대의 자동차",
-      ">19": "많은 자동차",
-      "fallback": "대체 값", // 선택 사항
-    }),
-  },
-};
-
-export default carEnumeration;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { enu } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const carEnumeration = {
-  key: "car_count",
-  content: {
-    numberOfCar: enu({
-      "<-1": "마이너스 1대 미만의 자동차",
-      "-1": "마이너스 1대의 자동차",
-      "0": "자동차 없음",
-      "1": "자동차 1대",
-      ">5": "몇 대의 자동차",
-      ">19": "많은 자동차",
-      "fallback": "대체 값", // 선택 사항
-    }),
-  },
-};
-
-module.exports = carEnumeration;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -128,7 +84,7 @@ module.exports = carEnumeration;
 
 React 컴포넌트에서 열거형을 사용하려면 `react-intlayer` 패키지의 `useIntlayer` 훅을 활용할 수 있습니다. 이 훅은 지정된 ID를 기반으로 올바른 콘텐츠를 가져옵니다. 사용 예시는 다음과 같습니다:
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -162,76 +118,6 @@ const CarComponent: FC = () => {
 };
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // 출력: 자동차 없음
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // 출력: 몇 대의 자동차
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // 출력: 많은 자동차
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // 출력: 대체 값
-        }
-      </p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const CarComponent = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // 출력: 자동차 없음
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // 출력: 몇 대의 자동차
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // 출력: 많은 자동차
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // 출력: 대체 값
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = CarComponent;
-```
-
 이 예제에서 컴포넌트는 자동차 수에 따라 동적으로 출력을 조정합니다. 지정된 범위에 따라 올바른 내용이 자동으로 선택됩니다.
 
 ## 추가 자료

package/docs/ko/dictionary/file.md

@@ -32,7 +32,7 @@ Intlayer에서 `file` 함수는 외부 파일 콘텐츠를 사전에 임베드
 
 Intlayer 프로젝트에 파일 콘텐츠를 임베드하려면 콘텐츠 모듈에서 `file` 함수를 사용하세요. 아래는 다양한 구현 예시입니다.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, type Dictionary } from "intlayer";
 
 const myFileContent = {
@@ -45,34 +45,6 @@ const myFileContent = {
 export default myFileContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-export default myFileContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-module.exports = myFileContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -90,7 +62,7 @@ module.exports = myFileContent;
 
 React 컴포넌트에서 내장된 파일 콘텐츠를 사용하려면, `react-intlayer` 패키지에서 `useIntlayer` 훅을 가져와 사용하세요. 이 훅은 지정된 키에서 콘텐츠를 가져와 동적으로 표시할 수 있게 합니다.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -107,43 +79,11 @@ const FileComponent: FC = () => {
 export default FileComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-module.exports = FileComponent;
-```
-
 ## 다국어 마크다운 예제
 
 다국어 편집 가능한 마크다운 파일을 지원하기 위해, `file`을 `t()` 및 `md()`와 결합하여 마크다운 콘텐츠 파일의 다양한 언어 버전을 정의할 수 있습니다.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, t, md, type Dictionary } from "intlayer";
 
 const myMultilingualContent = {
@@ -162,43 +102,6 @@ const myMultilingualContent = {
 export default myMultilingualContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file, t, md } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-
-export default myMultilingualContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file, t, md } = require("intlayer");
-
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-```
-
 이 설정은 사용자의 언어 선호도에 따라 콘텐츠를 동적으로 가져올 수 있도록 합니다. Intlayer 비주얼 에디터나 CMS에서 사용될 때, 시스템은 콘텐츠가 지정된 마크다운 파일에서 온 것임을 인식하고 해당 콘텐츠가 편집 가능하도록 보장합니다.
 
 ## Intlayer가 파일 콘텐츠를 처리하는 방법

package/docs/ko/dictionary/function_fetching.md

@@ -32,7 +32,7 @@ Intlayer는 콘텐츠 모듈에서 동기 또는 비동기 함수 콘텐츠를
 
 다음은 간단한 동기 함수 콘텐츠 패칭 예제입니다:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import type { Dictionary } from "intlayer";
 
 const functionContent = {
@@ -45,30 +45,6 @@ const functionContent = {
 export default functionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "함수에 의해 렌더링된 콘텐츠입니다",
-  },
-};
-
-export default functionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "함수에 의해 렌더링된 콘텐츠입니다",
-  },
-};
-
-module.exports = functionContent;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -87,7 +63,7 @@ module.exports = functionContent;
 
 아래는 서버에서 데이터를 가져오는 것을 시뮬레이션하는 비동기 함수의 예입니다:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { setTimeout } from "node:timers/promises";
 import type { Dictionary } from "intlayer";
 
@@ -104,42 +80,6 @@ const asyncFunctionContent = {
 export default asyncFunctionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { setTimeout } from "node:timers/promises";
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // 서버에서 가져오는 것을 시뮬레이션하기 위해 200ms 대기
-  await setTimeout(200);
-  return "서버에서 가져온 콘텐츠입니다";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-export default asyncFunctionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { setTimeout } = require("node:timers/promises");
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // 서버에서 가져오는 것을 시뮬레이션하기 위해 200ms 대기
-  await setTimeout(200);
-  return "서버에서 가져온 콘텐츠입니다";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-module.exports = asyncFunctionContent;
-```
-
 ```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
 JSON 파일에서 콘텐츠를 가져올 수 없습니다. 대신 .ts 또는 .js 파일을 사용하세요.
 ```
@@ -150,7 +90,7 @@ JSON 파일에서 콘텐츠를 가져올 수 없습니다. 대신 .ts 또는 .js
 
 React 컴포넌트에서 함수 기반 콘텐츠를 사용하려면, `react-intlayer`에서 `useIntlayer`를 가져와서 콘텐츠 ID로 호출하여 콘텐츠를 가져와야 합니다. 다음은 예시입니다:
 
-```typescript fileName="**/*.jsx" codeFormat="typescript"
+```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -170,43 +110,3 @@ const MyComponent: FC = () => {
 
 export default MyComponent;
 ```
-
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* 출력: 함수에 의해 렌더링된 콘텐츠입니다 */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* 출력: 서버에서 가져온 콘텐츠입니다 */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* 출력: 함수에 의해 렌더링된 콘텐츠입니다 */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* 출력: 서버에서 가져온 콘텐츠입니다 */}
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```