Intlayer कैसे काम करता है

विषय सूची

अवलोकन

Intlayer के पीछे मुख्य विचार यह है कि प्रति-कंपोनेंट सामग्री प्रबंधन को अपनाया जाए। तो Intlayer का विचार यह है कि आपको अपनी सामग्री को अपनी कोडबेस में कहीं भी घोषित करने की अनुमति दी जाए, जैसे कि आपके कंपोनेंट के समान डायरेक्टरी में।

.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx

ऐसा करने के लिए, Intlayer की भूमिका आपके प्रोजेक्ट में मौजूद सभी विभिन्न प्रारूपों में आपकी सामग्री घोषणा फ़ाइलों को ढूंढना है, और फिर उनसे डिक्शनरीज़ उत्पन्न करना है।

तो इसमें दो मुख्य चरण होते हैं:

• निर्माण चरण
• व्याख्या चरण

डिक्शनरीज़ निर्माण चरण

निर्माण चरण तीन तरीकों से किया जा सकता है:

• CLI का उपयोग करके npx intlayer build के साथ
• vscode एक्सटेंशन का उपयोग करके
• ऐप प्लगइन्स का उपयोग करके जैसे vite-intlayer पैकेज, या उनके Next.js के लिए समकक्ष। जब आप इन प्लगइन्स में से किसी एक का उपयोग करते हैं, तो Intlayer स्वचालित रूप से आपके डिक्शनरीज़ का निर्माण करेगा जब आप अपना एप्लिकेशन शुरू (डेव) या निर्माण (प्रोड) करेंगे।

1. सामग्री फ़ाइलों की घोषणा

   • सामग्री फ़ाइलें विभिन्न प्रारूपों में परिभाषित की जा सकती हैं, जैसे TypeScript, ECMAScript, CommonJS, या JSON।
   • सामग्री फ़ाइलें प्रोजेक्ट में कहीं भी परिभाषित की जा सकती हैं, जो बेहतर रखरखाव और स्केलेबिलिटी की अनुमति देती हैं। सामग्री फ़ाइलों के लिए फ़ाइल एक्सटेंशन सम्मेलनों का पालन करना महत्वपूर्ण है। यह एक्सटेंशन डिफ़ॉल्ट रूप से *.content.{js|cjs|mjs|ts|tsx|json} है, लेकिन इसे कॉन्फ़िगरेशन फ़ाइल में संशोधित किया जा सकता है।

2. डिक्शनरीज़ का निर्माण

   • डिक्शनरीज़ सामग्री फ़ाइलों से उत्पन्न होती हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरीज़ प्रोजेक्ट की .intlayer/dictionaries डायरेक्टरी में उत्पन्न होती हैं।
   • ये डिक्शनरीज़ विभिन्न प्रारूपों में उत्पन्न होती हैं ताकि सभी आवश्यकताओं को पूरा किया जा सके और एप्लिकेशन के प्रदर्शन को अनुकूलित किया जा सके।

3. शब्दकोश प्रकार की पीढ़ी

4. डिक्शनरी प्रकारों का निर्माण आपके डिक्शनरीज़ के आधार पर, Intlayer प्रकार उत्पन्न करेगा ताकि उन्हें आपके एप्लिकेशन में उपयोग किया जा सके।

• डिक्शनरी प्रकार Intlayer content declaration files से उत्पन्न होते हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरी प्रकार प्रोजेक्ट की .intlayer/types डायरेक्टरी में उत्पन्न होते हैं।

