@lukaskj/xmonkey 2.0.1 → 2.0.2

package/dist/build.js

@@ -0,0 +1,8 @@
+import { buildXmonkeyScript } from "./esbuild/build.js";
+const entryFile = process.argv[2];
+if (!entryFile) {
+    console.error(`No entryfile specified. Try adding the script to build in the argument.`);
+    console.error(`Example: npm run build src/example-script.ts`);
+    process.exit(1);
+}
+buildXmonkeyScript(entryFile);

package/dist/{cjs/decorators → decorators}/console-script.decorator.d.ts

@@ -1,3 +1,3 @@
-import { IConsoleScript } from "../interfaces";
+import { IConsoleScript } from "../interfaces/console-script.interface.js";
 import { ClassConstructor, ScriptInfo } from "../types";
 export declare function ConsoleScript<T extends IConsoleScript>(_metadata: ScriptInfo): (target: ClassConstructor<T>) => void;

package/dist/{esm/decorators → decorators}/console-script.decorator.js

@@ -3,7 +3,7 @@ export function ConsoleScript(_metadata) {
         if (!target) {
             throw new Error("Script not defined.");
         }
-        var scriptObject = new target();
+        const scriptObject = new target();
         scriptObject.execute();
     };
 }

package/dist/{cjs/decorators → decorators}/ui-script.decorator.d.ts

@@ -1,4 +1,4 @@
-import { IUiScript } from "../interfaces";
+import { IUiScript } from "../interfaces/ui-script.interface.js";
 import { ClassConstructor, ScriptInfo } from "../types";
-import "../ui/styles/base.scss";
+import "../styles/base.scss";
 export declare function UiScript<T extends IUiScript>(_metadata: ScriptInfo): (_target: ClassConstructor<T>) => void;

package/dist/decorators/ui-script.decorator.js

@@ -0,0 +1,20 @@
+import { h, render } from "preact";
+import { XMonkeyWindowComponent } from "../x-monkey-window-component.js";
+import "../styles/base.scss";
+export function UiScript(_metadata) {
+    return function (_target) {
+        const scriptObject = new _target();
+        const rootComponent = xMonkeyWrapperElement();
+        render(h(XMonkeyWindowComponent, { title: scriptObject.title ?? "" }, scriptObject.render()), rootComponent);
+    };
+}
+function xMonkeyWrapperElement() {
+    const ID = "__xmwr";
+    let div = document.getElementById(ID);
+    if (div)
+        return div;
+    div = document.createElement("div");
+    div.id = ID;
+    document.body.appendChild(div);
+    return div;
+}

package/dist/esbuild/build.js

@@ -0,0 +1,26 @@
+import * as esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import { xMonkeyStripMetadataPlugin } from "./plugins/xmonkey-strip-metadata-plugin.js";
+import { xMonkeyStylesPlugin } from "./plugins/xmonkey-styles-plugin.js";
+export async function buildXmonkeyScript(scriptBasePath) {
+    const entryFile = scriptBasePath;
+    console.info(`Building file: '${entryFile}'`);
+    await esbuild.build({
+        entryPoints: [entryFile],
+        outfile: "dist/index.js",
+        bundle: true,
+        treeShaking: true,
+        minify: process.env.DEBUG ? false : true,
+        platform: "browser",
+        format: "iife",
+        sourcemap: false,
+        keepNames: true,
+        logLevel: "info",
+        metafile: true,
+        plugins: [
+            xMonkeyStripMetadataPlugin(),
+            sassPlugin({ style: "compressed" }),
+            xMonkeyStylesPlugin(),
+        ],
+    });
+}

package/dist/esbuild/plugins/xmonkey-strip-metadata-plugin.js

