@os-design/form 1.0.0

package/LICENCE.md

@@ -0,0 +1 @@
+Copyright (c) 2019-present, Ilya Ordin, all rights reserved

package/README.md

@@ -0,0 +1,458 @@
+# @os-design/form [![NPM version](https://img.shields.io/npm/v/@os-design/form)](https://yarnpkg.com/package/@os-design/form) [![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@os-design/form)](https://bundlephobia.com/result?p=@os-design/form)
+
+Create forms in React and React Native much faster and easier.
+
+**Features:**
+
+- 🤓 Rerenders only updated fields, not the whole form.
+- 📱 Use with any design system or native components. Supports React Native.
+- 0️⃣ Small size. Zero dependencies.
+- 📙 Lots of useful features.
+
+## Installation
+
+Install the package using the following command:
+
+```
+yarn add @os-design/form
+```
+
+## 🙈 Simple form
+
+Let's assume that we want to build a form for creating blog posts. To create a form, use the `useForm` hook and pass the initial data to it. This hook returns the `Field` component, which should be used to render each of your input. To get all the form data use `form.values.getAll()`.
+
+```tsx
+import { useForm } from '@os-design/form';
+
+interface FormData {
+  title: string;
+  content: string;
+}
+
+const Form: React.FC = () => {
+  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll()); // To get all the form data
+  }, []);
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='content' render={(props) => <TextArea {...props} />} />
+      <Button onClick={onSubmit}>Add</Button>
+    </>
+  );
+};
+```
+
+The `props` is an object that contains 2 properties: `value` and `onChange`, so you can just pass all the properties of this object to your input component for simplicity.
+
+## ❗ Showing errors
+
+If the user entered incorrect values, the form should display errors. To support errors, you need to make 2 steps: pass the errors to the form and display them next to the input components.
+
+```tsx
+const Form: React.FC = () => {
+  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+
+  const onSubmit = useCallback(() => {
+    form.errors.set('title', 'The title is too long 😔');
+  }, []);
+
+  return (
+    <>
+      <Field
+        name='title'
+        render={(props, { error }) => (
+          <FormItem error={error}>
+            <Input {...props} />
+          </FormItem>
+        )}
+      />
+      <Field
+        name='content'
+        render={(props, { error }) => (
+          <FormItem error={error}>
+            <TextArea {...props} />
+          </FormItem>
+        )}
+      />
+      <Button onClick={onSubmit}>Add</Button>
+    </>
+  );
+};
+```
+
+If you want to display an error message not next the input component (e.g. if an error is not related to the field), you can create a separate component and place it wherever you want.
+
+```tsx
+interface FormData {
+  title: string;
+  content: string;
+  _error?: never; // Use any name that is not used by any field
+}
+
+// Component to display errors unrelated to any fields
+const Error: React.FC = () => {
+  const error = useError<FormData>('_error');
+  return error ? <Alert type='error'>{error}</Alert> : null;
+};
+
+const Form: React.FC = () => {
+  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+
+  const onSubmit = useCallback(() => {
+    form.errors.set('_error', 'The server went on vacation 🌴'); // Set the error
+    console.log(form.values.getAll()); // { title: '', content: '' } - data only, without the `_error` prop
+  }, []);
+
+  // Wrap your form in a `FormProvider` to pass the `form` to the child components (to the `Error` component in our case)
+  return (
+    <FormProvider form={form}>
+      <>
+        <Field
+          name='title'
+          render={(props, { error }) => (
+            <FormItem error={error}>
+              <Input {...props} />
+            </FormItem>
+          )}
+        />
+        <Field
+          name='content'
+          render={(props, { error }) => (
+            <FormItem error={error}>
+              <TextArea {...props} />
+            </FormItem>
+          )}
+        />
+
+        <Error />
+
+        <Button onClick={onSubmit}>Add</Button>
+      </>
+    </FormProvider>
+  );
+};
+```
+
+## 🪆 Getting the form in child components
+
+To pass the form to the child components, you have to:
+
+1. Wrap your form in a `FormProvider`.
+2. Use the `useExistingForm` hook in the child components.
+
+```tsx
+interface BaseFormProps {
+  children: React.ReactNode;
+}
+const BaseForm: React.FC<BaseFormProps> = ({ children }) => {
+  const { Field } = useExistingForm<FormData>();
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='content' render={(props) => <TextArea {...props} />} />
+      {children}
+    </>
+  );
+};
+
+const FormCreate: React.FC = () => {
+  const { form } = useForm<FormData>({ title: '', content: '' });
+
+  const onCreate = useCallback(() => {
+    console.log('Creating...', form.values.getAll());
+  }, []);
+
+  return (
+    <FormProvider form={form}>
+      <BaseForm>
+        <Button onClick={onCreate}>Create</Button>
+      </BaseForm>
+    </FormProvider>
+  );
+};
+
+const FormUpdate: React.FC = () => {
+  const { form } = useForm<FormData>({ title: 'Title', content: 'Content' });
+
+  const onUpdate = useCallback(() => {
+    console.log('Updating...', form.values.getAll());
+  }, []);
+
+  return (
+    <FormProvider form={form}>
+      <BaseForm>
+        <Button onClick={onUpdate}>Update</Button>
+      </BaseForm>
+    </FormProvider>
+  );
+};
+```
+
+## 🚫 Blocking the button until the form is changed
+
+Let's upgrade our form and allow the user to click on the `Save` button only if one of the field values has been changed. To implement it, let's pass the `modified` flag to the `disabled` property of the button.
+
+```tsx
+const Form: React.FC = () => {
+  const { Field, form, modified } = useForm<FormData>({
+    title: 'Title',
+    content: 'Content',
+  });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='content' render={(props) => <TextArea {...props} />} />
+      <Button disabled={!modified} onClick={onSubmit}>
+        Save
+      </Button>
+    </>
+  );
+};
+```
+
+## 🎯 Getting only changed values
+
+If the form has many fields, it is better to send only the changed values to the server (not all the form data). To do this, you need to determine which fields have been changed using the `modifiedFields` and get only them.
+
+`modifiedFields` is an array with the names of the fields that have been changed. If the form has 2 fields: `title`, `content` and each of them has been changed, then `modifiedFields` will be equal to `['title', 'content']`.
+
+```tsx
+const Form: React.FC = () => {
+  const { Field, form, modifiedFields } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
+
+  const onSubmit = useCallback(() => {
+    const onlyChangedValues = modifiedFields.reduce(
+      (acc, field) => ({ ...acc, [field]: form.values.get(field) }),
+      {}
+    );
+    console.log(onlyChangedValues);
+  }, [modifiedFields]);
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='content' render={(props) => <TextArea {...props} />} />
+      <Button onClick={onSubmit}>Save</Button>
+    </>
+  );
+};
+```
+
+## ↩️ Resetting a field to its initial value
+
+Let's assume the user changed his profile data in the form, but then decided to rollback one of the field values. It would be really cool if the user could just click the button next to the input component and the field value would return to the initial value.
+
+You can easily add this feature as follows:
+
+```tsx
+const ResetButton: React.FC<ButtonProps> = (props) => (
+  <Button type='ghost' size='small' wide='never' {...props}>
+    <RollbackIcon />
+  </Button>
+);
+
+interface ProfileData {
+  name: string;
+  password: string;
+}
+
+const Form: React.FC = () => {
+  const { Field, form } = useForm<ProfileData>({
+    name: 'Kate',
+    password: 'secret',
+  });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  return (
+    <>
+      <Field
+        name='name'
+        render={(props, { modified, reset }) => (
+          <Input
+            {...props}
+            right={modified && <ResetButton onClick={reset} />}
+          />
+        )}
+      />
+      <Field
+        name='password'
+        render={(props, { modified, reset }) => (
+          <InputPassword
+            {...props}
+            right={modified && <ResetButton onClick={reset} />}
+          />
+        )}
+      />
+      <Button onClick={onSubmit}>Save</Button>
+    </>
+  );
+};
+```
+
+## 🎚️ Transforming field values
+
+There are few cases where this is necessary:
+
+1. Your input component does not support the field type. For example, you want to enter numbers in the text input that uses the string type.
+2. The value in the store is not equal to the value in the input component. For example, the price is entered in dollars, but you store it in cents.
+3. The value should be post-processed. For example, the email address should always be in lowercase.
+
+Let's consider the first case. To implement it, you should set 2 transformers:
+
+- `toValue` - transforms the value before putting it into the input component.
+- `fromValue` - transforms the value before calling the onChange event handler.
+
+```tsx
+interface PersonData {
+  name: string;
+  age: number;
+}
+
+const Form: React.FC = () => {
+  const { Field, form } = useForm<PersonData>({ name: 'Kate', age: 18 });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  return (
+    <>
+      <Field name='name' render={(props) => <Input {...props} />} />
+      <Field
+        name='age'
+        toValue={(value) => value.toString()} // To input component
+        fromValue={(value) => Number(value)} // From input component
+        render={(props) => <Input {...props} />}
+      />
+      <Button onClick={onSubmit}>Save</Button>
+    </>
+  );
+};
+```
+
+## 🎛️ Changing another fields
+
+In my practice, this came in handy in 2 cases:
+
+1. To generate a field value by specific field. For example, to generate a meta title of a blog post by its title.
+2. To reset some field values if a specific field is changed.
+
+Let's consider the first case. To implement it, use the `useTransformer` hook.
+
+```tsx
+interface FormData {
+  title: string;
+  metaTitle: string;
+}
+
+const Form: React.FC = () => {
+  const { Field, form, useTransformer } = useForm<FormData>({
+    title: '',
+    metaTitle: '',
+  });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  useTransformer('title', (value) => ({
+    metaTitle: `The length of the title is ${value.length}`,
+  }));
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='metaTitle' render={(props) => <Input {...props} />} />
+      <Button onClick={onSubmit}>Save</Button>
+    </>
+  );
+};
+```
+
+## 👀 Tracking field changes
+
+You can track changes for a specific field using the `useValue` hook.
+
+For example, if the url slug is generated by the title on the server side, you need to send a request every time the title field changes and update the url slug field after receiving a response.
+
+```tsx
+interface FormData {
+  title: string;
+  urlSlug: string;
+}
+
+const Form: React.FC = () => {
+  const { Field, form, useValue } = useForm<FormData>({
+    title: '',
+    urlSlug: '',
+  });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  const title = useValue('title');
+
+  useEffect(() => {
+    // Send a request to the server to generate the url slug by title
+    setTimeout(() => {
+      // Update the url slug field
+      form.values.set('urlSlug', title.length.toString());
+    }, 1000);
+  }, [title]);
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='urlSlug' render={(props) => <Input {...props} />} />
+      <Button onClick={onSubmit}>Add</Button>
+    </>
+  );
+};
+```
+
+You can also track changes to all fields, for example, for logging.
+
+```tsx
+const Form: React.FC = () => {
+  const { Field, form } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
+
+  const onSubmit = useCallback(() => {
+    console.log(form.values.getAll());
+  }, []);
+
+  useEffect(() => {
+    const subscription = form.values.subscribeToAllFields((name, value) => {
+      console.log(`${name} = ${value}`);
+    });
+    return () => subscription.unsubscribe();
+  }, []);
+
+  return (
+    <>
+      <Field name='title' render={(props) => <Input {...props} />} />
+      <Field name='content' render={(props) => <TextArea {...props} />} />
+      <Button onClick={onSubmit}>Save</Button>
+    </>
+  );
+};
+```

