@unsetsoft/ryunix-presets 0.0.6 → 1.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unsetsoft/ryunix-presets",
   "description": "Package with presets for different development environments.",
-  "version": "0.0.6",
+  "version": "1.0.14",
   "author": "Neyunse",
   "type": "module",
   "repository": "https://github.com/UnSetSoft/Ryunixjs",
@@ -11,18 +11,66 @@
   ],
   "files": [
     "vite/",
-    "rspack/"
+    "rspack/",
+    "webpack/"
   ],
-  "scripts": {},
-  "dependencies": {},
+  "peerDependencies": {
+    "@unsetsoft/ryunixjs": "^1.2.1"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "exports": {
     "./vite": "./vite/index.js",
-    "./rspack": "./rspack/index.js"
+    "./rspack": "./rspack/index.js",
+    "./webpack": "./webpack/index.js"
+  },
+  "types": "./webpack/config.d.ts",
+  "bin": {
+    "ryunix": "./webpack/bin/index.mjs"
   },
   "engines": {
-    "node": "^18 || ^22"
+    "node": "^18 || ^20 || ^22"
+  },
+  "dependencies": {
+    "@babel/cli": "7.27.2",
+    "@babel/core": "7.27.4",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-transform-react-jsx": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.31.0",
+    "@rollup/plugin-terser": "0.4.4",
+    "@swc/core": "1.12.6",
+    "babel-loader": "10.0.0",
+    "chalk": "5.4.1",
+    "copy-webpack-plugin": "13.0.0",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "7.0.2",
+    "dotenv-webpack": "8.1.0",
+    "eslint": "9.31.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-webpack-plugin": "5.0.2",
+    "file-loader": "6.2.0",
+    "glob": "11.0.3",
+    "globals": "16.2.0",
+    "html-loader": "5.1.0",
+    "html-webpack-plugin": "5.6.3",
+    "image-webpack-loader": "8.1.0",
+    "lodash": "4.17.21",
+    "mini-css-extract-plugin": "2.9.2",
+    "rollup": "4.44.0",
+    "sass": "1.89.2",
+    "sass-loader": "16.0.5",
+    "style-loader": "4.0.0",
+    "terminal-log": "1.0.1",
+    "terser-webpack-plugin": "5.3.14",
+    "thread-loader": "4.0.4",
+    "url-loader": "4.1.1",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.2",
+    "yargs": "18.0.0"
   }
-}
+}

package/rspack/index.js

