patron-oop 1.45.0 → 1.46.0

package/docs/pages/patron/patron-pool.html

@@ -0,0 +1,99 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс PatronPool</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Patron/PatronPool.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"
+  />
+  PatronPool на 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-patron"
+    >
+      патронов
+    </a>
+  </span>
+  , которым нужно передавать значения
+</p>
+
+<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>
+  . Сам по себе класс PatronPool - достаточно низкоуровневый и желательно
+  использовать класс Source, который именно является источником значений (у
+  Source под капотом работает PatornPool)
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre class="mb-4"><code class="language-js">import {
+    PatronPool,
+    Patron
+} from 'patron-oop';
+
+const pool = new PatronPool();
+
+pool.add(new Patron((value) => {
+    document.querySelector('.patron-pool-result1').textContent = value + ' 1';
+}));
+pool.add(new Patron((value) => {
+    document.querySelector('.patron-pool-result2').textContent = value + ' 2';
+}));
+
+pool.give('Значение из пула');
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <div class="patron-pool-result1">Нет результата 1!</div>
+  <div class="patron-pool-result2">Нет результата 2!</div>
+</div>
+<script type="module">
+  import { PatronPool, Patron } from "patron-oop";
+
+  const pool = new PatronPool();
+
+  pool.add(
+    new Patron((value) => {
+      document.querySelector(".patron-pool-result1").textContent = value + " 1";
+    })
+  );
+  pool.add(
+    new Patron((value) => {
+      document.querySelector(".patron-pool-result2").textContent = value + " 2";
+    })
+  );
+
+  pool.give("Значение из пула");
+</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
+  >
+  <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>

package/docs/pages/patron.html

@@ -0,0 +1,50 @@
+<section class="text-gray-600 body-font">
+  <div class="py-1 mx-auto flex flex-col w-full">
+    <div class="lg:w-4/6 mx-auto w-full">
+      <div class="flex flex-col sm:flex-row w-full">
+        <div class="sm:w-1/3 text-center">
+          <div
+            class="flex flex-col items-center text-center justify-center patron-menu"
+          >
+            <h2 class="font-medium title-font text-gray-900 text-lg">
+              <a href="/patron"> Patron </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="/patron/patron-once"> PatronOnce </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/patron/patron-pool"> PatronPool </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/patron/patron-applied"> PatronApplied </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/patron/patron-executor-applied"> PatronExecutorApplied </a>
+              </li>
+            </ul>
+          </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="patron-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="patron-page-area"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/pages/philosofy.html

