react-intlayer 8.4.3 → 8.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/IntlayerNode.cjs +17 -1
- package/dist/cjs/IntlayerNode.cjs.map +1 -1
- package/dist/cjs/UI/ContentSelector.cjs +96 -1
- package/dist/cjs/UI/ContentSelector.cjs.map +1 -1
- package/dist/cjs/_virtual/_rolldown/runtime.cjs +29 -1
- package/dist/cjs/client/IntlayerProvider.cjs +92 -1
- package/dist/cjs/client/IntlayerProvider.cjs.map +1 -1
- package/dist/cjs/client/format/index.cjs +20 -1
- package/dist/cjs/client/format/useCompact.cjs +29 -1
- package/dist/cjs/client/format/useCompact.cjs.map +1 -1
- package/dist/cjs/client/format/useCurrency.cjs +43 -1
- package/dist/cjs/client/format/useCurrency.cjs.map +1 -1
- package/dist/cjs/client/format/useDate.cjs +45 -1
- package/dist/cjs/client/format/useDate.cjs.map +1 -1
- package/dist/cjs/client/format/useIntl.cjs +45 -1
- package/dist/cjs/client/format/useIntl.cjs.map +1 -1
- package/dist/cjs/client/format/useList.cjs +40 -1
- package/dist/cjs/client/format/useList.cjs.map +1 -1
- package/dist/cjs/client/format/useNumber.cjs +41 -1
- package/dist/cjs/client/format/useNumber.cjs.map +1 -1
- package/dist/cjs/client/format/usePercentage.cjs +37 -1
- package/dist/cjs/client/format/usePercentage.cjs.map +1 -1
- package/dist/cjs/client/format/useRelativeTime.cjs +37 -1
- package/dist/cjs/client/format/useRelativeTime.cjs.map +1 -1
- package/dist/cjs/client/format/useUnit.cjs +36 -1
- package/dist/cjs/client/format/useUnit.cjs.map +1 -1
- package/dist/cjs/client/index.cjs +34 -1
- package/dist/cjs/client/t.cjs +40 -1
- package/dist/cjs/client/t.cjs.map +1 -1
- package/dist/cjs/client/useDictionary.cjs +27 -1
- package/dist/cjs/client/useDictionary.cjs.map +1 -1
- package/dist/cjs/client/useDictionaryAsync.cjs +24 -1
- package/dist/cjs/client/useDictionaryAsync.cjs.map +1 -1
- package/dist/cjs/client/useDictionaryDynamic.cjs +25 -1
- package/dist/cjs/client/useDictionaryDynamic.cjs.map +1 -1
- package/dist/cjs/client/useI18n.cjs +45 -1
- package/dist/cjs/client/useI18n.cjs.map +1 -1
- package/dist/cjs/client/useIntlayer.cjs +42 -1
- package/dist/cjs/client/useIntlayer.cjs.map +1 -1
- package/dist/cjs/client/useLoadDynamic.cjs +27 -1
- package/dist/cjs/client/useLoadDynamic.cjs.map +1 -1
- package/dist/cjs/client/useLocale.cjs +60 -1
- package/dist/cjs/client/useLocale.cjs.map +1 -1
- package/dist/cjs/client/useLocaleBase.cjs +26 -1
- package/dist/cjs/client/useLocaleBase.cjs.map +1 -1
- package/dist/cjs/client/useLocaleStorage.cjs +62 -1
- package/dist/cjs/client/useLocaleStorage.cjs.map +1 -1
- package/dist/cjs/client/useRewriteURL.cjs +42 -1
- package/dist/cjs/client/useRewriteURL.cjs.map +1 -1
- package/dist/cjs/client/useTraduction.cjs +35 -1
- package/dist/cjs/client/useTraduction.cjs.map +1 -1
- package/dist/cjs/editor/ContentSelector.cjs +18 -1
- package/dist/cjs/editor/ContentSelector.cjs.map +1 -1
- package/dist/cjs/editor/EditorProvider.cjs +11 -1
- package/dist/cjs/editor/EditorProvider.cjs.map +1 -1
- package/dist/cjs/editor/useEditor.cjs +39 -1
- package/dist/cjs/editor/useEditor.cjs.map +1 -1
- package/dist/cjs/getDictionary.cjs +10 -1
- package/dist/cjs/getDictionary.cjs.map +1 -1
- package/dist/cjs/getIntlayer.cjs +10 -1
- package/dist/cjs/getIntlayer.cjs.map +1 -1
- package/dist/cjs/html/HTMLProvider.cjs +18 -1
- package/dist/cjs/html/HTMLProvider.cjs.map +1 -1
- package/dist/cjs/html/HTMLRenderer.cjs +60 -1
- package/dist/cjs/html/HTMLRenderer.cjs.map +1 -1
- package/dist/cjs/html/HTMLRendererPlugin.cjs +23 -1
- package/dist/cjs/html/HTMLRendererPlugin.cjs.map +1 -1
- package/dist/cjs/html/index.cjs +12 -1
- package/dist/cjs/index.cjs +52 -1
- package/dist/cjs/markdown/MarkdownProvider.cjs +80 -1
- package/dist/cjs/markdown/MarkdownProvider.cjs.map +1 -1
- package/dist/cjs/markdown/MarkdownRenderer.cjs +201 -1
- package/dist/cjs/markdown/MarkdownRenderer.cjs.map +1 -1
- package/dist/cjs/markdown/MarkdownRendererPlugin.cjs +17 -1
- package/dist/cjs/markdown/MarkdownRendererPlugin.cjs.map +1 -1
- package/dist/cjs/markdown/index.cjs +24 -1
- package/dist/cjs/markdown/processor.cjs +66 -1
- package/dist/cjs/markdown/processor.cjs.map +1 -1
- package/dist/cjs/markdown/runtime.cjs +43 -1
- package/dist/cjs/markdown/runtime.cjs.map +1 -1
- package/dist/cjs/plugins.cjs +200 -1
- package/dist/cjs/plugins.cjs.map +1 -1
- package/dist/cjs/reactElement/renderReactElement.cjs +52 -1
- package/dist/cjs/reactElement/renderReactElement.cjs.map +1 -1
- package/dist/cjs/server/IntlayerServerProvider.cjs +34 -1
- package/dist/cjs/server/IntlayerServerProvider.cjs.map +1 -1
- package/dist/cjs/server/format/index.cjs +18 -1
- package/dist/cjs/server/format/useCompact.cjs +27 -1
- package/dist/cjs/server/format/useCompact.cjs.map +1 -1
- package/dist/cjs/server/format/useCurrency.cjs +38 -1
- package/dist/cjs/server/format/useCurrency.cjs.map +1 -1
- package/dist/cjs/server/format/useDate.cjs +43 -1
- package/dist/cjs/server/format/useDate.cjs.map +1 -1
- package/dist/cjs/server/format/useIntl.cjs +44 -1
- package/dist/cjs/server/format/useIntl.cjs.map +1 -1
- package/dist/cjs/server/format/useList.cjs +35 -1
- package/dist/cjs/server/format/useList.cjs.map +1 -1
- package/dist/cjs/server/format/useNumber.cjs +39 -1
- package/dist/cjs/server/format/useNumber.cjs.map +1 -1
- package/dist/cjs/server/format/usePercentage.cjs +35 -1
- package/dist/cjs/server/format/usePercentage.cjs.map +1 -1
- package/dist/cjs/server/format/useRelativeTime.cjs +35 -1
- package/dist/cjs/server/format/useRelativeTime.cjs.map +1 -1
- package/dist/cjs/server/format/useUnit.cjs +34 -1
- package/dist/cjs/server/format/useUnit.cjs.map +1 -1
- package/dist/cjs/server/index.cjs +24 -1
- package/dist/cjs/server/serverContext.cjs +58 -1
- package/dist/cjs/server/serverContext.cjs.map +1 -1
- package/dist/cjs/server/t.cjs +35 -1
- package/dist/cjs/server/t.cjs.map +1 -1
- package/dist/cjs/server/useDictionary.cjs +17 -1
- package/dist/cjs/server/useDictionary.cjs.map +1 -1
- package/dist/cjs/server/useDictionaryAsync.cjs +21 -1
- package/dist/cjs/server/useDictionaryAsync.cjs.map +1 -1
- package/dist/cjs/server/useDictionaryDynamic.cjs +22 -1
- package/dist/cjs/server/useDictionaryDynamic.cjs.map +1 -1
- package/dist/cjs/server/useI18n.cjs +38 -1
- package/dist/cjs/server/useI18n.cjs.map +1 -1
- package/dist/cjs/server/useIntlayer.cjs +17 -1
- package/dist/cjs/server/useIntlayer.cjs.map +1 -1
- package/dist/cjs/server/useLoadDynamic.cjs +14 -1
- package/dist/cjs/server/useLoadDynamic.cjs.map +1 -1
- package/dist/cjs/server/useLocale.cjs +24 -1
- package/dist/cjs/server/useLocale.cjs.map +1 -1
- package/dist/esm/IntlayerNode.mjs +15 -1
- package/dist/esm/IntlayerNode.mjs.map +1 -1
- package/dist/esm/UI/ContentSelector.mjs +94 -1
- package/dist/esm/UI/ContentSelector.mjs.map +1 -1
- package/dist/esm/client/IntlayerProvider.mjs +86 -1
- package/dist/esm/client/IntlayerProvider.mjs.map +1 -1
- package/dist/esm/client/format/index.mjs +11 -1
- package/dist/esm/client/format/useCompact.mjs +27 -1
- package/dist/esm/client/format/useCompact.mjs.map +1 -1
- package/dist/esm/client/format/useCurrency.mjs +41 -1
- package/dist/esm/client/format/useCurrency.mjs.map +1 -1
- package/dist/esm/client/format/useDate.mjs +43 -1
- package/dist/esm/client/format/useDate.mjs.map +1 -1
- package/dist/esm/client/format/useIntl.mjs +43 -1
- package/dist/esm/client/format/useIntl.mjs.map +1 -1
- package/dist/esm/client/format/useList.mjs +38 -1
- package/dist/esm/client/format/useList.mjs.map +1 -1
- package/dist/esm/client/format/useNumber.mjs +39 -1
- package/dist/esm/client/format/useNumber.mjs.map +1 -1
- package/dist/esm/client/format/usePercentage.mjs +35 -1
- package/dist/esm/client/format/usePercentage.mjs.map +1 -1
- package/dist/esm/client/format/useRelativeTime.mjs +35 -1
- package/dist/esm/client/format/useRelativeTime.mjs.map +1 -1
- package/dist/esm/client/format/useUnit.mjs +34 -1
- package/dist/esm/client/format/useUnit.mjs.map +1 -1
- package/dist/esm/client/index.mjs +14 -1
- package/dist/esm/client/t.mjs +38 -1
- package/dist/esm/client/t.mjs.map +1 -1
- package/dist/esm/client/useDictionary.mjs +25 -1
- package/dist/esm/client/useDictionary.mjs.map +1 -1
- package/dist/esm/client/useDictionaryAsync.mjs +21 -1
- package/dist/esm/client/useDictionaryAsync.mjs.map +1 -1
- package/dist/esm/client/useDictionaryDynamic.mjs +22 -1
- package/dist/esm/client/useDictionaryDynamic.mjs.map +1 -1
- package/dist/esm/client/useI18n.mjs +43 -1
- package/dist/esm/client/useI18n.mjs.map +1 -1
- package/dist/esm/client/useIntlayer.mjs +40 -1
- package/dist/esm/client/useIntlayer.mjs.map +1 -1
- package/dist/esm/client/useLoadDynamic.mjs +25 -1
- package/dist/esm/client/useLoadDynamic.mjs.map +1 -1
- package/dist/esm/client/useLocale.mjs +57 -1
- package/dist/esm/client/useLocale.mjs.map +1 -1
- package/dist/esm/client/useLocaleBase.mjs +23 -1
- package/dist/esm/client/useLocaleBase.mjs.map +1 -1
- package/dist/esm/client/useLocaleStorage.mjs +55 -1
- package/dist/esm/client/useLocaleStorage.mjs.map +1 -1
- package/dist/esm/client/useRewriteURL.mjs +39 -1
- package/dist/esm/client/useRewriteURL.mjs.map +1 -1
- package/dist/esm/client/useTraduction.mjs +33 -1
- package/dist/esm/client/useTraduction.mjs.map +1 -1
- package/dist/esm/editor/ContentSelector.mjs +16 -1
- package/dist/esm/editor/ContentSelector.mjs.map +1 -1
- package/dist/esm/editor/EditorProvider.mjs +10 -1
- package/dist/esm/editor/EditorProvider.mjs.map +1 -1
- package/dist/esm/editor/useEditor.mjs +37 -1
- package/dist/esm/editor/useEditor.mjs.map +1 -1
- package/dist/esm/getDictionary.mjs +8 -1
- package/dist/esm/getDictionary.mjs.map +1 -1
- package/dist/esm/getIntlayer.mjs +8 -1
- package/dist/esm/getIntlayer.mjs.map +1 -1
- package/dist/esm/html/HTMLProvider.mjs +15 -1
- package/dist/esm/html/HTMLProvider.mjs.map +1 -1
- package/dist/esm/html/HTMLRenderer.mjs +55 -1
- package/dist/esm/html/HTMLRenderer.mjs.map +1 -1
- package/dist/esm/html/HTMLRendererPlugin.mjs +21 -1
- package/dist/esm/html/HTMLRendererPlugin.mjs.map +1 -1
- package/dist/esm/html/index.mjs +5 -1
- package/dist/esm/index.mjs +21 -1
- package/dist/esm/markdown/MarkdownProvider.mjs +77 -1
- package/dist/esm/markdown/MarkdownProvider.mjs.map +1 -1
- package/dist/esm/markdown/MarkdownRenderer.mjs +197 -1
- package/dist/esm/markdown/MarkdownRenderer.mjs.map +1 -1
- package/dist/esm/markdown/MarkdownRendererPlugin.mjs +16 -1
- package/dist/esm/markdown/MarkdownRendererPlugin.mjs.map +1 -1
- package/dist/esm/markdown/index.mjs +7 -1
- package/dist/esm/markdown/processor.mjs +58 -1
- package/dist/esm/markdown/processor.mjs.map +1 -1
- package/dist/esm/markdown/runtime.mjs +39 -1
- package/dist/esm/markdown/runtime.mjs.map +1 -1
- package/dist/esm/plugins.mjs +190 -1
- package/dist/esm/plugins.mjs.map +1 -1
- package/dist/esm/reactElement/renderReactElement.mjs +50 -1
- package/dist/esm/reactElement/renderReactElement.mjs.map +1 -1
- package/dist/esm/server/IntlayerServerProvider.mjs +28 -1
- package/dist/esm/server/IntlayerServerProvider.mjs.map +1 -1
- package/dist/esm/server/format/index.mjs +10 -1
- package/dist/esm/server/format/useCompact.mjs +25 -1
- package/dist/esm/server/format/useCompact.mjs.map +1 -1
- package/dist/esm/server/format/useCurrency.mjs +36 -1
- package/dist/esm/server/format/useCurrency.mjs.map +1 -1
- package/dist/esm/server/format/useDate.mjs +41 -1
- package/dist/esm/server/format/useDate.mjs.map +1 -1
- package/dist/esm/server/format/useIntl.mjs +41 -1
- package/dist/esm/server/format/useIntl.mjs.map +1 -1
- package/dist/esm/server/format/useList.mjs +33 -1
- package/dist/esm/server/format/useList.mjs.map +1 -1
- package/dist/esm/server/format/useNumber.mjs +37 -1
- package/dist/esm/server/format/useNumber.mjs.map +1 -1
- package/dist/esm/server/format/usePercentage.mjs +33 -1
- package/dist/esm/server/format/usePercentage.mjs.map +1 -1
- package/dist/esm/server/format/useRelativeTime.mjs +33 -1
- package/dist/esm/server/format/useRelativeTime.mjs.map +1 -1
- package/dist/esm/server/format/useUnit.mjs +32 -1
- package/dist/esm/server/format/useUnit.mjs.map +1 -1
- package/dist/esm/server/index.mjs +12 -1
- package/dist/esm/server/serverContext.mjs +54 -1
- package/dist/esm/server/serverContext.mjs.map +1 -1
- package/dist/esm/server/t.mjs +33 -1
- package/dist/esm/server/t.mjs.map +1 -1
- package/dist/esm/server/useDictionary.mjs +16 -1
- package/dist/esm/server/useDictionary.mjs.map +1 -1
- package/dist/esm/server/useDictionaryAsync.mjs +18 -1
- package/dist/esm/server/useDictionaryAsync.mjs.map +1 -1
- package/dist/esm/server/useDictionaryDynamic.mjs +19 -1
- package/dist/esm/server/useDictionaryDynamic.mjs.map +1 -1
- package/dist/esm/server/useI18n.mjs +37 -1
- package/dist/esm/server/useI18n.mjs.map +1 -1
- package/dist/esm/server/useIntlayer.mjs +16 -1
- package/dist/esm/server/useIntlayer.mjs.map +1 -1
- package/dist/esm/server/useLoadDynamic.mjs +11 -1
- package/dist/esm/server/useLoadDynamic.mjs.map +1 -1
- package/dist/esm/server/useLocale.mjs +21 -1
- package/dist/esm/server/useLocale.mjs.map +1 -1
- package/dist/types/html/HTMLRenderer.d.ts +1 -1
- package/dist/types/plugins.d.ts +4 -3
- package/dist/types/plugins.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -1,2 +1,23 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
3
|
+
const require_server_serverContext = require('./serverContext.cjs');
|
|
4
|
+
const require_server_IntlayerServerProvider = require('./IntlayerServerProvider.cjs');
|
|
5
|
+
const require_server_useDictionary = require('./useDictionary.cjs');
|
|
6
|
+
const require_server_useLoadDynamic = require('./useLoadDynamic.cjs');
|
|
7
|
+
let _intlayer_config_built = require("@intlayer/config/built");
|
|
8
|
+
_intlayer_config_built = require_runtime.__toESM(_intlayer_config_built);
|
|
9
|
+
|
|
10
|
+
//#region src/server/useDictionaryDynamic.ts
|
|
11
|
+
/**
|
|
12
|
+
* On the server side, Hook that transform a dictionary and return the content
|
|
13
|
+
*
|
|
14
|
+
* If the locale is not provided, it will use the locale from the server context
|
|
15
|
+
*/
|
|
16
|
+
const useDictionaryDynamic = (dictionaryPromise, key, locale, fallbackLocale) => {
|
|
17
|
+
const localeTarget = locale ?? require_server_serverContext.getServerContext(require_server_IntlayerServerProvider.IntlayerServerContext) ?? fallbackLocale ?? _intlayer_config_built.default?.internationalization.defaultLocale;
|
|
18
|
+
return require_server_useDictionary.useDictionary(require_server_useLoadDynamic.useLoadDynamic(`${String(key)}.${localeTarget}`, dictionaryPromise[localeTarget]?.()), localeTarget);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
//#endregion
|
|
22
|
+
exports.useDictionaryDynamic = useDictionaryDynamic;
|
|
2
23
|
//# sourceMappingURL=useDictionaryDynamic.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDictionaryDynamic.cjs","names":["getServerContext","IntlayerServerContext","configuration","useDictionary","useLoadDynamic"],"sources":["../../../src/server/useDictionaryDynamic.ts"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport type {\n DeclaredLocales,\n LocalesValues,\n StrictModeLocaleMap,\n} from '@intlayer/types/module_augmentation';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\nimport { useDictionary } from './useDictionary';\nimport { useLoadDynamic } from './useLoadDynamic';\n\n/**\n * On the server side, Hook that transform a dictionary and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useDictionaryDynamic = <\n T extends Dictionary,\n L extends LocalesValues = DeclaredLocales,\n>(\n dictionaryPromise: StrictModeLocaleMap<() => Promise<T>>,\n key: string,\n locale?: L,\n fallbackLocale?: DeclaredLocales\n) => {\n const localeTarget =\n locale ??\n getServerContext<LocalesValues>(IntlayerServerContext) ??\n fallbackLocale ??\n configuration?.internationalization.defaultLocale;\n\n const dictionary = useLoadDynamic<T>(\n `${String(key)}.${localeTarget}`,\n (dictionaryPromise as any)[localeTarget]?.()\n );\n\n return useDictionary<T, L>(dictionary, localeTarget as L);\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDictionaryDynamic.cjs","names":["getServerContext","IntlayerServerContext","configuration","useDictionary","useLoadDynamic"],"sources":["../../../src/server/useDictionaryDynamic.ts"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport type {\n DeclaredLocales,\n LocalesValues,\n StrictModeLocaleMap,\n} from '@intlayer/types/module_augmentation';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\nimport { useDictionary } from './useDictionary';\nimport { useLoadDynamic } from './useLoadDynamic';\n\n/**\n * On the server side, Hook that transform a dictionary and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useDictionaryDynamic = <\n T extends Dictionary,\n L extends LocalesValues = DeclaredLocales,\n>(\n dictionaryPromise: StrictModeLocaleMap<() => Promise<T>>,\n key: string,\n locale?: L,\n fallbackLocale?: DeclaredLocales\n) => {\n const localeTarget =\n locale ??\n getServerContext<LocalesValues>(IntlayerServerContext) ??\n fallbackLocale ??\n configuration?.internationalization.defaultLocale;\n\n const dictionary = useLoadDynamic<T>(\n `${String(key)}.${localeTarget}`,\n (dictionaryPromise as any)[localeTarget]?.()\n );\n\n return useDictionary<T, L>(dictionary, localeTarget as L);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,wBAIX,mBACA,KACA,QACA,mBACG;CACH,MAAM,eACJ,UACAA,8CAAgCC,4DAAsB,IACtD,kBACAC,gCAAe,qBAAqB;AAOtC,QAAOC,2CALYC,6CACjB,GAAG,OAAO,IAAI,CAAC,GAAG,gBACjB,kBAA0B,iBAAiB,CAC7C,EAEsC,aAAkB"}
|
|
@@ -1,2 +1,39 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_getIntlayer = require('../getIntlayer.cjs');
|
|
3
|
+
const require_server_serverContext = require('./serverContext.cjs');
|
|
4
|
+
const require_server_IntlayerServerProvider = require('./IntlayerServerProvider.cjs');
|
|
5
|
+
|
|
6
|
+
//#region src/server/useI18n.ts
|
|
7
|
+
/**
|
|
8
|
+
* Hook that provides a translation function `t()` for accessing nested content by key.
|
|
9
|
+
* This hook mimics the pattern found in libraries like i18next, next-intl, and vue-i18n.
|
|
10
|
+
*
|
|
11
|
+
* @param namespace - The dictionary key to scope translations to
|
|
12
|
+
* @param locale - Optional locale override. If not provided, uses the current context locale
|
|
13
|
+
* @returns A translation function `t(key)` that returns the translated content for the given key
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* const t = useI18n('IndexPage');
|
|
18
|
+
* const title = t('title'); // Returns translated string for 'IndexPage.title'
|
|
19
|
+
* const nestedContent = t('section.subtitle'); // Returns 'IndexPage.section.subtitle'
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
const useI18n = (namespace, locale) => {
|
|
23
|
+
const dictionaryContent = require_getIntlayer.getIntlayer(namespace, locale ?? require_server_serverContext.getServerContext(require_server_IntlayerServerProvider.IntlayerServerContext));
|
|
24
|
+
const t = (path) => {
|
|
25
|
+
if (!path) return dictionaryContent;
|
|
26
|
+
const pathArray = path.split(".");
|
|
27
|
+
let current = dictionaryContent;
|
|
28
|
+
for (const key of pathArray) {
|
|
29
|
+
current = current?.[key];
|
|
30
|
+
if (current === void 0) return dictionaryContent;
|
|
31
|
+
}
|
|
32
|
+
return current;
|
|
33
|
+
};
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
exports.useI18n = useI18n;
|
|
2
39
|
//# sourceMappingURL=useI18n.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.cjs","names":["getIntlayer","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useI18n.ts"],"sourcesContent":["import type { ValidDotPathsFor } from '@intlayer/core/transpiler';\nimport type { DictionaryKeys, DictionaryRegistryContent, LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { GetSubPath } from '@intlayer/types/dictionary';\nimport { getIntlayer } from '../getIntlayer';\nimport type { DeepTransformContent } from '../plugins';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\n/**\n * Hook that provides a translation function `t()` for accessing nested content by key.\n * This hook mimics the pattern found in libraries like i18next, next-intl, and vue-i18n.\n *\n * @param namespace - The dictionary key to scope translations to\n * @param locale - Optional locale override. If not provided, uses the current context locale\n * @returns A translation function `t(key)` that returns the translated content for the given key\n *\n * @example\n * ```tsx\n * const t = useI18n('IndexPage');\n * const title = t('title'); // Returns translated string for 'IndexPage.title'\n * const nestedContent = t('section.subtitle'); // Returns 'IndexPage.section.subtitle'\n * ```\n */\nexport const useI18n = <T extends DictionaryKeys>(\n namespace: T,\n locale?: LocalesValues\n) => {\n const localeTarget =\n locale ?? getServerContext<LocalesValues>(IntlayerServerContext);\n\n // Get the dictionary content for the namespace\n const dictionaryContent = getIntlayer(namespace, localeTarget);\n\n // Return the translation function\n // @ts-ignore Type instantiation is excessively deep and possibly infinite\n const t = <P extends ValidDotPathsFor<T>>(\n path: P\n ): GetSubPath<DeepTransformContent<DictionaryRegistryContent<T>>, P> => {\n if (!path) {\n return dictionaryContent as any;\n }\n\n const pathArray = (path as string).split('.');\n let current: any = dictionaryContent;\n\n for (const key of pathArray) {\n current = current?.[key];\n if (current === undefined) {\n // Return the whole dictionary as fallback if path is not found\n return dictionaryContent as any;\n }\n }\n\n return current;\n };\n\n return t;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useI18n.cjs","names":["getIntlayer","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useI18n.ts"],"sourcesContent":["import type { ValidDotPathsFor } from '@intlayer/core/transpiler';\nimport type { DictionaryKeys, DictionaryRegistryContent, LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { GetSubPath } from '@intlayer/types/dictionary';\nimport { getIntlayer } from '../getIntlayer';\nimport type { DeepTransformContent } from '../plugins';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\n/**\n * Hook that provides a translation function `t()` for accessing nested content by key.\n * This hook mimics the pattern found in libraries like i18next, next-intl, and vue-i18n.\n *\n * @param namespace - The dictionary key to scope translations to\n * @param locale - Optional locale override. If not provided, uses the current context locale\n * @returns A translation function `t(key)` that returns the translated content for the given key\n *\n * @example\n * ```tsx\n * const t = useI18n('IndexPage');\n * const title = t('title'); // Returns translated string for 'IndexPage.title'\n * const nestedContent = t('section.subtitle'); // Returns 'IndexPage.section.subtitle'\n * ```\n */\nexport const useI18n = <T extends DictionaryKeys>(\n namespace: T,\n locale?: LocalesValues\n) => {\n const localeTarget =\n locale ?? getServerContext<LocalesValues>(IntlayerServerContext);\n\n // Get the dictionary content for the namespace\n const dictionaryContent = getIntlayer(namespace, localeTarget);\n\n // Return the translation function\n // @ts-ignore Type instantiation is excessively deep and possibly infinite\n const t = <P extends ValidDotPathsFor<T>>(\n path: P\n ): GetSubPath<DeepTransformContent<DictionaryRegistryContent<T>>, P> => {\n if (!path) {\n return dictionaryContent as any;\n }\n\n const pathArray = (path as string).split('.');\n let current: any = dictionaryContent;\n\n for (const key of pathArray) {\n current = current?.[key];\n if (current === undefined) {\n // Return the whole dictionary as fallback if path is not found\n return dictionaryContent as any;\n }\n }\n\n return current;\n };\n\n return t;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,WACX,WACA,WACG;CAKH,MAAM,oBAAoBA,gCAAY,WAHpC,UAAUC,8CAAgCC,4DAAsB,CAGJ;CAI9D,MAAM,KACJ,SACsE;AACtE,MAAI,CAAC,KACH,QAAO;EAGT,MAAM,YAAa,KAAgB,MAAM,IAAI;EAC7C,IAAI,UAAe;AAEnB,OAAK,MAAM,OAAO,WAAW;AAC3B,aAAU,UAAU;AACpB,OAAI,YAAY,OAEd,QAAO;;AAIX,SAAO;;AAGT,QAAO"}
|
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_getIntlayer = require('../getIntlayer.cjs');
|
|
3
|
+
const require_server_serverContext = require('./serverContext.cjs');
|
|
4
|
+
const require_server_IntlayerServerProvider = require('./IntlayerServerProvider.cjs');
|
|
5
|
+
|
|
6
|
+
//#region src/server/useIntlayer.ts
|
|
7
|
+
/**
|
|
8
|
+
* On the server side, Hook that picking one dictionary by its key and return the content
|
|
9
|
+
*
|
|
10
|
+
* If the locale is not provided, it will use the locale from the server context
|
|
11
|
+
*/
|
|
12
|
+
const useIntlayer = (key, locale, fallbackLocale) => {
|
|
13
|
+
return require_getIntlayer.getIntlayer(key, locale ?? require_server_serverContext.getServerContext(require_server_IntlayerServerProvider.IntlayerServerContext) ?? fallbackLocale);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
exports.useIntlayer = useIntlayer;
|
|
2
18
|
//# sourceMappingURL=useIntlayer.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntlayer.cjs","names":["getIntlayer","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useIntlayer.ts"],"sourcesContent":["import type { DeclaredLocales, DictionaryKeys, LocalesValues } from '@intlayer/types/module_augmentation';\nimport { getIntlayer } from '../getIntlayer';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\n/**\n * On the server side, Hook that picking one dictionary by its key and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useIntlayer = <\n T extends DictionaryKeys,\n L extends LocalesValues = DeclaredLocales,\n>(\n key: T,\n locale?: L,\n fallbackLocale?: DeclaredLocales\n) => {\n const localeTarget =\n locale ??\n getServerContext<LocalesValues>(IntlayerServerContext) ??\n fallbackLocale;\n\n return getIntlayer<T, L>(key, localeTarget as L);\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useIntlayer.cjs","names":["getIntlayer","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useIntlayer.ts"],"sourcesContent":["import type { DeclaredLocales, DictionaryKeys, LocalesValues } from '@intlayer/types/module_augmentation';\nimport { getIntlayer } from '../getIntlayer';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\n/**\n * On the server side, Hook that picking one dictionary by its key and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useIntlayer = <\n T extends DictionaryKeys,\n L extends LocalesValues = DeclaredLocales,\n>(\n key: T,\n locale?: L,\n fallbackLocale?: DeclaredLocales\n) => {\n const localeTarget =\n locale ??\n getServerContext<LocalesValues>(IntlayerServerContext) ??\n fallbackLocale;\n\n return getIntlayer<T, L>(key, localeTarget as L);\n};\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,eAIX,KACA,QACA,mBACG;AAMH,QAAOA,gCAAkB,KAJvB,UACAC,8CAAgCC,4DAAsB,IACtD,eAE8C"}
|
|
@@ -1,2 +1,15 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
3
|
+
let react = require("react");
|
|
4
|
+
react = require_runtime.__toESM(react);
|
|
5
|
+
|
|
6
|
+
//#region src/server/useLoadDynamic.ts
|
|
7
|
+
const useLoadDynamic = (_key, promise) => {
|
|
8
|
+
/** @ts-ignore remove error Property 'cache' does not exist on type 'typeof React'. */
|
|
9
|
+
const cachedPromise = react.default.cache(async () => await promise)();
|
|
10
|
+
return react.default.use(cachedPromise);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
//#endregion
|
|
14
|
+
exports.useLoadDynamic = useLoadDynamic;
|
|
2
15
|
//# sourceMappingURL=useLoadDynamic.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLoadDynamic.cjs","names":[],"sources":["../../../src/server/useLoadDynamic.ts"],"sourcesContent":["import react from 'react';\n\nexport const useLoadDynamic = <T>(_key: string, promise: Promise<T>): T => {\n /** @ts-ignore remove error Property 'cache' does not exist on type 'typeof React'. */\n const cachedPromise = react.cache(async () => await promise)();\n\n /** @ts-ignore remove error Property 'use' does not exist on type 'typeof React'. */\n const dictionary = react.use(cachedPromise);\n\n return dictionary;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLoadDynamic.cjs","names":[],"sources":["../../../src/server/useLoadDynamic.ts"],"sourcesContent":["import react from 'react';\n\nexport const useLoadDynamic = <T>(_key: string, promise: Promise<T>): T => {\n /** @ts-ignore remove error Property 'cache' does not exist on type 'typeof React'. */\n const cachedPromise = react.cache(async () => await promise)();\n\n /** @ts-ignore remove error Property 'use' does not exist on type 'typeof React'. */\n const dictionary = react.use(cachedPromise);\n\n return dictionary;\n};\n"],"mappings":";;;;;;AAEA,MAAa,kBAAqB,MAAc,YAA2B;;CAEzE,MAAM,gBAAgB,cAAM,MAAM,YAAY,MAAM,QAAQ,EAAE;AAK9D,QAFmB,cAAM,IAAI,cAAc"}
|
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
3
|
+
const require_server_serverContext = require('./serverContext.cjs');
|
|
4
|
+
const require_server_IntlayerServerProvider = require('./IntlayerServerProvider.cjs');
|
|
5
|
+
let _intlayer_config_built = require("@intlayer/config/built");
|
|
6
|
+
_intlayer_config_built = require_runtime.__toESM(_intlayer_config_built);
|
|
7
|
+
|
|
8
|
+
//#region src/server/useLocale.ts
|
|
9
|
+
/**
|
|
10
|
+
* On the server side, Hook that picking one dictionary by its key and return the content
|
|
11
|
+
*
|
|
12
|
+
* If the locale is not provided, it will use the locale from the server context
|
|
13
|
+
*/
|
|
14
|
+
const useLocale = () => {
|
|
15
|
+
const { defaultLocale, locales: availableLocales } = _intlayer_config_built.default?.internationalization ?? {};
|
|
16
|
+
return {
|
|
17
|
+
locale: require_server_serverContext.getServerContext(require_server_IntlayerServerProvider.IntlayerServerContext) ?? defaultLocale,
|
|
18
|
+
defaultLocale,
|
|
19
|
+
availableLocales
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
exports.useLocale = useLocale;
|
|
2
25
|
//# sourceMappingURL=useLocale.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLocale.cjs","names":["configuration","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useLocale.ts"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { DeclaredLocales } from '@intlayer/types/module_augmentation';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\ntype UseLocaleResult = {\n locale: DeclaredLocales;\n defaultLocale: DeclaredLocales;\n availableLocales: DeclaredLocales[];\n};\n\n/**\n * On the server side, Hook that picking one dictionary by its key and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useLocale = (): UseLocaleResult => {\n const { defaultLocale, locales: availableLocales } =\n configuration?.internationalization ?? {};\n\n const locale = (getServerContext(IntlayerServerContext) ??\n defaultLocale) as DeclaredLocales;\n\n return { locale, defaultLocale, availableLocales };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLocale.cjs","names":["configuration","getServerContext","IntlayerServerContext"],"sources":["../../../src/server/useLocale.ts"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { DeclaredLocales } from '@intlayer/types/module_augmentation';\nimport { IntlayerServerContext } from './IntlayerServerProvider';\nimport { getServerContext } from './serverContext';\n\ntype UseLocaleResult = {\n locale: DeclaredLocales;\n defaultLocale: DeclaredLocales;\n availableLocales: DeclaredLocales[];\n};\n\n/**\n * On the server side, Hook that picking one dictionary by its key and return the content\n *\n * If the locale is not provided, it will use the locale from the server context\n */\nexport const useLocale = (): UseLocaleResult => {\n const { defaultLocale, locales: availableLocales } =\n configuration?.internationalization ?? {};\n\n const locale = (getServerContext(IntlayerServerContext) ??\n defaultLocale) as DeclaredLocales;\n\n return { locale, defaultLocale, availableLocales };\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,kBAAmC;CAC9C,MAAM,EAAE,eAAe,SAAS,qBAC9BA,gCAAe,wBAAwB,EAAE;AAK3C,QAAO;EAAE,QAHOC,8CAAiBC,4DAAsB,IACrD;EAEe;EAAe;EAAkB"}
|
|
@@ -1,2 +1,16 @@
|
|
|
1
|
-
import{isValidElement
|
|
1
|
+
import { isValidElement } from "react";
|
|
2
|
+
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/IntlayerNode.tsx
|
|
5
|
+
const renderIntlayerNode = ({ children, value, additionalProps }) => {
|
|
6
|
+
const element = isValidElement(children) ? children : /* @__PURE__ */ jsx(Fragment$1, { children });
|
|
7
|
+
return new Proxy(element, { get(target, prop, receiver) {
|
|
8
|
+
if (prop === "value") return value;
|
|
9
|
+
if (additionalProps && Object.keys(additionalProps).includes(prop)) return additionalProps[prop];
|
|
10
|
+
return Reflect.get(target, prop, receiver);
|
|
11
|
+
} });
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { renderIntlayerNode };
|
|
2
16
|
//# sourceMappingURL=IntlayerNode.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlayerNode.mjs","names":[],"sources":["../../src/IntlayerNode.tsx"],"sourcesContent":["import type { NodeProps } from '@intlayer/core/interpreter';\nimport type { ResolvedEditor } from '@intlayer/types/module_augmentation';\nimport {\n isValidElement,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nexport type IntlayerNode<\n T = NodeProps['children'],\n AdditionalProps = Record<string, never>,\n> = ResolvedEditor<T, ReactNode> & {\n value: T;\n} & AdditionalProps;\n\ntype RenderIntlayerNodeProps<T> = PropsWithChildren<{\n value: T;\n children: ReactNode;\n additionalProps?: { [key: string]: any };\n}>;\n\nexport const renderIntlayerNode = <\n T extends number | string | boolean | undefined | null,\n>({\n children,\n value,\n additionalProps,\n}: RenderIntlayerNodeProps<T>): IntlayerNode<T> => {\n // If children is not a valid ReactElement, wrap it in a fragment\n const element: ReactElement<any> = isValidElement(children) ? (\n children\n ) : (\n <>{children}</>\n );\n\n // Return a Proxy that pretends to be the original element\n // but also has a .value getter.\n return new Proxy(element as ReactElement, {\n get(target, prop, receiver) {\n if (prop === 'value') {\n return value;\n }\n\n if (\n additionalProps &&\n Object.keys(additionalProps).includes(prop as string)\n ) {\n return additionalProps[prop as keyof typeof additionalProps];\n }\n\n return Reflect.get(target, prop, receiver);\n },\n }) as IntlayerNode<T>;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IntlayerNode.mjs","names":[],"sources":["../../src/IntlayerNode.tsx"],"sourcesContent":["import type { NodeProps } from '@intlayer/core/interpreter';\nimport type { ResolvedEditor } from '@intlayer/types/module_augmentation';\nimport {\n isValidElement,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nexport type IntlayerNode<\n T = NodeProps['children'],\n AdditionalProps = Record<string, never>,\n> = ResolvedEditor<T, ReactNode> & {\n value: T;\n} & AdditionalProps;\n\ntype RenderIntlayerNodeProps<T> = PropsWithChildren<{\n value: T;\n children: ReactNode;\n additionalProps?: { [key: string]: any };\n}>;\n\nexport const renderIntlayerNode = <\n T extends number | string | boolean | undefined | null,\n>({\n children,\n value,\n additionalProps,\n}: RenderIntlayerNodeProps<T>): IntlayerNode<T> => {\n // If children is not a valid ReactElement, wrap it in a fragment\n const element: ReactElement<any> = isValidElement(children) ? (\n children\n ) : (\n <>{children}</>\n );\n\n // Return a Proxy that pretends to be the original element\n // but also has a .value getter.\n return new Proxy(element as ReactElement, {\n get(target, prop, receiver) {\n if (prop === 'value') {\n return value;\n }\n\n if (\n additionalProps &&\n Object.keys(additionalProps).includes(prop as string)\n ) {\n return additionalProps[prop as keyof typeof additionalProps];\n }\n\n return Reflect.get(target, prop, receiver);\n },\n }) as IntlayerNode<T>;\n};\n"],"mappings":";;;;AAsBA,MAAa,sBAEX,EACA,UACA,OACA,sBACiD;CAEjD,MAAM,UAA6B,eAAe,SAAS,GACzD,WAEA,kCAAG,UAAY;AAKjB,QAAO,IAAI,MAAM,SAAyB,EACxC,IAAI,QAAQ,MAAM,UAAU;AAC1B,MAAI,SAAS,QACX,QAAO;AAGT,MACE,mBACA,OAAO,KAAK,gBAAgB,CAAC,SAAS,KAAe,CAErD,QAAO,gBAAgB;AAGzB,SAAO,QAAQ,IAAI,QAAQ,MAAM,SAAS;IAE7C,CAAC"}
|
|
@@ -1,2 +1,95 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/UI/ContentSelector.tsx
|
|
7
|
+
const DEFAULT_PRESS_DETECT_DURATION = 250;
|
|
8
|
+
const ContentSelector = ({ children, onPress, onHover, onUnhover, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp, ...props }) => {
|
|
9
|
+
const divRef = useRef(null);
|
|
10
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
11
|
+
const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
|
|
12
|
+
const pressTimerRef = useRef(null);
|
|
13
|
+
const isChildrenString = typeof children === "string";
|
|
14
|
+
const handleOnLongPress = () => {
|
|
15
|
+
setIsSelectingState(true);
|
|
16
|
+
onPress();
|
|
17
|
+
};
|
|
18
|
+
const startPressTimer = () => {
|
|
19
|
+
pressTimerRef.current = setTimeout(() => {
|
|
20
|
+
handleOnLongPress();
|
|
21
|
+
}, pressDuration);
|
|
22
|
+
};
|
|
23
|
+
const clearPressTimer = () => {
|
|
24
|
+
if (pressTimerRef.current) {
|
|
25
|
+
clearTimeout(pressTimerRef.current);
|
|
26
|
+
pressTimerRef.current = null;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const handleMouseDown = () => {
|
|
30
|
+
clearPressTimer();
|
|
31
|
+
startPressTimer();
|
|
32
|
+
};
|
|
33
|
+
const handleMouseEnter = () => {
|
|
34
|
+
setIsHovered(true);
|
|
35
|
+
onHover?.();
|
|
36
|
+
};
|
|
37
|
+
const handleMouseUp = () => {
|
|
38
|
+
onUnhover?.();
|
|
39
|
+
setIsHovered(false);
|
|
40
|
+
clearPressTimer();
|
|
41
|
+
};
|
|
42
|
+
const handleClickOutside = useCallback((event) => {
|
|
43
|
+
if (divRef.current && !divRef.current.contains(event.target)) {
|
|
44
|
+
setIsSelectingState(false);
|
|
45
|
+
onUnselect?.();
|
|
46
|
+
}
|
|
47
|
+
}, [onUnselect]);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
50
|
+
return () => {
|
|
51
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
52
|
+
};
|
|
53
|
+
}, [handleClickOutside]);
|
|
54
|
+
const handleOnClick = (e) => {
|
|
55
|
+
if (isSelectingState) {
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
const handleOnBlur = () => {
|
|
61
|
+
setIsSelectingState(false);
|
|
62
|
+
};
|
|
63
|
+
return /* @__PURE__ */ jsx("span", {
|
|
64
|
+
style: {
|
|
65
|
+
display: isChildrenString ? "inline" : "inline-block",
|
|
66
|
+
cursor: "pointer",
|
|
67
|
+
userSelect: "none",
|
|
68
|
+
borderRadius: "0.375rem",
|
|
69
|
+
outlineWidth: "2px",
|
|
70
|
+
outlineOffset: "4px",
|
|
71
|
+
outlineStyle: "solid",
|
|
72
|
+
outlineColor: isSelectingProp || isSelectingState || isHovered ? "inherit" : "transparent",
|
|
73
|
+
transition: "all 100ms 50ms ease-in-out"
|
|
74
|
+
},
|
|
75
|
+
role: "button",
|
|
76
|
+
tabIndex: 0,
|
|
77
|
+
onKeyUp: () => null,
|
|
78
|
+
onClick: handleOnClick,
|
|
79
|
+
onMouseDown: handleMouseDown,
|
|
80
|
+
onMouseUp: handleMouseUp,
|
|
81
|
+
onMouseLeave: handleMouseUp,
|
|
82
|
+
onTouchStart: handleMouseDown,
|
|
83
|
+
onTouchEnd: handleMouseUp,
|
|
84
|
+
onTouchCancel: handleMouseUp,
|
|
85
|
+
onBlur: handleOnBlur,
|
|
86
|
+
onMouseEnter: handleMouseEnter,
|
|
87
|
+
ref: divRef,
|
|
88
|
+
...props,
|
|
89
|
+
children
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
//#endregion
|
|
94
|
+
export { ContentSelector };
|
|
2
95
|
//# sourceMappingURL=ContentSelector.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentSelector.mjs","names":[],"sources":["../../../src/UI/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type HTMLAttributes,\n type MouseEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 250;\n\ntype ContentSelectorProps = {\n onPress: () => void;\n onHover?: () => void;\n onUnhover?: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'content'>;\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n children,\n onPress,\n onHover,\n onUnhover,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isHovered, setIsHovered] = useState(false);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isChildrenString = typeof children === 'string';\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onPress();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseEnter = () => {\n setIsHovered(true);\n onHover?.();\n };\n\n const handleMouseUp = () => {\n onUnhover?.();\n setIsHovered(false);\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n style={{\n display: isChildrenString ? 'inline' : 'inline-block',\n cursor: 'pointer',\n userSelect: 'none',\n borderRadius: '0.375rem',\n outlineWidth: '2px',\n outlineOffset: '4px',\n outlineStyle: 'solid',\n outlineColor:\n isSelectingProp || isSelectingState || isHovered\n ? 'inherit'\n : 'transparent',\n transition: 'all 100ms 50ms ease-in-out',\n }}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n onMouseEnter={handleMouseEnter}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContentSelector.mjs","names":[],"sources":["../../../src/UI/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type HTMLAttributes,\n type MouseEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 250;\n\ntype ContentSelectorProps = {\n onPress: () => void;\n onHover?: () => void;\n onUnhover?: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'content'>;\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n children,\n onPress,\n onHover,\n onUnhover,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isHovered, setIsHovered] = useState(false);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isChildrenString = typeof children === 'string';\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onPress();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseEnter = () => {\n setIsHovered(true);\n onHover?.();\n };\n\n const handleMouseUp = () => {\n onUnhover?.();\n setIsHovered(false);\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n style={{\n display: isChildrenString ? 'inline' : 'inline-block',\n cursor: 'pointer',\n userSelect: 'none',\n borderRadius: '0.375rem',\n outlineWidth: '2px',\n outlineOffset: '4px',\n outlineStyle: 'solid',\n outlineColor:\n isSelectingProp || isSelectingState || isHovered\n ? 'inherit'\n : 'transparent',\n transition: 'all 100ms 50ms ease-in-out',\n }}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n onMouseEnter={handleMouseEnter}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"mappings":";;;;;;AAYA,MAAM,gCAAgC;AAWtC,MAAa,mBAA6C,EACxD,UACA,SACA,SACA,WACA,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,iBACb,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,gBAAgB;CACzE,MAAM,gBAAgB,OAA6C,KAAK;CACxE,MAAM,mBAAmB,OAAO,aAAa;CAE7C,MAAM,0BAA0B;AAC9B,sBAAoB,KAAK;AACzB,WAAS;;CAGX,MAAM,wBAAwB;AAC5B,gBAAc,UAAU,iBAAiB;AACvC,sBAAmB;KAClB,cAAc;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,cAAc,SAAS;AACzB,gBAAa,cAAc,QAAQ;AACnC,iBAAc,UAAU;;;CAI5B,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,mBAAiB;;CAGnB,MAAM,yBAAyB;AAC7B,eAAa,KAAK;AAClB,aAAW;;CAGb,MAAM,sBAAsB;AAC1B,eAAa;AACb,eAAa,MAAM;AACnB,mBAAiB;;CAInB,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,EAAE;AACpE,uBAAoB,MAAM;AAC1B,iBAAc;;IAGlB,CAAC,WAAW,CACb;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,mBAAmB;AAE1D,eAAa;AAEX,YAAS,oBAAoB,aAAa,mBAAmB;;IAG9D,CAAC,mBAAmB,CAAC;CAExB,MAAM,iBAAoD,MAAM;AAC9D,MAAI,kBAAkB;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAM,qBAAqB;AAEzB,sBAAoB,MAAM;;AAG5B,QACE,oBAAC,QAAD;EACE,OAAO;GACL,SAAS,mBAAmB,WAAW;GACvC,QAAQ;GACR,YAAY;GACZ,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACd,cACE,mBAAmB,oBAAoB,YACnC,YACA;GACN,YAAY;GACb;EACD,MAAK;EACL,UAAU;EACV,eAAe;EACf,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,cAAc;EACd,KAAK;EACL,GAAI;EAEH;EACI"}
|
|
@@ -1,2 +1,87 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { EditorProvider } from "../editor/EditorProvider.mjs";
|
|
4
|
+
import { localeInStorage, setLocaleInStorage } from "./useLocaleStorage.mjs";
|
|
5
|
+
import configuration from "@intlayer/config/built";
|
|
6
|
+
import { createContext, useContext, useEffect, useState } from "react";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { localeResolver } from "@intlayer/core/localization";
|
|
9
|
+
|
|
10
|
+
//#region src/client/IntlayerProvider.tsx
|
|
11
|
+
/**
|
|
12
|
+
* Context that stores the current locale on the client side.
|
|
13
|
+
*/
|
|
14
|
+
const IntlayerClientContext = createContext({
|
|
15
|
+
locale: localeInStorage ?? configuration?.internationalization?.defaultLocale,
|
|
16
|
+
setLocale: () => null,
|
|
17
|
+
isCookieEnabled: true
|
|
18
|
+
});
|
|
19
|
+
/**
|
|
20
|
+
* Hook that provides the current Intlayer client context.
|
|
21
|
+
*
|
|
22
|
+
* @returns The current Intlayer context values.
|
|
23
|
+
*/
|
|
24
|
+
const useIntlayerContext = () => useContext(IntlayerClientContext);
|
|
25
|
+
/**
|
|
26
|
+
* Provider that stores the current locale on the client side.
|
|
27
|
+
*
|
|
28
|
+
* This component is focused on content delivery without the editor features.
|
|
29
|
+
*
|
|
30
|
+
* @param props - The provider props.
|
|
31
|
+
* @returns The provider component.
|
|
32
|
+
*/
|
|
33
|
+
const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLocaleProp, children, setLocale: setLocaleProp, disableEditor, isCookieEnabled }) => {
|
|
34
|
+
const { internationalization } = configuration ?? {};
|
|
35
|
+
const { locales: availableLocales, defaultLocale: defaultLocaleConfig } = internationalization ?? {};
|
|
36
|
+
const [currentLocale, setCurrentLocale] = useState(localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (localeProp && localeProp !== currentLocale) setCurrentLocale(localeProp);
|
|
39
|
+
}, [localeProp]);
|
|
40
|
+
const setLocaleBase = (newLocale) => {
|
|
41
|
+
if (currentLocale.toString() === newLocale.toString()) return;
|
|
42
|
+
if (!availableLocales?.map(String).includes(newLocale)) {
|
|
43
|
+
console.error(`Locale ${newLocale} is not available`);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
setCurrentLocale(newLocale);
|
|
47
|
+
setLocaleInStorage(newLocale, isCookieEnabled);
|
|
48
|
+
};
|
|
49
|
+
const setLocale = setLocaleProp ?? setLocaleBase;
|
|
50
|
+
const resolvedLocale = localeResolver(currentLocale);
|
|
51
|
+
return /* @__PURE__ */ jsx(IntlayerClientContext.Provider, {
|
|
52
|
+
value: {
|
|
53
|
+
locale: resolvedLocale,
|
|
54
|
+
setLocale,
|
|
55
|
+
disableEditor
|
|
56
|
+
},
|
|
57
|
+
children
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Main provider for Intlayer in React applications.
|
|
62
|
+
*
|
|
63
|
+
* It includes the editor provider by default, allowing for live content editing
|
|
64
|
+
* if configured.
|
|
65
|
+
*
|
|
66
|
+
* @param props - The provider props.
|
|
67
|
+
* @returns The provider component with editor support.
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```tsx
|
|
71
|
+
* import { IntlayerProvider } from 'react-intlayer';
|
|
72
|
+
*
|
|
73
|
+
* const App = () => (
|
|
74
|
+
* <IntlayerProvider>
|
|
75
|
+
* <MyComponent />
|
|
76
|
+
* </IntlayerProvider>
|
|
77
|
+
* );
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
const IntlayerProvider = ({ children, ...props }) => /* @__PURE__ */ jsxs(IntlayerProviderContent, {
|
|
81
|
+
...props,
|
|
82
|
+
children: [/* @__PURE__ */ jsx(EditorProvider, {}), children]
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
//#endregion
|
|
86
|
+
export { IntlayerClientContext, IntlayerProvider, IntlayerProviderContent, useIntlayerContext };
|
|
2
87
|
//# sourceMappingURL=IntlayerProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlayerProvider.mjs","names":[],"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport { localeResolver } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { localeInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n disableEditor?: boolean;\n isCookieEnabled?: boolean;\n};\n\n/**\n * Context that stores the current locale on the client side.\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n locale: localeInStorage ?? configuration?.internationalization?.defaultLocale,\n setLocale: () => null,\n isCookieEnabled: true,\n});\n\n/**\n * Hook that provides the current Intlayer client context.\n *\n * @returns The current Intlayer context values.\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\n/**\n * Props for the IntlayerProvider component.\n */\nexport type IntlayerProviderProps = PropsWithChildren<{\n /**\n * The locale to use. If not provided, it will be detected from storage or configuration.\n */\n locale?: LocalesValues;\n /**\n * The default locale to use as a fallback.\n */\n defaultLocale?: LocalesValues;\n /**\n * Function to set the locale.\n */\n setLocale?: (locale: LocalesValues) => void;\n /**\n * Whether to disable the editor.\n */\n disableEditor?: boolean;\n /**\n * Whether to enable cookies for storing the locale.\n */\n isCookieEnabled?: boolean;\n}>;\n\n/**\n * Provider that stores the current locale on the client side.\n *\n * This component is focused on content delivery without the editor features.\n *\n * @param props - The provider props.\n * @returns The provider component.\n */\nexport const IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n locale: localeProp,\n defaultLocale: defaultLocaleProp,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { internationalization } = configuration ?? {};\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n const initialLocale =\n localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig;\n\n const [currentLocale, setCurrentLocale] =\n useState<LocalesValues>(initialLocale);\n\n // Sync the prop to state if the prop changes from the parent\n useEffect(() => {\n if (localeProp && localeProp !== currentLocale) {\n setCurrentLocale(localeProp);\n }\n }, [localeProp]);\n\n const setLocaleBase = (newLocale: LocalesValues) => {\n if (currentLocale.toString() === newLocale.toString()) return;\n\n if (!availableLocales?.map(String).includes(newLocale)) {\n console.error(`Locale ${newLocale} is not available`);\n return;\n }\n\n setCurrentLocale(newLocale);\n setLocaleInStorage(newLocale, isCookieEnabled);\n };\n\n const setLocale = setLocaleProp ?? setLocaleBase;\n\n // Resolve based on currentLocale (the state), not the prop directly\n const resolvedLocale = localeResolver(currentLocale);\n\n return (\n <IntlayerClientContext.Provider\n value={{\n locale: resolvedLocale,\n setLocale,\n disableEditor,\n }}\n >\n {children}\n </IntlayerClientContext.Provider>\n );\n};\n\n/**\n * Main provider for Intlayer in React applications.\n *\n * It includes the editor provider by default, allowing for live content editing\n * if configured.\n *\n * @param props - The provider props.\n * @returns The provider component with editor support.\n *\n * @example\n * ```tsx\n * import { IntlayerProvider } from 'react-intlayer';\n *\n * const App = () => (\n * <IntlayerProvider>\n * <MyComponent />\n * </IntlayerProvider>\n * );\n * ```\n */\nexport const IntlayerProvider: FC<IntlayerProviderProps> = ({\n children,\n ...props\n}) => (\n <IntlayerProviderContent {...props}>\n <EditorProvider />\n {children}\n </IntlayerProviderContent>\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IntlayerProvider.mjs","names":[],"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport { localeResolver } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { localeInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n disableEditor?: boolean;\n isCookieEnabled?: boolean;\n};\n\n/**\n * Context that stores the current locale on the client side.\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n locale: localeInStorage ?? configuration?.internationalization?.defaultLocale,\n setLocale: () => null,\n isCookieEnabled: true,\n});\n\n/**\n * Hook that provides the current Intlayer client context.\n *\n * @returns The current Intlayer context values.\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\n/**\n * Props for the IntlayerProvider component.\n */\nexport type IntlayerProviderProps = PropsWithChildren<{\n /**\n * The locale to use. If not provided, it will be detected from storage or configuration.\n */\n locale?: LocalesValues;\n /**\n * The default locale to use as a fallback.\n */\n defaultLocale?: LocalesValues;\n /**\n * Function to set the locale.\n */\n setLocale?: (locale: LocalesValues) => void;\n /**\n * Whether to disable the editor.\n */\n disableEditor?: boolean;\n /**\n * Whether to enable cookies for storing the locale.\n */\n isCookieEnabled?: boolean;\n}>;\n\n/**\n * Provider that stores the current locale on the client side.\n *\n * This component is focused on content delivery without the editor features.\n *\n * @param props - The provider props.\n * @returns The provider component.\n */\nexport const IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n locale: localeProp,\n defaultLocale: defaultLocaleProp,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { internationalization } = configuration ?? {};\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n const initialLocale =\n localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig;\n\n const [currentLocale, setCurrentLocale] =\n useState<LocalesValues>(initialLocale);\n\n // Sync the prop to state if the prop changes from the parent\n useEffect(() => {\n if (localeProp && localeProp !== currentLocale) {\n setCurrentLocale(localeProp);\n }\n }, [localeProp]);\n\n const setLocaleBase = (newLocale: LocalesValues) => {\n if (currentLocale.toString() === newLocale.toString()) return;\n\n if (!availableLocales?.map(String).includes(newLocale)) {\n console.error(`Locale ${newLocale} is not available`);\n return;\n }\n\n setCurrentLocale(newLocale);\n setLocaleInStorage(newLocale, isCookieEnabled);\n };\n\n const setLocale = setLocaleProp ?? setLocaleBase;\n\n // Resolve based on currentLocale (the state), not the prop directly\n const resolvedLocale = localeResolver(currentLocale);\n\n return (\n <IntlayerClientContext.Provider\n value={{\n locale: resolvedLocale,\n setLocale,\n disableEditor,\n }}\n >\n {children}\n </IntlayerClientContext.Provider>\n );\n};\n\n/**\n * Main provider for Intlayer in React applications.\n *\n * It includes the editor provider by default, allowing for live content editing\n * if configured.\n *\n * @param props - The provider props.\n * @returns The provider component with editor support.\n *\n * @example\n * ```tsx\n * import { IntlayerProvider } from 'react-intlayer';\n *\n * const App = () => (\n * <IntlayerProvider>\n * <MyComponent />\n * </IntlayerProvider>\n * );\n * ```\n */\nexport const IntlayerProvider: FC<IntlayerProviderProps> = ({\n children,\n ...props\n}) => (\n <IntlayerProviderContent {...props}>\n <EditorProvider />\n {children}\n </IntlayerProviderContent>\n);\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAa,wBAAwB,cAA6B;CAChE,QAAQ,mBAAmB,eAAe,sBAAsB;CAChE,iBAAiB;CACjB,iBAAiB;CAClB,CAAC;;;;;;AAOF,MAAa,2BAA2B,WAAW,sBAAsB;;;;;;;;;AAoCzE,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,yBAAyB,iBAAiB,EAAE;CACpD,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChD,wBAAwB,EAAE;CAK5B,MAAM,CAAC,eAAe,oBACpB,SAHA,cAAc,mBAAmB,qBAAqB,oBAGhB;AAGxC,iBAAgB;AACd,MAAI,cAAc,eAAe,cAC/B,kBAAiB,WAAW;IAE7B,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,cAA6B;AAClD,MAAI,cAAc,UAAU,KAAK,UAAU,UAAU,CAAE;AAEvD,MAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE;AACtD,WAAQ,MAAM,UAAU,UAAU,mBAAmB;AACrD;;AAGF,mBAAiB,UAAU;AAC3B,qBAAmB,WAAW,gBAAgB;;CAGhD,MAAM,YAAY,iBAAiB;CAGnC,MAAM,iBAAiB,eAAe,cAAc;AAEpD,QACE,oBAAC,sBAAsB,UAAvB;EACE,OAAO;GACL,QAAQ;GACR;GACA;GACD;EAEA;EAC8B;;;;;;;;;;;;;;;;;;;;;;AAwBrC,MAAa,oBAA+C,EAC1D,UACA,GAAG,YAEH,qBAAC,yBAAD;CAAyB,GAAI;WAA7B,CACE,oBAAC,gBAAD,EAAkB,GACjB,SACuB"}
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { useIntl } from "./useIntl.mjs";
|
|
2
|
+
import { useUnit } from "./useUnit.mjs";
|
|
3
|
+
import { useDate } from "./useDate.mjs";
|
|
4
|
+
import { useNumber } from "./useNumber.mjs";
|
|
5
|
+
import { useRelativeTime } from "./useRelativeTime.mjs";
|
|
6
|
+
import { useCompact } from "./useCompact.mjs";
|
|
7
|
+
import { useList } from "./useList.mjs";
|
|
8
|
+
import { usePercentage } from "./usePercentage.mjs";
|
|
9
|
+
import { useCurrency } from "./useCurrency.mjs";
|
|
10
|
+
|
|
11
|
+
export { useCompact, useCurrency, useDate, useIntl, useList, useNumber, usePercentage, useRelativeTime, useUnit };
|
|
@@ -1,2 +1,28 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { IntlayerClientContext } from "../IntlayerProvider.mjs";
|
|
4
|
+
import { useCallback, useContext } from "react";
|
|
5
|
+
import { compact } from "@intlayer/core/formatters";
|
|
6
|
+
|
|
7
|
+
//#region src/client/format/useCompact.ts
|
|
8
|
+
/**
|
|
9
|
+
* React client hook that provides a compact number formatter
|
|
10
|
+
* bound to the current application locale.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* const formatCompact = useCompact();
|
|
15
|
+
* formatCompact(1500); // "1.5K"
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
const useCompact = () => {
|
|
19
|
+
const { locale } = useContext(IntlayerClientContext);
|
|
20
|
+
return useCallback((...args) => compact(args[0], {
|
|
21
|
+
...args[1],
|
|
22
|
+
locale: args[1]?.locale ?? locale
|
|
23
|
+
}), [locale]);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
//#endregion
|
|
27
|
+
export { useCompact };
|
|
2
28
|
//# sourceMappingURL=useCompact.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCompact.mjs","names":[],"sources":["../../../../src/client/format/useCompact.ts"],"sourcesContent":["'use client';\n\nimport { compact } from '@intlayer/core/formatters';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from '../IntlayerProvider';\n\n/**\n * React client hook that provides a compact number formatter\n * bound to the current application locale.\n *\n * @example\n * ```tsx\n * const formatCompact = useCompact();\n * formatCompact(1500); // \"1.5K\"\n * ```\n */\nexport const useCompact = () => {\n const { locale } = useContext(IntlayerClientContext);\n\n return useCallback(\n (...args: Parameters<typeof compact>) =>\n compact(args[0], {\n ...args[1],\n locale: args[1]?.locale ?? locale,\n }),\n [locale]\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCompact.mjs","names":[],"sources":["../../../../src/client/format/useCompact.ts"],"sourcesContent":["'use client';\n\nimport { compact } from '@intlayer/core/formatters';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from '../IntlayerProvider';\n\n/**\n * React client hook that provides a compact number formatter\n * bound to the current application locale.\n *\n * @example\n * ```tsx\n * const formatCompact = useCompact();\n * formatCompact(1500); // \"1.5K\"\n * ```\n */\nexport const useCompact = () => {\n const { locale } = useContext(IntlayerClientContext);\n\n return useCallback(\n (...args: Parameters<typeof compact>) =>\n compact(args[0], {\n ...args[1],\n locale: args[1]?.locale ?? locale,\n }),\n [locale]\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB;CAC9B,MAAM,EAAE,WAAW,WAAW,sBAAsB;AAEpD,QAAO,aACJ,GAAG,SACF,QAAQ,KAAK,IAAI;EACf,GAAG,KAAK;EACR,QAAQ,KAAK,IAAI,UAAU;EAC5B,CAAC,EACJ,CAAC,OAAO,CACT"}
|
|
@@ -1,2 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { IntlayerClientContext } from "../IntlayerProvider.mjs";
|
|
4
|
+
import { useCallback, useContext } from "react";
|
|
5
|
+
import { currency } from "@intlayer/core/formatters";
|
|
6
|
+
|
|
7
|
+
//#region src/client/format/useCurrency.ts
|
|
8
|
+
/**
|
|
9
|
+
* React client hook that provides a currency formatter
|
|
10
|
+
* bound to the current application locale.
|
|
11
|
+
*
|
|
12
|
+
* @returns {(value: string | number, options?: CurrencyProps) => string}
|
|
13
|
+
* A function to format numbers into localized currency strings.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* const formatCurrency = useCurrency();
|
|
18
|
+
*
|
|
19
|
+
* formatCurrency(1500, { currency: "USD" });
|
|
20
|
+
* // "$1,500.00"
|
|
21
|
+
*
|
|
22
|
+
* formatCurrency(1500, { currency: "EUR", locale: "de-DE" });
|
|
23
|
+
* // "1.500,00 €"
|
|
24
|
+
*
|
|
25
|
+
* formatCurrency(9876543.21, {
|
|
26
|
+
* currency: "JPY",
|
|
27
|
+
* fractionDigits: 0,
|
|
28
|
+
* });
|
|
29
|
+
* // "¥9,876,543"
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
const useCurrency = () => {
|
|
33
|
+
const { locale } = useContext(IntlayerClientContext);
|
|
34
|
+
return useCallback((...args) => currency(args[0], {
|
|
35
|
+
...args[1],
|
|
36
|
+
locale: args[1]?.locale ?? locale
|
|
37
|
+
}), [locale]);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
//#endregion
|
|
41
|
+
export { useCurrency };
|
|
2
42
|
//# sourceMappingURL=useCurrency.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCurrency.mjs","names":[],"sources":["../../../../src/client/format/useCurrency.ts"],"sourcesContent":["'use client';\n\nimport { currency } from '@intlayer/core/formatters';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from '../IntlayerProvider';\n\n/**\n * React client hook that provides a currency formatter\n * bound to the current application locale.\n *\n * @returns {(value: string | number, options?: CurrencyProps) => string}\n * A function to format numbers into localized currency strings.\n *\n * @example\n * ```tsx\n * const formatCurrency = useCurrency();\n *\n * formatCurrency(1500, { currency: \"USD\" });\n * // \"$1,500.00\"\n *\n * formatCurrency(1500, { currency: \"EUR\", locale: \"de-DE\" });\n * // \"1.500,00 €\"\n *\n * formatCurrency(9876543.21, {\n * currency: \"JPY\",\n * fractionDigits: 0,\n * });\n * // \"¥9,876,543\"\n * ```\n */\nexport const useCurrency = () => {\n const { locale } = useContext(IntlayerClientContext);\n\n return useCallback(\n (...args: Parameters<typeof currency>) =>\n currency(args[0], {\n ...args[1],\n locale: args[1]?.locale ?? locale,\n }),\n [locale]\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCurrency.mjs","names":[],"sources":["../../../../src/client/format/useCurrency.ts"],"sourcesContent":["'use client';\n\nimport { currency } from '@intlayer/core/formatters';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from '../IntlayerProvider';\n\n/**\n * React client hook that provides a currency formatter\n * bound to the current application locale.\n *\n * @returns {(value: string | number, options?: CurrencyProps) => string}\n * A function to format numbers into localized currency strings.\n *\n * @example\n * ```tsx\n * const formatCurrency = useCurrency();\n *\n * formatCurrency(1500, { currency: \"USD\" });\n * // \"$1,500.00\"\n *\n * formatCurrency(1500, { currency: \"EUR\", locale: \"de-DE\" });\n * // \"1.500,00 €\"\n *\n * formatCurrency(9876543.21, {\n * currency: \"JPY\",\n * fractionDigits: 0,\n * });\n * // \"¥9,876,543\"\n * ```\n */\nexport const useCurrency = () => {\n const { locale } = useContext(IntlayerClientContext);\n\n return useCallback(\n (...args: Parameters<typeof currency>) =>\n currency(args[0], {\n ...args[1],\n locale: args[1]?.locale ?? locale,\n }),\n [locale]\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,WAAW,WAAW,sBAAsB;AAEpD,QAAO,aACJ,GAAG,SACF,SAAS,KAAK,IAAI;EAChB,GAAG,KAAK;EACR,QAAQ,KAAK,IAAI,UAAU;EAC5B,CAAC,EACJ,CAAC,OAAO,CACT"}
|