@unsetsoft/ryunix-presets 1.0.23-canary.9 → 1.0.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unsetsoft/ryunix-presets",
   "description": "Package with presets for different development environments.",
-  "version": "1.0.23-canary.9",
+  "version": "1.0.25",
   "author": "Neyunse",
   "type": "module",
   "repository": "https://github.com/UnSetSoft/Ryunixjs",
@@ -35,42 +35,49 @@
   "dependencies": {
     "@babel/cli": "7.28.3",
     "@babel/core": "7.28.5",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-transform-react-jsx": "7.27.1",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-react": "7.28.5",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.38.0",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.2",
     "@rollup/plugin-terser": "0.4.4",
-    "@swc/core": "1.12.14",
+    "@swc/core": "1.15.5",
     "babel-loader": "10.0.0",
     "chalk": "5.6.2",
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
-    "css-minimizer-webpack-plugin": "7.0.2",
-    "sass": "1.93.2",
+    "css-minimizer-webpack-plugin": "7.0.4",
+    "sass": "1.97.0",
     "sass-loader": "16.0.6",
     "dotenv-webpack": "8.1.1",
-    "eslint": "9.38.0",
+    "eslint": "9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-webpack-plugin": "5.0.2",
     "file-loader": "6.2.0",
-    "glob": "11.0.3",
-    "globals": "16.4.0",
+    "glob": "13.0.0",
+    "globals": "16.5.0",
     "html-loader": "5.1.0",
-    "html-webpack-plugin": "5.6.4",
-    "image-webpack-loader": "^8.1.0",
+    "html-webpack-plugin": "5.6.5",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.9.4",
-    "rollup": "4.52.5",
+    "rollup": "4.53.5",
     "style-loader": "4.0.0",
     "terminal-log": "1.0.1",
-    "terser-webpack-plugin": "5.3.14",
-    "thread-loader": "4.0.4",
+    "terser-webpack-plugin": "5.3.16",
     "url-loader": "4.1.1",
-    "webpack": "5.102.1",
+    "webpack": "5.104.0",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2",
-    "yargs": "18.0.0"
+    "thread-loader": "4.0.4",
+    "yargs": "18.0.0",
+    "@mdx-js/loader": "3.1.1",
+    "@mdx-js/rollup": "3.1.1",
+    "eslint-plugin-mdx": "3.6.2",
+    "remark-gfm": "4.0.1",
+    "rehype-highlight": "7.0.2",
+    "remark-frontmatter": "5.0.0",
+    "remark-mdx-frontmatter": "5.2.0",
+    "@remark-embedder/core": "3.0.3",
+    "@remark-embedder/transformer-oembed": "5.0.1"
   }
 }

package/webpack/bin/{serve.mjs → dev.server.mjs}

@@ -49,11 +49,14 @@ const StartServer = async (cliSettings) => {
     `${defaultSettings.webpack.output.buildDirectory}/cache`,
   )
 
