Lerna create, update & install GitHub npm registry

GithubNPMPackageRegistry.md

Folder structure:

🔐 reusable/
 ┣ 📂 vue3/
 ┃  ┣ 💼 node_modules/
 ┃  ┣ 📦 vue-sfc-vite/
 ┃  ┣ 📦 vue3-base-input/
 ┃  ┣ 📦 vue3-base-x/
 ┃  ┣ …
 ┃  ┣ 📜 .gitignore
 ┃  ┣ 📜 lerna.json
 ┃  ┣ 📜 LICENSE.md
 ┃  ┣ 📜 package-lock.json
 ┃  ┗ 📜 package.json
 ┣ 📂 vue2/
 ┃  ┣ ...
 ┃ ...

Menu:

• Folder structure:
• Menu:
  • Basic
  • How to init lerna
  • How to init sfc
  • Setup package for the first time
  • Create package
  • Update package
  • Config package
  • Publish
  • README.md
  • Installing package
  • Using package in project

Basic

• Let’s take afzalsabbir as our GitHub username
• Create a private GitHub repository (i.e.: reusable)
• Clone the repository to your local machine

How to init lerna

• Install lerna globally (npm install -g lerna)
• Follow #setup-package-for-the-first-time.2.0 to init lerna in the reusable/<packages_directory> directory
  [Note: Later on we've used vue3/ as packages_directory]
• Follow #setup-package-for-the-first-time.2.i to config lerna.json

How to init sfc

• Install sfc globally (npm install -g vue-sfc-rollup)
• Follow #create-package.2 to create a single file components in the reusable/<packages_directory> directory
  [Note: Later on we've used vue3/ as packages_directory]

Setup package for the first time

1. Create a folder inside the repository root (reusable) (i.e. vue3 as we're going to create some packages for VueJS v3.x)
2. Init lerna latest by running: cd vue3 && npx lerna@latest init
   1. Edit lerna.json to add the following:

      {
          "packages": ["./*"],
          "version": "independent"
      }
      

   2. Create LICENSE.md
   3. Follow #create-package to create a new package

Create package

1. Run sfc-init to create a new single file component with options:
   1. Which version of Vue are you writing for?
      » Vue 3
   2. Is this a single component or a library?
      » Single component
   3. What is the npm name of your component?
      » base-button
   4. What is the kebab-case tag name for your component?
      » base-button
   5. Will this component be written in JavaScript or TypeScript?
      » TypeScript
   6. Enter a location to save the component files:
      » ./vue-sfc-vite
      [Note: Remember to remove if /vue-sfc-vite exists in the directory: reusable/vue3/ before pressing Enter]
2. Run cd vue-sfc-vite && npm i
   1. Follow #config-package to config and test the package
   2. Follow #publish to publish the package

Update package

1. Follow #basic to clone the repository to your local machine
2. Run cd vue-sfc-vite
3. Follow #config-package.3 to make any changes
4. Update the README.md file as shown in README.md
5. Run npm run serve to check if your package is working correctly or not in the browser
6. Follow #publish to publish a new version of the component after changes

Config package

1. If facing any jsx issue then edit the tsconfig.json and add a property jsx in compilerOptions and set value preserve.

   {
       "compilerOptions": {
           //...
           "jsx": "preserve"
           //...
       }
   }

   [Note: Restarting the editor should resolve any underline errors]
2. Set in package.json:

   {
       "name": "@afzalsabbir/vue-sfc-vite",
       "version": "0.0.0",
       "description": "Some description",
       "author": "arbs23 <afzalur.rahman@brainstation-23.com>",
       "homepage": "https://github.com/afzalsabbir/reusable",
       "license": "ISC",
       "repository": {
           "type": "git",
           "url": "git+https://github.com/afzalsabbir/reusable.git"
       },
       "bugs": {
           "url": "https://github.com/afzalsabbir/reusable/issues"
       },
       "dependencies": {
           "bootstrap": "5.1.3"
       },
       "peerDependencies": {
           //...
           "bootstrap": "5.1.3"
       },
       //...
   }

   
   [Note: Add all dependencies in the package.json’s dependencies as well as in peerDependencies. Don’t forget to remove package-lock.json and to run npm install if any new dependency added or any changes in package.json while testing]
3. Write/Paste your code here:
   1. Let's vue-sfc-vite is the package you
      have created in the previous step
      or
      want to update in the next step
   2. Remove package-lock.json & node_modules and then run npm install
   3. In reusable\vue3\vue-sfc-vite\src\vue-sfc-vite.vue put your single file component code (package code):
      1. Code in package template <template>...</template>:

         <template>
             <button
                 :class="'btn ' + buttonClass"
                 :disabled="isDisabled"
                 @click="$emit('click')"
             >
                 <!-- @slot default button slot -->
                 <slot>{{ buttonText }}</slot>
             </button>
         </template>

      2. Code in package script <script lang="ts">...</script>:

         import { defineComponent } from "vue";
         export default defineComponent({
             name: "BaseButton",
             props: {
                 /**
                 * @property {string} buttonClass - CSS class name for button.
                 * @default btn-primary
                 */
                 buttonClass: {
                     type: String,
                     default: "btn-primary",
                 },
                 /**
                 * @property {string} buttonText - Button text.
                 * @default null
                 */
                 buttonText: {
                     type: String,
                     default: "",
                 },
                 /**
                 * @property {boolean} isDisabled - Button enabled/disabled.
                 * @default false
                 */
                 isDisabled: {
                     type: Boolean,
                     default: false
                 },
             },
             emits: ["click"],
         });

      3. Code in package style <style scoped>...</style>:

         /*Write your style here...*/
         .btn-primary {
             color: #fff;
             background-color: #007bff;
             border-color: #007bff;
         }

   4. In reusable\vue3\vue-sfc-vite\dev\ put your test code
      1. Add your stylesheets or any other imports in the serve.ts file

         import { createApp } from 'vue';
         import Dev from './serve.vue';
         //...
         import "bootstrap/dist/css/bootstrap.min.css";
         //...
         const app = createApp(Dev);
         app.mount('#app');

      2. Add your component code in the serve.vue file
         1. Changes in component template <template>...</template>:

            <div id="app">
                <BaseButton
                    button-class="btn-primary"
                    button-text="Wow button!"
                    @click="handleClick"
                />
                <BaseButton
                    button-class="btn-warning w-25"
                    button-text="Wow button!"
                    @click="handleClick"
                >
                    <template v-slot:default>
                        <div class="d-flex justify-content-center align-items-center">
                            <img class="img-fluid w-25" src="./assets/sample.svg"/>
                            <p class="m-0 ms-2">Sample</p>
                        </div>
                    </template>
                </BaseButton>
            </div>

         2. Changes in component script <script lang="ts">...</script>:

            import { defineComponent } from 'vue';
            import BaseButton from '@/base-button.vue';
            export default defineComponent({
                name: 'ServeDev',
                components: {
                    BaseButton
                },
                setup() {
                    const handleClick = () => {
                        alert('Button clicked!');
                    }
                    return {
                        handleClick
                    }
                }
            });

         3. Changes in component style <style scoped>...</style>:

            /*Write your style here...*/
            .btn-primary {
                color: #fff;
                background-color: #007bff;
                border-color: #007bff;
            }

         4. Any devDependencies specially for serve.vue must include in vue3/package.json devDependencies
            i.e.:

            <template>
                <!-- ... -->
                <base-tree-select
                    v-model="selectedNodes"
                    style="width: 250px"
                    selection-mode="checkbox"
                    display="chip"
                    placeholder="Select Department/Garage.."
                    :options="companyDepartmentSetting"
                >
                    <template v-slot:footer>
                        <div class="d-flex justify-content-end mx-2">
                            <base-button
                                button-class="btn-outline-primary btn-sm my-2"
                                @click="selectedNodes = {}"
                            >
                                Clear All
                            </base-button>
                        </div>
                    </template>
                </base-tree-select>
                <!-- ... -->
            </template>

            Here <base-button/> is a component used here for @afzalsabbir/vue3-base-tree-select from @afzalsabbir/vue-sfc-vite. As it'll be in test example only so it's a devDependencies in @afzalsabbir/vue3-base-tree-select/package.json and we have to put it in vue3/package.json devDependencies as well
4. Create/Update the README.md file as shown in README.md
5. Run npm run serve to check if your package is working correctly or not in the browser

Publish

1. Run lerna changed to see the changes available to publish. Before run this command, make sure that the git status is clean
2. We can run lerna clean -y to remove any existing node_modules from all packages
3. Run lerna bootstrap --hoist will grab dependencies from all packages and install them all in reusable/vue3/node_modules
4. Go to every package (i.e.: /vue-sfc-vite) directory and run npm run build before publishing any package
5. Run npm login --registry=https://npm.pkg.github.com to login before publishing
   [Note: Make sure you have created a git access token with scopes: write:packages,repo,delete:packages or click here to create a new token]
6. Run npm whoami if you are not there then run npm adduser --registry=https://registry.npmjs.org/:_authToken=<token-from-npm> to add yourself as a publisher
7. Run lerna publish --registry=https://npm.pkg.github.com to publish
   [Note: push any local change to remote git]
   1. Select version to publish
   2. Type y to confirm

README.md

    # package_name (vue-sfc-vite)
    Package description

    ## Installation
    Installation command:
    
    ```bash
    npm install @afzalsabbir/vue-sfc-vite
    ```
    ## Dependencies
    List of dependencies:

    | Dependencies            | Description      |
    | :---------------------- | :--------------- |
    | `"bootstrap": "^5.1.3"` | Some description |
    | ...                     | ...              |

    ## Properties
    Following properties can be passed to this component:

    | Name          | Type     | Description            | Required |
    | :------------ | :------- | :--------------------- | :------- |
    | `buttonClass` | `string` | Style class for button | No       |
    | ...           | ...      | ...                    | ...      |
    | ...           | ...      | ...                    | ...      |

    ## Events
    Following events can be used to this component:

    | Name    | Behaviour                                 |
    | :------ | :---------------------------------------- |
    | `click` | Triggered if a user clicks on the button. |
    | ...     | ...                                       |
    | ...     | ...                                       |

    ## Usage/Examples
    Write where to use and how to use...

    [Note: Paste serve.vue file from reusable/vue3/vue-sfc-vite/dev/ directory]

    ## Screenshots
    If there is any screenshots available, paste them here...

Installing package

1. Open terminal where you want to install the package in
2. Make sure .npmrc has the following content:

   //npm.pkg.github.com/:_authToken=<your-token>
   @afzalsabbir:registry=https://npm.pkg.github.com

3. Log in to npm with npm login --registry=https://npm.pkg.github.com
4. To install a package you need to run the following command:

   npm install @afzalsabbir/vue-sfc-vite

   [Note: Make sure you have created a git access token with scopes: write:packages,repo,delete:packages. You can make change/update .npmrc file by yourself, where npm login details are stored in]

Using package in project

1. Import the package in your project

   import BaseButton from '@afzalsabbir/vue-sfc-vite';

2. Register the component globally in main.ts file

   //...
   
   const app = createApp(App);
   app.component("BaseButton", BaseButton);
   //...

3. Use the package in your project

   <template>
       <!-- ... -->
       <BaseButton
           button-class="btn-primary"
           button-text="Wow button!"
           @click="handleClick"
       />
       <!-- ... -->
   </template>

   [Note: Make sure you have imported the package in your project]