patron-oop 1.45.0 → 1.46.0

package/docs/pages/examples/errors.html

@@ -0,0 +1,167 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Обработка ошибок</h1>
+
+<p class="text-gray-600 text-lg mb-4">
+  При разработке приложений мы можем сделать общие точки перехвата ошибок,
+  например, с помощью window.onerror или window.onunhandledrejection(Для
+  промисов). Также можно использовать обработку ошибок через try-catch если
+  нужно детализировать ошибку.
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  В этом разделе рассмотрим подход при котором класс заранее объявляет, что ему
+  нужен гость для передачи сообщений ошибок.
+</p>
+
+<p class="text-gray-600 text-lg mb-1 font-bold">Результат 1.</p>
+<button
+  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"
+  onclick="random.do()"
+>
+  Случайное число
+</button>
+<div class="example mb-4">
+  <div>
+    <b>Число:</b>
+    <span class="guest-result"> Нажмите кнопку "Случайное число" </span>
+  </div>
+  <div>
+    <b>Сообщение:</b>
+    <span class="guest-message"> нет сообщений </span>
+  </div>
+  <div><b>Ошибка: </b><span class="guest-error"> нет ошибок </span></div>
+</div>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceActive, SourceEmpty, GuestCast, Patron } from "patron-oop";
+
+  class Random {
+    constructor(till) {
+      this.activeSource = new SourceActive((_, source) => {
+        source.give(Math.round(Math.random() * till));
+      });
+    }
+
+    do() {
+      this.activeSource.do();
+      return this;
+    }
+
+    value(guest) {
+      this.activeSource.value(guest);
+      return this;
+    }
+  }
+
+  window.random = new Random(99);
+
+  class EvenNumberMessage {
+    constructor(baseNumber, errorGuest) {
+      this.baseNumber = baseNumber;
+      this.errorGuest = errorGuest;
+    }
+
+    value(guest) {
+      this.baseNumber.value(
+        new GuestCast(guest, (value) => {
+          if (value % 2 === 0) {
+            guest.give(`${value} - четное!`);
+          } else {
+            this.errorGuest.give(`${value} - не четное!`);
+          }
+        })
+      );
+      return this;
+    }
+  }
+
+  const randomErrors = new SourceEmpty();
+  const randomMessage = new EvenNumberMessage(random, randomErrors);
+
+  random.value(
+    new Patron((val) => {
+      document.querySelector(".guest-result").textContent = val;
+    })
+  );
+  randomMessage.value(
+    new Patron((val) => {
+      document.querySelector(".guest-message").textContent = val;
+    })
+  );
+  randomErrors.value(
+    new Patron((val) => {
+      document.querySelector(".guest-error").textContent = val;
+    })
+  );
+</code></pre>
+
+<script type="module">
+  import { SourceActive, SourceEmpty, GuestCast, Patron } from "patron-oop";
+
+  class Random {
+    constructor(till) {
+      this.activeSource = new SourceActive((_, source) => {
+        source.give(Math.round(Math.random() * till));
+      });
+    }
+
+    do() {
+      this.activeSource.do();
+      return this;
+    }
+
+    value(guest) {
+      this.activeSource.value(guest);
+      return this;
+    }
+  }
+
+  window.random = new Random(99);
+
+  class EvenNumberMessage {
+    constructor(baseNumber, errorGuest) {
+      this.baseNumber = baseNumber;
+      this.errorGuest = errorGuest;
+    }
+
+    value(guest) {
+      this.baseNumber.value(
+        new GuestCast(guest, (value) => {
+          if (value % 2 === 0) {
+            guest.give(`${value} - четное!`);
+          } else {
+            this.errorGuest.give(`${value} - не четное!`);
+          }
+        })
+      );
+      return this;
+    }
+  }
+
+  const randomErrors = new SourceEmpty();
+  const randomMessage = new EvenNumberMessage(random, randomErrors);
+
+  random.value(
+    new Patron((val) => {
+      document.querySelector(".guest-result").textContent = val;
+    })
+  );
+  randomMessage.value(
+    new Patron((val) => {
+      document.querySelector(".guest-message").textContent = val;
+    })
+  );
+  randomErrors.value(
+    new Patron((val) => {
+      document.querySelector(".guest-error").textContent = val;
+    })
+  );
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  На уровне приложения, если нам нужно обрабатывать ошибки централизованно можно
+  создать один объект от класса SourceEmpty и передавать этот объект в качестве
+  посетителя для любых ошибок, что позволит собрать все ошибки в одном месте и
+  обработать.
+</p>