-  if (!defaultSettings.webpack.production) {
+  const mode =
+    cliSettings.production || defaultSettings.webpack.production ? true : false
+
+  if (!mode) {
     cleanCacheDir(cacheDir)
   }
 
-  webpackConfig.mode = 'development'
+  webpackConfig.mode = mode ? 'production' : 'development'
   const compiler = Webpack(webpackConfig)
   let port = webpackConfig.devServer.port || 3000
 
@@ -65,7 +68,7 @@ const StartServer = async (cliSettings) => {
   const devServerOptions = { ...webpackConfig.devServer, ...cliSettings }
   const server = new WebpackDevServer(devServerOptions, compiler)
 
-  const devMode = Boolean(!defaultSettings.webpack.production)
+  const devMode = Boolean(!mode)
 
   const { version } = await getPackageVersion()
 
@@ -81,7 +84,7 @@ const StartServer = async (cliSettings) => {
       const envStatus = envPath()
         ? chalk.green('loaded')
         : chalk.yellow('not found')
-      const modeLabel = defaultSettings.webpack.production
+      const modeLabel = mode
         ? chalk.green('production')
         : chalk.yellow('development')
 
@@ -109,4 +112,4 @@ const StartServer = async (cliSettings) => {
   await startServer()
 }
 
-export { StartServer }
+export { StartServer as StartDevServer }

package/webpack/bin/index.mjs

@@ -1,7 +1,7 @@
 #! /usr/bin/env node
 import yargs from 'yargs'
 import { hideBin } from 'yargs/helpers'
-import { StartServer } from './serve.mjs'
+import { StartDevServer } from './dev.server.mjs'
 import { compiler } from './compiler.mjs'
 import logger from 'terminal-log'
 import chalk from 'chalk'
@@ -15,6 +15,14 @@ import {
 import { ESLint } from 'eslint'
 import eslintConfig from '../eslint.config.mjs'
 import fs from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import server from './prod.server.mjs'
+import config from '../utils/config.cjs'
+const __filename = fileURLToPath(import.meta.url)
+
+const __dirname = dirname(__filename)
+
 const lint = {
   command: 'lint',
   describe: 'Lint code',
@@ -47,16 +55,48 @@ const lint = {
   },
 }
 
-const serv = {
-  command: 'server',
-  describe: 'Run server',
+const dev = {
+  command: 'dev',
+  describe: 'Run server for developer mode.',
   handler: async (arg) => {
+    if (defaultSettings.webpack.production) {
+      logger.error(
+        'You need use development mode! change webpack.production to false in ryunix.config.js.',
+      )
+      return
+    }
     const open = Boolean(arg.browser) || false
     const settings = {
       open,
     }
 
-    StartServer(settings)
+    StartDevServer(settings)
+  },
+}
+
+const prod = {
+  command: 'start',
+  describe: 'Run server for production mode. Requiere .ryunix/static',
+  handler: async (arg) => {
+    if (!defaultSettings.webpack.production) {
+      logger.error('You need use production mode!')
+      return
+    }
+
+    if (
+      !fs.existsSync(
+        join(process.cwd(), config.webpack.output.buildDirectory, 'static'),
+      )
+    ) {
+      logger.error('You need build first!')
+      return
+    }
+
+    server.listen(config.webpack.devServer.port, () => {
+      console.log(
+        `Server running at http://localhost:${config.webpack.devServer.port}/`,
+      )
+    })
   },
 }
 
@@ -113,4 +153,32 @@ const build = {
   },
 }
 
-yargs(hideBin(process.argv)).command(serv).command(build).command(lint).parse()
+const extractHTML = {
+  command: 'customHtml',
+  describe: 'Extract HTML for customization',
+  handler: async (arg) => {
+    const runPath = process.cwd()
+
+    fs.copyFile(
+      join(__dirname, '..', 'template/index.html'),
+      join(runPath, 'public/index.html'),
+      (err) => {
+        if (err) {
+          console.error('Error extracting HTML: ', err.message)
+          return
+        }
+        console.log(
+          'File extracted successfully. Now you can enable the template with static.customTemplate inside ryunix.config.js',
+        )
+      },
+    )
+  },
+}
+
+yargs(hideBin(process.argv))
+  .command(dev)
+  .command(build)
+  .command(prod)
+  .command(lint)
+  .command(extractHTML)
+  .parse()

package/webpack/bin/prerender.mjs

@@ -22,12 +22,19 @@ const Prerender = async (directory) => {
   if (fs.existsSync(manifestPath)) {
     try {
       routes = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
-      console.log(`[SSG] Found ${routes.length} routes in manifest`)
     } catch (error) {
       console.error('[SSG] Error reading routes manifest:', error)
     }
   }
 
+  const metaExist = routes.some((route) => route.meta)
+  if (metaExist && defaultSettings.static.seo.meta.length > 0) {
+    console.error(
+      '[Ryunix Error] You are mixing static and dynamic meta tags; you can only use one of the two. Remove static.seo.meta from ryunix.config.js.',
+    )
+    process.exit(1)
+  }
+
   if (routes.length === 0) {
     routes = defaultSettings.experimental?.ssg?.prerender || []
     if (routes.length > 0) {

package/webpack/bin/prod.server.mjs

@@ -0,0 +1,401 @@
+import http from 'http'
+import { promises as fs } from 'fs'
+import path from 'path'
+import { createHash } from 'crypto'
+import zlib from 'zlib'
+import { promisify } from 'util'
+import { createReadStream } from 'fs'
+import { pipeline } from 'stream/promises'
+import config from '../utils/config.cjs'
+
+const gzip = promisify(zlib.gzip)
+const brotliCompress = promisify(zlib.brotliCompress)
+
+// MIME types dictionary
+const MIME_TYPES = {
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.html': 'text/html',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.otf': 'font/otf',
+  '.wasm': 'application/wasm',
+  '.ico': 'image/x-icon',
+  '.mp3': 'audio/mpeg',
+  '.mp4': 'video/mp4',
+  '.pdf': 'application/pdf',
+  '.zip': 'application/zip',
+  '.gz': 'application/gzip',
+  '.tar': 'application/x-tar',
+  '.7z': 'application/x-7z-compressed',
+  '.rar': 'application/x-rar-compressed',
+  '.avi': 'video/x-msvideo',
+  '.mov': 'video/quicktime',
+  '.wmv': 'video/x-ms-wmv',
+  '.flv': 'video/x-flv',
+  '.webm': 'video/webm',
+  '.ogg': 'audio/ogg',
+  '.ogv': 'video/ogg',
+  '.m4v': 'video/mp4',
+  '.3gp': 'video/3gpp',
+  '.3g2': 'video/3gpp2',
+  '.mkv': 'video/x-matroska',
+  '.ts': 'video/mp2t',
+}
+
+// File cache for production server
+const fileCache = new Map()
+const MAX_CACHE_SIZE = 50 * 1024 * 1024 // 50MB
+let currentCacheSize = 0
+
+/**
+ * Get MIME type from file extension
+ */
+const getMimeType = (filePath) => {
+  const ext = path.extname(filePath).toLowerCase()
+  return MIME_TYPES[ext] || 'application/octet-stream'
+}
+
+/**
+ * Validate path to prevent directory traversal attacks
+ */
+const validatePath = (requestPath, rootDir) => {
+  try {
+    const normalizedPath = path.normalize(requestPath)
+    const resolvedPath = path.resolve(rootDir, normalizedPath.slice(1))
+
+    if (!resolvedPath.startsWith(rootDir)) {
+      return null
+    }
+
+    return resolvedPath
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Generate ETag from file content
+ */
+const generateETag = (content) => {
+  return createHash('md5').update(content).digest('hex')
+}
+
+/**
+ * Check compression support (Brotli preferred over Gzip)
+ */
+const getAcceptedEncoding = (headers) => {
+  const encoding = headers['accept-encoding'] || ''
+  if (encoding.includes('br')) return 'br'
+  if (encoding.includes('gzip')) return 'gzip'
+  return null
+}
+
+/**
+ * Check if MIME type is compressible
+ */
+const isCompressible = (mimeType) => {
+  return (
+    mimeType.startsWith('text/') ||
+    mimeType.includes('javascript') ||
+    mimeType.includes('json') ||
+    mimeType.includes('css')
+  )
+}
+
+/**
+ * Parse Range header
+ */
+const parseRange = (rangeHeader, fileSize) => {
+  if (!rangeHeader) return null
+
+  const parts = rangeHeader.replace(/bytes=/, '').split('-')
+  const start = parseInt(parts[0], 10)
+  const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1
+
+  if (isNaN(start) || isNaN(end) || start > end || end >= fileSize) {
+    return null
+  }
+
+  return { start, end, length: end - start + 1 }
+}
+
+/**
+ * Check if file should support range requests (media files)
+ */
+const supportsRangeRequests = (mimeType) => {
+  return (
+    mimeType.startsWith('video/') ||
+    mimeType.startsWith('audio/') ||
+    mimeType === 'application/pdf'
+  )
+}
+
+/**
+ * Serve file with range support (for video/audio)
+ */
+const serveWithRange = async (filePath, req, res, stats) => {
+  const mimeType = getMimeType(filePath)
+  const range = parseRange(req.headers.range, stats.size)
+
+  const headers = {
+    'Content-Type': mimeType,
+    'Accept-Ranges': 'bytes',
+    'Cache-Control': 'public, max-age=31536000',
+  }
+
+  if (range) {
+    // Partial content
+    headers['Content-Range'] = `bytes ${range.start}-${range.end}/${stats.size}`
+    headers['Content-Length'] = range.length
+
+    res.writeHead(206, headers)
+
+    const stream = createReadStream(filePath, {
+      start: range.start,
+      end: range.end,
+    })
+    await pipeline(stream, res)
+  } else {
+    // Full content
+    headers['Content-Length'] = stats.size
+    res.writeHead(200, headers)
+
+    const stream = createReadStream(filePath)
+    await pipeline(stream, res)
+  }
+
+  return true
+}
+
+/**
+ * Serve static file with caching and compression
+ */
+const serveStaticFile = async (filePath, req, res) => {
+  try {
+    let stats = await fs.stat(filePath)
+
+    // 👉 If is a directory
+    if (stats.isDirectory()) {
+      const indexPath = path.join(filePath, 'index.html')
+      await fs.access(indexPath)
+      stats = await fs.stat(indexPath)
+      filePath = indexPath
+    }
+
+    const mimeType = getMimeType(filePath)
+
+    // Use range requests for media files or large files
+    if (supportsRangeRequests(mimeType) || stats.size > 5 * 1024 * 1024) {
+      return await serveWithRange(filePath, req, res, stats)
+    }
+
+    let cached = fileCache.get(filePath)
+
+    if (!cached) {
+      // Read and cache file
+      const content = await fs.readFile(filePath)
+      const etag = generateETag(content)
+
+      // Compress if text-based content
+      let brotli = null
+      let gzipped = null
+
+      if (isCompressible(mimeType)) {
+        try {
+          ;[brotli, gzipped] = await Promise.all([
+            brotliCompress(content, {
+              params: {
+                [zlib.constants.BROTLI_PARAM_QUALITY]: 6,
+              },
+            }),
+            gzip(content),
+          ])
+        } catch {
+          // Compression failed, serve uncompressed
+        }
+      }
+
+      cached = {
+        content,
+        brotli,
+        gzipped,
+        etag,
+        mimeType,
+        size: stats.size,
+      }
+
+      // Update cache
+      if (currentCacheSize + stats.size < MAX_CACHE_SIZE) {
+        fileCache.set(filePath, cached)
+        currentCacheSize += stats.size
+      }
+    }
+
+    // Check ETag for 304 Not Modified
+    if (req.headers['if-none-match'] === cached.etag) {
+      res.writeHead(304)
+      res.end()
+      return true
+    }
+
+    // Select best encoding
+    const encoding = getAcceptedEncoding(req.headers)
+    let responseContent = cached.content
+    let contentEncoding = null
+
+    if (encoding === 'br' && cached.brotli) {
+      responseContent = cached.brotli
+      contentEncoding = 'br'
+    } else if (encoding === 'gzip' && cached.gzipped) {
+      responseContent = cached.gzipped
+      contentEncoding = 'gzip'
+    }
+
+    const headers = {
+      'Content-Type': cached.mimeType,
+      'Content-Length': responseContent.length,
+      ETag: cached.etag,
+      'Cache-Control': 'public, max-age=31536000',
+    }
+
+    if (contentEncoding) {
+      headers['Content-Encoding'] = contentEncoding
+    }
+
+    res.writeHead(200, headers)
+    res.end(responseContent)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+/**
+ * Serve HTML page with SPA fallback support
+ */
+const serveHTMLPage = async (pathname, staticDir, req, res) => {
+  try {
+    const candidates = []
+
+    // / → /index.html
+    if (pathname === '/') {
+      candidates.push(path.join(staticDir, 'index.html'))
+    } else {
+      // /test → /test/index.html
+      candidates.push(path.join(staticDir, pathname, 'index.html'))
+
+      // /test → /test.html
+      candidates.push(path.join(staticDir, `${pathname}.html`))
+
+      // SPA fallback
+      candidates.push(path.join(staticDir, 'index.html'))
+    }
+
+    let pageFile = null
+
+    for (const file of candidates) {
+      try {
+        await fs.access(file)
+        pageFile = file
+        break
+      } catch {}
+    }
+
+    if (!pageFile) {
+      res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' })
+      res.end('404')
+      return
+    }
+
+    const content = await fs.readFile(pageFile, 'utf-8')
+    const etag = generateETag(Buffer.from(content))
+
+    if (req.headers['if-none-match'] === etag) {
+      res.writeHead(304)
+      res.end()
+      return
+    }
+
+    // Compress HTML
+    let responseContent = content
+    const headers = {
+      'Content-Type': 'text/html; charset=utf-8',
+      ETag: etag,
+      'Cache-Control': 'no-cache',
+    }
+
+    const encoding = getAcceptedEncoding(req.headers)
+
+    if (encoding === 'br') {
+      try {
+        responseContent = await brotliCompress(Buffer.from(content))
+        headers['Content-Encoding'] = 'br'
+      } catch {
+        // Fallback to uncompressed
+      }
+    } else if (encoding === 'gzip') {
+      try {
+        responseContent = await gzip(Buffer.from(content))
+        headers['Content-Encoding'] = 'gzip'
+      } catch {
+        // Fallback to uncompressed
+      }
+    }
+
+    headers['Content-Length'] = Buffer.byteLength(responseContent)
+
+    res.writeHead(200, headers)
+    res.end(responseContent)
+  } catch (error) {
+    res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' })
+    res.end('500')
+  }
+}
+
+/**
+ * Request handler
+ */
+const requestHandler = async (req, res) => {
+  const rootDir = process.cwd()
+  const staticDir = path.join(
+    rootDir,
+    config.webpack.output.buildDirectory,
+    'static',
+  )
+
+  try {
+    const parsedUrl = new URL(req.url, `http://${req.headers.host}`)
+    const pathname = decodeURIComponent(parsedUrl.pathname)
+
+    const safePath = validatePath(pathname, staticDir)
+    if (!safePath) {
+      res.writeHead(403, { 'Content-Type': 'text/plain; charset=utf-8' })
+      res.end('403')
+      return
+    }
+
+    const fileServed = await serveStaticFile(safePath, req, res)
+
+    if (!fileServed) {
+      await serveHTMLPage(pathname, staticDir, req, res)
+    }
+  } catch (error) {
+    console.error('[Ryunix Server Error]:', error.message)
+    res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' })
+    res.end('500')
+  }
+}
+
+const httpServ = http.createServer(requestHandler)
+
+export default httpServ

package/webpack/eslint.config.mjs

@@ -1,15 +1,27 @@
 import config from './utils/config.cjs'
-import { resolveApp } from './utils/index.mjs'
 import { defineConfig } from 'eslint/config'
-const dir = process.cwd()
 
+/**
+ * ESLint Configuration for Ryunix
+ *
+ * NOTE ABOUT MDX:
+ * .mdx and .md files are excluded from ESLint due to compatibility issues
+ * between eslint-plugin-mdx and ESM/flat config.
+ *
+ * Error: “Could not find ESLint Linter in require cache”
+ *
+ * MDX files are validated during compilation by @mdx-js/loader,
+ * which is sufficient for detecting syntax and JSX errors.
+ */
 const eslintConfig = defineConfig([
   {
     files: ['**/*.ryx', ...config?.eslint?.files],
+
+    ignores: ['**/*.mdx', '**/*.md', '**/node_modules/**'],
+
     languageOptions: {
       ecmaVersion: 2021,
       sourceType: 'module',
-
       parserOptions: {
         ecmaFeatures: {
           jsx: true,
@@ -19,8 +31,8 @@ const eslintConfig = defineConfig([
     },
     settings: {
       react: {
-        pragma: 'Ryunix.createElement', // Para JSX transpile a Ryunix.createElement
-        fragment: 'Ryunix.Fragment', // Para fragmentos JSX
+        pragma: 'Ryunix.createElement',
+        fragment: 'Ryunix.Fragment',
       },
     },
     plugins: config?.eslint?.plugins,