@@ -0,0 +1,77 @@
+import { readFile, writeFile } from "fs/promises";
+export function xMonkeyStripMetadataPlugin() {
+    return {
+        name: "xmonkey-strip-metadata-plugin",
+        setup(build) {
+            let foundMetadata = false;
+            let metadataContent = "";
+            build.onLoad({ filter: /.(ts|tsx)/, namespace: "file" }, async (args) => {
+                if (foundMetadata)
+                    return;
+                const source = await readFile(args.path, "utf8");
+                const scriptMetadataIndex = source.match(/@(ConsoleScript|UiScript)\(/)?.index;
+                if (!scriptMetadataIndex || scriptMetadataIndex < 0)
+                    return;
+                foundMetadata = true;
+                const regex = /\@(ConsoleScript|UiScript)\([^\)]*\)(\.[^\)]*\))?/gi;
+                const metadataDecoratorMatcher = source.match(regex);
+                if (metadataDecoratorMatcher) {
+                    metadataContent = metadataDecoratorMatcher.at(0);
+                    const startJsonMetadataIndex = metadataContent.indexOf("{");
+                    const endJsonMetadataIndex = metadataContent.lastIndexOf("}");
+                    const metadataJsonString = metadataContent.substring(startJsonMetadataIndex, endJsonMetadataIndex + 1);
+                    const contents = source.replace(metadataJsonString, "");
+                    const extension = args.path.split(".").pop();
+                    const loader = extension === "tsx" ? "tsx" : "ts";
+                    return { contents, loader };
+                }
+                return;
+            });
+            build.onEnd(async (result) => {
+                if (!build.initialOptions?.outfile || !build.initialOptions?.bundle) {
+                    console.error("Wrong build configuration. Options 'bundle' must be enabled and 'outfile' must be set.");
+                    return;
+                }
+                if (!foundMetadata) {
+                    console.error("ScriptMetadata decorator not found.");
+                    return;
+                }
+                if (result.errors.length) {
+                    console.error("Error building. Script Metadata cannot be added to final script.");
+                    return;
+                }
+                const fileContents = await readFile(build.initialOptions.outfile);
+                const scriptMetadataString = getScriptMetadataString(metadataContent);
+                await writeFile(build.initialOptions.outfile, `${scriptMetadataString}\n\n${fileContents.toString()}`);
+            });
+        },
+    };
+}
+function getScriptMetadataString(scriptMetadataFunctionCallString) {
+    scriptMetadataFunctionCallString = scriptMetadataFunctionCallString.trim();
+    const startJsonMetadataIndex = scriptMetadataFunctionCallString.indexOf("{");
+    const endJsonMetadataIndex = scriptMetadataFunctionCallString.lastIndexOf("}");
+    if (startJsonMetadataIndex < 0 || endJsonMetadataIndex < 0) {
+        return "";
+    }
+    const metadataObject = JSON.parse(scriptMetadataFunctionCallString
+        .substring(startJsonMetadataIndex, endJsonMetadataIndex + 1)
+        .replaceAll("\n", "")
+        .replaceAll(",}", "}"));
+    const tag = "// ==UserScript==";
+    const tagEnd = "// ==/UserScript==";
+    const headersArr = [];
+    const spaces = 13;
+    for (const key in metadataObject) {
+        if (Array.isArray(metadataObject[key])) {
+            metadataObject[key].forEach((item) => {
+                headersArr.push(`${key.padEnd(spaces, " ")}${item}`);
+            });
+        }
+        else {
+            headersArr.push(`${key.padEnd(spaces, " ")}${metadataObject[key]}`);
+        }
+    }
+    const headers = headersArr.map((h) => `// ${h}`).join("\n");
+    return `${tag}\n${headers}\n${tagEnd}`;
+}

package/dist/esbuild/plugins/xmonkey-styles-plugin.js

@@ -0,0 +1,34 @@
+import { appendFile, readFile } from "fs/promises";
+export function xMonkeyStylesPlugin() {
+    return {
+        name: "xmonkey-styles-plugin",
+        setup(build) {
+            build.onEnd(async (result) => {
+                if (!build.initialOptions?.outfile || !build.initialOptions?.bundle) {
+                    console.error("Wrong build configuration. Options 'bundle' must be enabled and 'outfile' must be set.");
+                    return;
+                }
+                if (!result.metafile) {
+                    console.warn("ESBuild metafile not enabled. Style bundle skipped.");
+                    return;
+                }
+                const outputs = result.metafile.outputs;
+                let cssFilePath = "";
+                for (const file in outputs) {
+                    const ext = file.split(".").pop();
+                    if (ext === "css") {
+                        cssFilePath = file;
+                        break;
+                    }
+                }
+                if (!cssFilePath.length) {
+                    console.warn("CSS output not generated. Style bundle skipped.");
+                    return;
+                }
+                const jsOutFile = build.initialOptions.outfile;
+                const cssContents = (await readFile(cssFilePath)).toString();
+                appendFile(jsOutFile, `\nGM.addStyle("\\\n${cssContents.trim()}\\\n");`);
+            });
+        },
+    };
+}

