totally-tubular 0.1.2 → 0.3.0

package/README.md

@@ -1,24 +1,14 @@
 # totally-tubular
 
-A completely framework-agnostic, JavaScript / TypeScript state management and update broadcasting library with zero dependencies, solid performance and a micro file size.
+A framework-agnostic JavaScript / TypeScript state management library with zero dependencies, a tiny file size, and solid performance.
 
-**Woahhhh**
+## Why another state management library?
 
-## But why is there _another_ state management library? I already use XYZ library.
+State management has a tendency to get complicated fast. This library is an experiment in keeping things simple:
 
-Great! I'm glad you found something that works for you!
-This library (`totally-tubular`) was an experiment that manifested out of feeling
-like state management is overcomplicated these days and often riddled with "gotchas"
-and easy-to-oopsie performance faux pas.
-
-Additionally, our shipped JavaScript bundles should be getting **smaller**, not **bigger**,
-but it's all-too-easy, especially when crafting enterprise software, to keep shoving more libraries
-into your bundle with questionable benefits, when there often exists a much simpler, closer-to-vanilla
-way to do what you need to do.
-
-As a final point, your state management system should be fully-portable, so if you swap out
-your rendering layer, be it React, Svelte, Angular, or something else, the meat-and-potatoes of
-your state management shouldn't need to be fully rewritten.
+- **Portable.** Your store is plain TypeScript. If you swap React for Svelte, or add a Node.js background worker, the store itself doesn't change.
+- **Small.** No framework coupling, no middleware pipeline, no magic — just a class that holds state, lets you read it, update it, and watch it for changes.
+- **Honest.** It mutates your state in place for performance. If you want immutability, return new objects from your updater functions.
 
 ## Install
 
@@ -26,12 +16,25 @@ your state management shouldn't need to be fully rewritten.
 npm i totally-tubular --save
 ```
 
+## Core concepts
+
+A `Tubular` instance wraps an object and gives you four things:
+
+| Method | What it does |
+|---|---|
+| `read(path)` | Returns the current value at a dot-separated path |
+| `update(path, fn)` | Calls `fn` with the current value, stores the return value, then notifies all observers |
+| `observe(path, fn)` | Registers a callback that fires whenever `path` is updated |
+| `unobserve(path, fn)` | Removes a previously registered callback |
+
+Paths are fully type-checked. TypeScript knows every valid dot-path into your state shape, so you get autocomplete and a compile error if you mistype a key.
+
 ## Quick start
 
 ```typescript
 import { Tubular } from "totally-tubular";
 
