fakundo / react-localized Goto Github PK
View Code? Open in Web Editor NEWInternationalization for React and Preact components based on gettext format
Home Page: https://fakundo.github.io/react-localized/
Internationalization for React and Preact components based on gettext format
Home Page: https://fakundo.github.io/react-localized/
It seems not usable in this package
const localeData = {
ru: ruLocaleData,
en: enLocaleData,
}
<LocaleProvider localeData={localeData}>
...
</LocaleProvider>
This breaks working locale provider
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?
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",
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):
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.