silentium 0.0.2 → 0.0.3

package/docs/assets/js/components/linkDynamic.mjs

@@ -0,0 +1,14 @@
+window.customElements.define(
+  "link-dynamic",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const href = this.getAttribute("href");
+      const content = this.innerHTML;
+      this.innerHTML = `<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 dynamic-navigation"
+            href="${href}"
+        >${content}</a>`;
+    }
+  },
+);

package/docs/assets/js/components/linkReloadable.mjs

@@ -0,0 +1,17 @@
+window.customElements.define(
+  "link-reloadable",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const href = this.getAttribute("href");
+      const target =
+        this.getAttribute("target-blank") !== null ? 'target="_blank"' : "";
+      const content = this.innerHTML;
+      this.innerHTML = `<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="${href}"
+            ${target}
+        >${content}</a>`;
+    }
+  },
+);

package/docs/assets/js/components.mjs

@@ -0,0 +1,2 @@
+import "./components/linkDynamic.mjs";
+import "./components/linkReloadable.mjs";

package/docs/assets/js/index.mjs

@@ -0,0 +1,74 @@
+import { CurrentPage, Link, Page, Router } from "silentium-components";
+import { Patron, PatronOnce, SourceWithPool, sourceOf } from "silentium";
+import { StyleFetched } from "./lib/StyleFetched.mjs";
+import { Fetched, Element, Attribute, StyleInstalled } from "silentium-web-api";
+import "./components.mjs";
+
+new StyleFetched(
+  "https://raw.githubusercontent.com/kosukhin/patorn-design-system/refs/heads/main/dist/assets/index.css",
+).install();
+
+const routing = new Router(".loader", ".page-area", ".menu");
+
+const [basePath] = window.location.href
+  .replace(window.location.origin, "")
+  .split("#");
+const cleanBasePath = basePath.replace(/[^/]+\.html$/, "");
+const currentPage = new CurrentPage();
+const basePathSource = new SourceWithPool(
+  `${basePath}#`.replace("index.html", "").replace("//", "/"),
+);
+
+const link = new Link(currentPage, basePathSource);
+link.watchClick(".global-body", "a.dynamic-navigation");
+
+const dynamicPage = new Page("Dynamic page");
+
+const errors = new SourceWithPool();
+const routesTransport = new Fetched(errors);
+
+routesTransport.do().give({
+  url: `${cleanBasePath}routes.json`,
+  asJson: true,
+});
+
+const styleLink = new Attribute(
+  new Element(sourceOf(".style-link")),
+  "data-style",
+);
+const styleTransport = new Fetched(errors);
+styleLink.value((url) => {
+  styleTransport.do().give({ url });
+});
+
+styleTransport.result().value(new PatronOnce(new StyleInstalled()));
+
+routesTransport.result().value(
+  new Patron((routes) => {
+    const dynamicRoutes = routes.map((route) => ({
+      url: "/" + route.replace("pages/", "").replace(".html", "").trim(),
+      template: route,
+      page: dynamicPage,
+    }));
+
+    routing.routes(
+      [
+        {
+          url: "/",
+          template: "pages/index.html",
+          aliases: [basePath, `${basePath}index.html`, ""],
+          page: new Page("Silentium"),
+        },
+        ...dynamicRoutes,
+        {
+          url: "",
+          template: "pages/404.html",
+          page: new Page("Страница не найдена"),
+          default: true,
+        },
+      ],
+      currentPage,
+      basePathSource,
+    );
+  }),
+);

package/docs/assets/js/lib/StyleFetched.mjs

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */
+
+export class StyleFetched {
+  constructor(styleUrl) {
+    this.styleUrl = styleUrl;
+  }
+
+  install() {
+    window
+      .fetch(this.styleUrl)
+      .then((r) => r.text())
+      .then((styleContent) => {
+        const styleEl = window.document.createElement("style");
+        styleEl.textContent = styleContent;
+        window.document.head.appendChild(styleEl);
+        window.document.body.classList.remove("body-loading");
+      });
+  }
+}

package/docs/build.sh

@@ -3,11 +3,11 @@
 echo "BEGIN"
 cd docs
 cp template.html index.html
-sed -i "s/TPL_SILENTIUM_OOP/https:\/\/cdn.jsdelivr.net\/npm\/patron-oop@1.46.0\/dist\/patron.min.mjs/g" "index.html"
+sed -i "s/TPL_SILENTIUM_OOP/https:\/\/cdn.jsdelivr.net\/npm\/silentium@0.0.2\/dist\/silentium.min.mjs/g" "index.html"
 
-sed -i "s/TPL_SILENTIUM_WEB_API/https:\/\/cdn.jsdelivr.net\/npm\/patron-web-api@1.14.0\/dist\/patron-web-api.min.mjs/g" "index.html"
+sed -i "s/TPL_SILENTIUM_WEB_API/https:\/\/cdn.jsdelivr.net\/npm\/silentium-web-api@0.0.1\/dist\/silentium-web-api.min.mjs/g" "index.html"
 
