@unpackjs/plugin-react 1.7.4 → 1.7.6

package/dist/click-to-component/index.cjs

@@ -1,72 +1,83 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var click_to_component_exports = {};
-__export(click_to_component_exports, {
-  applyClickToComponentConfig: () => applyClickToComponentConfig
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = function(module) {
+        var getter = module && module.__esModule ? function() {
+            return module['default'];
+        } : function() {
+            return module;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    applyClickToComponentConfig: ()=>applyClickToComponentConfig
 });
-module.exports = __toCommonJS(click_to_component_exports);
-var import_node_fs = __toESM(require("node:fs"));
-var import_node_http = __toESM(require("node:http"));
-var import_node_path = __toESM(require("node:path"));
-var import_core = require("@unpackjs/core");
-var import_launch_editor = __toESM(require("launch-editor"));
-const createServer = () => {
-  return new Promise((resolve) => {
-    const server = import_node_http.default.createServer((req, res) => {
-      const params = new URLSearchParams(req.url.slice(1));
-      const file = decodeURIComponent(params.get("file"));
-      const line = Number(params.get("line"));
-      const column = Number(params.get("column"));
-      res.writeHead(200, {
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "*",
-        "Access-Control-Allow-Headers": "*",
-        "Access-Control-Allow-Private-Network": "true"
-      });
-      res.end("ok");
-      (0, import_launch_editor.default)(`${file}:${line}:${column}`);
-    });
-    (0, import_core.getPort)(3100).then((port) => {
-      server.listen(port, () => {
-        resolve({
-          port
+const external_node_fs_namespaceObject = require("node:fs");
+var external_node_fs_default = /*#__PURE__*/ __webpack_require__.n(external_node_fs_namespaceObject);
+const external_node_http_namespaceObject = require("node:http");
+var external_node_http_default = /*#__PURE__*/ __webpack_require__.n(external_node_http_namespaceObject);
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const core_namespaceObject = require("@unpackjs/core");
+const external_launch_editor_namespaceObject = require("launch-editor");
+var external_launch_editor_default = /*#__PURE__*/ __webpack_require__.n(external_launch_editor_namespaceObject);
+const createServer = ()=>new Promise((resolve)=>{
+        const server = external_node_http_default().createServer((req, res)=>{
+            const params = new URLSearchParams(req.url.slice(1));
+            const file = decodeURIComponent(params.get('file'));
+            const line = Number(params.get('line'));
+            const column = Number(params.get('column'));
+            res.writeHead(200, {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Methods': '*',
+                'Access-Control-Allow-Headers': '*',
+                'Access-Control-Allow-Private-Network': 'true'
+            });
+            res.end('ok');
+            external_launch_editor_default()(`${file}:${line}:${column}`);
+        });
+        (0, core_namespaceObject.getPort)(3100).then((port)=>{
+            server.listen(port, ()=>{
+                resolve({
+                    port
+                });
+            });
         });
-      });
+        core_namespaceObject.restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
     });
-  });
-};
-const applyClickToComponentConfig = async ({
-  config,
-  unpackConfig
-}) => {
-  const { port } = await createServer();
-  const injectScript = import_node_fs.default.readFileSync(import_node_path.default.resolve(__dirname, "./injectScript.js"), "utf-8");
-  const scriptTpl = `
+const applyClickToComponentConfig = async ({ config, unpackConfig })=>{
+    const { port } = await createServer();
+    const injectScript = external_node_fs_default().readFileSync(external_node_path_default().resolve(__dirname, './injectScript.js'), 'utf-8');
+    const scriptTpl = `
 if (!document.querySelector('#__click-to-component__')) {
   const script = document.createElement('script')
   window['CLICK_TO_COMPONENT'] = { port: ${port} }
@@ -74,30 +85,30 @@ if (!document.querySelector('#__click-to-component__')) {
   script.textContent = \`${injectScript}\`
   document.body.appendChild(script)
 }`;
-  if (unpackConfig.mpa) {
-    Object.values(config.entry).forEach((entryConfig) => {
-      const filePath = entryConfig.import[0];
-      const content = import_node_fs.default.readFileSync(filePath, "utf-8");
-      import_node_fs.default.writeFileSync(filePath, `${scriptTpl}
-${content}`, "utf-8");
+    if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
+        const filePath = entryConfig.import[0];
+        const content = external_node_fs_default().readFileSync(filePath, 'utf-8');
+        external_node_fs_default().writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
     });
-  } else {
-    const realEntryPath = import_node_path.default.resolve(config.context, import_core.TEMP_DIR, "entries", `index.${port}.jsx`);
-    const tpl = `
+    else {
+        const realEntryPath = external_node_path_default().resolve(config.context, core_namespaceObject.TEMP_DIR, 'entries', `index.${port}.jsx`);
+        const tpl = `
 ${scriptTpl}
-import '${(0, import_core.getPathInJs)(import_node_path.default.resolve(Object.values(config.entry)[0]))}'
+import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(Object.values(config.entry)[0]))}'
 `;
-    const dir = import_node_path.default.dirname(realEntryPath);
-    if (!import_node_fs.default.existsSync(dir))
-      import_node_fs.default.mkdirSync(dir, { recursive: true });
-    import_node_fs.default.writeFileSync(realEntryPath, tpl, "utf-8");
-    config.entry = {
-      main: realEntryPath
-    };
-  }
-  return config;
+        const dir = external_node_path_default().dirname(realEntryPath);
+        if (!external_node_fs_default().existsSync(dir)) external_node_fs_default().mkdirSync(dir, {
+            recursive: true
+        });
+        external_node_fs_default().writeFileSync(realEntryPath, tpl, 'utf-8');
+        config.entry = {
+            main: realEntryPath
+        };
+    }
+    return config;
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  applyClickToComponentConfig
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
 });

package/dist/click-to-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EAGlB,MAAM,gBAAgB,CAAA;AA4BvB,eAAO,MAAM,2BAA2B,8BAGrC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EAIlB,MAAM,gBAAgB,CAAA;AA6BvB,eAAO,MAAM,2BAA2B,8BAGrC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}

package/dist/click-to-component/index.js

@@ -1,53 +1,41 @@
-import { createRequire } from 'node:module';
-var require = createRequire(import.meta['url']);
-
-import path from "path";
-import { fileURLToPath } from "url";
-var getFilename = () => fileURLToPath(import.meta.url);
-var getDirname = () => path.dirname(getFilename());
-var __dirname = /* @__PURE__ */ getDirname();
-var __filename = /* @__PURE__ */ getFilename();
-import fs from "node:fs";
-import http from "node:http";
-import path2 from "node:path";
-import {
-  TEMP_DIR,
-  getPathInJs,
-  getPort
-} from "@unpackjs/core";
-import launchEditor from "launch-editor";
-const createServer = () => {
-  return new Promise((resolve) => {
-    const server = http.createServer((req, res) => {
-      const params = new URLSearchParams(req.url.slice(1));
-      const file = decodeURIComponent(params.get("file"));
-      const line = Number(params.get("line"));
-      const column = Number(params.get("column"));
-      res.writeHead(200, {
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "*",
-        "Access-Control-Allow-Headers": "*",
-        "Access-Control-Allow-Private-Network": "true"
-      });
-      res.end("ok");
-      launchEditor(`${file}:${line}:${column}`);
-    });
-    getPort(3100).then((port) => {
-      server.listen(port, () => {
-        resolve({
-          port
+import __rslib_shim_module__ from 'module';
+/*#__PURE__*/ import.meta.url;
+import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
+import { dirname as __webpack_dirname__ } from "node:path";
+import * as __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__ from "node:fs";
+import * as __WEBPACK_EXTERNAL_MODULE_node_http_2dc67212__ from "node:http";
+import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
+import * as __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__ from "@unpackjs/core";
+import * as __WEBPACK_EXTERNAL_MODULE_launch_editor_c6c8c971__ from "launch-editor";
+var click_to_component_rslib_entry_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
+const createServer = ()=>new Promise((resolve)=>{
+        const server = __WEBPACK_EXTERNAL_MODULE_node_http_2dc67212__["default"].createServer((req, res)=>{
+            const params = new URLSearchParams(req.url.slice(1));
+            const file = decodeURIComponent(params.get('file'));
+            const line = Number(params.get('line'));
+            const column = Number(params.get('column'));
+            res.writeHead(200, {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Methods': '*',
+                'Access-Control-Allow-Headers': '*',
+                'Access-Control-Allow-Private-Network': 'true'
+            });
+            res.end('ok');
+            (0, __WEBPACK_EXTERNAL_MODULE_launch_editor_c6c8c971__["default"])(`${file}:${line}:${column}`);
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.getPort)(3100).then((port)=>{
+            server.listen(port, ()=>{
+                resolve({
+                    port
+                });
+            });
         });
-      });
+        __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
     });
-  });
-};
-const applyClickToComponentConfig = async ({
-  config,
-  unpackConfig
-}) => {
-  const { port } = await createServer();
-  const injectScript = fs.readFileSync(path2.resolve(__dirname, "./injectScript.js"), "utf-8");
-  const scriptTpl = `
+const applyClickToComponentConfig = async ({ config, unpackConfig })=>{
+    const { port } = await createServer();
+    const injectScript = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(click_to_component_rslib_entry_dirname, './injectScript.js'), 'utf-8');
+    const scriptTpl = `
 if (!document.querySelector('#__click-to-component__')) {
   const script = document.createElement('script')
   window['CLICK_TO_COMPONENT'] = { port: ${port} }
@@ -55,29 +43,26 @@ if (!document.querySelector('#__click-to-component__')) {
   script.textContent = \`${injectScript}\`
   document.body.appendChild(script)
 }`;
-  if (unpackConfig.mpa) {
-    Object.values(config.entry).forEach((entryConfig) => {
-      const filePath = entryConfig.import[0];
-      const content = fs.readFileSync(filePath, "utf-8");
-      fs.writeFileSync(filePath, `${scriptTpl}
-${content}`, "utf-8");
+    if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
+        const filePath = entryConfig.import[0];
+        const content = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(filePath, 'utf-8');
+        __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
     });
-  } else {
-    const realEntryPath = path2.resolve(config.context, TEMP_DIR, "entries", `index.${port}.jsx`);
-    const tpl = `
+    else {
+        const realEntryPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(config.context, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.TEMP_DIR, 'entries', `index.${port}.jsx`);
+        const tpl = `
 ${scriptTpl}
-import '${getPathInJs(path2.resolve(Object.values(config.entry)[0]))}'
+import '${(0, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.getPathInJs)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(Object.values(config.entry)[0]))}'
 `;
-    const dir = path2.dirname(realEntryPath);
-    if (!fs.existsSync(dir))
-      fs.mkdirSync(dir, { recursive: true });
-    fs.writeFileSync(realEntryPath, tpl, "utf-8");
-    config.entry = {
-      main: realEntryPath
-    };
-  }
-  return config;
-};
-export {
-  applyClickToComponentConfig
+        const dir = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname(realEntryPath);
+        if (!__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(dir)) __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].mkdirSync(dir, {
+            recursive: true
+        });
+        __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(realEntryPath, tpl, 'utf-8');
+        config.entry = {
+            main: realEntryPath
+        };
+    }
+    return config;
 };
+export { applyClickToComponentConfig };

package/dist/click-to-component/injectScript.js

@@ -1,137 +1,119 @@
-const COVER_ID = '__click-to-component__'
-let cover = null
-let currentDebugSource = null
-let enabled = false
+const COVER_ID = '__click-to-component__';
+let cover = null;
+let currentDebugSource = null;
+let enabled = false;
 function debounce(fn, delay = 200) {
-  let timer = null
-  return (...args) => {
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }
+    let timer = null;
+    return (...args)=>{
+        clearTimeout(timer);
+        timer = setTimeout(()=>{
+            fn(...args);
+        }, delay);
+    };
 }
 function applyStyles(target, styles) {
-  Object.entries(styles).forEach(([key, value]) => {
-    target.style[key] = value
-  })
+    Object.entries(styles).forEach(([key, value])=>{
+        target.style[key] = value;
+    });
 }
 function createCover() {
-  cover = document.createElement('div')
-  cover.id = COVER_ID
-  applyStyles(cover, {
-    position: 'fixed',
-    zIndex: '999999',
-    background: 'rgba(120, 170, 210, 0.6)',
-    display: 'none',
-    pointerEvents: 'none',
-  })
-  document.body.appendChild(cover)
+    cover = document.createElement('div');
+    cover.id = COVER_ID;
+    applyStyles(cover, {
+        position: 'fixed',
+        zIndex: '999999',
+        background: 'rgba(120, 170, 210, 0.6)',
+        display: 'none',
+        pointerEvents: 'none'
+    });
+    document.body.appendChild(cover);
 }
 function updateCover(target) {
-  if (typeof target.getBoundingClientRect !== 'function') {
-    currentDebugSource = null
-    return
-  }
-  const { top, left, width, height } = target.getBoundingClientRect()
-  applyStyles(cover, {
-    top: top + 'px',
-    left: left + 'px',
-    width: width + 'px',
-    height: height + 'px',
-    display: 'block',
-  })
+    if ('function' != typeof target.getBoundingClientRect) {
+        currentDebugSource = null;
+        return;
+    }
+    const { top, left, width, height } = target.getBoundingClientRect();
+    applyStyles(cover, {
+        top: top + 'px',
+        left: left + 'px',
+        width: width + 'px',
+        height: height + 'px',
+        display: 'block'
+    });
 }
 function hideCover() {
-  cover.style.display = 'none'
+    cover.style.display = 'none';
 }
 function getFiberWithDebugSourceByTarget(target) {
-  const fiberKey = Object.keys(target).find((key) => key.includes('__reactFiber'))
-  const maxDepth = 10
-  const doNext = (fiber, depth = 0) => {
-    if (!fiber) return
-    if (depth > maxDepth) {
-      console.warn('Recursion depth exceeded. Aborting to prevent stack overflow.')
-      return
-    }
-    if (fiber._debugSource) {
-      // console.log('_debugSource-depth', depth, fiber)
-      return fiber
-    }
-    if (fiber._debugOwner) {
-      return doNext(fiber._debugOwner, depth + 1)
-    }
-    console.warn('[WARN] click-to-component cannot work with the minified version of React.')
-  }
-  return doNext(target[fiberKey])
+    const fiberKey = Object.keys(target).find((key)=>key.includes('__reactFiber'));
+    const maxDepth = 10;
+    const doNext = (fiber, depth = 0)=>{
+        if (!fiber) return;
+        if (depth > maxDepth) {
+            console.warn('Recursion depth exceeded. Aborting to prevent stack overflow.');
+            return;
+        }
+        if (fiber._debugSource) return fiber;
+        if (fiber._debugOwner) return doNext(fiber._debugOwner, depth + 1);
+        console.warn('[WARN] click-to-component cannot work with the minified version of React.');
+    };
+    return doNext(target[fiberKey]);
 }
 function getClosestNodeFromFiber(fiber) {
-  if (fiber.stateNode) {
-    return fiber.stateNode
-  }
-  return getClosestNodeFromFiber(fiber.return)
+    if (fiber.stateNode) return fiber.stateNode;
+    return getClosestNodeFromFiber(fiber.return);
 }
 function openEditor() {
-  if (!currentDebugSource) return
-  const port = window.CLICK_TO_COMPONENT.port
-  const { fileName, lineNumber, columnNumber } = currentDebugSource
-  const url = [
-    'http://localhost:',
-    port,
-    '/?file=',
-    fileName,
-    '&line=',
-    lineNumber,
-    '&column=',
-    columnNumber,
-  ].join('')
-  const sendXHR = () => {
-    const xhr = new XMLHttpRequest()
-    xhr.open('GET', url, true)
-    xhr.send()
-    xhr.addEventListener('error', () => {
-      // 通过img方式发送请求
-      const img = document.createElement('img')
-      img.src = url
-    })
-  }
-  sendXHR()
+    if (!currentDebugSource) return;
+    const port = window.CLICK_TO_COMPONENT.port;
+    const { fileName, lineNumber, columnNumber } = currentDebugSource;
+    const url = [
+        'http://localhost:',
+        port,
+        '/?file=',
+        fileName,
+        '&line=',
+        lineNumber,
+        '&column=',
+        columnNumber
+    ].join('');
+    const sendXHR = ()=>{
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.send();
+        xhr.addEventListener('error', ()=>{
+            const img = document.createElement('img');
+            img.src = url;
+        });
+    };
+    sendXHR();
 }
-document.addEventListener(
-  'mouseover',
-  debounce((e) => {
-    if (!enabled) return
-    const target = e.target
-    const fiber = getFiberWithDebugSourceByTarget(target)
-    if (!fiber) return
-    const closestNode = getClosestNodeFromFiber(fiber)
-    if (!closestNode) return
-    currentDebugSource = fiber._debugSource
-    updateCover(closestNode)
-  }, 30),
-)
-document.addEventListener(
-  'click',
-  (e) => {
-    if (!enabled) return
-    e.stopPropagation()
-    e.preventDefault()
-    openEditor()
-    hideCover()
-    enabled = false
-  },
-  true,
-)
-document.addEventListener('keydown', (e) => {
-  if (e.key === 'Alt') {
-    enabled = true
-  }
-})
-document.addEventListener('keyup', (e) => {
-  if (e.key === 'Alt') {
-    enabled = false
-    hideCover()
-  }
-})
-
-createCover()
+document.addEventListener('mouseover', debounce((e)=>{
+    if (!enabled) return;
+    const target = e.target;
+    const fiber = getFiberWithDebugSourceByTarget(target);
+    if (!fiber) return;
+    const closestNode = getClosestNodeFromFiber(fiber);
+    if (!closestNode) return;
+    currentDebugSource = fiber._debugSource;
+    updateCover(closestNode);
+}, 30));
+document.addEventListener('click', (e)=>{
+    if (!enabled) return;
+    e.stopPropagation();
+    e.preventDefault();
+    openEditor();
+    hideCover();
+    enabled = false;
+}, true);
+document.addEventListener('keydown', (e)=>{
+    if ('Alt' === e.key) enabled = true;
+});
+document.addEventListener('keyup', (e)=>{
+    if ('Alt' === e.key) {
+        enabled = false;
+        hideCover();
+    }
+});
+createCover();