fakundo / react-localized Goto Github PK

const localeData = {
  ru: ruLocaleData,
  en: enLocaleData,
}

<LocaleProvider localeData={localeData}>
...
</LocaleProvider>

This breaks working locale provider

react-localized-extractor -l ru -a.gettext __ -a.ngettext __n

/node_modules/react-localized-extractor/lib/react-localized-extractor.js:2
var t=require("yargs"),e=require("path"),r=require("fs"),a=require("gettext-parser"),n=require("mkdirp"),s=require("gettext-extractor"),l=require("typescript"),o=require("plural-forms");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function p(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,a.get?a:{enumerable:!0,get:function(){return t[r]}})}}),e.default=t,e}var u=/#PURE/i(t),c=/#PURE/i(e),d=/#PURE/i(r),x=/#PURE/i(a),g=/#PURE/i(n),f=/#PURE/p(l);const y=t=>{switch(t.kind){case f.SyntaxKind.FirstTemplateToken:return t.text;case f.SyntaxKind.TemplateExpression:{const e=[t.head.text];return t.templateSpans.forEach(t=>{e.push(t.literal.text)}),e.join("${}")}default:return""}},m=t=>{var e;return(null==(e=t[0])?void 0:e.text)||"undefined"};var v=({gettext:t,pgettext:e,ngettext:r,npgettext:a})=>(n,s,l)=>{switch(n.kind){case f.SyntaxKind.CallExpression:switch(!0){case e.includes(n.expression.text):((t,e)=>{var r;(null==(r=t.parent)?void 0:r.kind)===f.SyntaxKind.TaggedTemplateExpression&&e({text:y(t.parent.template),context:m(t.arguments)})})(n,l);break;case a.includes(n.expression.text):((t,e)=>{var r,a;(null==(r=t.parent)?void 0:r.kind)===f.SyntaxKind.TaggedTemplateExpression&&(null==(a=t.parent.parent)?void 0:a.kind)===f.SyntaxKind.TaggedTemplateExpression&&e({context:m(t.arguments),text:y(t.parent.template),textPlural:y(t.parent.parent.template)})})(n,l)}break;case f.SyntaxKind.TaggedTemplateExpression:switch(!0){case t.includes(n.tag.text):((t,e)=>{e({text:y(t.template)})})(n,l);break;case r.includes(n.tag.text):((t,e)=>{var r,a;(null==(r=t.parent)?void 0:r.kind)===f.SyntaxKind.TaggedTemplateExpression&&(null==(a=t.parent.parent)?void 0:a.kind)===f.SyntaxKind.CallExpression&&e({text:y(t.template),textPlural:y(t.parent.template)})})(n,l)}}};const E=t=>t.filter(t=>!!t);function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},h.apply(this,arguments)}const b=(t,e,r)=>{Object.keys(t).find(t=>t.toLowerCase()===e.toLowerCase())||(t[e]=r())},{argv:k}=u.default.locale("en").usage("$0 [options]").help().options({locales:{alias:"l",type:"string",description:"List of desired locales (comma separated)",require:!0,requiresArg:!0},source:{alias:"s",type:"string",description:"Source files pattern",default:"./src/**/*.@(js|ts|jsx|tsx)"},output:{alias:"o",type:"string",description:"Output .po files directory",default:"./locales"},alias:{alias:"a",type:"string",description:"Function alias"},"save-pot":{type:"boolean",description:"Should create catalog .pot file in output directory",default:!1}}),{locales:S,source:j,output:O,alias:P,savePot:T}=k,q=((t,e)=>{const r=new s.GettextExtractor,a="string"==typeof e?{gettext:e}:e,n=E(["gettext",null==a?void 0:a.gettext]),l=E(["pgettext",null==a?void 0:a.pgettext]),o=E(["ngettext",null==a?void 0:a.ngettext]),i=E(["npgettext",null==a?void 0:a.npgettext]);return r.createJsParser([v({gettext:n,pgettext:l,ngettext:o,npgettext:i}),s.JsExtractors.callExpression(n,{arguments:{text:0}}),s.JsExtractors.callExpression(o,{arguments:{text:0,textPlural:1}}),s.JsExtractors.callExpression(l,{arguments:{context:0,text:1}}),s.JsExtractors.callExpression(i,{arguments:{context:0,text:1,textPlural:2}})]).parseFilesGlob(t),r})(j,P),w=x.default.po.parse(q.getPotString());g.default.sync(c.default.resolve(O)),T&&q.savePotFile(c.default.resolve(O,"./catalog.pot")),S.split(",").forEach(t=>{let e;try{e=d.default.readFileSync(c.default.resolve(O,./${t}.po))}catch(t){e=""}const r=((t,e,r)=>{const a=h({},r.headers,e.headers);b(a,"Plural-Forms",()=>nplurals=${o.getNPlurals(t)}; plural=${o.getFormula(t)};),b(a,"Language",()=>t);const n={};return Object.keys(r.translations).forEach(t=>{const a=r.translations[t],s=e.translations[t];s?(n[t]={},Object.keys(a).forEach(e=>{const r=a[e],l=s[e];n[t][e]=l?h({},r,{msgstr:l.msgstr||r.msgstr}):r})):n[t]=a}),h({},r,{headers:a,translations:n})})(t,x.default.po.parse(e),w),a=x.default.po.compile(r);d.default.writeFileSync(c.default.resolve(O,./${t}.po),a)}),q.printStats();

