chemicaljs 2.6.4 → 3.0.0

package/index.js

@@ -0,0 +1,115 @@
+import { bootstrap } from "@mercuryworkshop/proxy-bootstrap";
+import express from "express";
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const swPath = fileURLToPath(new URL("./sw.js", import.meta.url));
+
+export class Chemical {
+  constructor(options = {}) {
+    this.port = options.port || 8000;
+    this.staticDir = options.staticDir || "build";
+    this.spaMode = options.spaMode || false;
+
+    this.app = express();
+    this.server = http.createServer(this.app);
+  }
+
+  async start() {
+    const { routeRequest, routeUpgrade } = await bootstrap({
+      scramjetBundlePath: "/scramjet/scramjet.js",
+      scramjetWasmPath: "/scramjet/scramjet.wasm",
+      scramjetUtilsBundlePath: "/scramjet/scramjet-utils.js",
+    });
+
+    this.app.use((req, res, next) => {
+      if (routeRequest(req, res)) {
+        return;
+      }
+      next();
+    });
+
+    this.app.get("/sw.js", (req, res) => {
+      res.sendFile(swPath);
+    });
+
+    this.app.use(express.static(this.staticDir));
+
+    if (this.spaMode) {
+      this.app.get("*", (req, res) => {
+        res.sendFile(path.resolve(process.cwd(), this.staticDir, "index.html"));
+      });
+    }
+
+    this.server.on("upgrade", (req, socket, head) => {
+      routeUpgrade(req, socket, head);
+    });
+
+    return new Promise((resolve) => {
+      this.server.listen(this.port, () => {
+        console.log(`Running on http://localhost:${this.port}`);
+        resolve(this.server);
+      });
+    });
+  }
+
+  stop() {
+    if (this.server) {
+      this.server.close();
+      console.log("Server stopped");
+    }
+  }
+}
+
+export const ChemicalVitePlugin = () => ({
+  name: "chemical-vite-plugin",
+  config() {
+    return {
+      optimizeDeps: {
+        include: [
+          "@mercuryworkshop/scramjet",
+          "@mercuryworkshop/scramjet-controller",
+          "@mercuryworkshop/proxy-bootstrap",
+        ],
+      },
+    };
+  },
+  async configureServer(server) {
+    const { routeRequest, routeUpgrade } = await bootstrap({
+      scramjetBundlePath: "/scramjet/scramjet.js",
+      scramjetWasmPath: "/scramjet/scramjet.wasm",
+      scramjetUtilsBundlePath: "/scramjet/scramjet-utils.js",
+    });
+
+    server.middlewares.use((req, res, next) => {
+      const urlPath = req.url.split("?")[0];
+
+      if (urlPath === "/sw.js") {
+        fs.readFile(swPath, (err, data) => {
+          if (err) {
+            res.statusCode = 404;
+            res.end("Service Worker not found");
+            return;
+          }
+          res.setHeader("Content-Type", "application/javascript");
+          res.end(data);
+        });
+        return;
+      }
+
+      if (routeRequest(req, res)) {
+        return;
+      }
+
+      next();
+    });
+
+    if (server.httpServer) {
+      server.httpServer.on("upgrade", (req, socket, head) => {
+        routeUpgrade(req, socket, head);
+      });
+    }
+  },
+});

package/package.json

@@ -1,56 +1,40 @@
 {
   "name": "chemicaljs",
-  "version": "2.6.4",
+  "version": "3.0.0",
   "description": "Easily create your own web proxy with no experience required.",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "client",
-    "config",
-    "ultraviolet"
-  ],
+  "author": "Nebelung",
+  "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chemicaljs/chemical.git"
   },
