feat(library-builder): builder

packages/library-builder/Readme.md

@@ -0,0 +1,61 @@
+# LibraryBuilder
+
+This library provides tools and plugins for building UI libraries.
+
+## 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.
+- 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
+  - 📁 styles (*)
+
+## Nuxt module
+
+Nuxt module must have `module.ts` in the root folder. 
+`runtime` folder will be copied to dist and will be available for `module.ts` to load `plugins`.
+
+To correctly resolve library in development and build you can use `// @replace-next-line: ` compiler macro.
+
+```ts
+// @replace-next-line: import { createVuestic } from 'vuestic-ui'
+import { createVuestic } from '../main.ts'
+```
+
+[See example](./tests/demo/src/nuxt)

packages/library-builder/bin/library-build

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// TODO: Make build here, not in CLI
+import('../dist/cli/index.mjs')

packages/library-builder/bin/library-build.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node "%~dp0\build" %*

packages/library-builder/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@vuestic/library-builder",
+  "version": "0.0.1",
+  "description": "Build tool for vue3 component libraries",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build:cli": "yarn vite build --config vite.cli.config.ts",
+    "build": "yarn build:cli",
+    "test": "yarn vitest --threads=false"
+  },
+  "bin": {
+    "library-build": "./bin/library-build"
+  },
+  "dependencies": {
+    "@nuxt/module-builder": "^0.4.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "fast-glob": "^3.3.0",
+    "magic-string": "^0.30.1",
+    "pathe": "^1.1.1",
+    "vite-plugin-chunk-split": "^0.4.7",
+    "vitest": "^0.33.0",
+    "vue-tsc": "^1.8.4",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@types/yargs": "^17.0.24"
+  }
+}

packages/library-builder/src/builder/build-nuxt.ts

@@ -0,0 +1,25 @@
+import { existsSync } from 'fs'
+import { join } from 'pathe'
+import { buildNuxtModule } from '../nuxt/builder'
+
+
+export const buildNuxt = async (options: {
+  cwd: string,
+  outDir: string,
+  nuxtDir: string,
+}) => {
+  const { cwd, outDir, nuxtDir } = options
+
+  const nuxtModulePath = join(cwd, nuxtDir)
+
+  if (!existsSync(nuxtModulePath)) {
+    console.warn('Skipping building nuxt module, because it does not exist')
+    return
+  }
+
+  return buildNuxtModule({
+    rootDir: nuxtModulePath,
+    outDir: join(cwd, outDir, '/nuxt'),
+    cwd,
+  })
+}

packages/library-builder/src/builder/build-types.ts

@@ -0,0 +1,32 @@
+import { exec } from 'child_process';
+import { join } from 'pathe'
+import { existsSync } from 'fs'
+
+export const buildTypes = async (options: {
+  cwd: string,
+  outDir?: string,
+}) => {
+  const { cwd, outDir = 'dist/types' } = options
+
+  if (!existsSync(join(cwd, 'tsconfig.json'))) {
+    console.warn('No tsconfig.json found, skipping types generation')
+    return
+  }
+
+  const outDirAbs = join(cwd, outDir, 'types')
+
+  const command = `vue-tsc --declaration --emitDeclarationOnly --outDir '${outDirAbs}'`
+
+  return exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`Error building types:`);
+      console.error(`${error.message}`);
+      return;
+    }
+
+    if (stderr) {
+      console.error(`Error building types:`);
+      console.error(`stderr: ${stderr}`);
+    }
+  })
+}

packages/library-builder/src/builder/build-vite.ts

@@ -0,0 +1,7 @@
+import { UserConfig } from 'vite';
+import { build as viteBuild } from 'vite'
+
+export const buildVite = async (config: UserConfig) => {
+  const result = await viteBuild(config)
+  return result
+}

packages/library-builder/src/builder/clean-dist.ts

@@ -0,0 +1,8 @@
+import { rmSync, existsSync } from 'fs';
+
+export const cleanDist = (dir: string) => {
+  if (existsSync(dir)) {
+    console.log('Clearing output directory...')
+    rmSync(dir, { recursive: true })
+  }
+}

packages/library-builder/src/builder/index.ts

