@lukaskj/xmonkey 2.0.1 → 2.0.3

package/dist/styles/lit/_util.scss

@@ -0,0 +1,340 @@
+@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

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

package/dist/styles/utils.css

@@ -0,0 +1,70 @@
+/* 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;}

package/dist/styles/xmonkey-wrapper.scss

@@ -0,0 +1,59 @@
+@use "variables" as vars;
+@use "colors";
+
+##{vars.$xmonkey-wrapper} {
+  width: 250px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: rgba(colors.$bg, 0.9);
+  border-radius: vars.$border-radius;
+  z-index: 999999;
+  overflow: hidden;
+
+  * {
+    color: colors.$white;
+  }
+
+  input,
+  select,
+  option,
+  textarea {
+    color: colors.$bg;
+    background-color: colors.$white !important;
+  }
+
+  input[type="checkbox"] {
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+
+  .#{vars.$xmonkey-container} {
+    max-height: 1000px;
+    transition: max-height 70ms;
+    &:has(.b-collapsed) {
+      max-height: 15px;
+    }
+    &:has(.#{vars.$xmonkey-header}) {
+      margin-top: 0;
+    }
+  }
+
+  .#{vars.$xmonkey-header} {
+    height: 15px;
+    line-height: 15px !important;
+    // border-top-left-radius: vars.$border-radius;
+    // border-top-right-radius: vars.$border-radius;
+    .xmwr-x {
+      font-family: monospace !important;
+      cursor: pointer;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      font-weight: bold;
+      background-color: colors.$black;
+      padding: 0 5px;
+      height: 15px;
+    }
+  }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{esm/utils → utils}/is-null-or-undefined.js

@@ -1,4 +1,4 @@
-export var isNullOrUndefined = function (value) { return value === null || value === undefined; };
+export const isNullOrUndefined = (value) => value === null || value === undefined;
 export function isNullOrEmptyOrUndefined(value) {
     return isNullOrUndefined(value) || value === "" || value.toString().trim() === "";
 }

package/dist/utils/sleep.js

@@ -0,0 +1,3 @@
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/dist/{esm/ui/x-monkey-window-component.js → x-monkey-window-component.js}

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
 export function XMonkeyWindowComponent(props) {
-    var _a = useState(false), minimized = _a[0], setMinimized = _a[1];
+    const [minimized, setMinimized] = useState(false);
     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(_a) {
-    var minimized = _a.minimized, toggleMinimize = _a.toggleMinimize;
-    var minimizeChar = minimized ? "+" : "-";
-    return (_jsx("div", { className: "xmwr-x m0", onClick: function () { return toggleMinimize(); }, children: minimizeChar }));
+function MinimizeButton({ minimized, toggleMinimize }) {
+    const minimizeChar = minimized ? "+" : "-";
+    return (_jsx("div", { className: "xmwr-x m0", onClick: () => toggleMinimize(), children: minimizeChar }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukaskj/xmonkey",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "author": "lukaskj",
   "license": "ISC",
   "scripts": {
@@ -8,12 +8,13 @@
     "prebuild": "pnpm run clean",
     "prepublish": "pnpm run build",
     "build:old": "node esbuild/build.mjs",
-    "build": "pnpm build:esm && pnpm build:cjs",
-    "build:esm": "tsc -p tsconfig.build.json --outDir dist/esm",
+    "build": "pnpm build:esm && pnpm copy-styles",
+    "build:esm": "tsc -p tsconfig.build.json",
     "build:cjs": "tsc -p tsconfig.build.json --module CommonJS --outDir dist/cjs",
     "build:prod": "pnpm run lint && pnpm run build",
     "build:dev": "DEBUG=1 node esbuild/build.mjs",
     "build:debug": "DEBUG=1 node esbuild/build.mjs",
+    "copy-styles": "cp -R src/styles/ dist/styles",
     "dev": "nodemon",
     "start": "tsx --watch ./src/index.ts",
     "format": "prettier --write src/",
@@ -25,11 +26,11 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "esbuild": "^0.20.1",
     "esbuild-sass-plugin": "^3.1.0",
-    "preact": "^10.19.6",
     "postcss": "^8.4.35",
     "postcss-modules": "^6.0.0",
-    "esbuild": "^0.20.1"
+    "preact": "^10.19.6"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
@@ -49,6 +50,7 @@
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.2",
+    "tslib": "^2.6.2",
     "tsx": "^4.7.1",
     "typescript": "^5.3.0"
   },
@@ -67,12 +69,12 @@
     "*.{js,mjs,ts,tsx,jsx}": "eslint --fix"
   },
   "exports": {
-    ".": "./dist/**/*",
+    ".": "./dist/index.js",
     "./decorators": "./dist/decorators/*",
     "./interfaces": "./dist/interfaces/*"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.js",
   "files": [
     "dist",
@@ -80,6 +82,6 @@
     "!node_modules"
   ],
   "bin": {
-    "xmonkey": "dist/cjs/index.js"
+    "xmonkey": "dist/build.js"
   }
 }

package/dist/cjs/decorators/console-script.decorator.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConsoleScript = void 0;
-function ConsoleScript(_metadata) {
-    return function (target) {
-        if (!target) {
-            throw new Error("Script not defined.");
-        }
-        var scriptObject = new target();
-        scriptObject.execute();
-    };
-}
-exports.ConsoleScript = ConsoleScript;

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UiScript = void 0;
-var preact_1 = require("preact");
-var x_monkey_window_component_1 = require("../ui/x-monkey-window-component");
-require("../ui/styles/base.scss");
-function UiScript(_metadata) {
-    return function (_target) {
-        var _a;
-        var scriptObject = new _target();
-        var rootComponent = xMonkeyWrapperElement();
-        (0, preact_1.render)((0, preact_1.h)(x_monkey_window_component_1.XMonkeyWindowComponent, { title: (_a = scriptObject.title) !== null && _a !== void 0 ? _a : "" }, scriptObject.render()), rootComponent);
-    };
-}
-exports.UiScript = UiScript;
-function xMonkeyWrapperElement() {
-    var ID = "__xmwr";
-    var div = document.getElementById(ID);
-    if (div)
-        return div;
-    div = document.createElement("div");
-    div.id = ID;
-    document.body.appendChild(div);
-    return div;
-}