chore: wip

.github/CONTRIBUTING.md

@@ -1,22 +1,22 @@
 # Contributing
 
-First off, thank you for taking the time to contribute to the Open Web Foundation ❤️
+First off, thank you for taking the time to contribute to Open Web ❤️
 
 ## 💭 Knowledge
 
 ### TypeScript
 
-It's important to note early on that this project is written with [TypeScript][typescript]. If you're unfamiliar with it or any strongly typed languages such as Java then this may be a slight roadblock. However, there's never a truly perfect time to start learning it, so ... why not today!
+It's important to note early on that these projects are written with [TypeScript][typescript]. If you're unfamiliar with it or any strongly typed languages such as Java then this may be a slight roadblock. However, there's never a truly perfect time to start learning it, so ... why not today!
 
-Don't be discouraged, because you likely will get by and learning TypeScript on the fly as you view some of the component examples within the codebase.
+Don't be discouraged, because you likely will get by learning TypeScript on-the-fly as you view some of the component examples within the codebase. It's easy getting started—the code is very readable!
 
-### Vue 3.2 & Vite
+### Stacks
 
-This project uses [Vue][vue] & [Vite][vite] to build [Vue components][vue-components], Web Components, and "composable functions".
+This project uses Stacks as its framework/engine. Under the hood, it is powered by [Vue][vue] & [Vite][vite] to build [Vue components][vue-components], Web Components, and "composable functions".
 
 ### Architecture
 
-An understanding of the library architecture and design will help if you're looking to contribute long-term, or you are working on a big PR. Browse the source and read our documentation to get a better idea on how it is structured. Feel free to ask any question, we would love to elaborate.
+An understanding of the library architecture and design will help if you're looking to contribute long-term, or you are working on a big PR. Browse the source and read our documentation to get a better idea on how it is structured. Feel free to ask any question _(Twitter, Discord, or GitHub Discussions)_, we would love to elaborate.
 
 ## 🎒 Getting Started
 
