Add Changelog/Tagging deps/scripts to repository

Have learned and tested out how to add automatic changelog logging and automated Git tagging (opening up release tags getting generated just after a publish to npm!

Parent Epic Task Link: obewds/vite-vue-ts-compo-pkg-starter#97

Update Steps

• To ripple this change out to all derivative OBE:WDS repos created from this starter kit, complete each of the following steps in each derivative repo:

STEP 1

Install the following new dependency:

npm install auto-changelog --save-dev

STEP 2

• Change the following lines in the repo's ./package.json file from this:

{
  "scripts": {
    "publish:prep": "npx rimraf dist && npm run pkg:tsbundle",
    "publish:package": "npm run publish:prep && npm run pkg:org && npm run pkg:login && npm run pkg:publish",
  },
}

To this:

{
  "scripts": {
    "changelog": "auto-changelog --package --unreleased --backfill-limit 20",
    "git:tag" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
    "publish:prep": "npx rimraf dist && npm run pkg:tsbundle",
    "publish:package": "npm run publish:prep && npm run pkg:org && npm run pkg:login && npm run pkg:publish && npm run git:tag && npm run changelog"
  },
}

STEP 3

• Open up the project's main ./README.md file and add the following link underneath the link to the repo's GitHub docs site:

Or check out the [CHANGELOG](https://github.com/obewds/vite-vue-ts-compo-pkg-starter/blob/main/CHANGELOG.md) for the code base!

STEP 4

• It's never a bad idea to go ahead and do a dependency updates check using the following commands:

npm outdated

• And then update outdated packages either manually by replacing outdated deps one-by-one, or all together with:

npm update

STEP 5

• And lastly, be sure to run a publish prep script to generate a new changelog:

npm run publish:prep

• Or in the case of needing to go ahead and publish an update (for example if bumping dependencies while making these changes), then go ahead and run the package:prep script above and make a quick commit of the files for GitHub, and then make another final commit of the newest ./CHANGELOG.md file generated after running the following script:

npm run publish:package

Add these validators:

buttonTypes = ['button', 'submit', 'reset']

animationDirections = ['up', 'down', 'left', 'right', '']

fontAwesome families = ['fab', 'fad', 'fal', 'far', 'fas', 'fat']

fontAwesome sizes: [
'xs',
'sm',
'1x', // '1x' is effectively size 'md' - aka icon size inherits font size
'lg',
'2x',
'3x',
'4x',
'5x',
'6x',
'7x',
'8x',
'9x',
'10x'
]

headingLevels = [1, 2, 3, 4, 5, 6]

inputTextEntryBoxTypes = [
// 'button',
// 'checkbox',
'color',
'date',
'datetime-local',
'email',
// 'file',
// 'hidden',
// 'image',
'month',
'number',
'password',
// 'radio',
// 'range',
// 'reset',
'search',
// 'submit',
'tel',
'text',
'time',
'url',
// 'week',
]

order blocks: ['bottom', 'top'],

sourceTypes
audio: ['audio/flac', 'audio/mp4', 'audio/mpeg', 'audio/ogg', 'audio/x-flac', 'audio/webm'],
image: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'],
video: ['video/mp4', 'video/ogg', 'video/webm'],

Update VS Code IDE Vue Ext Reccomendation to Vue/Volar

./.vscode/extensions.json

Change:

{
  "recommendations": ["johnsoncodehk.volar"]
}

To:

{
  "recommendations": ["vue.volar"]
}

To sync with changes made to https://github.com/obewds/vite-vue-ts-compo-pkg-starter:

• Run obsolete and update:

Run the obsolete command to check for packages to updates:

npm obsolete

You can either update dependencies manually (copy/paste from npm obsolete into ./package.json), or if things are all clear to update and you want to do it all at once programmatically, use:

npm update --save

• Remove obewds.tw.config.json:

Remove the file obewds.tw.config.json if it exists (especially if it has ...colors.info or ...colors.caution classes)

• Install a new obewds.tw.config.json file from the dependency package for it:

npm explore @obewds/obewds-tw-config -- npm run install:config

• Find and replace in new obewds.tw.config.json file:

• Find rose replace with pink
• Find blue replace with cyan
• Find violet replace with orange
• Find green replace with lime

• Install these packages:

npm install lodash --save-dev

npm install @types/lodash.merge --save-dev

• Change the file ./src/main.ts:

From this:

// import tw from '../obewds.tw.config.json'

const app = createApp(App)

// app.provide('tw', tw)

To this:

// import merge from 'lodash/merge'
// import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
// import appTwConfig from '../obewds.tw.config.json'

const app = createApp(App)

// const tw = Object.keys( appTwConfig ).length > 0 ? merge( ObewdsTwConfig, appTwConfig ) : ObewdsTwConfig
// app.provide('tw', tw)

And this is an active version without comments. What happens here, is the user config is merged with the default config with the user one being the dominant and outputted. Otherwise if no content is found in the user config, then the output default to just the default config:

import merge from 'lodash/merge'
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import appTwConfig from '../obewds.tw.config.json'

const app = createApp(App)

const tw = Object.keys( appTwConfig ).length > 0 ? merge( ObewdsTwConfig, appTwConfig ) : ObewdsTwConfig
app.provide('tw', tw)

Issue Code Reference

Issue To-Do's

Complete the following steps to complete this issue.

STEP 1

• Ensure the following packages are installed/arranged in the ./package.json file (either as dev dep or manually as peer dep depending on the component):

npm install @obewds/obewds-tw-config --save-dev

npm install @obewds/vue-component-helpers --save-dev

NOTE: These dependencies may need to be stashed in either devDependencies or peerDependencies in the ./package.json file for the repo depending on the component to keep built files as small as possible!

STEP 2

• Then in ./src/main.ts:

// add these lines
import { mergeAppConfigWithDefaults } from '@obewds/vue-component-helpers'
import appTwConfig from '../obewds.tw.config.json'

const app = createApp(App)

// add this line
const tw = mergeAppConfigWithDefaults(appTwConfig)

app.provide('tw', tw)

STEP 3

• In the case of a NON .VUE COMPONENT REPOS ONLY, be sure to check that the following line is added/working in the cleanup script ./scripts/cleanup.js:

fs.remove('./dist/types/components')

STEP 4

• It's never a bad idea to go ahead and do a dependency updates check using the following commands:

npm outdated

• And then update outdated packages either manually by replacing outdated deps one-by-one, or all together with:

npm update

STEP 5

• Next up, be sure to run a publish prep script to generate a new changelog:

npm run publish:prep

STEP 6

• Or in the case of needing to go ahead and publish an update (for example if bumping dependencies while making these changes), then go ahead and run the package:prep script above and make a quick commit of the files for GitHub, and then make another final commit of the newest ./CHANGELOG.md file generated after running the following script:

npm run publish:package

Or in the case of just needing to update the repository/docs files but not publish a new package version (IE if the dist files aren't changed at all NOR were there any changes to files present on NPM for the published package (like a README.md file) - then it's safe to go ahead and commit all changes and make a Pull Request on GitHub to merge them into the code base without publishing anything on NPM)

• OR wrap all changes in a PR and merge it into repo's main branch