Develop Reference

Format argument value before passing to a yarn/npm script

I have a storybook start script which I want to run for some specific folder:
"storybook": "start-storybook -p 6006 -s ./src"
This loads all stories from src folder. As the amount of stories becomes larger, I want to run stories only from some of subfolders:
start-storybook -p 6006 -s ./src/components/CommonComponents
start-storybook -p 6006 -s ./src/components/DashboardComponents
How can I format argument value dynamically in order to start storybook like this below?
$ yarn storybook CommonComponents
And it would turn into:
start-storybook -p 6006 -s ./src/components/CommonComponents

storybook task could be a script, and then inside the script you parse the arguments, and call start-storybook
Create a task in package.json (e.q run-storybook) and set it to execute the custom script:
"run-storybook": yarn ./path/to/script.js
#!/bin/env node
// script.js
const { spawn } = require('child_process')
const args = process.argv.slice(2)
const port = args[1]
const component = args[3]
const path = `./src/components/${component}`
spawn('yarn', ['start-storybook', '-p', port, '-s', path], {
stdio: 'inherit',
shell: true
})
Then you can call: yarn run-storybook -p 600 -s yourcomponent
Note: make sure the script is executable: chmod +x /path/to/script.js.

force regeneration of code in vue 3 when not using single file components

I'm using vue 3 with jest for unit tests. My component is in the .vue file, with js and css in separate files and included in the .vue via src=:
<template>
<div>my library</div>
</template>
<script src="./library.js"></script>
<style src="./library.css"></style>
This works well for the most part, e.g. npm run serve reloads and refreshes everything as I save changes to those files.
However, when I run npm run test:unit the tests are running against a stale (cached?) version of my library.js. My package.json includes in scripts: "test:unit": "vue-cli-service test:unit",. I suspect it is cached because if I add a comment to the .vue file, it runs against the correct version of the .js, but if I remove the comment (so the file matches the previous version) then it runs against the stale .js again.
Possibly interesting is that running vue-cli-service test:unit --watch does re-run the tests when I change the .js file, but it runs against the stale version and not the new version that triggers the re-run.
The only workaround I seem to have is to append to a dummy comment in the .vue file, which is annoying. Or move to SFC which I find annoying because editor support for the different sections isn't as good as it is with separate files.
How can I get npm / vue-cli-service to bypass this apparent caching? Or is there a way to clear the cache?
The script below will reproduce the issue. Note in the output at the bottom that the tests are run three times:
On the first run the output should include "hello created 1".
Then the .js file is edited to change that string so that on the second run the output should be "hello created 2". However, when I run this script it provides "hello created 1" on both test runs.
Then the .vue file is edited to change a dummy comment. On the third run, the output is "hello created 2" as expected.
#!/bin/bash
if [[ -f package.json ]]
then
echo "'cd ..' and rerun this script"
echo "you need to be in the parent directory to the project directory"
exit 1
fi
if [[ ! -d utfail ]]
then
vue create -p __default_vue_3__ utfail
cd utfail
# specific versions are based on what I was using originally
npm install vue#3.0.3
npm install -D #vue/test-utils#2.0.0-beta.11
npm install -D #vue/compiler-sfc#3.0.3
npm install -D vue-jest#5.0.0-alpha.7
npm install -D #vue/cli-plugin-unit-jest#4.5.9
npm install -D typescript#3.9.7
else
cd utfail
fi
# hack: replace the default lint script with test:unit
sed -i -e 's/^.*"lint":.*$/ "test:unit": "vue-cli-service test:unit"/' package.json
cat <<EOF > jest.config.js
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
preset: '#vue/cli-plugin-unit-jest',
transform: {
'^.+\\.js$': "babel-jest",
'^.+\\.vue$': 'vue-jest'
},
"automock": false,
"setupFiles": [
"./setupJest.js"
]
}
EOF
cat <<EOF > src/components/HelloWorld.vue
<!-- dummy comment 1 -->
<template>
<div class="hello">blah</div>
</template>
<script src="./helloworld.js"></script>
<style></style>
EOF
cat <<EOF > src/components/helloworld.js
export default {
name: 'HelloWorld',
created() {
console.log("hello created 1")
}
}
EOF
cat <<EOF > setupJest.js
// require('jest-fetch-mock').enableMocks()
EOF
mkdir -p __tests__
cat <<EOF > __tests__/app.spec.js
import { mount } from '#vue/test-utils'
import App from './../src/App.vue'
import HelloWorld from './../src/components/HelloWorld.vue'
describe('HelloWorld', () => {
beforeEach(() => {
})
it('exists', () => {
const wrapper = mount(HelloWorld)
expect(wrapper.exists()).toBe(true)
})
})
EOF
printf '\n*\n*\n*\n*** about to run tests (round 1)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit
sed -i -e '/hello created/s/1/2/' src/components/helloworld.js
printf '\n*\n*\n*\n*** about to run tests (round 2)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit
sed -i -e '/dummy comment/s/1/2/' src/components/HelloWorld.vue
printf '\n*\n*\n*\n*** about to run tests (round 3)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit

Configure Jest to disable the test cache:
// jest.config.js
module.exports = {
cache: false,
}
Or add the --no-cache flag to the test:unit npm script:
// package.json
{
"scripts": {
"test:unit": "vue-cli-service test:unit --no-cache"
}
}
Or clear the cache with this command from the project's root directory:
npx jest --clearCache

Run several javascript file dynamically using same npm run command

My folder structure:
app
Model
user.js
post.js
My package.json file
"scripts": {
"migrate": "node ./app/Model/"
}
I want to run javascript file in command line dynamically.
Like:
npm run migrate user.js
npm run migrate post.js
Is there any way to achieve this?

You could write a script that dynamically requires the decired js file.
"scripts": {
"migrate": "node model.js"
}
Then model.js like this:
const path = require('path');
require(path.join(__dirname, 'app', 'Model', process.argv[2]));

"scripts": {
"migration": "node Model.js"
}
const program = require('commander');
program
.command('f <file>')
.description('Database migration.')
.action(async (file) => {
console.log(file);//do something here
});
program.parse(process.argv);
npm run migration f post.js

Using wildcard to run multiple scripts for npm run test

I my package.json I have
"scripts": {
"test": "node tests/*-test.js"
}
And I have a-test.js and b-test.js in the tests folder, which I can verify by running ls tests/*-test.js.
However, npm run test is only executing a-test.js. How can I execute all *-test.js scripts? Explicitly listing them is not an option, since I will have more than 2 to run in the future.

You could use a task manager such as grunt or gulp, or a simple script that execute those scripts:
test.js:
require('./test/a-test.js')
require('./test/b-test.js')
package.json
"scripts": {
"test": "node test.js"
}
You could also use the include-all module for automating these for you https://www.npmjs.com/package/include-all
Example using includeAll:
const path = require('path');
const includeAll = require('include-all');
const controller = includeAll({
dirname: path.join(__dirname, 'test'),
filter: /(.+test)\.js$/,
});

How to reset -g parameter for "npm install" in hooks scripts?

I have a following project structure:
install.js:
var path = require('path'),
exec = require('child_process').exec;
exec('npm install', {cwd: path.join(__dirname, './some_modules')});
package.json:
"scripts": {
"install": "node install.js"
},
"dependencies": {
"gulp": "3.8.10"
},
And have some dependencies in some_modules/package.json.
In case installation locally we get the expected result:
But in case installation globally (with -g parameter) we have following broken structure:
Question: How to get rid of the influence -g parameter for install.js -> exec('npm install') ?
Try it here: https://github.com/MishaMykhalyuk/npm-i-with-g-and-hooks (npm install -g git+https://github.com/MishaMykhalyuk/npm-i-with-g-and-hooks.git).