package/docs/pages/examples/index.html

@@ -0,0 +1,10 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">
+  Примеры использования Patron
+</h1>
+
+<p class="text-gray-600 text-lg mb-4">
+  В этом разделе собраны примеры того, как можно использовать библиотеку Patron.
+  В других разделах этой документации также есть примеры, но этот раздел создан
+  для демонстрации более сложных вариантов не привязанных к конктретным
+  особенностями библиотеки.
+</p>

package/docs/pages/examples.html

@@ -0,0 +1,41 @@
+<section class="text-gray-600 body-font">
+  <div class="py-1 mx-auto flex flex-col">
+    <div class="lg:w-4/6 mx-auto">
+      <div class="flex flex-col sm:flex-row">
+        <div class="sm:w-1/3 text-center">
+          <div
+            class="flex flex-col items-center text-center justify-center examples-menu"
+          >
+            <h2 class="font-medium title-font text-gray-900 text-lg">
+              <a href="/examples"> Примеры </a>
+            </h2>
+            <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+            <ul class="text-gray-900">
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/examples/errors"> Обработка ошибок </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="w-full sm:w-2/3 sm:pl-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 sm:mt-0"
+        >
+          <div class="examples-loader">
+            <div class="w-full flex justify-center">
+              <div
+                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                role="status"
+              >
+                <span
+                  class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+                  >Loading...</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="examples-page-area"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/pages/factory/index.html

@@ -0,0 +1,18 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">
+    Класс Factory
+</h1>
+
+<a href="https://github.com/kosukhin/patron/blob/main/src/Factory/Factory.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" />
+    Factory на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+    Предназначен для создания новых экземпляров GuestObjectType из функции-колбэка.
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+    Это поведение полезно в случаях, когда нужно динамически построить посетителя на основе функции, используя какие-то
+    переменные из скоупа, где создана функция.
+</p>

package/docs/pages/factory.html

@@ -0,0 +1,36 @@
+<section class="text-gray-600 body-font">
+  <div class="container px-5 py-1 mx-auto flex flex-col">
+    <div class="lg:w-4/6 mx-auto">
+      <div class="flex flex-col sm:flex-row">
+        <div class="sm:w-1/3 text-center">
+          <div
+            class="flex flex-col items-center text-center justify-center factory-menu"
+          >
+            <h2 class="font-medium title-font text-gray-900 text-lg">
+              Factory
+            </h2>
+            <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+          </div>
+        </div>
+        <div
+          class="sm:w-2/3 sm:pl-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 sm:mt-0"
+        >
+          <div class="factory-loader">
+            <div class="w-full flex justify-center">
+              <div
+                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                role="status"
+              >
+                <span
+                  class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+                  >Loading...</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="factory-page-area"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,51 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestApplied</h1>
+
+<a href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestApplied.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" />
+  GuestApplied на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  В случаях, когда есть уже готовая функция преобразования какого-то значения, то
+  эту функцию можно применить к существующему <link-dynamic href="/terminology/visitor">посетителю</link-dynamic>
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  В примере ниже, мы создаем гостя с примененной функцией удвоения значения.
+  В результате до оригинального <link-dynamic href="/terminology/the-guest">гостя</link-dynamic> guest из источника доходит значение не 40 а 80.
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4 w-full"
+><code class="language-js">import { Guest, GuestApplied, sourceOf } from "patron-oop";
+
+const guest = new Guest((value) => {
+  document.querySelector(
+    ".guest-result"
+  ).textContent = `Double value is ${value}`;
+});
+
+sourceOf(40).value(
+  new GuestApplied(guest, (x) => x * 2)
+);
+</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 { Guest, GuestApplied, sourceOf } from "patron-oop";
+
+  const guest = new Guest((value) => {
+    document.querySelector(
+      ".guest-result"
+    ).textContent = `Double value is ${value}`;
+  });
+
+  sourceOf(40).value(
+    new GuestApplied(guest, (x) => x * 2)
+  );
+</script>

package/docs/pages/guest/guest-cast.html

