@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/ko/dictionary/gender.md

@@ -32,7 +32,7 @@ Intlayer에서는 `gender` 함수를 통해 성별 기반 콘텐츠를 구현합
 
 Intlayer 프로젝트에서 성별 기반 콘텐츠를 설정하려면, 성별별 정의를 포함하는 콘텐츠 모듈을 생성하세요. 아래는 다양한 형식의 예시입니다.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { gender, type Dictionary } from "intlayer";
 
 const myGenderContent = {
@@ -49,42 +49,6 @@ const myGenderContent = {
 export default myGenderContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { gender } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "남성 사용자용 콘텐츠",
-      female: "여성 사용자용 콘텐츠",
-      fallback: "성별이 지정되지 않았을 때의 콘텐츠", // 선택 사항
-    }),
-  },
-};
-
-export default myGenderContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { gender } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "남성 사용자용 콘텐츠",
-      female: "여성 사용자용 콘텐츠",
-      fallback: "성별이 지정되지 않았을 때의 콘텐츠", // 선택 사항
-    }),
-  },
-};
-
-module.exports = myGenderContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -108,7 +72,7 @@ module.exports = myGenderContent;
 
 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";
 
@@ -160,108 +124,6 @@ const GenderComponent: FC = () => {
 export default GenderComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* 출력: 남성 사용자용 내 콘텐츠 */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 여성 사용자용 내 콘텐츠 */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 남성 사용자용 내 콘텐츠 */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 여성 사용자용 내 콘텐츠 */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* 출력: 남성 사용자용 콘텐츠 */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 여성 사용자용 콘텐츠 */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 남성 사용자용 콘텐츠 */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 여성 사용자용 콘텐츠 */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 성별이 지정되지 않았을 때의 내 콘텐츠 */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* 출력: 성별이 지정되지 않았을 때의 내 콘텐츠 */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = GenderComponent;
-```
-
 ## 추가 자료
 
 설정 및 사용법에 대한 자세한 정보는 다음 자료를 참조하세요:

package/docs/ko/dictionary/insertion.md

@@ -41,7 +41,7 @@ Intlayer 프로젝트에서 삽입 콘텐츠를 설정하려면, 삽입 정의
   <Tab label="수동 래핑" value="manual-wrapping">
     삽입 콘텐츠를 명시적으로 선언하려면 `insert` 함수를 사용하세요.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { insert, type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -105,7 +105,7 @@ Intlayer 프로젝트에서 삽입 콘텐츠를 설정하려면, 삽입 정의
   <Tab label="자동 감지" value="automatic-detection">
     문자열에 일반적인 삽입 표시자(`{{name}}` 등)가 포함되어 있으면 Intlayer가 자동으로 변환합니다.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -159,7 +159,7 @@ Intlayer 프로젝트에서 삽입 콘텐츠를 설정하려면, 삽입 정의
 
 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";
 
@@ -187,60 +187,6 @@ const InsertionComponent: FC = () => {
 export default InsertionComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* 출력: "안녕하세요, 제 이름은 John이고 나이는 30살입니다!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* 동일한 삽입을 다른 값으로 재사용할 수 있습니다 */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-export default InsertionComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* 출력: "안녕하세요, 제 이름은 John이고 나이는 30살입니다!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* 다른 값으로 동일한 삽입문을 재사용할 수 있습니다 */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = InsertionComponent;
-```
-
 ## 추가 자료
 
 설정 및 사용법에 대한 자세한 정보는 다음 자료를 참조하세요:

package/docs/ko/dictionary/nesting.md

@@ -32,7 +32,7 @@ Intlayer 프로젝트에서 중첩을 설정하려면 먼저 재사용하려는
 
 다음은 다른 사전에 중첩할 기본 사전의 예제입니다:
 
-```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { type Dictionary } from "intlayer";
 
 const firstDictionary = {
@@ -49,38 +49,6 @@ const firstDictionary = {
 export default firstDictionary;
 ```
 
-```javascript fileName="firstDictionary.content.mjs" contentDeclarationFormat="esm"
-/** @type {import('intlayer').Dictionary} */
-const firstDictionary = {
-  key: "key_of_my_first_dictionary",
-  content: {
-    content: "content",
-    subContent: {
-      contentNumber: 0,
-      contentString: "string",
-    },
-  },
-};
-
-export default firstDictionary;
-```
-
-```javascript fileName="firstDictionary.content.cjs" contentDeclarationFormat="commonjs"
-/** @type {import('intlayer').Dictionary} */
-const firstDictionary = {
-  key: "key_of_my_first_dictionary",
-  content: {
-    content: "content",
-    subContent: {
-      contentNumber: 0,
-      contentString: "string",
-    },
-  },
-};
-
-module.exports = firstDictionary;
-```
-
 ```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -99,7 +67,7 @@ module.exports = firstDictionary;
 
 이제 위의 콘텐츠를 참조하는 `nest` 함수를 사용하는 또 다른 콘텐츠 모듈을 생성합니다. 전체 콘텐츠 또는 특정 중첩 값을 참조할 수 있습니다:
 
-```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { nest, type Dictionary } from "intlayer";
 
 const myNestingContent = {
@@ -118,42 +86,6 @@ const myNestingContent = {
 export default myNestingContent;
 ```
 
-```javascript fileName="secondDictionary.content.mjs" contentDeclarationFormat="esm"
-import { nest } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myNestingContent = {
-  key: "key_of_my_second_dictionary",
-  content: {
-    fullNestedContent: nest("key_of_my_first_dictionary"),
-    partialNestedContent: nest(
-      "key_of_my_first_dictionary",
-      "subContent.contentNumber"
-    ),
-  },
-};
-
-export default myNestingContent;
-```
-
-```javascript fileName="secondDictionary.content.cjs" contentDeclarationFormat="commonjs"
-const { nest } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myNestingContent = {
-  key: "key_of_my_second_dictionary",
-  content: {
-    fullNestedContent: nest("key_of_my_first_dictionary"),
-    partialNestedContent: nest(
-      "key_of_my_first_dictionary",
-      "subContent.contentNumber"
-    ),
-  },
-};
-
-module.exports = myNestingContent;
-```
-
 ```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -182,7 +114,7 @@ module.exports = myNestingContent;
 
 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";
 
@@ -208,56 +140,6 @@ const NestComponent: FC = () => {
 export default NestComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>
-        Full Nested Content: {JSON.stringify(fullNestedContent)}
-        {/* 출력: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
-      </p>
-      <p>
-        Partial Nested Value: {partialNestedContent}
-        {/* 출력: 0 */}
-      </p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
-```javascript fileName="**/*.cjx" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const NestComponent = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>
-        Full Nested Content: {JSON.stringify(fullNestedContent)}
-        {/* 출력: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
-      </p>
-      <p>
-        Partial Nested Value: {partialNestedContent}
-        {/* 출력: 0 */}
-      </p>
-    </div>
-  );
-};
-
-module.exports = NestComponent;
-```
-
 ## 추가 자료
 
 구성 및 사용에 대한 자세한 정보는 다음 리소스를 참조하세요:

package/docs/ko/dictionary/translation.md

@@ -30,7 +30,7 @@ history:
 
 다음은 번역이 포함된 콘텐츠를 선언하는 예시입니다.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 interface Content {
@@ -49,36 +49,6 @@ export default {
 } satisfies Dictionary<Content>;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-export default {
-  key: "multi_lang",
-  content: {
-    welcomeMessage: t({
-      en: "Welcome to our application",
-      fr: "Bienvenue dans notre application",
-      es: "Bienvenido a nuestra aplicación",
-    }),
-  },
-};
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-module.exports = {
-  key: "multi_lang",
-  content: {
-    welcomeMessage: t({
-      en: "Welcome to our application",
-      fr: "Bienvenue dans notre application",
-      es: "Bienvenido a nuestra aplicación",
-    }),
-  },
-};
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -100,7 +70,7 @@ module.exports = {
 
 적절한 번역 처리를 보장하기 위해 `intlayer.config.ts`에서 허용되는 로케일을 구성할 수 있습니다. 이 구성은 애플리케이션이 지원하는 언어를 정의할 수 있게 합니다:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -112,23 +82,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-      "nodeType": "translation",
-      "translation": {
-        "en": "Welcome to our application",
-        "fr": "Bienvenue dans notre application",
-        "es": "Bienvenido a nuestra aplicación"
-      }
-    }
-  }
-}
-```
-
 ## 로케일 구성
 
 적절한 번역 처리를 보장하기 위해 `intlayer.config.ts`에서 허용되는 로케일을 구성할 수 있습니다. 이 구성은 애플리케이션이 지원하는 언어를 정의할 수 있게 해줍니다:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -140,37 +98,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  },
-};
-
-module.exports = config;
-```
-
 ## React 컴포넌트에서 번역 사용하기
 
 `react-intlayer`를 사용하면 React 컴포넌트 내에서 번역을 사용할 수 있습니다. 다음은 예시입니다:
 
-```jsx fileName="**/*.tsx" codeFormat="typescript"
+```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -187,47 +119,13 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const content = useIntlayer("multi_lang");
-
-  return (
-    <div>
-      <p>{content.welcomeMessage}</p>{" "}
-      {/* 현재 로케일에 맞는 환영 메시지를 표시합니다 */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const content = useIntlayer("multi_lang");
-
-  return (
-    <div>
-      <p>{content.welcomeMessage}</p>{" "}
-      {/* 현재 로케일에 맞는 환영 메시지를 표시합니다 */}
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```
-
 이 컴포넌트는 애플리케이션에 설정된 현재 로케일에 따라 해당 번역을 가져옵니다.
 
 ## 사용자 정의 콘텐츠 객체
 
 `intlayer`는 번역을 위한 사용자 정의 콘텐츠 객체를 지원하여, 더 복잡한 구조를 정의하면서 타입 안전성을 보장할 수 있습니다. 다음은 사용자 정의 객체의 예시입니다:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 interface ICustomContent {
@@ -258,60 +156,6 @@ const customContent = {
 export default customContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-export default {
-  key: "custom_content",
-  content: {
-    profileText:
-      t <
-      ICustomContent >
-      {
-        en: {
-          title: "페이지 제목",
-          content: "페이지 내용",
-        },
-        fr: {
-          title: "Titre de la Page",
-          content: "Contenu de la Page",
-        },
-        es: {
-          title: "Título de la Página",
-          content: "Contenido de la Página",
-        },
-      },
-  },
-};
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-module.exports = {
-  key: "custom_content",
-  content: {
-    profileText:
-      t <
-      ICustomContent >
-      {
-        en: {
-          title: "Page Title",
-          content: "Page Content",
-        },
-        fr: {
-          title: "Titre de la Page",
-          content: "Contenu de la Page",
-        },
-        es: {
-          title: "Título de la Página",
-          content: "Contenido de la Página",
-        },
-      },
-  },
-};
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",