-interface MyStateShape {
+interface AppState {
   isActive: boolean;
   count: number;
   meta: {
@@ -40,107 +43,89 @@ interface MyStateShape {
   name: string;
 }
 
-const initialState: MyStateShape = {
+const store = new Tubular<AppState>({
   isActive: false,
   count: 123,
-  meta: {
-    title: "Director",
-  },
+  meta: { title: "Director" },
   name: "Test User",
-};
-
-const t = new Tubular(initialState);
+});
 
-// listen to any of the keys / values in your state object for changes
-// and do whatever you need with the values
-t.observe("meta.title", (newVal, oldVal, propPath) =>
-  console.info(propPath, "was updated from", oldVal, "to", newVal),
+// Watch a value for changes
+store.observe("meta.title", (newVal, oldVal) =>
+  console.info("title changed from", oldVal, "to", newVal),
 );
 
-console.info(t.read("meta.title")); // will print 'Director'
+console.info(store.read("meta.title")); // "Director"
+
+// Update a value — all observers are notified immediately after
+store.update("meta.title", (prev) => `Supreme ${prev}`);
 
-// update any of the keys / values in your state object.
-// all observers will be notified after the value has been set
-t.update("meta.title", (prev) => `Supreme ${prev}`);
-console.info(t.read("meta.title")); // will print the updated 'Supreme Director' value
+console.info(store.read("meta.title")); // "Supreme Director"
 ```
 
-### React example
+## React
 
-Since React is one of the most popular UI libraries, here is how you might mimick the vanilla example, above, but in a React application.
+Import `useTubular` from `totally-tubular/react`. It works exactly like React's
+built-in `useState` — you get back a `[value, setter]` tuple — except the value
+comes from your store and every component watching the same path re-renders when
+it changes.
 
 ```tsx
 import { Tubular } from "totally-tubular";
-import { useEffect, useState } from "react";
+import { useTubular } from "totally-tubular/react";
 
-interface MyState {
-  permissions: {
-    entitlements: string[];
-  };
-  time: number;
-  username: string;
+interface AppState {
+  user: { name: string };
+  count: number;
 }
 
-const initialState: MyState = {
-  permissions: { entitlements: [] },
-  username: "Test User",
-  time: Date.now(),
-};
-
-const t = new Tubular<MyState>(initialState);
+// Create the store once, outside your components
+const store = new Tubular<AppState>({
+  user: { name: "Alice" },
+  count: 0,
+});
 
-const getTime = (timestamp: number) => {
-  const d = new Date();
-  d.setTime(timestamp);
-  return d.toLocaleTimeString();
-};
-
-export default function App() {
-  /** state */
-  const [username, setUsername] = useState(initialState.username);
-  const [time, setTime] = useState(initialState.time);
-
-  /** effects */
-  useEffect(() => {
-    t.observe("username", (v) => setUsername(v));
-    t.observe("time", (t) => setTime(t));
-  }, []);
-
-  useEffect(() => {
-    const interval = setInterval(() => t.update("time", (oldVal) => oldVal + 1000), 1000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
+function Counter() {
+  const [count, setCount] = useTubular(store, "count");
 
   return (
-    <div>
-      <strong>User: {username}</strong>
-      <div>The time: {getTime(time)}</div>
-    </div>
+    <button onClick={() => setCount((n) => (n ?? 0) + 1)}>
+      Clicked {count} times
+    </button>
   );
 }
+
+function Greeting() {
+  // Read-only — just destructure the first element
+  const [name] = useTubular(store, "user.name");
+  return <p>Hello, {name}!</p>;
+}
 ```
 
-## Things you should know
+The setter accepts either a plain value or an updater function:
+
+```ts
+// Plain value
+setCount(10);
+
+// Updater function (receives the current value)
+setCount((prev) => (prev ?? 0) + 1);
+```
 
-- This library _does not_ support observing arbitrary indices in an array, or objects inside of an array.
-  This is intentional.
-  If you want to be notified of changes to an array or you want to update some item in an array, you should use the path to the array in your state object, then perform reads or transformations on that.
-- This library **mutates your originally-provided `initialState`**.
-  This is for performance reasons, as mutating objects doesn't require cloning and iterating on all object properties, saving on computation time.
-  If you want to ensure immutability, you should make your calls to `.update()` return new objects, array, etc.
+`useTubular` automatically unsubscribes when the component unmounts, so you
+don't need to manage cleanup yourself.
 
-## (Extra) Synthetic Performance Benchmarks
+## Things you should know
 
-### Machine specs
+- **Arrays and nested objects are observed at their path, not their contents.**
+  `observe("items", fn)` fires when `items` itself is replaced. To add an item
+  to an array, use `update("items", prev => [...prev, newItem])`.
+- **Arbitrary array indices are not observable.** You cannot do `observe("items.0", fn)`. If you need per-item reactivity, store each item in its own `Tubular` instance.
+- **State is mutated in place.** `totally-tubular` does not clone your state on every update. This keeps things fast, but means the object you pass to `new Tubular(initialState)` will be modified directly. If that matters to you, pass a deep clone as the initial state.
 
-#### Apple Machine
+## Performance benchmarks
 
-CPU: M3 Max
-RAM: 36GB
-OS: MacOS Sequoia 15.5
+### Apple M3 Max · 36 GB RAM · macOS Sequoia 15.5
 
 ```
 -----shallow state object-----
@@ -189,11 +174,7 @@ OS: MacOS Sequoia 15.5
 1,000,000 updates to "zdeepSettings.level1.level2.level3.level4.level5.level6.currentValue" string val with 1000 observers: 1.1015419579999999s
 ```
 
-#### Windows Machine
-
-CPU: Intel i9-13900HX
-RAM: 32GB
-OS: Windows 11
+### Intel i9-13900HX · 32 GB RAM · Windows 11
 
 ```
 -----shallow state object-----

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/dist/cjs/totally-tubular-react.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTubular", {
+    enumerable: true,
+    get: function() {
+        return useTubular;
+    }
+});
+const _react = require("react");
+function useTubular(tubular, key) {
+    /** state */ const [val, setVal] = (0, _react.useState)(()=>tubular.read(key));
+    /** callbacks */ const handleUpdateVal = (0, _react.useCallback)((newValOrCallback)=>{
+        if (typeof newValOrCallback === 'function') {
+            tubular.update(key, newValOrCallback);
+        } else {
+            tubular.update(key, ()=>newValOrCallback);
+        }
+    }, [
+        tubular,
+        key
+    ]);
+    /** effects */ (0, _react.useEffect)(()=>{
+        // Sync in case the value changed between render and effect registration
+        setVal(tubular.read(key));
+        const observeCb = (newVal)=>{
+            setVal(newVal);
+        };
+        tubular.observe(key, observeCb);
+        return ()=>{
+            tubular.unobserve(key, observeCb);
+        };
+    }, [
+        tubular,
+        key
+    ]);
+    return [
+        val,
+        handleUpdateVal
+    ];
+}

package/dist/cjs/totally-tubular-react.d.ts

@@ -0,0 +1,30 @@
+import type { Tubular } from './totally-tubular.js';
+import type { AllObjectKeys, PropType } from './types.js';
+/**
+ * A React hook that binds to a {@link Tubular} instance and a specific key path
+ * within its state.
+ *
+ * Returns a `[value, setter]` tuple that works exactly like React's built-in
+ * `useState`, except reads and writes go through the Tubular store — so every
+ * component (and non-React observer) watching the same path is notified on
+ * every update.
+ *
+ * The setter accepts either a new value directly or an updater function that
+ * receives the current value and returns the next one.
+ *
+ * @example
+ * ```tsx
+ * const store = new Tubular({ user: { name: 'Alice' }, count: 0 });
+ *
+ * function Counter() {
+ *   const [count, setCount] = useTubular(store, 'count');
+ *   return <button onClick={() => setCount(n => (n ?? 0) + 1)}>{count}</button>;
+ * }
+ *
+ * function Greeting() {
+ *   const [name] = useTubular(store, 'user.name');
+ *   return <p>Hello, {name}!</p>;
+ * }
+ * ```
+ */
+export declare function useTubular<T extends object, K extends string>(tubular: Tubular<T>, key: K & AllObjectKeys<T>): readonly [PropType<T, K> | null, (newValOrCallback: PropType<T, K> | ((prevVal: PropType<T, K> | null) => PropType<T, K>)) => void];

package/dist/cjs/totally-tubular-react.test.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _buntest = require("bun:test");
+const _react = require("@testing-library/react");
+const _totallytubular = require("./totally-tubular.cjs");
+const _totallytubularreact = require("./totally-tubular-react.cjs");
+const makeInitialState = ()=>({
+        animals: [],
+        drink: {
+            beer: true,
+            kind: 'guiness'
+        },
+        food: {
+            pasta: false,
+            pizza: true
+        }
+    });
+(0, _buntest.describe)('useTubular', ()=>{
+    (0, _buntest.it)('should read an initial value from a Tubular instance', ()=>{
+        const initial = makeInitialState();
+        initial.drink.kind = 'Guiness 0.0%';
+        const t = new _totallytubular.Tubular(initial);
+        const { result } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'drink.kind'));
+        (0, _buntest.expect)(result.current[0]).toBe('Guiness 0.0%');
+    });
+    (0, _buntest.it)('should update a top-level value and reflect the change', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const animals = [
+            'cats',
+            'dogs'
+        ];
+        const { result, rerender } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'animals'));
+        (0, _buntest.expect)(result.current[0]).toEqual([]);
+        (0, _react.act)(()=>{
+            result.current[1](animals);
+        });
+        rerender();
+        (0, _buntest.expect)(result.current[0]).toEqual(animals);
+    });
+    (0, _buntest.it)('should update a nested value using a callback updater', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const { result, rerender } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'food.pasta'));
+        (0, _buntest.expect)(result.current[0]).toBeFalse();
+        (0, _react.act)(()=>{
+            result.current[1]((prev)=>!prev);
+        });
+        rerender();
+        (0, _buntest.expect)(result.current[0]).toBeTrue();
+    });
+    (0, _buntest.it)('should notify all hooks observing the same key when one updates', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const { result: resultA, rerender: rerenderA } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'drink.beer'));
+        const { result: resultB, rerender: rerenderB } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'drink.beer'));
+        (0, _buntest.expect)(resultA.current[0]).toBeTrue();
+        (0, _buntest.expect)(resultB.current[0]).toBeTrue();
+        (0, _react.act)(()=>{
+            resultA.current[1](false);
+        });
+        rerenderA();
+        rerenderB();
+        (0, _buntest.expect)(resultA.current[0]).toBeFalse();
+        (0, _buntest.expect)(resultB.current[0]).toBeFalse();
+    });
+    (0, _buntest.it)('should unobserve when the hook unmounts', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const { result, unmount } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'drink.kind'));
+        (0, _buntest.expect)(result.current[0]).toBe('guiness');
+        unmount();
+        // Update after unmount — the store still works, but the unmounted hook
+        // should no longer be observing so no "update on unmounted component" error occurs.
+        (0, _react.act)(()=>{
+            t.update('drink.kind', ()=>'stella');
+        });
+        // Verify the store update took effect via a fresh hook instance.
+        const { result: freshResult } = (0, _react.renderHook)(()=>(0, _totallytubularreact.useTubular)(t, 'drink.kind'));
+        (0, _buntest.expect)(freshResult.current[0]).toBe('stella');
+    });
+});

