Getting Started #

You may use this guide to learn how to use this library components.

Setup #

This setup assumes your client app is created with Vite and Vue 3.

Using npm, run the following to install the library:

npm install @pandago/components

Then, import the library styles in your main.js file:

import 'pandago-components/dist/style.css'

Import components from this library in your own component:

<script setup lang="ts">
    import { PandaButton } from 'pandago-components';
</script>

<template>
    <PandaButton>Click me!</PandaButton>
</template>

Develop and test locally #

If you want to test the library in your project locally:

• In the root folder of this library, run npm link. This will create a symbolic link to the library.
• In the root folder of your client project, run npm link pandago-components. This will add the symbolic link to the node_modules folder in your client app.
• You can now import pandago-components in your client app.

There is no need to add pandago-components to your client app's dependency in this case.

If you made changes to the library, you will need to rebuild the library. Your client project shall hot reload when the building of library is completed.

Styling #

Individual component may have styles defined in its .vue file. They will be processed, combined and minified into dist/style.css, which is included in the exports list in package.json.

If you have library level styles shared by all components in the library, you may add them to src/assets/main.scss. This file is imported in src/index.ts, therefore the processed styles are also included into dist/style.css. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.

The client app shall import style.css, usually in the entry file:

import 'pandago-components/dist/style.css'

Third-party dependencies #

Third-party libraries used by the library may bloat up the size of the library if you simply add them to the dependencies in package.json. The following are some strategies to reduce the size of the library:

Externalization #

If we expect the client project may also need the same dependency, we may externalize the dependency. For example, to exclude Vue from your library build artifact, in vite.config.ts, you may have

module.exports = defineConfig({
    rollupOptions: {
      external: ['vue']
    }
});

The dependency to be externalized may be declared as peer dependency in the library.

Type generation #

In tsconfig.json, the following options instructs tsc to emit declaration (.d.ts files) only, as vite build handles the .js file generation. The generated .d.ts files are sent to dist/types folder.

{
    "compilerOptions": {
        "declaration": true,
        "emitDeclarationOnly": true,
        "declarationDir": "./dist/types"
    }
}

In package.json, the line below locates the generated types for library client.

{
    "types": "./dist/types/index.d.ts"
}