@@ -0,0 +1,210 @@
+<section class="text-gray-600 body-font">
+  <div class="mx-auto flex py-1 items-center justify-center flex-col">
+    <div class="lg:w-2/3 w-full">
+      <h1 class="pb-3 text-xl font-semibold text-gray-600">
+        Tell don't ask + trust
+      </h1>
+      <img
+        class="float-left m-3 my-0"
+        src="./assets/img/philosofy/tell.jpg"
+        width="150"
+        height="200"
+      />
+      <p class="text-gray-600 text-lg mb-4">
+        Идея проекта зародилась из принципа
+        <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="https://toolshed.com/articles/1998-07-01-TellDontAsk.html"
+          target="_blank"
+          >Tell don't ask</a
+        >. Оригинальная версия принципа говорит о том, что мы не должны
+        принимать решение какой метод объекта вызывать на основе данных от этого
+        объекта, а должны просто сказать объекту, что он должен сделать
+      </p>
+      <p class="text-gray-600 text-lg mb-4">
+        Этот принцип натолкнул на размышления о том, как на самом деле объекты в
+        программе общаются друг с другом. Когда объект А вызывает метод объекта
+        B и ожидает результат, который будет возвращен методом объекта B через
+        return, такая организация кода заставляет объект B отвечать даже в те
+        моменты, когда у объекта B нет какого-то хорошего, значащего результата
+      </p>
+      <p class="text-gray-600 text-lg mb-4">
+        Такая ситуация при использовании return заставляет объекты подобные B
+        возвращать не полные результаты или вообще не возвращать результаты.
+        Например, если объект B работает асинхронно, обращаясь к серверу, то
+        объект B не может вернуть значение в условиях JS. Объект B может вернуть
+        только Promise - обещание того что значение будет когда-то позже, но
+        проблема в том, что сам объект B больше не отвечает за этот результат,
+        результат может вернуться, а может и не вернуться, даже если мы
+        обработаем ошибку с помощью catch мы все равно обязаны что-то отвечать
+        ожидающему объекту, что - то не значащее, что нужно будет перепроверять,
+        а следовательно доверие к объекту B пропадет, каждый его ответ нужно
+        проверять
+      </p>
+      <p class="text-gray-600 text-lg mb-4">
+        Также возможна ситуация, что у объекта B просто нет ответа и нам
+        приходится возвращать null, а null переносит ответственность на объект
+        который общается с объектом B. И получается что с объектом B уже
+        общаться не приятно, потому что он не может гарантировать результат, его
+        все время нужно перепроверять, никто ему не доверяет
+      </p>
+      <div class="clear-both"></div>
+      <h2 class="pb-3 text-xl font-semibold text-gray-600">Responsible</h2>
+      <img
+        class="float-left m-3 my-0"
+        src="./assets/img/philosofy/responsible.jpg"
+        width="150"
+        height="200"
+      />
+      <p class="text-gray-600 text-lg mb-4">
+        Всё что описано выше под заголовком <b>Tell don't ask</b> говорит нам о
+        том, что хороший объект должен уметь отвечать за те результаты, которые
+        другие объекты ожидают от него получить. И чтобы реализация этой
+        ответственности за результат стала возможной - объект у которого
+        результат есть должен видеть того, кому этот результат нужен, чтобы
+        полностью контролировать отдачу результата своему
+        <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/visitor"
+          >
+            посетителю
+          </a>
+        </span>
+        Вокруг этой ключевой идеи и построена вся библиотека. Посетители объекта
+        делятся на
+        <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>
+        - те кому сообщить значение нужно один раз и забыть о нем пока он сам не
+        вернется если захочет и
+
+        <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>
+        - те кому нужно постоянно сообщать о новых значениях, пока они сами не
+        решат удалиться из
+        <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="/patron/patron-pool"
+          >
+            пула патронов
+          </a>
+        </span>
+      </p>
+      <div class="clear-both"></div>
+      <h2 class="pb-3 text-xl font-semibold text-gray-600">Result</h2>
+      <img
+        class="float-left m-3 my-0"
+        src="./assets/img/philosofy/result.jpg"
+        width="150"
+        height="200"
+      />
+      <p class="text-gray-600 text-lg mb-4">
+        Из того что написано под заголовком <b>Responsible</b> можно сделать
+        вывод что использование Библиотеки Patron накладывает на вас ограничение
+        - не использовать return, а вместо этого возвращать данные посетителю
+        вызывая его метод give, либо пользуясь отдельной функцией
+        <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="/utils/give"
+          >
+            give
+          </a>
+        </span>
+      </p>
+      <p class="text-gray-600 text-lg mb-4">
+        Но в этом разделе(Result) хотелось бы отметить еще одну важную
+        философскую основу, на которую идет опора при разработке на библиотеке
+        Patron. Классы(статический код class) которые мы создаем считаются
+        результатом который нам нужен по нашей логике, позже при создании
+        объекта из класса мы получаем частично примененную версию класса тот же
+        класс с привязанными данными к нему и позже, чтобы получить конкретный
+        результат вычисления в виде данных нам нужно вызвать метод объекта.
+        Последовательность описанная в предыдущем предложении противоположна
+        процедурной последовательности выполнения - сначала вычисление потом
+        результат. Программируя в ООП стиле мы имеем результаты раньше чем
+        происходит вычисление. Наши классы и есть представления нужных нам
+        результатов. Эта идея считается ключевой для понимания принципа
+        разработки последующего кода. Мы создаем большой результат, потом
+        создаем результаты поменьше нужные большому, и так далее пока не опишем
+        наше приложение. Пирамида результатов строится сверху вниз от самого
+        важного для нашей бизнес логики к менее важному и более конкретному
+        (конкретность тут в смысле относящийся к вычислению на компьютере)
+      </p>
+      <div class="clear-both"></div>
+      <h2 class="pb-3 text-xl font-semibold text-gray-600">
+        Посетитель + Наблюдатель
+      </h2>
+      <img
+        class="float-left m-3 my-0"
+        src="./assets/img/philosofy/observable.jpg"
+        width="150"
+        height="200"
+      />
+      <p class="text-gray-600 text-lg mb-4">
+        Можно сказать, что библиотека Patron построена на основе(или
+        вдохновлена) двух паттернов(или двумя паттернами) ООП: Наблюдатель и
+        Посетитель. Объекты имеющие данные не отдают их неизвестно кому
+        (оператором return), а вместо этого ждут посетителя и отдают данные
+        вежливому посетителю который пришел и
+        <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>
+        Посетитель может представиться патроном, что для объекта источника
+        данных будет значить что в случае если у этого объекта будут новые
+        данные, то патрону будет интересно об этих данных узнать. Общение между
+        объектами происходит уважительно, никто никого не использует и не
+        принуждает давать ответы. Если источнику данных нечего сказать, то он
+        может просто молчать и не давать бесполезные ответы
+      </p>
+      <div class="clear-both"></div>
+      <h2 class="pb-3 text-xl font-semibold text-gray-600">
+        Потребители и Источники
+      </h2>
+      <p class="text-gray-600 text-lg mb-4">
+        Библиотека выделяет две основные категории классов. Первая - потребители
+        это классы или функции совместимые с интерфейсом
+        <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="https://github.com/kosukhin/patron/blob/main/src/Guest/Guest.ts#L17"
+        >
+          GuestType
+        </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="https://github.com/kosukhin/patron/blob/main/src/Source/Source.ts#L3-L5"
+        >
+          SourceType
+        </a>
+      </p>
+      <p class="text-gray-600 text-lg mb-4">
+        Хороший пример разделения на потребители и источники это классы для
+        описания <b>REST</b>, например запросы с методом <b>GET</b> это
+        источники данных, потому что могут отдать данные после получения ответа
+        от сервера, а запросы с методами <b>PUT</b>, <b>POST</b>,
+        <b>DELETE</b> это потребители, потому что могут совершить действие после
+        получения данных.
+      </p>
+    </div>
+  </div>
+</section>

