@unsetsoft/ryunix-presets 1.0.26-canary.13 → 1.0.26-canary.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unsetsoft/ryunix-presets",
   "description": "Package with presets for different development environments.",
-  "version": "1.0.26-canary.13",
+  "version": "1.0.26-canary.14",
   "author": "Neyunse",
   "type": "module",
   "repository": "https://github.com/UnSetSoft/Ryunixjs",

package/webpack/bin/dev.server.mjs

@@ -56,16 +56,25 @@ const StartServer = async (cliSettings) => {
     cleanCacheDir(cacheDir)
   }
 
-  webpackConfig.mode = mode ? 'production' : 'development'
+  const clientConfig = Array.isArray(webpackConfig) ? webpackConfig.find(c => c.name === 'client') || webpackConfig[0] : webpackConfig
+
+  if (Array.isArray(webpackConfig)) {
+    webpackConfig.forEach(c => c.mode = mode ? 'production' : 'development')
+  } else {
+    webpackConfig.mode = mode ? 'production' : 'development'
+  }
+
   const compiler = Webpack(webpackConfig)
-  let port = webpackConfig.devServer.port || 3000
+  let port = clientConfig.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 }
+  if (clientConfig.devServer) {
+    clientConfig.devServer.port = port
+  }
+  const devServerOptions = { ...(clientConfig.devServer || {}), ...cliSettings }
   const server = new WebpackDevServer(devServerOptions, compiler)
 
   const devMode = Boolean(!mode)

package/webpack/bin/index.mjs

@@ -1,4 +1,4 @@
-#! /usr/bin/env node
+#! /usr/bin/env node
 import yargs from 'yargs'
 import { hideBin } from 'yargs/helpers'
 import { StartDevServer } from './dev.server.mjs'

package/webpack/utils/ssg.mjs

@@ -660,4 +660,5 @@ export {
   generateMetaTags,
   prerenderRoute,
   buildSSG,
+  importEsmFile,
 }

package/webpack/utils/ssrDevHandler.mjs

@@ -0,0 +1,98 @@
+import fs from 'fs'
+import { prerenderRoute } from './ssg.mjs'
+import { resolveApp } from './index.mjs'
+
+export async function renderDevRoute(req, res, devServer, dir, config) {
+  // We only care about GET requests for HTML documents
+  if (req.method !== 'GET' || !req.headers.accept?.includes('text/html')) {
+    return false
+  }
+
+  // Find client compiler to read index.html from its memory file system
+  const clientCompiler = devServer.compiler.compilers
+    ? devServer.compiler.compilers.find((c) => c.name === 'client')
+    : devServer.compiler
+
+  if (!clientCompiler) return false
+
+  const outputFs = clientCompiler.outputFileSystem
+  const buildDir = config.webpack.output.buildDirectory
+  const indexPath = resolveApp(dir, `${buildDir}/static/index.html`)
+
+  let template
+  try {
+    template = outputFs.readFileSync(indexPath, 'utf-8')
+  } catch (err) {
+    // index.html not generated yet, let the dev server handle default logic
+    return false
+  }
+
+  let AppRouterApp = null
+  let ryunixRenderToString = null
+  let ryunixCreateElement = null
+
+  try {
+    const serverBundlePath = resolveApp(dir, `${buildDir}/server/app-router-server.bundle.mjs`)
+    if (fs.existsSync(serverBundlePath)) {
+      if (typeof global.window === 'undefined') {
+        global.window = { location: { pathname: req.url } }
+      }
+      if (typeof global.document === 'undefined') {
+        global.document = { querySelector: () => null, getElementById: () => null }
+      }
+
+      const serverModule = await import(`file://${serverBundlePath}?update=${Date.now()}`)
+      AppRouterApp = serverModule.default?.default || serverModule.default
+
+      const ryunixCore = await import('@unsetsoft/ryunixjs')
+      const Ryunix = ryunixCore.default || ryunixCore
+      global.Ryunix = Ryunix
+      ryunixRenderToString = Ryunix.renderToString
+      ryunixCreateElement = Ryunix.createElement
+    }
+  } catch (e) {
+    console.warn(`[Ryunix SSR Dev] Failed to load server bundle: ${e.message}`)
+    return false // fallback to SPA
+  }
+
+  let renderedString = ''
+  if (AppRouterApp && ryunixRenderToString && ryunixCreateElement) {
+    global.window = { location: { pathname: req.url } }
+    try {
+      const element = ryunixCreateElement(AppRouterApp)
+      renderedString = ryunixRenderToString(element)
+    } catch (err) {
+      console.error(`[Ryunix SSR Dev] Render error:`, err)
+    }
+  }
+
+  // Generic mock route for prerenderRoute (to inject metadata)
+  const mockRoute = { path: req.url, meta: {} }
+
+  try {
+    let html = await prerenderRoute(mockRoute, template, config, renderedString)
+
+    // In dev mode with SSR, MiniCssExtractPlugin outputs CSS to the virtual filesystem.
+    // We need to inject <link> tags for them so there is no FOUC.
+    try {
+      const cssDir = resolveApp(dir, `${buildDir}/static/css`)
+      if (outputFs.existsSync(cssDir)) {
+        const cssFiles = outputFs.readdirSync(cssDir).filter(f => f.endsWith('.css'))
+        const styleLinks = cssFiles.map(f => `<link rel="stylesheet" href="/css/${f}" />`).join('\n')
+
+        if (styleLinks) {
+          html = html.replace('</head>', `${styleLinks}\n</head>`)
+        }
+      }
+    } catch (e) {
+      // Ignore errors reading CSS directory
+    }
+
+    res.setHeader('Content-Type', 'text/html; charset=utf-8')
+    res.end(html)
+    return true
+  } catch (err) {
+    console.error(`[Ryunix SSR Dev] Final render error:`, err)
+    return false
+  }
+}

