Setup #semantic-release for considering 'refactor' commits in the CHANGELOG - semantic-versioning

Using #semantic-release I'd like to consider refactor changes for both, triggering a new release and write down in the CHANGELOG.md file.
So far, I've included refactor commits at "#semantic-release/commit-analyzer" so they are triggering a patch release:
[
"#semantic-release/commit-analyzer",
{
"preset": "angular",
"releaseRules": [
{
"type": "refactor",
"release": "patch"
}
]
}
],
But those commit msgs aren't included in the CHANGELOG file, how can I setup "#semantic-release/release-notes-generator" plugin for including refactor commits? I find related doc confusing and lack of examples
generated CHANGELOG example
## [0.6.4](.../compare/v0.6.3...v0.6.4) (date)
## [0.6.3](.../compare/v0.6.2...v0.6.3) (date)
desired CHANGELOG
## [0.6.4](.../compare/v0.6.3...v0.6.4) (date)
[[>>INCLUDE HERE COMMIT MSG + LINK<<]]
## [0.6.3](.../compare/v0.6.2...v0.6.3) (date)

If anyone finds this useful: we need to config "#semantic-release/release-notes-generator" for considering other keywords besides feat and fix including these dicts:
{
"type": "refactor",
"section": "title to be used in changelog.md",
"hidden": false
}
For copy-pasting, this setup is gathering both refactor, chore and perf into ## Internal section (note i needed to write explicitly default values, I guess this is because it's overriding the config)
[
"#semantic-release/release-notes-generator",
{
"preset": "conventionalCommits",
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES",
"BREAKING"
]
},
"presetConfig": {
"types": [
{
"type": "feat",
"section": "Features"
},
{
"type": "fix",
"section": "Bug Fixes"
},
{
"type": "chore",
"section": "Internal",
"hidden": false
},
{
"type": "refactor",
"section": "Internal",
"hidden": false
},
{
"type": "perf",
"section": "Internal",
"hidden": false
}
]
}
}
]

The above answer is correct, but I feel its a bit incomplete. Even after adding the above commit types, the release will not be triggered on all the commit types. If you wish to trigger the release on all or selected commit types (ex. refactor, docs ci etc.) you can use the configuration as below:
// release.config.js
module.exports = {
plugins: [
[
'#semantic-release/commit-analyzer',
{
preset: 'conventionalCommits',
releaseRules: [
{ type: 'revert', scope: '*', release: 'patch' },
{ type: 'docs', scope: '*', release: 'patch' },
{ type: 'style', scope: '*', release: 'patch' },
{ type: 'chore', scope: '*', release: 'patch' },
{ type: 'refactor', scope: '*', release: 'patch' },
{ type: 'test', scope: '*', release: 'patch' },
{ type: 'build', scope: '*', release: 'patch' },
{ type: 'ci', scope: '*', release: 'patch' },
{ type: 'improvement', scope: '*', release: 'patch' },
],
},
],
[
'#semantic-release/release-notes-generator',
{
preset: 'conventionalCommits',
presetConfig: {
types: [
{ type: 'feat', section: 'Features' },
{ type: 'fix', section: 'Bug Fixes' },
{ type: 'perf', section: 'Performance Improvements' },
{ type: 'revert', section: 'Reverts' },
{ type: 'docs', section: 'Documentation', hidden: false },
{ type: 'style', section: 'Styles', hidden: false },
{ type: 'chore', section: 'Miscellaneous Chores', hidden: false },
{ type: 'refactor', section: 'Code Refactors', hidden: false },
{ type: 'test', section: 'Tests', hidden: false },
{ type: 'build', section: 'Build System', hidden: false },
{ type: 'ci', section: 'CI/CD', hidden: false },
{ type: 'improvement', section: 'Improvements', hidden: false },
],
},
},
],
['#semantic-release/github'],
[
'#semantic-release/npm',
{
npmPublish: false,
},
],
'#semantic-release/changelog',
'#semantic-release/git',
],
branch: 'master',
};
Working of the above config:
#semantic-release/commit-analyzer will trigger the release for feat, fix & BREAKING CHANGE as usual. I've only added the rest of the types that are ignored by default. Needless to say that they will be considered as patches and will only bump the patch number from semantic versioning in your tags, release notes, changelog & package.json file.
#semantic-release/release-notes-generator will just make sure that the commits are grouped correctly based on the type and will display my custom headings defined with the section key.
Hope this helps someone in future!

Related

Babel config to SWC

Now I have such babel config on the project and I really want to rewrite this case under swc. Would anyone be able to help with this
module.exports = {
sourceMaps: true,
presets: [
[
'#babel/preset-env',
{
exclude: ['transform-async-to-generator', 'transform-regenerator'],
},
],
'#babel/preset-react',
[
'#babel/preset-typescript',
{
isTSX: true,
allExtensions: true,
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
['#babel/plugin-proposal-decorators', { legacy: true }],
['#babel/plugin-proposal-class-properties', { loose: true }],
['module:fast-async', { spec: true }],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: true,
generators: true,
async: false,
},
],
],
};
Now I have written such a config, but part of the application has stopped working with similar errors: [MobX] Cannot decorate undefined property: 'description'
test: /\.(tsx|ts|jsx|js)$/,
loader: 'swc-loader',
options: {
jsc: {
keepClassNames: true,
parser: {
syntax: 'typescript',
decorators: true,
tsx: true,
dynamicImport: true,
preserveAllComments: false
},
transform: {
legacyDecorator: true,
decoratorMetadata: true
},
loose: false
},
},

How to disable removeViewBox plugin in Next.Js and svgr?

