Merge pull request #88 from agile-ts/develop

Added basic vue integration docs

Author: bennobuilder

docs/examples/vue/Introduction.md

@@ -0,0 +1,10 @@
+---
+id: introduction
+title: Vue Examples
+sidebar_label: Vue
+slug: /examples/vue
+---
+
+## 🤠 Get Started
+- [First State](./vue/first-state)
+- [First Collection](./vue/first-collection)

docs/examples/vue/examples/FirstCollection.mdx

@@ -0,0 +1,10 @@
+---
+id: first-collection
+title: First Collection
+sidebar_label: First Collection
+slug: /examples/vue/first-collection
+---
+
+import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
+
+<CodeSandBoxEmbed uri={'agilets-first-state-i5xxs'} />

docs/examples/vue/examples/FirstState.mdx

@@ -0,0 +1,10 @@
+---
+id: first-state
+title: First State
+sidebar_label: First State
+slug: /examples/vue/first-state
+---
+
+import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
+
+<CodeSandBoxEmbed uri={'agilets-first-state-i5xxs'} />

docs/main/Frameworks.md

@@ -18,7 +18,7 @@ A quick overview of all frameworks that AgileTs supports or has planned to suppo
 | [React](https://reactjs.org)             | ✅        | -       |
 | [React-Native](https://reactnative.dev/) | ✅        | -       |
 | [Angular](https://angular.io/)           | ❌        | ✅      |
-| [Vue](https://vuejs.org/)                | ❌        | ✅      |
+| [Vue](https://vuejs.org/)                | 🟨       | ✅       |
 | [Svelte](https://svelte.dev/)            | ❌        | -       |
 
 ### 🤖 SSR-Frameworks

docs/main/Introduction.md

@@ -24,22 +24,23 @@ slug: /introduction/
 ## 👋 Introduction
 
 AgileTs is a global, simple, well-tested State Management Framework implemented in Typescript.
-It offers a reimagined API that focuses on **developer experience** and allows you to **quickly** and **easily** manage your States.
+It offers a reimagined API that focuses on **developer experience** 
+and allows you to **easily** manage your States.
 Besides States, AgileTs offers some other powerful APIs that make your life easier.
 The philosophy behind AgileTs is simple:
 
 ### 🚅 Straightforward
 Write minimalistic, boilerplate-free code that captures your intent.
+```ts
+MY_STATE.set('jeff'); // Update State value
+MY_STATE.undo(); // Undo latest State value change
+MY_STATE.is({hello: "jeff"}); // Check if State has the value '{hello: "jeff"}'
+MY_STATE.watch((value) => {console.log(value);}); // Watch on State changes
+```
 
-**Some straightforward syntax examples:**
+**Some more straightforward syntax examples:**
 
-- Mutate and Check States with simple Functions
-  ```ts
-  MY_STATE.undo(); // Undo latest change
-  MY_STATE.is({hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'
-  MY_STATE.watch((value) => {console.log(value);}); // Watch on State changes
-  ```
-- Store State in any Storage, like [Local Storage](https://www.w3schools.com/html/html5_webstorage.asp)
+- Store State in any Storage, like the [Local Storage](https://www.w3schools.com/html/html5_webstorage.asp)
   ```ts
   MY_STATE.persist("storage-key");
   ```
@@ -65,18 +66,19 @@ Write minimalistic, boilerplate-free code that captures your intent.
 ### ⛳️ Centralize
 
 AgileTs is designed to take all business logic out of UI-Components and put them in a central place, often called `core`.
-The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable, and above all, easily testable.
+The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable, scalable, and above all, easily testable.
 
 ### 🎯 Easy to Use
 
 Learn the powerful tools of AgileTs in a short amount of time. An excellent place to start are
-our [Quick Start](./Installation.md) Guides, or if you don't like to follow any tutorials,
+our [Quick Start Guides](./Installation.md), or if you don't like to follow any tutorials,
 you can jump straight into our [Example](../examples/Introduction.md) Section.
 
 
 ## ⏳ Quick Example
 
-Instead of talking too much about the benefits of AgileTs, we should start programming.
+Instead of talking too much about the benefits of AgileTs,
+we should rather see them in action.
 
 ### 😎 Create State
 
@@ -90,13 +92,13 @@ const App = new Agile();
 const MY_FIRST_STATE = App.createState("Hello Friend!");
 
 
-// -- MyComponent.js ------------------------------------------
+// -- MyComponent.whatever ------------------------------------------
 
 // 3️⃣ Bind initialized State to desired UI-Component
 // And wolla, it's reactive. Everytime the State mutates the Component rerenders
 const myFirstState = useAgile(MY_FIRST_STATE); // Returns value of State ("Hello Friend!")
 ```
-To learn out more, check out our [Quick Start Guides](./Installation.md).
+Want to learn more? Check out our [Quick Start Guides](https://agile-ts.org/docs/Installation.md).
 
 ### ⛳️ Sandbox
 
@@ -105,10 +107,10 @@ It's only one click away. Just select your preferred Framework below.
 
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
 - [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
-- Vue (coming soon)
+- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
 - Angular (coming soon)
 
-More examples can be found in the [Example](../examples/Introduction.md) Section.
+More examples can be found in the [Example Section](../examples/Introduction.md).
 
 ## 👨‍💻 When using AgileTs
 

docs/packages/event/Installation.md

@@ -25,4 +25,5 @@ Therefore, we have created a table which shows which versions fit together witho
 | @agile-ts/event       | @agile-ts/core          | NPM Version              | Supported React versions | Supports hook based components    |
 | ----------------------| ----------------------- | ------------------------ | -------------------------|---------------------------------- |
 | v0.0.1+               | v0.0.10+                | v6+                      | 16.8+                    | Yes                               |
-_Other Versions aren't supported anymore_
+
+_Older Versions aren't supported anymore_

docs/packages/multieditor/Installation.md

@@ -26,4 +26,5 @@ Therefore, we have created a table which shows which versions fit together witho
 | ----------------------| ----------------------- | ------------------------ |
 | v0.0.7+               | v0.0.7+                 | v6+                      |
 | v0.0.6                | v0.0.3 - v0.0.6         | v6+                      |
-_Other Versions aren't supported anymore_
+
+_Older Versions aren't supported anymore_

docs/packages/react/Installation.md

@@ -22,8 +22,9 @@ which functions as the brain of AgileTs and is indispensable.
 Unfortunately, we can't combine each `core` with `react` version.
 Therefore, we have created a table that shows which versions fit together without restrictions.
 
-| @agile-ts/react | @agile-ts/core          | NPM Version              | Supported React versions | Supports hook based components    |
-| --------------- | ----------------------- | ------------------------ | -------------------------|---------------------------------- |
-| v0.0.7+         | v0.0.7+                 | v6+                      | 16.8+                    | Yes                               |
-| v0.0.6          | v0.0.3 - v0.0.6         | v6+                      | 16.8+                    | Yes                               | 
-_Older Versions aren't supported anymore_
+| @agile-ts/react  | @agile-ts/core          | NPM Version              | Supported React versions | Supports hook based components    |
+| ---------------- | ----------------------- | ------------------------ | -------------------------|---------------------------------- |
+| v0.0.15+         | v0.0.16+                | v6+                      | 16.8+                    | Yes                               |
+| v0.0.7 - v0.0.14 | v0.0.7 - v0.0.15        | v6+                      | 16.8+                    | Yes                               | 
+
+_Older Versions aren't supported anymore_

docs/packages/vue/Installation.md

@@ -0,0 +1,29 @@
+---
+id: installation
+title: Installation
+sidebar_label: Installation
+slug: /vue/installation
+---
+
+The `vue` package can be installed over [npm](https://www.npmjs.com/).
+
+:::warning
+
+Be aware that this is no standalone package!
+
+:::
+
+```bash npm2yarn
+npm install @agile-ts/vue 
+```
+
+The `vue` package is an extension of AgileTs and doesn't work without the [`core`](../core/Introduction.md) package,
+which functions as the brain of AgileTs and is indispensable.
+Unfortunately, we can't combine each `core` with `vue` version.
+Therefore, we have created a table that shows which versions fit together without restrictions.
+
+| @agile-ts/vue    | @agile-ts/core          | NPM Version              | Supported Vue   versions |
+| ---------------- | ----------------------- | ------------------------ | -------------------------|
+| v0.0.01+         | v0.0.16+                | v6+                      | 2.x (3.x not tested)     |
+
+_Older Versions aren't supported anymore_

docs/packages/vue/Introduction.md

@@ -0,0 +1,97 @@
+---
+id: introduction
+title: Introduction
+sidebar_label: Introduction
+slug: /vue
+---
+
+:::warning
+
+WIP Package!
+
+:::
+
+> Integration for Vue
+
+ <br />
+
+ <a href="https://github.com/agile-ts/agile">
+  <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
+
+## ❓ `vue`
+
+The `vue` package helps us to integrate AgileTs into a [Vue](https://vuejs.org/) environment
+and serves as an Interface to Vue.
+Its main task is to bind States to Vue Components.
+This binding ensures that AgileTs rerender the Component whenever a bound State mutates.
+It also offers some other valuable functionalities that optimize the workflow using AgileTs in a Vue project.
+
+### `bindAgileInstances()`
+
+The `bindAgileInstances()` method binds/subscribes States to Vue Components.
+This binding ensures that the Component rerenders whenever a bound State mutates.
+We can flexibly bind any State to any Vue Component.
+```ts {4-7}
+export default {
+    name: 'MyComponent',
+    data: function () {
+        return {
+            ...this.bindAgileInstances({
+                myState: MY_STATE,
+            }),
+        };
+    },
+};
+```
+`bindAgileInstances()` returns a State value keymap based on the passed States.
+We merge the returned keymap into the `data` object
+to access the State `values` in the `html` code like we would local Vue States.
+```vue {3}
+<template>
+  <div id="app">
+    <p>myState: {{ sharedState.myState }}</p>
+  </div>
+</template>
+```
+Note that the AgileTs State `values` are under the `sharedState` property located
+to separate them from the local Vue States.
+```ts {4-7}
+const MY_STATE = App.createState('jeff');
+const MY_STATE_2 = App.createState('frank');
+
+this.bindAgileInstances({
+  myState: MY_STATE,
+  myState2: MY_STATE_2,
+}); // Returns '{myState: 'jeff', mayState2: 'frank'}'
+```
+Instead of a States keymap we can also pass an array of States. 
+But keep in mind that then the passed States require a unique `key`
+to be properly mapped into the returned State `value` keymap.
+```ts {4-7}
+const MY_STATE = App.createState('jeff', {key: 'myState'});
+const MY_STATE_2 = App.createState('frank');
+
+this.bindAgileInstances([
+  MY_STATE,
+  MY_STATE_2,
+]); // Returns '{myState: 'jeff'}'
+```
+Passed States without a valid `key` are ignored 
+and won't be represented by the returned keymap.
+Thus, the State `value` isn't accessible in the `html` code, 
+and a State mutation rerender is triggered via. `vueComponent.forceRerender()`
+instead of mutating the `data` object.
+
+### 🟦 Typescript
+
+The `bindAgileInstances` isn't typesafe yet. But we are working on it.
+
+## 🚀 Quick Links
+- [Installation](./Installation.md)
+