-  "author": "Nebelung",
-  "license": "AGPL-3.0-only",
-  "scripts": {
-    "update": "npx npm-check-updates -u && npm i",
-    "build-uv": "node build-uv.js",
-    "build": "npm run build-uv && tsup"
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./Chemical": "./Chemical.svelte",
+    "./Frame": "./Frame.svelte"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "12.8.1",
+      "onFail": "download"
+    }
   },
   "dependencies": {
-    "@mercuryworkshop/bare-mux": "^2.1.7",
-    "@mercuryworkshop/epoxy-transport": "^2.1.27",
-    "@mercuryworkshop/libcurl-transport": "^1.3.15",
-    "@mercuryworkshop/scramjet": "https://github.com/chemicaljs/chemical/raw/main/scramjet.tgz",
-    "@mercuryworkshop/wisp-js": "^0.3.3",
-    "@titaniumnetwork-dev/ultraviolet": "^3.2.10",
-    "express": "^4.21.2",
-    "glob": "^11.0.0",
-    "nanoid": "^5.0.9",
-    "rammerhead": "https://github.com/chemicaljs/chemical/raw/main/rammerhead.tgz",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.6"
+    "@mercuryworkshop/epoxy-transport": "^3.0.1",
+    "@mercuryworkshop/libcurl-transport": "^2.0.5",
+    "@mercuryworkshop/proxy-bootstrap": "^0.0.5",
+    "@mercuryworkshop/scramjet": "^1.1.0",
+    "@mercuryworkshop/scramjet-controller": "^0.0.14",
+    "@mercuryworkshop/scramjet-utils": "^0.0.3",
+    "express": "^5.2.1"
   },
-  "engines": {
-    "node": ">=20.11.0"
+  "peerDependencies": {
+    "svelte": "^5.56.1"
   },
-  "devDependencies": {
-    "tsup": "^8.3.5"
+  "scripts": {
+    "fetch-adblock": "curl -o blacklist.txt https://raw.githubusercontent.com/hagezi/dns-blocklists/main/adblock/pro.txt"
   }
-}
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@mercuryworkshop/scramjet': true
+  bufferutil: true

package/sw.js

@@ -0,0 +1,7 @@
+importScripts("./controller/controller.sw.js");
+
+addEventListener("fetch", (e) => {
+  if ($scramjetController.shouldRoute(e)) {
+    e.respondWith($scramjetController.route(e));
+  }
+});

package/tests/+layout.svelte

@@ -0,0 +1,16 @@
+<script>
+  import Chemical from "../../../chemical/Chemical.svelte";
+  import { setContext } from "svelte";
+
+  let { children } = $props();
+
+  let chemState = $state({
+    ready: false,
+    instance: null,
+  });
+
+  setContext("chemState", chemState);
+</script>
+
+<Chemical bind:this={chemState.instance} bind:ready={chemState.ready} />
+{@render children()}

package/tests/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+  import Frame from "../../../chemical/Frame.svelte";
+  import { getContext } from "svelte";
+
+  let chemState = getContext("chemState");
+</script>
+
+<Frame
+  src="https://www.example.com"
+  bind:ready={chemState.ready}
+  bind:chemical={chemState.instance}
+></Frame>

package/tests/+test.svelte

@@ -0,0 +1,68 @@
+<script>
+  import Chemical from "$lib/chemicaljs/Chemical.svelte";
+  import Frame from "$lib/chemicaljs/Frame.svelte";
+
+  let ready = $state(false);
+  let chemical = $state();
+  let transport = $state("epoxy");
+  let wisp = $state("wss://wisp.freewisp.org/");
+
+  let frame1 = $state();
+</script>
+
+<button onclick={() => console.log(chemical.fetch("https://example.com"))}
+  >fetch test</button
+>
+<button
+  onclick={async () =>
+    console.log(await chemical.autocomplete("math", "brave"))}
+  >autocomplete test</button
+>
+<button
+  onclick={async () =>
+    console.log(
+      await chemical.createDataURL("https://www.google.com/favicon.ico"),
+    )}>createDataURL test</button
+>
+
+<button onclick={() => (transport = "epoxy")}>epoxy</button>
+<button onclick={() => (transport = "libcurl")}>libcurl</button>
+<button onclick={() => (wisp = "wss://fake.freewisp.org/")}>change wisp</button>
+<Chemical
+  bind:this={chemical}
+  bind:ready
+  bind:transport
+  bind:wisp
+  onready={() => console.log(chemical.url("https://playobsidian.com"))}
+/>
+
+<input
+  onkeydown={(e) => e.key === "Enter" && frame1.go(e.target.value)}
+  placeholder="Enter URL"
+/>
+<button onclick={() => frame1.go("example.com", { autoHttps: true })}
+  >autohttps</button
+>
+<button
+  onclick={() =>
+    frame1.go("kittens", {
+      searchEngine: chemical.searchEngines.google,
+    })}>search engine test</button
+>
+<button onclick={() => frame1.reload()}>reload</button>
+<button onclick={() => frame1.forward()}>forward</button>
+<button onclick={() => frame1.back()}>back</button>
+
+<Frame
+  bind:this={frame1}
+  class="w-full h-screen"
+  adblock={true}
+  catchlinks={(url) =>
+    new URL(`/?goto=${encodeURIComponent(url.href)}`, location.origin)}
+  linkhandler={(url) => window.open("?url=" + encodeURIComponent(url))}
+  cache={false}
+  onchange={(url) => console.log("Frame URL changed to: " + url)}
+  src="https://www.example.com"
+  bind:ready
+  bind:chemical
+></Frame>

package/client/chemical.cloaking.js

@@ -1,48 +0,0 @@
-class ChemicalTitle extends HTMLTitleElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    setTimeout(() => {
-      this.setAttribute("data-title", this.innerText);
-
-      const title =
-        this.dataset.titleStore !== undefined
-          ? localStorage.getItem("@chemical/title") ||
-            this.getAttribute("data-title")
-          : this.getAttribute("data-title");
-
-      this.innerText = title;
-    });
-  }
-}
-
-class ChemicalIcon extends HTMLLinkElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    setTimeout(() => {
-      this.setAttribute("data-icon", this.getAttribute("href"));
-
-      const icon =
-        this.dataset.iconStore !== undefined
-          ? localStorage.getItem("@chemical/icon") ||
-            this.getAttribute("data-icon")
-          : this.getAttribute("data-icon");
-
-      this.setAttribute("href", icon);
-    });
-  }
-}
-
-customElements.define("chemical-title", ChemicalTitle, { extends: "title" });
-customElements.define("chemical-icon", ChemicalIcon, { extends: "link" });
-
-window.chemical.aboutBlank = function (url) {
-  var page = window.open();
-  page.document.body.innerHTML =
-    `<iframe style="height:100%; width: 100%; border: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: none" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" src="` +
-    url +
-    `"></iframe>`;
-};

