feat(dx): improve & simplify the build processes

config/alias.ts → .stacks/alias.ts

@@ -4,6 +4,8 @@ const r = (p: string) => resolve(__dirname, p)
 
 /**
  * The following configuration references local aliases.
+ *
+ * TODO: the future "setup"-command needs to set these aliases.
  */
 export const alias: Record<string, string> = {
   '~': r('../packages'),

.stacks/vite.config.ts → .stacks/builds/components/vite.config.ts

@@ -1,5 +1,5 @@
-import type { UserConfig } from './stacks'
-import { Stacks, alias, defineConfig, buildVueComponents as vueComponents } from './stacks'
+import type { UserConfig } from '../../stacks'
+import { Stacks, alias, defineConfig, buildVueComponents as vueComponents } from '../../stacks'
 
 // https://vitejs.dev/config/
 const config: UserConfig = {
@@ -20,9 +20,6 @@ const config: UserConfig = {
 }
 
 export default defineConfig(({ command }) => {
-  // eslint-disable-next-line no-console
-  console.log('config is', config)
-
   if (command === 'serve')
     return config
 

.stacks/builds/composables/build.config.ts

@@ -0,0 +1,4 @@
+import { defineBuildConfig } from 'unbuild'
+import { buildComposables as stacks } from '..'
+
+export default defineBuildConfig(stacks(['../../../packages/composables/index']))

.stacks/builds/elements/vite.config.ts

@@ -0,0 +1,28 @@
+import type { UserConfig } from '../../stacks'
+import { Stacks, alias, defineConfig, buildWebComponents as webComponents } from '../../stacks'
+
+// https://vitejs.dev/config/
+const config: UserConfig = {
+  resolve: {
+    dedupe: ['vue'],
+    alias,
+  },
+
+  optimizeDeps: {
+    exclude: ['vue', '@vueuse/core', 'unocss/vite'],
+  },
+
+  plugins: [
+    Stacks(),
+  ],
+
+  build: webComponents(),
+}
+
+export default defineConfig(({ command }) => {
+  if (command === 'serve')
+    return config
+
+  // command === 'build'
+  return config
+})

.stacks/builds.ts → .stacks/builds/index.ts

@@ -1,14 +1,11 @@
 import { resolve } from 'path'
 import type { BuildOptions } from 'vite'
-import { alias } from '../config/alias'
-import { VUE_PACKAGE_NAME } from '../config/env'
+import { alias } from '../alias'
+import { VUE_PACKAGE_NAME, WEB_COMPONENTS_PACKAGE_NAME } from '../../config/env'
 
 function buildVueComponents(entry?: string): BuildOptions {
   if (!entry)
-    entry = resolve(__dirname, '../packages/components/index.ts')
-
-  // eslint-disable-next-line no-console
-  console.log('buildVueComponents with entry of:', entry)
+    entry = resolve(__dirname, '../../packages/components/index.ts')
 
   return {
     lib: {
@@ -43,29 +40,32 @@ function buildVueComponents(entry?: string): BuildOptions {
   }
 }
 
-// function buildWebComponents(entry: string): BuildOptions {
-//   return {
-//     lib: {
-//       entry: resolve(__dirname, entry),
-//       name: WEB_COMPONENTS_PACKAGE_NAME,
-//       formats: ['cjs', 'es'],
-//       fileName: (format: string) => {
-//         if (format === 'es')
-//           return `${WEB_COMPONENTS_PACKAGE_NAME}.mjs`
+function buildWebComponents(entry?: string): BuildOptions {
+  if (!entry)
+    entry = resolve(__dirname, '../../packages/components/index.ts')
 
-//         if (format === 'cjs')
-//           return `${WEB_COMPONENTS_PACKAGE_NAME}.cjs`
+  return {
+    lib: {
+      entry,
+      name: WEB_COMPONENTS_PACKAGE_NAME,
+      formats: ['cjs', 'es'],
+      fileName: (format: string) => {
+        if (format === 'es')
+          return `${WEB_COMPONENTS_PACKAGE_NAME}.mjs`
 
-//         // if (format === 'iife')
-//         //   return 'hello-world-elements.global.js'
+        if (format === 'cjs')
+          return `${WEB_COMPONENTS_PACKAGE_NAME}.cjs`
+
+        // if (format === 'iife')
+        //   return 'hello-world-elements.global.js'
 
-//         return `${WEB_COMPONENTS_PACKAGE_NAME}.?.js`
-//       },
-//       // sourcemap: true,
-//       // minify: false,;
-//     },
-//   }
-// }
+        return `${WEB_COMPONENTS_PACKAGE_NAME}.?.js`
+      },
+      // sourcemap: true,
+      // minify: false,;
+    },
+  }
+}
 
 function buildComposables(entries: string[] = ['./index']) {
   return {
@@ -75,6 +75,7 @@ function buildComposables(entries: string[] = ['./index']) {
     declaration: true,
     rollup: {
       emitCJS: true,
+      inlineDependencies: true,
     },
     externals: [
       'vue', '@vueuse/core',
@@ -84,6 +85,6 @@ function buildComposables(entries: string[] = ['./index']) {
 
 export {
   buildVueComponents,
-  // buildWebComponents,
+  buildWebComponents,
   buildComposables,
 }

.stacks/stacks.ts

@@ -6,8 +6,8 @@ import Unocss from 'unocss/vite'
 import Inspect from 'vite-plugin-inspect'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { alias } from '../config/alias'
-import { buildComposables, buildVueComponents } from './builds'
+import { alias } from './alias'
+import { buildComposables, buildVueComponents, buildWebComponents } from './builds'
 
 const Stacks = (configFile = './unocss.config.ts') => [
   Vue({
@@ -48,7 +48,7 @@ const Stacks = (configFile = './unocss.config.ts') => [
 
 export {
   buildVueComponents,
-  // buildWebComponents,
+  buildWebComponents,
   buildComposables,
   Stacks,
   alias,

.stacks/unocss.config.ts

@@ -11,9 +11,6 @@ import transformerCompileClass from '@unocss/transformer-compile-class'
 import { CLASS_PREFIX, CLASS_TRIGGER } from '../config/env'
 import { icons as collections, safelist, shortcuts } from '../config/style'
 
-// eslint-disable-next-line no-console
-console.log('building')
-
 const config = defineConfig({
   shortcuts,
 

.stacks/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import { alias } from '../config/alias'
+import { alias } from './alias'
 
 export default defineConfig({
   optimizeDeps: {

config/env.ts

@@ -1,10 +1,21 @@
 /**
- * Ensure these values are updated to match your component library.
+ * The environment variables.
+ *
+ * Please note: these values may be updated at any time, but if you update the "library name,"
+ * you most likely will create a new npm package on future releases/updates.
  */
+export const ORGANIZATION_NAME = '@ow3'
 export const LIBRARY_NAME = 'hello-world'
-export const VITE_PLUGIN_NAME = 'vite-plugin-stacks'
+export const CLASS_TRIGGER = ':stacks:'
+export const CLASS_PREFIX = 'stacks-'
+
+/**
+ * We suggest these not be updated unless you have a very strong, specific reason for it.
+ * Naming conventions are complicated, yet important to get right as a developer of shared code bases.
+ */
 export const VUE_PACKAGE_NAME = `${LIBRARY_NAME}-vue`
+export const VUE_NPM_PACKAGE_NAME = `${ORGANIZATION_NAME}/${VUE_PACKAGE_NAME}`
 export const WEB_COMPONENTS_PACKAGE_NAME = `${LIBRARY_NAME}-elements`
+export const WEB_COMPONENTS_NPM_PACKAGE_NAME = `${ORGANIZATION_NAME}/${WEB_COMPONENTS_PACKAGE_NAME}`
 export const COMPOSABLE_PACKAGE_NAME = `${LIBRARY_NAME}-composable`
-export const CLASS_TRIGGER = ':stacks:'
-export const CLASS_PREFIX = 'stacks-'
+export const COMPOSABLE_NPM_PACKAGE_NAME = `${ORGANIZATION_NAME}/${COMPOSABLE_PACKAGE_NAME}`

examples/vue/vite.config.ts

@@ -18,7 +18,6 @@ const config: UserConfig = {
 }
 
 export default defineConfig(({ command, mode }) => {
-  // console.log('config is', config)
   // eslint-disable-next-line no-console
   console.log('mode is', mode)
 

package.json

@@ -42,8 +42,10 @@
   },
   "scripts": {
     "build": "pnpm fresh && pnpm -r --filter './packages/**' run build",
+    "build:composables": "pnpm --filter './packages/composables' run build",
     "build:components": "pnpm --filter './packages/components' run build",
-    "build:types": "need-to-finish-this",
+    "build:elements": "pnpm --filter './packages/elements' run build",
+    "build:types": "wip",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "commit": "git cz",
     "coverage": "vitest run --coverage",
@@ -52,20 +54,20 @@
     "docs:build": "pnpm --filter './apps/site' build",
     "docs:dev": "pnpm --filter './apps/site' dev",
     "docs:serve": "pnpm --filter './apps/site' serve",
-    "example": "esno core/scripts/run-example.ts",
-    "fresh": "rimraf apps/site/node_modules core/types/composables/* core/types/components/* packages/**/node_modules examples/**/node_modules core/node_modules node_modules/ pnpm-lock.yaml && pnpm i -r",
-    "preinstall": "esno core/scripts/check-for-pnpm.ts && esno core/scripts/check-node-version.ts",
+    "example": "esno .stacks/scripts/run-example.ts",
+    "fresh": "rimraf apps/site/node_modules .stacks/types/composables/* .stacks/types/components/* packages/**/node_modules examples/**/node_modules .stacks/node_modules node_modules/ pnpm-lock.yaml && pnpm i -r",
+    "preinstall": "esno .stacks/scripts/check-for-pnpm.ts && esno .stacks/scripts/check-node-version.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "play": "pnpm --filter './playground' dev",
     "release": "npx bumpp package.json packages/*/package.json --execute 'pnpm run changelog' --all",
-    "size": "esno core/scripts/size.ts",
+    "size": "esno .stacks/scripts/size.ts",
     "stub": "pnpm -r --parallel run stub",
     "test": "pnpm run test:unit && pnpm run test:e2e",
     "test:e2e": "cypress open",
     "test:unit": "vitest",
     "typecheck": "vue-tsc --noEmit",
-    "types:fix": "esno core/scripts/fix-types.ts"
+    "types:fix": "esno .stacks/scripts/fix-types.ts"
   },
   "dependencies": {
     "vue": "^3.2.37"

packages/components/build.config.ts

@@ -1,5 +1,5 @@
 import { defineBuildConfig } from 'unbuild'
-import { alias } from '../../config/alias'
+import { alias } from '../../.stacks/aliass'
 
 export default defineBuildConfig({
   alias,

packages/components/package.json

@@ -46,8 +46,7 @@
   },
   "scripts": {
     "dev": "unbuild --stub",
-    "build": "vite build -c ../../.stacks/vite.config.ts",
-    "build:unbuild": "unbuild",
+    "build": "vite build -c ../../.stacks/builds/components/vite.config.ts",
     "stub": "unbuild --stub"
   },
   "devDependencies": {

packages/composables/package.json

@@ -49,7 +49,7 @@
   },
   "scripts": {
     "dev": "unbuild --stub",
-    "build": "unbuild ../../.stacks",
+    "build": "unbuild ../../.stacks/builds/composables",
     "stub": "unbuild --stub"
   },
   "devDependencies": {

packages/elements/README.md

@@ -72,7 +72,7 @@ Read more about these tips in the docs.
 ### Coding Style
 
 - Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
-- [ESLint](https://eslint.org/) - statically analyzes your code to quickly find problems
+- [ESLint](https://eslint.org/) - statically analyzes, fixes and formats your code without need of Prettier
 
 When using this template, feel free to adjust it to your needs. It simply is a framework to help you quickly & efficiently bootstrap & design component libraries using industry best-practices.
 

packages/elements/package.json

@@ -46,8 +46,8 @@
     "pnpm": ">=7.3.0"
   },
   "scripts": {
-    "build": "vite build",
     "dev": "unbuild --stub",
+    "build": "vite build -c ../../.stacks/builds/elements/vite.config.ts",
     "stub": "unbuild --stub"
   },
   "dependencies": {