• Intlayer मॉड्यूल वृद्धि एक TypeScript सुविधा है जो आपको Intlayer के लिए अतिरिक्त प्रकार परिभाषित करने की अनुमति देती है। यह विकास अनुभव को आसान बनाता है उपलब्ध तर्कों या आवश्यक तर्कों का सुझाव देकर। उत्पन्न प्रकारों में, Intlayer डिक्शनरी प्रकार या यहां तक कि भाषा कॉन्फ़िगरेशन प्रकार types/intlayer.d.ts फ़ाइल में जोड़े जाते हैं, और अन्य पैकेजों द्वारा उपयोग किए जाते हैं। ऐसा करने के लिए, यह आवश्यक है कि tsconfig.json फ़ाइल को प्रोजेक्ट की types डायरेक्टरी को शामिल करने के लिए कॉन्फ़िगर किया गया हो।

डिक्शनरीज़ की व्याख्या चरण

Intlayer का उपयोग करके, आप अपने एप्लिकेशन में useIntlayer हुक का उपयोग करके अपनी सामग्री तक पहुंच सकते हैं।

const MyComponent = () => {
  const content = useIntlayer("my-component");
  return <div>{content.title}</div>;
};

यह हुक आपके लिए लोकेल का पता लगाने का प्रबंधन करेगा और वर्तमान लोकेल के लिए सामग्री लौटाएगा। इस हुक का उपयोग करके, आप मार्कडाउन की व्याख्या कर सकते हैं, बहुवचन प्रबंधन कर सकते हैं, और भी बहुत कुछ।

Intlayer की सभी विशेषताओं को देखने के लिए, आप डिक्शनरी दस्तावेज़ पढ़ सकते हैं।

दूरस्थ सामग्री

Intlayer आपको सामग्री को स्थानीय रूप से घोषित करने और फिर उन्हें CMS में निर्यात करने की अनुमति देता है ताकि आपकी गैर-तकनीकी टीम द्वारा इसे संपादित किया जा सके।

इसलिए आप CMS से सामग्री को अपनी एप्लिकेशन में पुश और पुल कर सकेंगे, जैसे कि आप अपने कोड के लिए Git के साथ करते हैं।

CMS का उपयोग करके बाहरी डिक्शनरीज़ के लिए, Intlayer एक बुनियादी फ़ेच ऑपरेशन करता है ताकि दूरस्थ डिक्शनरीज़ को पुनः प्राप्त किया जा सके और उन्हें आपकी स्थानीय डिक्शनरीज़ के साथ मर्ज किया जा सके। यदि आपके प्रोजेक्ट पर कॉन्फ़िगर किया गया है, तो Intlayer स्वचालित रूप से एप्लिकेशन शुरू होने (डेव) / निर्माण (प्रोड) के समय CMS से सामग्री प्राप्त करने का प्रबंधन करेगा।

दृश्य संपादक

Intlayer एक दृश्य संपादक भी प्रदान करता है जो आपको अपनी सामग्री को दृश्य तरीके से संपादित करने की अनुमति देता है। यह विज़ुअल एडिटर बाहरी intlayer-editor पैकेज में उपलब्ध है।

• सर्वर एक सरल Express एप्लीकेशन है जो क्लाइंट से अनुरोधों को सुनता है और आपकी एप्लीकेशन की सामग्री, जैसे dictionaries और कॉन्फ़िगरेशन को प्राप्त करता है ताकि इसे क्लाइंट साइड पर सुलभ बनाया जा सके।

• दूसरी ओर, क्लाइंट एक React एप्लीकेशन है जिसका उपयोग विजुअल इंटरफेस का उपयोग करके आपकी सामग्री के साथ इंटरैक्ट करने के लिए किया जाता है।