@@ -57,6 +57,73 @@ git branch --set-upstream-to=upstream/main main
 git pull
 ```
 
+## Artisan Toolkit
+
+The following list is of some of the most common ways to interact with the Stacks API. Meet Artisan:
+
+```bash
+pnpm artisan install # installs all dependencies
+pnpm artisan dev # starts one of the dev servers (components, functions, pages, or docs)
+pnpm artisan build # follow CLI prompts to select which library (or server) to build
+pnpm artisan commit # follow CLI prompts for committing changes
+pnpm artisan release # creates the releases for the stack & consequently, publishes them to npm
+
+pnpm artisan make:component HelloWorld # bootstraps a HelloWorld component
+pnpm artisan make:function HelloWorld # bootstraps a HelloWorld function
+pnpm artisan make:page hello-world # bootstraps a HelloWorld page (https://127.0.0.1/hello-world)
+
+pnpm artisan help
+```
+
+<details>
+<summary>View the complete Artisan Toolkit</summary>
+
+```bash
+pnpm artisan install # or `pnpm i`
+pnpm artisan fresh # fresh reinstall of all deps
+
+pnpm artisan dev # starts one of the dev servers (components, functions, or docs)
+pnpm artisan dev:components # starts local playground dev server
+pnpm artisan dev:docs # starts local docs dev server
+
+pnpm artisan make:component HelloWorld
+pnpm artisan make:function hello-world
+
+pnpm artisan stub # stubs all the libraries
+pnpm artisan stub:components # stubs the component library
+pnpm artisan stub:functions # stubs the function library
+
+pnpm artisan lint # runs linter
+pnpm artisan lint:fix # runs linter and fixes issues
+
+pnpm artisan commit # follow CLI prompts for committing staged changes
+pnpm artisan release # creates the releases for the stack & triggers the Release Action (workflow)
+pnpm artisan changelog # generates CHANGELOG.md
+
+# building for production (e.g. npm)
+pnpm artisan build # select a specific build (follow CLI prompts)
+pnpm artisan build:components # builds component libraries
+pnpm artisan build:functions # builds function library
+pnpm artisan build:web-components # builds framework agnostic Web Component library (i.e. Custom Elements)
+
+# when building for Vercel, Netlify, and more
+pnpm artisan deploy:docs
+
+# creates a server to be deployed into any VPS
+pnpm artisan server:functions # wip
+
+pnpm artisan example # select the example to run (follow CLI prompts)
+
+# test your stack
+pnpm artisan test # runs test suite
+pnpm artisan test:unit # runs unit tests
+pnpm artisan test:e2e # runs e2e tests
+pnpm artisan test:coverage # runs test coverage
+pnpm artisan test:types # runs typecheck
+```
+
+</details>
+
 ## 🧪 Test
 
 ### Unit

.stacks/artisan/src/cli/index.ts

@@ -5,5 +5,6 @@ import { makeCommands } from './make'
 import { exampleCommands } from './example'
 import { testCommands } from './test'
 import { initCommands } from './init'
+import { updateCommands } from './update'
 
-export { devCommands, buildCommands, utilityCommands, makeCommands, exampleCommands, testCommands, initCommands }
+export { devCommands, buildCommands, utilityCommands, makeCommands, exampleCommands, testCommands, initCommands, updateCommands }

.stacks/artisan/src/cli/update.ts

@@ -0,0 +1,15 @@
+import type { CAC } from 'cac'
+import { component as makeComponent } from '../scripts/make'
+
+async function updateCommands(artisan: CAC) {
+  artisan
+    .command('update', 'Updates the dependencies & framework core')
+    .option('-d, --dependencies', 'Updates the dependencies')
+    .option('-f, --framework', 'Updates the framework core')
+    .option('-a, --all', 'Updates the dependencies & framework core')
+    .action(async (options: any) => {
+      await makeComponent(options)
+    })
+}
+
+export { updateCommands }

.stacks/artisan/src/index.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import cac from 'cac'
 import { isInitialized } from '../../src/core/helpers'
-import { buildCommands, devCommands, exampleCommands, initCommands, makeCommands, testCommands, utilityCommands } from './cli'
+import { buildCommands, devCommands, exampleCommands, initCommands, makeCommands, testCommands, updateCommands, utilityCommands } from './cli'
 import { ExitCode } from './cli/exit-code'
 import { generate as generateAppKey } from './scripts/key'
 
@@ -24,6 +24,7 @@ async function main() {
     await initCommands(artisan)
   }
   else {
+    await updateCommands(artisan)
     await devCommands(artisan)
     await buildCommands(artisan)
     await utilityCommands(artisan)

.stacks/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ow3/hello-world-vue",
   "type": "module",
-  "version": "0.33.3",
+  "version": "0.0.0",
   "packageManager": "[email protected]",
   "description": "Your Vue component library description",
   "author": "Chris Breuer",

.stacks/functions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ow3/hello-world-fx",
   "type": "module",
-  "version": "0.33.3",
+  "version": "0.0.0",
   "packageManager": "[email protected]",
   "description": "Your function library description.",
   "author": "Chris Breuer",

.stacks/web-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ow3/hello-world-elements",
   "type": "module",
-  "version": "0.33.3",
+  "version": "0.0.0",
   "packageManager": "[email protected]",
   "description": "Your framework agnostic web component library description.",
   "author": "Chris Breuer",

README.md

@@ -10,100 +10,31 @@
 
 Command Palettes, similar to kbar, are often used within applications. This library is to help create a custom & performant command palette for your application. Useful functions & headless components included.
 
-**🤖 Zero-config, by design**
-**🎨 Built-in animations**
-**🧙🏼‍♀️ Fully customizable components**
-**✨ Highly performant**
+🤖 **Zero-config, by design** <br>
+🎨 **Built-in animations** <br>
+🧙🏼‍♀️ **Fully customizable components** <br>
+✨ **Highly performant** <br>
 
 > _The simple way to to use & design `⌘-k` command palettes._
 
 ## Get Started
 
-It's incredibly easy to get started with this Command Palette stack. Simply run either of the following commands in your terminal, based on whether you want to use framework agnostic Web Components or Vue components.
+It's incredibly easy to get started with this Command Palette stack. Simply install either of the following packages, dependent on whether you want to use framework agnostic Web Components or Vue components.
 
 ```bash
-npm install @ow3/command-palette-vue
 npm install @ow3/command-palette-elements
