Skeleton Library

Description

Npm package that provides a skeleton loader for blocks and elements of a web page using Vue.js. This library is designed to give developers the ability to create customizable skeleton loaders for their web pages, without the need for presets or pre-designed templates. With this library, developers can create their own unique skeleton loaders for each block or element on their web page.

The library is easy to install and use, and can be integrated seamlessly into any Vue.js project. Once installed, developers can simply import the library and begin creating custom skeleton loaders for their web pages.

How to install

npm i skeleton-library

How to use

In script section

import { Skeleton } from 'skeleton-library'
import 'skeleton-library/dist/style.css'

export default {
  components: {
    Skeleton
  }
}

In template:

<Skeleton
   :items="config"
/>

To make Skeleton visible, you need to send a config file to props "items". Config file is an array of ojects, where each object is a line standing in column.

const config = [
  {}, - line
  {}, - line
  {}, - line
  ...
]

One object can have an element:

const config = [
  {
    repeatElements: 1,
    appearance: 'square',
    animation: 'progress',
    customClass: 'test3',
    styleClasses: ['w-100'],
    styles: {
      'flex-basis': '30%'
    },
  },
]

repeatElements (Integer) - the number of how many times this element will be shown. appearance (String) - a shape of the element (square, circle or line). animation (Stirng) - type of animation (progress, pulse). customClass [optional], (String) - you can add your own name of class. styleClasses [optional], (Array) - for styling elements you can pass to this property any Bootstrap or Tailwind class. styles [optional], (Object) - to apply styles to element's wrapper. theme [optional], (Object) - to apply styles to the element.

If you want to show two or more elements in a row, you need to pass ojects of your element into the "items" property:

const config = [
  {
    direction: 'row',
    styleClasses: ['justify-content-between', 'align-items-center'],
    items: [
      {
        repeatElements: 1,
        appearance: 'square',
        animation: 'progress',
      },
      {
        repeatElements: 1,
        appearance: 'circle',
        animation: 'progress',
      }
    ]
  },
]

In the first object, our line has three properties: direction (String) - shows how the elements will stay, in line or in column (row, column). styleClasses (Array) - here you can provide some Bootstrap or Tailwind classes to aligne elents how it's needed. items (Array) - need to provide the elements.

But if you want to have two elements in a row, and the first element also devided in two parts and in the second part also to have two elements. The fallowing constraction will look like:

const config = [
  {
    direction: 'row',
    styleClasses: ['justify-content-between'],
    items: [
      {
        repeatElements: 1,
        appearance: 'square',
        animation: 'progress',
        styles: {
          'flex-basis': '50%'
        },
        items: [
          {
            direction: 'column',
            items: [
              {
                repeatElements: 1,
                appearance: 'line',
                animation: 'progress',
                styleClasses: ['w-100'],
                theme: { 
                  height: '20px'
                },
              },
              {
                repeatElements: 1,
                appearance: 'line',
                animation: 'progress',
                styleClasses: ['w-100'],
                theme: { 
                  height: '20px'
                },
              },
            ]
          },
        ]
      },
      {
        repeatElements: 1,
        appearance: 'square',
        animation: 'progress',
        styles: {
          'flex-basis': '30%'
        },
      },
    ]
  }
]

In the example above we will get one row. With tow blocks in a row. First block:

• element
• another block (in a column):
  • element
  • element Second block:
• element

How to make library for NPM

1. Create a vue project with use of vite

npm create vite@latest

Need to install the following packages:
[email protected]
Ok to proceed? (y) y
Project name: vue-component-npm-example
Select a framework: Vue
Select a variant: TypeScript

2. You now have a basic Vite project. Navigate to the project folder and install the dependencies.

npm install
npm run dev

3. Now we have to make some changes to vite.config.ts. To make this work we are using Vite's library mode. Change your vite.config.ts to the following:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      name: 'VueComponentNpmExample',
      // the proper extensions will be added
      fileName: 'vue-component-npm-example'
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

4. If you are using TypeScript you will get a warning about the resolve function in vite.config.ts. In order to fix this you have to install the node types.

npm i --save-dev @types/node

5. The next step is to add a new folder called lib in the root of the project. In this folder we will add our component. Inside this folder we also have to add a main.ts file. This is the entry point for our component. main.ts:

import VueComponentNpmExample from './VueComponentNpmExample.vue'
export { VueComponentNpmExample }

6. You can test your component by importing it in the App.vue file inside the src folder.

7. When you are happy with your component we can build it. but before that we need to make some changes to package.json. Here we have to specify where the main file is located, as well as update the build command.

{
  "name": "vue-component-npm-example",
  "version": "2.0.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/vue-component-npm-example.umd.cjs",
  "module": "./dist/vue-component-npm-example.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "import": "./dist/vue-component-npm-example.js",
      "require": "./dist/vue-component-npm-example.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --emitDeclarationOnly",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@types/node": "^18.7.18",
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

8. We also need to make some changes to the tsconfig.json. Update tsconfig.json to the following:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "outDir": "dist",
    "declaration": true
  },
  "include": ["lib/**/*.ts", "lib/**/*.d.ts", "lib/**/*.tsx", "lib/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

9. You might have to run npm install again. After that we are ready to build our component. Run the following command to build your component:

npm run build

10. Testing the package To test package you can start a command:

npm pack

It will create a *.tgz file with the name of your project. Create somewhere another vue project, put this file in the root folder of the new project and install this file:

npm install vue-component-npm-example-2.0.0.tgz

After this, the package will be shown in the package.json file and will also appear in node_modules folder. You can import the library in App file and try to test it. For example:

import { Skeleton } from 'skeleton-library'
import 'skeleton-library/dist/style.css'

export default {
  components: {
    Skeleton
  }
}

11. To bublish library at npm, if you have an account you can use npm adduser to log in.

npm adduser

12. The final step is publishing the package.

npm publish