@nocobase/cli 2.0.0-beta.8 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/cli",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0",
   "description": "",
   "license": "AGPL-3.0",
   "main": "./src/index.js",
@@ -8,8 +8,8 @@
     "nocobase": "./bin/index.js"
   },
   "dependencies": {
-    "@nocobase/app": "2.0.0-beta.8",
-    "@nocobase/license-kit": "^0.3.5",
+    "@nocobase/app": "2.0.0",
+    "@nocobase/license-kit": "^0.3.7",
     "@types/fs-extra": "^11.0.1",
     "@umijs/utils": "3.5.20",
     "chalk": "^4.1.1",
@@ -27,12 +27,12 @@
     "tsx": "^4.19.0"
   },
   "devDependencies": {
-    "@nocobase/devtools": "2.0.0-beta.8"
+    "@nocobase/devtools": "2.0.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nocobase/nocobase.git",
     "directory": "packages/core/cli"
   },
-  "gitHead": "6bd912b1028eb8bc09a823d35e4d37b3000861b1"
+  "gitHead": "3590c0087a56f0f285a5357f43a80bdc62b11bec"
 }

package/src/commands/client.js

@@ -0,0 +1,166 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+const chalk = require('chalk');
+const { Command } = require('commander');
+const fs = require('fs-extra');
+const { resolve } = require('path');
+
+/**
+ * 复制主应用客户端文件
+ * @param {string} source - 源目录路径
+ * @param {string} target - 目标目录路径
+ */
+async function copyMainClient(source, target) {
+  if (!(await fs.exists(source))) {
+    console.log(chalk.yellow(`Source directory does not exist: ${source}`));
+    return;
+  }
+  // 确保目标目录存在且为空
+  await fs.ensureDir(target);
+  await fs.emptyDir(target);
+  await fs.copy(source, target, { recursive: true });
+  console.log(chalk.green(`Copied main client files from ${source} to ${target}`));
+}
+
+/**
+ * 复制插件客户端文件
+ * @param {string} pluginsBaseDir - 插件基础目录路径
+ * @param {string} namespace - 命名空间（如 '@nocobase' 或 '@nocobase-example'）
+ * @param {string} target - 目标目录
+ */
+async function copyPluginClients(pluginsBaseDir, namespace, target) {
+  const pluginsDir = resolve(process.cwd(), pluginsBaseDir, namespace);
+  if (await fs.exists(pluginsDir)) {
+    const pluginNames = await fs.readdir(pluginsDir);
+    for (const pluginName of pluginNames) {
+      const pluginPath = resolve(pluginsDir, pluginName);
+      const pluginDistClient = resolve(pluginPath, 'dist/client');
+      if (await fs.exists(pluginDistClient)) {
+        const pluginTarget = resolve(target, 'static/plugins', namespace, pluginName, 'dist/client');
+        await fs.mkdir(resolve(pluginTarget, '..'), { recursive: true });
+        await fs.copy(pluginDistClient, pluginTarget, { recursive: true });
+        console.log(chalk.green(`Copied ${namespace}/${pluginName} client files`));
+      }
+    }
+  }
+}
+
+/**
+ * 递归上传目录到 OSS
+ * @param {Client} client - OSS 客户端实例
+ * @param {string} localDir - 本地目录路径
+ * @param {string} ossPrefix - OSS 对象前缀（目录路径）
+ */
+async function uploadDirectoryToOSS(client, localDir, ossPrefix = '') {
+  if (!(await fs.exists(localDir))) {
+    console.log(chalk.yellow(`Directory does not exist: ${localDir}`));
+    return;
+  }
+
+  const stats = await fs.stat(localDir);
+  if (!stats.isDirectory()) {
+    throw new Error(`${localDir} is not a directory`);
+  }
+
+  const files = await fs.readdir(localDir);
+  let uploadedCount = 0;
+
+  for (const file of files) {
+    const filePath = resolve(localDir, file);
+    const fileStats = await fs.stat(filePath);
+
+    if (fileStats.isDirectory()) {
+      // 递归处理子目录
+      const subOssPrefix = ossPrefix ? `${ossPrefix}/${file}` : file;
+      const subCount = await uploadDirectoryToOSS(client, filePath, subOssPrefix);
+      uploadedCount += subCount;
+    } else {
+      // 上传文件
+      const ossKey = ossPrefix ? `${ossPrefix}/${file}` : file;
+      try {
+        await client.put(ossKey, filePath);
+        // console.log(chalk.green(`Uploaded: ${ossKey}`));
+        uploadedCount++;
+      } catch (error) {
+        console.error(chalk.red(`Failed to upload ${ossKey}:`), error.message);
+        throw error;
+      }
+    }
+  }
+
+  return uploadedCount;
+}
+
+/**
+ *
+ * @param {Command} cli
+ */
+module.exports = (cli) => {
+  cli
+    .command('client:extract')
+    .allowUnknownOption()
+    .action(async () => {
+      const version = require('../../package.json').version;
+      const target = resolve(process.cwd(), 'storage/dist-client', version);
+      const mainClientSource = resolve(process.cwd(), 'node_modules/@nocobase/app/dist/client');
+      await copyMainClient(mainClientSource, target);
+      await copyPluginClients('packages/plugins', '@nocobase', target);
+      await copyPluginClients('packages/plugins', '@nocobase-example', target);
+      await copyPluginClients('packages/pro-plugins', '@nocobase', target);
+    });
+
+  cli
+    .command('client:upload')
+    .allowUnknownOption()
+    .action(async () => {
+      const version = require('../../package.json').version;
+      const target = resolve(process.cwd(), 'storage/dist-client', version);
+
+      // 检查必要的环境变量
+      if (
+        !process.env.CDN_ALI_OSS_ACCESS_KEY_ID ||
+        !process.env.CDN_ALI_OSS_ACCESS_KEY_SECRET ||
+        !process.env.CDN_ALI_OSS_BUCKET ||
+        !process.env.CDN_ALI_OSS_REGION
+      ) {
+        console.error(
+          chalk.red(
+            'Missing required environment variables: CDN_ALI_OSS_ACCESS_KEY_ID, CDN_ALI_OSS_ACCESS_KEY_SECRET, CDN_ALI_OSS_BUCKET, CDN_ALI_OSS_REGION',
+          ),
+        );
+        process.exit(1);
+      }
+
+      const Client = require('ali-oss');
+
+      const client = new Client({
+        accessKeyId: process.env.CDN_ALI_OSS_ACCESS_KEY_ID,
+        accessKeySecret: process.env.CDN_ALI_OSS_ACCESS_KEY_SECRET,
+        bucket: process.env.CDN_ALI_OSS_BUCKET,
+        region: process.env.CDN_ALI_OSS_REGION,
+      });
+
+      if (!(await fs.exists(target))) {
+        console.error(chalk.red(`Target directory does not exist: ${target}`));
+        console.log(chalk.yellow('Please run "client:extract" first to generate the client files.'));
+        process.exit(1);
+      }
+
+      console.log(chalk.blue(`Uploading directory ${target} to OSS...`));
+      const ossPrefix = `${version}`;
+      try {
+        const uploadedCount = await uploadDirectoryToOSS(client, target, ossPrefix);
+        console.log(chalk.green(`Successfully uploaded ${uploadedCount} files to OSS`));
+      } catch (error) {
+        console.error(chalk.red('Upload failed:'), error);
+        process.exit(1);
+      }
+    });
+};

