Merge pull request #184 from agile-ts/develop

New Release 🎉

Author: bennobuilder

.changeset/modern-paws-turn.md

@@ -0,0 +1,14 @@
+---
+'@agile-ts/core': patch
+'cra-template-agile': patch
+'cra-template-agile-typescript': patch
+---
+
+#### :nail_care: Polish
+* `cra-template-agile`, `cra-template-agile-typescript`
+    * Optimized create-react-app templates ([@bennodev19](https://github.com/bennodev19))
+* Optimized examples ([@bennodev19](https://github.com/bennodev19))
+
+#### Committers: 1
+- BennoDev ([@bennodev19](https://github.com/bennodev19))
+

.eslintignore

@@ -4,4 +4,8 @@ node_modules
 jest.config.js
 jest.base.config.js
 scripts/
-examples/
+examples/
+
+# Ignore the templates (because otherwise it will try to lint with the eslint config of these packages)
+cra-template-agile-typescript/
+cra-template-agile/

.eslintrc.js

@@ -15,13 +15,14 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'prettier',
   ],
+  plugins: ['@typescript-eslint', 'prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     allowImportExportEverywhere: true,
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint', 'prettier'],
+  ignorePatterns: ['.eslintrc.js'],
   rules: {
     'func-names': OFF,
     '@typescript-eslint/no-explicit-any': OFF,

.gitignore

@@ -1,10 +1,4 @@
 node_modules/
-dist
-.yalc
-package-lock.json
-coverage
-.tgz
-.changelog
 
 # Differs on each engine
 yalc.lock
@@ -18,6 +12,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .eslintcache
+package-lock.json
+yarn.lock
 
 # Editor directories and files
 .idea
@@ -33,3 +29,9 @@ sync.js
 # Generated files from build
 src/*.js
 src/*.js.map
+*.tgz
+cache
+coverage
+.yalc
+dist
+.changelog

README.md

@@ -1,6 +1,6 @@
  <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
 
-> Global State and Logic Framework
+> Global State and Logic Library
 
  <br />
 
@@ -29,7 +29,7 @@
 </p>
 
 <p align="left">
- <a href="https://twitter.com/intent/tweet?text=I%20just%20discovered%20AgileTs%3B%20a%20global%2C%20spacy%20and%20overall%20easy%20to%20use%20State%20Manager.%0A%60%60%60ts%0Aconst%20MY_STATE%20%3D%20App.createState(%22Hello%20stranger%22)%3B%0AMY_STATE.set(%22Hello%20friend%22)%3B%0A%60%60%60%0Ahttps%3A%2F%2Fgithub.com%2Fagile-ts%2Fagile%2F%20%0A%0A%40AgileFramework%20%0A%23agilets%20%23statemanagement%20%23webdev%20"><img src="http://randojs.com/images/tweetShield.svg" alt="Tweet" height="20"/>
+ <a href="https://twitter.com/intent/tweet?text=I%20just%20discovered%20AgileTs%3B%20a%20global%2C%20spacy%20and%20overall%20easy%20to%20use%20State%20Manager.%0A%60%60%60ts%0Aconst%20MY_STATE%20%3D%20App.createState(%22Hello%20stranger%22)%3B%0AMY_STATE.set(%22Hello%20friend%22)%3B%0A%60%60%60%0Ahttps%3A%2F%2Fgithub.com%2Fagile-ts%2Fagile%2F%20%0A%0A%40AgileTypescript%20%0A%23agilets%20%23statemanagement%20%23webdev%20"><img src="http://randojs.com/images/tweetShield.svg" alt="Tweet" height="20"/>
  </a>
  <a href="https://discord.gg/T9GzreAwPH">
    <img src="https://img.shields.io/discord/795291052897992724.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" alt="Join Discord"/>
@@ -64,7 +64,7 @@ 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](https://codesandbox.io/s/agilets-first-state-i5xxs)
-- Angular (coming soon)
+- Svelte (coming soon)
 
 More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
 
@@ -75,7 +75,7 @@ More examples can be found in the [Example section](https://agile-ts.org/docs/ex
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png" alt="Why should I use AgileTs?"/>
 
-AgileTs is a global State and Logic Framework implemented in Typescript.
+AgileTs is a global State and Logic Library implemented in Typescript.
 It offers a reimagined API that focuses on **developer experience**
 and allows you to **easily** and **flexible** manage your application States.
 Besides [States](https://agile-ts.org/docs/core/state),
@@ -175,7 +175,6 @@ We will be happy to help you.
 - Quick Start
   - [React](https://agile-ts.org/docs/quick-start/react)
   - [Vue](https://agile-ts.org/docs/quick-start/vue)
-  - [Angular](https://agile-ts.org/docs/quick-start/angular)
 - Packages
   - [core](https://agile-ts.org/docs/core)
     - [Agile Instance](https://agile-ts.org/docs/core/agile-instance)
@@ -232,5 +231,5 @@ To find out more about contributing, check out the [CONTRIBUTING.md](https://git
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
 
-AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) 
+AgileTs is inspired by [MVVM Libraries](https://de.wikipedia.org/wiki/Model_View_ViewModel) 
 like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).

examples/nextjs/develop/clock/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "next/core-web-vitals"]
+}

examples/nextjs/develop/clock/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs/develop/clock/README.md

@@ -0,0 +1,37 @@
+> Inspired by https://github.com/vercel/next.js/tree/canary/examples/with-redux
+
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.tsx`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/develop/clock/components/Clock.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useAgile } from '@agile-ts/react';
+import { LAST_UPDATED_TIMESTAMP, LIGHT } from '../src/core';
+
+const formatTime = (timestamp: number) => {
+  // cut off except hh:mm:ss
+  return new Date(timestamp).toJSON().slice(11, 19);
+};
+
+const Clock = () => {
+  const [lastUpdatedTimestamp, light] = useAgile([
+    LAST_UPDATED_TIMESTAMP,
+    LIGHT,
+  ]);
+
+  return (
+    <div className={light ? 'light' : ''}>
+      {formatTime(lastUpdatedTimestamp)}
+      <style jsx>{`
+        div {
+          padding: 15px;
+          display: inline-block;
+          color: #82fa58;
+          font: 50px menlo, monaco, monospace;
+          background-color: #000;
+        }
+        .light {
+          background-color: #999;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Clock;

examples/nextjs/develop/clock/components/Counter.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useAgile } from '@agile-ts/react';
+import {
+  COUNTER,
+  decrementCount,
+  incrementCount,
+  resetCount,
+} from '../src/core';
+
+const Counter = () => {
+  const count = useAgile(COUNTER);
+
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={incrementCount}>+1</button>
+      <button onClick={decrementCount}>-1</button>
+      <button onClick={resetCount}>Reset</button>
+    </div>
+  );
+};
+
+export default Counter;