start js rewriting, added todo list

2025-05-15 15:30:00 -04:00 · 2024-05-13 00:01:45 -04:00 · 2024-05-13 00:01:45 -04:00 · b43f2360a0
commit b43f2360a0
parent 5c53e59d07
6 changed files with 99 additions and 14 deletions
--- a/README.md
+++ b/README.md
@ -1 +1,31 @@
 check back in 3 months when scramjet supports 23% of what UV supports
+
+TODO
+- Finish HTML rewriting
+    - \<meta> tag rewriting: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+    - Build script imports for scramjet scripts in DomHandler AST
+
+    - example stringified output:
+    ```html
+    <!-- Append to <head> element -->
+    <script src="./scramjet.codecs.js"></script>
+    <script src="./scramjet.config.js"></script>
+    <script src="./scramjet.bundle.js"></script>  
+    ```
+- Fix URL rewriting
+    - Pass the full the full url object arround instead of just the origin and if the url is relative append it to the url path before adding it to the origin
+- Finish JS rewriting 
+    - only thing rewritten currently are imports and exports
+- Fix CSS rewriting
+    - CSS rewriting only rewrites the `url()` function, but `@import` rules can import urls using just a string: https://developer.mozilla.org/en-US/docs/Web/CSS/@import
+- Rewrite `Link` header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link
+- Write client APIs
+    - `__scope$()` function for JS rewriting
+    - Location object
+    - Window object
+    - LocalStorage, SessionStorage, IDB objects
+    - Cookies
+    - HTMLElement overrides
+    - WebSocket
+    - SW emulation
+    - Blah blah blah nerdy apis just do it
--- a/package.json
+++ b/package.json
@ -12,13 +12,13 @@
  "license": "ISC",
  "devDependencies": {
    "@fastify/static": "^7.0.3",
-    "@tomphttp/bare-server-node": "^2.0.3",
    "@mercuryworkshop/bare-as-module3": "^2.2.0-alpha",
-    "concurrently": "^8.2.2",
+    "@tomphttp/bare-server-node": "^2.0.3",
    "@types/eslint": "^8.56.10",
    "@types/serviceworker": "^0.0.85",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
+    "concurrently": "^8.2.2",
    "esbuild": "^0.20.2",
    "esbuild-plugin-copy": "^2.1.1",
    "esbuild-plugin-time": "^1.0.0",
@ -29,11 +29,14 @@
  "type": "module",
  "dependencies": {
    "@mercuryworkshop/bare-mux": "^1.1.0",
+    "astravel": "^0.6.1",
+    "astring": "^1.8.6",
    "dom-serializer": "^2.0.0",
    "domhandler": "^5.0.3",
    "domutils": "^3.1.0",
    "esbuild-server": "^0.3.0",
    "fastify": "^4.26.2",
-    "htmlparser2": "^9.1.0"
+    "htmlparser2": "^9.1.0",
+    "meriyah": "^4.4.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,12 @@ importers:
      '@mercuryworkshop/bare-mux':
        specifier: ^1.1.0
        version: 1.1.0
+      astravel:
+        specifier: ^0.6.1
+        version: 0.6.1
+      astring:
+        specifier: ^1.8.6
+        version: 1.8.6
      dom-serializer:
        specifier: ^2.0.0
        version: 2.0.0
@ -29,6 +35,9 @@ importers:
      htmlparser2:
        specifier: ^9.1.0
        version: 9.1.0
+      meriyah:
+        specifier: ^4.4.2
+        version: 4.4.2
    devDependencies:
      '@fastify/static':
        specifier: ^7.0.3
@ -451,6 +460,13 @@ packages:
    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
    engines: {node: '>=8'}

+  astravel@0.6.1:
+    resolution: {integrity: sha512-ZIkgWFIV0Yo423Vqalz7VcF+BAiISvSgplnkV2abPGACPFKofsWTcvr9SFyYM/t/vMZWqmdP/Eze6ATX7r84Dg==}
+
+  astring@1.8.6:
+    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
+    hasBin: true
+
  async-exit-hook@2.0.1:
    resolution: {integrity: sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==}
    engines: {node: '>=0.12.0'}
@ -907,6 +923,10 @@ packages:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}

+  meriyah@4.4.2:
+    resolution: {integrity: sha512-fENZIbs4tscI3IGRGtPrCoW4H4oGzVQrQCVCGRv+92kFXKkvxr52ZNR684ICvDC/UBWg9ioGc2X6pMnWOtRYwA==}
+    engines: {node: '>=10.4.0'}
+
  micromatch@4.0.5:
    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
    engines: {node: '>=8.6'}
@ -1617,6 +1637,10 @@ snapshots:

  array-union@2.1.0: {}

+  astravel@0.6.1: {}
+
+  astring@1.8.6: {}
+
  async-exit-hook@2.0.1: {}

  atomic-sleep@1.0.0: {}
@ -2151,6 +2175,8 @@ snapshots:

  merge2@1.4.1: {}

+  meriyah@4.4.2: {}
+
  micromatch@4.0.5:
    dependencies:
      braces: 3.0.2
--- a/src/bundle/rewriters/html.ts
+++ b/src/bundle/rewriters/html.ts
@ -1,5 +1,5 @@
 import { Parser } from "htmlparser2";
-import { DomHandler, hasChildren } from "domhandler";
+import { DomHandler } from "domhandler";
 import { hasAttrib } from "domutils";
 import render from "dom-serializer";
 import { encodeUrl } from "./url";
@ -37,10 +37,8 @@ function traverseParsedHtml(node, origin?: string) {
    if (hasAttrib(node, "srcset")) node.attribs.srcset = rewriteSrcset(node.attribs.srcset, origin);
    if (hasAttrib(node, "imagesrcset")) node.attribs.imagesrcset = rewriteSrcset(node.attribs.imagesrcset, origin);

-    if (node.name === "style" && hasChildren(node)) node.children[0].data = rewriteCss(node.children[0].data, origin);
-    // if (node.name === "script" && /((application|text)\/javascript)|importmap|undefined/.test(node.attribs.type) && !!node.children[0].data) {
-    //     node.children[0].data = rewriteJs(node.children[0].data);
-    // }
+    if (node.name === "style" && node.children[0] !== undefined) node.children[0].data = rewriteCss(node.children[0].data, origin);
+    if (node.name === "script" && /(application|text)\/javascript|importmap|undefined/.test(node.attribs.type) && node.children[0] !== undefined) node.children[0].data = rewriteJs(node.children[0].data, origin);

    if (node.childNodes) {
        for (const childNode in node.childNodes) {
--- a/src/bundle/rewriters/js.ts
+++ b/src/bundle/rewriters/js.ts
@ -1,6 +1,34 @@
-// don't do js rewriting yet
-// i'm making a benchmark on different rewriting methods
+import { parse } from "meriyah";
+import { generate } from "astring";
+import { makeTraveler } from "astravel";
+import { encodeUrl } from "./url";
+
+// i am a cat. i like to be petted. i like to be fed. i like to be

 export function rewriteJs(js: string, origin?: string) {
-    return js;
+    const ast = parse(js, {
+        module: true
+    });
+
+    const customTraveler = makeTraveler({
+        ImportDeclaration: (node) => {
+            node.source.value = encodeUrl(node.source.value, origin);
+        },
+
+        ImportExpression: (node) => {
+            node.source.value = encodeUrl(node.source.value, origin);
+        },
+
+        ExportAllDeclaration: (node) => {
+            node.source.value = encodeUrl(node.source.value, origin);
+        },
+
+        ExportNamedDeclaration: (node) => {
+            if (node.source) node.source.value = encodeUrl(node.source.value, origin);
+        }
+    });
+
+    customTraveler.go(ast);
+    
+    return generate(ast);
 }
--- a/src/bundle/rewriters/url.ts
+++ b/src/bundle/rewriters/url.ts
@ -18,9 +18,9 @@ function canParseUrl(url: string, origin?: string) {

 // something is broken with this but i didn't debug it
 export function encodeUrl(url: string, origin?: string) {
-    // if (!origin) {
-    //     origin = self.__scramjet$config.codec.decode(location.href.slice((location.origin + self.__scramjet$config.prefix).length));
-    // }
+    if (!origin) {
+        origin = self.__scramjet$config.codec.decode(location.href.slice((location.origin + self.__scramjet$config.prefix).length));
+    }

    if (url.startsWith("javascript:")) {
        return "javascript:" + rewriteJs(url.slice("javascript:".length));