@unsetsoft/ryunix-presets 1.0.26-canary.4 → 1.0.26-canary.41

package/README.es.md

@@ -0,0 +1,126 @@
+<!-- markdownlint-disable MD033 MD041 MD013 -->
+
+> **Language / Idioma:** [English](./README.md) · [Español](./README.es.md)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png" width="200" height="200" alt="RyunixJS Logo" />
+</p>
+
+<h1 align="center">@unsetsoft/ryunix-presets</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunix-presets">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunix-presets.svg?style=flat-square" alt="versión npm" />
+  </a>
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunix-presets/v/canary">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunix-presets/canary.svg?style=flat-square&label=canary" alt="versión canary" />
+  </a>
+</p>
+
+## <!-- markdownlint-enable MD013 -->
+
+## 🛠️ La columna vertebral del tooling
+
+`@unsetsoft/ryunix-presets` es el paquete central que gestiona el sistema de build de
+RyunixJS. Abstrae la complejidad de Webpack, Babel y loaders especializados, ofreciendo
+una experiencia de desarrollo unificada y optimizada.
+
+### Capacidades principales
+
+- **Configuración Webpack unificada**: compilación dual para entornos SSR y navegador.
+
+- **RSC y Server Actions**: loaders nativos para Server Components y Actions al estilo
+
+  React.
+
+- **Loaders avanzados**: soporte preconfigurado para MDX, SASS, PostCSS y assets
+
+  optimizados.
+
+- **Motor SSG**: plugins integrados para generación de sitios estáticos y
+
+  prerenderizado.
+
+## 🚀 Instalación
+
+```bash
+npm install @unsetsoft/ryunix-presets
+```
+
+## ⚙️ Configuración (`ryunix.config.js`)
+
+Los proyectos RyunixJS se configuran con un archivo `ryunix.config.js` (o `.cjs`) en la
+
+raíz.
+
+### Opciones principales
+
+| Opción     | Tipo              | Por defecto | Descripción                                         |
+| :--------- | :---------------- | :---------- | :-------------------------------------------------- |
+| `ssr`      | `boolean`         | `true`      | Habilita Server-Side Rendering.                     |
+| `mdx`      | `boolean`         | `false`     | Habilita soporte MDX nativo.                        |
+| `rootDir`  | `string`          | `"src"`     | Directorio del código fuente.                       |
+| `buildDir` | `string`          | `".ryunix"` | Directorio de salida del build.                     |
+| `port`     | `number`          | `3000`      | Puerto del servidor de desarrollo.                  |
+| `favicon`  | `string\|boolean` | `true`      | Ruta del favicon o booleano para el predeterminado. |
+| `debug`    | `boolean`         | `false`     | Registro detallado para depuración.                 |
+
+### Servidor y seguridad
+
+- **`server.csp`**: `boolean` — activa Content Security Policy.
+- **`server.cors`**: configura CORS en el servidor de desarrollo (`enabled`, `origin`,
+
+  `methods`, etc.).
+
+### Personalización avanzada de Webpack
+
+Puedes extender la configuración de Webpack con la clave `webpack`:
+
+```javascript
+module.exports = {
+  webpack: {
+    resolve: {
+      alias: {
+        '@components': 'src/components',
+      },
+    },
+    plugins: [
+      /* Plugins personalizados */
+    ],
+    module: {
+      rules: [
+        /* Reglas personalizadas */
+      ],
+    },
+  },
+}
+```
+
+### Configuración del linter
+
+Controla el comportamiento de ESLint en desarrollo:
+
+```javascript
+module.exports = {
+  eslint: {
+    files: ['src/**/*.ryx'],
+    rules: {
+      'no-console': 'warn',
+    },
+  },
+}
+```
+
+## 🏗️ Pipelines de build
+
+El paquete presets gestiona tres pipelines principales:
+
+1. **Pipeline cliente**: compila assets para el navegador con code splitting y HMR.
+
+2. **Pipeline servidor**: compila lógica de servidor y renderizadores SSG para Node.js.
+
+3. **SSG / prerender**: lógica unificada para generar HTML estático en la fase de build.
+
+## 📄 Licencia
+
+RyunixJS tiene [licencia MIT](../../LICENSE).

package/README.md

