patron-oop 1.45.0 → 1.46.0

package/docs/pages/source/source-all.html

@@ -0,0 +1,129 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceAll</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/SourceAll.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceAll на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для объединения результатов из нескольких
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-source"
+    >
+      источников данных
+    </a>
+  </span>
+  в один источник
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Полезное поведение в случаях, когда есть множество источников данных, на
+  основе которых нужно принимать решение в момент, когда все источники отдадут
+  свои данные
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre class="mb-4"><code class="language-js">import {
+    Source,
+    SourceAll
+} from 'patron-oop';
+
+const one = new Source(1);
+const two = new Source(2);
+
+const all = new SourceAll();
+one.value(all.guestKey('one'));
+two.value(all.guestKey('two'));
+
+all.value(({one, two}) => {
+    document
+        .querySelector('.guest-result')
+        .textContent = `Результат = ${one + two}`;
+});
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Результат = 0</span>
+</div>
+<script type="module">
+  import { give, Patron, SourceWithPool, GuestCast, SourceAll } from "patron-oop";
+
+  const one = new SourceWithPool(1);
+  const two = new SourceWithPool(2);
+
+  const all = new SourceAll();
+  one.value(all.guestKey("one"));
+  two.value(all.guestKey("two"));
+
+  all.value(({ one, two }) => {
+    document.querySelector(".guest-result").textContent = `Результат = ${
+      one + two
+    }`;
+  });
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Также предусмотрена возможность собрать результаты в массив а не объект.
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre class="mb-4"><code class="language-js">import {
+  SourceWithPool,
+  SourceAll
+} from 'patron-oop';
+
+const one = new SourceWithPool(1);
+const two = new SourceWithPool(2);
+
+const all = new SourceAll();
+one.value(all.guestKey('0'));
+two.value(all.guestKey('1'));
+
+all.valueArray((numbers) => {
+    document.querySelector('.guest-result-array').textContent = `Результат = ${numbers}`;
+});
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result-array">Результат = 0</span>
+</div>
+<script type="module">
+  import { give, Patron, SourceWithPool, GuestCast, SourceAll } from "patron-oop";
+
+  (() => {
+    const one = new SourceWithPool(1);
+    const two = new SourceWithPool(2);
+
+    const all = new SourceAll();
+    one.value(all.guestKey("0"));
+    two.value(all.guestKey("1"));
+
+    all.valueArray((numbers) => {
+      document.querySelector(
+        ".guest-result-array"
+      ).textContent = `Результат = ${numbers}`;
+    });
+  })();
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/source"
+    >Source</a
+  >
+</p>

package/docs/pages/source/source-applied.html

@@ -0,0 +1,73 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceApplied</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceApplied.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceApplied на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+    Иногда к занчению источника нужно применить какую-нибудь существующую функцию, для этого можно использовать класс SourceApplied
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { Source, SourceApplied, Patron } from "patron-oop";
+
+const guest = v => {
+  const r = document.querySelector(".guest-result");
+  if (r) {
+    r.textContent = v;
+  }
+}
+
+const max = 10;
+let iterations = 0;
+const timer = new Source((g) => {
+  const tick = () => {
+    iterations++;
+    g.give(iterations);
+    setTimeout(tick, 1000);
+  }
+tick();
+});
+
+new SourceApplied(timer, x => x * 2).value(new Patron(guest));
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Через 1 сек...</span>
+</div>
+
+<script type="module">
+import { Source, SourceApplied, Patron } from "patron-oop";
+
+const guest = v => {
+    const r = document.querySelector(".guest-result");
+    if (r) {
+        r.textContent = v;
+    }
+}
+
+const max = 10;
+let iterations = 0;
+const timer = new Source((g) => {
+    const tick = () => {
+        iterations++;
+        g.give(iterations);
+        setTimeout(tick, 1000);
+    }
+    tick();
+});
+
+new SourceApplied(timer, x => x * 2).value(new Patron(guest));
+</script>

package/docs/pages/source/source-dynamic.html

