@agile-ts/core - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

CHANGELOG.md

 # Change Log
 
+## 0.0.9
+
+### Patch Changes
+
+- c3a8217: Improved ReadMe
+
 ## 0.0.8
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@agile-ts/core",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "BennoDev",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -1,63 +0,75 @@
- <img src="static/header_background.png" alt="Banner">
+ <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
  
- > **Spacy**, **Simple**, **Scalable** State Management Framework
+ > **Spacy, Simple, Scalable State Management Framework**
  
  <br />
 
- <a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
+<a href="https://github.com/agile-ts/agile">
+  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"></a>
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"/></a>
+
+<br />
+
+<a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
+   <img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg?style=flat-square" alt="Build Status"/></a>
+<a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
+   <img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/></a>
+<a href="https://codeclimate.com/github/agile-ts/agile/coverage">
+   <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/></a>
+
+<br />
+
 <a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"></a>
+  <img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"/></a>
 <a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"></a>
-<a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/languages/code-size/agile-ts/agile.svg" alt="GitHub Code Size"></a>
-<a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/repo-size/agile-ts/agile.svg" alt="GitHub Repo Size"></a>
+  <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"/></a>
+    
 
 
-## 🚀 Look how easy it is 
-Below example is based on React
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/how_to_create_state_header.png" alt="How to create a State?"/>
+
 ```tsx
-// At first we have to create an Instance of Agile
+// -- core.js ------------------------------------------
+
+// Let's start by creating an Instance of AgileTs
 const App = new Agile();
 
-// Now we can create a State which has an initial Value of "Hello Stranger!"
+// Than we can build our first State
 const MY_FIRST_STATE = App.State("Hello Stranger!");
 
-// Our cool React Component
-const RandomComponent = () => {
-    // With the Hook 'useAgile' we bind the State to our 'RandomComponent'
-    const myFirstState = useAgile(MY_FIRST_STATE); // Returns "Hello Stranger!"
-                                                              //       ^
-    return (                                                  //       |
-        <div>                                                 //       |  Through the 'set' action the State Value 
-            <p>{myFirstState}</p>                             //       |  gets changed to "Hello Friend!" 
-            <button                                           //       |  and causes a rerender on this Component.
-                onClick={() => {                              //       |  -> myFirstState has the Value "Hello Friend!"
-                    // Lets's update the State Value          //       |
-                    MY_FIRST_STATE.set("Hello Friend!") // -------------
-                }}
-            >
-                Update State
-            </button>
-        </div>
-    );
-}
+// -- myComponent.whatever ------------------------------------------
+
+// Now we are able to bind our State to nearly any UI-Component
+// And wolla its reactive. Everytime the State mutates the Component gets rerendered
+const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")
 ```
-_You can't believe the simplicity?! Convince yourself [here](https://codesandbox.io/s/agilets-first-state-f12cz)._
+To find out more checkout our [documentation](https://agile-ts.org/docs).
 
+### ⛳️ Sandbox
+Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.
+- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
+- Vue (coming soon)
+- Angular (coming soon)
 
-## ❓ Why AgileTs
 
-#### 🚅 Straightforward
-Write minimalistic, boilerplate free code that captures your intent. <br />
-**For instance**
-- Store State in Local Storage
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png" alt="Why should I use AgileTs?"/>
+
+### 🚅 Straightforward
+Write minimalistic, boilerplate free code that captures your intent. 
+
+**Some straightforward syntax examples:**
+- Store State in the Local Storage
   ```ts
   MY_STATE.persist("storage-key")
   ```
-- Reactive Collection of States
+- Create reactive Collection of States
   ```ts
@@ -68,3 +80,3 @@ const MY_COLLECTION = App.Collection();
   ```
-- Cool State checks and mutations
+- Mutate or Check States with simple Functions
   ```ts
@@ -75,36 +87,68 @@ MY_STATE.undo(); // Undo last change
 
-#### 🤸‍ Flexible
-Agile can be used in nearly every UI-Framework 
-and surly works with the workflow that suits you best, 
-since Agile isn't bound to _dispatches_, _reducers_, ..
+### 🤸‍ Flexible
+- Works in nearly every UI-Framework. Check [here](https://agile-ts.org/docs/frameworks) if the Framework you are using is supported, too.
+- Surly behaves with the workflow that suits you best.
+  No need for _reducers_, _actions_, ..
+- Has **no** external dependencies
 
-#### 🎯 Easy to Use
-Learn the powerful and simple tools of Agile in a short amount of time.
+### 🌌 Centralize
+Manage your Application Logic in a central place outside any UI-Framework.
+This makes your code more decoupled, portable, and above all, easily testable.
 
-#### ⛳️ Centralize
-Manage your Application Logic outside of any UI-Framework in a central place.
-This makes your code more decoupled, portable, and above all, easily testable. 
+### 🎯 Easy to Use
+Learn the powerful tools of AgileTs in a short amount of time.
+A good place to start is in our [documentation](https://agile-ts.org/docs).
 
-#### 🍃 Lightweight
-Agile has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6) 
+### 🍃 Lightweight
+AgileTs has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6) 
 and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
 
 
-## ⬇️ Installation
-```
-npm install @agile-ts/core
-```
-To use Agile we have to install the _core_ package, it's the brain and handles your States, Collections, ..
 <br />
-```
-npm install @agile-ts/react
-```
-In addition, we need to install a _fitting integration_ for the Framework we are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
 
 
-## 📄 Documentation
-The Agile Docs are located [here](https://agile-ts.org/docs/)
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png" alt="Installation"/>
 
+To use AgileTs properly, in an UI-Framework we have to install **2** packages.
 
-## 🗂 Packages of Agile
+- The _Core Package_, which is the brain of AgileTs and handles your States, Collections, ..
+  ```
+  npm install @agile-ts/core
+  ```
+
+- A _fitting integration_ for the UI-Framework you are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
+  Check [here](https://agile-ts/docs/framework) your Framework is supported, too.
+  ```
+  npm install @agile-ts/react
+  ```
+  
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png" alt="Documentation"/>
+
+If AgileTs sounds interesting to you.
+Checkout our **[docs](https://agile-ts.org/docs/)**. 
+And I am sure you will be able to use it in no time.
+In case you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png" alt="Contribute"/>
+
+Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/packages_of_agile.png" alt="Packages of Agile"/>
+
 | Name                                                                     |                                                                               Latest Version                                                                                | Description                               |
@@ -118,7 +162,8 @@ | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
 
-## 👨‍💻 Contribute
-Feel free to contribute
+<br />
 
 
-## 🌠 Credits
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
+
 AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291876

increased by0.44%

Number of lines in readme file

167

increased by36.89%

No dependency changes