@mittwald/flow-react-components 1.5.25 → 1.5.27

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.
Files changed (6) hide show
  1. package/AGENTS.md +11 -88
  2. package/dist/assets/component-index.json +1 -1
  3. package/dist/assets/doc-properties.json +1 -1
  4. package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs +15 -2
  5. package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs.map +1 -1
  6. package/package.json +10 -10
package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs CHANGED
@@ -13,6 +13,20 @@ var pickComponentTranslations = (componentName, data) => {
13
13
  return pick(components ?? {}, [componentName])[componentName] ?? {};
14
14
  });
15
15
  };
16
+ var compiledMessages = /* @__PURE__ */ new Map();
17
+ var getCompiledMessage = (message, locale) => {
18
+ let messagesOfLocale = compiledMessages.get(locale);
19
+ if (!messagesOfLocale) {
20
+ messagesOfLocale = /* @__PURE__ */ new Map();
21
+ compiledMessages.set(locale, messagesOfLocale);
22
+ }
23
+ let compiled = messagesOfLocale.get(message);
24
+ if (!compiled) {
25
+ compiled = new IntlMessageFormat(message, locale);
26
+ messagesOfLocale.set(message, compiled);
27
+ }
28
+ return compiled;
29
+ };
16
30
  var useLocalizedStringFormatter = (strings, componentName) => {
17
31
  const locale = useLanguage();
18
32
  const { translations, translate } = useTranslationProvider();
@@ -31,8 +45,7 @@ var useLocalizedStringFormatter = (strings, componentName) => {
31
45
  if (customTranslated !== void 0) return customTranslated;
32
46
  }
33
47
  const translationString = dictionary.getStringForLocale(key, locale);
34
- const translationMessage = new IntlMessageFormat(translationString, locale);
35
- return String(translationMessage.format(variables));
48
+ return String(getCompiledMessage(translationString, locale).format(variables));
36
49
  }, [
37
50
  translate,
38
51
  locale,
package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n type Translations,\n useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n Variables,\n LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n key: string,\n variables: Variables,\n meta: {\n component: string;\n locale: string;\n },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n componentName: LocalizedComponentName,\n data?: Translations,\n) => {\n if (!data) {\n return {};\n }\n\n return mapValues(data, (components) => {\n const picked = pick(components ?? {}, [componentName]);\n return picked[componentName] ?? {};\n });\n};\n\nexport const useLocalizedStringFormatter = (\n strings: LocalizedStrings,\n componentName: LocalizedComponentName,\n) => {\n const locale = useLanguage();\n const { translations, translate } = useTranslationProvider();\n\n const mergedStrings = useMemo(\n () =>\n mergeDeep(\n strings,\n pickComponentTranslations(componentName, translations),\n ),\n [strings, translations, componentName],\n );\n\n const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n const formatFunction = useCallback(\n (key: string, variables?: Variables): string => {\n if (translate) {\n const customTranslated = translate(key, variables, {\n component: componentName,\n locale,\n });\n\n if (customTranslated !== undefined) {\n return customTranslated;\n }\n }\n\n const translationString = dictionary.getStringForLocale(key, locale);\n const translationMessage = new IntlMessageFormat(\n translationString,\n locale,\n );\n\n return String(translationMessage.format(variables));\n },\n [translate, locale, componentName, dictionary],\n );\n\n return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,MAAM,qBAAqB,IAAI,kBAC7B,mBACA,MACF;EAEA,OAAO,OAAO,mBAAmB,OAAO,SAAS,CAAC;CACpD,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}
1
+ {"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n type Translations,\n useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n Variables,\n LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n key: string,\n variables: Variables,\n meta: {\n component: string;\n locale: string;\n },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n componentName: LocalizedComponentName,\n data?: Translations,\n) => {\n if (!data) {\n return {};\n }\n\n return mapValues(data, (components) => {\n const picked = pick(components ?? {}, [componentName]);\n return picked[componentName] ?? {};\n });\n};\n\n// Compiling parses the message — do it once per locale and message.\nconst compiledMessages = new Map<string, Map<string, IntlMessageFormat>>();\n\nconst getCompiledMessage = (message: string, locale: string) => {\n let messagesOfLocale = compiledMessages.get(locale);\n if (!messagesOfLocale) {\n messagesOfLocale = new Map();\n compiledMessages.set(locale, messagesOfLocale);\n }\n\n let compiled = messagesOfLocale.get(message);\n if (!compiled) {\n compiled = new IntlMessageFormat(message, locale);\n messagesOfLocale.set(message, compiled);\n }\n\n return compiled;\n};\n\nexport const useLocalizedStringFormatter = (\n strings: LocalizedStrings,\n componentName: LocalizedComponentName,\n) => {\n const locale = useLanguage();\n const { translations, translate } = useTranslationProvider();\n\n const mergedStrings = useMemo(\n () =>\n mergeDeep(\n strings,\n pickComponentTranslations(componentName, translations),\n ),\n [strings, translations, componentName],\n );\n\n const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n const formatFunction = useCallback(\n (key: string, variables?: Variables): string => {\n if (translate) {\n const customTranslated = translate(key, variables, {\n component: componentName,\n locale,\n });\n\n if (customTranslated !== undefined) {\n return customTranslated;\n }\n }\n\n const translationString = dictionary.getStringForLocale(key, locale);\n return String(\n getCompiledMessage(translationString, locale).format(variables),\n );\n },\n [translate, locale, componentName, dictionary],\n );\n\n return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAGA,IAAM,mCAAmB,IAAI,IAA4C;AAEzE,IAAM,sBAAsB,SAAiB,WAAmB;CAC9D,IAAI,mBAAmB,iBAAiB,IAAI,MAAM;CAClD,IAAI,CAAC,kBAAkB;EACrB,mCAAmB,IAAI,IAAI;EAC3B,iBAAiB,IAAI,QAAQ,gBAAgB;CAC/C;CAEA,IAAI,WAAW,iBAAiB,IAAI,OAAO;CAC3C,IAAI,CAAC,UAAU;EACb,WAAW,IAAI,kBAAkB,SAAS,MAAM;EAChD,iBAAiB,IAAI,SAAS,QAAQ;CACxC;CAEA,OAAO;AACT;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,OAAO,OACL,mBAAmB,mBAAmB,MAAM,CAAC,CAAC,OAAO,SAAS,CAChE;CACF,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.5.25",
3
+ "version": "1.5.27",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
84
84
  "@internationalized/string-compiler": "^3.4.1",
85
85
  "@lezer/common": "^1.5.2",
86
86
  "@lezer/highlight": "^1.2.3",
87
- "@mittwald/flow-icons": "^1.5.25",
87
+ "@mittwald/flow-icons": "^1.5.27",
88
88
  "@mittwald/password-tools-js": "^3.0.0",
89
- "@mittwald/react-tunnel": "^1.5.25",
89
+ "@mittwald/react-tunnel": "^1.5.27",
90
90
  "@mittwald/react-use-promise": "^4.2.2",
91
91
  "@react-aria/form": "^3.2.1",
92
92
  "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
139
139
  "@internationalized/date": "^3.12.3",
140
140
  "@lezer/generator": "^1.8.0",
141
141
  "@lezer/lr": "^1.4.10",
142
- "@mittwald/flow-components-base": "1.5.25",
143
- "@mittwald/flow-core": "1.5.25",
144
- "@mittwald/flow-design-tokens": "1.5.25",
145
- "@mittwald/flow-icons-base": "1.5.25",
142
+ "@mittwald/flow-components-base": "1.5.27",
143
+ "@mittwald/flow-core": "1.5.27",
144
+ "@mittwald/flow-design-tokens": "1.5.27",
145
+ "@mittwald/flow-icons-base": "1.5.27",
146
146
  "@mittwald/react-use-promise": "^4.2.2",
147
147
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
148
- "@mittwald/typescript-config": "1.5.25",
148
+ "@mittwald/typescript-config": "1.5.27",
149
149
  "@nx/storybook": "^22.7.6",
150
150
  "@storybook/addon-a11y": "^10.5.10",
151
151
  "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
199
199
  },
200
200
  "peerDependencies": {
201
201
  "@internationalized/date": "^3.12.2",
202
- "@mittwald/flow-icons-pro": "1.5.25",
202
+ "@mittwald/flow-icons-pro": "1.5.27",
203
203
  "@mittwald/react-use-promise": "^4.2.2",
204
204
  "next": "^16.2.3",
205
205
  "react": "^19.2.0",
@@ -223,5 +223,5 @@
223
223
  "browserslist": [
224
224
  "baseline widely available"
225
225
  ],
226
- "gitHead": "c4901ee1f837656e2afe9f320ac7b7e62a99e412"
226
+ "gitHead": "e78710541ca53f321705b11b5d5eb7f40323e398"
227
227
  }