hightjs 0.3.5 → 0.5.0

package/src/renderer.tsx

@@ -1,263 +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';
-import { RouteConfig, Metadata } from './types';
-import { getLayout } from './router';
-import type { GenericRequest } from './types/framework';
-import fs from 'fs';
-import path from 'path';
-
-// Função para gerar todas as meta tags
-function generateMetaTags(metadata: Metadata): string {
-    const tags: string[] = [];
-
-    // Charset
-    tags.push(`<meta charset="${metadata.charset || 'UTF-8'}">`);
-
-    // Viewport
-    tags.push(`<meta name="viewport" content="${metadata.viewport || 'width=device-width, initial-scale=1.0'}">`);
-
-    // Description
-    if (metadata.description) {
-        tags.push(`<meta name="description" content="${metadata.description}">`);
-    }
-
-    // Keywords
-    if (metadata.keywords) {
-        const keywordsStr = Array.isArray(metadata.keywords)
-            ? metadata.keywords.join(', ')
-            : metadata.keywords;
-        tags.push(`<meta name="keywords" content="${keywordsStr}">`);
-    }
-
-    // Author
-    if (metadata.author) {
-        tags.push(`<meta name="author" content="${metadata.author}">`);
-    }
-
-    // Theme color
-    if (metadata.themeColor) {
-        tags.push(`<meta name="theme-color" content="${metadata.themeColor}">`);
-    }
-
-    // Robots
-    if (metadata.robots) {
-        tags.push(`<meta name="robots" content="${metadata.robots}">`);
-    }
-
-    // Canonical
-    if (metadata.canonical) {
-        tags.push(`<link rel="canonical" href="${metadata.canonical}">`);
-    }
-
-    // Favicon
-    if (metadata.favicon) {
-        tags.push(`<link rel="icon" href="${metadata.favicon}">`);
-    }
-
-    // Apple Touch Icon
-    if (metadata.appleTouchIcon) {
-        tags.push(`<link rel="apple-touch-icon" href="${metadata.appleTouchIcon}">`);
-    }
-
-    // Manifest
-    if (metadata.manifest) {
-        tags.push(`<link rel="manifest" href="${metadata.manifest}">`);
-    }
-
-    // Open Graph
-    if (metadata.openGraph) {
-        const og = metadata.openGraph;
-        if (og.title) tags.push(`<meta property="og:title" content="${og.title}">`);
-        if (og.description) tags.push(`<meta property="og:description" content="${og.description}">`);
-        if (og.type) tags.push(`<meta property="og:type" content="${og.type}">`);
-        if (og.url) tags.push(`<meta property="og:url" content="${og.url}">`);
-        if (og.siteName) tags.push(`<meta property="og:site_name" content="${og.siteName}">`);
-        if (og.locale) tags.push(`<meta property="og:locale" content="${og.locale}">`);
-
-        if (og.image) {
-            if (typeof og.image === 'string') {
-                tags.push(`<meta property="og:image" content="${og.image}">`);
-            } else {
-                tags.push(`<meta property="og:image" content="${og.image.url}">`);
-                if (og.image.width) tags.push(`<meta property="og:image:width" content="${og.image.width}">`);
-                if (og.image.height) tags.push(`<meta property="og:image:height" content="${og.image.height}">`);
-                if (og.image.alt) tags.push(`<meta property="og:image:alt" content="${og.image.alt}">`);
-            }
-        }
-    }
-
-    // Twitter Card
-    if (metadata.twitter) {
-        const tw = metadata.twitter;
-        if (tw.card) tags.push(`<meta name="twitter:card" content="${tw.card}">`);
-        if (tw.site) tags.push(`<meta name="twitter:site" content="${tw.site}">`);
-        if (tw.creator) tags.push(`<meta name="twitter:creator" content="${tw.creator}">`);
-        if (tw.title) tags.push(`<meta name="twitter:title" content="${tw.title}">`);
-        if (tw.description) tags.push(`<meta name="twitter:description" content="${tw.description}">`);
-        if (tw.image) tags.push(`<meta name="twitter:image" content="${tw.image}">`);
-        if (tw.imageAlt) tags.push(`<meta name="twitter:image:alt" content="${tw.imageAlt}">`);
-    }
-
-    // Custom meta tags
-    if (metadata.other) {
-        for (const [key, value] of Object.entries(metadata.other)) {
-            tags.push(`<meta name="${key}" content="${value}">`);
-        }
-    }
-
-    return tags.join('\n');
-}
-
-// Função para ofuscar dados (não é criptografia, apenas ofuscação)
-function obfuscateData(data: any): string {
-    // 1. Serializa para JSON minificado
-    const jsonStr = JSON.stringify(data);
-
-    // 2. Converte para base64
-    const base64 = Buffer.from(jsonStr).toString('base64');
-
-    // 3. Adiciona um hash fake no início para parecer um token
-    const hash = Buffer.from(Date.now().toString()).toString('base64').substring(0, 8);
-
-    return `${hash}.${base64}`;
-}
-
-// Função para criar script ofuscado
-function createInitialDataScript(data: any): string {
-    const obfuscated = obfuscateData(data);
-
-    // Usa um atributo data-* ao invés de JSON visível
-    return `<script id="__hight_data__" type="text/plain" data-h="${obfuscated}"></script>`;
-}
-
-// Interface para opções de renderização apenas do cliente
-interface RenderOptions {
-    req: GenericRequest;
-    route: RouteConfig & { componentPath: string };
-    params: Record<string, string>;
-    allRoutes: (RouteConfig & { componentPath: string })[];
-}
-
-export async function render({ req, route, params, allRoutes }: RenderOptions): Promise<string> {
-    const { generateMetadata } = route;
-
-    // Pega a opção dev e hot reload manager do req
-    const isProduction = !(req as any).hwebDev;
-    const hotReloadManager = (req as any).hotReloadManager;
-
-    // Pega o layout se existir
-    const layout = getLayout();
-
-    let metadata: Metadata = { title: 'App hweb' };
-
-    // Primeiro usa o metadata do layout se existir
-    if (layout && layout.metadata) {
-        metadata = { ...metadata, ...layout.metadata };
-    }
-
-    // Depois sobrescreve com metadata específico da rota se existir
-    if (generateMetadata) {
-        const routeMetadata = await Promise.resolve(generateMetadata(params, req));
-        metadata = { ...metadata, ...routeMetadata };
-    }
-
-    // Prepara os dados para injetar na janela do navegador
-    const initialData = {
-        routes: allRoutes.map(r => ({ pattern: r.pattern, componentPath: r.componentPath })),
-        initialComponentPath: route.componentPath,
-        initialParams: params,
-    };
-
-    // Cria script JSON limpo
-    const initialDataScript = createInitialDataScript(initialData);
-
-    // Script de hot reload apenas em desenvolvimento
-    const hotReloadScript = !isProduction && hotReloadManager
-        ? hotReloadManager.getClientScript()
-        : '';
-
-    // Gera todas as meta tags
-    const metaTags = generateMetaTags(metadata);
-
-    // Determina quais arquivos JavaScript carregar
-    const jsFiles = getJavaScriptFiles(req);
-
-    const htmlLang = metadata.language || 'pt-BR';
-
-    // HTML base sem SSR - apenas o container e scripts para client-side rendering
-    return `<!DOCTYPE html>
-<html lang="${htmlLang}">
-<head>
-${metaTags}
-<title>${metadata.title || 'App hweb'}</title>
-</head>
-<body>
-<div id="root"></div>
-${initialDataScript}
-${jsFiles}
-${hotReloadScript}
-</body>
-</html>`;
-}
-
-// Função para determinar quais arquivos JavaScript carregar
-function getJavaScriptFiles(req: GenericRequest): string {
-    const projectDir = process.cwd();
-    const distDir = path.join(projectDir, '.hight');
-
-    try {
-        // Verifica se existe um manifesto de chunks (gerado pelo ESBuild com splitting)
-        const manifestPath = path.join(distDir, 'manifest.json');
-
-        if (fs.existsSync(manifestPath)) {
-            // Modo chunks - carrega todos os arquivos necessários
-            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
-            const scripts = Object.values(manifest)
-                .filter((file: any) => file.endsWith('.js'))
-                .map((file: any) => `<script src="/_hight/${file}"></script>`)
-                .join('');
-            return scripts;
-        } else {
-            // Verifica se existem múltiplos arquivos JS (chunks sem manifesto)
-            const jsFiles = fs.readdirSync(distDir)
-                .filter(file => file.endsWith('.js') && !file.endsWith('.map'))
-                .sort((a, b) => {
-                    // Ordena para carregar arquivos principais primeiro
-                    if (a.includes('main')) return -1;
-                    if (b.includes('main')) return 1;
-                    if (a.includes('vendor') || a.includes('react')) return -1;
-                    if (b.includes('vendor') || b.includes('react')) return 1;
-                    return a.localeCompare(b);
-                });
-
-            // @ts-ignore
-            if (jsFiles.length >= 1) {
-                // Modo chunks sem manifesto
-                return jsFiles
-                    .map(file => `<script src="/_hight/${file}"></script>`)
-                    .join('');
-            } else {
-                // Modo tradicional - único arquivo
-                return '<script src="/_hight/main.js"></script>';
-            }
-        }
-    } catch (error) {
-        // Fallback para o modo tradicional
-        return '<script src="/_hight/main.js"></script>';
-    }
-}