@@ -0,0 +1,133 @@
+<!-- markdownlint-disable MD033 MD041 MD013 -->
+
+> **Language / Idioma:** [English](./README.md) · [Español](./README.es.md)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png" width="200" height="200" alt="RyunixJS Logo" />
+</p>
+
+<h1 align="center">@unsetsoft/ryunix-presets</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunix-presets">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunix-presets.svg?style=flat-square" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunix-presets/v/canary">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunix-presets/canary.svg?style=flat-square&label=canary" alt="canary version" />
+  </a>
+</p>
+
+## <!-- markdownlint-enable MD013 -->
+
+## 🛠️ The Tooling Backbone
+
+`@unsetsoft/ryunix-presets` is the central package managing the build system of
+RyunixJS. It abstracts the complexity of Webpack, Babel, and specialized
+loaders, providing a unified and optimized development experience.
+
+### Key Capabilities
+
+- **Unified Webpack Config**: Handles dual compilation for SSR and Browser
+
+  environments.
+
+- **RSC & Server Actions**: Includes native loaders for React-like Server
+
+  Components and Actions.
+
+- **Advanced Loaders**: Pre-configured support for MDX, SASS, PostCSS, and
+
+  optimized assets.
+
+- **SSG Engine**: Integrated plugins for static site generation and
+
+  prerendering.
+
+## 🚀 Installation
+
+```bash
+npm install @unsetsoft/ryunix-presets
+```
+
+## ⚙️ Configuration (`ryunix.config.js`)
+
+RyunixJS projects are configured via a `ryunix.config.js` (or `.cjs`) file at
+the root.
+
+### Core Options
+
+| Option     | Type              | Default     | Description                                   |
+| :--------- | :---------------- | :---------- | :-------------------------------------------- |
+| `ssr`      | `boolean`         | `true`      | Enables Server-Side Rendering.                |
+| `mdx`      | `boolean`         | `false`     | Enables native MDX support.                   |
+| `rootDir`  | `string`          | `"src"`     | The directory containing your source code.    |
+| `buildDir` | `string`          | `".ryunix"` | The output directory for builds.              |
+| `port`     | `number`          | `3000`      | Dev server port.                              |
+| `favicon`  | `string\|boolean` | `true`      | Path to favicon or boolean to enable default. |
+| `debug`    | `boolean`         | `false`     | Enable verbose logging for debugging.         |
+
+### Server & Security
+
+- **`server.csp`**: `boolean` - Enable Content Security Policy.
+- **`server.cors`**: Configure CORS for the dev server (`enabled`, `origin`,
+
+  `methods`, etc.).
+
+### Advanced Webpack Customization
+
+You can extend the underlying Webpack configuration via the `webpack` key:
+
+```javascript
+module.exports = {
+  webpack: {
+    resolve: {
+      alias: {
+        '@components': 'src/components',
+      },
+    },
+    plugins: [
+      /* Custom Webpack Plugins */
+    ],
+    module: {
+      rules: [
+        /* Custom Rules */
+      ],
+    },
+  },
+}
+```
+
+### Linter Configuration
+
+Control how ESLint behaves during development:
+
+```javascript
+module.exports = {
+  eslint: {
+    files: ['src/**/*.ryx'],
+    rules: {
+      'no-console': 'warn',
+    },
+  },
+}
+```
+
+## 🏗️ Build Pipelines
+
+The presets package manages three main pipelines:
+
+1. **Client Pipeline**: Compiles assets for the browser with code splitting and
+
+   HMR.
+
+2. **Server Pipeline**: Compiles server-side logic and SSG renderers for Node.js
+
+   environments.
+
+3. **SSG/Prerender**: Unified logic to generate static HTML during the build
+
+   phase.
+
+## 📄 License
+
+RyunixJS is [MIT Licensed](../../LICENSE).

package/package.json