package/dist/{cjs/example-scripts → example-scripts}/example-console-script.d.ts

@@ -1,4 +1,4 @@
-import { IConsoleScript } from "../interfaces";
+import { IConsoleScript } from "../interfaces/console-script.interface.js";
 export declare class ExampleConsoleScript implements IConsoleScript {
     execute(): Promise<void>;
 }

package/dist/example-scripts/example-console-script.js

@@ -0,0 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ConsoleScript } from "../decorators/console-script.decorator.js";
+import { sleep } from "../utils/sleep.js";
+let ExampleConsoleScript = class ExampleConsoleScript {
+    async execute() {
+        for (let i = 0; i < 50; i++) {
+            console.log("Executing script...", i + 1, location.href);
+            await sleep(20);
+        }
+    }
+};
+ExampleConsoleScript = __decorate([
+    ConsoleScript({
+        "@name": "Example Console Script",
+        "@namespace": "console-scripts",
+        "@match": "https://en.wikipedia.org/*",
+        "@version": "1.0",
+        "@author": "-",
+        "@description": "Example Console Script Description",
+        "@grant": ["GM.addStyle"],
+    })
+], ExampleConsoleScript);
+export { ExampleConsoleScript };

package/dist/{cjs/example-scripts → example-scripts}/example-ui-script.d.ts