package/dist/cjs/SubscribableData.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _SubscriptionManager2 = _interopRequireDefault(require("./SubscriptionManager"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var SubscribableData = /*#__PURE__*/function (_SubscriptionManager) {
+  _inherits(SubscribableData, _SubscriptionManager);
+  var _super = _createSuper(SubscribableData);
+  function SubscribableData(data) {
+    var _this;
+    _classCallCheck(this, SubscribableData);
+    _this = _super.call(this);
+    _this.data = void 0;
+    _this.data = data;
+    return _this;
+  }
+  _createClass(SubscribableData, [{
+    key: "get",
+    value: function get(name) {
+      return this.data[name];
+    }
+  }, {
+    key: "getAll",
+    value: function getAll() {
+      return this.data;
+    }
+  }, {
+    key: "set",
+    value: function set(name, value) {
+      this.data[name] = value;
+      this.call(name, value);
+    }
+  }]);
+  return SubscribableData;
+}(_SubscriptionManager2["default"]);
+var _default = SubscribableData;
+exports["default"] = _default;
+//# sourceMappingURL=SubscribableData.js.map

package/dist/cjs/SubscribableData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribableData.js","names":["SubscribableData","data","name","value","call","SubscriptionManager"],"sources":["../../src/SubscribableData.ts"],"sourcesContent":["import SubscriptionManager from './SubscriptionManager';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Data = Record<string, any>;\n\nclass SubscribableData<\n  TData extends Data,\n  TDataName extends keyof TData = keyof TData\n> extends SubscriptionManager<TData> {\n  private data: TData;\n\n  public constructor(data: TData) {\n    super();\n    this.data = data;\n  }\n\n  public get<TName extends TDataName>(name: TName): TData[TName] {\n    return this.data[name];\n  }\n\n  public getAll(): TData {\n    return this.data;\n  }\n\n  public set<TName extends TDataName>(name: TName, value: TData[TName]): void {\n    this.data[name] = value;\n    this.call(name, value);\n  }\n}\n\nexport default SubscribableData;\n"],"mappings":";;;;;;;AAAA;AAAwD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlDA,gBAAgB;EAAA;EAAA;EAMpB,0BAAmBC,IAAW,EAAE;IAAA;IAAA;IAC9B;IAAQ,MAHFA,IAAI;IAIV,MAAKA,IAAI,GAAGA,IAAI;IAAC;EACnB;EAAC;IAAA;IAAA,OAED,aAAoCC,IAAW,EAAgB;MAC7D,OAAO,IAAI,CAACD,IAAI,CAACC,IAAI,CAAC;IACxB;EAAC;IAAA;IAAA,OAED,kBAAuB;MACrB,OAAO,IAAI,CAACD,IAAI;IAClB;EAAC;IAAA;IAAA,OAED,aAAoCC,IAAW,EAAEC,KAAmB,EAAQ;MAC1E,IAAI,CAACF,IAAI,CAACC,IAAI,CAAC,GAAGC,KAAK;MACvB,IAAI,CAACC,IAAI,CAACF,IAAI,EAAEC,KAAK,CAAC;IACxB;EAAC;EAAA;AAAA,EAnBOE,gCAAmB;AAAA,eAsBdL,gBAAgB;AAAA"}

package/dist/cjs/SubscriptionManager.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var deleteFromArray = function deleteFromArray(arr, item) {
+  var index = arr.findIndex(function (i) {
+    return i === item;
+  });
+  if (index === -1) return;
+  arr.splice(index, 1);
+};
+var SubscriptionManager = /*#__PURE__*/function () {
+  function SubscriptionManager() {
+    _classCallCheck(this, SubscriptionManager);
+    this.observers = void 0;
+    this.fieldObservers = void 0;
+    this.observers = [];
+    this.fieldObservers = {};
+  }
+  _createClass(SubscriptionManager, [{
+    key: "getFieldObservers",
+    value: function getFieldObservers(name) {
+      if (!this.fieldObservers[name]) {
+        this.fieldObservers[name] = [];
+      }
+      return this.fieldObservers[name];
+    }
+  }, {
+    key: "subscribeToAllFields",
+    value: function subscribeToAllFields(observer) {
+      var _this = this;
+      this.observers.push(observer);
+      return {
+        unsubscribe: function unsubscribe() {
+          return _this.unsubscribeFromAllFields(observer);
+        }
+      };
+    }
+  }, {
+    key: "unsubscribeFromAllFields",
+    value: function unsubscribeFromAllFields(observer) {
+      deleteFromArray(this.observers, observer);
+    }
+  }, {
+    key: "subscribeToField",
+    value: function subscribeToField(name, observer) {
+      var _this2 = this;
+      this.getFieldObservers(name).push(observer);
+      return {
+        unsubscribe: function unsubscribe() {
+          return _this2.unsubscribeFromField(name, observer);
+        }
+      };
+    }
+  }, {
+    key: "unsubscribeFromField",
+    value: function unsubscribeFromField(name, observer) {
+      deleteFromArray(this.getFieldObservers(name), observer);
+    }
+  }, {
+    key: "call",
+    value: function call(name, value) {
+      this.observers.forEach(function (observer) {
+        return observer(name, value);
+      });
+      this.getFieldObservers(name).forEach(function (observer) {
+        return observer(value);
+      });
+    }
+  }]);
+  return SubscriptionManager;
+}();
+var _default = SubscriptionManager;
+exports["default"] = _default;
+//# sourceMappingURL=SubscriptionManager.js.map

package/dist/cjs/SubscriptionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionManager.js","names":["deleteFromArray","arr","item","index","findIndex","i","splice","SubscriptionManager","observers","fieldObservers","name","observer","push","unsubscribe","unsubscribeFromAllFields","getFieldObservers","unsubscribeFromField","value","forEach"],"sources":["../../src/SubscriptionManager.ts"],"sourcesContent":["export type Observer<K, V> = (name: K, value: V) => void;\nexport type FieldObserver<V> = (value: V) => void;\n\nexport interface Subscription {\n  unsubscribe: () => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Data = Record<string, any>;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst deleteFromArray = (arr: any[], item: any) => {\n  const index = arr.findIndex((i) => i === item);\n  if (index === -1) return;\n  arr.splice(index, 1);\n};\n\nclass SubscriptionManager<\n  TData extends Data,\n  TDataName extends keyof TData = keyof TData\n> {\n  private observers: Array<Observer<TDataName, TData[TDataName]>>;\n\n  private fieldObservers: {\n    [TName in TDataName]?: Array<FieldObserver<TData[TName]>>;\n  };\n\n  public constructor() {\n    this.observers = [];\n    this.fieldObservers = {};\n  }\n\n  private getFieldObservers<TName extends TDataName>(\n    name: TName\n  ): Array<FieldObserver<TData[TName]>> {\n    if (!this.fieldObservers[name]) {\n      this.fieldObservers[name] = [];\n    }\n    return this.fieldObservers[name] as Array<FieldObserver<TData[TName]>>;\n  }\n\n  public subscribeToAllFields(\n    observer: Observer<TDataName, TData[TDataName]>\n  ): Subscription {\n    this.observers.push(observer);\n    return { unsubscribe: () => this.unsubscribeFromAllFields(observer) };\n  }\n\n  private unsubscribeFromAllFields(\n    observer: Observer<TDataName, TData[TDataName]>\n  ): void {\n    deleteFromArray(this.observers, observer);\n  }\n\n  public subscribeToField<TName extends TDataName>(\n    name: TName,\n    observer: FieldObserver<TData[TName]>\n  ): Subscription {\n    this.getFieldObservers(name).push(observer);\n    return { unsubscribe: () => this.unsubscribeFromField(name, observer) };\n  }\n\n  private unsubscribeFromField<TName extends TDataName>(\n    name: TName,\n    observer: FieldObserver<TData[TName]>\n  ): void {\n    deleteFromArray(this.getFieldObservers(name), observer);\n  }\n\n  protected call<TName extends TDataName>(\n    name: TName,\n    value: TData[TName]\n  ): void {\n    this.observers.forEach((observer) => observer(name, value));\n    this.getFieldObservers(name).forEach((observer) => observer(value));\n  }\n}\n\nexport default SubscriptionManager;\n"],"mappings":";;;;;;;;;AAOA;;AAGA;AACA,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CAAIC,GAAU,EAAEC,IAAS,EAAK;EACjD,IAAMC,KAAK,GAAGF,GAAG,CAACG,SAAS,CAAC,UAACC,CAAC;IAAA,OAAKA,CAAC,KAAKH,IAAI;EAAA,EAAC;EAC9C,IAAIC,KAAK,KAAK,CAAC,CAAC,EAAE;EAClBF,GAAG,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;AACtB,CAAC;AAAC,IAEII,mBAAmB;EAUvB,+BAAqB;IAAA;IAAA,KANbC,SAAS;IAAA,KAETC,cAAc;IAKpB,IAAI,CAACD,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,cAAc,GAAG,CAAC,CAAC;EAC1B;EAAC;IAAA;IAAA,OAED,2BACEC,IAAW,EACyB;MACpC,IAAI,CAAC,IAAI,CAACD,cAAc,CAACC,IAAI,CAAC,EAAE;QAC9B,IAAI,CAACD,cAAc,CAACC,IAAI,CAAC,GAAG,EAAE;MAChC;MACA,OAAO,IAAI,CAACD,cAAc,CAACC,IAAI,CAAC;IAClC;EAAC;IAAA;IAAA,OAED,8BACEC,QAA+C,EACjC;MAAA;MACd,IAAI,CAACH,SAAS,CAACI,IAAI,CAACD,QAAQ,CAAC;MAC7B,OAAO;QAAEE,WAAW,EAAE;UAAA,OAAM,KAAI,CAACC,wBAAwB,CAACH,QAAQ,CAAC;QAAA;MAAC,CAAC;IACvE;EAAC;IAAA;IAAA,OAED,kCACEA,QAA+C,EACzC;MACNX,eAAe,CAAC,IAAI,CAACQ,SAAS,EAAEG,QAAQ,CAAC;IAC3C;EAAC;IAAA;IAAA,OAED,0BACED,IAAW,EACXC,QAAqC,EACvB;MAAA;MACd,IAAI,CAACI,iBAAiB,CAACL,IAAI,CAAC,CAACE,IAAI,CAACD,QAAQ,CAAC;MAC3C,OAAO;QAAEE,WAAW,EAAE;UAAA,OAAM,MAAI,CAACG,oBAAoB,CAACN,IAAI,EAAEC,QAAQ,CAAC;QAAA;MAAC,CAAC;IACzE;EAAC;IAAA;IAAA,OAED,8BACED,IAAW,EACXC,QAAqC,EAC/B;MACNX,eAAe,CAAC,IAAI,CAACe,iBAAiB,CAACL,IAAI,CAAC,EAAEC,QAAQ,CAAC;IACzD;EAAC;IAAA;IAAA,OAED,cACED,IAAW,EACXO,KAAmB,EACb;MACN,IAAI,CAACT,SAAS,CAACU,OAAO,CAAC,UAACP,QAAQ;QAAA,OAAKA,QAAQ,CAACD,IAAI,EAAEO,KAAK,CAAC;MAAA,EAAC;MAC3D,IAAI,CAACF,iBAAiB,CAACL,IAAI,CAAC,CAACQ,OAAO,CAAC,UAACP,QAAQ;QAAA,OAAKA,QAAQ,CAACM,KAAK,CAAC;MAAA,EAAC;IACrE;EAAC;EAAA;AAAA;AAAA,eAGYV,mBAAmB;AAAA"}