package/docs/pages/source/index.html

@@ -0,0 +1,167 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс Source</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/Source.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"
+  />
+  Source на 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,
+    give
+} from 'patron-oop';
+
+const timestamp = new Source((guest) => {
+    give(Date.now(), guest);
+});
+timestamp.value((timestamp) => {
+    console.log('timestamp is', timestamp);
+});
+</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, give } from "patron-oop";
+
+  const timestamp = new Source((guest) => {
+    give(Date.now(), guest);
+  });
+  timestamp.value((timestamp) => {
+    document.querySelector(
+      ".guest-result"
+    ).textContent = `timestamp is ${timestamp}`;
+  });
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Источником данных может быть не только объект, но и функция вида
+  <em>(guest) => guest('value')</em>. Напрямую можно обратиться к такому
+  источнику через функцию
+  <link-reloadable
+    target-blank
+    href="https://github.com/kosukhin/patron/blob/main/src/Source/Source.ts#L11"
+  >
+    value
+  </link-reloadable>
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 2.</p>
+<pre class="mb-4"><code class="language-js">import {
+  give,
+  value
+} from "patron-oop";
+
+const helloSource = (guest) => {
+  setTimeout(() => {
+    give("Hello world", guest);
+  }, 1000);
+};
+
+value(helloSource, (greeting) => {
+  document.querySelector(
+    ".guest-result-2"
+  ).textContent = `greeting is "${greeting}"`;
+});
+</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">Result here</span>
+</div>
+<script type="module">
+  import { give, value } from "patron-oop";
+
+  const helloSource = (guest) => {
+    setTimeout(() => {
+      give("Hello world", guest);
+    }, 1000);
+  };
+
+  value(helloSource, (greeting) => {
+    document.querySelector(
+      ".guest-result-2"
+    ).textContent = `greeting is "${greeting}"`;
+  });
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Или можно передать источник-функцию в виде зависимости объектам, которые
+  ожидают интерфейс SourceType, в примере ниже используется комбинация
+  <link-dynamic href="/source/source-all">SourceAll</link-dynamic>
+  и источников-фукнций
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 3.</p>
+<pre class="mb-4"><code class="language-js">import {
+  SourceAll,
+  give,
+  value
+} from "patron-oop";
+
+const all = new SourceAll();
+value(give.bind(null, 1), all.guestKey("one"));
+value(give.bind(null, 2), all.guestKey("two"));
+
+all.value(({ one, two }) => {
+  document.querySelector(".guest-result-3").textContent = `one + two = "${
+    one + two
+  }"`;
+});
+</code></pre>
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 3.</p>
+<div class="example mb-4">
+  <span class="guest-result-3">Result here</span>
+</div>
+<script type="module">
+  import { SourceAll, give, value } from "patron-oop";
+
+  const all = new SourceAll();
+  value(give.bind(null, 1), all.guestKey("one"));
+  value(give.bind(null, 2), all.guestKey("two"));
+
+  all.value(({ one, two }) => {
+    document.querySelector(".guest-result-3").textContent = `one + two = "${
+      one + two
+    }"`;
+  });
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Интересный факт, что с помощью частичного применения(bind) можно превратить
+  функцию <b>give</b> в <b>источник данных</b>, передав только первый аргумент
+</p>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <link-dynamic href="/utils/give">give</link-dynamic>
+  <link-dynamic href="/utils/value">value</link-dynamic>
+</p>

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