@@ -1,4 +1,4 @@
-import { IUiScript } from "../interfaces";
+import { IUiScript } from "../interfaces/ui-script.interface.js";
 import "./example-scss.scss";
 export declare class ExampleUiScript implements IUiScript {
     title: string;

package/dist/{esm/example-scripts → example-scripts}/example-ui-script.js

@@ -5,33 +5,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { UiScript } from "../decorators/ui-script.decorator";
+import { UiScript } from "../decorators/ui-script.decorator.js";
 import { useState } from "preact/hooks";
 import "./example-scss.scss";
-var ExampleUiScript = (function () {
-    function ExampleUiScript() {
-        this.title = "Example UI Script";
-    }
-    ExampleUiScript.prototype.render = function () {
+let ExampleUiScript = class ExampleUiScript {
+    title = "Example UI Script";
+    render() {
         return _jsx(JsxUiExample, {});
-    };
-    ExampleUiScript = __decorate([
-        UiScript({
-            "@name": "Example Console Script",
-            "@namespace": "console-scripts",
-            "@match": "https://en.wikipedia.org/*",
-            "@version": "1.0",
-            "@author": "-",
-            "@description": "Example Console Script Description",
-            "@grant": ["GM.addStyle"],
-        })
-    ], ExampleUiScript);
-    return ExampleUiScript;
-}());
+    }
+};
+ExampleUiScript = __decorate([
+    UiScript({
+        "@name": "Example Console Script",
+        "@namespace": "console-scripts",
+        "@match": "https://en.wikipedia.org/*",
+        "@version": "1.0",
+        "@author": "-",
+        "@description": "Example Console Script Description",
+        "@grant": ["GM.addStyle"],
+    })
+], ExampleUiScript);
 export { ExampleUiScript };
 function JsxUiExample() {
-    var _a = useState(0), count = _a[0], setCount = _a[1];
-    var increment = function () { return setCount(count + 1); };
-    var decrement = function () { return setCount(function (currentCount) { return currentCount - 1; }); };
+    const [count, setCount] = useState(0);
+    const increment = () => setCount(count + 1);
+    const decrement = () => setCount((currentCount) => currentCount - 1);
     return (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Count: ", count] }), _jsxs("div", { class: "w-100 d--f jc--c", children: [_jsx("button", { class: "btn small primary", onClick: increment, children: "Increment" }), _jsx("button", { class: "btn small primary", onClick: decrement, children: "Decrement" })] })] }));
 }

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./decorators/console-script.decorator.js";
+export * from "./decorators/ui-script.decorator.js";
+export * from "./interfaces/console-script.interface.js";
+export * from "./interfaces/ui-script.interface.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./decorators/console-script.decorator.js";
+export * from "./decorators/ui-script.decorator.js";
+export * from "./interfaces/console-script.interface.js";
+export * from "./interfaces/ui-script.interface.js";

package/dist/interfaces/console-script.interface.js

@@ -0,0 +1,3 @@
+class CScript {
+}
+export {};

package/dist/styles/_colors.scss

@@ -0,0 +1,13 @@
+$gray: #6c757d;
+$black: #2f2f2f;
+$white: #f0f0f0;
+
+$primary: #007bff;
+$secondary: darken($primary, 10%);
+$warning: #ffc107;
+$error: #dc3545;
+$success: #28a745;
+$info: #17a2b8;
+
+
+$bg: #404040;

package/dist/styles/_variables.scss

@@ -0,0 +1,9 @@
+$xmonkey-wrapper: "__xmwr";
+$xmonkey-container: "xmwr_c";
+$xmonkey-header: "xmwr-h";
+
+
+$font-family: Verdana;
+$font: $font-family;
+
+$border-radius: 7px;

package/dist/styles/base.scss

@@ -0,0 +1,4 @@
+@use "variables";
+@use "./xmonkey-wrapper.scss";
+@use "./utils.css";
+@use "lit"

package/dist/styles/lit/_base.scss

@@ -0,0 +1,173 @@
+@use "../variables" as vars;
+@use "../colors";
+/*
+* Lit v0.1
+* Primary Color set to: #FA0
+* Font set to: Nunito
+*/
+
+$input-padding: 3px;
+
+##{vars.$xmonkey-wrapper} {
+  font-family: vars.$font-family;
+  * {
+    box-sizing: border-box;
+    font-size: 12px;
+    font-family: vars.$font-family;
+    margin: 2.5px 0;
+  }
+  pre {
+    overflow: auto;
+  }
+
+  .col,
+  .row {
+    padding: 0 3px;
+  }
+  .col {
+    flex-direction: column;
+  }
+
+  .row {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .w-100,
+  .row {
+    width: 100%;
+  }
+
+  .card:focus,
+  .xcard:focus,
+  hr {
+    outline: 0;
+    border: solid colors.$primary;
+  }
+
+  .card,
+  .xcard,
+  pre {
+    padding: $input-padding;
+    border: solid colors.$white;
+  }
+
+  a:hover,
+  .btn:hover {
+    opacity: 0.8;
+  }
+
+  .c {
+    max-width: 60em;
+    padding: $input-padding;
+    margin: auto;
+    font: 1em/1.6 vars.$font;
+  }
+
+  h6 {
+    font: 100 1em vars.$font;
+  }
+
+  h5 {
+    font: 100 1.2em vars.$font;
+  }
+
+  h3 {
+    font: 100 2em vars.$font;
+  }
+
+  h4 {
+    font: 100 1.5em vars.$font;
+  }
+
+  h2 {
+    font: 100 2.2em vars.$font;
+  }
+
+  h1 {
+    font: 100 2.5em vars.$font;
+  }
+
+  a {
+    color: colors.$primary;
+    text-decoration: none;
+  }
+
+  td,
+  th {
+    padding: $input-padding;
+    text-align: left;
+    border-bottom: solid colors.$white;
+  }
+
+  .btn {
+    padding: $input-padding;
+    text-transform: uppercase;
+    background: colors.$white;
+    color: colors.$black;
+    border: solid colors.$white;
+    font: 1em vars.$font;
+
+    &.primary {
+      color: colors.$white;
+      background: colors.$primary;
+      border: solid colors.$primary;
+    }
+
+    &.secondary {
+      color: colors.$white;
+      background: colors.$secondary;
+      border: solid colors.$secondary;
+    }
+
+    &.success {
+      color: colors.$white;
+      background: colors.$success;
+      border: solid colors.$success;
+    }
+
+    &.warning {
+      color: colors.$white;
+      background: colors.$warning;
+      border: solid colors.$warning;
+    }
+
+    &.error {
+      color: colors.$white;
+      background: colors.$error;
+      border: solid colors.$error;
+    }
+
+    &.info {
+      color: colors.$white;
+      background: colors.$info;
+      border: solid colors.$info;
+    }
+  }
+
+  @media (min-width: 35em) {
+    .\31 {
+      width: 5%;
+    }
+
+    .\33 {
+      width: 22%;
+    }
+
+    .\34 {
+      width: 30%;
+    }
+
+    .\35 {
+      width: 40%;
+    }
+
+    .\32 {
+      width: 15%;
+    }
+
+    .\36 {
+      width: 50%;
+    }
+  }
+}