hightjs 0.4.0 → 0.5.1

package/src/client/entry.client.tsx

@@ -31,14 +31,53 @@ interface AppProps {
 function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }: AppProps) {
     // Estado que guarda o componente a ser renderizado atualmente
     const [hmrTimestamp, setHmrTimestamp] = useState(Date.now());
+
+    // Helper para encontrar rota baseado no path
+    const findRouteForPath = useCallback((path: string) => {
+        for (const route of routes) {
+            const regexPattern = route.pattern
+                // [[...param]] → opcional catch-all
+                .replace(/\[\[\.\.\.(\w+)\]\]/g, '(?<$1>.+)?')
+                // [...param] → obrigatório catch-all
+                .replace(/\[\.\.\.(\w+)\]/g, '(?<$1>.+)')
+                // /[[param]] → opcional com barra também opcional
+                .replace(/\/\[\[(\w+)\]\]/g, '(?:/(?<$1>[^/]+))?')
+                // [[param]] → segmento opcional (sem barra anterior)
+                .replace(/\[\[(\w+)\]\]/g, '(?<$1>[^/]+)?')
+                // [param] → segmento obrigatório
+                .replace(/\[(\w+)\]/g, '(?<$1>[^/]+)');
+            const regex = new RegExp(`^${regexPattern}/?$`);
+            const match = path.match(regex);
+            if (match) {
+                return {
+                    componentPath: route.componentPath,
+                    params: match.groups || {}
+                };
+            }
+        }
+        return null;
+    }, [routes]);
+
+    // Inicializa o componente e params baseado na URL ATUAL (não no initialComponentPath)
     const [CurrentPageComponent, setCurrentPageComponent] = useState(() => {
-        // Se for a rota especial __404__, não busca no componentMap
-        if (initialComponentPath === '__404__') {
-            return null;
+        // Pega a rota atual da URL
+        const currentPath = window.location.pathname;
+        const match = findRouteForPath(currentPath);
+
+        if (match) {
+            return componentMap[match.componentPath];
         }
-        return componentMap[initialComponentPath];
+
+        // Se não encontrou rota, retorna null para mostrar 404
+        return null;
+    });
+
+    const [params, setParams] = useState(() => {
+        // Pega os params da URL atual
+        const currentPath = window.location.pathname;
+        const match = findRouteForPath(currentPath);
+        return match ? match.params : {};
     });
-    const [params, setParams] = useState(initialParams);
 
     // HMR: Escuta eventos de hot reload
     useEffect(() => {
@@ -106,30 +145,6 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         };
     }, []);
 
-    const findRouteForPath = useCallback((path: string) => {
-        for (const route of routes) {
-            const regexPattern = route.pattern
-                // [[...param]] → opcional catch-all
-                .replace(/\[\[\.\.\.(\w+)\]\]/g, '(?<$1>.+)?')
-                // [...param] → obrigatório catch-all
-                .replace(/\[\.\.\.(\w+)\]/g, '(?<$1>.+)')
-                // /[[param]] → opcional com barra também opcional
-                .replace(/\/\[\[(\w+)\]\]/g, '(?:/(?<$1>[^/]+))?')
-                // [[param]] → segmento opcional (sem barra anterior)
-                .replace(/\[\[(\w+)\]\]/g, '(?<$1>[^/]+)?')
-                // [param] → segmento obrigatório
-                .replace(/\[(\w+)\]/g, '(?<$1>[^/]+)');
-            const regex = new RegExp(`^${regexPattern}/?$`);
-            const match = path.match(regex);
-            if (match) {
-                return {
-                    componentPath: route.componentPath,
-                    params: match.groups || {}
-                };
-            }
-        }
-        return null;
-    }, [routes]);
 
     const updateRoute = useCallback(() => {
         const currentPath = router.pathname;

package/src/global/global.ts

@@ -0,0 +1,171 @@
+/*
+ * This file is part of the HightJS Project.
+ * Copyright (c) 2025 itsmuzin
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Type declarations for asset imports
+ * This allows TypeScript to understand imports of various file types
+ */
+
+// Markdown files
+declare module "*.md" {
+    const content: string;
+    export default content;
+}
+
+// Images
+declare module "*.png" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.jpg" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.jpeg" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.gif" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.webp" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.avif" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.ico" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.bmp" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.tif" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.tiff" {
+    const src: string;
+    export default src;
+}
+
+// SVG (with additional export for raw content)
+declare module "*.svg" {
+    const src: string;
+    export const svgContent: string;
+    export default src;
+}
+
+// JSON files
+declare module "*.json" {
+    const value: any;
+    export default value;
+}
+
+// Text files
+declare module "*.txt" {
+    const content: string;
+    export default content;
+}
+
+// Fonts
+declare module "*.woff" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.woff2" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.ttf" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.otf" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.eot" {
+    const src: string;
+    export default src;
+}
+
+// Audio files
+declare module "*.mp3" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.wav" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.ogg" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.m4a" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.aac" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.flac" {
+    const src: string;
+    export default src;
+}
+
+// Video files
+declare module "*.mp4" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.webm" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.ogv" {
+    const src: string;
+    export default src;
+}
+

package/src/helpers.ts

@@ -28,6 +28,11 @@ import type {HightJSOptions, HightConfig, HightConfigFunction} from './types';
 import Console, {Colors} from "./api/console";
 import https, { Server as HttpsServer } from 'https'; // <-- ADICIONAR
 import fs from 'fs'; // <-- ADICIONAR
+
+// Registra loaders customizados para importar arquivos não-JS
+const { registerLoaders } = require('./loaders');
+registerLoaders();
+
 // --- Tipagem ---
 
 /**
@@ -168,9 +173,82 @@ async function loadHightConfig(projectDir: string, phase: string): Promise<Hight
 }
 
 /**
- * Middleware para parsing do body com proteções de segurança (versão melhorada).
- * Rejeita a promise em caso de erro de parsing ou estouro de limite.
+ * Aplica headers CORS na resposta baseado na configuração.
+ * @param req Requisição HTTP
+ * @param res Resposta HTTP
+ * @param corsConfig Configuração de CORS
+ * @returns true se a requisição foi finalizada (OPTIONS), false caso contrário
  */
+function applyCors(req: IncomingMessage, res: ServerResponse, corsConfig?: HightConfig['cors']): boolean {
+    if (!corsConfig || !corsConfig.enabled) {
+        return false;
+    }
+
+    const origin = req.headers.origin || req.headers.referer;
+
+    // Verifica se a origem é permitida
+    let allowOrigin = false;
+    if (corsConfig.origin === '*') {
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        allowOrigin = true;
+    } else if (typeof corsConfig.origin === 'string' && origin === corsConfig.origin) {
+        res.setHeader('Access-Control-Allow-Origin', corsConfig.origin);
+        allowOrigin = true;
+    } else if (Array.isArray(corsConfig.origin) && origin && corsConfig.origin.includes(origin)) {
+        res.setHeader('Access-Control-Allow-Origin', origin);
+        allowOrigin = true;
+    } else if (typeof corsConfig.origin === 'function' && origin) {
+        try {
+            if (corsConfig.origin(origin)) {
+                res.setHeader('Access-Control-Allow-Origin', origin);
+                allowOrigin = true;
+            }
+        } catch (error) {
+            Console.warn(`${Colors.FgYellow}[CORS]${Colors.Reset} Error validating origin: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    // Se a origem não for permitida e não for wildcard, não aplica outros headers
+    if (!allowOrigin && corsConfig.origin !== '*') {
+        return false;
+    }
+
+    // Credenciais (não pode ser usado com origin: '*')
+    if (corsConfig.credentials && corsConfig.origin !== '*') {
+        res.setHeader('Access-Control-Allow-Credentials', 'true');
+    }
+
+    // Métodos permitidos
+    const methods = corsConfig.methods || ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'];
+    res.setHeader('Access-Control-Allow-Methods', methods.join(', '));
+
+    // Headers permitidos
+    const allowedHeaders = corsConfig.allowedHeaders || ['Content-Type', 'Authorization'];
+    res.setHeader('Access-Control-Allow-Headers', allowedHeaders.join(', '));
+
+    // Headers expostos
+    if (corsConfig.exposedHeaders && corsConfig.exposedHeaders.length > 0) {
+        res.setHeader('Access-Control-Expose-Headers', corsConfig.exposedHeaders.join(', '));
+    }
+
+    // Max age para cache de preflight
+    const maxAge = corsConfig.maxAge !== undefined ? corsConfig.maxAge : 86400;
+    res.setHeader('Access-Control-Max-Age', maxAge.toString());
+
+    // Responde requisições OPTIONS (preflight)
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 204; // No Content
+        res.end();
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * Middleware para parsing do body com proteções de segurança (versão melhorada).
+*/
+
 const parseBody = (req: IncomingMessage): Promise<object | string | null> => {
     // Constantes para limites de segurança
     const MAX_BODY_SIZE = 10 * 1024 * 1024; // 10MB limite total
@@ -270,6 +348,17 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
         const method = req.method || 'GET';
         const url = req.url || '/';
 
+        // Aplica CORS se configurado
+        const corsHandled = applyCors(req, res, hightConfig.cors);
+        if (corsHandled) {
+            // Requisição OPTIONS foi respondida pelo CORS
+            if (hightConfig.accessLogging) {
+                const duration = Date.now() - requestStartTime;
+                Console.logCustomLevel('OPTIONS', true, Colors.BgMagenta, `${url} ${Colors.FgGreen}204${Colors.Reset} ${Colors.FgGray}${duration}ms${Colors.Reset} ${Colors.FgCyan}[CORS]${Colors.Reset}`);
+            }
+            return;
+        }
+
         // Configurações de segurança básicas
         res.setHeader('X-Content-Type-Options', 'nosniff');
         res.setHeader('X-Frame-Options', 'DENY');

package/src/hotReload.ts

@@ -195,8 +195,7 @@ export class HotReloadManager {
                                filePath.endsWith('.tsx') ||
                                filePath.endsWith('.jsx');
 
-        const isBackendFile = filePath.includes(path.join('src', 'backend')) ||
-                              (filePath.includes(path.join('src', 'web')) && !isFrontendFile);
+        const isBackendFile = filePath.includes(path.join('src', 'backend')) && !isFrontendFile;
 
         // Limpa o cache do arquivo alterado
         clearFileCache(filePath);
@@ -220,6 +219,7 @@ export class HotReloadManager {
             });
 
             try {
+                this.frontendChangeCallback?.();
                 await Promise.race([buildPromise, timeoutPromise]);
                 Console.logWithout(Levels.INFO, Colors.BgRed,`✅ Build complete, reloading frontend...`);
                 this.frontendChangeCallback?.();

package/src/index.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import path from 'path';
 import fs from 'fs';
 import {ExpressAdapter} from './adapters/express';
@@ -553,3 +554,4 @@ export default function hweb(options: HightJSOptions) {
         }
     };
 }
+

package/src/loaders.js

@@ -0,0 +1,53 @@
+/*
+ * This file is part of the HightJS Project.
+ * Copyright (c) 2025 itsmuzin
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+
+/**
+ * Registra loaders customizados para Node.js
+ * Permite importar arquivos não-JS diretamente no servidor
+ */
+function registerLoaders() {
+    // Loader para arquivos Markdown (.md)
+    require.extensions['.md'] = function (module, filename) {
+        const content = fs.readFileSync(filename, 'utf8');
+        module.exports = content;
+    };
+
+    // Loader para arquivos de texto (.txt)
+    require.extensions['.txt'] = function (module, filename) {
+        const content = fs.readFileSync(filename, 'utf8');
+        module.exports = content;
+    };
+
+    // Loader para arquivos JSON (já existe nativamente, mas garantimos consistência)
+    // require.extensions['.json'] já existe
+
+    // Loader para imagens - retorna o caminho do arquivo
+    const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.ico', '.bmp', '.svg'];
+
+    imageExtensions.forEach(ext => {
+        require.extensions[ext] = function (module, filename) {
+            // No servidor, retornamos o caminho do arquivo
+            // O frontend usará o plugin do esbuild para converter em base64
+            module.exports = filename;
+        };
+    });
+}
+
+module.exports = { registerLoaders };
+

package/src/renderer.tsx

@@ -220,6 +220,12 @@ function getJavaScriptFiles(req: GenericRequest): string {
     const projectDir = process.cwd();
     const distDir = path.join(projectDir, '.hight');
 
+    // Verifica se o diretório de build existe
+    if (!fs.existsSync(distDir)) {
+        // Diretório não existe - build ainda não foi executado
+        return getBuildingHTML();
+    }
+
     try {
         // Verifica se existe um manifesto de chunks (gerado pelo ESBuild com splitting)
         const manifestPath = path.join(distDir, 'manifest.json');
@@ -231,6 +237,12 @@ function getJavaScriptFiles(req: GenericRequest): string {
                 .filter((file: any) => file.endsWith('.js'))
                 .map((file: any) => `<script src="/_hight/${file}"></script>`)
                 .join('');
+
+            // Se não há arquivos JS no manifesto, build em andamento
+            if (!scripts) {
+                return getBuildingHTML();
+            }
+
             return scripts;
         } else {
             // Verifica se existem múltiplos arquivos JS (chunks sem manifesto)
@@ -252,12 +264,158 @@ function getJavaScriptFiles(req: GenericRequest): string {
                     .map(file => `<script src="/_hight/${file}"></script>`)
                     .join('');
             } else {
-                // Modo tradicional - único arquivo
-                return '<script src="/_hight/main.js"></script>';
+                // Nenhum arquivo JS encontrado - build em andamento ou erro
+                return getBuildingHTML();
             }
         }
     } catch (error) {
-        // Fallback para o modo tradicional
-        return '<script src="/_hight/main.js"></script>';
+        // Erro ao ler diretório - build em andamento ou erro
+        return getBuildingHTML();
     }
 }
+
+// Função para retornar HTML de "Build em andamento" com auto-refresh
+function getBuildingHTML(): string {
+    return `
+    <style>
+        /*
+         * Estilo combinado:
+         * - Tema (light/dark) adaptativo como o Next.js
+         * - Ícone personalizado
+         * - Efeito Glassmorphism para o card
+         */
+        
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            box-sizing: border-box;
+        }
+
+        *, *:before, *:after {
+            box-sizing: inherit;
+        }
+
+        /* Tema Claro (Default) */
+        body {
+            color: #000;
+            background: linear-gradient(to bottom, #e9e9e9, #ffffff);
+            background-attachment: fixed;
+            
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            text-align: center;
+            padding: 20px;
+        }
+
+        /* Contêiner com Glassmorphism */
+        .building-container {
+            width: 100%;
+            max-width: 500px;
+            padding: 40px 50px;
+            
+            /* Efeito de vidro */
+            background: rgba(255, 255, 255, 0.15); /* Mais transparente no modo claro */
+            backdrop-filter: blur(12px); /* Um pouco mais de blur */
+            -webkit-backdrop-filter: blur(12px);
+            
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.3); /* Borda mais visível no claro */
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra mais leve no claro */
+        }
+
+        /* Ícone */
+        .building-icon {
+            width: 70px; /* Tamanho do ícone */
+            height: 70px;
+            margin-bottom: 20px; /* Espaço abaixo do ícone */
+            vertical-align: middle;
+            filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); /* Leve sombra para destacar */
+        }
+
+        /* Título */
+        .building-title {
+            font-size: 2.8rem;
+            font-weight: 700;
+            margin-top: 0; /* Ajusta a margem superior após o ícone */
+            margin-bottom: 20px;
+            text-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra de texto sutil */
+            color: inherit; /* Garante que a cor se adapta ao tema */
+        }
+
+        /* Texto de apoio */
+        .building-text {
+            font-size: 1.15rem;
+            margin-bottom: 35px;
+            font-weight: 400;
+            opacity: 0.9;
+            color: inherit; /* Garante que a cor se adapta ao tema */
+        }
+
+        /* Spinner adaptado para light/dark */
+        .spinner {
+            width: 50px;
+            height: 50px;
+            margin: 0 auto;
+            border-radius: 50%;
+            
+            /* Estilo para Modo Claro */
+            border: 5px solid rgba(0, 0, 0, 0.1);
+            border-top-color: #000;
+            
+            animation: spin 1s linear infinite;
+        }
+
+        /* Animação de rotação */
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Tema Escuro (via @media query) */
+        @media (prefers-color-scheme: dark) {
+            body {
+                color: #fff;
+                background: linear-gradient(to bottom, #222, #000);
+            }
+
+            .building-container {
+                background: rgba(255, 255, 255, 0.05); /* Mais opaco no modo escuro */
+                border: 1px solid rgba(255, 255, 255, 0.1); /* Borda mais sutil no escuro */
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sombra mais forte no escuro */
+            }
+
+            .building-title {
+                 text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+            }
+            
+            .building-icon {
+                 filter: drop-shadow(0 0 5px rgba(255,255,255,0.1));
+            }
+
+            .spinner {
+                border: 5px solid rgba(255, 255, 255, 0.1);
+                border-top-color: #fff;
+            }
+        }
+    </style>
+    <div class="building-container">
+        <!-- Ícone da imagem --><img src="https://repository-images.githubusercontent.com/1069175740/e5c59d3a-e1fd-446c-a89f-785ed08f6a16" alt="HightJS Logo" class="building-icon">
+        
+        <div class="building-title">HightJS</div>
+        <div class="building-text">Build in progress...</div>
+        <div class="spinner"></div>
+    </div>
+<script>
+    // Auto-refresh a cada 2 segundos para verificar se o build terminou
+    setTimeout(() => {
+        window.location.reload();
+    }, 2000);
+</script>`;
+}