create-widget 24.1.1-beta.9 → 26.7.22

package/LICENSE

@@ -1,27 +1,27 @@
-# create-widget core license
-
-create-widget is released under the MIT license:
-
-MIT License
-
-Copyright (c) 2023-present widgetjs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
+# create-widget core license
+
+create-widget is released under the MIT license:
+
+MIT License
+
+Copyright (c) 2023-present widgetjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/bin/index.js

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+
+// node_modules/.pnpm/tsup@8.5.1_postcss@8.4.47_t_a3098b86ca89ebd8b3a1e5607680eacc/node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import fs3 from "fs";
+import path3 from "path";
+import * as process from "process";
+import chalk from "chalk";
+import gradient from "gradient-string";
+import minimist from "minimist";
+import prompts from "prompts";
+
+// src/utils/directoryTraverse.ts
+import fs from "fs";
+import path2 from "path";
+function postOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
+  for (const filename of fs.readdirSync(dir)) {
+    if (filename === ".git") {
+      continue;
+    }
+    const fullpath = path2.resolve(dir, filename);
+    if (fs.lstatSync(fullpath).isDirectory()) {
+      postOrderDirectoryTraverse(fullpath, dirCallback, fileCallback);
+      dirCallback(fullpath);
+      continue;
+    }
+    fileCallback(fullpath);
+  }
+}
+
+// src/utils/FileUtils.ts
+import * as fs2 from "fs";
+import { copy, ensureDir } from "fs-extra";
+var FileUtils = class {
+  static async copyFolderRecursive(src, dest) {
+    try {
+      await ensureDir(dest);
+      const items = await fs2.promises.readdir(src);
+      for (const item of items) {
+        const srcPath = `${src}/${item}`;
+        const destPath = `${dest}/${item}`;
+        const stats = await fs2.promises.stat(srcPath);
+        if (stats.isDirectory()) {
+          await this.copyFolderRecursive(srcPath, destPath);
+        } else {
+          await copy(srcPath, destPath, { overwrite: true });
+        }
+      }
+    } catch (error) {
+      console.error(`Error copying folder: ${error.message}`);
+    }
+  }
+};
+
+// src/utils/getCommand.ts
+function getCommand(packageManager, scriptName, args) {
+  if (scriptName === "install") {
+    return packageManager === "yarn" ? "yarn" : `${packageManager} install`;
+  }
+  if (args) {
+    return packageManager === "npm" ? `npm run ${scriptName} -- ${args}` : `${packageManager} ${scriptName} ${args}`;
+  } else {
+    return packageManager === "npm" ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`;
+  }
+}
+
+// src/index.ts
+function canSkipEmptying(dir) {
+  if (!fs3.existsSync(dir)) {
+    return true;
+  }
+  const files = fs3.readdirSync(dir);
+  if (files.length === 0) {
+    return true;
+  }
+  if (files.length === 1 && files[0] === ".git") {
+    return true;
+  }
+  return false;
+}
+function emptyDir(dir) {
+  if (!fs3.existsSync(dir)) {
+    return;
+  }
+  postOrderDirectoryTraverse(
+    dir,
+    (dir2) => fs3.rmdirSync(dir2),
+    (file) => fs3.unlinkSync(file)
+  );
+}
+function printInstallInstructions(root, cwd2, installCommand) {
+  console.log(`
+Done. Now run:
+`);
+  if (root !== cwd2) {
+    const cdProjectName = path3.relative(cwd2, root);
+    console.log(
+      `  ${chalk.bold(
+        chalk.green(
+          `cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName}`
+        )
+      )}`
+    );
+  }
+  console.log(`  ${chalk.bold(chalk.green(installCommand))}`);
+}
+async function init() {
+  console.log();
+  const defaultBanner = "Widget.js - The Desktop Widget Framework";
+  const gradientBanner = gradient([
+    { color: "#42d392", pos: 0 },
+    { color: "#42d392", pos: 0.1 },
+    { color: "#647eff", pos: 1 }
+  ])(defaultBanner);
+  console.log(
+    process.stdout.isTTY && process.stdout.getColorDepth() > 8 ? gradientBanner : defaultBanner
+  );
+  console.log();
+  const argv2 = minimist(process.argv.slice(2), {
+    alias: {
+      "typescript": ["ts"],
+      "with-tests": ["tests"],
+      "router": ["vue-router"]
+    },
+    string: ["_"],
+    // all arguments are treated as booleans
+    boolean: true
+  });
+  let targetDir = argv2._[0];
+  const defaultProjectName = !targetDir ? "widget-project" : targetDir;
+  const forceOverwrite = argv2.force;
+  const npmmirror = argv2.npmmirror;
+  const cwd2 = process.cwd();
+  let selectedTemplateType = "react";
+  let result = {};
+  result = await prompts(
+    [
+      {
+        name: "projectName",
+        type: targetDir ? null : "text",
+        message: "Project name:",
+        initial: defaultProjectName,
+        onState: (state) => targetDir = String(state.value).trim() || defaultProjectName
+      },
+      {
+        name: "templateType",
+        type: "select",
+        message: "Select a template:",
+        initial: 0,
+        onState: (state) => selectedTemplateType = state.value,
+        choices: [
+          { title: "react", value: "react" },
+          { title: "vue3 (Deprecate)", value: "vue3" }
+        ]
+      },
+      {
+        name: "useNpmMirror",
+        type: npmmirror ? null : "confirm",
+        message: "Use npmmirror registry? (Recommended for users in mainland China)"
+      },
+      {
+        name: "shouldOverwrite",
+        type: () => canSkipEmptying(targetDir) || forceOverwrite ? null : "confirm",
+        message: () => {
+          const dirForPrompt = targetDir === "." ? "Current directory" : `Target directory "${targetDir}"`;
+          return `${dirForPrompt} is not empty. Remove existing files and continue?`;
+        }
+      }
+    ],
+    {
+      onCancel: () => {
+        throw new Error(`${chalk.red("\u2716")} Operation cancelled`);
+      }
+    }
+  );
+  const {
+    projectName,
+    templateType = "react",
+    useNpmMirror = argv2.npmmirror,
+    shouldOverwrite = argv2.force
+  } = result;
+  const root = path3.join(cwd2, targetDir);
+  if (fs3.existsSync(root) && shouldOverwrite) {
+    emptyDir(root);
+  } else if (!fs3.existsSync(root)) {
+    fs3.mkdirSync(root);
+  }
+  console.log(`
+Scaffolding project in ${root}...`);
+  if (templateType === "react") {
+    const reactTemplateRoot = path3.join(__dirname, "../template/react");
+    await FileUtils.copyFolderRecursive(reactTemplateRoot, root);
+    if (useNpmMirror) {
+      fs3.writeFileSync(path3.join(root, ".npmrc"), "registry=https://registry.npmmirror.com\n");
+    }
+    printInstallInstructions(root, cwd2, "npm install");
+    return;
+  }
+  const templateRoot = path3.join(__dirname, "../template/vue");
+  await FileUtils.copyFolderRecursive(templateRoot, root);
+  if (useNpmMirror) {
+    fs3.writeFileSync(path3.join(root, ".npmrc"), "registry=https://registry.npmmirror.com\n");
+  }
+  const userAgent = process.env.npm_config_user_agent ?? "";
+  const packageManager = /pnpm/.test(userAgent) ? "pnpm" : /yarn/.test(userAgent) ? "yarn" : "npm";
+  printInstallInstructions(root, cwd2, getCommand(packageManager, "install"));
+}
+init().catch((e) => {
+  console.error(e);
+});

package/eslint/eslint.config.js

@@ -0,0 +1,12 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  stylistic: {
+    indent: 2,
+    quotes: 'single',
+  },
+  typescript: true,
+  vue: true,
+  jsonc: false,
+  yaml: false,
+})

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "create-widget",
-  "version": "24.1.1-beta.9",
+  "version": "26.7.22",
   "private": false,
   "description": "An easy way to start a Widget project",
   "author": "Neo Fu <rtugeek@gmail.com>",
   "license": "MIT",
   "main": "lib/index.js",
+  "type": "module",
   "bin": {
-    "create-widget": "index.cjs"
+    "create-widget": "bin/index.js"
   },
   "files": [
-    "index.cjs",
-    "template"
+    "bin/index.js",
+    "template",
+    "unocss",
+    "github-page",
+    "eslint"
   ],
   "engines": {
     "node": ">=v16.20.0"
@@ -21,34 +25,39 @@
   },
   "dependencies": {
     "chalk": "^4.1.2",
-    "consola": "^2.15.3",
-    "ejs": "^3.1.8",
+    "create-widget": "link:",
     "fs-extra": "^11.2.0",
     "gradient-string": "^2.0.2",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^3.8.0",
     "@tsconfig/node18": "^18.2.2",
+    "@tsconfig/node22": "^22.0.5",
     "@types/ejs": "latest",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.2",
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.11.13",
     "@types/prompts": "^2.4.9",
-    "esbuild": "^0.20.2",
-    "ts-loader": "^9.4.1",
-    "ts-node": "^10.9.1",
-    "tsup": "^6.5.0",
+    "eslint": "8.48.0",
+    "esno": "^4.0.0",
+    "ora": "^6.2.0",
+    "package-json": "^10.0.1",
+    "tsup": "^8.3.5",
     "typescript": "^5.2.2",
-    "vitest": "^0.34.6",
-    "zx": "^7.2.3"
+    "vitest": "^0.34.6"
   },
   "scripts": {
-    "build": "zx ./scripts/build.mjs",
+    "prebuild": "release --date-version",
+    "build": "tsup-node build src/index.ts",
     "watch": "tsup-node src/index.ts --format cjs --watch",
-    "build:run": "npm run build && npm run create-widget",
+    "build:run": "npm run build && npm exec create-widget",
     "test": "node index.cjs",
-    "pnpm:publish": "npm run build && pnpm publish --no-git-checks"
+    "update:version": "esno scripts/updateVersion.ts",
+    "pnpm:publish": "npm run build && pnpm publish --no-git-checks",
+    "link": "pnpm link --global",
+    "lint:fix": "eslint"
   }
 }

package/readme.md

@@ -0,0 +1,80 @@
+# 创建桌面组件项目
+
+## AI使用
+
+```shell
+npx skills@latest add create-widget
+```
+
+
+
+### 创建桌面组件项目
+
+
+- 熟悉命令行
+- 已安装 18.0 或更高版本的 [Node.js](https://nodejs.org/)
+- 熟悉 [Vue3](https://cn.vuejs.org/guide/quick-start.html)
+
+在命令行中运行以下命令，创建桌面组件项目
+
+```bash
+npm create widget@latest
+```
+
+这一指令将会安装并执行 create-widget，输入下项目名称即可:
+
+```shell
+✔ Project name: … <your-project-name>
+```
+
+完成创建后，项目目录结构如下：
+
+```shell{8-13,15,25}
+.
+├── public
+├── src
+│   ├── App.vue
+│   ├── assets
+│   ├── main.ts
+│   ├── router
+│   ├── widgets                           # 👈 组件文件存放目录
+│   │   ├── clock                         # 👈 这是一个简单的示例组件
+│   │   │   ├── Clock.widget.ts           # 👈 组件信息文件
+│   │   │   ├── ClockConfigView.vue       # 👈 组件设置页面
+│   │   │   ├── ClockWidgetRoutes.ts      # 👈 组件路由
+│   │   │   ├── ClockWidgetView.vue       # 👈 组件页面
+│   │   │   ├── model
+│   │   │   │   └── ClockModel.ts         # 👈 组件数据模型
+│   │   └── widget-router.ts
+├── .vscode
+├── env.d.ts
+├── index.html
+├── package.json
+├── README.md
+├── tsconfig.app.json
+├── tsconfig.json
+├── vite.config.ts
+├── widget.package.ts                     # 👈 组件包信息，记得修改
+└── ...
+```
+
+记得更新下依赖
+
+```shell
+cd <your-project-name>
+npm install
+```
+
+### 运行项目
+
+开启vite服务
+
+```shell
+npm run dev
+```
+控制台会打印以下信息，代表组件已经注册成功。
+```shell
+i Register widgets at： 2024-01-06T14:13:30.214Z                                                                                        22:13:30
+i Register widget: cn.example.widget.clock, path: /widget/clock                                                                         22:13:30
+i Widget size:1
+```

package/template/react/README.md

@@ -0,0 +1,41 @@
+# Hello Widget React Example
+
+这是一个基于 `Vite + React + TypeScript` 的 WidgetJS 示例项目。
+
+## 项目特性
+
+- 使用 `react-router-dom` 管理首页、组件页和配置页
+- 直接复用 `@widget-js/react` 的 `WidgetWrapper`、`useWidget`、`useWidgetStorage`、`useWidgetTheme`
+- 保留 `@widget-js/vite-plugin-widget` 打包流程，支持在线构建和离线 zip 构建
+
+## 开发命令
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动开发环境
+
+```bash
+npm run dev
+```
+
+### 构建在线包
+
+```bash
+npm run build
+```
+
+### 构建离线 zip 包
+
+```bash
+npm run build:offline
+```
+
+### 更新 WidgetJS 相关依赖
+
+```bash
+npm run update:widgetjs
+```

package/template/react/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/assets/main.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/template/react/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/react/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/react/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "hello-widget",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "vite build",
+    "build:offline": "vite build --mode offline",
+    "update:widgetjs": "widget dependencies -t remote"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@widget-js/core": "latest",
+    "@widget-js/react": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.25.0",
+    "radix-ui": "^1.6.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.1",
+    "shadcn": "^4.13.1",
+    "styled-components": "^6.4.4",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "latest",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@widget-js/cli": "latest",
+    "@widget-js/vite-plugin-widget": "latest",
+    "tailwindcss": "^4.3.3",
+    "typescript": "latest",
+    "vite": "latest"
+  }
+}