skandha 0.7.0 → 0.9.0

package/README.md

@@ -4,101 +4,70 @@
 
 The goal of SkandhaJS is to provide data containers that have reusable behaviors, such as
 selection, highlighting, filtering, drag-and-drop, etc. The only requirement for using these containers is
-that every item in the container has a unique id. When combining behaviors in a container, you need to
-make sure that they interact properly. For example, when selecting an item you may want the item also to
+that every item in the container has a unique id. SkandhaJS allows you to combine behaviors and make them interact properly. For example, when selecting an item you may want the item also to
 be highlighted. As we will see, these interactions are achieved by implementing callback functions.
 
----
-
-**NOTE**
-
-In a Skandha container, behaviors are implemented using classes that are called facets, and they are found by their class name. The recommendation is to add a `static className` function to each facet class. If you omit this function, then Skandha will use the automatically generated class name, which can cause problems with the mangling of classnames in your minification tool.
-
----
-
 ## Links
 
 - The [skandha](http://github.com/mnieber/skandha) library contains the basic building blocks
 - The [skandha-facets](http://github.com/mnieber/skandha-facets) library contains useful facets such as selection, highlight, filtering, addition, etc.
 - The [skandha-mobx](http://github.com/mnieber/skandha-mobx) library contains bindings to MobX
 - The [aspiration](http://github.com/mnieber/aspiration) library handles aspect oriented programming (AOP)
+- The [example code](http://github.com/mnieber/skandha-sample-app) shown in this README.
 
-## Example code
+## Snippet
 
-The full example code for this README can be found [here](http://github.com/mnieber/skandha-sample-app). Note that this repository
-contains two version of the example code. The first version creates all the behaviours from scratch. Although it gives a good insight into
-the Skandha principles, the code will look bulky. The second version is reflective of a real use-case as it uses the reusable behaviours
-from [skandha-facets](http://github.com/mnieber/skandha-facets).
+```
+// file: Selection.ts
+import { input, output, operation } from 'skandha';
+import { host, stub } from 'aspiration';
 
-## Explanation
+export type SelectionParamsT = { itemId?: string; isShift?: boolean; isCtrl?: boolean; };
 
-### The Selection facet
+export class Selection<ValueT = any> {
+  static className = () => 'Selection';
 
-As mentioned above, behaviors in Skandha are implemented as classes that are called facets. Let's start by looking at a reusable
-Selection facet. Before we show how it's implemented, here is an example of using it to select a range of
-items from id `2` to id `5`:
+  @input selectableIds: Array<string> = stub();
+  @output ids: Array<string> = [];
+  @output anchorId?: string;
+  @output items: Array<ValueT> = stub();
 
+  @operation @host(['selectionParams'], selectItemDefaultCbs) selectItem(
+    selectionParams: SelectionParamsT
+  ) {
+    return (cbs: Selection_selectItem) => {
+      cbs.select();
+    };
+  }
+}
 ```
-const ctr = createContainer();
-ctr.selection.selectableIds = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 
-ctr.selection.selectItem({itemId: "2"});
-ctr.selection.selectItem({itemId: "5", isShift: true});
-console.log(ctr.selection.ids);
-```
+## Fact: the Selection facet has input, data and output members
 
-Note that the key function call here is `selection.selectItem`. Let's look at how it's implemented. First of all, we need a type that holds the selection parameters:
+In the snippet above we see a so-called Facet class. A facet class implements a reusable behaviour. The `Selection` facet stores a list of selectable ids and has a `selectItem` function that allows you to select from those ids. The result of the selection is stored in the `ids`, `anchorId` and `items` fields. Note that `selectItem` is an empty function. The exact method for doing the selection is determined by a callback function, as we shall see later.
 
-```
-export type SelectionParamsT = {
-  itemId: string | undefined;
-  isShift?: boolean;
-  isCtrl?: boolean;
-};
-```
+## Fact: the Selection facet has a static className function
+
+Various facets are usually combined in a single container. To allow you to look up a facet by it's name, each facet class implements the static `className` function.
+
+## Fact: the `selectItem` function uses a callback function
+
+We shall see later how callbacks are installed in a facet. For now, it's sufficient to understand that `selectItem` (the host function) executes the `cbs.selectItem()` callback function. This callback function will have access to all parameters of the host function (in this case: `selectionParams`).
 
-The next step is less obvious: we define a helper class that declares the arguments and callbacks of
-`selection.selectItem`. Why is this needed? The reason for using a callback function is that we
-don't want to hard code how selection is performed (e.g. what the effect of the shift and ctrl key is),
-because this would limit the reusability. The reason for storing the arguments of `selection.selectItem`
-is that this makes it easier to pass these arguments to other functions that want to use
-them. For example, if a side-effect of selection is to highlight the item, then we
-would like to pass the `SelectionParamsT` instance also to a `highlightSelectedItem` policy function
-(this will be explained in detail later). The helper class looks like this:
+## Snippet
 
 ```
+// file: Selection.ts
 export class Selection_selectItem extends Cbs {
   selectionParams: SelectionParamsT = stub();
   select() {}
 }
 ```
 
-Next, we add the `Selection` class itself that has a `selectItem` function that checks the selection
-parameters and then calls the `select` callback function.
-
 ```
-class Selection<ValueT> {
-  @data selectableIds: Array<string> = stub();
-  @data ids: Array<string> = [];
-  @data anchorId?: string;
-  @data items?: Array<ValueT>;  // ignore this field for now...
+// file: createContainer.ts
+import { registerCtr } from 'skandha';
 
-  @operation @host selectItem(selectionParams: SelectionParamsT) {
-    return (cbs: Selection_selectItem) => {
-      if (!this.selectableIds.includes(selectionParams.itemId)) {
-        throw Error(`Invalid id: ${selectionParams.itemId}`);
-      }
-      cbs.select();
-    }
-  }
-}
-```
-
-And finally, we add the `createContainer` function that creates a `Selection` instance and implements
-the `select` callback. We don't show the code of `handleSelectItem`, but you can see it
-[here](https://github.com/mnieber/skandha-facets/blob/main/Selection.ts).
-
-```
 const createContainer() {
   const ctr = {
     selection: new Selection()
@@ -112,47 +81,94 @@ const createContainer() {
     }
   });
 
+  // If you omit `members` then all fields of `ctr` are included.
+  registerCtr(ctr, { name: 'TodosCtr', members: ['selection'] });
   return ctr;
 }
 ```
 
-Notes:
+## Fact: a Cbs class defines a set of callbacks
+
+In the above snippet we see that the `Selection_selectItem` class defines the callbacks that can be installed for the `selectItem` function of the `Selection` facet. This class also defines the parameters that are received by the host function and made available to each callback.
+
+## Fact: the setCallbacks function installs the callbacks for the Selection facet
+
+In the same snippet we see that `setCallbacks` is called to install the `select` callback function. This callback function forwards to a helper function called `handleSelectItem`. Note that the `Selection_selectItem` instance is available through the `this` constant.
+
+## Fact: the registerCtr function registers the container with SkandhaJS
 
-- The `@host` decorator comes from the [Aspiration](http://github.com/mnieber/aspiration) library.
-- The `stub` function is used in callback objects to indicate that although the field is initialized with `undefined` it will receive a value later.
+The purpose of calling registerCtr on the container is twofold:
 
-## Combining Selection with Highlight
+- it makes it possible to look up a facet by its name or class, e.g. `getf(ctr, Selection)` returns `ctr.selection`.
+- it tells SkandhaJS what facets should be included in log reports. When the client calls any facet function that is decorated with @operation then SkandhaJS will log the entire container before and after the operation was executed. Logging can be enabled using the `setOptions` function.
 
-So far, we have shown a rather indirect implementation of selection. This indirect approach becomes useful
-when we add a second facet: Highlight. We will extend the example such that when the user selects an item,
-it will also be highlighted. The same approach can be used to make sure that the Filtering and Highlight
-facets work well together: if the filter is enabled, the highlight moves to an item that is not hidden by the
-filter. In general, there are many possibilities to create complex behaviors this way.
+## Snippet: the handleSelectItem functon
 
-Let's start by looking at the code of the `Highlight` facet:
+```
+// file: handleSelectItem.ts
+export function handleSelectItem(
+  facet: Selection,
+  { itemId, isShift, isCtrl }: SelectionParamsT
+) {
+  if (itemId === undefined) {
+    facet.ids = [];
+    facet.anchorId = undefined;
+    return;
+  }
 
+  if (isShift) {
+    // Omitted for brevity
+  } else if (isCtrl) {
+    facet.ids = facet.ids.includes(itemId)
+      ? facet.ids.filter((x) => x !== itemId)
+      : [...facet.ids, itemId];
+  } else {
+    facet.ids = [itemId];
+  }
+
+  // Move the anchor
+  if (!facet.anchorId || !(isCtrl || isShift)) {
+    facet.anchorId = itemId;
+  }
+}
 ```
+
+## Fact: the handleSelectItem does the actual work of selecting items
+
+For completeness, we show how `handleSelectItem` is implemented. Note that this function stores the results directly in the selection facet instance.
+
+## Snippet: the Highlight facet
+
+```
+// file: Highlight.ts
 export class Highlight_highlightItem extends Cbs {
   id: string = stub();
   scrollItemIntoView() {}
 }
 
 export class Highlight<ValueT = any> {
-  @data id: string | undefined;
-  @data item?: ValueT;  // ignore this field for now...
+  @data id?: string;
+  @data item?: ValueT;
 
-  @operation @host highlightItem(id: string) {
+  @operation @host(["id"]) highlightItem(id: string) {
     return (cbs: Highlight_highlightItem) => {
       this.id = id;
-      maybe(cbs.scrollItemIntoView).bind(cbs)();
+      if (cbs.scrollItemIntoView) {
+        cbs.scrollItemIntoView();
+      }
     };
   }
 }
 ```
 
-We can now update `createContainer` with the `Highlight` facet:
+## Fact: the `Highlight` facet implements the highlight behaviour
+
+The `Highlight` snippet has a similar structure as the `Selection` facet. It has a callback function for scrolling the highlighted item into view. Note that the `highlightItem` function does not set the `item` field, because the facet only deals with ids. We shall later see how the `item` field is set by looking up the item in an external collection.
+
+## Snippet: a container with Selection and Highlight
 
 ```
+// file: createContainer.ts
 const createContainer() {
   const ctr = {
     selection: new Selection(),
@@ -163,9 +179,13 @@ const createContainer() {
     selectItem: {
       select(this: Selection_selectItem): {
         handleSelectItem(ctr.selection, this.selectionParams);
+
         if (!this.selectionParams.isShift && !this.selectionParams.isCtrl) {
           ctr.highlight.highlightItem(this.selectionParams.itemId);
         }
+
+        // The above 3 lines could be extracted in a reusable helper function, e.g.
+        // highlightFollowsSelection(ctr, this.selectionParams);
       },
     }
   });
@@ -173,37 +193,14 @@ const createContainer() {
   return ctr;
 ```
 
-### Adding the Filtering facet
-
-Now, let's add filtering. For brevity, the definition of `Filtering_apply` and `Filtering_enable`
-is skipped. Also, we assume that the logic for highlighting the select item is captured in a policy
-function called `highlightFollowsSelection`, and that `highlightIsCorrectedOnFilterChange` ensures
-that there is still a highlighted item when the filter changes.
-
-```
-export class Filtering<ValueT = any> {
-  @data isEnabled: boolean = false;
-  @data filter: FilterT = (ValueT[]) => [];
-  @data inputItems?: Array<ValueT>;
-
-  @data get filteredItems() {
-    return this.isEnabled ? this.filter(this.inputItems) : this.inputItems;
-  }
+## Fact: callbacks allow you to create co-ordinated behaviours
 
-  @operation @host apply(filter: FilterT) {
-    return (cbs: Filtering_apply) => {
-      this.filter = filter;
-      this.isEnabled = true;
-    };
-  }
+Above we see for the first time how SkandhaJS helps you to create co-ordinated behaviours. When the client calls `ctr.selection.selectItem` and the `select` callback is executed, then the callback ensures that the selected item is also highlighted. As the comment in the snippet suggests, we can make the body of the `select` callback more readable by extracting some of the code in a `highlightFollowsSelection` helper function.
 
-  @operation @host setEnabled(flag: boolean) {
-    return (cbs: Filtering_setEnabled) => {
-      this.isEnabled = flag;
-    };
-  }
-}
+## Snippet: a container with Selection, Highlight and Filtering
 
+```
+// file: createContainer.ts
 const createContainer() {
   const ctr = {
     selection: new Selection(),
@@ -232,129 +229,49 @@ const createContainer() {
 }
 ```
 
-Notes:
-
-- There are special callback functions called `enter` and `exit` that are called at the
-  beginning and end of the operation function. An example of using the `exit` callback is shown
-  above.
-
-### Mapping data onto the container, and between facets
-
-At this point we have a container with facets that perform useful operations, and that interact
-to achieve interesting behaviours. However, we took a shortcut by hard coding the value of
-`Selection.selectableIds`, and also we forgot to set the value of `Filtering.inputItems`. Skandha
-comes with data mapping functions for this purpose. Let's extend the container with input
-and output data structures:
-
-```
-const createContainer() {
-  // we keep all the existing code that was added above
-
-  ctr['inputs'] = {
-    todoById: {[id: string]: TodoT} = loadTodos();
-  };
-
-  ctr['outputs'] = {
-    filteredTodoById: {[id: string]: TodoT} = {};
-  };
+## Fact: the `exit` callback function is called at the end of the host function
 
-  registerFacets(ctr, { name: 'TodosCtr' });
-  return ctr;
-```
+In the snippet we add a filtering facet that has an `apply` host function. In this host function, we can install an `exit` callback that corrects the highlight when the filter changes (because the filter may hide the highlighted item). The `exit` callback is called at the end of the host function. Similarly, the `enter` callback is called at the beginning.
 
-Note the call to `registerFacets`, which is needed for the data mapping functions that we are about to introduce.
-As a first step, we need to connect `Filtering.inputItems` to `Inputs.todoById` and `Outputs.filteredTodoById`.
-We can think of this as setting up a pipeline, where one of more source facet members are mapped onto a destination
-facet member:
+## Snippet: mapping data onto each facet
 
 ```
-mapDataToFacet(
-  ['filtering', 'inputItems'],
-  getm(['inputs', 'todoById']),
-  (x: TodoByIdT) => Object.values(x)
-)(ctr);
-
-const listToItemById = items => items.reduce((acc: any, x: TodoT) => ({ ...acc, [x.id]: x }), {})
-
-mapDataToFacet(
-  ['outputs', 'filteredTodoById'],
-  getm(['filtering', 'filteredItems']),
-  listToItemById,
-)(ctr);
-```
-
-Notes:
-
-- the first argument to `mapDataToFacet` is a reference to the the facet member that receives the data. SkandhaJS will patch the
-  facet, which - in the above example - means replacing the `inputItems` of `ctr.filtering` with a `get inputItems()` property.
-- the second argument to `mapDataToFacet` is a getter function that takes the container and returns some data.
-  In this case, it uses the `getm` helper function to return `ctr.inputs.todoById`.
-- the third argument is a transformation that is applied to the result of the getter function. In this case,
-  it means that `get inputItems()` returns `Object.values(getm(Inputs, 'todoById')(ctr))`.
-- in the calls to `mapDataToFacet`, we have to be careful to correctly spell the facet member names, such as 'filtering'.
-  It's also possible to use a class instead of a member name. For example, we could replace `['filtering', 'inputItems']` with
-  `[Filtering, 'inputItems']`.
-
-As the next step, we will connect the list of filtered items to `Selection.selectableIds` (so that selection
-happens in the filtered list). In addition, we will add datamappings for `Selection.items`
-and `Highlight.item` (these data mappings allow us to not only access the ids, but also the items themselves):
+// file: createContainer.ts
+import * from 'ramda' as R;
+
+const connectContainer(ctr: any) {
+  const inputs = { todos: loadTodos() };
+  const outputs = { filteredTodoById: {} };
+
+  const con = createConnector({
+    selection: () => ctr.selection,
+    highlight: () => ctr.highlight,
+    filtering: () => ctr.filtering`,
+    inputs: () => inputs,
+    outputs: () => outputs,
+  });
 
-```
-mapDataToFacet(
-  ['selection', 'selectableIds'],
-  getm(['outputs', 'filteredTodoById']),
-  (x: TodoByIdT) => Object.keys(x)
-)(ctr);
-
-mapDatasToFacet(
-  ['selection', 'items'],
-  [
-    getm(['selections', 'ids']),
-    getm(['inputs', 'todoById']),
-  ],
-  (ids: string[], todoById: TodoByIdT) => ids.map((id) => todoById[id])
-)(ctr);
-
-mapDatasToFacet(
-  [Highlight, 'item'],
-  [
-    getm([Highlight, 'id']),
-    getm([Inputs, 'todoById']),
-  ],
-  (id: string, todoById: TodoByIdT) => todoById[id]
-)(ctr);
-```
+  const lookUpTodo = (id: string) => outputs.filteredTodoById[id];
 
-We are done: the facets in the container are connected. Note that if we put these mapping policies in a reusable
-library then we can shorten the code to the following:
+  con.filtering.inputItems = con.inputs.todos;
+  con.outputs.filteredTodoById = con.filtering.filteredItems.tf(R.indexBy('id));
+  con.selection.selectableIds = con.outputs.filteredTodoById.tf(R.keys);
+  con.selection.item = con.selection.ids.tf(lookUpTodos);
+  con.highlight.item = con.highlight.id.tf(lookUpTodo);
 
+  con.connect();
 ```
-const filteredTodoById = ['outputs', 'filteredTodoById'];
-const inputTodoById = ['inputs', 'todoById'];
-const filteredItems = ['filtering', 'filteredItems'];
-
-const policies = [
-  // selection
-  selectionUsesSelectableIds(filteredTodoById, Object.keys),
-  selectionUsesItemLookUpTable(inputTodoById),
 
-  // highlighting
-  highlightUsesItemLookUpTable(inputTodoById),
+## Fact: the Connector class maps data between objects
 
-  // filtering
-  filteringUsesInputItems(inputTodoById, Object.values),
-  mapDataToFacet(filteredTodoById, getm(filteredItems), listToItemById),
-]
-
-installPolicies<TodosCtr>(policies, ctr);
-```
+The Connector instance allows you to map data from one object onto another object. In our example, the `inputs.todos` field is mapped onto the `filtering.inputItems` field. What the `Connector` class does is turn `filtering.inputItems` into a `get` property that returns `filtering.inputItems`.
+The snippet contains three steps. In the first step we declare the objects, such as `selection`, `filtering`, etc. For each object, we specify the getter function that returns the object. In the second step, we declare relations between the different fields of these objects. In this step, we can also declare one or more transformation functions (such as `lookUpTodo`) that should be used in the mapping. In the final step, we call `con.connect` to create the `get` properties that perform the declared mappings.
 
 ### Logging
 
-By calling `setOptions({logging: true})`, the Skandha library allows you to inspect each facet before and
-after calling an operation (remember that an operation is any facet member function decorated with @operation).
-This will log Facet members that are decorated with `@data` in a way that looks similar to what you are
-used to from Redux:
+By calling `setOptions({logging: true})`, the SkandhaJS library allows you to inspect each facet before and
+after calling an operation. An operation is any facet member function decorated with @operation.
+This will log Facet members that are decorated with `@data` (or `@input`, or `@output`) in a way that looks similar to what you are used to from Redux:
 
 - before and after each operation, the entire container that holds the facet is logged
 - all data members of each facet in the container are included in the log
@@ -365,20 +282,15 @@ used to from Redux:
 If you want to render the facets with React then we need to let React know when data changes.
 The [skandha-mobx](http://github.com/mnieber/skandha-mobx) library was created for this purpose.
 It has a `registerCtr` function that turns each `@data` member into a Mobx property that is
-either observable or computed (this function call replaces the call to `registerFacets`):
+either observable or computed:
 
 ```
 registerCtr({
   ctr: ctr,
-  details: {
-    name: 'TodosCtr',
-  },
+  options: { name: 'TodosCtr'},
 });
 ```
 
-This means that by decorating your render function with `observer` you will get a re-render for any changes
-(in observable facet members) in the container.
-
 ## Conclusion
 
 SkandhaJS introduces a lot of new patterns and ideas (that are of course not in fact new) to allow you to
@@ -389,5 +301,4 @@ a policy that says that changing the highlight disables editing. By using facets
 editing-specific code directly in the highlight function (that would obviously be mixing concerns).
 
 In my experience, using SkandhaJS leads to code reuse and improved structure. On top of that, it offers a good
-debugging experience (yes, you will still have to debug) by logging all changes in the container. Finally,
-it works nicely with MobX to render the container contents.
+debugging experience by logging all changes in the container. Finally, it works nicely with MobX to render the container contents.

package/index.d.ts

@@ -1,12 +1,12 @@
 export { getCtrState } from './internal/logging';
 export { getOptions, setOptions } from './internal/options';
+export { createConnector } from './lib/Connector';
 export { getc, getFacetMemberNames } from './lib/ctr';
 export { data, getDataMemberNames, getLoggedMemberNames, input, log, output, } from './lib/data';
-export { facet, getf, getm, registerFacets } from './lib/facet';
+export { getf } from './lib/facet';
 export { installPolicies } from './lib/install';
 export { getOperationMemberNames, operation } from './lib/operation';
-export { mapDatasToFacet, mapDataToFacet, mapDataToProp, patchFacet, } from './lib/patch';
+export { mapDataToProp } from './lib/patch';
+export { registerCtr } from './lib/registerCtr';
+export type { OptionsT as RegisterCtrOptionsT } from './lib/registerCtr';
 export declare type ClassT = any;
-export declare type MemberNameT = string;
-export declare type ClassMemberT = [ClassT, MemberNameT, any?];
-export declare type GetterT<T = any> = (ctr: any) => T;

package/index.js

@@ -1,8 +1,10 @@
 export { getCtrState } from './internal/logging';
 export { getOptions, setOptions } from './internal/options';
+export { createConnector } from './lib/Connector';
 export { getc, getFacetMemberNames } from './lib/ctr';
 export { data, getDataMemberNames, getLoggedMemberNames, input, log, output, } from './lib/data';
-export { facet, getf, getm, registerFacets } from './lib/facet';
+export { getf } from './lib/facet';
 export { installPolicies } from './lib/install';
 export { getOperationMemberNames, operation } from './lib/operation';
-export { mapDatasToFacet, mapDataToFacet, mapDataToProp, patchFacet, } from './lib/patch';
+export { mapDataToProp } from './lib/patch';
+export { registerCtr } from './lib/registerCtr';

package/internal/utils.d.ts

@@ -1,6 +1,5 @@
 export declare function getOrCreate(obj: any, key: any, fn: any): any;
 export declare const zip: (arr: any, ...arrs: any) => any;
-export declare function getCtrClassAdmin(ctrClass: any): any;
 export declare function getCtrAdmin(ctr: any): any;
 export declare function getFacetClassAdmin(facetClass: any): any;
 export declare function getFacetAdmin(facet: any): any;

package/internal/utils.js

@@ -23,9 +23,6 @@ export var zip = function (arr) {
         return arrs.reduce(function (a, arr) { return __spreadArray(__spreadArray([], a, true), [arr[i]], false); }, [val]);
     });
 };
-export function getCtrClassAdmin(ctrClass) {
-    return getOrCreate(ctrClass, symbols.admin, function () { return ({}); });
-}
 export function getCtrAdmin(ctr) {
     return getOrCreate(ctr, symbols.admin, function () { return ({}); });
 }

package/lib/Connector.d.ts

@@ -0,0 +1,5 @@
+declare type FunctionByNameT = {
+    [name: string]: Function;
+};
+export declare const createConnector: (entities: FunctionByNameT) => any;
+export {};

package/lib/Connector.js

@@ -0,0 +1,98 @@
+import { mapDataToProp } from './patch';
+var Connector = /** @class */ (function () {
+    function Connector(entities, options) {
+        var _this = this;
+        var _a;
+        this.entityByName = {};
+        this.connect = function () {
+            for (var _i = 0, _a = Object.values(_this.entityByName); _i < _a.length; _i++) {
+                var entity = _a[_i];
+                _this._connectEntity(entity);
+            }
+        };
+        this._connectEntity = function (entity) {
+            var _loop_1 = function (entry) {
+                var name_1 = entry[0], field = entry[1];
+                var obj = entity.getObj();
+                if (_this.options.strict && !(name_1 in obj)) {
+                    throw new Error("Cannot override the field ".concat(name_1, " in ").concat(obj, ".") +
+                        'Field not found. Disable strict mode to ignore this error.');
+                }
+                mapDataToProp(obj, name_1, function () {
+                    return field.getSource();
+                });
+            };
+            for (var _i = 0, _a = Object.entries(entity.fieldByName); _i < _a.length; _i++) {
+                var entry = _a[_i];
+                _loop_1(entry);
+            }
+        };
+        this.options = {
+            strict: (_a = options === null || options === void 0 ? void 0 : options.strict) !== null && _a !== void 0 ? _a : true,
+        };
+        for (var _i = 0, _b = Object.entries(entities); _i < _b.length; _i++) {
+            var entry = _b[_i];
+            var name_2 = entry[0], getObj = entry[1];
+            this.entityByName[name_2] = new Entity(getObj);
+        }
+    }
+    return Connector;
+}());
+export var createConnector = function (entities) {
+    var con = new Connector(entities);
+    return new Proxy(con, {
+        get: function (target, key) {
+            // Code example:
+            //
+            // const con = createConnector({ foo: () => myFoo });
+            //
+            // When you call `con.foo` then you
+            // receive `con.entityByName.foo.fieldByName`.
+            //
+            // con.foo.bar = 5;  // Equivalent to: con.entityByName.foo.fieldByName.bar = 5
+            //
+            // When you call `con.connect` then a normal lookup of the `connect`
+            // member in `con` is performed.
+            var _a, _b;
+            return (_b = (_a = target.entityByName[key]) === null || _a === void 0 ? void 0 : _a.fieldByName) !== null && _b !== void 0 ? _b : target[key];
+        },
+    });
+};
+var Entity = /** @class */ (function () {
+    function Entity(getObj) {
+        var _this = this;
+        this.getObj = getObj;
+        this.fieldByName = new Proxy({}, {
+            get: function (target, key) {
+                var _a;
+                return (_a = target[key]) !== null && _a !== void 0 ? _a : new Field(_this, key);
+            },
+        });
+    }
+    return Entity;
+}());
+var Field = /** @class */ (function () {
+    function Field(entity, name) {
+        var _this = this;
+        this.transforms = [];
+        this.getSource = function () {
+            var obj = _this.entity.getObj();
+            if (!(_this.name in obj)) {
+                throw new Error("Field ".concat(_this.name, " does not exist on object ").concat(obj));
+            }
+            var result = obj[_this.name];
+            for (var _i = 0, _a = _this.transforms; _i < _a.length; _i++) {
+                var tf = _a[_i];
+                result = tf(result);
+            }
+            return result;
+        };
+        this.entity = entity;
+        this.name = name;
+    }
+    Field.prototype.tf = function (transform) {
+        this.transforms.push(transform);
+        return this;
+    };
+    return Field;
+}());

package/lib/facet.d.ts

@@ -1,10 +1,3 @@
-import { ClassMemberT, ClassT, GetterT } from '..';
-export declare function facet(facetHost: any, facetMember: any, descriptor?: undefined): undefined;
+import { ClassT } from '..';
 export declare function facetClassName(facetClass: ClassT): any;
-export declare function registerFacets(ctr: any, options: {
-    name?: string;
-    members?: string[];
-    ctrState?: Function;
-}): void;
 export declare function getf(facetClass: ClassT | string, ctr?: any): any;
-export declare function getm<T = any>(classMember: ClassMemberT): GetterT<T>;

package/lib/facet.js

@@ -1,43 +1,7 @@
-import { getCtrState } from '../internal/logging';
-import { options as skandhaOptions } from '../internal/options';
-import { getCtrAdmin, getCtrClassAdmin, getFacetAdmin, } from '../internal/utils';
-import { setCtr } from './ctr';
-// Registers facetMember as a facet in the facetHost class
-export function facet(facetHost, facetMember, descriptor) {
-    var _a;
-    if (descriptor === void 0) { descriptor = undefined; }
-    var ctrClassAdmin = getCtrClassAdmin(facetHost.constructor);
-    ctrClassAdmin.facetMembers = (_a = ctrClassAdmin.facetMembers) !== null && _a !== void 0 ? _a : [];
-    ctrClassAdmin.facetMembers.push(facetMember);
-    return descriptor;
-}
+import { getCtrAdmin } from '../internal/utils';
 export function facetClassName(facetClass) {
     return facetClass.className ? facetClass.className() : facetClass.name;
 }
-// Registers members of ctr as facets in ctr. Each facet is registered by its class name.
-export function registerFacets(ctr, options) {
-    var _a, _b, _c, _d, _e;
-    var ctrAdmin = getCtrAdmin(ctr);
-    ctrAdmin.logName = (_a = options.name) !== null && _a !== void 0 ? _a : ctr.constructor.name;
-    ctrAdmin.facetMembers = (_b = ctrAdmin.facetMembers) !== null && _b !== void 0 ? _b : [];
-    ctrAdmin.facetByFacetClassName = (_c = ctrAdmin.facetByFacetClassName) !== null && _c !== void 0 ? _c : {};
-    ctrAdmin.ctrStateOverride = options.ctrState;
-    ((_e = (_d = options.members) !== null && _d !== void 0 ? _d : getCtrClassAdmin(ctr.constructor).facetMembers) !== null && _e !== void 0 ? _e : Object.getOwnPropertyNames(ctr)).forEach(function (member) {
-        ctrAdmin.facetMembers.push(member);
-        var facet = ctr[member];
-        setCtr(facet, ctr);
-        var facetAdmin = getFacetAdmin(facet);
-        facetAdmin.logName = "".concat(ctrAdmin.logName, "/").concat(facetClassName(facet.constructor));
-        var className = facetClassName(facet.constructor);
-        if (ctrAdmin.facetByFacetClassName[className] !== undefined) {
-            console.error("Two facets of same type ".concat(className, " in container ").concat(ctrAdmin.logName));
-        }
-        ctrAdmin.facetByFacetClassName[className] = facet;
-    });
-    if (skandhaOptions.logging) {
-        console.log('%c     %s ctr initialized', 'color: gray', ctrAdmin.logName, getCtrState(ctr));
-    }
-}
 export function getf(facetClass, ctr) {
     var _a;
     if (!ctr)
@@ -51,10 +15,3 @@ export function getf(facetClass, ctr) {
     }
     return facet;
 }
-export function getm(classMember) {
-    var f = function (ctr) { var _a; return getf(classMember[0], (_a = classMember[2]) !== null && _a !== void 0 ? _a : ctr)[classMember[1]]; };
-    // Set some properties on f to ease debugging later
-    f.facetClassName = facetClassName(classMember[0]);
-    f.facetMemberName = classMember[1];
-    return f;
-}

package/lib/patch.d.ts

@@ -1,5 +1 @@
-import { ClassMemberT, GetterT } from '..';
 export declare function mapDataToProp(facet: any, prop: string, getter: () => any): void;
-export declare function patchFacet(facet: any, members: any, options?: any): void;
-export declare const mapDataToFacet: ([toFacetClass, toMember, toCtr]: ClassMemberT, getter: GetterT, transform?: Function) => (ctr: any) => void;
-export declare const mapDatasToFacet: ([toFacetClass, toMember, toCtr]: ClassMemberT, getters: Array<GetterT>, transform: Function) => (ctr: any) => void;

package/lib/patch.js

@@ -1,17 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { facetLogName } from '../internal/logging';
-import { getDataMemberNames } from './data';
-import { getf } from './facet';
 export function mapDataToProp(facet, prop, getter) {
     delete facet[prop];
     Object.defineProperty(facet, prop, {
@@ -20,68 +6,3 @@ export function mapDataToProp(facet, prop, getter) {
         configurable: true,
     });
 }
-export function patchFacet(facet, members, options) {
-    var _a;
-    var dataMemberNames = getDataMemberNames(facet);
-    for (var prop in members) {
-        if ((_a = options === null || options === void 0 ? void 0 : options.warnIfNotADataMember) !== null && _a !== void 0 ? _a : true) {
-            if (!dataMemberNames.includes(prop)) {
-                console.error("Patching a property ".concat(prop, " that wasn't decorated with ") +
-                    "@data, @input or @output in ".concat(facetLogName(facet)));
-            }
-        }
-        try {
-            delete facet[prop];
-        }
-        catch (_b) {
-            console.error("Could not delete property ".concat(prop, " from facet ").concat(facetLogName(facet)) +
-                '. In case you are using mobx (or skandha-mobx), this can happen ' +
-                'when makeObservable (or makeCtrObservable) is called before ' +
-                'patching a property. Try calling these functions as late as ' +
-                'possible.');
-        }
-        Object.defineProperty(facet, prop, __assign(__assign({}, members[prop]), { enumerable: true, configurable: true }));
-    }
-}
-export var mapDataToFacet = function (_a, getter, transform) {
-    var toFacetClass = _a[0], toMember = _a[1], toCtr = _a[2];
-    return function (ctr) {
-        var _a;
-        var patch = (_a = {},
-            _a[toMember] = {
-                get: function () {
-                    // This context variable is not necessary, it has redundant data and
-                    // could be inlined, but it makes debugging easier.
-                    var context = {
-                        ctr: toCtr !== null && toCtr !== void 0 ? toCtr : ctr,
-                        getter: getter,
-                        toClassMember: [toFacetClass, toMember],
-                        data: getter(ctr),
-                    };
-                    return transform ? transform(context.data) : context.data;
-                },
-            },
-            _a);
-        patchFacet(getf(toFacetClass, toCtr !== null && toCtr !== void 0 ? toCtr : ctr), patch);
-    };
-};
-export var mapDatasToFacet = function (_a, getters, transform) {
-    var toFacetClass = _a[0], toMember = _a[1], toCtr = _a[2];
-    return function (ctr) {
-        var _a;
-        var patch = (_a = {},
-            _a[toMember] = {
-                get: function () {
-                    var context = {
-                        ctr: toCtr !== null && toCtr !== void 0 ? toCtr : ctr,
-                        getters: getters,
-                        toClassMember: [toFacetClass, toMember],
-                        datas: getters.map(function (getter) { return getter(ctr); }),
-                    };
-                    return transform.apply(void 0, context.datas);
-                },
-            },
-            _a);
-        patchFacet(getf(toFacetClass, toCtr !== null && toCtr !== void 0 ? toCtr : ctr), patch);
-    };
-};

package/lib/registerCtr.d.ts

@@ -0,0 +1,6 @@
+export declare type OptionsT = {
+    name: string;
+    members?: string[];
+    ctrState?: Function;
+};
+export declare function registerCtr(ctr: any, options: OptionsT): void;

package/lib/registerCtr.js

@@ -0,0 +1,31 @@
+import { getCtrState } from '../internal/logging';
+import { options as skandhaOptions } from '../internal/options';
+import { getCtrAdmin, getFacetAdmin } from '../internal/utils';
+import { setCtr } from './ctr';
+import { facetClassName } from './facet';
+export function registerCtr(ctr, options) {
+    var _a, _b, _c;
+    var ctrAdmin = getCtrAdmin(ctr);
+    ctrAdmin.logName = options.name;
+    ctrAdmin.facetMembers = (_a = ctrAdmin.facetMembers) !== null && _a !== void 0 ? _a : [];
+    ctrAdmin.facetByFacetClassName = (_b = ctrAdmin.facetByFacetClassName) !== null && _b !== void 0 ? _b : {};
+    ctrAdmin.ctrStateOverride = options.ctrState;
+    ((_c = options.members) !== null && _c !== void 0 ? _c : Object.getOwnPropertyNames(ctr)).forEach(function (member) {
+        var facet = ctr[member];
+        setCtr(facet, ctr);
+        ctrAdmin.facetMembers.push(member);
+        if (!facet.constructor.className) {
+            console.error("Facet ".concat(member, " of container ").concat(ctrAdmin.logName, " ") +
+                "does not have a static className function");
+        }
+        var className = facetClassName(facet.constructor);
+        getFacetAdmin(facet).logName = "".concat(ctrAdmin.logName, "/").concat(className);
+        if (ctrAdmin.facetByFacetClassName[className] !== undefined) {
+            console.error("Two facets of same type ".concat(className, " in container ").concat(ctrAdmin.logName));
+        }
+        ctrAdmin.facetByFacetClassName[className] = facet;
+    });
+    if (skandhaOptions.logging) {
+        console.log('%c     %s ctr initialized', 'color: gray', ctrAdmin.logName, getCtrState(ctr));
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skandha",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Create data containers with modular behaviours",
   "main": "index.js",
   "repository": "https://github.com/mnieber/skandha.git",