TypeError: Cannot read properties of undefined (reading 'text')
at /node_modules/react-localized-extractor/lib/react-localized-extractor.js:2:1657
at JsParser.parseNode (/node_modules/gettext-extractor/dist/js/parser.js:18:13)
at /node_modules/node_modules/gettext-extractor/dist/js/parser.js:21:45
at visitNode2 (/node_modules/typescript/lib/typescript.js:27708:20)
at forEachChildInExpressionStatement (/node_modules/typescript/lib/typescript.js:28347:18)
at Object.forEachChild (/node_modules/typescript/lib/typescript.js:27801:37)
at JsParser.parseNode (/node_modules/gettext-extractor/dist/js/parser.js:20:12)
at /node_modules/gettext-extractor/dist/js/parser.js:21:45
at visitNodes (/node_modules/typescript/lib/typescript.js:27716:24)
at forEachChildInBlock (/node_modules/typescript/lib/typescript.js:27761:12)

Node.js v20.7.0

react: 18.2.0
react-native: 0.71.13

"name": "react-localized-extractor",
"version": "2.1.1",

"name": "react-localized",
"version": "3.2.1",

It seems not usable in this package

Would it be possible to update the code to work with React 18, please?

Currently there is following warning printed when used with React 18 (those are written by React):

• Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

When using the preact-cli, importing po files directly gives me ts and webpack errors.

TS:

typescript: Cannot find module 'src/assets/locales/en.po' or its corresponding type declarations.

npm run build (comes with preact-cli)

[...]
X ERROR ./src/locales/en.ts
ERROR in ./src/locales/en.ts(3,22):
TS2307: Cannot find module 'src/assets/locales/en.po' or its corresponding type declarations.

This is using a locales/en.ts based on the examples with its associated po file in assets/locales/en.po.

import messages from "src/assets/locales/en.po";
import { createLocale } from "preact-localized";

export default createLocale(messages);

When adding some ignore comments, everything works!

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

import messages from "src/assets/locales/en.po";
import { createLocale } from "preact-localized";

export default createLocale(messages);

Here is the preact.config.js that I am using (it may be handy to add an example for this - I'll open a PR if you're interested).

import CopyWebpackPlugin from 'copy-webpack-plugin';
import { resolve } from "path";

export default (config) => {
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [{
        from: "*",
        to: "src/assets/locales",
        context: resolve(__dirname, "src/assets/locales")
      }]
    })
  );

  config.module.rules.push({
    test: /\.po$/,
    use: "react-localized-loader",
  });
};

Is there a better way to include the definitions for po files?