chemicaljs 1.7.1 → 1.7.3

package/README.md

@@ -49,7 +49,7 @@ const [app, listen] = new ChemicalServer({
 3. Use `app` which is an express app. You may need to import express for certain APIs.
 
 ```js
-chemical.get("/", function(req, res){
+app.get("/", function(req, res){
     res.send("Hello World");
 });
 ```
@@ -170,6 +170,13 @@ await chemical.encode("https://example.com", {
 })
 ```
 
+3. To decode a URL use `chemical.decode`
+
+```js
+const encodedURL = await chemical.encode("https://example.com")
+const decodedURL = await chemical.decode(encodedURL)
+```
+
 4. Set `autoHttps` to make `example.com` > `https://example.com`
 
 ```js
@@ -287,9 +294,11 @@ Setup a proxy site with easy HTML components.
 An anchor link but it automatically encodes the URL.
 
 ```html
-<a href="https://example.com" is="chemical-link">Link</a>
+<a data-href="https://example.com" is="chemical-link">Link</a>
 ```
 
+You can also add `data-service="uv"`, `data-autoHttps`, and `data-search-engine="https://www.google.com/search?q=%s"`
+
 You can style the link as chemical is loading.
 
 ```css
@@ -303,19 +312,21 @@ a[data-chemical-loading="true"] {
 Opens in the current tab when the enter key is pressed.
 
 ```html
-<input target="_self" placeholder="Enter URL" is="chemical-input">
+<input data-target="_self" placeholder="Enter URL" is="chemical-input">
 ```
 
+You can also add `data-service="uv"`, `data-autoHttps`, and `data-search-engine="https://www.google.com/search?q=%s"`
+
 Opens in current tab when the enter key is pressed.
 
 ```html
-<input target="_blank" placeholder="Enter URL" is="chemical-input">
+<input data-target="_blank" placeholder="Enter URL" is="chemical-input">
 ```
 
-Custom action when the enter key is pressed. Change `action` to your function name. The first parameter of the action will be the encoded URL.
+Custom action when the enter key is pressed. Change `data-action` to your function name. The first parameter of the action will be the encoded URL.
 
 ```html
-<input action="logURL" placeholder="Enter URL" is="chemical-input">
+<input data-action="logURL" placeholder="Enter URL" is="chemical-input">
 <script>
     function logURL(url) {
         console.log(url)
@@ -328,8 +339,8 @@ Custom action when the enter key is pressed. Change `action` to your function na
 Opens when the enter key is pressed or button is clicked. Set the `for` attribute to the `id` of the button.
 
 ```html
-<input id="my-input" target="_blank" placeholder="Enter URL" is="chemical-input">
-<button for="my-input" is="chemical-button">Go!</button>
+<input id="my-input" data-target="_blank" placeholder="Enter URL" is="chemical-input">
+<button data-for="my-input" is="chemical-button">Go!</button>
 ```
 
 ### With iframe
@@ -337,7 +348,7 @@ Opens when the enter key is pressed or button is clicked. Set the `for` attribut
 A hidden iframe that is shown when the enter key is pressed. Set the `frame` attribute to the `id` of the iframe.
 
 ```html
-<input frame="my-iframe" placeholder="Enter URL" is="chemical-input">
+<input data-frame="my-iframe" placeholder="Enter URL" is="chemical-input">
 <iframe id="my-iframe" is="chemical-iframe"></iframe>
 ```
 
@@ -349,14 +360,14 @@ Set the `controls` attribute to the `id` of the controls.
 Set the second parameter of `chemicalAction` to the `id` of the iframe.
 
 ```html
-<input frame="my-iframe-2" placeholder="Enter URL" is="chemical-input">
+<input data-frame="my-iframe-2" placeholder="Enter URL" is="chemical-input">
 <section id="my-controls-2" is="chemical-controls">
     <button onclick="chemicalAction('back', 'my-iframe-2')">←</button>
     <button onclick="chemicalAction('forward', 'my-iframe-2')">→</button>
     <button onclick="chemicalAction('reload', 'my-iframe-2')">⟳</button>
     <button onclick="chemicalAction('close', 'my-iframe-2')">🗙</button>
 </section>
-<iframe controls="my-controls-2" id="my-iframe-2" is="chemical-iframe"></iframe>
+<iframe data-controls="my-controls-2" id="my-iframe-2" is="chemical-iframe"></iframe>
 ```
 
 ## License

package/client/chemical.components.js

@@ -4,16 +4,23 @@ class ChemicalInput extends HTMLInputElement {
     }
     connectedCallback() {
         this.addEventListener("keydown", async function (e) {
-            if (e.key == "Enter" && window.chemicalLoaded && e.target.value) {
-                let encodedURL = await window.chemicalEncode(e.target.value)
-                let action = this.getAttribute("action")
-                let target = this.getAttribute("target")
-                let frame = this.getAttribute("frame")
+            if (e.key == "Enter" && window.chemical.loaded && e.target.value) {
+                let service = this.dataset.service || "uv";
+                let autoHttps = this.dataset.autoHttps !== undefined ? true : false;
+                let 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(this.getAttribute("frame"))
-                    forFrame.src = encodedURL
-                    forFrame.setAttribute("open", "true")
+                    let forFrame = document.getElementById(frame)
+                    forFrame.src = encodedURL;
+                    forFrame.setAttribute("data-open", "true")
                 }
 
                 if (action) {
@@ -38,7 +45,7 @@ class ChemicalButton extends HTMLButtonElement {
     }
     connectedCallback() {
         this.addEventListener("click", function (e) {
-            let forInput = document.getElementById(this.getAttribute("for"))
+            let forInput = document.getElementById(this.dataset.for)
 
             if (forInput) {
                 forInput.dispatchEvent(new KeyboardEvent("keydown", {
@@ -50,40 +57,40 @@ class ChemicalButton extends HTMLButtonElement {
 }
 
 class ChemicalIFrame extends HTMLIFrameElement {
-    static observedAttributes = ["open"];
+    static observedAttributes = ["data-open"];
     constructor() {
         super();
     }
     connectedCallback() {
-        let open = this.getAttribute("open")
+        let open = this.dataset.open
         this.style.display = open == "true" ? "" : "none"
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (name == "open") {
-            let open = this.getAttribute("open")
+        if (name == "data-open") {
+            let open = this.dataset.open
             this.style.display = open == "true" ? "" : "none"
 
-            let controls = document.getElementById(this.getAttribute("controls"))
+            let controls = document.getElementById(this.dataset.controls)
 
             if (controls) {
-                controls.setAttribute("open", open)
+                controls.dataset.open = open
             }
         }
     }
 }
 
 class ChemicalControls extends HTMLElement {
-    static observedAttributes = ["open"];
+    static observedAttributes = ["data-open"];
     constructor() {
         super();
     }
     connectedCallback() {
-        let open = this.getAttribute("open")
+        let open = this.dataset.open
         this.style.display = open == "true" ? "" : "none"
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (name == "open") {
-            let open = this.getAttribute("open")
+        if (name == "data-open") {
+            let open = this.dataset.open
             this.style.display = open == "true" ? "" : "none"
         }
     }
@@ -94,16 +101,26 @@ class ChemicalLink extends HTMLAnchorElement {
         super();
     }
     async connectedCallback() {
-        let href = this.getAttribute("href");
-        this.removeAttribute("href");
+        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.chemicalLoaded) {
-            this.setAttribute("href", await chemicalEncode(href))
+        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 chemicalEncode(href))
+                this.setAttribute("href", await chemical.encode(href, {
+                    service,
+                    autoHttps,
+                    searchEngine
+                }))
                 this.dataset.chemicalLoading = "false";
             })
         }
@@ -131,7 +148,7 @@ function chemicalAction(action, frameID) {
                 frame.contentWindow.location.reload()
                 break;
             case "close":
-                frame.setAttribute("open", "false")
+                frame.dataset.open = "false"
                 frame.src = ""
         }
     }

package/client/chemical.js

@@ -4,178 +4,192 @@ window.chemical = {
     wisp: document.currentScript.dataset.wisp || (location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/wisp/"
 }
 
-function rammerheadEncode(baseUrl) {
-    const mod = (n, m) => ((n % m) + m) % m
+function rammerheadEncode(baseUrl, decode = false) {
+    const mod = (n, m) => ((n % m) + m) % m;
     const baseDictionary =
-        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~-"
-    const shuffledIndicator = "_rhs"
+        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~-";
+    const shuffledIndicator = "_rhs";
+
     const generateDictionary = function () {
-        let str = ""
-        const split = baseDictionary.split("")
+        let str = "";
+        const split = baseDictionary.split("");
         while (split.length > 0) {
-            str += split.splice(Math.floor(Math.random() * split.length), 1)[0]
+            str += split.splice(Math.floor(Math.random() * split.length), 1)[0];
         }
-        return str
-    }
+        return str;
+    };
+
     class StrShuffler {
         constructor(dictionary = generateDictionary()) {
-            this.dictionary = dictionary
+            this.dictionary = dictionary;
         }
+
         shuffle(str) {
             if (str.startsWith(shuffledIndicator)) {
-                return str
+                return str;
             }
-            let shuffledStr = ""
+            let shuffledStr = "";
             for (let i = 0; i < str.length; i++) {
-                const char = str.charAt(i)
-                const idx = baseDictionary.indexOf(char)
+                const char = str.charAt(i);
+                const idx = baseDictionary.indexOf(char);
                 if (char === "%" && str.length - i >= 3) {
-                    shuffledStr += char
-                    shuffledStr += str.charAt(++i)
-                    shuffledStr += str.charAt(++i)
+                    shuffledStr += char;
+                    shuffledStr += str.charAt(++i);
+                    shuffledStr += str.charAt(++i);
                 } else if (idx === -1) {
-                    shuffledStr += char
+                    shuffledStr += char;
                 } else {
                     shuffledStr += this.dictionary.charAt(
                         mod(idx + i, baseDictionary.length)
-                    )
+                    );
                 }
             }
-            return shuffledIndicator + shuffledStr
+            return shuffledIndicator + shuffledStr;
         }
+
         unshuffle(str) {
             if (!str.startsWith(shuffledIndicator)) {
-                return str
+                return str;
             }
 
-            str = str.slice(shuffledIndicator.length)
+            str = str.slice(shuffledIndicator.length);
 
-            let unshuffledStr = ""
+            let unshuffledStr = "";
             for (let i = 0; i < str.length; i++) {
-                const char = str.charAt(i)
-                const idx = this.dictionary.indexOf(char)
+                const char = str.charAt(i);
+                const idx = this.dictionary.indexOf(char);
                 if (char === "%" && str.length - i >= 3) {
-                    unshuffledStr += char
-                    unshuffledStr += str.charAt(++i)
-                    unshuffledStr += str.charAt(++i)
+                    unshuffledStr += char;
+                    unshuffledStr += str.charAt(++i);
+                    unshuffledStr += str.charAt(++i);
                 } else if (idx === -1) {
-                    unshuffledStr += char
+                    unshuffledStr += char;
                 } else {
                     unshuffledStr += baseDictionary.charAt(
                         mod(idx - i, baseDictionary.length)
-                    )
+                    );
                 }
             }
-            return unshuffledStr
+            return unshuffledStr;
         }
     }
+
     function get(url, callback, shush = false) {
-        var request = new XMLHttpRequest()
-        request.open("GET", url, true)
-        request.send()
+        var request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.send();
 
         request.onerror = function () {
-            if (!shush) console.log("Cannot communicate with the server")
-        }
+            if (!shush) console.log("Cannot communicate with the server");
+        };
         request.onload = function () {
             if (request.status === 200) {
-                callback(request.responseText)
+                callback(request.responseText);
             } else {
                 if (!shush)
                     console.log(
                         'unexpected server response to not match "200". Server says "' +
                         request.responseText +
                         '"'
-                    )
+                    );
             }
-        }
+        };
     }
+
     var api = {
         newsession(callback) {
-            get("/newsession", callback)
+            get("/newsession", callback);
         },
         sessionexists(id, callback) {
             get("/sessionexists?id=" + encodeURIComponent(id), function (res) {
-                if (res === "exists") return callback(true)
-                if (res === "not found") return callback(false)
-                console.log("unexpected response from server. received" + res)
-            })
+                if (res === "exists") return callback(true);
+                if (res === "not found") return callback(false);
+                console.log("unexpected response from server. received" + res);
+            });
         },
         shuffleDict(id, callback) {
-            console.log("Shuffling", id)
+            console.log("Shuffling", id);
             get("/api/shuffleDict?id=" + encodeURIComponent(id), function (res) {
-                callback(JSON.parse(res))
-            })
+                callback(JSON.parse(res));
+            });
         }
-    }
-    var localStorageKey = "rammerhead_sessionids"
-    var localStorageKeyDefault = "rammerhead_default_sessionid"
+    };
+
+    var localStorageKey = "rammerhead_sessionids";
+    var localStorageKeyDefault = "rammerhead_default_sessionid";
     var sessionIdsStore = {
         get() {
-            var rawData = localStorage.getItem(localStorageKey)
-            if (!rawData) return []
+            var rawData = localStorage.getItem(localStorageKey);
+            if (!rawData) return [];
             try {
-                var data = JSON.parse(rawData)
-                if (!Array.isArray(data)) throw "getout"
-                return data
+                var data = JSON.parse(rawData);
+                if (!Array.isArray(data)) throw "getout";
+                return data;
             } catch (e) {
-                return []
+                return [];
             }
         },
         set(data) {
-            if (!data || !Array.isArray(data)) throw new TypeError("must be array")
-            localStorage.setItem(localStorageKey, JSON.stringify(data))
+            if (!data || !Array.isArray(data)) throw new TypeError("must be array");
+            localStorage.setItem(localStorageKey, JSON.stringify(data));
         },
         getDefault() {
-            var sessionId = localStorage.getItem(localStorageKeyDefault)
+            var sessionId = localStorage.getItem(localStorageKeyDefault);
             if (sessionId) {
-                var data = sessionIdsStore.get()
+                var data = sessionIdsStore.get();
                 data.filter(function (e) {
-                    return e.id === sessionId
-                })
-                if (data.length) return data[0]
+                    return e.id === sessionId;
+                });
+                if (data.length) return data[0];
             }
-            return null
+            return null;
         },
         setDefault(id) {
-            localStorage.setItem(localStorageKeyDefault, id)
+            localStorage.setItem(localStorageKeyDefault, id);
         }
-    }
+    };
+
     function addSession(id) {
-        var data = sessionIdsStore.get()
-        data.unshift({ id: id, createdOn: new Date().toLocaleString() })
-        sessionIdsStore.set(data)
+        var data = sessionIdsStore.get();
+        data.unshift({ id: id, createdOn: new Date().toLocaleString() });
+        sessionIdsStore.set(data);
     }
+
     function getSessionId() {
         return new Promise(resolve => {
-            var id = localStorage.getItem("session-string")
+            var id = localStorage.getItem("session-string");
             api.sessionexists(id, function (value) {
                 if (!value) {
-                    console.log("Session validation failed")
+                    console.log("Session validation failed");
                     api.newsession(function (id) {
-                        addSession(id)
-                        localStorage.setItem("session-string", id)
-                        console.log(id)
-                        console.log("^ new id")
-                        resolve(id)
-                    })
+                        addSession(id);
+                        localStorage.setItem("session-string", id);
+                        console.log(id);
+                        console.log("^ new id");
+                        resolve(id);
+                    });
                 } else {
-                    resolve(id)
+                    resolve(id);
                 }
-            })
-        })
+            });
+        });
     }
-    var ProxyHref
+
+    var ProxyHref;
 
     return getSessionId().then(id => {
         return new Promise(resolve => {
             api.shuffleDict(id, function (shuffleDict) {
-                var shuffler = new StrShuffler(shuffleDict)
-                ProxyHref = "/" + id + "/" + shuffler.shuffle(baseUrl)
-                resolve(ProxyHref)
-            })
-        })
-    })
+                var shuffler = new StrShuffler(shuffleDict);
+                if (decode) {
+                    ProxyHref = shuffler.unshuffle(baseUrl.split(id + "/")[1]);
+                } else {
+                    ProxyHref = "/" + id + "/" + shuffler.shuffle(baseUrl);
+                }
+                resolve(ProxyHref);
+            });
+        });
+    });
 }
 
 async function encodeService(url, service) {
@@ -214,6 +228,14 @@ window.chemical.encode = async function (url, config) {
         }
     }
 
+    if (config.service == undefined) {
+        config.service = defaultService;
+    }
+
+    if (config.autoHttps == undefined) {
+        config.autoHttps = false;
+    }
+
     if (url.match(/^https?:\/\//)) {
         return await encodeService(url, config.service);
     } else if (config.autoHttps == true && (url.includes(".") && !url.includes(" "))) {
@@ -225,6 +247,32 @@ window.chemical.encode = async function (url, config) {
     }
 }
 
+window.chemical.decode = async function (url, config) {
+    if (!config || typeof config !== "object" || Array.isArray(config)) {
+        config = {
+            service: defaultService,
+        }
+    }
+
+    switch (config.service) {
+        case "uv":
+            if (uvEnabled) {
+                return __uv$config.decodeUrl(url.split(__uv$config.prefix)[1]);
+            }
+            break;
+        case "rammerhead":
+            if (rammerheadEnabled) {
+                return await rammerheadEncode(url.split(window.location.origin)[1], true);
+            }
+            break;
+        case "scramjet":
+            if (scramjetEnabled) {
+                return __scramjet$config.codec.decode(url.split(__scramjet$config.prefix)[1]);
+            }
+            break;
+    }
+}
+
 function getTransport(transport) {
     switch (transport) {
         default:
@@ -291,20 +339,18 @@ function setupFetch() {
     }
 }
 
-(async () => {
-    await loadScript("/baremux/index.js");
-    if (uvEnabled) {
-        await loadScript("/uv/uv.bundle.js");
-        await loadScript("/uv/uv.config.js");
-    }
-    if (scramjetEnabled) {
-        await loadScript("/scramjet/scramjet.codecs.js");
-        await loadScript("/scramjet/scramjet.config.js");
-    }
-    window.chemical.connection = new window.BareMux.BareMuxConnection("/baremux/worker.js");
-    await window.chemical.setTransport();
-    setupFetch();
-    await registerSW();
-    window.chemical.loaded = true;
-    window.dispatchEvent(new Event("chemicalLoaded"));
-})();
+await loadScript("/baremux/index.js");
+if (uvEnabled) {
+    await loadScript("/uv/uv.bundle.js");
+    await loadScript("/uv/uv.config.js");
+}
+if (scramjetEnabled) {
+    await loadScript("/scramjet/scramjet.codecs.js");
+    await loadScript("/scramjet/scramjet.config.js");
+}
+window.chemical.connection = new window.BareMux.BareMuxConnection("/baremux/worker.js");
+await window.chemical.setTransport();
+setupFetch();
+await registerSW();
+window.chemical.loaded = true;
+window.dispatchEvent(new Event("chemicalLoaded"));