• सर्वर एक सरल Express एप्लिकेशन है जो क्लाइंट से अनुरोध सुनता है और आपकी एप्लिकेशन की सामग्री, जैसे कि dictionaries और कॉन्फ़िगरेशन, को पुनः प्राप्त करता है ताकि इसे क्लाइंट साइड पर सुलभ बनाया जा सके।
• दूसरी ओर, क्लाइंट एक React एप्लिकेशन है जिसका उपयोग दृश्य इंटरफ़ेस के माध्यम से आपकी सामग्री के साथ इंटरैक्ट करने के लिए किया जाता है। जब आप useIntlayer का उपयोग करके अपनी सामग्री को कॉल करते हैं और संपादक सक्षम होता है, तो यह स्वचालित रूप से आपकी स्ट्रिंग्स को IntlayerNode नामक एक Proxy ऑब्जेक्ट के साथ लपेट देता है। यह नोड window.postMessage का उपयोग करता है ताकि एक रैप्ड iframe के साथ संवाद किया जा सके जिसमें विज़ुअल एडिटर इंटरफ़ेस होता है।
  संपादक की ओर, संपादक इन संदेशों को सुनता है और आपकी सामग्री के साथ वास्तविक इंटरैक्शन का अनुकरण करता है, जिससे आप सीधे अपने एप्लिकेशन के संदर्भ में टेक्स्ट संपादित कर सकते हैं।

ऐप निर्माण अनुकूलन

आपके एप्लिकेशन के बंडल आकार को अनुकूलित करने के लिए, Intlayer दो प्लगइन्स प्रदान करता है: @intlayer/babel और @intlayer/swc प्लगइन्स।
Babel और SWC प्लगइन्स आपके एप्लिकेशन के Abstract Syntax Tree (AST) का विश्लेषण करके Intlayer फ़ंक्शंस के कॉल्स को अनुकूलित कोड से बदलते हैं। यह प्रक्रिया उत्पादन में आपके अंतिम बंडल को हल्का बनाती है क्योंकि यह सुनिश्चित करती है कि केवल वे डिक्शनरीज़ आयात हों जो वास्तव में उपयोग की जा रही हैं, चंकिंग को अनुकूलित करती है और बंडल का आकार कम करती है।

Babel और SWC plugins आपके एप्लिकेशन के Abstract Syntax Tree (AST) का विश्लेषण करके Intlayer फ़ंक्शन की कॉल को अनुकूलित कोड से बदलते हैं। यह प्रक्रिया आपके अंतिम bundle को production में हल्का करती है, यह सुनिश्चित करके कि केवल वे dictionaries import की जाती हैं जो वास्तव में उपयोग की जाती हैं, chunking को अनुकूलित करती हैं और bundle size को कम करती हैं।

डेवलपमेंट मोड में, Intlayer डिक्शनरीज़ के लिए केंद्रीकृत स्थिर आयात का उपयोग करता है ताकि विकास अनुभव को सरल बनाया जा सके।

कॉन्फ़िगरेशन में importMode = "dynamic" विकल्प को सक्रिय करके, Intlayer डिक्शनरीज़ को लोड करने के लिए डायनेमिक आयात का उपयोग करेगा। यह विकल्प डिफ़ॉल्ट रूप से अक्षम है ताकि एप्लिकेशन को रेंडर करते समय असिंक्रोनस प्रोसेसिंग से बचा जा सके।

@intlayer/babel डिफ़ॉल्ट रूप से vite-intlayer पैकेज पर उपलब्ध है,

@intlayer/swc डिफ़ॉल्ट रूप से next-intlayer पैकेज पर स्थापित नहीं है क्योंकि SWC प्लगइन्स अभी भी Next.js पर प्रयोगात्मक हैं।

अपने एप्लिकेशन के निर्माण को कॉन्फ़िगर करने का तरीका देखने के लिए, आप कॉन्फ़िगरेशन दस्तावेज़ पढ़ सकते हैं।

पैकेज

Intlayer कई पैकेजों से बना है, जिनमें से प्रत्येक का अनुवाद प्रक्रिया में एक विशिष्ट भूमिका है। यहां इस पैकेज की संरचना का एक ग्राफिकल प्रतिनिधित्व है:

intlayer

intlayer पैकेज का उपयोग एप्लिकेशन में सामग्री फ़ाइलों में सामग्री घोषित करने के लिए किया जाता है।

फ़्रंटएंड फ़्रेमवर्क

बैकएंड फ़्रेमवर्क

vite-intlayer