@@ -1,83 +1,101 @@
 {
   "name": "@unsetsoft/ryunix-presets",
   "description": "Package with presets for different development environments.",
-  "version": "1.0.26-canary.4",
+  "version": "1.0.26-canary.41",
   "author": "Neyunse",
   "type": "module",
-  "repository": "https://github.com/UnSetSoft/Ryunixjs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/UnSetSoft/Ryunixjs.git",
+    "directory": "packages/ryunix-presets"
+  },
   "license": "MIT",
   "keywords": [
     "ryunixjs"
   ],
   "files": [
-    "vite/",
-    "rspack/",
     "webpack/"
   ],
   "peerDependencies": {
-    "@unsetsoft/ryunixjs": "^1.2.4-canary.x || ^1.2.4"
+    "@unsetsoft/ryunixjs": "^1.2.5-canary.0 || ^1.2.4"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
   },
   "exports": {
-    "./vite": "./vite/index.js",
-    "./rspack": "./rspack/index.js",
-    "./webpack": "./webpack/index.js"
+    ".": {
+      "types": "./webpack/config.d.ts"
+    },
+    "./webpack": {
+      "types": "./webpack/config.d.ts",
+      "import": "./webpack/index.js",
+      "default": "./webpack/index.js"
+    }
   },
   "types": "./webpack/config.d.ts",
   "bin": {
-    "ryunix": "./webpack/bin/index.mjs"
+    "ryunix": "./webpack/bin/index.js"
   },
   "engines": {
     "node": "^20 || ^22 || ^24"
   },
   "dependencies": {
-    "@babel/cli": "7.28.3",
+    "@babel/cli": "7.28.6",
     "@babel/core": "7.28.5",
     "@babel/plugin-transform-react-jsx": "7.27.1",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-react": "7.28.5",
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.2",
-    "@rollup/plugin-terser": "0.4.4",
+    "@mdx-js/loader": "3.1.1",
+    "@mdx-js/rollup": "3.1.1",
+    "@remark-embedder/core": "3.0.3",
+    "@remark-embedder/transformer-oembed": "5.0.1",
+    "@rollup/plugin-terser": "1.0.0",
     "@swc/core": "1.15.5",
+    "@vitejs/plugin-react-swc": "4.3.0",
     "babel-loader": "10.0.0",
+    "boxen": "8.0.1",
     "chalk": "5.6.2",
-    "copy-webpack-plugin": "13.0.1",
+    "copy-webpack-plugin": "14.0.0",
     "css-loader": "7.1.2",
-    "css-minimizer-webpack-plugin": "7.0.4",
-    "sass": "1.97.0",
-    "sass-loader": "16.0.6",
+    "css-minimizer-webpack-plugin": "8.0.0",
     "dotenv-webpack": "8.1.1",
     "eslint": "9.39.2",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-mdx": "3.6.2",
+    "eslint-plugin-react": "7.37.5",
     "eslint-webpack-plugin": "5.0.2",
-    "file-loader": "6.2.0",
-    "glob": "13.0.0",
-    "globals": "16.5.0",
+    "glob": "13.0.6",
+    "globals": "17.4.0",
     "html-loader": "5.1.0",
     "html-webpack-plugin": "5.6.5",
-    "lodash": "4.17.21",
-    "mini-css-extract-plugin": "2.9.4",
-    "rollup": "4.53.5",
+    "jiti": "2.6.1",
+    "mini-css-extract-plugin": "2.10.1",
+    "postcss": "8.5.8",
+    "postcss-loader": "8.2.1",
+    "rehype-highlight": "7.0.2",
+    "remark-frontmatter": "5.0.0",
+    "remark-gfm": "4.0.1",
+    "remark-mdx-frontmatter": "5.2.0",
+    "rollup": "4.59.0",
+    "sass": "1.97.0",
+    "sass-loader": "16.0.7",
     "style-loader": "4.0.0",
+    "swc-loader": "0.2.7",
     "terminal-log": "1.0.1",
-    "terser-webpack-plugin": "5.3.16",
-    "url-loader": "4.1.1",
-    "webpack": "5.104.0",
+    "terser-webpack-plugin": "5.4.0",
+    "thread-loader": "4.0.4",
+    "vite": "8.0.0",
+    "webpack": "5.105.4",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2",
-    "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"
+    "yargs": "18.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build": "tsc -p tsconfig.emit.json && prettier -w \"webpack/**/*.js\"",
+    "test": "node --test webpack/plugins/remark-github-alerts.test.mjs"
   }
 }

package/webpack/bin/{compiler.mjs → compiler.js}

@@ -1,6 +1,5 @@
-import webpack from 'webpack'
-import webpackConfig from '../webpack.config.mjs'
-webpackConfig.mode = 'production'
-const compiler = webpack(webpackConfig)
-
-export { compiler }
+import webpack from 'webpack'
+import webpackConfig from '../webpack.config.js'
+webpackConfig.mode = 'production'
+const compiler = webpack(webpackConfig)
+export { compiler }

package/webpack/bin/compiler.ts

@@ -0,0 +1,6 @@
+import webpack from 'webpack'
+import webpackConfig from '../webpack.config.js'
+;(webpackConfig as webpack.Configuration).mode = 'production'
+const compiler = webpack(webpackConfig as webpack.Configuration)
+
+export { compiler }

package/webpack/bin/dev.server.js

