i18next plugin to find keys for translation - javascript

I use i18next to localize my React application. I have to go through all the files to find keys for translation. Is there some plugin, which find all keys and return one file with that keys for translation?
Something similar to Flask-Babel.

I found it, I misread the docs. Package is i18next-parser.

Related

What are the best practices when using classnames, ids and data-attributes in React

I have built a big app using React and it's getting quite difficult to debug (I also use styled-components), and I want a way to quickly identify elements and components when inspecting the dom.
Styled components generate a random hash, that means it's difficult to locate the exact component sometimes.
I was wondering if people can advise if using ids, classes or data-attributes (or a combination was best) and as the identifiers are mainly gonna be used for debugging and tests, if there was a good way to rip these out of the production bundle? Maybe using webpack or another alternative.
Styled Components comes with a Babel Plugin that you can use for better debugging.
You can install it with:
npm install --save-dev babel-plugin-styled-components
You can add it to babel config like:
{
"plugins": ["babel-plugin-styled-components"]
}
This will show the name of the styled component prefixed with the filename in React DevTools. This can help with all the styled.DOMNode appearing in your devtools.
From the docs:
adds support for showing your components' real name in the React
DevTools. Consider writing a styled component that renders a button
element, called MyButton. It will normally show up as
for all of your components, but with this plugin they show .
Docs also specify options to configure these like displayName and fileName that can you can find here

Is there any way to comment in or better organize a bower.json file?

I have a very large project with numerous bower dependencies. In many cases it is unclear whether these dependencies are even still in use within the application or if the version specified was chosen for a reason. Ideally, I would like to be able to put a comment for each dependency to state for which part of the application it is required, so as functionality in the application is removed, we can also remove unnecessary packages from the bower_components. Something like:
// videojs plug-in for adding navigable waveforms; used by the video component
"videojs-wavesurfer": "^1.2.2"
Unfortunately, json doesn't support commenting, but are there any possible solutions for annotating or better organizing a bower.json file to make it more understandable?
You cannot put comments in a JSON file. JSON is for data and nothing else.
If you would like to document your dependencies, consider adding a section to your README file that contains all of the information relevant to dependencies.
The classic approach to commenting JSON files is to add fake entries, which hopefully will be ignored by the consumer, such as:
"video-wavesurfer-comment":
"videojs plug-in for adding navigable waveforms; used by the video component"
For longer comments, use arrays:
"video-wavesurfer-comment": [
"videojs plug-in for adding navigable waveforms; used by the video component",
"Remove this for the non-video version."
]
Of course, you'll have to put these somewhere where someone won't try to parse them. For instance, they could not go WITHIN "dependencies":.

Defining Vue.js template aliases

I have a front-end project laid out like so:
resources/assets/js
resources/assets/jade
resources/assets/svg
resources/assets/sass
I have recently found out that it is possible to define aliases in webpack to prevent the constant use of relative paths like ../../../.. by providing them in the resolve.alias map. Now my imports in Javascript are much simpler to understand. However, I've tried doing something similar for my Jade templates, defined like this:
<template lang="jade">
include ../../../jade/pages/home
.component-class
+home-item
</template>
Instead of writing ../../../jade/pages/home, I'd like to write pages/home but can't see any documented way of doing so. Is this possible? This is something I'd like to do with sass-loader as well.
Yes, you can definitely do this. I wish the docs were more clear about this as it's pretty important for a large pug app.
Add this to your app.js/server.js:
app.locals.basedir = path.join(__dirname, 'views');
Then you can reference all template files using a leading backslash character, for example:
include /pages/administrator/home
include /mixins/widget

How to import a Javascript library in a List Functions

Is there a way to import "external" Javascript libraries for use in List Functions in CouchDB? I am trying to build a List Function that will perform a XSL Transformations and I was hoping to be able to use the Sarissa library.
EDIT: Please see my related question about XSL Transformations in CouchDB.
You'll need to add the source files of the library to your design document. (assuming it's a JS library) How you do that depends on many factors, plus you didn't specify how you're deploying to your CouchDB instance, so I'll just sidestep that for now.
The point is you can share code with list functions (among some others like map functions) as CommonJS modules. If you load the source file into a string that is stored in your design document, you can use the exported library via require("lib/sarissa") for example.
If the library is compatible with CommonJS, you can include it with:
function(head, req) {
var Sarissa = require("lib/sarissa");
...
}
If not, you can include it with couchapp precompiler:
function(head, req) {
// !code lib/sarissa.js
...
}

How do you use a page's existing jQuery + Twitter Bootstrap/plugins with StealJS?

I have a project that uses Twitter Bootstrap 3, however, I am supplementing the existing javascript situation with a CanJS app. For CanJS dependency management I chose their package StealJS. However, it appears that no matter what I do, StealJS insists on loading jQuery again, overwriting $.fn, of course.
In this question a core contributor answers that the solution is to "steal" a blank.js file. However, this breaks steal/build for production as can/util/jquery/jquery.js is passed 'jquery' as undefined (the results of blank.js).
I have tried variations on StealJS's stealconfig.js settings including map, paths, and completed but nothing seems to work.
Here is an example of doing this in RequireJS. Is the solution simply not to use StealJS and to use RequireJS instead?
You can try a solution that is similar to the RequieJS solution you linked to. That is, create a dummy file that looks like this:
steal(function(){
return window.jQuery;
});
And in stealconfig.js map jquery to wherever you put this file.

Categories