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-meta.ts

@@ -0,0 +1,45 @@
+import { join, resolve } from "pathe"
+import { fineComponents } from "../generator/generate-components-exports"
+import { writeFile, mkdir } from 'fs/promises'
+import { exists } from "../utils/exists"
+
+export const buildMeta = async (options: {
+  cwd: string,
+  outDir: string,
+  entry: string,
+  componentsNamePattern?: string,
+  componentsPathPattern?: string,
+  composablesNamePattern?: string,
+  composablesPathPattern?: string,
+}) => {
+  const { cwd, entry, outDir } = options
+
+  const exports = await fineComponents(resolve(cwd, entry))
+
+  const componentsNameRegex = new RegExp(options.componentsNamePattern || '\w*')
+  const composablesNameRegex = new RegExp(options.composablesNamePattern || 'use\w*')
+  const componentsPathRegex = new RegExp(options.componentsPathPattern || '/components/')
+  const composablesPathRegex = new RegExp(options.composablesPathPattern || '/composables/')
+
+  const components = exports
+    .filter(e => e.name && componentsNameRegex.test(e.name) && componentsPathRegex.test(e.path))
+    .map(e => e.name)
+
+  const composables = exports
+    .filter(e => e.name && composablesNameRegex.test(e.name) && composablesPathRegex.test(e.path))
+    .map(e => e.name)
+
+  const meta = {
+    components,
+    composables,
+  }
+
+  if (!await exists(resolve(join(cwd, outDir)))) {
+    await mkdir(resolve(join(cwd, outDir)))
+  }
+
+  await writeFile(resolve(join(cwd, outDir, '/meta.json')), JSON.stringify(meta, null, 2), {
+    encoding: 'utf-8',
+    flag: 'w',
+  })
+}

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

@@ -0,0 +1,28 @@
+import { existsSync } from 'fs'
+import { join } from 'pathe'
+import { buildNuxtModule } from '../nuxt/builder'
+import { strictResolve } from '../utils/strict-resolve'
+
+
+export const buildNuxt = async (options: {
+  cwd: string,
+  outDir: string,
+  nuxtDir: string,
+  entry: string,
+}) => {
+  const { cwd, outDir, nuxtDir, entry } = options
+
+  const nuxtModulePath = strictResolve(cwd, nuxtDir)
+
+  if (!nuxtModulePath) {
+    console.warn('Skipping building nuxt module, because it does not exist in ' + nuxtModulePath)
+    return
+  }
+
+  return buildNuxtModule({
+    nuxtDir: nuxtModulePath,
+    outDir: join(cwd, outDir, '/nuxt'),
+    entry,
+    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,142 @@
+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";
+import { createStylesViteConfig } from '../vite/styles';
+import { buildMeta } from './build-meta';
+
+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', 'styles', 'meta'],
+      entry = 'src/main.ts',
+      nuxtDir = join(dirname(entry), 'nuxt'),
+    } = options
+
+    cleanDist(outDir)
+
+    if (targets.includes('es')) {
+      console.log('Building ES module')
+      await buildVite(createViteConfig({
+        format: 'es',
+        entry: entry,
+        cwd: cwd,
+        outDir: outDir,
+      }))
+    }
+
+    if (targets.includes('esm-node')) {
+      console.log('Building ESM node module')
+      await buildVite(createViteConfig({
+        format: 'esm-node',
+        entry: entry,
+        cwd: cwd,
+        outDir: outDir,
+      }))
+    }
+
+    if (targets.includes('cjs')) {
+      console.log('Building CommonJS module')
+      await buildVite(createViteConfig({
+        format: 'cjs',
+        entry: entry,
+        cwd: cwd,
+        outDir: outDir,
+      }))
+    }
+
+    if (targets.includes('iife')) {
+      console.log('Building IIFE module')
+      await buildVite(createViteConfig({
+        format: 'iife',
+        entry: entry,
+        cwd: cwd,
+        outDir: outDir,
+      }))
+    }
+
+    if (targets.includes('web-components')) {
+      console.log('Web components build is experimental')
+      console.log('Building web components')
+
+      await buildVite(createWebComponentsViteConfig({
+        cwd: cwd,
+        outDir: outDir,
+        entry: entry,
+      }))
+    }
+
+    if (targets.includes('types')) {
+      console.log('Building types')
+      await buildTypes({
+        cwd: cwd,
+        outDir: outDir,
+      })
+    }
+
+    if (targets.includes('nuxt')) {
+      console.log('Building Nuxt module')
+      await buildNuxt({
+        cwd,
+        entry,
+        outDir,
+        nuxtDir
+      })
+    }
+
+    if (targets.includes('styles')) {
+      console.log('Building styles')
+
+      const stylesViteConfig = createStylesViteConfig({
+        cwd: cwd,
+        entry: entry,
+        outDir: outDir,
+      })
+
+      if (stylesViteConfig) {
+        await buildVite(
+          stylesViteConfig
+        )
+      }
+    }
+
+
+    if (targets.includes('meta')) {
+      console.log('Building meta')
+      await buildMeta({
+        cwd, outDir, entry
+      })
+    }
+
+    console.log('Generating exports in package.json')
+    await generateExports({ cwd, entry, outDir, targets, append: true })
+
+    await postBuild({
+      cwd: cwd,
+      entry: entry,
+      outDir: outDir,
+      targets: targets,
+    })
+
+    console.log('Build finished')
+  })
+}