Webpack: How to find all files inside certain folder name - regex

I have file tree like app/components/forms/components/formError/components
I need to write a rule that tests all .scss files that are only inside root components or inside scene folder. How can I do this?
The current rule is next:
{
test: /.*\/(components|scenes)\/.*\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]___[hash:base64:5]',
},
}, {
loader: 'sass-loader',
}],
}
but it didn't find required files

You may use
/(components|scenes).*\.scss$/
Details
(components|scenes) - matches the first components or scenes substring
.* - any 0+ chars, as many as possible, up to the
\.scss$ - .scss at the end of the string.
See this regex demo.

Related

Is there a way to exclude all files with 100% or at a threshold across the board from karma-coverage text reporter results?

This is very picky of me, I know, but I have a large Angular application where many files are covered at 100% or pretty darn close to it, and I want to exclude those results, so I can just deal with the ones I need to and don't have all the extra noise.
I don't want to exclude files by name because if they change they may go below the OK threshold.
My karma.conf.js (I'm aware I may not need some of the plugins, this is a shared file by the team):
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('#angular-devkit/build-angular/plugins/karma')
],
reporters: ['progress', 'coverage'],
coverageReporter: {
reporters: [
{type: 'text'},
{type: 'text-summary'},
]
},
browsers: ['ChromeHeadless'],
preprocessors: {'**/*.ts': ['coverage']},
restartOnFileChange: true,
});
};
and I'm gonna try to attach a screenshot here of my sample output in the type: 'text' coverageReporter:
I've tried searching SO and karma / karma-coverage documentation, but I only can find excluding files/paths specifically by name, or updating thresholds, but the latter seems to be only for determining what colors show up. Thank you~
EDIT: And since I only have one file per directory, would also be useful to not duplicate the numbers by printing them for the directory AND the one file under it. Thinking I may just have to dig into the weeds and create a pull request or something.
For this you can generate coverage reports in HTML format. There you will get option to sort files based on code-coverage.
To enable such reports you will have to do update coverageReporter property in your karma configurations -
coverageReporter: {
includeAllSources: true,
dir: 'coverage/',
reporters: [
{type: 'text'},
{type: 'text-summary'},
{type: 'html', subdir: 'html/'}
]
},
Reports will be generated within coverage/html folder.

Splitting chunks - problem with regex (js)?