package/dist/cjs/totally-tubular.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tubular", {
+    enumerable: true,
+    get: function() {
+        return Tubular;
+    }
+});
+class Tubular {
+    observationCallbacks = new Map();
+    state;
+    constructor(initialState){
+        this.state = initialState;
+    }
+    doSomethingToPath(readPath, doSomething) {
+        let thing = this.state;
+        if (typeof readPath !== 'string') {
+            return this.getPortionOfStateByPath(thing[readPath]);
+        }
+        const splitPath = readPath.split('.');
+        const len = splitPath.length;
+        for(let i = 0; i < len; i++){
+            const p = splitPath[i] || '';
+            if (i === len - 1) {
+                if (thing) thing[p] = doSomething(thing[p]);
+            } else thing = thing?.[p];
+        }
+        for (const p of splitPath){
+            thing = thing?.[p];
+        }
+    }
+    getPortionOfStateByPath(readPath) {
+        let thing = this.state;
+        if (typeof readPath !== 'string') {
+            return this.getPortionOfStateByPath(thing[readPath]);
+        }
+        const splitPath = readPath.split('.');
+        for (const p of splitPath){
+            thing = thing?.[p];
+        }
+        return thing ?? null;
+    }
+    /**
+   * observe changes to some part of state that was updated
+   */ observe(propPath, observeCallback) {
+        const prevForPath = this.observationCallbacks.get(propPath) ?? [];
+        this.observationCallbacks.set(propPath, [
+            ...prevForPath,
+            observeCallback
+        ]);
+    }
+    /**
+   * reads a portion of your state
+   */ read(readPath) {
+        return this.getPortionOfStateByPath(readPath);
+    }
+    /**
+   * disconnects an observer callback from totally tubular
+   */ unobserve(propPath, observeCallback) {
+        const observers = this.observationCallbacks.get(propPath);
+        if (!observers?.length) return;
+        this.observationCallbacks.set(propPath, observers.filter((ob)=>ob !== observeCallback));
+    }
+    /**
+   * updates a portion of your state
+   */ update(updatePath, valUpdater) {
+        const prevVal = this.read(updatePath);
+        let newVal = null;
+        this.doSomethingToPath(updatePath, (oldVal)=>{
+            const n = valUpdater(oldVal);
+            newVal = n;
+            return n;
+        });
+        for (const cb of this.observationCallbacks.get(updatePath) ?? []){
+            cb(newVal, prevVal, updatePath);
+        }
+    }
+}

