better dev server and css api rewriting

esbuild.dev.js

@@ -1,9 +1,52 @@
-import { createServer } from "esbuild-server";
+// import { createServer } from "esbuild-server";
 import copy from "esbuild-plugin-copy";
 import time from "esbuild-plugin-time";
-import "dotenv/config"
+import { createBareServer } from "@tomphttp/bare-server-node";
+import Fastify from "fastify";
+import { context } from "esbuild";
+import { createServer } from "http"; 
+import fastifyStatic from "@fastify/static";
+import { join } from "path";
+import { fileURLToPath } from "url";
+import "dotenv/config";
 
-const devServer = createServer({
+const bare = createBareServer("/bare/", {
+    logErrors: true
+});
+
+const fastify = Fastify({
+    serverFactory: (handler, opts) => {
+        return createServer()
+            .on("request", (req, res) => {
+                if (bare.shouldRoute(req)) {
+                    bare.routeRequest(req, res);
+                } else {
+                    handler(req, res);
+                }
+            }).on("upgrade", (req, socket, head) => {
+                if (bare.shouldRoute(req)) {
+                    bare.routeUpgrade(req, socket, head);
+                } else {
+                    socket.end();
+                }
+            })
+    }
+});
+
+fastify.register(fastifyStatic, {
+    root: join(fileURLToPath(new URL(".", import.meta.url)), "./static"),
+    decorateReply: false
+});
+
+//fastify.get("/", {
+    
+// })
+
+fastify.listen({
+    port: 1337
+});
+
+const devServer = await context({
     entryPoints: {
         client: "./src/client/index.ts",
         bundle: "./src/bundle/index.ts",
@@ -43,16 +86,7 @@ const devServer = createServer({
             ],
         }),
         time()
-    ]
+    ],
-}, {
-    static: "./static",
-    port: process.env.PORT || 1337,
-    proxy: (path) => {
-        if (path.startsWith("/bare/")) {
-            return path.replace("/bare/", "http://127.0.0.1:3000/")
-        }
-    },
-    injectLiveReload: false
 });
 
-devServer.start();
+await devServer.watch();

package.json

@@ -5,9 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "node esbuild.js",
-    "dev": "concurrently -n dev-server,bare-server-node -c blue,green -k \"node esbuild.dev.js\" \"bare-server-node -p 3000 -e\"",
+    "dev": "node esbuild.dev.js"
-    "prepublish": "pnpm build",
-    "publish": "pnpm run publish && pnpm publish --access public"
   },
   "files": [
     "dist",

src/client/css.ts

@@ -0,0 +1,21 @@
+const cssProperties = ["background", "background-image", "mask", "mask-image", "list-style", "list-style-image", "border-image", "border-image-source", "cursor"];
+const jsProperties = ["background", "backgroundImage", "mask", "maskImage", "listStyle", "listStyleImage", "borderImage", "borderImageSource", "cursor"];
+
+    
+CSSStyleDeclaration.prototype.setProperty = new Proxy(CSSStyleDeclaration.prototype.setProperty, {
+  apply(target, thisArg, argArray) {
+    if (cssProperties.includes(argArray[0])) argArray[1] = self.__scramjet$bundle.rewriters.rewriteCss(argArray[1]);
+    
+    return Reflect.apply(target, thisArg, argArray);  
+  },
+});
+
+jsProperties.forEach((prop) => {
+  const propDescriptor = Object.getOwnPropertyDescriptor(CSSStyleDeclaration.prototype, prop);
+
+  Object.defineProperty(CSSStyleDeclaration.prototype, prop, {
+    set(v) {
+        propDescriptor.set.call(this, self.__scramjet$bundle.rewriters.rewriteCss(v));
+    },
+  })
+});

src/client/index.ts

@@ -5,6 +5,7 @@ import "./storage";
 import "./element.ts";
 import "./fetch.ts";
 import "./xmlhttprequest.ts";
+import "./css.ts";
 
 declare global {
     interface Window {