How to replace `walkDecls` with a regex with postcss8 API `Declaration` - postcss

Hello postcss experts!
I try to update a plugin to postcss v8 API.
I don't find how to replace:
root.walkDecls(/^--/, (decl) => {
//…
});
By the new Declaration: entry.
Where to put this regex?

Unfortunately, there is no API for regexp in the new visitor API. Use:
Declaration (decl) {
if (decl.prop.startsWith('--')) {
…
}
}
In walkDecls passing RegExp do not make it faster. It is just syntax sugar. This code with startsWith instead of RegExp will work a little faster than old one.

Related

Router::redirect() deprecated

Router::redirect() is deprecated. Use Router::scope() and RouteBuilder::redirect() instead.
The message gives some lead, but did not find direct answer in docs.
Direct switching to RouteBuilder::redirect() instead not possible as it is not static function.
Ok I found the problem in the end. Easy once you read Router::scope() usage in docs properly and notice you get RouteBuilder object as param for the function.
Docs: https://book.cakephp.org/3/en/development/routing.html#quick-tour
Original (deprecated)
Router::redirect('/old', '/new');
New
Router::scope('/', function ($routes) {
$routes->redirect('/old', '/new');
});

React and environment variables

I'm currently a bit confused about react and env variables. Basically, what I would like to achieve is, to have different files. Something like: enviorment.dev.js, enviorment.prod.js.
I couldn't find the documentation and there seem to be a lot of different options to choose from.
I guess, I look for something like this: https://medium.com/beautiful-angular/angular-2-and-environment-variables-59c57ba643be just for react.
If you're using webpack, there's a plugin, but that's the sort of place where you would need to configure that. As Felix said, React doesn't do that:
https://webpack.js.org/plugins/define-plugin/
webpack.config:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
index.js:
if (!PRODUCTION) {
console.log('Debug info')
}
if (PRODUCTION) {
console.log('Production log')
}

What is "buildQuery" parameter in "aor-graphql-client"

I am trying to work with "aor-graphql-client". When I try to create REST-client like in documentation, I get the error that "buildQueryFactory" is not a function.
As I see, this function is using in here.
From this object wee see that param "buildFactory" must be defined in options or in defaultOptions.
{
client: clientOptions,
introspection,
resolveIntrospection,
buildQuery: buildQueryFactory,
override = {},
...otherOptions
} = merge({}, defaultOptions, options);
In defaultOptions this parameter isn't defined. In my options I now define only {client: {uri: ...}}, and I don't know what buildQuery means.
The documentation you are referring to is from a deprecated package not related to aor-graphql-client (it was in fact our first try at GraphQL with Admin-on-rest).
The aor-graphql-client package only provides the basic "glue" to use GraphQL with Admin-on-rest.
The buildQuery option is explained here. In a nutshell, it is responsible for translating your GraphQL implementation to admin-on-rest.
We provided a sample implementation targeting the Graphcool backend: aor-graphql-client-graphcool. Use it as a starting point for implementing your own until we find some time to make the aor-graphql-client-simple (which will be a rewrite of the aor-simple-graphql-client you are referring to).
Have fun!
what is the buildfieldlist imported in builduery?

Unexpected token = for a arrow Function using StandardJS

Why the Standard JS is saying that the sign = is a unexpected token? I'm using PhpStorm.
The code works perfectly, I'm just following the tutorial from https://github.com/whoisandy/react-rangeslider and got this error.
handleOnChange = (value) => {
this.setState({
volume: value
})
}
Error comes from Standard linter, not from PHPStorm parser, that's why changing JavaScript language version in preferences doesn't help... You are using ES7 proposal for class properties (https://github.com/tc39/proposal-class-public-fields). But it's not yet a part of any spec, and the parser used by Standard linter doesn't support it. You need using a different parser here - see https://standardjs.com/#how-do-i-use-experimental-javascript-es-next-features

Setting global variables in webpack for front-end config?

I have a different URL for our api depending if it's development or production for a react app.
Using webpack, how can I set an env var like __API_URL__ and then change that depending if it's built using webpack.config.dev vs webpack.config.prod
I thought the answer may be in webpack.DefinePlugin but no luck.
new webpack.DefinePlugin({
__API_URL__: 'localhost:3005',
}),
I'd expect __API_URL__ to be available as a global but no such luck.
What would be the right way to do this? Also key thing is that no express server on the prod deploy. So this has to happen during the build...
As Michael Rasoahaingo said, the DefinePlugin works similar like replacing values with regular expressions: It replaces the value literally in your source code. I would not recommend to use the DefinePlugin for this kind of task.
If you want to switch configs based on the environment, you could use resolve.alias for that. Just import your config like this:
var config = require("config");
and then add a mapping in your webpack.config.js:
resolve: {
alias: {
config$: require.resolve("path/to/real/config/file")
}
}
DefinePlugin is not working as you expected. It doesn't expose __API_URL__ as a global variable.
According to the documentation: "The values will be inlined into the code which allows a minification pass to remove the redundant conditional."
So, it will find all occurence of __API_URL__ and changes it.
var apiUrl = __API_URL__
and
__API_URL__: '"localhost:3005"' // note the ' and "
become
var apiUrl = "localhost:3005"

Resources