+npm install @ow3/command-palette-vue
 ```
 
 ## 🤖 Usage
 
-The following list is of some of the most common ways to interact with the Stacks API. Meet the Artisan Toolkit:
-
-```bash
-pnpm artisan install # installs all dependencies
-pnpm artisan dev # starts one of the dev servers (components, functions, pages, or docs)
-pnpm artisan build # follow CLI prompts to select which library (or server) to build
-pnpm artisan commit # follow CLI prompts for committing changes
-pnpm artisan release # creates the releases for the stack & consequently, publishes them to npm
-
-pnpm artisan make:component HelloWorld # bootstraps a HelloWorld component
-pnpm artisan make:function HelloWorld # bootstraps a HelloWorld function
-pnpm artisan make:page hello-world # bootstraps a HelloWorld page (https://127.0.0.1/hello-world)
-
-pnpm artisan help
-```
-
-<details>
-<summary>View the complete Stacks Artisan Toolkit</summary>
-
-```bash
-pnpm artisan install # or `pnpm i`
-pnpm artisan fresh # fresh reinstall of all deps
-
-pnpm artisan dev # starts one of the dev servers (components, functions, or docs)
-pnpm artisan dev:components # starts local playground dev server
-pnpm artisan dev:docs # starts local docs dev server
-
-pnpm artisan make:component HelloWorld
-pnpm artisan make:function hello-world
-
-pnpm artisan stub # stubs all the libraries
-pnpm artisan stub:components # stubs the component library
-pnpm artisan stub:functions # stubs the function library
-
-pnpm artisan lint # runs linter
-pnpm artisan lint:fix # runs linter and fixes issues
-
-pnpm artisan commit # follow CLI prompts for committing staged changes
-pnpm artisan release # creates the releases for the stack & triggers the Release Action (workflow)
-pnpm artisan changelog # generates CHANGELOG.md
-
-# building for production (e.g. npm)
-pnpm artisan build # select a specific build (follow CLI prompts)
-pnpm artisan build:components # builds component libraries
-pnpm artisan build:functions # builds function library
-pnpm artisan build:web-components # builds framework agnostic Web Component library (i.e. Custom Elements)
-
-# when building for Vercel, Netlify, and more
-pnpm artisan deploy:docs
-
-# creates a server to be deployed into any VPS
-pnpm artisan server:functions # wip
-
-pnpm artisan example # select the example to run (follow CLI prompts)
-
-# test your stack
-pnpm artisan test # runs test suite
-pnpm artisan test:unit # runs unit tests
-pnpm artisan test:e2e # runs e2e tests
-pnpm artisan test:coverage # runs test coverage
-pnpm artisan test:types # runs typecheck
-```
-
-</details>
-
-## 📚 Utilizing the Built Libraries
-
-Because Command Palette is created with reusability & composability in mind, our primary intention is to always _keep it simple, yet configurable._ Read more here about the Stacks CLI in the documentation.
-
 <details>
 <summary>Web Component usage</summary>
 
 ```html
 <html>
   <body>
-    <command-palette name="Jane Doe"></command-palette>
+    <command-palette></command-palette>
     <script src="command-palette.js"></script>
   </body>
 </html>
@@ -136,10 +67,11 @@ npm install command-palette-fx
 After you installed the command-palette library, you can then make of functions in the following way:
 
 ```ts
-import { isDark } from 'command-palette-fx'
+import { isDark, toggleDark } from 'command-palette-fx'
 
 console.log('is dark mode?', isDark)
 ```
+
 </details>
 
 ## 🧪 Testing

config/components.ts

@@ -1,17 +1,9 @@
 /**
  * This is where you define the components that need to
  * be included in your library. Ensure that those
- * component names exist in ../components/**
+ * components exist in ../components/**
  */
 
-// TODO: implement to be triggered in correct Vite plugin build hook
-// needs to generate a file that exports all components/defines the web components
-const components = [
-  ['Counter', 'RenamedComponent'],
-  'ToggleDark',
-  'Logo',
-  'HelloWorld',
-  'Demo',
-]
+const components = ['CommandPalette']
 
 export { components }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ow3/command-palette",
   "type": "module",
-  "version": "0.33.3",
+  "version": "0.0.0",
   "packageManager": "[email protected]",
   "description": "The easy way to build your command palette.",
   "author": "Chris Breuer",