hightjs 0.3.5 → 0.5.0

package/src/client/DefaultNotFound.tsx

@@ -1,84 +0,0 @@
-/*
- * 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.
- */
-import React from 'react';
-
-export default function DefaultNotFound() {
-    return (
-        <div style={{
-            fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-            height: '100vh',
-            textAlign: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center'
-        }}>
-            <div>
-                <style dangerouslySetInnerHTML={{
-                    __html: `
-                        body {
-    color: #000;
-    /* Alterado de cor sólida para gradiente */
-    background: linear-gradient(to bottom, #e9e9e9, #ffffff);
-    margin: 0;
-}
-
-.next-error-h1 {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        color: #fff;
-        /* Alterado de cor sólida para gradiente escuro */
-        background: linear-gradient(to bottom, #222, #000);
-    }
-
-    .next-error-h1 {
-        border-right: 1px solid rgba(255, 255, 255, .3);
-    }
-}
-                    `
-                }} />
-                <h1
-                    className="next-error-h1"
-                    style={{
-                        display: 'inline-block',
-                        margin: '0px 20px 0px 0px',
-                        padding: '0px 23px 0px 0px',
-                        fontSize: '24px',
-                        fontWeight: '500',
-                        verticalAlign: 'top',
-                        lineHeight: '49px'
-                    }}
-                >
-                    404
-                </h1>
-                <div style={{ display: 'inline-block' }}>
-                    <h2 style={{
-                        fontSize: '14px',
-                        fontWeight: '400',
-                        lineHeight: '49px',
-                        margin: '0px'
-                    }}>
-                        This page cannot be found.
-                    </h2>
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/client/clientRouter.ts

@@ -1,153 +0,0 @@
-/*
- * 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.
- */
-// Sistema de roteamento do lado do cliente para hweb-sdk
-
-export interface RouterEvents {
-    beforeNavigate?: (url: string) => boolean | Promise<boolean>;
-    afterNavigate?: (url: string) => void;
-}
-
-class Router {
-    private events: RouterEvents = {};
-    private listeners: Set<() => void> = new Set();
-
-    /**
-     * Navega para uma nova rota
-     */
-    async push(url: string): Promise<void> {
-        // Callback antes de navegar
-        if (this.events.beforeNavigate) {
-            const shouldProceed = await this.events.beforeNavigate(url);
-            if (shouldProceed === false) return;
-        }
-
-        // Atualiza a URL na barra de endereço
-        window.history.pushState({ path: url }, '', url);
-
-        // Dispara evento para o roteador capturar de forma assíncrona
-        setTimeout(() => this.triggerNavigation(), 0);
-
-        // Callback após navegar
-        if (this.events.afterNavigate) {
-            this.events.afterNavigate(url);
-        }
-    }
-
-    /**
-     * Substitui a entrada atual do histórico
-     */
-    async replace(url: string): Promise<void> {
-        // Callback antes de navegar
-        if (this.events.beforeNavigate) {
-            const shouldProceed = await this.events.beforeNavigate(url);
-            if (shouldProceed === false) return;
-        }
-
-        // Substitui a URL atual no histórico
-        window.history.replaceState({ path: url }, '', url);
-
-        // Dispara evento para o roteador capturar de forma assíncrona
-        setTimeout(() => this.triggerNavigation(), 0);
-
-        // Callback após navegar
-        if (this.events.afterNavigate) {
-            this.events.afterNavigate(url);
-        }
-    }
-
-    /**
-     * Volta uma página no histórico
-     */
-    back(): void {
-        window.history.back();
-    }
-
-    /**
-     * Avança uma página no histórico
-     */
-    forward(): void {
-        window.history.forward();
-    }
-
-    /**
-     * Recarrega a página atual (re-renderiza o componente)
-     */
-    refresh(): void {
-        setTimeout(() => this.triggerNavigation(), 0);
-    }
-
-    /**
-     * Obtém a URL atual
-     */
-    get pathname(): string {
-        return window.location.pathname;
-    }
-
-    /**
-     * Obtém os query parameters atuais
-     */
-    get query(): URLSearchParams {
-        return new URLSearchParams(window.location.search);
-    }
-
-    /**
-     * Obtém a URL completa atual
-     */
-    get url(): string {
-        return window.location.href;
-    }
-
-    /**
-     * Adiciona event listeners para eventos de roteamento
-     */
-    on(events: RouterEvents): void {
-        this.events = { ...this.events, ...events };
-    }
-
-    /**
-     * Remove event listeners
-     */
-    off(): void {
-        this.events = {};
-    }
-
-    /**
-     * Adiciona um listener para mudanças de rota
-     */
-    subscribe(listener: () => void): () => void {
-        this.listeners.add(listener);
-        return () => this.listeners.delete(listener);
-    }
-
-    /**
-     * Dispara evento de navegação para todos os listeners
-     */
-    private triggerNavigation(): void {
-        // Dispara o evento nativo para o roteador do hweb capturar
-        window.dispatchEvent(new PopStateEvent('popstate'));
-
-        // Notifica todos os listeners customizados
-        this.listeners.forEach(listener => listener());
-    }
-
-}
-
-// Instância singleton do router
-export const router = new Router();
-
-// Para compatibilidade, também exporta como default
-export default router;

package/src/client/entry.client.tsx

@@ -1,444 +0,0 @@
-/*
- * 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.
- */
-import React, {useState, useEffect, useCallback, useRef} from 'react';
-import { createRoot } from 'react-dom/client';
-import { router } from './clientRouter';
-
-// --- O Componente Principal do Cliente (Roteador) ---
-
-interface AppProps {
-    componentMap: Record<string, any>;
-    routes: { pattern: string; componentPath: string }[];
-    initialComponentPath: string;
-    initialParams: any;
-    layoutComponent?: any;
-}
-
-function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }: AppProps) {
-    // Estado que guarda o componente a ser renderizado atualmente
-
-    const [CurrentPageComponent, setCurrentPageComponent] = useState(() => {
-        // Se for a rota especial __404__, não busca no componentMap
-        if (initialComponentPath === '__404__') {
-            return null;
-        }
-        return componentMap[initialComponentPath];
-    });
-    const [params, setParams] = useState(initialParams);
-
-    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;
-        const match = findRouteForPath(currentPath);
-        if (match) {
-            setCurrentPageComponent(() => componentMap[match.componentPath]);
-            setParams(match.params);
-        } else {
-            // Se não encontrou rota, define como null para mostrar 404
-            setCurrentPageComponent(null);
-            setParams({});
-        }
-    }, [router.pathname, findRouteForPath, componentMap]);
-
-    // Ouve os eventos de "voltar" e "avançar" do navegador
-    useEffect(() => {
-        const handlePopState = () => {
-            updateRoute();
-        };
-
-        window.addEventListener('popstate', handlePopState);
-
-        // Também se inscreve no router para mudanças de rota
-        const unsubscribe = router.subscribe(updateRoute);
-
-        return () => {
-            window.removeEventListener('popstate', handlePopState);
-            unsubscribe();
-        };
-    }, [updateRoute]);
-
-    // Se não há componente ou é a rota __404__, mostra página 404
-    if (!CurrentPageComponent || initialComponentPath === '__404__') {
-        // Usa o componente 404 personalizado se existir, senão usa o padrão do hweb
-        const NotFoundComponent = (window as any).__HWEB_NOT_FOUND__;
-
-        if (NotFoundComponent) {
-            // Usa o notFound.tsx personalizado do usuário
-            const NotFoundContent = <NotFoundComponent />;
-
-            // Aplica o layout se existir
-            if (layoutComponent) {
-                return React.createElement(layoutComponent, { children: NotFoundContent });
-            }
-            return NotFoundContent;
-        } else {
-            // Usa o 404 padrão do hweb que foi incluído no build
-            const DefaultNotFound = (window as any).__HWEB_DEFAULT_NOT_FOUND__;
-            const NotFoundContent = <DefaultNotFound />;
-
-            // Aplica o layout se existir
-            if (layoutComponent) {
-                return React.createElement(layoutComponent, { children: NotFoundContent });
-            }
-            return NotFoundContent;
-        }
-    }
-
-    // Renderiza o componente atual (sem Context, usa o router diretamente)
-    const PageContent = <CurrentPageComponent params={params} />;
-
-    // SEMPRE usa o layout - se não existir, cria um wrapper padrão
-    const content = layoutComponent
-        ? React.createElement(layoutComponent, { children: PageContent })
-        : <div>{PageContent}</div>;
-
-    // Adiciona o indicador de dev se não for produção
-    return (
-        <>
-            {content}
-            {process.env.NODE_ENV !== 'production' && <DevIndicator />}
-        </>
-    );
-}
-
-
-
-// --- Constantes de Configuração ---
-const DEV_INDICATOR_SIZE = 48;
-const DEV_INDICATOR_CORNERS = [
-    { top: 16, left: 16 },    // 0: topo-esquerda
-    { top: 16, right: 16 },   // 1: topo-direita
-    { bottom: 16, left: 16 }, // 2: baixo-esquerda
-    { bottom: 16, right: 16 },// 3: baixo-direita
-];
-
-function DevIndicator() {
-    const [corner, setCorner] = useState(3); // Canto atual (0-3)
-    const [isDragging, setIsDragging] = useState(false); // Estado de arrastar
-    const [isBuilding, setIsBuilding] = useState(false); // Estado de build
-
-    // Posição visual do indicador durante o arraste
-    const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-
-    const indicatorRef = useRef<HTMLDivElement>(null);
-    const dragStartRef = useRef<{ x: number; y: number; moved: boolean } | null>(null);
-
-    // Escuta eventos de hot reload para mostrar estado de build
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        const handleHotReloadMessage = (event: MessageEvent) => {
-            try {
-                const message = JSON.parse(event.data);
-
-                // Quando detecta mudança em arquivo, ativa loading
-                if (message.type === 'frontend-reload' ||
-                    message.type === 'backend-api-reload' ||
-                    message.type === 'src-reload') {
-                    setIsBuilding(true);
-                }
-
-                // Quando o build termina ou servidor fica pronto, desativa loading
-                if (message.type === 'server-ready' || message.type === 'build-complete') {
-                    setIsBuilding(false);
-                }
-            } catch (e) {
-                // Ignora mensagens que não são JSON
-            }
-        };
-
-        // Intercepta mensagens WebSocket
-        const originalWebSocket = window.WebSocket;
-        window.WebSocket = class extends originalWebSocket {
-            constructor(url: string | URL, protocols?: string | string[]) {
-                super(url, protocols);
-
-                this.addEventListener('message', (event) => {
-                    if (url.toString().includes('hweb-hotreload')) {
-                        handleHotReloadMessage(event);
-                    }
-                });
-            }
-        } as any;
-
-        return () => {
-            window.WebSocket = originalWebSocket;
-        };
-    }, []);
-
-    // --- Estilos Dinâmicos ---
-    const getIndicatorStyle = (): React.CSSProperties => {
-        const baseStyle: React.CSSProperties = {
-            position: 'fixed',
-            zIndex: 9999,
-            width: DEV_INDICATOR_SIZE,
-            height: DEV_INDICATOR_SIZE,
-            borderRadius: '50%',
-            background: isBuilding
-                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
-                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
-            color: 'white',
-            fontWeight: 'bold',
-            fontSize: 28,
-            boxShadow: isBuilding
-                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
-                : '0 4px 15px rgba(0,0,0,0.2)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: isDragging ? 'grabbing' : 'grab',
-            userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out',
-            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
-        };
-
-        if (isDragging) {
-            return {
-                ...baseStyle,
-                top: position.top,
-                left: position.left,
-            };
-        }
-
-        return { ...baseStyle, ...DEV_INDICATOR_CORNERS[corner] };
-    };
-
-    const getMenuPositionStyle = (): React.CSSProperties => {
-        // Posiciona o menu dependendo do canto
-        switch (corner) {
-            case 0: return { top: '110%', left: '0' }; // Top-Left
-            case 1: return { top: '110%', right: '0' }; // Top-Right
-            case 2: return { bottom: '110%', left: '0' }; // Bottom-Left
-            case 3: return { bottom: '110%', right: '0' }; // Bottom-Right
-            default: return {};
-        }
-    };
-
-    // --- Lógica de Eventos ---
-    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        dragStartRef.current = { x: e.clientX, y: e.clientY, moved: false };
-        if (indicatorRef.current) {
-            const rect = indicatorRef.current.getBoundingClientRect();
-            setPosition({ top: rect.top, left: rect.left });
-        }
-        setIsDragging(true);
-    };
-
-    const handleMouseMove = useCallback((e: MouseEvent) => {
-        if (!isDragging || !dragStartRef.current) return;
-
-        const deltaX = e.clientX - dragStartRef.current.x;
-        const deltaY = e.clientY - dragStartRef.current.y;
-
-        // Diferencia clique de arrastar (threshold de 5px)
-        if (!dragStartRef.current.moved && Math.hypot(deltaX, deltaY) > 5) {
-            dragStartRef.current.moved = true;
-        }
-
-        if (dragStartRef.current.moved) {
-            setPosition(prevPos => ({
-                top: prevPos.top + deltaY,
-                left: prevPos.left + deltaX,
-            }));
-            // Atualiza a referência para o próximo movimento
-            dragStartRef.current.x = e.clientX;
-            dragStartRef.current.y = e.clientY;
-        }
-    }, [isDragging]);
-
-    const handleMouseUp = useCallback((e: MouseEvent) => {
-        if (!isDragging) return;
-        setIsDragging(false);
-
-        // Se moveu, calcula o canto mais próximo
-        if (dragStartRef.current?.moved) {
-            const { clientX, clientY } = e;
-            const w = window.innerWidth;
-            const h = window.innerHeight;
-
-            const dists = [
-                Math.hypot(clientX, clientY), // TL
-                Math.hypot(w - clientX, clientY), // TR
-                Math.hypot(clientX, h - clientY), // BL
-                Math.hypot(w - clientX, h - clientY), // BR
-            ];
-            setCorner(dists.indexOf(Math.min(...dists)));
-        }
-
-        dragStartRef.current = null;
-    }, [isDragging]);
-
-    // Adiciona e remove listeners globais
-    useEffect(() => {
-        if (isDragging) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isDragging, handleMouseMove, handleMouseUp]);
-
-
-    return (
-        <>
-            <style>
-                {`
-                    @keyframes hweb-pulse {
-                        0%, 100% {
-                            transform: scale(1);
-                            opacity: 1;
-                        }
-                        50% {
-                            transform: scale(1.1);
-                            opacity: 0.8;
-                        }
-                    }
-                    
-                    @keyframes hweb-spin {
-                        from {
-                            transform: rotate(0deg);
-                        }
-                        to {
-                            transform: rotate(360deg);
-                        }
-                    }
-                `}
-            </style>
-            <div
-                ref={indicatorRef}
-                style={getIndicatorStyle()}
-                onMouseDown={handleMouseDown}
-                title={isBuilding ? "Building..." : "Modo Dev HightJS"}
-            >
-                {isBuilding ? (
-                    <span style={{ animation: 'hweb-spin 1s linear infinite' }}>⟳</span>
-                ) : (
-                    'H'
-                )}
-            </div>
-        </>
-    );
-}
-
-// --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
-
-function deobfuscateData(obfuscated: string): any {
-    try {
-        // Remove o hash fake
-        const parts = obfuscated.split('.');
-        const base64 = parts.length > 1 ? parts[1] : parts[0];
-
-        // Decodifica base64
-        const jsonStr = atob(base64);
-
-        // Parse JSON
-        return JSON.parse(jsonStr);
-    } catch (error) {
-        console.error('[hweb] Failed to decode data:', error);
-        return null;
-    }
-}
-
-function initializeClient() {
-    // Lê os dados do atributo data-h
-    const dataElement = document.getElementById('__hight_data__');
-
-    if (!dataElement) {
-        console.error('[hweb] Initial data script not found.');
-        return;
-    }
-
-    const obfuscated = dataElement.getAttribute('data-h');
-
-    if (!obfuscated) {
-        console.error('[hweb] Data attribute not found.');
-        return;
-    }
-
-    const initialData = deobfuscateData(obfuscated);
-
-    if (!initialData) {
-        console.error('[hweb] Failed to parse initial data.');
-        return;
-    }
-
-    // Cria o mapa de componentes dinamicamente a partir dos módulos carregados
-    const componentMap: Record<string, any> = {};
-
-    // Registra todos os componentes que foram importados
-    if ((window as any).__HWEB_COMPONENTS__) {
-        Object.assign(componentMap, (window as any).__HWEB_COMPONENTS__);
-    }
-
-    const container = document.getElementById('root');
-    if (!container) {
-        console.error('[hweb] Container #root not found.');
-        return;
-    }
-
-    try {
-        // Usar createRoot para render inicial (CSR)
-        const root = createRoot(container);
-
-        root.render(
-            <App
-                componentMap={componentMap}
-                routes={initialData.routes}
-                initialComponentPath={initialData.initialComponentPath}
-                initialParams={initialData.initialParams}
-                layoutComponent={(window as any).__HWEB_LAYOUT__}
-            />
-        );
-    } catch (error) {
-        console.error('[hweb] Error rendering application:', error);
-    }
-}
-
-// Executa quando o DOM estiver pronto
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeClient);
-} else {
-    initializeClient();
-}
-

package/src/client.ts

@@ -1,24 +0,0 @@
-/*
- * 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.
- */
-// Este arquivo exporta apenas código seguro para o cliente (navegador)
-export { Link } from './components/Link';
-export { RouteConfig, Metadata } from "./types";
-export { router } from './client/clientRouter';
-
-
-
-