@@ -1,92 +1,92 @@
-import rspack from '@rspack/core'
-import { resolve, join } from 'path'
-
-const resolveApp = (appDirectory, relativePath) =>
-  resolve(appDirectory, relativePath)
-
-const ryunixRspack = () => {
-  const isDev = process.env.NODE_ENV === 'development'
-  const dir = process.cwd()
-  return {
-    mode: isDev ? 'development' : 'production',
-    context: resolveApp(dir, 'src'),
-    entry: {
-      main: './main.ryx',
-    },
-    devtool: isDev ? 'source-map' : false,
-    output: {
-      publicPath: '/',
-    },
-    devServer: {
-      hot: isDev,
-      historyApiFallback: {
-        index: '/',
-        disableDotRule: true,
-      },
-    },
-    module: {
-      rules: [
-        {
-          test: /\.svg$/,
-          type: 'asset',
-        },
-        {
-          test: /\.css$/i,
-          use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
-          type: 'javascript/auto',
-        },
-        {
-          test: /\.module\.css$/i,
-          type: 'css/module',
-        },
-        {
-          test: /\.(png|jpe?g|gif)$/i,
-          type: 'asset/resource',
-        },
-        {
-          test: /^BUILD_ID$/,
-          type: 'asset/source',
-        },
-        {
-          test: /\.jsx|.ryx$/,
-          exclude: [/[\\/]node_modules[\\/]/],
-          use: [
-            {
-              loader: 'builtin:swc-loader',
-              options: {
-                jsc: {
-                  parser: {
-                    syntax: 'ecmascript',
-                    jsx: true,
-                  },
-                  transform: {
-                    react: {
-                      pragma: 'Ryunix.createElement',
-                      pragmaFrag: 'Ryunix.Fragment',
-                    },
-                  },
-                },
-              },
-            },
-          ],
-          type: 'javascript/auto',
-        },
-      ],
-    },
-    resolve: {
-      extensions: ['.*', '.js', '.jsx', '.ryx'],
-    },
-    plugins: [
-      new rspack.CssExtractRspackPlugin({}),
-      new rspack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      }),
-      new rspack.ProgressPlugin({}),
-      new rspack.HtmlRspackPlugin({
-        template: join(dir, 'index.html'),
-      }),
-    ].filter(Boolean),
-  }
-}
-
-export { ryunixRspack }
+import rspack from '@rspack/core'
+import { resolve, join } from 'path'
+
+const resolveApp = (appDirectory, relativePath) =>
+  resolve(appDirectory, relativePath)
+
+const ryunixRspack = () => {
+  const isDev = process.env.NODE_ENV === 'development'
+  const dir = process.cwd()
+  return {
+    mode: isDev ? 'development' : 'production',
+    context: resolveApp(dir, 'src'),
+    entry: {
+      main: './main.ryx',
+    },
+    devtool: isDev ? 'source-map' : false,
+    output: {
+      publicPath: '/',
+    },
+    devServer: {
+      hot: isDev,
+      historyApiFallback: {
+        index: '/',
+        disableDotRule: true,
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.svg$/,
+          type: 'asset',
+        },
+        {
+          test: /\.css$/i,
+          use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.module\.css$/i,
+          type: 'css/module',
+        },
+        {
+          test: /\.(png|jpe?g|gif)$/i,
+          type: 'asset/resource',
+        },
+        {
+          test: /^BUILD_ID$/,
+          type: 'asset/source',
+        },
+        {
+          test: /\.jsx|.ryx$/,
+          exclude: [/[\\/]node_modules[\\/]/],
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'ecmascript',
+                    jsx: true,
+                  },
+                  transform: {
+                    react: {
+                      pragma: 'Ryunix.createElement',
+                      pragmaFrag: 'Ryunix.Fragment',
+                    },
+                  },
+                },
+              },
+            },
+          ],
+          type: 'javascript/auto',
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.*', '.js', '.jsx', '.ryx'],
+    },
+    plugins: [
+      new rspack.CssExtractRspackPlugin({}),
+      new rspack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      }),
+      new rspack.ProgressPlugin({}),
+      new rspack.HtmlRspackPlugin({
+        template: join(dir, 'index.html'),
+      }),
+    ].filter(Boolean),
+  }
+}
+
+export { ryunixRspack }

package/vite/index.js

@@ -1,18 +1,18 @@
-const ryunixPlugin = () => {
-  const jsxPlugin = {
-    name: 'vite:ryunix-jsx',
-    config() {
-      return {
-        esbuild: {
-          jsxFactory: 'Ryunix.createElement',
-          jsxFragment: 'Ryunix.Fragment',
-        },
-      }
-    },
-  }
-
-  return [jsxPlugin]
-}
-
-export default ryunixPlugin
-export { ryunixPlugin as ryunixVite }
+const ryunixPlugin = () => {
+  const jsxPlugin = {
+    name: 'vite:ryunix-jsx',
+    config() {
+      return {
+        esbuild: {
+          jsxFactory: 'Ryunix.createElement',
+          jsxFragment: 'Ryunix.Fragment',
+        },
+      }
+    },
+  }
+
+  return [jsxPlugin]
+}
+
+export default ryunixPlugin
+export { ryunixPlugin as ryunixVite }

package/webpack/bin/compiler.mjs

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

package/webpack/bin/index.mjs

