fixed typos

Author: bennobuilder

examples/react-native/develop/AwesomeTSProject/core/index.ts

@@ -1,20 +1,16 @@
-import { Agile } from '@agile-ts/core';
-import { Event } from '@agile-ts/event';
+import { createState, createComputed, createCollection } from '@agile-ts/core';
+import { createEvent, Event } from '@agile-ts/event';
 import { Alert } from 'react-native';
 
-export const App = new Agile({
-  logConfig: { active: true },
-});
-
-export const MY_STATE = App.createState<string>('MyState', { key: 'my-state' }); //.persist();
-export const MY_STATE_2 = App.createState<string>('MyState2'); //.persist("my-state2");
-export const MY_STATE_3 = App.createState<number>(1); //.persist("my-state2");
+export const MY_STATE = createState<string>('MyState', { key: 'my-state' }); //.persist();
+export const MY_STATE_2 = createState<string>('MyState2'); //.persist("my-state2");
+export const MY_STATE_3 = createState<number>(1); //.persist("my-state2");
 
 MY_STATE.watch('test', (value: any) => {
   console.log('Watch ' + value);
 });
 
-export const MY_COMPUTED = App.createComputed<string>(() => {
+export const MY_COMPUTED = createComputed<string>(() => {
   return 'test' + MY_STATE.value + '_computed_' + MY_STATE_2.value;
 });
 
@@ -23,7 +19,7 @@ interface collectionValueInterface {
   name: string;
 }
 
-export const MY_COLLECTION = App.createCollection<collectionValueInterface>(
+export const MY_COLLECTION = createCollection<collectionValueInterface>(
   (collection) => ({
     key: 'my-collection',
     groups: {
@@ -43,7 +39,7 @@ MY_COLLECTION.getGroup('myGroup')?.persist({
 
 console.log('Initial: myCollection ', MY_COLLECTION);
 
-export const MY_EVENT = new Event<{ name: string }>(App);
+export const MY_EVENT = createEvent<{ name: string }>();
 
 MY_EVENT.on('Test', (payload) => {
   Alert.alert(

examples/react/develop/class-component-ts/src/core/index.ts

@@ -1,25 +1,25 @@
-import { Agile, clone, Logger } from '@agile-ts/core';
-import { Event } from '@agile-ts/event';
+import {
+  clone,
+  createState,
+  createComputed,
+  createCollection,
+} from '@agile-ts/core';
+import { createEvent, Event } from '@agile-ts/event';
 
-export const App = new Agile({
-  logConfig: { level: Logger.level.DEBUG, timestamp: true },
-  waitForMount: false,
-});
-
-export const MY_STATE = App.createState<string>('MyState'); //.persist();
-export const MY_STATE_2 = App.createState<string>('MyState2', {
+export const MY_STATE = createState<string>('MyState'); //.persist();
+export const MY_STATE_2 = createState<string>('MyState2', {
   key: 'myState2',
 }).persist();
 MY_STATE_2.onLoad(() => {
   console.log('On Load');
 });
-export const MY_STATE_3 = App.createState<number>(1); //.persist("my-state2");
+export const MY_STATE_3 = createState<number>(1); //.persist("my-state2");
 
 MY_STATE.watch('test', (value: any) => {
   console.log('Watch ' + value);
 });
 
-export const MY_COMPUTED = App.createComputed<string>(() => {
+export const MY_COMPUTED = createComputed<string>(() => {
   return 'test' + MY_STATE.value + '_computed_' + MY_STATE_2.value;
 }, []).setKey('myComputed');
 
@@ -28,7 +28,7 @@ interface collectionValueInterface {
   name: string;
 }
 
-export const MY_COLLECTION = App.createCollection<collectionValueInterface>(
+export const MY_COLLECTION = createCollection<collectionValueInterface>(
   (collection) => ({
     key: 'my-collection',
     groups: {
@@ -48,7 +48,7 @@ MY_COLLECTION.getGroup('myGroup')?.persist({
 
 console.log('Initial: myCollection ', clone(MY_COLLECTION));
 
-export const MY_EVENT = new Event<{ name: string }>(App, {
+export const MY_EVENT = createEvent<{ name: string }>({
   delay: 3000,
   key: 'myEvent',
 });

examples/react/develop/functional-component-ts/src/App.tsx

@@ -44,9 +44,12 @@ const App = (props: any) => {
   ]);
   const [myGroup] = useAgile([MY_COLLECTION.getGroupWithReference('myGroup')]);
 
-  const selectedObjectItem = useSelector(STATE_OBJECT, (value) => {
-    return value.age;
-  });
+  const stateObjectAge = useSelector<typeof STATE_OBJECT.value, number>(
+    STATE_OBJECT,
+    (value) => {
+      return value.age;
+    }
+  );
 
   const [stateObject, item2, collection2] = useProxy(
     [STATE_OBJECT, MY_COLLECTION.getItem('id2'), MY_COLLECTION],
@@ -56,8 +59,6 @@ const App = (props: any) => {
   console.log('Item1: ', item2?.name);
   console.log('Collection: ', collection2.slice(0, 2));
 
-  // const myCollection2 = useAgile(MY_COLLECTION);
-
   const mySelector = useAgile(MY_COLLECTION.getSelector('mySelector'));
 
   useEvent(MY_EVENT, () => {
@@ -126,6 +127,13 @@ const App = (props: any) => {
             }}>
             Change shallow name
           </button>
+          <p>Age: {stateObjectAge}</p>
+          <button
+            onClick={() => {
+              STATE_OBJECT.patch({ age: generateId(2) });
+            }}>
+            Change age
+          </button>
         </div>
 
         <div className={'Container'}>

examples/react/develop/functional-component-ts/src/core/index.ts

@@ -8,7 +8,7 @@ import Agile, {
   Item,
   assignSharedAgileStorageManager,
 } from '@agile-ts/core';
-import Event from '@agile-ts/event';
+import { createEvent } from '@agile-ts/event';
 import { assignSharedAgileLoggerConfig, Logger } from '@agile-ts/logger';
 import { clone } from '@agile-ts/utils';
 
@@ -114,7 +114,7 @@ export const externalCreatedItem = new Item(MY_COLLECTION, {
 
 console.log('Initial: myCollection ', clone(MY_COLLECTION));
 
-export const MY_EVENT = new Event<{ name: string }>(App, {
+export const MY_EVENT = createEvent<{ name: string }>({
   delay: 3000,
   key: 'myEvent',
 });

examples/react/develop/multieditor-ts/src/core/agile.ts

@@ -1,10 +1,6 @@
 import { Agile, globalBind } from '@agile-ts/core';
 
-const App = new Agile({
-  logConfig: {
-    active: true,
-  },
-});
+const App = new Agile();
 
 export default App;
 

examples/react/release/boxes/yarn.lock

@@ -3,26 +3,20 @@
 
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.1.2"
+  version "0.2.0-alpha.4"
   dependencies:
     "@agile-ts/utils" "^0.0.7"
 
-"@agile-ts/logger@^0.0.7":
+"@agile-ts/logger@file:.yalc/@agile-ts/logger":
   version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.7.tgz#9e89e8d80f80a46901a508432696860f88d5e878"
-  integrity sha512-6N9qyooo/a7ibyl9L7HnBX0LyMlSwaEYgObYs58KzR19JGF00PX/sUFfQAVplXXsMfT/8HvLyI+4TssmyI6DdQ==
   dependencies:
     "@agile-ts/utils" "^0.0.7"
 
-"@agile-ts/proxytree@^0.0.5":
+"@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
   version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@agile-ts/proxytree/-/proxytree-0.0.5.tgz#81c40970707271822a176ee59f93b9230df6311d"
-  integrity sha512-KODknVD30ld9xPCyt0UCf0yGcroy/0CHEncAdmTFwEvDSMipMaqFQRsAYZ0tgB4bMfFzab40aUmYTK8XDkwdHw==
 
-"@agile-ts/react@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@agile-ts/react/-/react-0.1.2.tgz#d07f6b935d9322cd60d2e9e3871da554b04460af"
-  integrity sha512-W4u2+X6KCeXPdkjit/NsMJG5nBsa7dNFaEzyfTsp5Cqbs99zLqY6dO8LUIYyhRt/+HBvEW9o64i/6Kqd59WM1Q==
+"@agile-ts/react@file:.yalc/@agile-ts/react":
+  version "0.2.0-alpha.1"
 
 "@agile-ts/utils@^0.0.7":
   version "0.0.7"

examples/react/release/stopwatch-query-url/src/core/index.ts

@@ -1,4 +1,9 @@
-import { createState, globalBind, shared } from '@agile-ts/core';
+import {
+  createState,
+  globalBind,
+  createStorage,
+  getStorageManager,
+} from '@agile-ts/core';
 import queryString from 'query-string';
 
 export type StopwatchStateType =
@@ -7,7 +12,7 @@ export type StopwatchStateType =
   | 'initial'; // Stopwatch is reset
 
 // Create Query Storage to store the State in the query (url)
-const queryUrlStorage = shared.createStorage({
+const queryUrlStorage = createStorage({
   key: 'query-url',
   methods: {
     set: (key, value) => {
@@ -30,7 +35,7 @@ const queryUrlStorage = shared.createStorage({
 });
 
 // Register Query Storage to the shared Agile Instance and set it as default
-shared.registerStorage(queryUrlStorage, { default: true });
+getStorageManager().register(queryUrlStorage, { default: true });
 
 // State to keep track of the current time of the Stopwatch
 const TIME = createState(

examples/vue/develop/my-project/src/core.js

@@ -1,24 +1,24 @@
-import { Agile, assignSharedAgileInstance, globalBind } from '@agile-ts/core';
+import {
+  globalBind,
+  createState,
+  createComputed,
+  createCollection,
+} from '@agile-ts/core';
 import { Logger, assignSharedAgileLoggerConfig } from '@agile-ts/logger';
 import '@agile-ts/vue';
 
 assignSharedAgileLoggerConfig({ level: Logger.level.DEBUG });
 
-// Create Agile Instance
-export const App = new Agile({ localStorage: true });
-assignSharedAgileInstance(App);
-
 // console.debug('hi'); // Doesn't work here idk why
 
 // Create State
-export const MY_STATE = App.createState('World', {
+export const MY_STATE = createState('World', {
   key: 'my-state',
-})
-  .computeValue((v) => {
-    return `Hello ${v}`;
-  });
+}).computeValue((v) => {
+  return `Hello ${v}`;
+});
 
-export const MY_COMPUTED = App.createComputed(
+export const MY_COMPUTED = createComputed(
   async () => {
     await new Promise((resolve) => setTimeout(resolve, 3000));
     return `${MY_STATE.value} Frank`;
@@ -27,7 +27,7 @@ export const MY_COMPUTED = App.createComputed(
 );
 
 // Create Collection
-export const TODOS = App.createCollection({
+export const TODOS = createCollection({
   initialData: [{ id: 1, name: 'Clean Bathroom' }],
   selectors: [1],
 }).persist('todos');

packages/react/src/hooks/useValue.ts

@@ -5,25 +5,28 @@ import {
   State,
   defineConfig,
 } from '@agile-ts/core';
-import { AgileHookConfigInterface, useAgile } from './useAgile';
-import { SubscribableAgileInstancesType } from './useBaseAgile';
+import { useAgile } from './useAgile';
+import {
+  BaseAgileHookConfigInterface,
+  SubscribableAgileInstancesType,
+} from './useBaseAgile';
 
 export function useValue<X extends Array<SubscribableAgileInstancesType>>(
   deps: X | [],
-  config?: AgileHookConfigInterface
+  config?: BaseAgileHookConfigInterface
 ): AgileValueHookArrayType<X>;
 
 export function useValue<X extends SubscribableAgileInstancesType>(
   dep: X,
-  config?: AgileHookConfigInterface
+  config?: BaseAgileHookConfigInterface
 ): AgileValueHookType<X>;
 
 export function useValue<
   X extends Array<SubscribableAgileInstancesType>,
   Y extends SubscribableAgileInstancesType
 >(
   deps: X | Y,
-  config: AgileHookConfigInterface = {}
+  config: BaseAgileHookConfigInterface = {}
 ): AgileValueHookArrayType<X> | AgileValueHookType<Y> {
   return useAgile(
     deps as any,