-sed -i "s/TPL_SILENTIUM_COMPONENTS/https:\/\/cdn.jsdelivr.net\/npm\/patron-oop-components@1.20.0\/dist\/patron-components.min.mjs/g" "index.html"
+sed -i "s/TPL_SILENTIUM_COMPONENTS/https:\/\/cdn.jsdelivr.net\/npm\/silentium-components@0.0.1\/dist\/silentium-components.min.mjs/g" "index.html"
 
 
 cp template.html index-dev.html
@@ -17,4 +17,8 @@ sed -i "s/TPL_SILENTIUM_WEB_API/http:\/\/127.0.0.1:5501\/dist\/silentium-web-api
 
 sed -i "s/TPL_SILENTIUM_COMPONENTS/http:\/\/127.0.0.1:5500\/dist\/silentium-components.min.mjs/g" "index-dev.html"
 
+sed -i "s/TPL_SILENTIUM_DESIGN/http:\/\/127.0.0.1:5502\/docs\/assets\/css\/custom.css/g" "index-dev.html"
+
 echo "DONE!"
+
+./buildRoutes.sh

package/docs/buildRoutes.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+to_json_array() {
+  local dir="$1"
+  local output="$2"
+
+  # Используем mapfile для чтения списка файлов
+  mapfile -t files < <(find "$dir" -type f)
+
+  # Преобразуем массив в JSON с помощью jq
+  echo "$(echo ${files[@]} | jq -Rsc 'split(" ")')" > "$output"
+}
+
+# Вызываем функцию с аргументами: директорией и именем выходного файла
+to_json_array "pages" "routes.json"

package/docs/index-dev.html

@@ -17,87 +17,11 @@
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="./assets/favicon/apple-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="./assets/favicon/apple-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="./assets/favicon/apple-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="./assets/favicon/apple-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="./assets/favicon/apple-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="./assets/favicon/apple-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="./assets/favicon/apple-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="./assets/favicon/apple-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./assets/favicon/apple-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="./assets/favicon/android-icon-192x192.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="./assets/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="./assets/favicon/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="./assets/favicon/favicon-16x16.png"
-    />
-    <link
-      rel="manifest"
-      href="./manifest.json"
-    />
+    <link rel="icon" href="./favicon.ico" type="image/x-icon" />
     <meta
       name="msapplication-TileColor"
       content="#ffffff"
     />
-    <meta
-      name="msapplication-TileImage"
-      content="./assets/favicon/ms-icon-144x144.png"
-    />
     <meta
       name="theme-color"
       content="#ffffff"
@@ -109,7 +33,7 @@
     <script type="importmap">
       {
         "imports": {
-          "silentium-oop": "http://127.0.0.1:5502/dist/silentium.min.mjs",
+          "silentium": "http://127.0.0.1:5502/dist/silentium.min.mjs",
           "silentium-web-api": "http://127.0.0.1:5501/dist/silentium-web-api.min.mjs",
           "silentium-components": "http://127.0.0.1:5500/dist/silentium-components.min.mjs"
         }
@@ -130,7 +54,7 @@
             class="ml-3 text-xl flex gap-2 items-center"
           >
             <img
-              src="./assets/img/logo.jpg"
+              src="./assets/img/logo.svg"
               width="40"
               height="44"
             />
@@ -339,7 +263,7 @@
       </div>
     </footer>
     <script
-      src="./assets/js/entrypoints/index.mjs"
+      src="./assets/js/index.mjs"
       type="module"
     ></script>
   </body>

package/docs/index.html

@@ -17,87 +17,11 @@
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="./assets/favicon/apple-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="./assets/favicon/apple-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="./assets/favicon/apple-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="./assets/favicon/apple-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="./assets/favicon/apple-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="./assets/favicon/apple-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="./assets/favicon/apple-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="./assets/favicon/apple-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./assets/favicon/apple-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="./assets/favicon/android-icon-192x192.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="./assets/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="./assets/favicon/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="./assets/favicon/favicon-16x16.png"
-    />
-    <link
-      rel="manifest"
-      href="./manifest.json"
-    />
+    <link rel="icon" href="./favicon.ico" type="image/x-icon" />
     <meta
       name="msapplication-TileColor"
       content="#ffffff"
     />
-    <meta
-      name="msapplication-TileImage"
-      content="./assets/favicon/ms-icon-144x144.png"
-    />
     <meta
       name="theme-color"
       content="#ffffff"
@@ -109,9 +33,9 @@
     <script type="importmap">
       {
         "imports": {
-          "silentium-oop": "https://cdn.jsdelivr.net/npm/patron-oop@1.46.0/dist/patron.min.mjs",
-          "silentium-web-api": "https://cdn.jsdelivr.net/npm/patron-web-api@1.14.0/dist/patron-web-api.min.mjs",
-          "silentium-components": "https://cdn.jsdelivr.net/npm/patron-oop-components@1.20.0/dist/patron-components.min.mjs"
+          "silentium": "https://cdn.jsdelivr.net/npm/silentium@0.0.2/dist/silentium.min.mjs",
+          "silentium-web-api": "https://cdn.jsdelivr.net/npm/silentium-web-api@0.0.1/dist/silentium-web-api.min.mjs",
+          "silentium-components": "https://cdn.jsdelivr.net/npm/silentium-components@0.0.1/dist/silentium-components.min.mjs"
         }
       }
     </script>
@@ -130,7 +54,7 @@
             class="ml-3 text-xl flex gap-2 items-center"
           >
             <img
-              src="./assets/img/logo.jpg"
+              src="./assets/img/logo.svg"
               width="40"
               height="44"
             />
@@ -339,7 +263,7 @@
       </div>
     </footer>
     <script
-      src="./assets/js/entrypoints/index.mjs"
+      src="./assets/js/index.mjs"
       type="module"
     ></script>
   </body>

package/docs/pages/compatibility/elegant-objects.html

@@ -96,8 +96,8 @@
     SourceAll,
     GuestCast,
     GuestDisposable,
-  } from "patron-oop";
-  import { Text, Input } from "patron-components";
+  } from "silentium";
+  import { Text, Input } from "silentium-components";
 
   class NumberFromTimer {
     timerHead = null;
@@ -245,8 +245,8 @@
   SourceAll,
   GuestCast,
   GuestDisposable,
-} from "patron-oop";
-import { Text, Input } from "patron-components";
+} from "silentium";
+import { Text, Input } from "silentium-components";
 
 // Переместил клиентский код наверх,
 // чтобы не крутить до самой интересной части.