@@ -0,0 +1,113 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс SourceActive</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Source/SourceActive.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"
+  />
+  SourceActive на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Класс
+  <link-dynamic href="/source">Source</link-dynamic> можно
+  назвать пассивным
+  <link-dynamic href="/terminology/the-source">источником данных</link-dynamic>,
+  потому что мы только вызываем его метод <b>value</b> и надеемся получить
+  данные, либо говорим что нас нужно уведомлять о новых данных. При этом никаких
+  активных действий совершать не требуется
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Класс <b>SourceActive</b> можно назвать активным источником данных. Чтобы
+  значение было рассчитано мы должны явно вызывать метод <b>do</b>. Подобные
+  классы полезны в случаях, когда вычисление нужно выполнить не сразу а по
+  событию
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Также можно отдельно использовать
+  <link-reloadable
+    target-blank
+    href="https://github.com/kosukhin/patron/blob/main/src/Guest/SourceActive.ts#L9"
+    >ActionType</link-reloadable
+  >
+  интерфейс для объявления своих собственных классов - активных источников
+  данных, имеющих метод do
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceActive, Patron } from "patron-oop";
+
+const eur = new SourceActive((_, source) => {
+    source.give("Loading...");
+    fetch("https://www.cbr.ru/scripts/XML_daily.asp")
+    .then((r) => r.text())
+    .then((r) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(r, "application/xml");
+        const eurNode = doc.querySelector('[ID="R01239"] Value');
+        source.give(eurNode.textContent);
+    });
+});
+
+eur.value(
+    new Patron((val) => {
+        document.querySelector(".guest-result").textContent = `EUR/RUB = ${val}`;
+    })
+);
+
+document
+    .getElementById("get-eur")
+    .addEventListener("click", eur.do.bind(eur));
+</code></pre>
+
+<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"
+  id="get-eur"
+>
+  Get EUR
+</button>
+<div class="example mb-4">
+  <span class="guest-result"> Нажмите кнопку "Get EUR" </span>
+</div>
+
+<script type="module">
+  import { SourceActive, Patron } from "patron-oop";
+
+  const eur = new SourceActive((_, source) => {
+    source.give("Loading...");
+    fetch("https://www.cbr.ru/scripts/XML_daily.asp")
+      .then((r) => r.text())
+      .then((r) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(r, "application/xml");
+        const eurNode = doc.querySelector('[ID="R01239"] Value');
+        source.give(eurNode.textContent);
+      });
+  });
+
+  eur.value(
+    new Patron((val) => {
+      document.querySelector(".guest-result").textContent = `EUR/RUB = ${val}`;
+    })
+  );
+
+  document
+    .getElementById("get-eur")
+    .addEventListener("click", eur.do.bind(eur));
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <link-dynamic href="/source">Source</link-dynamic>
+</p>