Minify

2026-04-09 22:16:28 +04:00 · 2026-04-09 22:16:28 +04:00 · 6687d61966
commit 6687d61966
parent f6b89012e5
7 changed files with 33915 additions and 43 deletions
--- a/DOCS.md
+++ b/DOCS.md
@ -117,7 +117,7 @@ app.select("com.example");
 // Добавление
 app.add(['<button>123</button>']);
 app.draw();
-const map = app.map();
+const map = app.map(); // Или app.component()
 map.root // Доступ к элементу DOM
 map.app(); // Исходный элемент Find
 map.merge(); // Объединить HTML в элемент
--- a/Find/Find.js
+++ b/Find/Find.js
@ -107,11 +107,7 @@ class FindObjectMap {
    }
 }

-const tags = {
-    "mobile" : `<meta name="viewport" content="width=device-width, initial-scale=1"></meta>`
-}
-
-export default class {
+export default class Find {

    /* Public section */

@ -124,8 +120,8 @@ export default class {
        return this;
    }

-    static tags(name) {
-        return tags[name];
+    static createApp() {
+        return Find;
    }

    static attach(x, f) {
@ -136,6 +132,14 @@ export default class {
        return `<link rel="stylesheet" href="${text.replace("\"", "&quot;")}"></link>`;
    }

+    static js(text) {
+        return `<script src="${text.replace("\"", "&quot;")}"></script>`;
+    }
+
+    static content(text) {
+        return text;
+    }
+
    static search(name) {
        return document.getElementById(name);
    }
@ -271,6 +275,10 @@ export default class {
        return this;
    }

+    component() {
+        return this.map();
+    }
+
    title(id_, html_) {
        let id = undefined;
        let html = undefined;
@ -373,6 +381,9 @@ export default class {
    }

    map() {
+        if (typeof this.__id === "undefined") {
+            PrivateFind.findTypeError(this.__id, "number или string")
+        }
        return this._map;
    }

--- a/README.md
+++ b/README.md
@ -13,4 +13,5 @@ cp -rv Find/* ~/Find_js
 cd ~/Find
 php -S localhost:8000
 # Откройте http://localhost:8000
+# Эта страница позволит получить минифицированную версию Find.js
 ```
--- a/index.html
+++ b/index.html
@ -32,8 +32,9 @@
 </head>

 <body>
-	<div id="test"></div>
-	<script type="module" src="test.js"></script>
+	<div id="root"></div>
+   <script src="terser.min.js"></script>
+	<script type="module" src="index.js"></script>
 </body>

 </html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,105 @@
+import Find from './Find/Find.js';
+
+const ROOT_OBJECT = 'root';
+
+class MyApp extends Find.createApp() {
+    constructor(name) {
+        const root = Find.search(name);
+        super(root);
+    }
+
+    init() {
+        this.select('com.example');
+        this.setMeta();
+        this.setTitle();
+        this.setForms();
+        this.render();
+        this.attachEvents();
+    }
+
+    setMeta() {
+        this.meta([
+            Find.css('bulma.min.css'),
+            Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
+            Find.content(
+                `<style>
+                    body {
+                        margin: 20px;
+                    }
+                </style>`
+            )
+        ]);
+    }
+
+    setTitle() {
+        this.title('Минификатор FInd.js на Find.js');
+    }
+
+    setForms() {
+        this.add([
+            Find.content(
+                `<div class="card">
+                    <div class="card-header">
+                        <p id="title" class="card-header-title">Минификация Find.js</p>
+                    </div>
+                    <div class="card-content">
+                        <div class="content">
+                            <button 
+                                class="button"  
+                                id="minify"
+                                style="width: 100%"
+                            >Минифицировать</button>
+                        </div>
+                    </div>
+                </div>`
+            )
+        ]);
+    }
+
+    mwait(t) {
+        const root = app.component();
+        const title = root.id('title');
+        if (t === true) {
+            title.text('Минификация Find.js в процессе...');
+        } else {
+            if (typeof t === "string") {
+                title.text(t);
+            } else {
+                title.text('Минификация Find.js');
+            }
+        }
+    }
+
+    attachEvents() {
+        const root = this.component();
+        const button = root.id('minify');
+        button.attach('click', (app) => {
+            this.mwait(true);
+            this.minifyFind();
+        });
+    }
+
+    async minifyFind() {
+        let response = await fetch('Find/Find.js');
+        if (response.ok) {
+            let code = await response.text();
+            let minif = await Terser.minify(code, { sourceMap: false });
+            this.uploadJS("find.min.js", minif.code);
+            this.mwait(false);
+        } else {
+            this.mwait("Ошибка HTTP: " + response.status);
+        }
+    }
+
+    uploadJS(filename, content) {
+        const blob = new Blob([content], { type: 'application/javascript' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+        URL.revokeObjectURL(link.href);
+    }
+}
+
+const app = new MyApp(ROOT_OBJECT);
+app.init();
--- a/terser.min.js
+++ b/terser.min.js
--- a/test.js
+++ b/test.js
@ -1,33 +0,0 @@
-import Find from "./Find/Find.js";
-let app = new Find(Find.search("test")).select("com.example").title("Мой тест").meta([
-    Find.css("bulma.min.css"), 
-    '<meta name="viewport" content="width=device-width, initial-scale=1">'
-]).meta([
-    `<style>
-        body {
-            margin: 20px;
-        }
-    </style>`
-]).add([(() => {
-    return `
-        <input class="input" type="text" placeholder="Логин..."></input><br>
-        <input 
-            class="input" 
-            style="margin-top: 10px;" 
-            type="password" placeholder="Пароль...">
-        </input>
-        <br>
-        <button class="button" style="margin-top: 10px;">Войти</button>
-        <div id="user"></div>
-    `;
-})()]).draw().map().id("user").html(
-    `<button 
-        class="button"  
-        id="reload"
-        style="margin-top: 10px;"
-    >Перезагрузить</button>`).id("reload").attach("click", () => {
-        location.reload();
-    }).main().merge().app().title(2).draw();
-    /*.title(2).draw();*/
-
-