@@ -0,0 +1,120 @@
+import Webpack from 'webpack'
+import WebpackDevServer from 'webpack-dev-server'
+import webpackConfig from '../webpack.config.js'
+import { configFileExist } from '../utils/settingfile.cjs'
+import envPath from '../utils/envExist.cjs'
+import { getPackageVersion, resolveApp, cleanCacheDir } from '../utils/index.js'
+import logger from 'terminal-log'
+import chalk from 'chalk'
+import net from 'net' // Para verificar si el puerto está disponible
+import boxen from 'boxen'
+import defaultSettings from '../utils/config.cjs'
+const checkPortInUse = (port) => {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer()
+    server.once('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(true) // Puerto en uso
+      } else {
+        reject(err)
+      }
+    })
+    server.once('listening', () => {
+      server.close()
+      resolve(false) // Puerto libre
+    })
+    server.listen(port)
+  })
+}
+const findAvailablePort = async (port) => {
+  let isPortInUse = await checkPortInUse(port)
+  while (isPortInUse) {
+    logger.warn(
+      chalk.yellow(`Port ${port} is in use, trying port ${port + 1}...`),
+    )
+    port += 1
+    isPortInUse = await checkPortInUse(port)
+  }
+  return port
+}
+const StartServer = async (cliSettings) => {
+  const cacheDir = resolveApp(
+    process.cwd(),
+    `${defaultSettings.buildDir}/cache`,
+  )
+  const mode =
+    cliSettings.production || defaultSettings.webpack.production ? true : false
+  if (!mode) {
+    cleanCacheDir(cacheDir)
+  }
+  const configs = webpackConfig
+  const clientConfig = Array.isArray(configs)
+    ? configs.find((c) => c.name === 'client') || configs[0]
+    : configs
+  if (Array.isArray(configs)) {
+    configs.forEach((c) => {
+      c.mode = mode ? 'production' : 'development'
+    })
+  } else {
+    configs.mode = mode ? 'production' : 'development'
+  }
+  const compiler = Array.isArray(configs) ? Webpack(configs) : Webpack(configs)
+  const clientDevServer = clientConfig.devServer
+  let port = clientDevServer?.port || 3000
+  // Encontrar un puerto disponible
+  port = await findAvailablePort(port)
+  // Modificamos el puerto en la configuración
+  if (clientDevServer) {
+    clientDevServer.port = port
+  }
+  const devServerOptions = { ...(clientDevServer || {}), ...cliSettings }
+  const server = new WebpackDevServer(devServerOptions, compiler)
+  const devMode = Boolean(!mode)
+  const { version } = await getPackageVersion()
+  const startServer = async () => {
+    try {
+      await server.start() // Iniciar el servidor con el nuevo puerto
+      const url = `http://localhost:${port}`
+      const cfgStatus = configFileExist()
+        ? chalk.green('✔ Loaded')
+        : chalk.red('✘ Not found')
+      const envStatus = envPath()
+        ? chalk.green('✔ Loaded')
+        : chalk.yellow('✘ Not found')
+      const modeLabel = mode
+        ? chalk.bold(chalk.magenta('production'))
+        : chalk.bold(chalk.cyan('development'))
+      const { version } = await getPackageVersion()
+      const content = [
+        `${chalk.bold(chalk.cyanBright('<Ryunix/>'))} ${chalk.gray(`v${version}`)}`,
+        '',
+        `${chalk.white('Ready at:')} ${chalk.underline(chalk.cyan(url))}`,
+        `${chalk.white('Config:')}   ${cfgStatus}`,
+        `${chalk.white('Env:')}      ${envStatus}`,
+        `${chalk.white('Mode:')}     ${modeLabel}`,
+      ]
+      if (devMode) {
+        content.push('')
+        content.push(
+          `${chalk.yellow('⚠️')}  ${chalk.yellow('Development mode active')}`,
+        )
+        content.push(chalk.gray('Build for production to optimize performance'))
+      }
+      console.log(
+        boxen(content.join('\n'), {
+          padding: 1,
+          margin: 1,
+          borderStyle: 'round',
+          borderColor: 'cyan',
+          title: chalk.bold('Dev Server'),
+          titleAlignment: 'center',
+          minimumWidth: 50,
+        }),
+      )
+    } catch (err) {
+      logger.error(`[error] ${err.message}`)
+    }
+  }
+  await startServer()
+}
+export { StartServer as StartDevServer }

package/webpack/bin/dev.server.ts

