Giter Club home page Giter Club logo

vite-vue-ts-compo-pkg-starter's People

Contributors

dependabot[bot] avatar oberocks avatar

Stargazers

avatar avatar

Watchers

avatar avatar

vite-vue-ts-compo-pkg-starter's Issues

Epic Task: Add Changelog/Tagging deps/scripts to all derivitive OBE:WDS repos from this starter

Epic Task: Add Changelog/Tagging deps/scripts to all derivative OBE:WDS repos from this starter

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!


Repos List as To-Do's

The above changes need to be done for the following repositories:

Package Starter Kit Template (GitHub)

Tailwind Defaults Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!

List of Utility Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!

Component Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!


Update Steps for Each Repo

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 && npm run changelog",
    "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

Epic Task: Switch to new tw config setup code for the dev's main.ts file in all deritive repo's

Epic Task

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):


Repos List as To-Do's

The above changes need to be done for the following repositories:


Package Starter Kit Template (GitHub)


Tailwind Defaults Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!


List of Utility Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!


Component Packages (GitHub + NPM)

From non-dependent packages to dependent packages - so update these in order when bumping versions!


Epic Task: Replace/remove Init-focused content with new starter files so all can be removed after init:as

Replace/remove Init-focused content with new starter files so all can be removed after init:as

FOR THE FOLLOWING GROUPS OF FILES:

List of Utility Packages (GitHub + NPM)

From non-dependency packages to dependent packages - so update these in order when bumping versions!

Component Packages (GitHub + NPM)

Tailwind Defaults Packages (GitHub + NPM)

STEPS FOR EACH REPO:

STEP 0: Edit the homepage property value in ./package.json

{
  "description": "The @obewds/repo-name-here modular design system component for Vue.js",
  "homepage": "https://obewds.github.io/repo-name-here/",
}

STEP 1: Remove this line from ./package.json

  "scripts": {
    // remove this line below
    "init:as": "node scripts/init.js"
  }

STEP 2: Remove the file ./scripts/init.js

STEP 3: Create file and copy code from the repo link below for ./src/app/HelpContent.vue

https://github.com/obewds/vite-vue-ts-compo-pkg-starter/blob/main/src/app/HelpContent.vue

STEP 4: Create file and copy code from the repo link below for ./src/app/InitContent.vue

https://github.com/obewds/vite-vue-ts-compo-pkg-starter/blob/main/src/app/InitContent.vue

STEP 5: Add code to ./tailwind.config.js

module.exports = {

    //  ...

    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        // PROVIDES TAILWIND OBE:WDS DEFAULT DESIGN SYSTEM CLASSES
        "./node_modules/@obewds/obewds-tw-config/dist/*.js",
    ],

    safelist: [
        // Include to ensure TW can parse all app config default classes
        JSON.stringify(require('./obewds.tw.config.json'), null, 0),
    ],

    // theme: {
    //     extend: {},
    // },

    // ...
}

STEP 6: Add code to ./src/main.ts

// ADD THIS LINE
// import tw from '../obewds.tw.config.json'

const app = createApp(App)

// ADD THIS LINE
// app.provide('tw', tw)

// ADD THIS PROVIDE
app.provide('globals', {
    classes: {
        btn: 'inline text-white rounded px-2 py-1 shadow',
        h2: 'text-lg font-bold',
    },
    strings: {
        more: 'more things',
        less: 'less things',
    },
    styles: {
        btn: 'background-color:#42b983;',
    },
})

STEP 7: Delete/replace file and copy code from the repo link below for ./obewds.tw.config.json

https://github.com/obewds/vite-vue-ts-compo-pkg-starter/blob/main/obewds.tw.config.json

STEP 8: Install @obewds/obewds-tw-config to match the new starter template's ./src/main.ts

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.