@lukaskj/xmonkey 2.0.4 → 2.0.5

package/dist/decorators/ui-script.decorator.d.ts

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

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

@@ -1,6 +1,5 @@
 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();

package/dist/styles/_base.scss

@@ -0,0 +1,3 @@
+@use "variables";
+@use "utils";
+@use "xmonkey-wrapper";

package/dist/styles/_utils.scss

@@ -0,0 +1,74 @@
+/* https://gist.github.com/jonsuh/b2347347480105874cda110b2afc53f4 */
+/* Flexbox
+// ================================================== */
+
+@use "variables" as vars;
+##{vars.$xmonkey-wrapper} {
+  .d-f  { display: flex !important; flex-direction: column; }
+  .d-if { display: inline-flex !important; flex-direction: column; }
+
+  /* Flex direction */
+  .fd-r  { flex-direction: row; } /* Default */
+  .fd-rr { flex-direction: row-reverse; }
+  .fd-c  { flex-direction: column; }
+  .fd-cr { flex-direction: column-reverse; }
+
+
+  /* Flex wrap */
+  .fw-n  { flex-wrap: nowrap; } /* Default */
+  .fw-w  { flex-wrap: wrap; }
+  .fw-wr { flex-wrap: wrap-reverse; }
+
+
+  /* Justify content */
+  .jc-fe { justify-content: flex-end; }
+  .jc-fs { justify-content: flex-start; } /* Default */
+  .jc-c  { justify-content: center; }
+  .jc-sa { justify-content: space-around; }
+  .jc-sb { justify-content: space-between; }
+
+
+  /* Align items */
+  .ai-fs { align-items: flex-start; }
+  .ai-c  { align-items: center; }
+  .ai-fe { align-items: flex-end; }
+  .ai-s  { align-items: stretch; } /* Default */
+  .ai-b  { align-items: baseline; }
+
+
+  /* Flex grow */
+  .fg-0 { flex-grow: 0; } /* Default */
+  .fg-1 { flex-grow: 1; }
+
+
+  /* Flex shrink */
+  .fs-0 { flex-shrink: 0; }
+  .fs-1 { flex-shrink: 1; } /* Default */
+
+
+  /* Flex basis */
+  .fb-a { flex-basis: auto; } /* Default */
+  .fb-0 { flex-basis: 0; }
+
+
+  /* Align self */
+  .as-a  { align-self: auto; } /* Default */
+  .as-fs { align-self: flex-start; }
+  .as-c  { align-self: center; }
+  .as-fe { align-self: flex-end; }
+  .as-s  { align-self: stretch; }
+  .as-b  { align-self: baseline }
+
+
+  .noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -khtml-user-select: none; /* Konqueror HTML */
+        -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
+
+  .hidden {display: none !important;}
+}

package/dist/styles/_variables.scss

@@ -1,6 +1,7 @@
 $xmonkey-wrapper: "__xmwr";
 $xmonkey-container: "xmwr_c";
 $xmonkey-header: "xmwr-h";
+$xmonkey-body: "xmwr-b";
 
 
 $font-family: Verdana;

package/dist/styles/{xmonkey-wrapper.scss → _xmonkey-wrapper.scss}

@@ -2,17 +2,27 @@
 @use "colors";
 
 ##{vars.$xmonkey-wrapper} {
-  width: 250px;
+  width: 200px;
   position: absolute;
   top: 10px;
   left: 10px;
-  background-color: rgba(colors.$bg, 0.9);
+  background-color: rgba(colors.$bg, 0.99);
   border-radius: vars.$border-radius;
   z-index: 999999;
   overflow: hidden;
 
+  font-family: vars.$font-family;
+  font-size: 12px;
   * {
+    font-size: 12px;
+    font-family: vars.$font-family;
     color: colors.$white;
+    button {
+      color: colors.$black;
+    }
+  }
+  pre {
+    overflow: auto;
   }
 
   input,
@@ -39,9 +49,15 @@
     }
   }
 
+  .#{vars.$xmonkey-body} {
+    padding: 3px;
+  }
+
   .#{vars.$xmonkey-header} {
     height: 15px;
     line-height: 15px !important;