@@ -0,0 +1,130 @@
+import { join, dirname } from 'pathe';
+import { buildVite } from './build-vite'
+import { createViteConfig } from "../vite/config-fabric"
+import { withCwd } from "../utils/with-cwd"
+import { cleanDist } from './clean-dist';
+import { createWebComponentsViteConfig } from "../vite/web-components";
+import { buildTypes } from "./build-types";
+import { postBuild } from "./post-build";
+import { generateExports } from "../generator/generate-exports";
+import { buildNuxt } from "./build-nuxt";
+import { BuildTarget } from "../types/targets";
+
+export const build = async (options: {
+  cwd?: string,
+  /** @deprecated not ready to use */
+  targets?: BuildTarget[],
+  outDir?: string,
+  entry?: string,
+  nuxtDir?: string,
+}) => {
+  return withCwd(options.cwd || process.cwd(), async () => {
+    console.log('Building...')
+
+    const {
+      cwd = process.cwd(),
+      outDir = 'dist',
+      // TODO: Make it possible to build without web-components
+      targets = ['nuxt', 'esm-node', 'cjs', 'iife', 'web-components', 'types', 'es'],
+      entry = 'src/main.ts',
+      nuxtDir = join(dirname(entry), 'nuxt'),
+    } = options
+
+    cleanDist(outDir)
+
+    const tasks: Promise<unknown>[] = []
+
+    if (targets.includes('es')) {
+      tasks.push(
+        buildVite(createViteConfig({
+          format: 'es',
+          entry: entry,
+          cwd: cwd,
+          outDir: outDir,
+        }))
+      )
+    }
+
+    if (targets.includes('esm-node')) {
+      tasks.push(
+        buildVite(createViteConfig({
+          format: 'esm-node',
+          entry: entry,
+          cwd: cwd,
+          outDir: outDir,
+        }))
+      )
+    }
+
+    if (targets.includes('cjs')) {
+      tasks.push(
+        buildVite(createViteConfig({
+          format: 'cjs',
+          entry: entry,
+          cwd: cwd,
+          outDir: outDir,
+        }))
+      )
+    }
+
+    if (targets.includes('iife')) {
+      tasks.push(
+        buildVite(createViteConfig({
+          format: 'iife',
+          entry: entry,
+          cwd: cwd,
+          outDir: outDir,
+        }))
+      )
+    }
+
+    if (targets.includes('web-components')) {
+      console.log('Web components build is experimental')
+
+      tasks.push(
+        buildVite(createWebComponentsViteConfig({
+          cwd: cwd,
+          outDir: outDir,
+          entry: entry,
+        }))
+      )
+    }
+
+    if (targets.includes('types')) {
+      tasks.push(
+        buildTypes({
+          cwd: cwd,
+          outDir: outDir,
+        })
+      )
+    }
+
+    if (targets.includes('nuxt')) {
+      tasks.push(
+        buildNuxt({
+          cwd, 
+          outDir,
+          nuxtDir
+        })
+      )
+    }
+
+    return Promise.all(tasks)
+      .then((r) =>{
+        generateExports({ cwd, entry, outDir, targets, append: true })
+
+        postBuild({
+          cwd: cwd,
+          entry: entry,
+          outDir: outDir,
+          targets: targets,
+        })
+
+        console.log('Build finished')
+      }).catch((error) => {
+        console.log('Build failed')
+        console.error(error)
+        // TODO: handle error?
+      })
+  })
+}

packages/library-builder/src/builder/post-build.ts

@@ -0,0 +1,36 @@
+import {
+  rmSync,
+  statSync,
+  existsSync,
+  renameSync,
+  unlinkSync,
+  readFileSync,
+  appendFileSync,
+} from 'fs'
+import { join, parse } from 'pathe'
+import { BuildTarget } from '../types/targets'
+
+export const postBuild = (options: {
+  cwd: string,
+  outDir: string,
+  entry: string,
+  targets: BuildTarget[]
+}) => {
+  const { cwd, entry, outDir, targets } = options
+  const libName = parse((entry).split('/').pop() || 'main.ts').name
+
+  // moving common css (resources & components styles) to the dist root
+  const cjsStylesPath = join(cwd, './dist/cjs/style.css')
+  existsSync(cjsStylesPath) && renameSync(cjsStylesPath, join(cwd, `./dist/${libName}.css`))
+  // deleting iife css double
+  const iifeStylesPath = join(cwd, './dist/iife/style.css')
+  existsSync(iifeStylesPath) && unlinkSync(iifeStylesPath)
+
+  // Add css modules code to all styles
+  // const cssModules = readFileSync('./dist/styles/index.css')
+  // appendFileSync('./dist/vuestic-ui.css', cssModules)
+
+  // // deleting empty styles files, renaming others
+  // const stylesFiles = readDirRecursive('./dist/styles')
+  // stylesFiles.forEach((file: string) => statSync(file).size <= 1 && rmSync(file))
+}

packages/library-builder/src/cli/args.ts

@@ -0,0 +1,45 @@
+
+import yargs from "yargs";
+
+export const args = yargs(process.argv)
+  // .option('es', {
+  //   type: 'boolean',
+  //   description: 'Builds the library in ES format',
+  //   default: true,
+  // })
+  // .option('cjs', {
+  //   type: 'boolean',
+  //   description: 'Builds the library in CommonJS format',
+  //   default: true,
+  // })
+  // .option('iife', {
+  //   type: 'boolean',
+  //   description: 'Builds the library in IIFE format',
+  //   default: true,
+  // })
+  // .option('es-node', {
+  //   type: 'boolean',
+  //   description: 'Builds the library in ES Node format (Optimized for SSR)',
+  //   default: true,
+  // })
+  // .option('web-components', {
+  //   type: 'boolean',
+  //   description: 'Builds the library in Web Components format',
+  //   default: true,
+  // })
+  .option('entry', {
+    type: 'string',
+    description: 'Entry point of the library',
+    default: 'src/main.ts',
+  })
+  .option('nuxtDir', {
+    type: 'string',
+    description: 'Directory of the nuxt module',
+  })
+  .option('outDir', {
+    type: 'string',
+    description: 'Output directory of the library',
+    default: 'dist',
+  })
+  .help(true)
+  .parseSync()