intems-menu

Project setup

npm install

Compiles and minifies for production

npm run dev

Lints and fixes files

npm run lint

NPM publish guideline:

1. Login to NPM

If you aren't already logged in, you should use corporate npm account(intems) to get access to this package, as it's private on npm. Use user that's added as a collaborator to organization, or organization account.

npm login

2. Build

npm run dev

3. Publish

npm publish

Introduction

Entry point of the project is "wrapper.ts" file. Here our component is registered, all data transfered to it from options parameter. MenuOptions interface is declaring, which options can be passed when importing module. If there's a demand to add anything new, you can extend this interface and add necessary data. It's automatically parsed and sent as props to "./Menu.vue" component.

Using the Package

Since now have our package published, Let's take a look at how we can use this package in other repositories

To Install

npm install --save @intellias/menu

Once you have installed the package, in your entry file of the repository (wrapper.ts) if you are using it in a Vue CLI project. Write the import command

import MainMenu, { MenuOptions, MenuLayout } from '@intellias/menu';
// Importing necessary chunks for dynamic modules from menu( will be fixed if moving to webpack ^5.0.0)
import '@intellias/menu/dist/js/kudosForm.js';
import '@intellias/menu/dist/js/vendors~kudosForm.js';
import '@intellias/menu/dist/js/rejectComponent.js';
import '@intellias/menu/dist/js/vendors~kudosForm~rejectComponent.js';
import '@intellias/menu/dist/js/vue.js';

To install it globally.

const menuOptions: MenuOptions = {
            // Pass your options here
        };
        Vue.use(MainMenu, menuOptions);

It's also necessary to install styles(You can import them to App.vue or main.scss file) as follows:

import '@intellias/menu/dist/css/main.css'  // Menu css import must be here for correct adding to the DOM

MenuOptions explained

export interface MenuOptions {
  layout: MenuLayout;
  storeAdapter: keyable;
  helperFunctions: Helpers;
  // add more options here if needed
}

• layout -> provide specific value from MenuLayout enum (Lite/Portals)
• storeAdapter -> provide necessary Vuex store adapters( StoreAdapter)
• helperFunctions -> provide necessary helpers functions (add getUrlPathByName from @/bootstrap/vue-router)

Updating the package and versioning

So you have the package published on NPM and now you need to change certain things on the package and re-publish it with new changes. This process involves a list of steps which I am listing down below.

Make changes to the codebase Before we can publish the changes we need to make sure the working directory is clean

git add -A

git commit -m "Fix bug in the package"

Increment the version number in NPM NPM follows the semantic version (semver) versions, in which each number denotes if it's a major release, minor change, or a patch fix. (Read details about semver here )

In this case, let's just bump the patch version by 1

npm version patch -m "Minor changes to the Hello World Text"

This will update the version number in your package.json file.

And since we have the GitHub repository linked to the npm. It will also create a tag for the bumped up version number.

Run the following command to check the latest tag

git tag

Next up, push the latest changes to git along with the new tag.

git push --follow-tags

Now you can go ahead and publish the new changes on npm

npm publish

Additional information

• Full guideline of using package is shown here