I'm trying to split my build files in my webpack.config.js file, but my vendors file isn't being created at all. The remaining node_modules, which aren't react or moment files end up in the main.js. An example of a file that goes in main.js is ./node_modules/es-abstract. I put in my regex and filename in a regex checker, and it passes the test. I'm not sure what's going on; any help would be greatly appreciated it.
splitChunks: {
cacheGroups: {
moment: {
test: /[\\/]node_modules[\\/]((moment).*)[\\/]/,
name: 'moment',
chunks: 'all'
},
react: {
test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
name: 'react',
chunks: 'all'
},
vendors: {
test: /[\\/]node_modules[\\/]((?!(moment|react)).*)[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
According to David Gilbertson, SplitChunks default settings only allows for three chunks. To solve this, these settings will need to be added to split chunks: maxInitialRequests: Infinity,
minSize: 0,

Webpack TypeScript and xgettext translations

I have a Django app and am using Django's i18n module to help translating my strings. For translating JavaScript, I run
python manage.py makemessages -d djangojs
which adds all marked strings to a .po file. This works quite well for all my boring .js files in my static folder. However, we are starting to use webpack to pack some typescript (.tsx files) into a bundle.js file. This file is copied to the static folder after building, so I expected Djangos makemessages to pick up the strings from it as well. However, it seems that the strings are not parsed correctly, because most of the code in bundle.js is simply strings wrapped in eval().
I believe this means that I need webpack to - in addition to the bundle.js file - create a .js file for each .tsx file without all of the eval() nonsense, so that django's makemessages can parse it properly. I have no idea how to do this, however. My current config looks like this
var path = require("path");
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: ["./src/App.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new WebpackShellPlugin({
onBuildEnd:['./cp_to_static.sh'],
dev: false // Needed to trigger on npm run watch
})
]
};
module.exports = config;
So how can I make webpack spit out these files?
Is this the right thing to do, or is there a way to make Django parse bundle.js properly?
Turns out that all of the eval nonsense was generated by webpacks "watch" function. When simply running webpack for building the script, it works as expected

Regex in grunt-version

I'm trying to use the grunt-version to bump the version of my PHP WordPress Plugin project. For a long time I tried and tried, but failed.
In my plugin file example.php I have a PHP variable denoting the project version:
public $version = '0.3.4';
I need to match the string so that I can bump the version here too.
I tried:
prefix: 'public\s\$version\s='
As of regex101.com it matches the string completely. The version number portion is dealt with the grunt plugin completely.
But the grunt version::patch says:
Pattern not found in file
Path: example.php
Pattern: /(publics$versions=s)([0-9a-zA-Z\-_\+\.]+)/g
So I modified the pattern to:
prefix: 'public/\s\$version/\s=/\s'
But it's not matching:
Pattern: /(public\/s$version\/s=\/s)([0-9a-zA-Z\-_\+\.]+)/g
Nonetheless, the following pattern is working fine in the same file:
prefix: 'Version:\\s+'
And bumping version nicely in plugin header:
Version: 0.3.4
So I tried:
prefix: 'public \$version =\\s+'
But no luck:
Pattern: /(public $version =\s+)([0-9a-zA-Z\-_\+\.]+)/g
FYI, my Gruntfile declaration is like below:
version: {
pluginVersion: {
options: {
prefix: 'Version:\\s+'
},
src: [
'example.php'
]
},
pluginVariable: {
options: {
prefix: 'public \$version =\\s+'
},
src: [
'example.php'
]
},
packageJson: {
src: [
'package.json'
]
}
},
Edit
And needless to say the default pattern ('[^\\-]version[\'"]?\\s*[:=]\\s*[\'"]') is changing some unwanted versions too. Like:
public $wp_version = '0.3.0';
You can use this regular expression to match it: public\s?\$version\s?=\s?'
(public\\s+\\$version\\s+=\\s+\' escaped)
Demo
For those looking to use this with the style.css and/or plugin files:
version: {
project: {
options: {
release: 'patch',
prefix: '\\s*([^\\w][\'"]?[v|V]{1}ersion[\'"]?\\s*[:=]\\s*[\'"]?)'
},
src: ['package.json', 'style.css']
}
}
make sure you register your task (as per docs)
grunt.loadNpmTasks('grunt-version');
then you can run the task as such
grunt version

Grunt JS file pattern in cwd

I am using grunt to build my project and have the following src structure:
app/src/client/pages/user/users.js
app/src/client/pages/user/users.html
app/src/client/pages/project/projects.js
app/src/client/pages/user/projects.html
Now, I am trying to build my project to look like this:
app/dist/client/users.html
I use the contrib-htmlmin plugin and my grunt config looks like this:
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
partials: {
files: [
{
expand: true,
cwd: "app/src/client/pages/*/",
dest: "app/dist/client/",
src: ["*.html"]
}
]
}
But this is not working at all, no files are being minified.
Any suggestions?
As best I can tell, Grunt does not expand patterns in cwd, so your option
cwd: "app/src/client/pages/*/",
never gets converted to an array of matching directories.
You can follow my logic for this conclusion by starting at this line in the source. grunt.file.expandMapping (source here) doesn't call grunt.file.expand on your cwd pattern.
That doesn't mean you can't do it yourself. I've used the following pattern to accomplish something similar with grunt-contrib-sass when I have sass files spread out over several directories:
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
partials: {
files: grunt.file.expand(['app/src/client/pages/*/']).map(function(cwd) {
return {
expand: true,
cwd: cwd,
dest: "app/dist/client/",
src: ["*.html"]
};
}),
}