afront 1.0.29 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "afront",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "description": "AFront is a front-end JavaScript library designed to create seamless server-side rendered (SSSR) websites.",
   "main": "webpack.dev.js",
   "scripts": {
@@ -8,7 +8,7 @@
     "build:ssr": "webpack --config webpack.ssr.prod.js",
     "build:alt": "webpack --config webpack.build-prod.js && webpack --config webpack.post-prod-static.js --stats-error-details",
     "prod:ssr": "node build-prod-ssr/ssr.prod.js",
-    "start": "webpack serve --config webpack.dev.js",
+    "start": "node afront.js",
     "static": "node server.js"
   },
   "repository": {
@@ -55,12 +55,14 @@
     "html-inline-css-webpack-plugin": "^1.11.2",
     "ignore-styles": "^5.0.1",
     "loader-utils": "^3.3.1",
+    "open": "^11.0.0",
     "react-router": "^7.12.0",
     "readline-sync": "^1.4.10",
     "semver": "^7.7.4",
     "styled-components": "^6.1.13",
     "terser-webpack-plugin": "^5.3.10",
-    "tmp": "^0.2.3"
+    "tmp": "^0.2.3",
+    "ws": "^8.19.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",

package/src/browserLogger.js

@@ -0,0 +1,47 @@
+if (process.env.NODE_ENV === "development") {
+  const socket = new WebSocket("ws://localhost:9797");
+
+  function send(level, args) {
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send(
+        JSON.stringify({
+          level,
+          message: args
+            .map((a) =>
+              typeof a === "object"
+                ? JSON.stringify(a, null, 2)
+                : String(a)
+            )
+            .join(" "),
+        })
+      );
+    }
+  }
+
+  const originalLog = console.log;
+  const originalWarn = console.warn;
+  const originalError = console.error;
+
+  console.log = (...args) => {
+    originalLog(...args);
+    send("info", args);
+  };
+
+  console.warn = (...args) => {
+    originalWarn(...args);
+    send("warn", args);
+  };
+
+  console.error = (...args) => {
+    originalError(...args);
+    send("error", args);
+  };
+
+  window.addEventListener("error", (event) => {
+    console.error("Unhandled Error:", event.error || event.message);
+  });
+
+  window.addEventListener("unhandledrejection", (event) => {
+    console.error("Unhandled Promise Rejection:", event.reason);
+  });
+}

package/src/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM, { hydrateRoot } from "react-dom/client";
 import App from "./App";
 import { BrowserRouter } from "react-router";
+import "./browserLogger";
 
 const container = document.getElementById("asggen");
 

package/webpack.dev.js

@@ -1,5 +1,5 @@
 const htmlWebpackPlugin = require("html-webpack-plugin");
-const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
+const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserWebpackPlugin = require("terser-webpack-plugin");
@@ -10,22 +10,49 @@ module.exports = {
   mode: "development",
   entry: "./src/index.js",
   devtool: "cheap-module-source-map",
+  stats: "errors-warnings",
+
+  infrastructureLogging: {
+    level: "warn",
+  },
+
   devServer: {
     static: {
       directory: path.join(__dirname, "dev"),
     },
     port: 9999,
-    open: true,
+    open: false,
     historyApiFallback: true,
+    client: {
+      logging: "none",
+      overlay: {
+        errors: true,
+        warnings: true,
+      },
+    },
+
+    devMiddleware: {
+      stats: "errors-warnings",
+    },
+
+    // 🔥 THIS hides "Project is running at" etc
+    setupMiddlewares: (middlewares, devServer) => {
+      devServer.logger.info = () => {};
+      return middlewares;
+    },
     headers: {
-      // Dev server: send a permissive CSP header to avoid blocking during development.
-      // This header is intentionally more permissive than the production meta tag.
-      "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
-    }
+      "Content-Security-Policy": `
+    default-src 'self';
+    script-src 'self' 'unsafe-inline';
+    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
+    font-src 'self' https://fonts.gstatic.com;
+    connect-src 'self' ws://localhost:9797 ws://localhost:9999;
+  `.replace(/\n/g, ""),
+    },
   },
   output: {
     filename: "[name].bundle.js",
-    path: `${__dirname}/dev`,
+    path: path.resolve(__dirname, "dev"),
     publicPath: "/",
     clean: true,
   },
@@ -114,15 +141,27 @@ module.exports = {
         };
       },
     }),
-    new CspHtmlWebpackPlugin({
-      "default-src": ["'self'"],
-      "script-src": ["'self'"],
-      "style-src": ["'self'", "https://fonts.googleapis.com", "'unsafe-hashes'"],
-      "style-src-elem": ["'self'", "https://fonts.googleapis.com", "https://fonts.gstatic.com"],
-      "font-src": ["'self'", "https://fonts.gstatic.com"]
-    }, {
-      hashingMethod: 'sha256',
-      hashEnabled: { 'script-src': true, 'style-src': true }
-    }),
+    new CspHtmlWebpackPlugin(
+      {
+        "default-src": ["'self'"],
+        "script-src": ["'self'"],
+        "style-src": [
+          "'self'",
+          "https://fonts.googleapis.com",
+          "'unsafe-hashes'",
+        ],
+        "style-src-elem": [
+          "'self'",
+          "https://fonts.googleapis.com",
+          "https://fonts.gstatic.com",
+        ],
+        "font-src": ["'self'", "https://fonts.gstatic.com"],
+        "connect-src": ["'self'", "ws://localhost:9797", "ws://localhost:9999"],
+      },
+      {
+        hashingMethod: "sha256",
+        hashEnabled: { "script-src": true, "style-src": true },
+      },
+    ),
   ],
 };