feat: generate tree-shakable components

build/exports.js

@@ -0,0 +1,41 @@
+const path = require('path')
+const fs = require('fs')
+const fg = require('fast-glob')
+
+const rootDir = path.resolve(__dirname, '..')
+const entry = path.resolve(rootDir, 'src')
+const entryFile = path.resolve(entry, 'main.ts')
+const components = path.resolve('src', 'components')
+
+async function getComponents(path) {
+  const files = await fg(`${path}/**/*.(vue)`, {
+    cwd: rootDir,
+    ignore: [
+      '_*',
+      'dist',
+      'node_modules',
+    ],
+  })
+
+  files.sort()
+  return files
+}
+
+async function autoExport() {
+  const START = '// START_EXPORTS'
+  const END = '// END_EXPORTS'
+  const regex = new RegExp(`${START}[\\s\\S]*?${END}`, 'im')
+
+  const exports = (await getComponents(components)).map((p) => {
+    const name = path.basename(p).split('.')[0]
+    const relativePath = path.relative(entry, p)
+    return `export { default as ${name} } from './${relativePath}'`
+  }).join('\n')
+
+  const code = fs.readFileSync(entryFile, 'utf8')
+  const target = exports ? `${START}\n${exports}\n${END}` : `${START}${END}`
+
+  fs.writeFileSync(entryFile, code.replace(regex, target))
+}
+
+autoExport()

package.json

@@ -9,7 +9,7 @@
   "types": "./dist/main.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc --emitDeclarationOnly"
+    "build": "node build/exports.js && vite build && tsc --emitDeclarationOnly"
   },
   "exports": {
     ".": {
@@ -22,6 +22,7 @@
     }
   },
   "dependencies": {
+    "esno": "0.4.4",
     "vue": "^3.0.5"
   },
   "devDependencies": {
@@ -31,6 +32,7 @@
     "@vue/compiler-sfc": "^3.0.5",
     "cross-env": "^7.0.3",
     "eslint": "^7.20.0",
+    "fast-glob": "^3.2.5",
     "tsup": "^4.3.1",
     "typescript": "^4.1.3",
     "vite": "^2.0.3",
@@ -38,6 +40,7 @@
   },
   "eslintConfig": {
     "extends": "@antfu/eslint-config",
+    "ignorePatterns": ["build/**/*.js"],
     "rules": {
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": "off"

packages/.vitepress/theme/Layout.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <Content />
+  </div>
+</template>

packages/.vitepress/theme/NotFound.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Not Found
+  </div>
+</template>

packages/.vitepress/theme/index.ts

@@ -0,0 +1,10 @@
+import Layout from './Layout.vue'
+import NotFound from './NotFound.vue'
+
+
+const theme = {
+  Layout,
+  NotFound,
+}
+
+export default theme

src/main.ts

@@ -10,3 +10,7 @@ export const VaguerComponents: Plugin = {
     })
   },
 }
+
+// START_EXPORTS
+export { default as VaguerButton } from './components/VaguerButton.vue'
+// END_EXPORTS

tsconfig.json

@@ -24,5 +24,13 @@
     }
   },
   "include": ["src"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": [
+    "node_modules",
+    "**/**/*.test.ts",
+    "**/**/*.stories.tsx",
+    "**/**/*.md",
+    "**/dist",
+    "packages/.test",
+    "packages/_docs"
+  ]
 }

vite.config.ts

@@ -9,6 +9,7 @@ declare const __dirname: string
 export default defineConfig({
   build: {
     lib: {
+      name: 'Vaguer',
       entry: path.resolve(__dirname, 'src/main.ts'),
     },
     rollupOptions: {