@@ -0,0 +1,151 @@
+import Webpack from 'webpack'
+import WebpackDevServer from 'webpack-dev-server'
+import webpackConfig from '../webpack.config.js'
+import { configFileExist } from '../utils/settingfile.cjs'
+import envPath from '../utils/envExist.cjs'
+import { getPackageVersion, resolveApp, cleanCacheDir } from '../utils/index.js'
+import logger from 'terminal-log'
+import chalk from 'chalk'
+import net from 'net' // Para verificar si el puerto está disponible
+import boxen from 'boxen'
+import defaultSettings from '../utils/config.cjs'
+
+const checkPortInUse = (port) => {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer()
+    server.once('error', (err: NodeJS.ErrnoException) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(true) // Puerto en uso
+      } else {
+        reject(err)
+      }
+    })
+    server.once('listening', () => {
+      server.close()
+      resolve(false) // Puerto libre
+    })
+    server.listen(port)
+  })
+}
+
+const findAvailablePort = async (port) => {
+  let isPortInUse = await checkPortInUse(port)
+  while (isPortInUse) {
+    logger.warn(
+      chalk.yellow(`Port ${port} is in use, trying port ${port + 1}...`),
+    )
+    port += 1
+    isPortInUse = await checkPortInUse(port)
+  }
+  return port
+}
+
+const StartServer = async (cliSettings) => {
+  const cacheDir = resolveApp(
+    process.cwd(),
+    `${defaultSettings.buildDir}/cache`,
+  )
+
+  const mode =
+    cliSettings.production || defaultSettings.webpack.production ? true : false
+
+  if (!mode) {
+    cleanCacheDir(cacheDir)
+  }
+
+  const configs = webpackConfig as
+    | Webpack.Configuration
+    | Webpack.Configuration[]
+  const clientConfig = Array.isArray(configs)
+    ? configs.find((c) => c.name === 'client') || configs[0]
+    : configs
+
+  if (Array.isArray(configs)) {
+    configs.forEach((c) => {
+      c.mode = mode ? 'production' : 'development'
+    })
+  } else {
+    configs.mode = mode ? 'production' : 'development'
+  }
+
+  const compiler = Array.isArray(configs)
+    ? Webpack(configs as Webpack.MultiConfiguration)
+    : Webpack(configs)
+  const clientDevServer = (
+    clientConfig as Webpack.Configuration & {
+      devServer?: WebpackDevServer.Configuration
+    }
+  ).devServer
+  let port = clientDevServer?.port || 3000
+
+  // Encontrar un puerto disponible
+  port = await findAvailablePort(port)
+
+  // Modificamos el puerto en la configuración
+  if (clientDevServer) {
+    clientDevServer.port = port
+  }
+  const devServerOptions = { ...(clientDevServer || {}), ...cliSettings }
+  const server = new WebpackDevServer(
+    devServerOptions as WebpackDevServer.Configuration,
+    compiler,
+  )
+
+  const devMode = Boolean(!mode)
+
+  const { version } = await getPackageVersion()
+
+  const startServer = async () => {
+    try {
+      await server.start() // Iniciar el servidor con el nuevo puerto
+
+      const url = `http://localhost:${port}`
+      const cfgStatus = configFileExist()
+        ? chalk.green('✔ Loaded')
+        : chalk.red('✘ Not found')
+      const envStatus = envPath()
+        ? chalk.green('✔ Loaded')
+        : chalk.yellow('✘ Not found')
+      const modeLabel = mode
+        ? chalk.bold(chalk.magenta('production'))
+        : chalk.bold(chalk.cyan('development'))
+
+      const { version } = await getPackageVersion()
+
+      const content = [
+        `${chalk.bold(chalk.cyanBright('<Ryunix/>'))} ${chalk.gray(`v${version}`)}`,
+        '',
+        `${chalk.white('Ready at:')} ${chalk.underline(chalk.cyan(url))}`,
+        `${chalk.white('Config:')}   ${cfgStatus}`,
+        `${chalk.white('Env:')}      ${envStatus}`,
+        `${chalk.white('Mode:')}     ${modeLabel}`,
+      ]
+
+      if (devMode) {
+        content.push('')
+        content.push(
+          `${chalk.yellow('⚠️')}  ${chalk.yellow('Development mode active')}`,
+        )
+        content.push(chalk.gray('Build for production to optimize performance'))
+      }
+
+      console.log(
+        boxen(content.join('\n'), {
+          padding: 1,
+          margin: 1,
+          borderStyle: 'round',
+          borderColor: 'cyan',
+          title: chalk.bold('Dev Server'),
+          titleAlignment: 'center',
+          minimumWidth: 50,
+        }),
+      )
+    } catch (err) {
+      logger.error(`[error] ${err.message}`)
+    }
+  }
+
+  await startServer()
+}
+
+export { StartServer as StartDevServer }