+    background-color: colors.$primary;
+    width: 100%;
     // border-top-left-radius: vars.$border-radius;
     // border-top-right-radius: vars.$border-radius;
     .xmwr-x {

package/dist/x-monkey-window-component.js

@@ -5,7 +5,7 @@ export function XMonkeyWindowComponent(props) {
     function toggleMinimize() {
         setMinimized(!minimized);
     }
-    return (_jsxs("div", { className: "xmwr_c d--f fd--c ai--c jc--sb", children: [_jsxs("div", { className: "xmwr-h w-100 m0 d--f fd--r jc--c bg-primary noselect", children: [_jsx("div", { className: "xmwr-title m0", children: props.title }), _jsx(MinimizeButton, { toggleMinimize: toggleMinimize, minimized: minimized })] }), _jsx("div", { className: `xmwr-b w-100 d--f jc--c ` + (minimized ? "b-collapsed" : ""), children: props.children })] }));
+    return (_jsxs("div", { className: "xmwr_c d-f fd-c ai-c jc-sb", children: [_jsxs("div", { className: "xmwr-h w-100 m0 d-f fd-r jc-c bg-primary noselect", children: [_jsx("div", { className: "xmwr-title m0", children: props.title }), _jsx(MinimizeButton, { toggleMinimize: toggleMinimize, minimized: minimized })] }), _jsx("div", { className: `xmwr-b w-100 d-f jc-c ` + (minimized ? "b-collapsed" : ""), children: props.children })] }));
 }
 function MinimizeButton({ minimized, toggleMinimize }) {
     const minimizeChar = minimized ? "+" : "-";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukaskj/xmonkey",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "author": "lukaskj",
   "license": "ISC",
   "scripts": {
@@ -17,7 +17,7 @@
     "build:debug": "DEBUG=1 node esbuild/build.mjs",
     "copy-styles": "cp -R src/styles/ dist/styles",
     "dev": "nodemon",
-    "start": "tsx --watch ./src/index.ts",
+    "start": "tsx ./src/build.ts",
     "format": "prettier --write src/",
     "lint": "tsc --noEmit && eslint \"{src,apps,libs,test}/**/*.{ts,tsx}\" --fix",
     "test": "jest --config ./jest.config.js --maxWorkers=1",

package/dist/example-scripts/example-console-script.d.ts

@@ -1,4 +0,0 @@
-import { IConsoleScript } from "@lukaskj/xmonkey";
-export declare class ExampleConsoleScript implements IConsoleScript {
-    execute(): Promise<void>;
-}

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

@@ -1,28 +0,0 @@
-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 { sleep } from "../utils/sleep.js";
-import { ConsoleScript } from "@lukaskj/xmonkey";
-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/example-scripts/example-ui-script.d.ts

@@ -1,6 +0,0 @@
-import { IUiScript } from "@lukaskj/xmonkey";
-import "@lukaskj/xmonkey/styles/base.scss";
-export declare class ExampleUiScript implements IUiScript {
-    title: string;
-    render(): import("preact").JSX.Element;
-}

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

@@ -1,34 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { UiScript } from "@lukaskj/xmonkey";
-import "@lukaskj/xmonkey/styles/base.scss";
-import { useState } from "preact/hooks";
-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);
-export { ExampleUiScript };
-function JsxUiExample() {
-    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/styles/base.scss

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

package/dist/styles/lit/_base.scss

@@ -1,173 +0,0 @@
-@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%;
-    }
-  }
-}

package/dist/styles/lit/_util.scss