@@ -0,0 +1,115 @@
+#! /usr/bin/env node
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
+import { StartServer } from './serve.mjs'
+import { compiler } from './compiler.mjs'
+import logger from 'terminal-log'
+import chalk from 'chalk'
+import defaultSettings from '../utils/config.cjs'
+import Prerender from './prerender.mjs'
+import {
+  cleanBuildDirectory,
+  convertFlatToClassic,
+  resolveApp,
+} from '../utils/index.mjs'
+import { ESLint } from 'eslint'
+import eslintConfig from '../eslint.config.mjs'
+const lint = {
+  command: 'lint',
+  describe: 'Lint code',
+  builder: {
+    fix: {
+      alias: 'f',
+      type: 'boolean',
+      default: false,
+      describe: 'Automatically fix problems',
+    },
+  },
+  handler: async (arg) => {
+    const classicConfig = eslintConfig[0]
+
+    const fix = arg.fix
+    const eslint = new ESLint({
+      cwd: process.cwd(),
+      overrideConfigFile: true,
+      overrideConfig: classicConfig,
+      fix,
+    })
+
+    const results = await eslint.lintFiles(defaultSettings.eslint.files)
+
+    await ESLint.outputFixes(results)
+
+    const formatter = await eslint.loadFormatter('stylish')
+    const report = formatter.format(results)
+    console.log(report)
+  },
+}
+
+const serv = {
+  command: 'server',
+  describe: 'Run server',
+  handler: async (arg) => {
+    const open = Boolean(arg.browser) || false
+    const settings = {
+      open,
+    }
+
+    StartServer(settings)
+  },
+}
+
+const build = {
+  command: 'build',
+  describe: 'Run builder',
+  handler: async (arg) => {
+    if (!defaultSettings.webpack.production) {
+      logger.error(
+        chalk.red(
+          'The compilation cannot complete because you are trying to compile in developer mode. remember update ryunix.config.js.',
+        ),
+      )
+      return
+    }
+
+    if (defaultSettings.experimental.ssg.prerender.length > 0) {
+      await cleanBuildDirectory(
+        resolveApp(
+          process.cwd(),
+          `${defaultSettings.webpack.output.buildDirectory}/static`,
+        ),
+      )
+    }
+
+    compiler.run(async (err, stats) => {
+      if (err || stats.hasErrors()) {
+        logger.error(chalk.red('Error during compilation:'))
+        logger.error(err || stats.toString('errors-only'))
+        return
+      }
+
+      const buildTimeMs = stats.endTime - stats.startTime
+
+      const minutes = Math.floor(buildTimeMs / 60000)
+      const seconds = ((buildTimeMs % 60000) / 1000).toFixed(1)
+
+      const formattedTime =
+        minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`
+
+      if (defaultSettings.experimental.ssg.prerender.length > 0) {
+        await Prerender()
+      }
+
+      logger.info(chalk.green('Compilation successful! 🎉'))
+      logger.info(`Done in ${formattedTime}`)
+
+      compiler.close((closeErr) => {
+        if (closeErr) {
+          logger.error(chalk.red('Error closing the compiler:'), closeErr)
+        }
+      })
+    })
+  },
+}
+
+yargs(hideBin(process.argv)).command(serv).command(build).command(lint).parse()

package/webpack/bin/prerender.mjs

@@ -0,0 +1,138 @@
+/**
+ * prerender metadata
+ *
+ */
+import { configFileExist } from '../utils/settingfile.cjs'
+import defaultSettings from '../utils/config.cjs'
+import { resolveApp } from '../utils/index.mjs'
+import fs from 'fs'
+import path from 'path'
+
+// proyect/.ryunix/static
+const buildDirectory = resolveApp(process.cwd(), '.ryunix/static')
+const indexFile = path.join(buildDirectory, 'index.html')
+
+const siteMap = async (routes) => {
+  if (!defaultSettings.experimental.ssg.sitemap.baseURL) {
+    console.error(
+      '❌ Base URL is not defined in the configuration file. Please set `experimental.ssg.sitemap.baseURL`.',
+    )
+    process.exit(1)
+  }
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${routes
+  .map((route) => {
+    const url = `${defaultSettings.experimental.ssg.sitemap.baseURL}${route.path === '/' ? '' : route.path}`
+    const meta = route.meta || {}
+    const sitemap_settings = route.sitemap || {}
+    const lastmod = meta.lastmod || new Date().toISOString().split('T')[0]
+
+    // sitemap settings
+    const changefreq =
+      sitemap_settings.changefreq ||
+      meta.changefreq || // TODO: Remove meta.changefreq
+      defaultSettings.experimental.ssg.sitemap.settings.changefreq
+    const priority =
+      sitemap_settings.priority ||
+      meta.priority || // TODO: Remove meta.priority
+      defaultSettings.experimental.ssg.sitemap.settings.priority
+
+    return `<url>
+  <loc>${url}</loc>
+  <lastmod>${lastmod}</lastmod>
+  <changefreq>${changefreq}</changefreq>
+  <priority>${priority}</priority>
+</url>`
+  })
+  .join('\n')}
+</urlset>`
+
+  await fs.writeFileSync(
+    path.resolve(buildDirectory, 'sitemap.xml'),
+    sitemap,
+    'utf-8',
+  )
+
+  console.log('✅ Sitemap created')
+}
+
+const Prerender = async () => {
+  if (!configFileExist()) {
+    console.error('❌ No configuration file found.')
+    process.exit(1)
+  }
+
+  const template = fs.readFileSync(indexFile, 'utf-8')
+
+  for (const route of defaultSettings.experimental.ssg.prerender) {
+    if (route.path === '/') continue // Exclude root path, handled by defaultSettings.static.seo.meta
+    let html = template
+    const meta = route?.meta || defaultSettings.static.seo.meta
+
+    // title
+    if (meta.title) {
+      html = html.replace(/<title>.*<\/title>/, `<title>${meta.title}<\/title>`)
+    }
+
+    // Helper to add or replace metatag
+    function upsertMetaTag(html, name, value) {
+      if (value === undefined || value === null) return html
+
+      const isProperty = name.startsWith('og:') || name.startsWith('twitter:')
+      const attr = isProperty ? 'property' : 'name'
+      const regex = new RegExp(`<meta ${attr}=["']${name}["'][^>]*>`, 'i')
+      const tag = `<meta ${attr}="${name}" content="${value}">`
+
+      if (regex.test(html)) {
+        return html.replace(regex, tag)
+      } else {
+        return html.replace(/<\/head>/i, `${tag}\n<\/head>`)
+      }
+    }
+
+    // Description
+    html = upsertMetaTag(html, 'description', meta.description)
+    // Keywords
+    html = upsertMetaTag(html, 'keywords', meta.keywords)
+
+    // dynamic metatags (excluding title, description, keywords, framework, mode)
+    for (const [key, value] of Object.entries(meta)) {
+      if (
+        [
+          'title',
+          'description',
+          'keywords',
+          'framework',
+          'mode',
+          'viewport',
+        ].includes(key)
+      )
+        continue
+      html = upsertMetaTag(html, key, value)
+    }
+
+    const outputDir =
+      route.path === '/'
+        ? buildDirectory
+        : path.join(buildDirectory, route.path)
+
+    if (!fs.existsSync(outputDir)) {
+      await fs.mkdirSync(outputDir, { recursive: true, force: true })
+    }
+
+    await fs.writeFileSync(path.join(outputDir, 'index.html'), html)
+    console.log(`✅ Prerendered ${route.path}`)
+  }
+
+  // need base url and enable
+  if (
+    defaultSettings.experimental.ssg.sitemap.enable &&
+    defaultSettings.experimental.ssg.sitemap.baseURL
+  ) {
+    await siteMap(defaultSettings.experimental.ssg.prerender)
+  }
+}
+
+export default Prerender

package/webpack/bin/serve.mjs

@@ -0,0 +1,101 @@
+import Webpack from 'webpack'
+import WebpackDevServer from 'webpack-dev-server'
+import webpackConfig from '../webpack.config.mjs'
+import { configFileExist } from '../utils/settingfile.cjs'
+import envPath from '../utils/envExist.cjs'
+import {
+  getPackageVersion,
+  resolveApp,
+  cleanCacheDir,
+} from '../utils/index.mjs'
+import logger from 'terminal-log'
+import chalk from 'chalk'
+import net from 'net' // Para verificar si el puerto está disponible
+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.webpack.output.buildDirectory}/cache`,
+  )
+
+  if (!defaultSettings.webpack.production) {
+    cleanCacheDir(cacheDir)
+  }
+
+  webpackConfig.mode = 'development'
+  const compiler = Webpack(webpackConfig)
+  let port = webpackConfig.devServer.port || 3000
+
+  // Encontrar un puerto disponible
+  port = await findAvailablePort(port)
+
+  // Modificamos el puerto en la configuración
+  webpackConfig.devServer.port = port
+  const devServerOptions = { ...webpackConfig.devServer, ...cliSettings }
+  const server = new WebpackDevServer(devServerOptions, compiler)
+
+  const devMode = Boolean(!defaultSettings.webpack.production)
+
+  const { version } = await getPackageVersion()
+
+  const startServer = async () => {
+    try {
+      await server.start() // Iniciar el servidor con el nuevo puerto
+
+      // Mejor formato de información para el servidor
+      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 = defaultSettings.webpack.production ? chalk.green('production') : chalk.yellow('development')
+
+      const lines = []
+      lines.push(chalk.bold(chalk.cyanBright(`<Ryunix/> ${version}`)))
+      lines.push('')
+      lines.push(`${chalk.gray('-')} Running at: ${chalk.underline(url)}`)
+      lines.push(`${chalk.gray('-')} Config file: ${cfgStatus}`)
+      lines.push(`${chalk.gray('-')} Environment file: ${envStatus}`)
+      lines.push(`${chalk.gray('-')} Mode: ${modeLabel}`)
+      if (devMode) lines.push(chalk.yellow('⚠️  You are in development mode — update ryunix.config.js for production'))
+
+      lines.push('---------------------------')
+      logger.info(lines.join('\n'))
+    } catch (err) {
+      logger.error(`[error] ${err.message}`)
+    }
+  }
+
+  await startServer()
+}
+
+export { StartServer }