querysub 0.154.0 → 0.155.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.154.0",
+  "version": "0.155.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -24,7 +24,7 @@
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
     "preact": "^10.11.3",
-    "socket-function": "^0.87.0",
+    "socket-function": "^0.88.0",
     "terser": "^5.31.0",
     "typesafecss": "^0.6.3",
     "yaml": "^2.5.0",

package/src/4-deploy/deployMain.ts

@@ -137,11 +137,13 @@ export async function deployMain() {
         debugName: "setLiveDeployedHash",
         inlineNestedWatchers: true,
         watchFunction: () => {
-            if (!yargObj.deployonlycode) {
+            if (yargObj.deployonlycode) {
                 void setLiveDeployedHash({ hash: gitRef, refreshThresholdTime, });
-            }
-            if (!yargObj.deployonlyui) {
+            } else if (yargObj.deployonlyui) {
+                void replaceFunctions({ domainName, functions: currentFunctions, });
+            } else {
                 void replaceFunctions({ domainName, functions: currentFunctions, });
+                void setLiveDeployedHash({ hash: gitRef, refreshThresholdTime, });
             }
         },
     });

package/src/4-dom/qreact.tsx

@@ -79,6 +79,7 @@ export namespace qreact {
     export type ComponentChildren = preact.ComponentChildren;
     export type VDom = preact.ComponentChildren;
     export type Component = InstanceType<typeof Component>;
+    export type ComponentClass = preact.ComponentClass;
     export namespace JSX {
         export type IntrinsicElements = {
             [key in keyof preact.JSX.IntrinsicElements]: (

package/src/diagnostics/logs/injectFileLocationToConsole.ts

@@ -41,7 +41,8 @@ if (isNode()) {
                 .replaceAll(`  logDisk(`, ` logDisk(console.__context, { __LINE__: ${index} },`)
                 ;
         }).join("\n");
-        return `var console = (${shimConsole.toString()})();\n${contents}`;
+        // IMPORTANT! No newlines, so the line numbers match up with the original source.
+        return `var console = (${shimConsole.toString().replaceAll("\n", " ")})(); ${contents}`;
     });
 
     // We want to call shimConsoleLogs early. Before we call it, our additional context isn't

package/src/library-components/URLParam.ts

@@ -63,14 +63,19 @@ export function createURLSync<T>(urlKey: string, defaultValue: T, config?: {
     if (config?.storage === "localStorage") {
         localStorageKeys.add(urlKey);
     }
-    setImmediate(() => {
+    function setDefaults() {
         Querysub.localCommit(() => {
             data().defaults[urlKey] = defaultValue;
             if (!(urlKey in loadSearchCache)) {
                 data().params[urlKey] = deepCloneJSON(defaultValue);
             }
         });
-    });
+    }
+    if (!Querysub) {
+        setImmediate(setDefaults);
+    } else {
+        setDefaults();
+    }
     function deleteKeys(obj: any) {
         if (!canHaveChildren(obj)) return;
         for (let key in obj) {

package/src/library-components/loadingIndicator.tsx

@@ -0,0 +1,93 @@
+import { qreact } from "../4-dom/qreact";
+import { Querysub } from "../4-querysub/Querysub";
+import { css } from "typesafecss";
+import { formatNumber, formatTime } from "socket-function/src/formatting/format";
+
+export class UnsyncedIndicator extends qreact.Component {
+    lastSynced = Date.now();
+    render() {
+        let unsynced = Querysub.watchUnsyncedComponents();
+        let unsyncedCount = unsynced.size;
+        if (unsyncedCount === 0) {
+            this.lastSynced = Date.now();
+            return undefined;
+        }
+        let timeSinceLastSync = Date.now() - this.lastSynced;
+        if (timeSinceLastSync < 1500) {
+            return undefined;
+        }
+        if (timeSinceLastSync > 30 * 1000) {
+            return (
+                <div
+                    title={`Server has not responded for ${formatTime(timeSinceLastSync)}`}
+                    className={
+                        css.vbox(10).pad(20)
+                            .hsla(0, 0, 0, 0.8)
+                            .position("fixed")
+                            .bottom(10)
+                            .right(10)
+                            .zIndex(1000)
+                    }
+                >
+                    <div className={css.vbox(10).maxWidth(250)}>
+                        <h3 className={css.margin(0)}>Server Not Responding</h3>
+                        <div>The server has not responded for {formatTime(timeSinceLastSync)}. It is recommended to refresh the page to try to resolve this issue.</div>
+                    </div>
+                    <div className={css.hbox(10).justifyContent("flex-end")}>
+                        <button
+                            className={css.pad(8, 16).hsl(200, 50, 50).color("white").pointer}
+                            onClick={() => {
+                                window.location.reload();
+                            }}
+                        >
+                            Refresh Now
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+        let magnitude = Math.ceil(Math.log2(unsyncedCount + 1) / Math.log2(6));
+        return <div
+            class={
+                css
+                    .position("fixed").bottom(0).right(0)
+                    .background("hsl(0, 0%, 10%)").color("hsl(0, 0%, 80%)")
+                    .fontSize(12).zIndex(1000)
+                    .borderRadius(100)
+            }
+            title={`Loading data for ${formatNumber(unsyncedCount)} components`}
+        >
+            <svg
+                width="60px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+
+            >
+                {
+                    [
+                        // The smaller they are, the faster they should go
+                        // Large should be more blue, smaller more red
+                        ["hsl(-20, 75%, 75%)", "1.5", "1s", "10"],
+                        ["hsl(-5, 75%, 75%)", "2", "1.5s", "15"],
+                        ["hsl(-35, 75%, 75%)", "1", "0.5s", "5"],
+                        ["hsl(10, 75%, 75%)", "2.5", "2s", "20"],
+                        ["hsl(25, 75%, 75%)", "3", "2.5s", "25"],
+                        ["hsl(70, 75%, 75%)", "3.5", "3s", "30"],
+                        ["hsl(115, 75%, 75%)", "4", "3.5s", "35"],
+                        ["hsl(160, 75%, 75%)", "4.5", "4s", "40"],
+                        ["hsl(205, 75%, 75%)", "5", "4.5s", "45"],
+                        ["hsl(230, 75%, 75%)", "5.5", "5s", "50"],
+                    ].slice(0, magnitude).map(([color, r, dur, o]) =>
+                        <circle cx="50" cy={50 + Number(o)} r={Number(r) * 2} fill={color}>
+                            <animateTransform
+                                attributeName="transform"
+                                type="rotate"
+                                from={`0 50 50`} to={`360 50 50`}
+                                dur={dur} repeatCount="indefinite"
+                            />
+                        </circle>
+                    )
+                }
+            </svg>
+
+        </div>;
+    }
+}

package/src/user-implementation/LoginPage.tsx

@@ -43,7 +43,7 @@ export class LoginPage extends qreact.Component {
             </>;
         }
         return (
-            <div class={css.vbox(60).fillWidth.center.fontSize(20)}>
+            <div class={css.vbox(60).fillBoth.center.fontSize(20)}>
                 <div class={css.vbox(10)}>
                     {contents}
                 </div>

package/src/user-implementation/UserPage.tsx

@@ -239,7 +239,7 @@ export class UserPage extends qreact.Component {
                         {isSuper &&
                             <div class={css.hbox(10).padv(6)}>
                                 <InputLabel
-                                    label="Adds Remaining"
+                                    label="Invites Remaining"
                                     number
                                     value={userObj.invitesRemaining}
                                     onChange={e => {

package/src/user-implementation/addSuperUser.ts

@@ -1,14 +1,20 @@
 import { Querysub } from "../4-querysub/Querysub";
 import { scriptCreateUser } from "./userData";
 import { pathValueCommitter } from "../0-path-value-core/PathValueCommitter";
+import yargs from "yargs";
+import { isNodeTrue } from "socket-function/src/misc";
+
+let yargObj = isNodeTrue() && yargs(process.argv)
+    .option("email", { type: "string", desc: `The email of the user to add as a superuser.` })
+    .argv || {}
+    ;
 
 async function main() {
-    const howToCall = ` Call with yarn addsuperuser <email>`;
-    const args = process.argv.slice(2).filter(x => !x.startsWith("--"));
-    const userId = args[0];
-    console.log(process.argv);
-    if (!userId) throw new Error("No userId provided." + howToCall);
-    if (!userId.includes("@")) throw new Error(`Invalid email ${userId}.` + howToCall);
+    const howToCall = ` Call with yarn addsuperuser --email <email>`;
+    const email = yargObj.email;
+    if (!email) throw new Error("No email provided." + howToCall);
+    if (!email.includes("@")) throw new Error(`Invalid email ${email}.` + howToCall);
+    const userId = email;
 
     await Querysub.hostService("addSuperUser");
 

package/src/user-implementation/setEmailKey.ts

@@ -1,15 +1,20 @@
 import { Querysub } from "../4-querysub/Querysub";
 import { pathValueCommitter } from "../0-path-value-core/PathValueCommitter";
 import { scriptSetPostmarkAPIKey } from "./userData";
+import { isNodeTrue } from "socket-function/src/misc";
+import yargs from "yargs";
+
+let yargObj = isNodeTrue() && yargs(process.argv)
+    .option("key", { type: "string", desc: `The key to set for the email.` })
+    .argv || {}
+    ;
 
 async function main() {
-    const howToCall = ` Call with yarn setemailkey <key>`;
-    const args = process.argv.slice(2).filter(x => !x.startsWith("--"));
-    const key = args[0];
-    console.log(process.argv);
+    const howToCall = ` Call with yarn setemailkey --key <key>`;
+    const key = yargObj.key;
     if (!key) throw new Error("No key provided." + howToCall);
 
-    await Querysub.hostService("setSendgridKey");
+    await Querysub.hostService("setEmailKey");
 
     await Querysub.commitSynced(() => {
         scriptSetPostmarkAPIKey({ apiKey: key });

package/src/user-implementation/userData.ts

@@ -651,6 +651,8 @@ function sendLoginEmail(config: {
             await sendEmail_postmark({
                 apiKey,
                 to: email,
+                // TODO: Allow configuring this (defaulting to getDomain() if unconfigured). For now we hardcode it, because it takes
+                //  a while to verify a new postmark email, and we don't even know what final domain we will be using.
                 from: "login@querysub.com",
                 subject,
                 contents,