The ultimate goal of the Stacks Framework is to help you create & maintain component & function libraries. It shouldn't be a chore creating or maintaining them. Stacks allows you to easily build highly-composable & scalable libraries—in beginner & expert-friendly ways—embodying Composability-First Design principles.
The clever way to build component & function libraries.
🤖 Zero-config, by design
The Stacks bundler automagically generates a Web Component library, Vue 2 & 3 libraries, a composable functions library, plus all of its relating type declarations. The best of Vite & unbuild's engines in a zero-config way.
🎨 Style with ease
Create your own style guide using conventions you are familiar with. Our UnoCSS atomic engine allows for just that—in a blazing-fast, on-demand way—Tailwind CSS, Windi CSS, Bootstrap, Heroicons, Material Design Icons, and more available.
✨ Next-gen Developer Experience (DX)
Whether it is the simplistic artisan setup, the modern git commit conventions via commitlint, the simple CI, automated npm package releases & semver versioning, pretty changelog generations, automated GitHub PR dependency updates, built-in spell-checking, integrated documentation tooling, or the pre-configured playground & examples... Stacks has it all.
💡 First-class VS Code integration
IDE Capabilities, such as type hints, code completion, code formatting, and more, are all natively built-in within Stacks. Without the need of Prettier.
🧙🏼♀️ Extremely beginner & expert-friendly
No matter whether you are a beginner or an expert, the approachable Stacks design allows you to learn at your own pace.
Develop beautiful, reactive, composable UIs & functions without learning a new set of languages. HTML, CSS, and minimal JavaScript—that's all you need to dive in now! (Or TypeScript ✌🏼)
It's incredibly easy to get started with this framework. You may "Use this template" (via the button in top right corner of this page), or run the following snippet of code in your terminal:
npx artisan make:stack hello-worldNote Node.js v16.10 or higher required. Stacks is
fnm&nvmfriendly.
The following is a list of some of the most common ways to use interact with the Stacks API. Meet the Artisan Toolkit:
# develop locally, to be released with 0.23.0
npx artisan install # or `pnpm i`
npx artisan dev # start one of the dev servers (components, functions, or docs)
npx artisan commit # follow CLI prompts for committing staged changes
npx artisan release # creates the releases for the stack & consequently, publishes them to npm
npx artisan make:component HelloWorld # bootstraps a HelloWorld component
npx artisan make:function hello-world # bootstraps a HelloWorld functionView the complete Stacks Artisan Toolkit
npx artisan install # or `pnpm i`
npx artisan fresh # fresh reinstall of all deps
npx artisan dev # start one of the dev servers (components, functions, or docs)
npx artisan dev:components # starts local dev server for playground
npx artisan dev:functions # stubs the functions
npx artisan dev:docs # starts local dev server for docs
npx artisan make:component HelloWorld
npx artisan make:function hello-world
npx artisan make:stack hello-world
npx artisan stub # stubs all the libraries
npx artisan stub:components # stubs the component library
npx artisan stub:functions # stubs the function library
npx artisan lint # runs linter
npx artisan lint:fix # runs linter and fixes issues
npx artisan commit # follow CLI prompts for committing staged changes
npx artisan release # creates the releases for the stack & triggers the Release Action (workflow)
npx artisan changelog # generates CHANGELOG.md
# building for production
npx artisan build # select a specific build (follow CLI prompts)
npx artisan build:all # builds all libraries automagically
npx artisan build:elements # builds the Web Component (Custom Element) library
npx artisan build:vue # builds the Vue 2 & 3 libraries
npx artisan build:components # builds the component libraries
npx artisan build:functions # builds the function library
npx artisan build:types # builds all types
# when deploying to Vercel, Netlify, or GitHub Pages
npx artisan build:playground
npx artisan build:docs
npx artisan example # select to run one of examples (follow CLI prompts)
# test your stack
npx artisan test # runs test suite
npx artisan test:unit # runs unit tests
npx artisan test:e2e # runs e2e testsRead more here about the Stacks CLI in the documentation.
Because we optimize toward the development of easily reusable & composable component & function libraries, our primary intention is to always keep it simple, yet configurable.
By default, Stacks bundles your components into several outputs. Web Component (Custom Elements) & Vue Component Libraries are automatically generated, amongst other packages.
A Custom Element usage example
npm install my-awesome-libraryAfter you installed your Stacks generated library, you can use a "Custom Element" (Web Component) in the following way:
<html>
<body>
<hello-world name="Jane Doe"></hello-world>
<script src="my-awesome-library.js"></script>
</body>
</html>A Vue 2 & 3 usage example
npm install my-awesome-libraryAfter you installed your Stacks generated library, you can use your Vue Components in the following way:
<script setup lang="ts">
import HelloWorld from 'my-awesome-library'
</script>
<template>
<HelloWorld name="J Doe" />
</template>You may view this framework as an incredibly "useful set of frames" to assist in efficiently bootstrapping, designing, and managing component libraries—using industry best-practices, to reach one of the broadest user bases possible.
pnpm testPlease see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Open Web Discord Server
The MIT License (MIT). Please see LICENSE for more information.
Made with ❤️