@@ -0,0 +1,219 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestCast</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestCast.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"
+  />
+  GuestCast на 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/introduction"
+    >
+      представления
+    </a>
+  </span>
+  посетителя (introduction). Принимает 2 аргумента, если первый посетитель
+  является -
+  <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-guest"
+    >
+      гостем
+    </a>
+  </span>
+  ('guest' или функция), то результирующий объект возьмет функциональность
+  второго посетителя и будет тоже гостем. Если первый посетитель является
+  <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-patron"
+    >
+      патроном
+    </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 {
+    give,
+    Patron,
+    SourceWithPool,
+    GuestCast,
+    removePatronFromPools,
+    isPatronInPools,
+  } from "patron-oop";
+
+  class NumberOnceATime {
+    constructor(number, delay) {
+      this.delay = delay;
+      this.theNumber = number;
+    }
+
+    number(guest) {
+      const source = new SourceWithPool(this.theNumber);
+      source.value(guest);
+      const repeat = () => {
+        if (!isPatronInPools(guest)) {
+          return;
+        }
+
+        setTimeout(() => {
+          source.give(this.theNumber);
+          repeat();
+        }, this.delay);
+      };
+      repeat();
+    }
+  }
+
+  class TotalSum {
+    constructor(numbers) {
+      this.numbers = numbers;
+    }
+
+    sum(guest) {
+      let totalSum = 0;
+      const source = new SourceWithPool(totalSum);
+      source.value(guest);
+      const numbersGuests = [];
+      this.numbers.forEach((numberSource, index) => {
+        const numberGuest = new GuestCast(guest, (value) => {
+          totalSum += value;
+          source.give(totalSum);
+        });
+        numberSource.number(numberGuest);
+        numbersGuests.push(numberGuest);
+      });
+
+      return numbersGuests;
+    }
+  }
+
+  let totalSumGuests = [];
+  const renderResult = new Patron((value) => {
+    const resultEl = document.querySelector(".guest-cast-result");
+    if (resultEl) {
+      resultEl.textContent = `Результат = ${value}`;
+    } else {
+      removePatronFromPools(renderResult);
+      totalSumGuests.forEach(removePatronFromPools);
+    }
+  }, "renderResult");
+  totalSumGuests = new TotalSum([
+    new NumberOnceATime(1, 1000),
+    new NumberOnceATime(10, 5000),
+    new NumberOnceATime(100, 10000),
+  ]).sum(renderResult);
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-cast-result">Результат = 0</span>
+</div>
+<script type="module">
+  import {
+    give,
+    Patron,
+    SourceWithPool,
+    GuestCast,
+    removePatronFromPools,
+    isPatronInPools,
+  } from "patron-oop";
+
+  class NumberOnceATime {
+    constructor(number, delay) {
+      this.delay = delay;
+      this.theNumber = number;
+    }
+
+    number(guest) {
+      const source = new SourceWithPool(this.theNumber);
+      source.value(guest);
+      const repeat = () => {
+        if (!isPatronInPools(guest)) {
+          return;
+        }
+
+        setTimeout(() => {
+          source.give(this.theNumber);
+          repeat();
+        }, this.delay);
+      };
+      repeat();
+    }
+  }
+
+  class TotalSum {
+    constructor(numbers) {
+      this.numbers = numbers;
+    }
+
+    sum(guest) {
+      let totalSum = 0;
+      const source = new SourceWithPool(totalSum);
+      source.value(guest);
+      const numbersGuests = [];
+      this.numbers.forEach((numberSource, index) => {
+        const numberGuest = new GuestCast(guest, (value) => {
+          totalSum += value;
+          source.give(totalSum);
+        });
+        numberSource.number(numberGuest);
+        numbersGuests.push(numberGuest);
+      });
+
+      return numbersGuests;
+    }
+  }
+
+  let totalSumGuests = [];
+  const renderResult = new Patron((value) => {
+    const resultEl = document.querySelector(".guest-cast-result");
+    if (resultEl) {
+      resultEl.textContent = `Результат = ${value}`;
+    } else {
+      removePatronFromPools(renderResult);
+      totalSumGuests.forEach(removePatronFromPools);
+    }
+  }, "renderResult");
+  totalSumGuests = new TotalSum([
+    new NumberOnceATime(1, 1000),
+    new NumberOnceATime(10, 5000),
+    new NumberOnceATime(100, 10000),
+  ]).sum(renderResult);
+</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="/utils/give"
+    >give</a
+  >
+  <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="/patron"
+    >Patron</a
+  >
+</p>