@projectcaluma/ember-form 10.0.3 → 11.0.0-beta.1

package/addon/lib/answer.js

@@ -1,130 +1,166 @@
 import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import { computed } from "@ember/object";
-import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
 import { isEmpty } from "@ember/utils";
+import { dedupeTracked, cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import Base from "@projectcaluma/ember-form/lib/base";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
+/**
+ * Class that automatically defines all keys of the passed object as deduped
+ * tracked property and assigns the initial value.
+ *
+ * @class DedupedTrackedObject
+ * @private
+ */
+class DedupedTrackedObject {
+  constructor(obj) {
+    Object.entries(obj).forEach(([key, value]) => {
+      Object.defineProperty(
+        this,
+        key,
+        dedupeTracked(this, key, { initializer: () => value })
+      );
+    });
+  }
+}
+
 /**
  * Object which represents an answer in context of a field
  *
  * @class Answer
  */
-export default Base.extend({
-  calumaStore: service(),
+export default class Answer extends Base {
+  constructor({ raw, field, ...args }) {
+    assert("`field` must be passed as an argument", field);
 
-  init(...args) {
     assert(
       "A graphql answer `raw` must be passed",
-      this.raw && /Answer$/.test(this.raw.__typename)
+      /Answer$/.test(raw?.__typename)
     );
 
-    if (this.raw.id) {
-      this.set("pk", `Answer:${decodeId(this.raw.id)}`);
-    }
+    super({ raw, ...args });
+
+    this.field = field;
+    this.raw = new DedupedTrackedObject(raw);
 
-    this._super(...args);
+    this.pushIntoStore();
+  }
+
+  /**
+   * The field this answer originates from
+   *
+   * @property {Field} field
+   */
+  field = null;
+
+  /**
+   * The raw data of the answer. This is the only `raw` property that is tracked
+   * since only the answers properties are changed while rendering the form.
+   *
+   * @property {DedupedTrackedObject} raw
+   */
+  raw = {};
 
-    this.setProperties(this.raw);
-  },
+  /**
+   * The primary key of the answer.
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return this.uuid && `Answer:${this.uuid}`;
+  }
 
   /**
    * The uuid of the answer
    *
    * @property {String} uuid
-   * @accessor
    */
-  uuid: computed("raw.id", function () {
+  @cached
+  get uuid() {
     return this.raw.id ? decodeId(this.raw.id) : null;
-  }),
+  }
 
-  isNew: computed("uuid", "value", function () {
+  /**
+   * Whether the answer is new. This is true when there is no object from the
+   * backend or the value is empty.
+   *
+   * @property {Boolean} isNew
+   */
+  @cached
+  get isNew() {
     return !this.uuid || isEmpty(this.value);
-  }),
+  }
 
   /**
    * The name of the property in which the value is stored. This depends on the
    * type of the answer.
    *
-   *
    * @property {String} _valueKey
-   * @accessor
    * @private
    */
-  _valueKey: computed("__typename", function () {
+  @cached
+  get _valueKey() {
     return (
-      this.__typename && camelize(this.__typename.replace(/Answer$/, "Value"))
+      this.raw.__typename &&
+      camelize(this.raw.__typename.replace(/Answer$/, "Value"))
     );
-  }),
+  }
 
   /**
    * The value of the answer, the type of this value depends on the type of the
    * answer. For table answers this returns an array of documents.
    *
    * @property {String|Number|String[]|Document[]} value
-   * @computed
    */
-  value: computed(
-    "field.document",
-    "_valueKey",
-    "dateValue",
-    "fileValue",
-    "floatValue",
-    "integerValue",
-    "listValue.[]",
-    "stringValue",
-    "tableValue.[]",
-    {
-      get() {
-        const value = this.get(this._valueKey);
-
-        if (this._valueKey === "tableValue" && value) {
-          return value.map((document) => {
-            const existing = this.calumaStore.find(
-              `Document:${decodeId(document.id)}`
-            );
-
-            return (
-              existing ||
-              getOwner(this)
-                .factoryFor("caluma-model:document")
-                .create({
-                  raw: parseDocument(document),
-                  parentDocument: this.field.document,
-                })
-            );
-          });
-        }
-
-        return value;
-      },
-      set(_, value) {
-        value = [undefined, ""].includes(value) ? null : value;
-
-        if (this._valueKey) {
-          this.set(this._valueKey, value);
-        }
-
-        return value;
-      },
+  @cached
+  get value() {
+    const value = this.raw[this._valueKey];
+
+    if (this._valueKey === "tableValue" && value) {
+      const owner = getOwner(this);
+      const Document = owner.factoryFor("caluma-model:document").class;
+
+      return value.map((document) => {
+        if (document instanceof Document) return document;
+
+        const existing = this.calumaStore.find(
+          `Document:${decodeId(document.id)}`
+        );
+
+        return (
+          existing ||
+          new Document({
+            raw: parseDocument(document),
+            parentDocument: this.field.document,
+            owner,
+          })
+        );
+      });
+    }
+
+    return value;
+  }
+
+  set value(value) {
+    if (this._valueKey) {
+      this.raw[this._valueKey] = [undefined, ""].includes(value) ? null : value;
     }
-  ),
+  }
 
   /**
    * The value serialized for a backend request.
    *
    * @property {String|Number|String[]} serializedValue
-   * @accessor
    */
-  serializedValue: computed("__typename", "value", function () {
-    if (this.__typename === "TableAnswer") {
+  get serializedValue() {
+    if (this.raw.__typename === "TableAnswer") {
       return (this.value || []).map(({ uuid }) => uuid);
     }
 
     return this.value;
-  }),
-});
+  }
+}

package/addon/lib/base.js

@@ -1,35 +1,44 @@
-import { getOwner } from "@ember/application";
+import { setOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import EmberObject from "@ember/object";
+import { registerDestructor } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 
-export default EmberObject.extend({
-  calumaStore: service(),
+export default class Base {
+  @service calumaStore;
 
-  init(...args) {
-    this._super(...args);
+  constructor({ raw, owner }) {
+    assert("`owner` must be passed as an argument", owner);
 
-    assert("Owner must be injected", getOwner(this));
+    assert("A primary key `pk` must be defined on the object", "pk" in this);
 
-    // answers don't need a pk if they are new
-    if (!/Answer$/.test(this.get("raw.__typename"))) {
-      assert("A primary key `pk` must be passed", this.pk);
-      assert(
-        "The primary key `pk` must be readonly",
-        !Object.getOwnPropertyDescriptor(this, "pk").writable
-      );
-    }
+    setOwner(this, owner);
 
-    if (this.pk) {
-      this.calumaStore.push(this);
+    if (raw) {
+      this.raw = raw;
     }
-  },
 
-  willDestroy(...args) {
-    this._super(...args);
+    registerDestructor(this, () => {
+      if (this.pk) {
+        this.calumaStore.delete(this.pk);
+      }
+    });
+  }
 
+  /**
+   * The raw data of the object
+   *
+   * @property {Object} raw
+   */
+  raw = {};
+
+  /**
+   * Push the object into the caluma store
+   *
+   * @method pushIntoStore
+   */
+  pushIntoStore() {
     if (this.pk) {
-      this.calumaStore.delete(this.pk);
+      this.calumaStore.push(this);
     }
-  },
-});
+  }
+}

package/addon/lib/dependencies.js

@@ -1,4 +1,5 @@
-import { computed, get } from "@ember/object";
+import { get } from "@ember/object";
+import { cached } from "tracked-toolbox";
 
 import { getAST, getTransforms } from "@projectcaluma/ember-core/utils/jexl";
 
@@ -47,79 +48,43 @@ export function getDependenciesFromJexl(jexl, expression) {
 }
 
 /**
- * Computed property to get all nested dependency parents of an expression. A
- * nested dependency parent would be a table field that is used with a mapby
- * transform in the JEXL expression.
- *
- * E.g: 'foo'|answer in 'bar'|answer|mapby('column') where 'bar' would be a
- * nested dependency parent.
- *
- * Those need to be extracted seperately since the overall dependencies need to
- * depend on the values of the nested dependency parents to recompute
- * correctly.
+ * Getter to extract all fields used in an expression.
  *
  * @param {String} expressionPath The path of the expression
- * @return {Field[]} Returns an array of nested dependency parent fields
+ * @return {Field[]} An array of all dependency fields
  */
-export function nestedDependencyParents(expressionPath) {
-  return dependencies(expressionPath, { onlyNestedParents: true });
-}
-
-/**
- * Computed property to get all dependencies of an expression.
- *
- * @param {String} expressionPath The path of the expression
- * @param {Object} options
- * @param {Boolean} options.onlyNestedParents Only include nested parent fields
- * @param {String} options.nestedParentsPath Path of the nested parent fields to trigger recomputation
- * @return {Field[]} Returns an array of all dependency fields
- */
-export function dependencies(
-  expressionPath,
-  { onlyNestedParents = false, nestedParentsPath = null } = {}
-) {
-  // If there are nested parents we need to recompute the property if their
-  // values change
-  const nestedTriggers = nestedParentsPath
-    ? [`${nestedParentsPath}.@each.value`]
-    : [];
-
-  return computed(
-    "document.{jexl,fields.[]}",
-    expressionPath,
-    ...nestedTriggers,
-    function () {
-      const expression = get(this, expressionPath);
-
-      if (!expression) return [];
-
-      const slugs = getDependenciesFromJexl(this.document.jexl, expression);
-
-      return slugs
-        .flatMap((slug) => {
-          const [fieldSlug, nestedSlug = null] = slug.split(".");
-
-          if (onlyNestedParents && !nestedSlug) {
-            return null;
-          }
-
-          const field = this.document.findField(fieldSlug);
-
-          if (!onlyNestedParents && nestedSlug && field?.value) {
-            // Get the nested fields from the parents value (rows)
-            const childFields =
-              nestedSlug === "__all__"
-                ? field.value.flatMap((row) => row.fields)
-                : field.value.map((row) => row.findField(nestedSlug));
-
-            return [field, ...childFields];
-          }
-
-          return [field];
-        })
-        .filter(Boolean);
-    }
-  );
+export function dependencies(expressionPath) {
+  return function (target, key) {
+    return cached(target, key, {
+      get() {
+        const expression = get(this, expressionPath);
+
+        if (!expression) return [];
+
+        const slugs = getDependenciesFromJexl(this.document.jexl, expression);
+
+        return slugs
+          .flatMap((slug) => {
+            const [fieldSlug, nestedSlug = null] = slug.split(".");
+
+            const field = this.document.findField(fieldSlug);
+
+            if (nestedSlug && field?.value) {
+              // Get the nested fields from the parents value (rows)
+              const childFields =
+                nestedSlug === "__all__"
+                  ? field.value.flatMap((row) => row.fields)
+                  : field.value.map((row) => row.findField(nestedSlug));
+
+              return [field, ...childFields];
+            }
+
+            return [field];
+          })
+          .filter(Boolean);
+      },
+    });
+  };
 }
 
 export default dependencies;