package/docs/pages/examples/errors.html

@@ -34,7 +34,7 @@
 <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";
+><code class="language-js">import { SourceActive, SourceEmpty, GuestCast, Patron } from "silentium";
 
   class Random {
     constructor(till) {
@@ -97,7 +97,7 @@
 </code></pre>
 
 <script type="module">
-  import { SourceActive, SourceEmpty, GuestCast, Patron } from "patron-oop";
+  import { SourceActive, SourceEmpty, GuestCast, Patron } from "silentium";
 
   class Random {
     constructor(till) {

package/docs/pages/examples.html

@@ -12,7 +12,7 @@
             <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>
+                <a class="dynamic-navigation" href="/examples/errors"> Обработка ошибок </a>
               </li>
             </ul>
           </div>
@@ -20,19 +20,17 @@
         <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>
+          <h1 class="pb-3 text-xl font-semibold text-gray-600">
+            Примеры использования Patron
+          </h1>
+
+          <p class="text-gray-600 text-lg mb-4">
+            В этом разделе собраны примеры того, как можно использовать библиотеку Patron.
+            В других разделах этой документации также есть примеры, но этот раздел создан
+            для демонстрации более сложных вариантов не привязанных к конктретным
+            особенностями библиотеки.
+          </p>
+
           <div class="examples-page-area"></div>
         </div>
       </div>

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

@@ -1,3 +1,8 @@
+<div class="breadcrumbs mb-4">
+  <link-dynamic href="/">Главная</link-dynamic>
+  <link-dynamic href="/guest">Guest</link-dynamic>
+</div>
+
 <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"
@@ -13,13 +18,13 @@
 
 <p class="text-gray-600 text-lg mb-4">
   В примере ниже, мы создаем гостя с примененной функцией удвоения значения.
-  В результате до оригинального <link-dynamic href="/terminology/the-guest">гостя</link-dynamic> guest из источника доходит значение не 40 а 80.
+  В результате до оригинального <link-dynamic href="/terminology/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";
+><code class="language-js">import { Guest, GuestApplied, sourceOf } from "silentium";
 
 const guest = new Guest((value) => {
   document.querySelector(
@@ -29,15 +34,14 @@ const guest = new Guest((value) => {
 
 sourceOf(40).value(
   new GuestApplied(guest, (x) => x * 2)
-);
-</code></pre>
+);</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";
+  import { Guest, GuestApplied, sourceOf } from "silentium";
 
   const guest = new Guest((value) => {
     document.querySelector(

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

@@ -1,3 +1,8 @@
+<div class="breadcrumbs mb-4">
+  <link-dynamic href="/">Главная</link-dynamic>
+  <link-dynamic href="/guest">Guest</link-dynamic>
+</div>
+
 <h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestCast</h1>
 
 <a
@@ -15,34 +20,23 @@
 
 <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>
+  <link-dynamic href="/terminology/introduction"    >
+    представления
+  </link-dynamic>
   посетителя (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>
+  <link-dynamic
+    href="/terminology/guest"
+  >
+    гостем
+  </link-dynamic>
   ('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>
+  <link-dynamic
+    href="/terminology/patron"
+  >
+    патроном
+  </link-dynamic>
   , то результирующий объект возьмет функциональность второго посетителя, но
   будет так же патроном как и первый посетитель
 </p>
@@ -61,7 +55,7 @@
     GuestCast,
     removePatronFromPools,
     isPatronInPools,
-  } from "patron-oop";
+  } from "silentium";
 
   class NumberOnceATime {
     constructor(number, delay) {
@@ -138,7 +132,7 @@
     GuestCast,
     removePatronFromPools,
     isPatronInPools,
-  } from "patron-oop";
+  } from "silentium";
 
   class NumberOnceATime {
     constructor(number, delay) {