npm - @unsetsoft/ryunix-presets - Versions diffs - 1.0.26-canary.13 → 1.0.26-canary.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json +1 -1
package/webpack/bin/dev.server.mjs +13 -4
package/webpack/bin/index.mjs +1 -1
package/webpack/template/index.html +1 -6
package/webpack/utils/ssg.mjs +1 -0
package/webpack/utils/ssrDevHandler.mjs +98 -0
package/webpack/webpack.config.mjs +81 -44

package/package.json CHANGED Viewed

@@ -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.16",
   "author": "Neyunse",
   "type": "module",
   "repository": "https://github.com/UnSetSoft/Ryunixjs",

package/webpack/bin/dev.server.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/template/index.html CHANGED Viewed

@@ -13,12 +13,7 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-    <noscript style="background: #f4f47f;color: black;padding: 10px;">
-      <div style="display: flex;justify-content: center;align-items: center;">
-        <p><b>Warning:</b> JavaScript is not enabled. Some features may not work.
-        </p>
-      </div>
-    </noscript>
+    <%= htmlWebpackPlugin.options.ssrScript %>
     <div id="__ryunix"></div>
   </body>
 </html>

package/webpack/utils/ssg.mjs CHANGED Viewed

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

package/webpack/utils/ssrDevHandler.mjs ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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'
@@ -121,17 +122,17 @@ const sharedWebpackConfig = {
     minimize: config.webpack.production === true,
     minimizer: config.webpack.production
       ? [
-          new TerserPlugin({
-            parallel: true,
-            terserOptions: {
-              compress: {
-                dead_code: true,
-                passes: 2,
-              },
+        new TerserPlugin({
+          parallel: true,
+          terserOptions: {
+            compress: {
+              dead_code: true,
+              passes: 2,
             },
-          }),
-          new CssMinimizerPlugin(),
-        ]
+          },
+        }),
+        new CssMinimizerPlugin(),
+      ]
       : [],
   },
   cache: {
@@ -279,43 +280,61 @@ const getPlugins = (isServer = false) => [
   }),
   // Only inject HTML for the client build
   !isServer &&
-    new HtmlWebpackPlugin({
-      pageLang: config.static.seo.pageLang,
-      title: config.static.seo.title,
-      favicon: config.static.favicon
-        ? join(dir, 'public', 'favicon.png')
-        : false,
-      meta: config.static.seo.meta,
-      template: config.static.customTemplate
-        ? join(dir, 'public', 'index.html')
-        : join(__dirname, 'template', 'index.html'),
-      info: {
-        framework: 'Ryunix',
-        version,
-        mode: config.webpack.production ? 'production' : 'dev',
-      },
-    }),
+  new HtmlWebpackPlugin({
+    pageLang: config.static.seo.pageLang,
+    title: config.static.seo.title,
+    favicon: config.static.favicon
+      ? join(dir, 'public', 'favicon.png')
+      : false,
+    meta: config.static.seo.meta,
+    template: config.static.customTemplate
+      ? join(dir, 'public', 'index.html')
+      : join(__dirname, 'template', 'index.html'),
+    info: {
+      framework: 'Ryunix',
+      version,
+      mode: config.webpack.production ? 'production' : 'dev',
+    },
+    ssrScript: isServer ? `
+       <noscript
+        style="background: #f4f47f;color: black;padding: 10px;width: 100%;display: block;position: fixed;bottom: 0;z-index: 99;">
+      <div style="display: flex;justify-content: center;align-items: center;">
+        <p><b>Warning:</b> JavaScript is not enabled. Some features may not work.
+        </p>
+      </div>
+    </noscript>
+      ` : `
+       <noscript
+        style="background: #f57070ff;color: black;padding: 10px;width: 100%;display: block;position: fixed;bottom: 0;z-index: 99;">
+      <div style="display: flex;justify-content: center;align-items: center;">
+        <p><b>Error:</b> JavaScript is disabled. Please enable it to use this application.
+        </p>
+      </div>
+    </noscript>
+      `,
+  }),
   !isServer &&
-    config.webpack.production &&
+  (config.webpack.production || config.experimental.ssr) &&
   new MiniCssExtractPlugin({
     filename: 'css/[name].[contenthash].css',
   }),
   !isServer &&
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: resolveApp(dir, 'public'),
-          to: resolveApp(dir, `${config.webpack.output.buildDirectory}/static`),
-          globOptions: {
-            ignore: ['**/template.html', '**/index.html', '**/*.html', '**/favicon.png'],
-          },
-          filter: (resourcePath) => {
-            try { return !resourcePath.toLowerCase().endsWith('.html') } catch { return true }
-          },
-          noErrorOnMissing: true,
+  new CopyWebpackPlugin({
+    patterns: [
+      {
+        from: resolveApp(dir, 'public'),
+        to: resolveApp(dir, `${config.webpack.output.buildDirectory}/static`),
+        globOptions: {
+          ignore: ['**/template.html', '**/index.html', '**/*.html', '**/favicon.png'],
         },
-      ],
-    }),
+        filter: (resourcePath) => {
+          try { return !resourcePath.toLowerCase().endsWith('.html') } catch { return true }
+        },
+        noErrorOnMissing: true,
+      },
+    ],
+  }),
   ...(!isServer ? config.webpack.plugins : []),
 ].filter(Boolean)
@@ -336,6 +355,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 +391,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 +415,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 +523,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;