@adaas/are-html 0.0.20 → 0.0.22

package/examples/dashboard/src/concept.ts

@@ -64,7 +64,7 @@ import { AreDirectiveIf, AreDirectiveFor, AreHTMLEngineContext, AreHTMLEngine, A
 
                 new A_Config({
                     defaults: {
-                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'info',
+                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'debug',
                     }
                 }),
             ]
@@ -73,8 +73,9 @@ import { AreDirectiveIf, AreDirectiveFor, AreHTMLEngineContext, AreHTMLEngine, A
         const concept = new A_Concept({
             name: 'adaas-are-example-dashboard',
             fragments: [new A_Config({
-                variables: ['CONFIG_VERBOSE', 'DEV_MODE'] as const,
+                variables: ['CONFIG_VERBOSE', 'DEV_MODE', A_LOGGER_ENV_KEYS.LOG_LEVEL] as const,
                 defaults: {
+                    [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'debug',
                     CONFIG_VERBOSE: true,
                     DEV_MODE: true
                 }

package/examples/for-perf/concept.ts

@@ -0,0 +1,45 @@
+import { A_Concept, A_Context } from "@adaas/a-concept"
+import { UIContainer } from "./containers/UI.container"
+import { A_Logger, A_LoggerEnvVariables } from "@adaas/a-utils/a-logger";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import { A_Config, ENVConfigReader } from "@adaas/a-utils/a-config";
+
+
+(async () => {
+    try {
+        const Application = new UIContainer({
+            name: 'ARE For-Perf',
+            components: [
+                A_Polyfill,
+                ENVConfigReader,
+                A_Logger
+            ],
+            fragments: [
+                new A_Config({
+                    defaults: {
+                        PORT: 8085,
+                        CONFIG_VERBOSE: true,
+                        DEV_MODE: true,
+                        // Logger at debug so $for transform/update traces are visible
+                        [A_LoggerEnvVariables.A_LOGGER_LEVEL]: 'debug',
+                    }
+                }),
+            ]
+        });
+
+
+        const concept = new A_Concept({
+            name: 'adaas-are-example-for-perf',
+            components: [A_Logger, A_Polyfill, ENVConfigReader],
+            containers: [Application],
+        })
+
+        await concept.load();
+        await concept.start();
+
+
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+})();

package/examples/for-perf/containers/UI.container.ts

@@ -0,0 +1,161 @@
+import { A_Concept, A_IdentityHelper, A_Inject } from "@adaas/a-concept"
+import { A_Config } from "@adaas/a-utils/a-config";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { A_Service } from "@adaas/a-utils/a-service";
+import { build } from "esbuild";
+import fs from "fs";
+import http from "http";
+import path from "path";
+
+
+
+export class UIContainer extends A_Service {
+
+    protected server!: any;
+
+    @A_Concept.Build()
+    async build(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ): Promise<void> {
+        logger.log('Building UI Container...', process.cwd());
+        const entryFile = path.resolve(__dirname, "../src/concept.ts");
+        const BundleID = A_IdentityHelper.generateTimeId();
+        const outFile = path.resolve(__dirname, `../dist/${BundleID}.js`);
+
+
+        //  first to drop folder if exists
+        if (fs.existsSync(path.resolve(__dirname, "../dist"))) {
+            fs.rmSync(path.resolve(__dirname, "../dist"), { recursive: true, force: true });
+        }
+
+
+        //  STEP1 generate Bundle
+        await build({
+            entryPoints: [entryFile],
+            outfile: outFile,
+            bundle: true,
+            minify: false,
+            keepNames: true,
+            sourcemap: false,
+            target: "es2020",
+            format: "esm",
+        });
+
+        logger.log('green', 'UI Container built successfully.');
+
+
+        //  STEP 2 replace bundle id in index.html with {{BUNDLE_ID}}
+        let indexHtml = await fs.promises.readFile(path.resolve(__dirname, "../public/index.html"), 'utf-8');
+        indexHtml = indexHtml.replace('{{BUNDLE_ID}}', BundleID);
+        await fs.promises.writeFile(path.resolve(__dirname, `../dist/${BundleID}.js`), await fs.promises.readFile(outFile));
+        await fs.promises.writeFile(path.resolve(__dirname, "../dist/index.html"), indexHtml);
+
+        logger.log('green', 'UI Container index.html updated successfully with bundle id.');
+
+
+        //  Step3 copy static assets and directories recursively
+        const publicDir = path.resolve(__dirname, "../public");
+        const distDir = path.resolve(__dirname, "../dist");
+
+        const copyRecursive = async (src: string, dest: string) => {
+            const entries = await fs.promises.readdir(src, { withFileTypes: true });
+            await fs.promises.mkdir(dest, { recursive: true });
+
+            for (const entry of entries) {
+                const srcPath = path.join(src, entry.name);
+                const destPath = path.join(dest, entry.name);
+
+                if (entry.isDirectory()) {
+                    await copyRecursive(srcPath, destPath);
+                } else {
+                    if (entry.name !== 'index.html') {
+                        await fs.promises.copyFile(srcPath, destPath);
+                    }
+                }
+            }
+        };
+
+        await copyRecursive(publicDir, distDir);
+
+        logger.log('green', 'UI Container static assets copied successfully.');
+    }
+
+
+
+    @A_Concept.Load()
+    async preLoadBuild(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ) {
+        await this.build(logger, config);
+    }
+
+
+    @A_Concept.Start()
+    async startStaticServer(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ) {
+        this.server = http.createServer(this.serverStaticFiles.bind(this));
+
+        const PORT = config.get('PORT') || 8085;
+
+        this.server.listen(PORT, () => {
+            logger.log('green', `UI Container Static Server is running at http://localhost:${PORT}`);
+        });
+    }
+
+
+    protected async serverStaticFiles(
+        req: http.IncomingMessage,
+        res: http.ServerResponse,
+    ) {
+        const url = req.url || '/';
+        let filePath = path.join(__dirname, '../dist', url === '/' ? 'index.html' : url);
+
+        const logger = this.scope.resolve<A_Logger>(A_Logger)!;
+        logger.log('blue', `Serving file: ${filePath}`);
+
+
+        const extname = String(path.extname(filePath)).toLowerCase();
+        const mimeTypes: { [key: string]: string } = {
+            '.html': 'text/html',
+            '.js': 'text/javascript',
+            '.css': 'text/css',
+            '.json': 'application/json',
+            '.png': 'image/png',
+            '.jpg': 'image/jpg',
+            '.gif': 'image/gif',
+            '.svg': 'image/svg+xml',
+            '.woff': 'application/font-woff',
+            '.ttf': 'application/font-ttf',
+            '.eot': 'application/vnd.ms-fontobject',
+            '.otf': 'application/font-otf',
+            '.wasm': 'application/wasm'
+        };
+
+        const contentType = mimeTypes[extname] || 'application/octet-stream';
+
+        if (!fs.existsSync(filePath)) {
+            logger.log('yellow', `File not found: ${filePath}, serving index.html instead.`);
+            filePath = path.join(__dirname, '../dist', 'index.html');
+        }
+
+        fs.readFile(filePath, (error, content) => {
+            if (error) {
+                if (error.code === 'ENOENT') {
+                    res.writeHead(404, { 'Content-Type': 'text/plain' });
+                    res.end('404 Not Found', 'utf-8');
+                } else {
+                    res.writeHead(500);
+                    res.end(`Server Error: ${error.code}`, 'utf-8');
+                }
+            } else {
+                res.writeHead(200, { 'Content-Type': contentType });
+                res.end(content, 'utf-8');
+            }
+        });
+    }
+
+}

package/examples/for-perf/dist/index.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE $for Performance Lab</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f0f17;
+      color: #e5e7eb;
+    }
+
+    are-root {
+      display: block;
+      min-height: 100vh;
+    }
+
+    .app {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px 20px 60px;
+    }
+
+    /* ---------- header ---------- */
+    .header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #23232f;
+      flex-wrap: wrap;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .logo {
+      font-size: 22px;
+      color: #7c3aed;
+    }
+
+    .title {
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .subtitle {
+      font-size: 12px;
+      color: #8b8b9b;
+    }
+
+    /* ---------- legend ---------- */
+    .legend {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin: 18px 0 10px;
+    }
+
+    .legend-card {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      background: #181824;
+      border: 1px solid #23232f;
+      border-radius: 8px;
+      padding: 8px 12px;
+      min-width: 130px;
+    }
+
+    .legend-key {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #7c3aed;
+      font-weight: 700;
+    }
+
+    .legend-label {
+      font-size: 12px;
+      color: #b6b6c6;
+    }
+
+    /* ---------- hint ---------- */
+    .hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #8b8b9b;
+      margin-bottom: 18px;
+    }
+
+    .hint-icon {
+      color: #7c3aed;
+    }
+
+    /* ---------- toolbar ---------- */
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .btn {
+      background: #1f1f2e;
+      color: #e5e7eb;
+      border: 1px solid #2d2d3d;
+      border-radius: 6px;
+      padding: 8px 14px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+    }
+
+    .btn:hover {
+      background: #2a2a3e;
+      border-color: #7c3aed;
+    }
+
+    .btn-danger:hover {
+      border-color: #ef4444;
+    }
+
+    .sep {
+      width: 1px;
+      height: 22px;
+      background: #2d2d3d;
+      margin: 0 4px;
+    }
+
+    /* ---------- meta ---------- */
+    .meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 14px;
+    }
+
+    .pill {
+      background: #181824;
+      border: 1px solid #23232f;
+      border-radius: 999px;
+      padding: 4px 12px;
+      font-size: 12px;
+      color: #b6b6c6;
+    }
+
+    .empty {
+      padding: 30px;
+      text-align: center;
+      color: #6b6b7b;
+      border: 1px dashed #2d2d3d;
+      border-radius: 8px;
+    }
+
+    /* ---------- grid ---------- */
+    .grid {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #15151f;
+      border: 1px solid #1f1f2b;
+      border-radius: 6px;
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+
+    .row-active {
+      border-color: #7c3aed;
+      background: #1a1626;
+    }
+
+    .row-id {
+      width: 64px;
+      color: #6b6b7b;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .row-label {
+      width: 90px;
+      font-weight: 600;
+    }
+
+    .badge {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: 999px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .badge-ok {
+      background: #064e3b;
+      color: #6ee7b7;
+    }
+
+    .badge-warn {
+      background: #4d3c06;
+      color: #fcd34d;
+    }
+
+    .badge-error {
+      background: #4c0519;
+      color: #fda4af;
+    }
+
+    .badge-idle {
+      background: #1f2937;
+      color: #9ca3af;
+    }
+
+    .star {
+      color: #fbbf24;
+    }
+
+    .cells {
+      display: flex;
+      gap: 4px;
+      margin-left: auto;
+    }
+
+    .cell {
+      background: #1f1f2e;
+      border-radius: 4px;
+      padding: 2px 8px;
+      font-size: 12px;
+      color: #b6b6c6;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .row-value {
+      width: 70px;
+      text-align: right;
+      color: #8b8b9b;
+      font-variant-numeric: tabular-nums;
+    }
+  </style>
+</head>
+
+<body>
+  <are-root id="app">
+    <perf-app></perf-app>
+  </are-root>
+
+  <script type="module" src="./mqh9ryfq-4pf5cv.js"></script>
+</body>
+
+</html>