diff --git a/config/alias.ts b/.stacks/alias.ts similarity index 86% rename from config/alias.ts rename to .stacks/alias.ts index 6a5aec218d..4ec712e1c3 100644 --- a/config/alias.ts +++ b/.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 = { '~': r('../packages'), diff --git a/.stacks/build.config.ts b/.stacks/build.config.ts deleted file mode 100644 index 61d04a7024..0000000000 --- a/.stacks/build.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineBuildConfig } from 'unbuild' -import { buildComposables as stacks } from './builds' - -// eslint-disable-next-line no-console -console.log('Building Composables...', stacks) - -export default defineBuildConfig(stacks(['../packages/composables/index'])) diff --git a/.stacks/vite.config.ts b/.stacks/builds/components/vite.config.ts similarity index 75% rename from .stacks/vite.config.ts rename to .stacks/builds/components/vite.config.ts index abe18d1dad..56cdec3d71 100644 --- a/.stacks/vite.config.ts +++ b/.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 diff --git a/.stacks/builds/composables/build.config.ts b/.stacks/builds/composables/build.config.ts new file mode 100644 index 0000000000..c441cd29e6 --- /dev/null +++ b/.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'])) diff --git a/.stacks/builds/elements/vite.config.ts b/.stacks/builds/elements/vite.config.ts new file mode 100644 index 0000000000..923c05c945 --- /dev/null +++ b/.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 +}) diff --git a/.stacks/builds.ts b/.stacks/builds/index.ts similarity index 53% rename from .stacks/builds.ts rename to .stacks/builds/index.ts index aa14fe18ad..25b4e513c4 100644 --- a/.stacks/builds.ts +++ b/.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, } diff --git a/.stacks/stacks.ts b/.stacks/stacks.ts index 61c22a7119..d92de562d3 100644 --- a/.stacks/stacks.ts +++ b/.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, diff --git a/.stacks/unocss.config.ts b/.stacks/unocss.config.ts index 71da9d4994..125f1dcdcd 100644 --- a/.stacks/unocss.config.ts +++ b/.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, diff --git a/.stacks/vitest.config.ts b/.stacks/vitest.config.ts index a73e6b6833..f3e55166f7 100644 --- a/.stacks/vitest.config.ts +++ b/.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: { diff --git a/config/env.ts b/config/env.ts index ac61c3518e..309c6f8e66 100644 --- a/config/env.ts +++ b/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}` diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts index 36174cbee0..f0a074895c 100644 --- a/examples/vue/vite.config.ts +++ b/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) diff --git a/package.json b/package.json index e16e08a57e..1e08fc70a3 100644 --- a/package.json +++ b/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" diff --git a/packages/components/build.config.ts b/packages/components/build.config.ts index e54cde20d1..0913682538 100644 --- a/packages/components/build.config.ts +++ b/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, diff --git a/packages/components/package.json b/packages/components/package.json index 8ba57c9557..4263cbaf7e 100644 --- a/packages/components/package.json +++ b/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": { diff --git a/packages/composables/package.json b/packages/composables/package.json index d8c1d438a7..317cf0450c 100644 --- a/packages/composables/package.json +++ b/packages/composables/package.json @@ -49,7 +49,7 @@ }, "scripts": { "dev": "unbuild --stub", - "build": "unbuild ../../.stacks", + "build": "unbuild ../../.stacks/builds/composables", "stub": "unbuild --stub" }, "devDependencies": { diff --git a/packages/elements/README.md b/packages/elements/README.md index d85a3a2601..869e9dffc2 100644 --- a/packages/elements/README.md +++ b/packages/elements/README.md @@ -72,7 +72,7 @@ Read more about these tips in the docs. ### Coding Style - Composition API with [`