Intlayer को Vite बंडलर के साथ एकीकृत करने के लिए Vite प्लगइन के साथ-साथ उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधन, और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर शामिल करता है।

react-scripts-intlayer

react-scripts-intlayer कमांड और प्लगइन्स शामिल करता है जो Create React App आधारित एप्लिकेशन के साथ Intlayer को एकीकृत करने के लिए हैं। ये प्लगइन्स craco पर आधारित हैं और Webpack बंडलर के लिए अतिरिक्त कॉन्फ़िगरेशन शामिल करते हैं।

eslint-plugin-intlayer

eslint-plugin-intlayer पैकेज अनुवाद न किए गए स्ट्रिंग्स को पकड़ने, शब्दकोश परिभाषाओं को सत्यापित करने और i18n सर्वोत्तम प्रथाओं को लागू करने के लिए ESLint और oxlint नियम प्रदान करता है।

intlayer-editor

intlayer-editor पैकेज का उपयोग विज़ुअल एडिटर का उपयोग करने की अनुमति देने के लिए किया जाता है। यह पैकेज, वैकल्पिक, एप्लिकेशनों में इंस्टॉल किया जा सकता है और इसे react-intlayer पैकेज द्वारा उपयोग किया जाएगा।
यह दो भागों में विभाजित है: सर्वर और क्लाइंट।

क्लाइंट में UI तत्व शामिल हैं जो react-intlayer द्वारा उपयोग किए जाएंगे।

सर्वर, जो Express पर आधारित है, विज़ुअल एडिटर अनुरोधों को प्राप्त करने और सामग्री फ़ाइलों को प्रबंधित या संशोधित करने के लिए उपयोग किया जाता है।

intlayer-cli

intlayer-cli पैकेज का उपयोग npx intlayer dictionaries build कमांड का उपयोग करके शब्दकोश उत्पन्न करने के लिए किया जा सकता है। यदि intlayer पहले से इंस्टॉल है, तो CLI स्वचालित रूप से इंस्टॉल हो जाता है और यह पैकेज आवश्यक नहीं है।

@intlayer/core

@intlayer/core पैकेज मुख्य Intlayer पैकेज है। इसमें अनुवाद और शब्दकोश प्रबंधन कार्य शामिल हैं। @intlayer/core मल्टीप्लेटफॉर्म है और अन्य पैकेजों द्वारा शब्दकोशों की व्याख्या करने के लिए उपयोग किया जाता है।

@intlayer/config

@intlayer/config पैकेज का उपयोग Intlayer सेटिंग्स को कॉन्फ़िगर करने के लिए किया जाता है, जैसे उपलब्ध भाषाएं, Next.js मिडलवेयर पैरामीटर, या एकीकृत संपादक सेटिंग्स।

@intlayer/webpack

@intlayer/webpack पैकेज का उपयोग Webpack आधारित एप्लिकेशन को Intlayer के साथ काम करने के लिए Webpack कॉन्फ़िगरेशन प्रदान करने के लिए किया जाता है। यह पैकेज एक मौजूदा Webpack एप्लिकेशन में जोड़ने के लिए एक प्लगइन भी प्रदान करता है।

@intlayer/cli

@intlayer/cli पैकेज एक NPM पैकेज है जिसका उपयोग Intlayer कमांड लाइन इंटरफेस से संबंधित स्क्रिप्ट्स को घोषित करने के लिए किया जाता है। यह सभी Intlayer CLI कमांड्स की एकरूपता सुनिश्चित करता है। यह पैकेज विशेष रूप से intlayer-cli और intlayer पैकेजों द्वारा उपयोग किया जाता है।

@intlayer/mcp

@intlayer/mcp पैकेज एक MCP (मॉडल संदर्भ प्रोटोकॉल) सर्वर प्रदान करता है जो Intlayer इकोसिस्टम के लिए अनुकूलित AI-संचालित IDE सहायता प्रदान करता है। यह स्वचालित रूप से दस्तावेज़ीकरण लोड करता है और Intlayer CLI के साथ एकीकृत होता है।

