create-widget 26.7.22 → 26.7.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-widget",
-  "version": "26.7.22",
+  "version": "26.7.24",
   "private": false,
   "description": "An easy way to start a Widget project",
   "author": "Neo Fu <rtugeek@gmail.com>",
@@ -20,12 +20,22 @@
   "engines": {
     "node": ">=v16.20.0"
   },
+  "scripts": {
+    "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 exec create-widget",
+    "test": "node index.cjs",
+    "update:version": "esno scripts/updateVersion.ts",
+    "pnpm:publish": "npm run build && pnpm publish --no-git-checks",
+    "link": "pnpm link --global",
+    "lint:fix": "eslint"
+  },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "chalk": "^4.1.2",
-    "create-widget": "link:",
     "fs-extra": "^11.2.0",
     "gradient-string": "^2.0.2",
     "minimist": "^1.2.8",
@@ -48,16 +58,5 @@
     "tsup": "^8.3.5",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6"
-  },
-  "scripts": {
-    "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 exec create-widget",
-    "test": "node index.cjs",
-    "update:version": "esno scripts/updateVersion.ts",
-    "pnpm:publish": "npm run build && pnpm publish --no-git-checks",
-    "link": "pnpm link --global",
-    "lint:fix": "eslint"
   }
-}
+}

package/template/react/package.json

@@ -1,42 +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"
-  }
-}
+{
+  "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": "^26.7.24",
+    "@widget-js/react": "^26.7.23",
+    "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": "^26.7.22",
+    "@widget-js/vite-plugin-widget": "^26.7.25",
+    "tailwindcss": "^4.3.3",
+    "typescript": "latest",
+    "vite": "latest"
+  }
+}

package/template/react/public/widget.json

@@ -47,8 +47,16 @@
       "backgroundThrottling": true,
       "previewImage": "/preview_clock.png",
       "supportDeployMode": 17,
-      "configPagePath": "/widget/config/clock?frame=true&transparent=false&width=600&height=700",
-      "routes": []
+      "configPage": {
+        "path": "/widget/config/clock",
+        "frame": true,
+        "transparent": false,
+        "width": 700,
+        "height": 800,
+        "resizable": true,
+        "maximizable": true,
+        "alwaysOnTop": false
+      }
     }
   ],
   "pages": []

package/template/react/src/assets/main.css

@@ -57,34 +57,6 @@ body {
   color: #f4f7fb;
 }
 
-button,
-input {
-  font: inherit;
-}
-
-code {
-  padding: 0.12rem 0.35rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.toggle {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.toggle input {
-  width: 18px;
-  height: 18px;
-}
-
 .config-preview {
   display: grid;
   place-items: center;

package/template/react/src/widgets/clock/{ClockConfigView.tsx → clock-config-view.tsx}

@@ -1,5 +1,5 @@
 import type { WidgetThemeOption } from '@widget-js/react'
-import { useWidget, useWidgetStorage, useWidgetTheme, WidgetThemeForm, Window } from '@widget-js/react'
+import { useWidgetStorage, useWidgetTheme, WidgetThemeForm, Window } from '@widget-js/react'
 import { Button } from '@/components/ui/button'
 import {
   Field,
@@ -21,7 +21,6 @@ const clockThemeOption: WidgetThemeOption = {
 } as const
 
 export default function ClockConfigView() {
-  const { save } = useWidget()
   const { widgetTheme, setWidgetTheme } = useWidgetTheme()
   const [title, setTitle] = useWidgetStorage('title', 'Clock')
   const [use24Hour, setUse24Hour] = useWidgetStorage('use-24-hour', true)
@@ -32,10 +31,10 @@ export default function ClockConfigView() {
       title={title}
       footer={(
         <div className="flex flex-wrap justify-end gap-3">
-          <Button type="button" variant="outline" onClick={() => save()}>
+          <Button type="button" variant="outline" onClick={() => window.close()}>
             应用
           </Button>
-          <Button type="button" onClick={() => save({ closeWindow: true })}>
+          <Button type="button" onClick={() => window.close()}>
             保存并关闭
           </Button>
         </div>

package/template/react/src/widgets/clock/{ClockWidgetRoutes.ts → clock-widget-routes.ts}

@@ -1,13 +1,13 @@
 import type { RouteObject } from 'react-router-dom'
 import { createElement } from 'react'
-import ClockWidget from './Clock.widget'
-import ClockConfigView from './ClockConfigView'
-import ClockWidgetView from './ClockWidgetView'
+import ClockConfigView from './clock-config-view'
+import ClockWidgetView from './clock-widget-view'
+import ClockWidget from './clock.widget'
 
 const path = ClockWidget.path
 const name = ClockWidget.name
 
-const configPagePath = ClockWidget.configPagePath!.split('?')[0]!
+const configPagePath = ClockWidget.configPage!.path
 
 const ClockWidgetRoutes: RouteObject[] = [
   {

package/template/react/src/widgets/clock/{Clock.widget.ts → clock.widget.ts}

@@ -15,7 +15,16 @@ const ClockWidget = new Widget({
   maxHeight: 6,
   previewImage: '/preview_clock.png',
   path: '/widget/clock',
-  configPagePath: '/widget/config/clock?frame=true&transparent=false&width=700&height=800',
+  configPage: {
+    path: '/widget/config/clock',
+    frame: true,
+    transparent: false,
+    width: 700,
+    height: 800,
+    resizable: true,
+    maximizable: true,
+    alwaysOnTop: false,
+  },
 })
 
 export default ClockWidget

package/template/react/src/widgets/widget-router.ts

@@ -1,11 +1,11 @@
-import type { RouteObject } from 'react-router-dom'
-import ClockWidget from './clock/Clock.widget'
-import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
-
-export const widgets = [
-  ClockWidget,
-]
-
-export const widgetRoutes: RouteObject[] = [
-  ...ClockWidgetRoutes,
-]
+import type { RouteObject } from 'react-router-dom'
+import ClockWidgetRoutes from './clock/clock-widget-routes'
+import ClockWidget from './clock/clock.widget'
+
+export const widgets = [
+  ClockWidget,
+]
+
+export const widgetRoutes: RouteObject[] = [
+  ...ClockWidgetRoutes,
+]

package/template/react/widget.package.ts

@@ -6,6 +6,7 @@ export default new WidgetPackage({
   description: {
     'zh-CN': '修改成你的组件描述',
   },
+  requiredAppVersion: '26.7.22',
   entry: '/',
   hash: true,
   remote: {