I would like to disable the removeViewBox plugin in Next.js/svgr/svgo. The following next.config.js should work but it does not.
Anybody can help ?
I'm using it with:
"#svgr/webpack": "^6.2.0", "react": "17.0.2", "next": "^12.0.7",
module.exports = {
reactStrictMode: true,
i18n,
webpack(config) {
config.module.rules.push(
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [
{
loader: '#svgr/webpack',
options: {
prettier: false,
svgo: true,
icon: true,
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
titleProp: true,
},
},
],
})
return config
},
}
For #svgr/webpack#5.5.0 it worked when I added { removeViewBox: false } right to plugins array:
{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ removeViewBox: false },
],
},
},
},
This is what's worked for my with next#13.0.5 and #svgr/webpack#6.5.1
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [{ loader: '#svgr/webpack', options: { icon: true } }]
});

ESLint + Prettier formatOnSave does work but not Alt + Shift + F

I've created a separate repo with shared eslint config for different projects in my org:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'airbnb-base',
'plugin:#typescript-eslint/recommended',
'prettier',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:jest/recommended',
'plugin:prettier/recommended',
],
plugins: ['#typescript-eslint', 'jest', 'prettier'],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
env: {
node: true,
es6: true,
jest: true,
},
rules: {
'eol-last': ['error', 'always'],
'newline-before-return': 'error',
'import/extensions': 0,
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: false,
optionalDependencies: false,
peerDependencies: false,
},
],
'no-restricted-imports': [
'error',
{
patterns: [
{
group: ['.prisma/*'],
message: 'Use #prisma instead of .prisma',
},
],
},
],
'semi': 'error',
'comma-dangle': 'off',
'#typescript-eslint/comma-dangle': ['error', 'always-multiline'],
'indent': 'off',
'quotes': 'off',
'#typescript-eslint/quotes': [
'error',
'single',
{
allowTemplateLiterals: true,
},
],
'#typescript-eslint/no-shadow': ['error'],
'arrow-parens': ['error', 'always'],
'#typescript-eslint/indent': [
'error',
2,
{
/**
* This should stay here until https://github.com/typescript-eslint/typescript-eslint/issues/1824 is fixed
* as currently it forces you to add additional double-space indent to function arguments with decorators
*/
ignoredNodes: ['FunctionExpression'],
SwitchCase: 1,
},
],
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
},
],
'spaced-comment': ['error', 'always'],
'no-multiple-empty-lines': [
'error',
{
max: 2,
maxEOF: 0,
},
],
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
},
},
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
{
files: ['next.config.js'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
},
},
],
};
Then I published this package to my private registry and installed it on the other repository where I used it to extend from in that repo's eslint config:
module.exports = {
extends: '#flaut-org/eslint-config',
ignorePatterns: ['.eslintrc.js'],
rules: {
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroups': [
{
pattern: '#nestjs/**',
group: 'external',
position: 'after',
},
],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
};
But for some reason autoformatting didn't work in VSCode. I've configured my default formatter to be Prettier - Code formatter and retried - didn't do the trick. Then I've added the following lines to my ./vscode/settings.json config:
{
"eslint.validate": [
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
And VSCode actually started auto-formatting it on Ctrl + S, but Alt + Shift + F combination still doesn't work. I've checked both Prettier and ESLint logs and there were no errors and warnings whatsoever. What am I missing that does not allow me to use Alt + Shift + F combination ?

Pass options to the builtin svgo from svgr/webpack

Is there an option to pass in svgo options to the svgr/webpack loader ? I want to remove the width & height attributes and keep the viewbox, by default it removes those.
{
test: /\.svg$/,
use: ['#svgr/webpack'],
options : {
svgo: { // Something like this ?
mergePaths: false,
removeViewbox: false,
removeAttrs: true,
}}
},
In my case I got errors that:
plugins should be an array;
Each plugin object requires a name property
So here is what worked for me:
use: {
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}
}
}
https://react-svgr.com/docs/options/
the answer is as the follow...
{
loader: "#svgr/webpack",
options: {
dimensions: false
}
},
It has a little confusing syntax with nested parameters. Here is what I'm using to disable prefixing ids and classnames. I suppose, in your case it will be something like mergePaths.active = false, removeViewbox.active = false.
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [{
prefixIds: {
prefixIds: false,
prefixClassNames: false
}
}]
}
}
I did not test, but I suppose it would look like this (or similar, you might play with it a bit to get the syntax right):
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [{
removePaths: {
active: false,
}
},{
removeViewbox: {
active: false,
}
},{
removeAttrs: {
active: true,
}
}]
}
}
Look into the code here, where you can figure out what props are actually being exported: https://github.com/svg/svgo
I could not find a way of passing arguments through svgr to svgo so I switched to react-svg-loader which has documentation on how to achieve that :
{
test: /\.svg$/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [{ removeDimensions: true, removeViewBox: false }],
floatPrecision: 2,
},
},
},
],
},
It works as described here or here:
{
test: /\.svg$/,
use: [{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ mergePaths: false },
{ removeViewbox: false },
{ removeAttrs: true },
],
},
},
}],
}

how could i receive xml through a remote method in loopback?

I'm trying to create a remote method that accepts XML, i define my remote method like this,
WechatModel.remoteMethod('notify', {
description: 'notify',
accepts: [
{
arg: 'response',
type: 'string',
required: true,
http: {
source: 'body',
},
},
],
http: {
verb: 'post',
path: '/notify',
},
});
then i changed my server/config.js like this:
"rest": {
"normalizeHttpPath": false,
"xml": true
},
but,i still got a string with the content "[object Object]"

Resources