package/webpack/webpack.config.mjs

@@ -23,6 +23,7 @@ import RyunixRoutesPlugin from './utils/ssgPlugin.mjs'
 import AppRouterPlugin from './utils/appRouterPlugin.mjs'
 import ApiRouterPlugin from './utils/ApiRouterPlugin.mjs'
 import { handleApiRequest } from './utils/apiHandler.mjs'
+import { renderDevRoute } from './utils/ssrDevHandler.mjs'
 import remarkGfm from 'remark-gfm'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
@@ -296,7 +297,7 @@ const getPlugins = (isServer = false) => [
       },
     }),
   !isServer &&
-    config.webpack.production &&
+  (config.webpack.production || config.experimental.ssr) &&
   new MiniCssExtractPlugin({
     filename: 'css/[name].[contenthash].css',
   }),
@@ -336,6 +337,11 @@ const clientConfig = {
   },
   devServer: {
     watchFiles: [resolveApp(dir, 'src/**/*'), resolveApp(dir, 'app/**/*')],
+    devMiddleware: {
+      writeToDisk: (filePath) => {
+        try { return filePath.includes('/server/') || filePath.includes('\\server\\') } catch { return false }
+      },
+    },
     hot: true,
     historyApiFallback: {
       index: '/',
@@ -367,6 +373,18 @@ const clientConfig = {
         }
       })
 
+      devServer.app.use(async (req, res, next) => {
+        try {
+          if (config.experimental.ssr) {
+            const handled = await renderDevRoute(req, res, devServer, dir, config)
+            if (handled) return
+          }
+        } catch (err) {
+          console.error('[Ryunix Dev SSR]', err)
+        }
+        next()
+      })
+
       return middlewares
     },
   },
@@ -379,7 +397,7 @@ const clientConfig = {
         test: /\.s[ac]ss|css$/i,
         exclude: /node_modules/,
         use: [
-          config.webpack.production
+          (config.webpack.production || config.experimental.ssr)
             ? MiniCssExtractPlugin.loader
             : ryunixRequire.resolve('style-loader'),
           ryunixRequire.resolve('css-loader'),
@@ -487,7 +505,8 @@ const serverConfig = {
   ]
 }
 
-// Export dual compilers only in production if SSR or SSG prerender is enabled
-export default (config.webpack.production && (config.experimental.ssr || config.experimental.ssg?.prerender?.length > 0))
+// Export dual compilers if SSR is enabled, or in production if SSG prerender is enabled
+const enableServerDualCompiler = config.experimental.ssr || (config.webpack.production && config.experimental.ssg?.prerender?.length > 0);
+export default enableServerDualCompiler
   ? [clientConfig, serverConfig]
   : clientConfig;