package/src/commands/dev.js

@@ -21,6 +21,15 @@ function sleep(ms = 1000) {
   });
 }
 
+async function buildBundleStatusHtml() {
+  const data = await fs.promises.readFile(path.resolve(__dirname, '../../templates/bundle-status.html'), 'utf-8');
+  await fs.promises.writeFile(
+    path.resolve(process.cwd(), 'node_modules/@umijs/preset-umi/assets/bundle-status.html'),
+    data,
+    'utf-8',
+  );
+}
+
 /**
  *
  * @param {Command} cli
@@ -37,6 +46,7 @@ module.exports = (cli) => {
     .allowUnknownOption()
     .action(async (opts) => {
       checkDBDialect();
+      await buildBundleStatusHtml();
       let subprocess;
       const runDevClient = () => {
         console.log('starting client', 1 * clientPort);

package/src/commands/index.js

@@ -38,6 +38,7 @@ module.exports = (cli) => {
   require('./pkg')(cli);
   require('./instance-id')(cli);
   require('./view-license-key')(cli);
+  require('./client')(cli);
   if (isPackageValid('@umijs/utils')) {
     require('./create-plugin')(cli);
   }

package/src/commands/pkg.js

@@ -208,7 +208,7 @@ class PackageManager {
         showLicenseInfo(LicenseKeyError.notValid);
       }
       logger.error(`Login failed: ${this.baseURL}`);
-      logger.error(error?.message || error);
+      logger.error(error?.message, { error });
     }
   }
 

package/src/commands/pm2.js

@@ -32,6 +32,6 @@ module.exports = (cli) => {
     .command('pm2-stop')
     .allowUnknownOption()
     .action(() => {
-      run('pm2', ['stop', 'all']);
+      run('pm2', ['kill']);
     });
 };

package/src/util.js

@@ -304,6 +304,8 @@ function buildIndexHtml(force = false) {
     .replace(/\{\{env.API_BASE_URL\}\}/g, process.env.API_BASE_URL || process.env.API_BASE_PATH)
     .replace(/\{\{env.WS_URL\}\}/g, process.env.WEBSOCKET_URL || '')
     .replace(/\{\{env.WS_PATH\}\}/g, process.env.WS_PATH)
+    .replace(/\{\{env.ESM_CDN_BASE_URL\}\}/g, process.env.ESM_CDN_BASE_URL || '')
+    .replace(/\{\{env.ESM_CDN_SUFFIX\}\}/g, process.env.ESM_CDN_SUFFIX || '')
     .replace('src="/umi.', `src="${process.env.APP_PUBLIC_PATH}umi.`);
 
   if (process.env.CDN_BASE_URL) {
@@ -398,6 +400,8 @@ exports.initEnv = function initEnv() {
     CDN_BASE_URL: '',
     APP_PUBLIC_PATH: '/',
     WATCH_FILE: resolve(process.cwd(), 'storage/app.watch.ts'),
+    ESM_CDN_BASE_URL: 'https://esm.sh',
+    ESM_CDN_SUFFIX: '',
   };
 
   if (
@@ -455,6 +459,12 @@ exports.initEnv = function initEnv() {
     process.env.CDN_BASE_URL = process.env.APP_PUBLIC_PATH;
   }
 
+  if (process.env.CDN_BASE_URL.includes('http') && process.env.CDN_VERSION === 'auto') {
+    const version = require('../package.json').version;
+    process.env.CDN_BASE_URL = process.env.CDN_BASE_URL.replace(/\/+$/, '') + '/' + version + '/';
+    process.env.CDN_VERSION = '';
+  }
+
   if (!process.env.TZ) {
     const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     process.env.TZ = getTimezonesByOffset(process.env.DB_TIMEZONE || timeZone);

package/templates/bundle-status.html

@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>NocoBase Loading...</title>
+    <style data-basic>
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #333;
+        background-color: #f5f5f5;
+      }
+
+      #loading {
+        position: relative;
+        padding: 20px 28px 24px 88px;
+      }
+
+      #loading::before {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        content: '';
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 3px solid #e0e0e0;
+        border-top-color: #999;
+        animation: loading-spin 0.9s linear infinite;
+        transform: translateY(-50%);
+      }
+
+      #loading h3 {
+        margin: 0 0 2px;
+        color: #666;
+        font-size: 20px;
+        font-weight: normal;
+      }
+
+      #loading small {
+        color: #888;
+        font-size: 12px;
+      }
+
+      #loading small::after {
+        content: 'from source';
+      }
+
+      #loading p {
+        box-sizing: border-box;
+        font-family: Georgia, 'Times New Roman', Times, serif;
+        color: #333;
+      }
+
+      #loading p:empty {
+        display: none;
+      }
+
+      #loading p span {
+        font-family: sans-serif;
+        padding: 0 6px 0 2px;
+        color: #666;
+        font-size: 14px;
+        vertical-align: bottom;
+      }
+
+      #loading p.summary {
+        margin: 8px 0;
+        height: 28px;
+        font-size: 24px;
+      }
+
+      #loading p.detail {
+        margin: 2px 0;
+        height: 40px;
+        font-size: 16px;
+      }
+
+      code.progress-details {
+        margin-top: 20px;
+        font-size: 13px;
+        color: #999;
+        max-width: calc(100vw - 500px);
+        text-align: center;
+        white-space: pre-wrap;
+      }
+
+      @keyframes fade-in-out {
+        0% {
+          opacity: 0.4;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes loading-spin {
+        0% {
+          transform: translateY(-50%) rotate(0deg);
+        }
+
+        100% {
+          transform: translateY(-50%) rotate(360deg);
+        }
+      }
+    </style>
+    <style data-mfsu>
+      #loading[data-mfsu]::after {
+        position: absolute;
+        top: 0;
+        left: 64px;
+        content: '';
+        width: 20px;
+        height: 22px;
+        background: center / 20px 22px;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAuCAMAAABteatCAAABKVBMVEUAAAADAgAAAAAAAAAAAAAAAAAAAAAIBwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASDwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+2SgAAAD81ycWEwPxzSXOsCBBOAoqIwbjwiOWgBd2ZBJdTw741Ca1mhyhihlHPAswKQcbFwT00CbgvyLWtyG5nh2GchV7aRNYSw1VSA3zzybpxyTmxCTLrR+QehaMdxZvXxFmVxBjVQ85MQglIAXqxyTSsyG/ox6zmRyrkhqpkBqmjhqdhhiBbhRQRAxMQQyKBhJVAAAAM3RSTlMA/vrcEO3F/nA4BvfUqYx4aFAjBP7x6uOugCEdCrSllohUSj0yLRQC/se/k2FWJ7qamFjVvxppAAAB4klEQVQ4y42U10IaQRhG2QVBAaVIMxQNCthT9iwdkSoEEkss6e39HyIaQ4Zhdjee63PxH/h2XCqF4EbU9QQ8bsAb9vxXzNI7iYGeivgdvQ12h8ag09VgaXPF3sujjYwHzq96gNvu3OgSY2PGx1bf7txMkJ+mITBHNufmuKsYMm//nit5y8TODJXzKWTnvW2dL4YFpz5y63NeOkHLyvum8ao05/m91EwLr6mxJR24Sf+DhTeGkOQd4ruw8FpoYcnbCfBd1cwb9CPJKya5Vr32lEBe8kovuG0r3qBLfNslsUW5oXiVWxI7shdB+6R473okj2XvOM6l4g3vYK24OJmJGlK93gU9e5QRYor6wLCg/fWXBvGXs54QmjQZ6c5LMfOCDuX3VcOOsz8z3wvfjyYUBOrjhp1qXgHux//vIAFarVOx8honGkvLsz2u51cD4JucLg6t8sZHYM0jvRCH+yyeazbLsPrMtUg6lISm8D7XwWv5CBTitMRPXgN3xGVFOsnEVBpUPEFqbdGgiwYZ/z71itqgkqM/fPyO1QZ5vLHqv4bnLlvCaCO1QSWi0bl/kUSDDSsBfqgNKtEEN2qDStFN90JpUMnsUZ4+NPidvVIKUBtUDkA0OBBCNDjxWjQ4o4sGR34DhGGszb2iUaMAAAAASUVORK5CYII=');
+        animation: fade-in-out alternate infinite 1s;
+      }
+
+      #loading[data-mfsu] small::after {
+        content: 'Umi with MFSU';
+      }
+
+      #loading[data-mfsu]:hover p.summary,
+      #loading[data-mfsu]:not(:hover) p.detail {
+        display: none;
+      }
+    </style>
+    <style data-progress>
+      #loading[data-percent^='2']:not([data-percent='2'])::before,
+      #loading[data-percent^='3']:not([data-percent='3'])::before {
+        background-position-x: -68px;
+      }
+
+      #loading[data-percent^='4']:not([data-percent='4'])::before,
+      #loading[data-percent^='5']:not([data-percent='5'])::before {
+        background-position-x: -136px;
+      }
+
+      #loading[data-percent^='6']:not([data-percent='6'])::before,
+      #loading[data-percent^='7']:not([data-percent='7'])::before {
+        background-position-x: -204px;
+      }
+
+      #loading[data-percent^='8']:not([data-percent='8'])::before,
+      #loading[data-percent^='9']:not([data-percent='9'])::before {
+        background-position-x: -272px;
+      }
+
+      #loading[data-percent='99']::before,
+      #loading[data-percent='100']::before {
+        background-position-x: -340px !important;
+      }
+    </style>
+    <style data-mako>
+      #loading[data-mako]::after {
+        position: absolute;
+        top: 0;
+        left: 64px;
+        content: '';
+        width: 20px;
+        height: 22px;
+        background: center / 20px 22px;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAuCAMAAABteatCAAABKVBMVEUAAAADAgAAAAAAAAAAAAAAAAAAAAAIBwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASDwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+2SgAAAD81ycWEwPxzSXOsCBBOAoqIwbjwiOWgBd2ZBJdTw741Ca1mhyhihlHPAswKQcbFwT00CbgvyLWtyG5nh2GchV7aRNYSw1VSA3zzybpxyTmxCTLrR+QehaMdxZvXxFmVxBjVQ85MQglIAXqxyTSsyG/ox6zmRyrkhqpkBqmjhqdhhiBbhRQRAxMQQyKBhJVAAAAM3RSTlMA/vrcEO3F/nA4BvfUqYx4aFAjBP7x6uOugCEdCrSllohUSj0yLRQC/se/k2FWJ7qamFjVvxppAAAB4klEQVQ4y42U10IaQRhG2QVBAaVIMxQNCthT9iwdkSoEEkss6e39HyIaQ4Zhdjee63PxH/h2XCqF4EbU9QQ8bsAb9vxXzNI7iYGeivgdvQ12h8ag09VgaXPF3sujjYwHzq96gNvu3OgSY2PGx1bf7txMkJ+mITBHNufmuKsYMm//nit5y8TODJXzKWTnvW2dL4YFpz5y63NeOkHLyvum8ao05/m91EwLr6mxJR24Sf+DhTeGkOQd4ruw8FpoYcnbCfBd1cwb9CPJKya5Vr32lEBe8kovuG0r3qBLfNslsUW5oXiVWxI7shdB+6R473okj2XvOM6l4g3vYK24OJmJGlK93gU9e5QRYor6wLCg/fWXBvGXs54QmjQZ6c5LMfOCDuX3VcOOsz8z3wvfjyYUBOrjhp1qXgHux//vIAFarVOx8honGkvLsz2u51cD4JucLg6t8sZHYM0jvRCH+yyeazbLsPrMtUg6lISm8D7XwWv5CBTitMRPXgN3xGVFOsnEVBpUPEFqbdGgiwYZ/z71itqgkqM/fPyO1QZ5vLHqv4bnLlvCaCO1QSWi0bl/kUSDDSsBfqgNKtEEN2qDStFN90JpUMnsUZ4+NPidvVIKUBtUDkA0OBBCNDjxWjQ4o4sGR34DhGGszb2iUaMAAAAASUVORK5CYII=');
+        animation: fade-in-out alternate infinite 1s;
+      }
+
+      #loading[data-mako] small::after {
+        content: 'Umi with Mako';
+      }
+
+      #loading[data-mako] .loader {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 5px;
+        width: 100vw;
+        --c:no-repeat linear-gradient(#1d90fe 0 0);
+        background: var(--c),var(--c),#cddeee;
+        background-size: 60% 100%;
+        animation: l16 3s infinite;
+      }
+
+      @keyframes l16 {
+        0%   {background-position:-150% 0,-150% 0}
+        66%  {background-position: 250% 0,-150% 0}
+        100% {background-position: 250% 0, 250% 0}
+      }
+  </style>
+  <style data-utoopack>
+    #loading[data-utoopack]::after {
+      position: absolute;
+      top: 0;
+      left: 64px;
+      content: '';
+      width: 20px;
+      height: 22px;
+      background: center / 20px 22px;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAuCAMAAABteatCAAABKVBMVEUAAAADAgAAAAAAAAAAAAAAAAAAAAAIBwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASDwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+2SgAAAD81ycWEwPxzSXOsCBBOAoqIwbjwiOWgBd2ZBJdTw741Ca1mhyhihlHPAswKQcbFwT00CbgvyLWtyG5nh2GchV7aRNYSw1VSA3zzybpxyTmxCTLrR+QehaMdxZvXxFmVxBjVQ85MQglIAXqxyTSsyG/ox6zmRyrkhqpkBqmjhqdhhiBbhRQRAxMQQyKBhJVAAAAM3RSTlMA/vrcEO3F/nA4BvfUqYx4aFAjBP7x6uOugCEdCrSllohUSj0yLRQC/se/k2FWJ7qamFjVvxppAAAB4klEQVQ4y42U10IaQRhG2QVBAaVIMxQNCthT9iwdkSoEEkss6e39HyIaQ4Zhdjee63PxH/h2XCqF4EbU9QQ8bsAb9vxXzNI7iYGeivgdvQ12h8ag09VgaXPF3sujjYwHzq96gNvu3OgSY2PGx1bf7txMkJ+mITBHNufmuKsYMm//nit5y8TODJXzKWTnvW2dL4YFpz5y63NeOkHLyvum8ao05/m91EwLr6mxJR24Sf+DhTeGkOQd4ruw8FpoYcnbCfBd1cwb9CPJKya5Vr32lEBe8kovuG0r3qBLfNslsUW5oXiVWxI7shdB+6R473okj2XvOM6l4g3vYK24OJmJGlK93gU9e5QRYor6wLCg/fWXBvGXs54QmjQZ6c5LMfOCDuX3VcOOsz8z3wvfjyYUBOrjhp1qXgHux//vIAFarVOx8honGkvLsz2u51cD4JucLg6t8sZHYM0jvRCH+yyeazbLsPrMtUg6lISm8D7XwWv5CBTitMRPXgN3xGVFOsnEVBpUPEFqbdGgiwYZ/z71itqgkqM/fPyO1QZ5vLHqv4bnLlvCaCO1QSWi0bl/kUSDDSsBfqgNKtEEN2qDStFN90JpUMnsUZ4+NPidvVIKUBtUDkA0OBBCNDjxWjQ4o4sGR34DhGGszb2iUaMAAAAASUVORK5CYII=');
+      animation: fade-in-out alternate infinite 1s;
+    }
+
+    #loading[data-utoopack] small::after {
+      content: 'Umi with Utoopack';
+    }
+
+    #loading[data-utoopack] .loader {
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 5px;
+      width: 100vw;
+      --c:no-repeat linear-gradient(#1d90fe 0 0);
+      background: var(--c),var(--c),#cddeee;
+      background-size: 60% 100%;
+      animation: l16 3s infinite;
+    }
+
+    @keyframes l16 {
+      0%   {background-position:-150% 0,-150% 0}
+      66%  {background-position: 250% 0,-150% 0}
+      100% {background-position: 250% 0, 250% 0}
+    }
+</style>
+  </head>
+
+  <body>
+    <div id="loading">
+      <div class="loader"></div>
+      <h3>Bundling...</h3>
+      <small></small>
+      <p class="summary"></p>
+      <p class="detail"></p>
+    </div>
+    <code class="progress-details"></code>
+
+    <script>
+      const loading = document.getElementById('loading');
+      const progressDetails = document.querySelector('.progress-details');
+      const summary = loading.querySelector('.summary');
+      const detail = loading.querySelector('.detail');
+
+      function check(data) {
+        renderStatus(data);
+        if (
+          data.bundleStatus.done &&
+          (!data.mfsuBundleStatus || data.mfsuBundleStatus.done)
+        ) {
+          location.reload();
+        } else {
+          setTimeout(loadData, 300);
+        }
+      }
+
+      function renderStatus(data) {
+        if (data.bundler === 'mako') {
+            loading.setAttribute('data-mako', '');
+            window.__MAKO_PERCENT = window.__MAKO_PERCENT || 0.1;
+            const makoPercent = Math.floor(window.__MAKO_PERCENT * 100);
+            loading.setAttribute('data-percent', makoPercent);
+            window.__MAKO_PERCENT = window.__MAKO_PERCENT >= 1 ? 0.2 : window.__MAKO_PERCENT + 0.1;
+          return;
+        }
+        if (data.bundler === 'utoopack') {
+          loading.setAttribute('data-utoopack', '');
+          window.__UTOO_PERCENT = window.__UTOO_PERCENT || 0.1;
+          const utooPercent = Math.floor(window.__UTOO_PERCENT * 100);
+          loading.setAttribute('data-percent', utooPercent);
+          window.__UTOO_PERCENT = window.__UTOO_PERCENT >= 1 ? 0.2 : window.__UTOO_PERCENT + 0.1;
+
+          return;
+        }
+        const hasMFSU = Boolean(data.mfsuBundleStatus);
+        const hasProgressDetails = Boolean(
+          data.bundleStatus.progresses[0].details,
+        );
+
+        if (hasProgressDetails) {
+          const details = data.bundleStatus.progresses[0].details;
+          if (details.length) {
+            progressDetails.innerHTML = details.join('<br />');
+          }
+        }
+
+        const srcPercent = Math.floor(
+          (data.bundleStatus.done
+            ? 1
+            : data.bundleStatus.progresses[0].percent || 0) * 100,
+        );
+        const mfsuPrecent =
+          hasMFSU &&
+          Math.floor(
+            (data.mfsuBundleStatus.done
+              ? 1
+              : data.mfsuBundleStatus.percent || 0) * 100,
+          );
+        const totalPercent = hasMFSU
+          ? Math.floor((srcPercent + mfsuPrecent) / 2)
+          : srcPercent;
+        const summaryText = totalPercent + '<span>%</span>';
+        let detailText = summaryText;
+
+        if (hasMFSU) {
+          loading.setAttribute('data-mfsu', '');
+          detailText = [
+            srcPercent + '<span>% for src</span>',
+            '<br />',
+            mfsuPrecent + '<span>% for deps</span>',
+          ].join('\n');
+          detail.innerHTML = detailText;
+        }
+
+        loading.setAttribute('data-percent', totalPercent);
+        summary.innerHTML = summaryText;
+      }
+
+      function loadData() {
+        fetch('/__umi/api/bundle-status')
+          .then((res) => res.json())
+          .then(check);
+      }
+
+      loadData();
+    </script>
+  </body>
+</html>