hightjs 0.4.0 → 0.5.1

package/package.json

@@ -1,14 +1,24 @@
 {
   "name": "hightjs",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "HightJS is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "itsmuzin",
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "tsc"
-  },
+  "keywords": [
+    "hightjs",
+    "framework",
+    "web",
+    "typescript",
+    "react"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "dist/global/global.d.ts",
+    "src"
+  ],
   "bin": {
     "hight": "./dist/bin/hightjs.js"
   },
@@ -18,25 +28,18 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js",
-      "require": "./dist/client.js"
+    "./react": {
+      "types": "./dist/client/client.d.ts",
+      "import": "./dist/client/client.js",
+      "require": "./dist/client/client.js"
     },
     "./helpers": {
       "types": "./dist/helpers.d.ts",
       "import": "./dist/helpers.js",
       "require": "./dist/helpers.js"
     },
-    "./auth": {
-      "types": "./dist/auth/index.d.ts",
-      "import": "./dist/auth/index.js",
-      "require": "./dist/auth/index.js"
-    },
-    "./auth/react": {
-      "types": "./dist/auth/react/index.d.ts",
-      "import": "./dist/auth/react/index.js",
-      "require": "./dist/auth/react/index.js"
+    "./global": {
+      "types": "./dist/global/global.d.ts"
     },
     "./eslint": {
       "types": "./dist/eslint/index.d.ts",
@@ -44,16 +47,9 @@
       "require": "./dist/eslint/index.js"
     }
   },
-  "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.11.24",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@types/ws": "^8.18.1",
-    "ts-loader": "^9.5.4",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "dependencies": {
     "@fastify/cookie": "^11.0.2",
@@ -69,8 +65,18 @@
     "fs-extra": "^11.3.2",
     "ws": "^8.18.1"
   },
-  "peerDependency": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.11.24",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/ws": "^8.18.1",
+    "ts-loader": "^9.5.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsc"
   }
-}
+}

package/src/bin/hightjs.js

@@ -21,6 +21,10 @@
 // Registra o ts-node para que o Node.js entenda TypeScript/TSX
 require('ts-node').register();
 
+// Registra loaders customizados para arquivos markdown, imagens, etc.
+const { registerLoaders } = require('../loaders');
+registerLoaders();
+
 const { program } = require('commander');
 
 
@@ -106,14 +110,48 @@ program
         initializeApp(options, false); // Chama a função com dev: false
     });
 
-// --- Comando EXPORT ---
+/**
+ * Função corrigida para copiar diretórios recursivamente.
+ * Ela agora verifica se um item é um arquivo ou um diretório.
+ */
+function copyDirRecursive(src, dest) {
+    try {
+        // Garante que o diretório de destino exista
+        fs.mkdirSync(dest, { recursive: true });
+
+        // Usamos { withFileTypes: true } para evitar uma chamada extra de fs.statSync
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+
+        for (let entry of entries) {
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
+
+            if (entry.isDirectory()) {
+                // Se for um diretório, chama a si mesma (recursão)
+                copyDirRecursive(srcPath, destPath);
+            } else {
+                // Se for um arquivo, apenas copia
+                fs.copyFileSync(srcPath, destPath);
+            }
+        }
+    } catch (error) {
+        console.error(`❌ Erro ao copiar ${src} para ${dest}:`, error);
+        // Lança o erro para parar o processo de exportação se a cópia falhar
+        throw error;
+    }
+}
+
+
+// --- INÍCIO DO SEU CÓDIGO (AGORA CORRIGIDO) ---
+
 program
     .command('export')
     .description('Exports the application as static HTML to the "exported" folder.')
     .option('-o, --output <path>', 'Specifies the output directory', 'exported')
     .action(async (options) => {
         const projectDir = process.cwd();
-        const exportDir = path.join(projectDir, options.output);
+        // Usar path.resolve é mais seguro para garantir um caminho absoluto
+        const exportDir = path.resolve(projectDir, options.output);
 
         console.log('🚀 Starting export...\n');
 
@@ -128,51 +166,43 @@ program
 
             // 2. Inicializa e prepara o build
             console.log('🔨 Building application...');
+            // ATENÇÃO: Ajuste o caminho deste 'require' conforme a estrutura do seu projeto!
             const teste = require("../helpers");
             const app = teste.default({ dev: false, port: 3000, hostname: '0.0.0.0', framework: 'native' });
             await app.prepare();
             console.log('✅ Build complete\n');
 
-            // 3. Copia a pasta .hight para exported
+            // 3. Copia a pasta .hight para exported (*** CORRIGIDO ***)
             const distDir = path.join(projectDir, '.hight');
             if (fs.existsSync(distDir)) {
                 console.log('📦 Copying JavaScript files...');
                 const exportDistDir = path.join(exportDir, '.hight');
-                fs.mkdirSync(exportDistDir, { recursive: true });
-
-                const files = fs.readdirSync(distDir);
-                files.forEach(file => {
-                    fs.copyFileSync(
-                        path.join(distDir, file),
-                        path.join(exportDistDir, file)
-                    );
-                });
+
+                // --- Lógica de cópia substituída ---
+                // A função copyDirRecursive agora lida com tudo (arquivos e subpastas)
+                copyDirRecursive(distDir, exportDistDir);
+                // --- Fim da substituição ---
+
                 console.log('✅ JavaScript files copied\n');
             }
 
-            // 4. Copia a pasta public se existir
+            // 4. Copia a pasta public se existir (*** CORRIGIDO ***)
             const publicDir = path.join(projectDir, 'public');
             if (fs.existsSync(publicDir)) {
                 console.log('📁 Copying public files...');
                 const exportPublicDir = path.join(exportDir, 'public');
 
-                function copyRecursive(src, dest) {
-                    if (fs.statSync(src).isDirectory()) {
-                        fs.mkdirSync(dest, { recursive: true });
-                        fs.readdirSync(src).forEach(file => {
-                            copyRecursive(path.join(src, file), path.join(dest, file));
-                        });
-                    } else {
-                        fs.copyFileSync(src, dest);
-                    }
-                }
-
-                copyRecursive(publicDir, exportPublicDir);
+                // --- Lógica de cópia substituída ---
+                // Reutilizamos a mesma função corrigida
+                copyDirRecursive(publicDir, exportPublicDir);
+                // --- Fim da substituição ---
+
                 console.log('✅ Public files copied\n');
             }
 
             // 5. Gera o index.html
             console.log('📝 Generating index.html...');
+            // ATENÇÃO: Ajuste os caminhos destes 'requires' conforme a estrutura do seu projeto!
             const { render } = require('../renderer');
             const { loadRoutes, loadLayout, loadNotFound } = require('../router');
 
@@ -202,9 +232,9 @@ program
                     params: {},
                     allRoutes: routes
                 });
