☰

@suchipi/jsxdom

Create DOM elements with a createElement-like jsx function

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greatest.deepsurf.us/scripts/477758/1267093/%40suchipijsxdom.js 

  1. // ==UserScript==
  2. // @name         @suchipi/jsxdom
  3. // @version      0.4.1
  4. // @description  Create DOM elements with a createElement-like jsx function
  5. // @author       Lily Skye
  6. // @grant        none
  7. // @license      MIT
  8. // ==/UserScript==
  9. (function () {
  10.   "use strict";
  11.  
  12.   const ref = (...args) => {
  13.     return { current: args.length > 0 ? args[0] : null };
  14.   };
  15.   const nodeFactory = (type, props) => {
  16.     if (typeof type !== "string") {
  17.       return document.createDocumentFragment();
  18.     }
  19.     const otherProps = Object.assign({}, props);
  20.     {
  21.       delete otherProps.style;
  22.       delete otherProps.ref;
  23.       delete otherProps.namespaceURI;
  24.       delete otherProps.children;
  25.       delete otherProps.tagName;
  26.     }
  27.     let node;
  28.     if (props.namespaceURI) {
  29.       node = document.createElementNS(props.namespaceURI, type);
  30.     } else {
  31.       node = document.createElement(type);
  32.     }
  33.     if (props.style != null) {
  34.       Object.assign(node.style, props.style);
  35.     }
  36.     if (props.ref != null) {
  37.       if (typeof props.ref === "function") {
  38.         props.ref.call(null, node);
  39.       } else {
  40.         props.ref.current = node;
  41.       }
  42.     }
  43.     Object.assign(node, otherProps);
  44.     return node;
  45.   };
  46.   const jsx = (type, ...args) => {
  47.     let rawProps = null;
  48.     let children = null;
  49.     if (typeof args[0] === "object" && args[0] != null) {
  50.       if (args[0] instanceof Node) {
  51.         children = args;
  52.       } else {
  53.         rawProps = args[0];
  54.         children = args.slice(1);
  55.       }
  56.     } else {
  57.       children = args;
  58.     }
  59.     children = children.flat(Infinity);
  60.     const props = rawProps || {};
  61.     props.children = children;
  62.     if (type === DocumentFragment || typeof type === "string") {
  63.       const node = nodeFactory(type, props);
  64.       for (const child of children) {
  65.         if (child == null) continue;
  66.         if (typeof child === "object") {
  67.           node.appendChild(child);
  68.         } else {
  69.           const textNode = document.createTextNode(String(child));
  70.           node.appendChild(textNode);
  71.         }
  72.       }
  73.       return node;
  74.     } else {
  75.       return type(props);
  76.     }
  77.   };
  78.   const createElement = jsx;
  79.   const Fragment = DocumentFragment;
  80.  
  81.   var jsxdom = /*#__PURE__*/ Object.freeze({
  82.     __proto__: null,
  83.     Fragment: Fragment,
  84.     createElement: createElement,
  85.     jsx: jsx,
  86.     nodeFactory: nodeFactory,
  87.     ref: ref,
  88.   });
  89.  
  90.   globalThis.jsxdom = jsxdom;
  91. })();