diff --git a/packages/library-builder/Readme.md b/packages/library-builder/Readme.md index 20cf7fa65f..00ce9953db 100644 --- a/packages/library-builder/Readme.md +++ b/packages/library-builder/Readme.md @@ -2,25 +2,49 @@ This library provides tools and plugins for building UI libraries. -## Why you should use this library? +## Why you should use this library build tool? There are few thing to consider when building UI library: - Components must be tree-shakable (both JS and CSS). - Components must be optimized for SSR. - Library must provide Nuxt support. -- Web components (*) +- It must be easy and fast to build as UI library for Vuejs. +- Generates correct `exports` in `package.json`, so library works within any bundler and components are tree-shakable + +Library produces builds: +- cjs - for node (SSR like vite-ssr) +- iife - for browsers +- es - for bundlers (like Vite) +- esm-node - for bundlers, but without vue and css plugins (pure Rollup) +- nuxt - nuxt module for nuxt3 +- web-components - ES build optimized to be used as web-components (not ready for production usage yet) +- types - ts types +- styles - compiled css styles + +## Usage +As a CLI: +```bash + library-build +``` +Arguments: +- entry - path to main.ts file. Default `./src/main.ts` +- nuxtDir - path to nuxt folder where `module.ts` and `runtime` folder are stored. Default: entry file dir + `./nuxt` +- outDir - path where to put output files. Default `./dist` + +As a library: (not ready yet) ## Recommended project structure -- src - - components - - [component-name] - - [component-name].vue - - composables - - nuxt (can be changed with nuxtDir argument) - - runtime - - plugin.ts - module.ts - - utils +- 📁 src + - 📁 components + - 📁 [component-name] + - 📄 [component-name].vue + - 📁 composables + - 📁 nuxt (can be changed with nuxtDir argument) + - 📁 runtime + - 📄 plugin.ts + - 📄 module.ts + - 📁 utils + - 📁 styles (*) ## Nuxt module diff --git a/packages/library-builder/src/builder/index.ts b/packages/library-builder/src/builder/index.ts index 97617ca5f5..b1af80c8a6 100644 --- a/packages/library-builder/src/builder/index.ts +++ b/packages/library-builder/src/builder/index.ts @@ -25,7 +25,7 @@ export const build = async (options: { cwd = process.cwd(), outDir = 'dist', // TODO: Make it possible to build without web-components - targets = ['nuxt'], //'esm-node', 'cjs', 'iife', 'web-components', 'types', 'es'], + targets = ['nuxt', 'esm-node', 'cjs', 'iife', 'web-components', 'types', 'es'], entry = 'src/main.ts', nuxtDir = join(dirname(entry), 'nuxt'), } = options diff --git a/packages/library-builder/tests/demo/src/components/button/index.ts b/packages/library-builder/tests/demo/src/components/button/index.ts new file mode 100644 index 0000000000..3945bc7f23 --- /dev/null +++ b/packages/library-builder/tests/demo/src/components/button/index.ts @@ -0,0 +1 @@ +export { default as Button } from './Button.vue' \ No newline at end of file