package/dist/{totally-tubular.d.ts → cjs/totally-tubular.d.ts}

@@ -1,4 +1,4 @@
-import type { AllObjectKeys, PropType } from './types.js';
+import type { AllObjectKeys, ObservationCallback, PropType } from './types.js';
 /**
  * A totally tubular instance that tracks a top-level
  * set of keys and values.
@@ -14,17 +14,17 @@ export declare class Tubular<T extends object> {
     /**
      * observe changes to some part of state that was updated
      */
-    observe<K extends AllObjectKeys<T>, V = PropType<T, K & string>>(propPath: K, observeCallback: (newVal: V, oldVal: V, propPath: K) => void): void;
+    observe<K extends string>(propPath: K & AllObjectKeys<T>, observeCallback: ObservationCallback<T>): void;
     /**
      * reads a portion of your state
      */
-    read<K extends AllObjectKeys<T>>(readPath: K): PropType<T, K & string> | null;
+    read<K extends string>(readPath: K & AllObjectKeys<T>): PropType<T, K> | null;
     /**
      * disconnects an observer callback from totally tubular
      */
-    unobserve<K extends AllObjectKeys<T>, V = PropType<T, K & string>>(propPath: K, observeCallback: (newVal: V, oldVal: V) => void): void;
+    unobserve<K extends string>(propPath: K & AllObjectKeys<T>, observeCallback: ObservationCallback<T>): void;
     /**
      * updates a portion of your state
      */