-
+                const scriptReplaced = html.replace('/_hight/', './.hight/');
                 const indexPath = path.join(exportDir, 'index.html');
-                fs.writeFileSync(indexPath, html, 'utf8');
+                fs.writeFileSync(indexPath, scriptReplaced, 'utf8');
                 console.log('✅ index.html generated\n');
             }
 
@@ -212,11 +242,11 @@ program
             console.log(`📂 Files exported to: ${exportDir}\n`);
 
         } catch (error) {
-            console.error('❌ Error during export:', error.message);
+            // Logar o erro completo (com stack trace) é mais útil
+            console.error('❌ Error during export:', error);
             process.exit(1);
         }
     });
 
-
 // Faz o "parse" dos argumentos passados na linha de comando
 program.parse(process.argv);

package/src/builder.js

@@ -230,6 +230,166 @@ if (typeof window !== 'undefined' && window.__HWEB_HMR__) {
     }
 };
 
+/**
+ * Plugin para suportar importação de arquivos Markdown (.md)
+ */
+const markdownPlugin = {
+    name: 'markdown-plugin',
+    setup(build) {
+        build.onLoad({ filter: /\.md$/ }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+
+            return {
+                contents: `export default ${JSON.stringify(content)};`,
+                loader: 'js'
+            };
+        });
+    }
+};
+
+/**
+ * Plugin para suportar importação de arquivos de imagem e outros assets
+ */
+const assetsPlugin = {
+    name: 'assets-plugin',
+    setup(build) {
+        // Suporte para imagens (PNG, JPG, JPEG, GIF, SVG, WEBP, etc)
+        build.onLoad({ filter: /\.(png|jpe?g|gif|webp|avif|ico|bmp|tiff?)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+
+            // Mapeamento de extensões para MIME types
+            const mimeTypes = {
+                'png': 'image/png',
+                'jpg': 'image/jpeg',
+                'jpeg': 'image/jpeg',
+                'gif': 'image/gif',
+                'webp': 'image/webp',
+                'avif': 'image/avif',
+                'ico': 'image/x-icon',
+                'bmp': 'image/bmp',
+                'tif': 'image/tiff',
+                'tiff': 'image/tiff'
+            };
+
+            const mimeType = mimeTypes[ext] || 'application/octet-stream';
+
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+
+        // Suporte especial para SVG (pode ser usado como string ou data URL)
+        build.onLoad({ filter: /\.svg$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+            const base64 = Buffer.from(content).toString('base64');
+
+            return {
+                contents: `
+                    export default "data:image/svg+xml;base64,${base64}";
+                    export const svgContent = ${JSON.stringify(content)};
+                `,
+                loader: 'js'
+            };
+        });
+
+        // Suporte para arquivos JSON
+        build.onLoad({ filter: /\.json$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+
+            return {
+                contents: `export default ${content};`,
+                loader: 'js'
+            };
+        });
+
+        // Suporte para arquivos de texto (.txt)
+        build.onLoad({ filter: /\.txt$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+
+            return {
+                contents: `export default ${JSON.stringify(content)};`,
+                loader: 'js'
+            };
+        });
+
+        // Suporte para arquivos de fonte (WOFF, WOFF2, TTF, OTF, EOT)
+        build.onLoad({ filter: /\.(woff2?|ttf|otf|eot)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+
+            const mimeTypes = {
+                'woff': 'font/woff',
+                'woff2': 'font/woff2',
+                'ttf': 'font/ttf',
+                'otf': 'font/otf',
+                'eot': 'application/vnd.ms-fontobject'
+            };
+
+            const mimeType = mimeTypes[ext] || 'application/octet-stream';
+
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+
+        // Suporte para arquivos de áudio (MP3, WAV, OGG, etc)
+        build.onLoad({ filter: /\.(mp3|wav|ogg|m4a|aac|flac)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+
+            const mimeTypes = {
+                'mp3': 'audio/mpeg',
+                'wav': 'audio/wav',
+                'ogg': 'audio/ogg',
+                'm4a': 'audio/mp4',
+                'aac': 'audio/aac',
+                'flac': 'audio/flac'
+            };
+
+            const mimeType = mimeTypes[ext] || 'audio/mpeg';
+
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+
+        // Suporte para arquivos de vídeo (MP4, WEBM, OGV)
+        build.onLoad({ filter: /\.(mp4|webm|ogv)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+
+            const mimeTypes = {
+                'mp4': 'video/mp4',
+                'webm': 'video/webm',
+                'ogv': 'video/ogg'
+            };
+
+            const mimeType = mimeTypes[ext] || 'video/mp4';
+
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+    }
+};
+
 /**
  * Builds with code splitting into multiple chunks based on module types.
  * @param {string} entryPoint - The path to the entry file.
@@ -251,7 +411,7 @@ async function buildWithChunks(entryPoint, outdir, isProduction = false) {
       outdir: outdir,
       loader: { '.js': 'jsx', '.ts': 'tsx' },
       external: nodeBuiltIns,
-      plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin],
+      plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, markdownPlugin, assetsPlugin],
       format: 'esm', // ESM suporta melhor o code splitting
       jsx: 'automatic',
       define: {
@@ -313,7 +473,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
             outdir: outdir,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin, markdownPlugin, assetsPlugin],
             format: 'esm',
             jsx: 'automatic',
             define: {
@@ -359,7 +519,7 @@ async function build(entryPoint, outfile, isProduction = false) {
       outfile: outfile,
       loader: { '.js': 'jsx', '.ts': 'tsx' },
       external: nodeBuiltIns,
-      plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin],
+      plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, markdownPlugin, assetsPlugin],
       format: 'iife',
       globalName: 'HwebApp',
       jsx: 'automatic',
@@ -422,7 +582,6 @@ async function watch(entryPoint, outfile, hotReloadManager = null) {
             outfile: outfile,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, buildCompletePlugin],
             format: 'iife',
             globalName: 'HwebApp',
             jsx: 'automatic',

package/src/client/DefaultNotFound.tsx

@@ -16,69 +16,104 @@
  */
 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;
-}
+export default function App() {
 
-.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);
-    }
+    const globalStyles = `
+        
+        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;
+        }
 
-    .next-error-h1 {
-        border-right: 1px solid rgba(255, 255, 255, .3);
-    }
-}
-                    `
-                }} />
+        *, *:before, *:after {
+            box-sizing: inherit;
+        }
+
+        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;
+        }
+        
+        .error-container {
+             /* Remove qualquer estilo de "card" anterior */
+        }
+
+        .hight-error-h1 {
+            border-right: 1px solid rgba(0, 0, 0, .3);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                color: #fff;
+                background: linear-gradient(to bottom, #222, #000);
+            }
+            .hight-error-h2 {
+                color: white;  
+             }
+            .hight-error-h1 {
+                color: white;
+                border-right: 1px solid rgba(255, 255, 255, .3);
+            }
+        }
+    `;
+
+    // Estilos inline do seu exemplo original
+    const h1Styles = {
+        display: 'inline-block',
+        margin: '0px 20px 0px 0px',
+        padding: '0px 23px 0px 0px',
+        fontSize: '24px',
+        fontWeight: '500',
+        verticalAlign: 'top',
+        lineHeight: '49px'
+    };
+
+    const h2ContainerStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top', // Alinha com o topo do H1
+    };
+
+    const h2Styles = {
+        fontSize: '14px',
+        fontWeight: '400',
+        lineHeight: '49px',
+        margin: '0px'
+    };
+
+
+    return (
+        <>
+            <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
+
+            <div className="error-container">
                 <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'
-                    }}
+                    className="hight-error-h1"
+                    style={h1Styles}
                 >
                     404
                 </h1>
-                <div style={{ display: 'inline-block' }}>
-                    <h2 style={{
-                        fontSize: '14px',
-                        fontWeight: '400',
-                        lineHeight: '49px',
-                        margin: '0px'
-                    }}>
+                <div style={h2ContainerStyles}>
+                    <h2 style={h2Styles} className="hight-error-h2">
                         This page cannot be found.
                     </h2>
                 </div>
             </div>
-        </div>
+        </>
     );
 }
+

package/src/{client.ts → client/client.ts}

@@ -14,10 +14,11 @@
  * 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';
+export { Link } from '../components/Link';
+export { RouteConfig, Metadata } from "../types";
+export { router } from './clientRouter';