@@ -0,0 +1,93 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceDynamic</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceDynamic.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceDynamic на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Иногда необходимо соединить разные объекты
+  <link-dynamic href="/terminology/the-source">источник данных</link-dynamic>
+  и <link-dynamic href="/terminology/visitor">посетитель</link-dynamic> в одном
+  объекте как общий источник данных, который можно изменять
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Например, источником данных структуры <b>Х</b> может быть объект <b>А</b>, а
+  посетителем, получающим новую версию структуры <b>X</b> может быть объект
+  <b>B</b>. В таком случае можно объединить объекты <b>A</b> и <b>B</b> в один
+  общий SourceType, что упростит манипуляции над структурой <b>X</b>
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Для таких случаев подходит класс SourceDynamic объединяющий
+  <link-reloadable
+    target-blank
+    href="https://github.com/kosukhin/patron/blob/main/src/Guest/Guest.ts#L17"
+  >
+    GuestType
+  </link-reloadable>
+  и
+  <link-reloadable
+    target-blank
+    href="https://github.com/kosukhin/patron/blob/main/src/Source/Source.ts#L3"
+  >
+    SourceType
+  </link-reloadable>
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceDynamic, Guest, Source } from "patron-oop";
+
+let theValue = 1;
+const sourceDynamic = new SourceDynamic(
+    new Guest((value) => {
+        theValue = value;
+    }),
+    new Source((guest) => {
+        give(theValue, guest);
+    })
+);
+
+sourceDynamic.give(42);
+sourceDynamic.value((value) => {
+    document.querySelector(
+    ".source-dynamic-result"
+    ).textContent = `Результат = ${value}`;
+});
+</code></pre>
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <div class="source-dynamic-result">Нет результата!</div>
+</div>
+
+<script type="module">
+  import { SourceDynamic, Guest, Source, give } from "patron-oop";
+
+  let theValue = 1;
+  const sourceDynamic = new SourceDynamic(
+    new Guest((value) => {
+      theValue = value;
+    }),
+    new Source((guest) => {
+      give(theValue, guest);
+    })
+  );
+
+  sourceDynamic.give(42);
+  sourceDynamic.value((value) => {
+    document.querySelector(
+      ".source-dynamic-result"
+    ).textContent = `Результат = ${value}`;
+  });
+</script>

package/docs/pages/source/source-executor-applied.html

@@ -0,0 +1,64 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceExecutorApplied</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceExecutorApplied.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceExecutorApplied на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+    Класс SourceExecutorApplied полезен когда нужно ограничить процесс отдачи значения посетителям, например
+    можно отложить отдачу значения на какое-то время, либо применить функции debounce или throttle
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceExecutorApplied, Patron, sourceOf, value } from "patron-oop";
+
+const guest = v => {
+    const r = document.querySelector(".guest-result");
+    if (r) {
+        r.textContent = v;
+    }
+}
+
+new SourceExecutorApplied(sourceOf(40), (source) => {
+    return (g) => {
+        setTimeout(() => {
+            value(source, g);
+        }, 5000);
+    };
+}).value(new Patron(guest));
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Через 5 сек...</span>
+</div>
+
+<script type="module">
+import { SourceExecutorApplied, Patron, sourceOf, value } from "patron-oop";
+
+const guest = v => {
+    const r = document.querySelector(".guest-result");
+    if (r) {
+        r.textContent = v;
+    }
+}
+
+new SourceExecutorApplied(sourceOf(40), (source) => {
+    return (g) => {
+        setTimeout(() => {
+            value(source, g);
+        }, 5000);
+    };
+}).value(new Patron(guest));
+</script>

package/docs/pages/source/source-map.html

