@spirobel/mininext 0.3.2 → 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/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/package.json

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