@intlayer/lsp

@intlayer/lsp पैकेज Intlayer के लिए Language Server Protocol (LSP) सर्वर प्रदान करता है। यह परिभाषा पर जाएं, संदर्भ खोजें, होवर पूर्वावलोकन, शब्दकोश कुंजियों का स्वतः-पूर्ण और निदान चेतावनियों जैसी IDE सुविधाएं लाता है।

@intlayer/ai

@intlayer/ai पैकेज Intlayer अनुप्रयोगों के लिए SDK क्षमताएं प्रदान करता है, जो स्वचालित अनुवाद और AI-संचालित सामग्री निर्माण को सक्षम बनाता है।

@intlayer/analytics

@intlayer/analytics पैकेज सामग्री इंप्रेशन मेट्रिक्स, पृष्ठ/लोकेल और नोड-स्तरीय विश्लेषण एकत्र करने के लिए उपकरण प्रदान करता है, और सामग्री A/B परीक्षण को सक्षम करता है।

@intlayer/dictionaries-entry

@intlayer/dictionaries-entry पैकेज Intlayer शब्दकोशों का एंट्री पथ लौटाता है: इसके रूट से मर्ज किए गए शब्दकोश, और इसके /unmerged, /remote, /dynamic और /fetch सबपाथ से अनमर्ज, रिमोट, डायनामिक और fetch शब्दकोश। चूंकि ब्राउज़र से फ़ाइल सिस्टम की खोज असंभव है, इसलिए Webpack या Rollup जैसे बंडलर्स का उपयोग करके शब्दकोशों का एंट्री पथ प्राप्त करना संभव नहीं है। यह पैकेज और इसके सबपाथ alias किए जाने के लिए डिज़ाइन किए गए हैं, जिससे Vite, Webpack, और Turbopack जैसे विभिन्न बंडलर्स में बंडलिंग अनुकूलन की अनुमति मिलती है।

@intlayer/engine

@intlayer/engine पैकेज सामग्री फ़ाइलों की निगरानी के लिए उपयोग किया जाता है और प्रत्येक संशोधन पर संशोधित शब्दकोश को पुनः उत्पन्न करता है।

@intlayer/editor

@intlayer/editor पैकेज शब्दकोश संपादक से संबंधित उपयोगिताएँ प्रदान करता है। इसमें विशेष रूप से Intlayer संपादक के साथ एक एप्लिकेशन को इंटरफेस करने के लिए API और शब्दकोशों को संचालित करने के लिए उपयोगिताएँ शामिल हैं। यह पैकेज क्रॉस-प्लेटफ़ॉर्म है।

@intlayer/editor-react

@intlayer/editor-react पैकेज React एप्लिकेशन को Intlayer संपादक के साथ इंटरफेस करने के लिए स्टेट्स, कॉन्टेक्स्ट, हुक्स और कॉम्पोनेंट्स प्रदान करता है।

@intlayer/babel

@intlayer/babel पैकेज Vite और Webpack आधारित एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

@intlayer/swc

@intlayer/swc पैकेज Next.js एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

@intlayer/api

@intlayer/api पैकेज बैकएंड के साथ इंटरैक्ट करने के लिए एक API SDK है।

@intlayer/design-system

@intlayer/design-system पैकेज CMS और विज़ुअल एडिटर के बीच डिज़ाइन तत्वों को साझा करने के लिए उपयोग किया जाता है।

@intlayer/backend

@intlayer/backend पैकेज बैकएंड प्रकारों को निर्यात करता है और भविष्य में बैकएंड को एक स्टैंडअलोन पैकेज के रूप में पेश करेगा।

हमारी स्मार्ट डाक्यूमेंटेशन के साथ चैट करें

अक्सर पूछे जाने वाले प्रश्न