@@ -0,0 +1,192 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceMap</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceMap.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceMap на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Класс <b>SourceMap</b> нужен в случаях обработки множества значений, через
+  создание на основе этих значений объектов -
+  <link-dynamic href="/terminology/the-source">источников данных</link-dynamic>.
+  Например у нас есть класс - результат умножения числа на 2. SourceMap
+  позволит применить этот класс к какому-то итерируемому источнику данных,
+  преобразовывая каждое значение в новое, в результате получим новый итерируемый
+  источник данных, в котором все числа умножены на 2.
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { Source, SourceWithPool, GuestCast, SourceMap, PrivateClass, give } from "patron-oop";
+
+class X2 {
+  constructor(baseNumber) {
+    this.baseNumber = baseNumber;
+  }
+
+  value(guest) {
+    this.baseNumber.value(
+      new GuestCast(guest, (v) => {
+        give(v * 2, guest);
+      })
+    );
+    return this;
+  }
+}
+
+const source = new SourceWithPool([1, 2, 3, 9]);
+const guestMapped = new SourceMap(source, new PrivateClass(X2));
+
+guestMapped.value((v) => {
+  document.querySelector(".guest-result").textContent = v.join();
+});
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Result here</span>
+</div>
+
+<script type="module">
+  import { Source, SourceWithPool, GuestCast, SourceMap, PrivateClass, give } from "patron-oop";
+
+  class X2 {
+    constructor(baseNumber) {
+      this.baseNumber = baseNumber;
+    }
+
+    value(guest) {
+      this.baseNumber.value(
+        new GuestCast(guest, (v) => {
+          give(v * 2, guest);
+        })
+      );
+      return this;
+    }
+  }
+
+  const source = new SourceWithPool([1, 2, 3, 9]);
+  const guestMapped = new SourceMap(source, new PrivateClass(X2));
+
+  guestMapped.value((v) => {
+    document.querySelector(".guest-result").textContent = v.join();
+  });
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Так же можно передавать итерируемый источник источников данных. Благодаря
+  этому можно параллельно вычислить общий результат нескольких источников.
+  Пример использования ниже
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 2.</p>
+<pre class="mb-4"><code class="language-js">import {
+  Source,
+  SourceWithPool,
+  GuestCast,
+  SourceMap,
+  PrivateClass,
+  give,
+  isSource,
+} from "patron-oop";
+
+(() => {
+  class X3 {
+    constructor(baseNumber) {
+      this.baseNumber = baseNumber;
+    }
+
+    value(guest) {
+      this.baseNumber.value(
+        new GuestCast(guest, (v) => {
+          give(v * 3, guest);
+        })
+      );
+      return this;
+    }
+  }
+
+  const numSource = (num) =>
+    new Source((guest) =>
+      setTimeout(() => {
+        give(num, guest);
+      }, 8000)
+    );
+
+  const source = new SourceWithPool([
+    numSource(1),
+    numSource(2),
+    numSource(3),
+    numSource(4),
+    numSource(5),
+  ]);
+  const map = new SourceMap(source, new PrivateClass(X3));
+
+  map.value((v) => {
+    document.querySelector(".guest-result-2").textContent = v.join();
+  });
+})();
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 2.</p>
+<div class="example mb-4">
+  <span class="guest-result-2">Все результаты через 8 сек.</span>
+</div>
+
+<script type="module">
+  import {
+    Source,
+    SourceWithPool,
+    GuestCast,
+    SourceMap,
+    PrivateClass,
+    give,
+    isSource,
+  } from "patron-oop";
+
+  (() => {
+    class X3 {
+      constructor(baseNumber) {
+        this.baseNumber = baseNumber;
+      }
+
+      value(guest) {
+        this.baseNumber.value(
+          new GuestCast(guest, (v) => {
+            give(v * 3, guest);
+          })
+        );
+        return this;
+      }
+    }
+
+    const numSource = (num) =>
+      new Source((guest) =>
+        setTimeout(() => {
+          give(num, guest);
+        }, 8000)
+      );
+
+    const source = new SourceWithPool([
+      numSource(1),
+      numSource(2),
+      numSource(3),
+      numSource(4),
+      numSource(5),
+    ]);
+    const map = new SourceMap(source, new PrivateClass(X3));
+
+    map.value((v) => {
+      document.querySelector(".guest-result-2").textContent = v.join();
+    });
+  })();
+</script>

package/docs/pages/source/source-once.html

@@ -0,0 +1,73 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceOnce</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceOnce.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  SourceOnce на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+    Класс SourceOnce используется в случаях когда нужно создать источник данных в котором на
+    старте не будет значения, оно будет установлено позже но только один раз, последующие установки
+    новых значений будут игнорироваться.
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceOnce, Patron } from "patron-oop";
+
+const source = new SourceOnce();
+
+source.value(new Patron((v) => {
+    document.querySelector(".guest-result").textContent = v;
+}));
+
+setTimeout(() => {
+    source.give(10)
+}, 1000);
+
+// Код ниже не имеет эффекта
+setTimeout(() => {
+    source.give(20)
+}, 2000);
+
+setTimeout(() => {
+    source.give(30)
+}, 3000);
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Через 1 сек...</span>
+</div>
+
+<script type="module">
+import { SourceOnce, Patron } from "patron-oop";
+
+const source = new SourceOnce();
+
+source.value(new Patron((v) => {
+    document.querySelector(".guest-result").textContent = v;
+}));
+
+setTimeout(() => {
+    source.give(10)
+}, 1000);
+
+// Код ниже не имеет эффекта
+setTimeout(() => {
+    source.give(20)
+}, 2000);
+
+setTimeout(() => {
+    source.give(30)
+}, 3000);
+</script>