style: implement PR suggestions

Author: bennypowers

Diff for: docs/basics/descriptor.md

@@ -65,11 +65,11 @@ get: (host: Element, lastValue: any) => {
 }
 ```
 
-* **arguments**:
-  * `host` - an element instance
-  * `lastValue` - last cached value of the property
-* **returns (required)**:
-  * `nextValue` - a value of the current state of the property
+- **arguments**:
+  - `host` - an element instance
+  - `lastValue` - last cached value of the property
+- **returns (required)**:
+  - `nextValue` - a value of the current state of the property
 
 `get` calculates the current property value. The returned value is always cached. The cache mechanism works between properties defined by the library (even between different elements). If your `get` method does not use other properties, it won't be called again (then, the only way to update the value is to assert new value or call `invalidate` from `connect` method).
 
@@ -79,8 +79,8 @@ In the following example, the `get` method of the `name` property is called agai
 
 ```javascript
 const MyElement = {
-  firstName: 'John',
-  lastName: 'Smith',
+  firstName: "John",
+  lastName: "Smith",
   name: {
     get: ({ firstName, lastName }) => `${firstName} ${lastName}`,
   },
@@ -102,12 +102,12 @@ set: (host: Element, value: any, lastValue: any) => {
 }
 ```
 
-* **arguments**:
-  * `host` - an element instance
-  * `value` - a value passed to assertion (ex., `el.myProperty = 'new value'`)
-  * `lastValue` - last cached value of the property
-* **returns (required)**:
-  * `nextValue` - a value of the property, which replaces cached value
+- **arguments**:
+  - `host` - an element instance
+  - `value` - a value passed to assertion (ex., `el.myProperty = 'new value'`)
+  - `lastValue` - last cached value of the property
+- **returns (required)**:
+  - `nextValue` - a value of the property, which replaces cached value
 
 Every assertion of the property calls `set` method (like `myElement.property = 'new value'`). If returned `nextValue` is not equal to `lastValue`, cache of the property invalidates. However, `set` method does not trigger `get` method automatically. Only the next access to the property (like `const value = myElement.property`) calls `get` method. Then `get` takes `nextValue` from `set` as the `lastValue` argument, calculates `value` and returns it.
 
@@ -118,7 +118,7 @@ const MyElement = {
   power: {
     set: (host, value) => value ** value,
   },
-}
+};
 
 myElement.power = 10; // calls 'set' method and set cache to 100
 console.log(myElement.power); // Cache returns 100
@@ -142,12 +142,12 @@ connect: (host: Element, key: string, invalidate: Function) => {
 }
 ```
 
-* **arguments**:
-  * `host` - an element instance
-  * `key` - a property key name
-  * `invalidate` - a callback function, which invalidates cached value
-* **returns (not required):**
-  * `disconnect` - a function (without arguments)
+- **arguments**:
+  - `host` - an element instance
+  - `key` - a property key name
+  - `invalidate` - a callback function, which invalidates cached value
+- **returns (not required):**
+  - `disconnect` - a function (without arguments)
 
 When you insert, remove or relocate an element in the DOM tree, `connect` or `disconnect` is called synchronously (in the `connectedCallback` and `disconnectedCallback` callbacks of the Custom Elements API).
 
@@ -156,21 +156,21 @@ You can use `connect` to attach event listeners, initialize property value (usin
 If the third party code is responsible for the property value, you can use `invalidate` callback to notify that value should be recalculated (within next access). For example, it can be used to connect to async web APIs or external libraries:
 
 ```javascript
-import reduxStore from './store';
+import reduxStore from "./store";
 
 const MyElement = {
   name: {
     get: () => reduxStore.getState().name,
-    connect: (host, key, invalidate) => reduxStore.subscribe(() => invalidate()),
+    connect: (host, key, invalidate) => reduxStore.subscribe(invalidate),
   },
 };
 ```
 
 `invalidate` can take an options object argument.
 
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| force  | `boolean` | false | When true, the invalidate call will always trigger a rerender, even if the property's identity has not changed. |
+| Option | Type      | Default | Description                                                                                                     |
+| ------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| force  | `boolean` | false   | When true, the invalidate call will always trigger a rerender, even if the property's identity has not changed. |
 
 > Click and play with [redux](redux.js.org) library integration example:
 >
@@ -187,10 +187,10 @@ observe: (host: Element, value: any, lastValue: any) => {
 }
 ```
 
-* **arguments**:
-  * `host` - an element instance
-  * `value` - current value of the property
-  * `lastValue` - last cached value of the property
+- **arguments**:
+  - `host` - an element instance
+  - `value` - current value of the property
+  - `lastValue` - last cached value of the property
 
 When property cache invalidates (directly by the assertion or when one of the dependency invalidates) and `observe` method is set, the change detection mechanism adds the property to the internal queue. Within the next animation frame (using `requestAnimationFrame`) properties from the queue are checked if they have changed, and if they did, `observe` method of the property is called. It means, that `observe` method is asynchronous by default, and it is only called for properties, which value is different in the time of execution of the queue (in the `requestAnimationFrame` call).
 

Diff for: src/cache.js

@@ -189,12 +189,11 @@ function deleteEntry(entry) {
   gcList.add(entry);
 }
 
-function invalidateEntry(entry, options = {}) {
+function invalidateEntry(entry, options) {
   entry.depState = 0;
   dispatchDeep(entry);
 
   if (options.clearValue) {
-    entry.value = undefined;
     values.delete(entry);
   }
 
@@ -207,7 +206,7 @@ function invalidateEntry(entry, options = {}) {
   }
 }
 
-export function invalidate(target, key, options) {
+export function invalidate(target, key, options = {}) {
   if (contexts.size) {
     throw Error(
       `Invalidating property in chain of get calls is forbidden: '${key}'`,
@@ -218,7 +217,7 @@ export function invalidate(target, key, options) {
   invalidateEntry(entry, options);
 }
 
-export function invalidateAll(target, clearValue, deleteValue) {
+export function invalidateAll(target, options = {}) {
   if (contexts.size) {
     throw Error(
       "Invalidating all properties in chain of get calls is forbidden",
@@ -228,7 +227,7 @@ export function invalidateAll(target, clearValue, deleteValue) {
   const targetMap = entries.get(target);
   if (targetMap) {
     targetMap.forEach(entry => {
-      invalidateEntry(entry, { clearValue, deleteEntry: deleteValue });
+      invalidateEntry(entry, options);
     });
   }
 }

Diff for: src/children.js

@@ -27,7 +27,7 @@ export default function children(
       return walk(host, fn, options);
     },
     connect(host, key, invalidate) {
-      const observer = new MutationObserver(() => invalidate());
+      const observer = new MutationObserver(invalidate);
 
       observer.observe(host, {
         childList: true,

Diff for: src/define.js

@@ -73,7 +73,9 @@ function compile(Hybrid, descriptors) {
     if (config.connect) {
       callbacks.push(host =>
         config.connect(host, key, options => {
-          cache.invalidate(host, key, options);
+          cache.invalidate(host, key, {
+            force: options && options.force === true,
+          });
         }),
       );
     }

Diff for: src/parent.js

@@ -26,7 +26,7 @@ export default function parent(hybridsOrFn) {
     connect(host, key, invalidate) {
       const target = host[key];
       if (target) {
-        return () => invalidate();
+        return invalidate;
       }
       return false;
     },

Diff for: src/store.js

@@ -1047,7 +1047,7 @@ function clear(model, clearValue = true) {
         "Model definition must be used before - passed argument is probably not a model definition",
       );
     }
-    cache.invalidateAll(bootstrap(model), clearValue, true);
+    cache.invalidateAll(bootstrap(model), { clearValue, deleteEntry: true });
   }
 }
 

Diff for: test/spec/cache.js

@@ -185,7 +185,7 @@ describe("cache:", () => {
 
       expect(getEntries(target).length).toBe(1);
 
-      invalidateAll(target, true);
+      invalidateAll(target, { clearValue: true });
       expect(getEntries(target)).toEqual([
         jasmine.objectContaining({
           value: undefined,

Diff for: test/spec/define.js

@@ -357,7 +357,7 @@ describe("define:", () => {
           one: "text",
           two: {
             get: () => "test",
-            observe: () => spy(),
+            observe: spy,
           },
         };
 
@@ -377,18 +377,18 @@ describe("define:", () => {
 
     it("updates elements in shadowRoot", done => {
       test("<div></div>")(el => {
-        const connectSpy = jasmine.createSpy();
+        const connect = jasmine.createSpy();
 
         el.attachShadow({ mode: "open" });
         const child = document.createElement("test-define-multiple");
         el.shadowRoot.appendChild(child);
 
         define("test-define-multiple", {
-          one: { get: () => "text", connect: () => connectSpy() },
+          one: { get: () => "text", connect },
         });
 
         return Promise.resolve().then(() => {
-          expect(connectSpy).toHaveBeenCalledTimes(1);
+          expect(connect).toHaveBeenCalledTimes(1);
           expect(child.one).toBe("text");
         });
       })(done);

Diff for: types/index.d.ts

@@ -4,8 +4,6 @@ export as namespace hybrids;
 
 declare namespace hybrids {
   interface InvalidateOptions {
-    clearValue?: boolean;
-    deleteEntry?: boolean;
     force?: boolean;
   }