package/client/chemical.components.js

@@ -1,214 +0,0 @@
-class ChemicalInput extends HTMLInputElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    this.addEventListener("keydown", async function (e) {
-      if (e.key === "Enter" && window.chemical.loaded && e.target.value) {
-        let service =
-          this.dataset.serviceStore !== undefined
-            ? localStorage.getItem("@chemical/service") ||
-              this.dataset.service ||
-              "uv"
-            : this.dataset.service || "uv";
-        let autoHttps =
-          this.dataset.autoHttpsStore !== undefined
-            ? localStorage.getItem("@chemical/autoHttps") === "true"
-            : this.dataset.autoHttps !== undefined
-            ? true
-            : false;
-        let searchEngine =
-          this.dataset.searchEngineStore !== undefined
-            ? localStorage.getItem("@chemical/searchEngine") || this.dataset.searchEngine
-            : this.dataset.searchEngine;
-        let action = this.dataset.action;
-        let target = this.dataset.target;
-        let frame = this.dataset.frame;
-        let encodedURL = await chemical.encode(e.target.value, {
-          service,
-          autoHttps,
-          searchEngine,
-        });
-
-        if (frame) {
-          let forFrame = document.getElementById(frame);
-          forFrame.src = encodedURL;
-          forFrame.setAttribute("data-open", "true");
-        }
-
-        if (action) {
-          window[action](encodedURL);
-        }
-
-        if (target) {
-          if (target === "_self") {
-            window.location = encodedURL;
-          } else if (target === "_blank") {
-            window.open(encodedURL);
-          }
-        }
-      }
-    });
-  }
-}
-
-class ChemicalButton extends HTMLButtonElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    this.addEventListener("click", function (e) {
-      let forInput = document.getElementById(this.dataset.for);
-
-      if (forInput) {
-        forInput.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "Enter",
-          })
-        );
-      }
-    });
-  }
-}
-
-class ChemicalIFrame extends HTMLIFrameElement {
-  static observedAttributes = ["data-open"];
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    let open = this.dataset.open;
-    this.style.display = open === "true" ? "" : "none";
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "data-open") {
-      let open = this.dataset.open;
-      this.style.display = open === "true" ? "" : "none";
-
-      let controls = document.getElementById(this.dataset.controls);
-
-      if (controls) {
-        controls.dataset.open = open;
-      }
-    }
-  }
-}
-
-class ChemicalControls extends HTMLElement {
-  static observedAttributes = ["data-open"];
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    let open = this.dataset.open;
-    this.style.display = open === "true" ? "" : "none";
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "data-open") {
-      let open = this.dataset.open;
-      this.style.display = open === "true" ? "" : "none";
-    }
-  }
-}
-
-class ChemicalLink extends HTMLAnchorElement {
-  constructor() {
-    super();
-  }
-  async connectedCallback() {
-    let href = this.dataset.href;
-    let service = this.dataset.service || "uv";
-    let autoHttps = this.dataset.autoHttps !== undefined ? true : false;
-    let searchEngine = this.dataset.searchEngine;
-    this.dataset.chemicalLoading = "true";
-
-    if (window.chemical.loaded) {
-      this.setAttribute(
-        "href",
-        await chemical.encode(href, {
-          service,
-          autoHttps,
-          searchEngine,
-        })
-      );
-      this.dataset.chemicalLoading = "false";
-    } else {
-      window.addEventListener("chemicalLoaded", async () => {
-        this.setAttribute(
-          "href",
-          await chemical.encode(href, {
-            service,
-            autoHttps,
-            searchEngine,
-          })
-        );
-        this.dataset.chemicalLoading = "false";
-      });
-    }
-  }
-}
-
-class ChemicalSelect extends HTMLSelectElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    const store = this.dataset.defaultStore;
-
-    this.addEventListener("change", function () {
-      window.chemical.setStore(store, this.value);
-    });
-
-    if (store) {
-      const value = window.chemical.getStore(store);
-
-      const observerOptions = {
-        childList: true,
-        subtree: false,
-      };
-
-      const observer = new MutationObserver((records, observer) => {
-        for (const record of records) {
-          for (const addedNode of record.addedNodes) {
-            if (addedNode.tagName === "OPTION") {
-              if (addedNode.getAttribute("value") === value) {
-                addedNode.setAttribute("selected", "");
-              }
-            }
-          }
-        }
-      });
-      observer.observe(this, observerOptions);
-    }
-  }
-}
-
-customElements.define("chemical-input", ChemicalInput, { extends: "input" });
-customElements.define("chemical-button", ChemicalButton, { extends: "button" });
-customElements.define("chemical-iframe", ChemicalIFrame, { extends: "iframe" });
-customElements.define("chemical-controls", ChemicalControls, {
-  extends: "section",
-});
-customElements.define("chemical-link", ChemicalLink, { extends: "a" });
-customElements.define("chemical-select", ChemicalSelect, { extends: "select" });
-
-window.chemical.componentAction = function (action, frameID) {
-  let frame = document.getElementById(frameID);
-
-  if (frame) {
-    switch (action) {
-      case "back":
-        frame.contentWindow.history.back();
-        break;
-      case "forward":
-        frame.contentWindow.history.forward();
-        break;
-      case "reload":
-        frame.contentWindow.location.reload();
-        break;
-      case "close":
-        frame.dataset.open = "false";
-        frame.src = "";
-    }
-  }
-};

package/client/chemical.demo.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Demo Site</title>
-    <style>
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-      }
-
-      body {
-        margin: 0;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        background: #e5e5e5;
-        color: black;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background: #0a0a0a;
-          color: #fafafa;
-        }
-      }
-
-      h1 {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Demo Site</h1>
-    <p>This is a demo site without proxy functionality.</p>
-  </body>
-</html>