@@ -1,340 +0,0 @@
-@use "../variables" as vars;
-@use "../colors";
-
-##{vars.$xmonkey-wrapper} {
-  /*Colors*/
-
-  .white {
-    color: #fff;
-  }
-  .bg-white {
-    background-color: #fff;
-  }
-  .b-white {
-    border-color: #fff;
-  }
-  .gray {
-    color: colors.$gray;
-  }
-  .bg-gray {
-    background-color: colors.$gray;
-  }
-  .b-gray {
-    border-color: colors.$gray;
-  }
-  .black {
-    color: #000;
-  }
-  .bg-black {
-    background-color: #000;
-  }
-  .b-black {
-    border-color: #000;
-  }
-  .accent {
-    color: colors.$secondary;
-  }
-  .bg-accent {
-    background-color: colors.$secondary;
-  }
-  .b-accent {
-    border-color: colors.$secondary;
-  }
-  .warning {
-    color: colors.$warning;
-  }
-  .bg-warning {
-    background-color: colors.$warning;
-  }
-  .b-warning {
-    border-color: colors.$warning;
-  }
-  .error {
-    color: colors.$error;
-  }
-  .bg-error {
-    background-color: colors.$error;
-  }
-  .b-error {
-    border-color: colors.$error;
-  }
-  .success {
-    color: colors.$success;
-  }
-  .bg-success {
-    background-color: colors.$success;
-  }
-  .b-success {
-    border-color: colors.$success;
-  }
-  .info {
-    color: colors.$info;
-  }
-  .bg-info {
-    background-color: colors.$info;
-  }
-  .b-info {
-    border-color: colors.$info;
-  }
-  .bg-primary {
-    background-color: colors.$primary;
-  }
-  .b-primary {
-    border-color: colors.$primary;
-  }
-
-  /*Margin+Padding*/
-
-  .m0 {
-    margin: 0;
-  }
-
-  .m1 {
-    margin: 0.5em;
-  }
-
-  .m2 {
-    margin: 1em;
-  }
-
-  .m3 {
-    margin: 2em;
-  }
-
-  .m4 {
-    margin: 4em;
-  }
-
-  .mt0 {
-    margin-top: 0;
-  }
-
-  .mt1 {
-    margin-top: 0.5em;
-  }
-
-  .mt2 {
-    margin-top: 1em;
-  }
-
-  .mt3 {
-    margin-top: 2em;
-  }
-
-  .mt4 {
-    margin-top: 4em;
-  }
-
-  .mr0 {
-    margin-right: 0;
-  }
-
-  .mr1 {
-    margin-right: 0.5em;
-  }
-
-  .mr2 {
-    margin-right: 1em;
-  }
-
-  .mr3 {
-    margin-right: 2em;
-  }
-
-  .mr4 {
-    margin-right: 4em;
-  }
-
-  .mb0 {
-    margin-bottom: 0;
-  }
-
-  .mb1 {
-    margin-bottom: 0.5em;
-  }
-
-  .mb2 {
-    margin-bottom: 1em;
-  }
-
-  .mb3 {
-    margin-bottom: 2em;
-  }
-
-  .mb4 {
-    margin-bottom: 4em;
-  }
-
-  .ml0 {
-    margin-left: 0;
-  }
-
-  .ml1 {
-    margin-left: 0.5em;
-  }
-
-  .ml2 {
-    margin-left: 1em;
-  }
-
-  .ml3 {
-    margin-left: 2em;
-  }
-
-  .ml4 {
-    margin-left: 4em;
-  }
-
-  .p0 {
-    padding: 0;
-  }
-
-  .p1 {
-    padding: 0.5em;
-  }
-
-  .p2 {
-    padding: 1em;
-  }
-
-  .p3 {
-    padding: 2em;
-  }
-
-  .p4 {
-    padding: 4em;
-  }
-
-  .pv0 {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .pv1 {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-  }
-
-  .pv2 {
-    padding-top: 1em;
-    padding-bottom: 1em;
-  }
-
-  .pv3 {
-    padding-top: 2em;
-    padding-bottom: 2em;
-  }
-
-  .pv4 {
-    padding-top: 4em;
-    padding-bottom: 4em;
-  }
-
-  .ph0 {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  .ph1 {
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-  }
-
-  .ph2 {
-    padding-right: 1em;
-    padding-left: 1em;
-  }
-
-  .ph3 {
-    padding-right: 2em;
-    padding-left: 2em;
-  }
-
-  .ph4 {
-    padding-right: 4em;
-    padding-left: 4em;
-  }
-
-  /*Misc Utilities*/
-  .gapless {
-    border-spacing: 0;
-  }
-  .vc {
-    position: relative;
-    top: 40%;
-    transform: perspective(1px) translateY(-45%);
-  }
-  .pill {
-    border-radius: 9999px;
-  }
-  .rounded {
-    border-radius: 4px;
-  }
-  .tc {
-    text-align: center;
-  }
-  .mega {
-    font-size: 3.5em;
-  }
-  .large {
-    font-size: 1.5em;
-  }
-  .small {
-    font-size: 0.8em;
-  }
-  .caps {
-    text-transform: uppercase;
-  }
-  .tracked {
-    letter-spacing: 0.1em;
-  }
-  .vh-100 {
-    height: 100vh;
-  }
-
-  .inline {
-    display: inline-block;
-  }
-  .bold {
-    font-weight: 700;
-  }
-  .normal {
-    font-weight: 400;
-  }
-  .light {
-    font-weight: 300;
-  }
-  .dim {
-    opacity: 1;
-    transition: opacity 0.15s ease-in;
-  }
-
-  .dim:hover,
-  .dim:focus {
-    opacity: 0.5;
-    transition: opacity 0.15s ease-in;
-  }
-  .ta-center {
-    text-align: center;
-  }
-  .ta-left {
-    text-align: left;
-  }
-  .ta-right {
-    text-align: right;
-  }
-
-  .w-10 {width: 10% !important;}
-  .w-20 {width: 20% !important;}
-  .w-30 {width: 30% !important;}
-  .w-40 {width: 40% !important;}
-  .w-48 {width: 48% !important;}
-  .w-50 {width: 50% !important;}
-  .w-60 {width: 60% !important;}
-  .w-70 {width: 70% !important;}
-  .w-80 {width: 80% !important;}
-  .w-90 {width: 90% !important;}
-  .w-100 {width: 100% !important;}
-  .fg-0 {flex-grow: 0!important;}
-  .fg-1 {flex-grow: 1!important;}
-}

package/dist/styles/lit/index.scss

@@ -1,2 +0,0 @@
-@use "base";
-@use "util";

package/dist/styles/utils.css

@@ -1,70 +0,0 @@
-/* https://gist.github.com/jonsuh/b2347347480105874cda110b2afc53f4 */
-/* Flexbox
-// ================================================== */
-.d--f  { display: flex !important; flex-direction: column; }
-.d--if { display: inline-flex !important; flex-direction: column; }
-
-/* Flex direction */
-.fd--r  { flex-direction: row; } /* Default */
-.fd--rr { flex-direction: row-reverse; }
-.fd--c  { flex-direction: column; }
-.fd--cr { flex-direction: column-reverse; }
-
-
-/* Flex wrap */
-.fw--n  { flex-wrap: nowrap; } /* Default */
-.fw--w  { flex-wrap: wrap; }
-.fw--wr { flex-wrap: wrap-reverse; }
-
-
-/* Justify content */
-.jc--fe { justify-content: flex-end; }
-.jc--fs { justify-content: flex-start; } /* Default */
-.jc--c  { justify-content: center; }
-.jc--sa { justify-content: space-around; }
-.jc--sb { justify-content: space-between; }
-
-
-/* Align items */
-.ai--fs { align-items: flex-start; }
-.ai--c  { align-items: center; }
-.ai--fe { align-items: flex-end; }
-.ai--s  { align-items: stretch; } /* Default */
-.ai--b  { align-items: baseline; }
-
-
-/* Flex grow */
-.fg--0 { flex-grow: 0; } /* Default */
-.fg--1 { flex-grow: 1; }
-
-
-/* Flex shrink */
-.fs--0 { flex-shrink: 0; }
-.fs--1 { flex-shrink: 1; } /* Default */
-
-
-/* Flex basis */
-.fb--a { flex-basis: auto; } /* Default */
-.fb--0 { flex-basis: 0; }
-
-
-/* Align self */
-.as--a  { align-self: auto; } /* Default */
-.as--fs { align-self: flex-start; }
-.as--c  { align-self: center; }
-.as--fe { align-self: flex-end; }
-.as--s  { align-self: stretch; }
-.as--b  { align-self: baseline }
-
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-}
-
-.hidden {display: none !important;}