feat(library-builder): builder

packages/library-builder/.npmignore

@@ -0,0 +1,4 @@
+node_modules
+tests
+tsconfig.json
+vite.cli.config.ts

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
+  build-ui-library
+```
+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/build-ui-library

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

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

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

packages/library-builder/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@vuestic/library-builder",
+  "version": "0.0.1-alpha1",
+  "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",
+    "prepack": "yarn build"
+  },
+  "bin": {
+    "build-ui-library": "./bin/build-ui-library"
+  },
+  "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"
+  },
+  "files": [
+    "./dist"
+  ]
+}

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,40 @@
+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
+  }
+
+  const stdout = process.stdout.write
+
+  process.stdout.write = (buffer, cb: any): boolean => {
+    // suppress nuxt logs
+    if (buffer.toString().includes('Building vuestic-ui')) return true
+    if (buffer.toString().includes('Build succeeded for vuestic-ui')) return true
+    if (buffer.toString().includes('(total size: ')) return true
+    if (buffer.toString().includes('Σ Total dist size')) return true
+    if (buffer.toString() === '') return true
+    return stdout.call(process.stdout, buffer, cb)
+  }
+
+  await buildNuxtModule({
+    nuxtDir: nuxtModulePath,
+    outDir: join(cwd, outDir, '/nuxt'),
+    entry,
+    cwd,
+  })
+
+  process.stdout.write = stdout
+}

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,18 @@
+import { UserConfig } from 'vite';
+import { build as viteBuild } from 'vite'
+
+const globalConsole = global.console
+const warn = globalConsole.warn
+globalConsole.warn = (msg, ...args) => {
+  // suppress @vue/reactivity-transform warning
+  if (msg.includes('@vue/reactivity-transform')) return
+  if (msg.includes('Generated an empty chunk')) return
+  if (msg.includes('Browserslist: caniuse-lite is outdated. Please run')) return
+  warn.call(globalConsole, msg, ...args)
+}
+
+export const buildVite = async (config: UserConfig) => {
+  config.logLevel = 'silent'
+  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 })
+  }
+}