@spirobel/mininext 0.3.1 → 0.3.3

package/dist/mininext.js

@@ -11,7 +11,19 @@ async function build(backendPath = "backend/backend.ts") {
         await devServer();
     }
 }
-const myPlugin = {
+const streamPlugin = {
+    name: "node stream in the frontend",
+    setup(build) {
+        build.onResolve({ filter: /^stream$/ }, (args) => {
+            const path_to_crypto_lib = path.resolve(projectRoot(), "node_modules/stream-browserify/index.js");
+            if (path_to_crypto_lib)
+                return {
+                    path: path_to_crypto_lib,
+                };
+        });
+    },
+};
+const bufferPlugin = {
     name: "node buffer in the frontend",
     setup(build) {
         build.onResolve({ filter: /^buffer$/ }, (args) => {
@@ -23,6 +35,18 @@ const myPlugin = {
         });
     },
 };
+const cryptoPlugin = {
+    name: "node crypto in the frontend",
+    setup(build) {
+        build.onResolve({ filter: /^crypto$/ }, (args) => {
+            const path_to_crypto_lib = path.resolve(projectRoot(), "node_modules/crypto-browserify/index.js");
+            if (path_to_crypto_lib)
+                return {
+                    path: path_to_crypto_lib,
+                };
+        });
+    },
+};
 async function buildBackend(backendPath = "backend/backend.ts") {
     global.FrontendScriptUrls = [];
     global.FrontendScripts = [];
@@ -63,7 +87,7 @@ async function buildFrontend(file) {
         naming: "[name]-[hash].[ext]",
         minify: Bun.argv[2] === "dev" ? false : true, //production
         target: "browser",
-        plugins: [myPlugin],
+        plugins: [bufferPlugin, streamPlugin, cryptoPlugin],
     });
     if (!result?.outputs[0]?.path)
         console.log(result);

package/dist/tests/html.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/html.test.js

@@ -0,0 +1,38 @@
+import { expect, test, mock } from "bun:test";
+import { html, url } from "../mininext/mininext";
+// Example of creating a mock request object
+const mockRequestObject = {
+    method: "GET", // or 'POST', etc.
+    url: "http://example.com/api/some-endpoint",
+    body: JSON.stringify({ key: "value" }),
+    headers: {
+        "Content-Type": "application/json",
+        get: () => undefined,
+    },
+};
+const makeMockRequest = mock(() => mockRequestObject);
+test("no xss when BasedHtml inside of html", async () => {
+    const req = makeMockRequest();
+    url.set([
+        [
+            "/",
+            (mini) => {
+                const basedHtmlString = html `<h2>
+            this html string is resolved (it can't contain functions like
+            mini.html HtmlStrings)
+          </h2>
+          ${"<script>alert(1)</script>"}`;
+                return mini.html `<h1>  ${"<script>alert(1)</script>"}this HtmlString can contain functions,
+                                         that get resolved at request time.</h1>${basedHtmlString}
+        <h3>${(mini) => mini.html ` ${"<script>alert(1)</script>"}it gives you convenient access to the request object,
+                                         anywhere in your code base:${mini.req.url}.
+            no need to do "props drilling" anymore. just write a function like this:
+             (mini: Mini)=> return some html and you are golden. ${"<script>alert(1)</script>"} `}`;
+            },
+        ],
+    ]);
+    const response = await url.match(req, "/");
+    const responseText = await response?.text();
+    expect(responseText).not.toInclude("<script>alert(1)</script>");
+    expect(responseText).toInclude("&lt;script&gt;alert(1)&lt;/script&gt;");
+});

package/dist/url.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="bun-types" />
 import type { Server, WebSocketHandler } from "bun";
 import { html, json, dangerjson, HtmlString } from "./html";
-import type { DangerJsonInHtml, JsonString, JsonStringValues } from "./html";
+import type { BasedHtml, DangerJsonInHtml, JsonString, JsonStringValues } from "./html";
 export type Form = {
     post: boolean;
     urlencoded: boolean;
@@ -193,6 +193,13 @@ export declare class url {
      * @param wsObject the websocketsocket object {@link WebSocketHandler}
      */
     static setWebsocket<T = undefined>(wsObject: WebSocketHandler<T>): void;
+    /**
+     * Send a message to all connected {@link ServerWebSocket} subscribed to a topic
+     * @param topic The topic to publish to
+     * @param message The data to send
+     * @returns 0 if the message was dropped, -1 if backpressure was applied, or the number of bytes sent.
+     */
+    static publishHtml(topic: string, message: BasedHtml): number;
     /**
      * Fetch handler that is called by the server when a request is made to any of the urls.
      * @param {Request} req - The Request object.

package/dist/url.js

@@ -395,6 +395,15 @@ export class url {
     static setWebsocket(wsObject) {
         url.websocket = wsObject;
     }
+    /**
+     * Send a message to all connected {@link ServerWebSocket} subscribed to a topic
+     * @param topic The topic to publish to
+     * @param message The data to send
+     * @returns 0 if the message was dropped, -1 if backpressure was applied, or the number of bytes sent.
+     */
+    static publishHtml(topic, message) {
+        return url.server.publish(topic, message);
+    }
     /**
      * Fetch handler that is called by the server when a request is made to any of the urls.
      * @param {Request} req - The Request object.

package/mininext/html.ts

@@ -7,6 +7,9 @@ import type {
 export type HtmlStringValues<T = unknown> =
   | HtmlString
   | HtmlString[]
+  | BasedHtml
+  | BasedHtml[]
+  | (BasedHtml | HtmlString)[]
   | string
   | number
   | HtmlHandler<T>
@@ -36,8 +39,11 @@ export class HtmlString extends Array {
         }
       } else if (typeof htmlPiece === "function") {
         let resolvedHtmlPiece = await htmlPiece(mini); //passing mini
+        //same cases as outer if statement
         if (resolvedHtmlPiece instanceof HtmlString) {
           resolvedHtmlPiece = await resolvedHtmlPiece.resolve(mini);
+        } else if (htmlPiece instanceof BasedHtml) {
+          this[index] = htmlPiece;
         } else {
           if (this instanceof JsonString || this instanceof DangerJsonInHtml) {
             resolvedHtmlPiece = JSON.stringify(resolvedHtmlPiece);
@@ -49,6 +55,8 @@ export class HtmlString extends Array {
         }
         // Replace the function with the resolved HTML piece in place
         this[index] = resolvedHtmlPiece;
+      } else if (htmlPiece instanceof BasedHtml) {
+        this[index] = htmlPiece;
       }
     }
     this.resolved = true;
@@ -79,7 +87,9 @@ export function html<X = unknown>(
       // we can pass arrays of HtmlString and they will get flattened in the HtmlResponder
       if (
         Array.isArray(value) &&
-        value.every((val) => val instanceof HtmlString)
+        value.every(
+          (val) => val instanceof HtmlString || val instanceof BasedHtml
+        )
       ) {
         // If the value is an array of HtmlString objects, add the whole array as a single value
         const notResolved = new HtmlString(...(value as any[]));
@@ -95,7 +105,7 @@ export function html<X = unknown>(
           to pass through a html template function to get escaped. You can do
           html -> dangerjson -> html if you want!
         </div>`;
-      } else if (!(value instanceof HtmlString)) {
+      } else if (!(value instanceof HtmlString || value instanceof BasedHtml)) {
         const notEmpty = value || "";
         // values will be escaped by default
         values[index] = Bun.escapeHTML(notEmpty + "");
@@ -144,7 +154,9 @@ function JsonTemplateProcessor(danger: boolean = false) {
         // we can pass arrays of HtmlString and they will get flattened in the HtmlResponder
         if (
           Array.isArray(value) &&
-          value.every((val) => val instanceof HtmlString)
+          value.every(
+            (val) => val instanceof HtmlString || val instanceof BasedHtml
+          )
         ) {
           // If the value is an array of HtmlString objects, add the whole array as a single value
           const notResolved = new HtmlString(...(value as any[]));
@@ -154,8 +166,8 @@ function JsonTemplateProcessor(danger: boolean = false) {
         } else if (typeof value === "function") {
           jsonStringArray.resolved = false;
           values[index] = value;
-        } else if (value instanceof HtmlString) {
-          if (!value.resolved) {
+        } else if (value instanceof HtmlString || value instanceof BasedHtml) {
+          if (value instanceof HtmlString && !value.resolved) {
             jsonStringArray.resolved = false;
           }
           values[index] = value;
@@ -265,11 +277,11 @@ export async function htmlResponder(
   }
   const definitelyResolved = await maybeUnresolved.resolve(mini);
   const flattend = definitelyResolved.flat(Infinity);
-
   async function* stepGen() {
     let index = 0;
     while (index < flattend.length) {
-      yield flattend[index++];
+      const step = flattend[index++];
+      if (step) yield String(step);
     }
   }
   function Stream(a: any) {

package/mininext/mininext.ts

@@ -24,7 +24,22 @@ async function build(backendPath: string = "backend/backend.ts") {
   }
 }
 
-const myPlugin: BunPlugin = {
+const streamPlugin: BunPlugin = {
+  name: "node stream in the frontend",
+  setup(build) {
+    build.onResolve({ filter: /^stream$/ }, (args) => {
+      const path_to_stream_lib = path.resolve(
+        projectRoot(),
+        "node_modules/stream-browserify/index.js"
+      );
+      if (path_to_stream_lib)
+        return {
+          path: path_to_stream_lib,
+        };
+    });
+  },
+};
+const bufferPlugin: BunPlugin = {
   name: "node buffer in the frontend",
   setup(build) {
     build.onResolve({ filter: /^buffer$/ }, (args) => {
@@ -39,6 +54,21 @@ const myPlugin: BunPlugin = {
     });
   },
 };
+const cryptoPlugin: BunPlugin = {
+  name: "node crypto in the frontend",
+  setup(build) {
+    build.onResolve({ filter: /^crypto$/ }, (args) => {
+      const path_to_crypto_lib = path.resolve(
+        projectRoot(),
+        "node_modules/crypto-browserify/index.js"
+      );
+      if (path_to_crypto_lib)
+        return {
+          path: path_to_crypto_lib,
+        };
+    });
+  },
+};
 async function buildBackend(backendPath: string = "backend/backend.ts") {
   global.FrontendScriptUrls = [];
   global.FrontendScripts = [];
@@ -83,7 +113,7 @@ async function buildFrontend(file: string) {
     naming: "[name]-[hash].[ext]",
     minify: Bun.argv[2] === "dev" ? false : true, //production
     target: "browser",
-    plugins: [myPlugin],
+    plugins: [bufferPlugin, streamPlugin, cryptoPlugin],
   });
   if (!result?.outputs[0]?.path) console.log(result);
   const url = path.basename(result.outputs[0].path);

package/mininext/url.ts

@@ -1,6 +1,11 @@
 import type { Server, WebSocketHandler } from "bun";
 import { htmlResponder, html, json, dangerjson, HtmlString } from "./html";
-import type { DangerJsonInHtml, JsonString, JsonStringValues } from "./html";
+import type {
+  BasedHtml,
+  DangerJsonInHtml,
+  JsonString,
+  JsonStringValues,
+} from "./html";
 export type Form = {
   post: boolean;
   urlencoded: boolean;
@@ -497,7 +502,15 @@ export class url {
   static setWebsocket<T = undefined>(wsObject: WebSocketHandler<T>) {
     url.websocket = wsObject as WebSocketHandler;
   }
-
+  /**
+   * Send a message to all connected {@link ServerWebSocket} subscribed to a topic
+   * @param topic The topic to publish to
+   * @param message The data to send
+   * @returns 0 if the message was dropped, -1 if backpressure was applied, or the number of bytes sent.
+   */
+  static publishHtml(topic: string, message: BasedHtml) {
+    return url.server.publish(topic, message as string);
+  }
   /**
    * Fetch handler that is called by the server when a request is made to any of the urls.
    * @param {Request} req - The Request object.

package/package.json

@@ -12,7 +12,7 @@
 
   },
   "files": ["dist", "mininext"],
-  "version": "0.3.1",
+  "version": "0.3.3",
   "devDependencies": {
     "@types/bun": "latest"
   },