-    update<K extends AllObjectKeys<T>>(updatePath: K, valUpdater: (oldVal: PropType<T, K & string>) => PropType<T, K & string>): void;
+    update<K extends string>(updatePath: K & AllObjectKeys<T>, valUpdater: (oldVal: PropType<T, K>) => PropType<T, K>): void;
 }

package/dist/cjs/totally-tubular.test.cjs

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _buntest = require("bun:test");
+const _totallytubular = require("./totally-tubular.cjs");
+const makeInitialState = ()=>({
+        animals: [],
+        drink: {
+            beer: true,
+            kind: 'guiness'
+        },
+        food: {
+            pasta: false,
+            pizza: true
+        }
+    });
+(0, _buntest.describe)('totally-tubular', ()=>{
+    (0, _buntest.test)('should update one single property', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const newVal = 'old speckled hen';
+        t.update('drink.kind', ()=>newVal);
+        (0, _buntest.expect)(t.read('drink.kind')).toBe(newVal);
+    });
+    (0, _buntest.test)('should ensure update is called multiple times', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const initialBeer = t.read('drink.kind');
+        const v1 = 'ginger beer';
+        const v2 = 'corona';
+        const v3 = "London's Pride";
+        const ob = _buntest.vi.fn();
+        t.observe('drink.kind', ob);
+        t.update('drink.kind', ()=>v1);
+        t.update('drink.kind', ()=>v2);
+        t.update('drink.kind', ()=>v3);
+        (0, _buntest.expect)(ob).toHaveBeenNthCalledWith(1, v1, initialBeer, 'drink.kind');
+        (0, _buntest.expect)(ob).toHaveBeenNthCalledWith(2, v2, v1, 'drink.kind');
+        (0, _buntest.expect)(ob).toHaveBeenNthCalledWith(3, v3, v2, 'drink.kind');
+    });
+    (0, _buntest.test)('should update an array', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        t.update('animals', (prev)=>[
+                ...prev,
+                'birds'
+            ]);
+        t.update('animals', (prev)=>[
+                ...prev,
+                'cats'
+            ]);
+        t.update('animals', (prev)=>[
+                ...prev,
+                'dogs'
+            ]);
+        (0, _buntest.expect)(t.read('animals')).toStrictEqual([
+            'birds',
+            'cats',
+            'dogs'
+        ]);
+    });
+    (0, _buntest.test)('should update one item in an array', ()=>{
+        const t = new _totallytubular.Tubular({
+            ...makeInitialState(),
+            animals: [
+                'beagle',
+                'corgie',
+                'dachshund'
+            ]
+        });
+        t.update('animals', (prev)=>prev.toSpliced(1, 1, 'yorkie'));
+        (0, _buntest.expect)(t.read('animals')).toStrictEqual([
+            'beagle',
+            'yorkie',
+            'dachshund'
+        ]);
+    });
+    (0, _buntest.test)('should observe and then disconnect', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const foodOb = _buntest.vi.fn();
+        const pizzaOb = _buntest.vi.fn();
+        t.observe('food.pasta', foodOb);
+        t.observe('food.pizza', pizzaOb);
+        t.update('food.pasta', (prev)=>!prev);
+        t.update('food.pizza', (prev)=>!prev);
+        t.unobserve('food.pasta', foodOb);
+        t.update('food.pasta', (prev)=>!prev);
+        t.update('food.pizza', (prev)=>!prev);
+        (0, _buntest.expect)(t.read('food.pasta')).toBeFalsy();
+        (0, _buntest.expect)(t.read('food.pizza')).toBeTruthy();
+        (0, _buntest.expect)(foodOb).toHaveBeenCalledTimes(1);
+        (0, _buntest.expect)(pizzaOb).toHaveBeenCalledTimes(2);
+    });
+    (0, _buntest.test)('should observe an array and object', ()=>{
+        const t = new _totallytubular.Tubular(makeInitialState());
+        const animalsOb = _buntest.vi.fn();
+        const drinkOb = _buntest.vi.fn();
+        t.observe('animals', animalsOb);
+        t.observe('drink', drinkOb);
+        t.update('animals', (prev)=>[
+                ...prev,
+                'dogs'
+            ]);
+        t.update('animals', (prev)=>[
+                ...prev,
+                'more dogs'
+            ]);
+        t.update('drink', (prev)=>({
+                ...prev,
+                beer: false,
+                kind: 'water'
+            }));
+        t.update('drink', (prev)=>({
+                ...prev,
+                beer: true,
+                kind: 'is not beer'
+            }));
+        (0, _buntest.expect)(animalsOb).toHaveBeenNthCalledWith(1, [
+            'dogs'
+        ], [], 'animals');
+        (0, _buntest.expect)(animalsOb).toHaveBeenNthCalledWith(2, [
+            'dogs',
+            'more dogs'
+        ], [
+            'dogs'
+        ], 'animals');
+        (0, _buntest.expect)(drinkOb).toHaveBeenNthCalledWith(1, {
+            beer: false,
+            kind: 'water'
+        }, {
+            beer: true,
+            kind: 'guiness'
+        }, 'drink');
+        (0, _buntest.expect)(drinkOb).toHaveBeenNthCalledWith(2, {
+            beer: true,
+            kind: 'is not beer'
+        }, {
+            beer: false,
+            kind: 'water'
+        }, 'drink');
+    });
+});

package/dist/cjs/totally-tubular.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});