add build widgets script and format code

package.json

@@ -13,8 +13,8 @@
     "dev": "vite",
     "build": "yarn run esbuild:ts && yarn run build:ts",
     "build:ts": "yarn tsc --build tsconfig-all.json",
-    "build:vite": "vite build",
-    "build:widgets": "bin/build-widget",
+    "build:vite": "vite build && yarn build:widgets",
+    "build:widgets": "node ./tasks/build-widgets.js",
     "esbuild:ts": "node ./tasks/esbuild-packages.js",
     "format": "npm run format:prettier",
     "format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"

src/components/clock/clock.ts

@@ -125,15 +125,21 @@ export class StarClock extends LitElement {
     this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
     this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
     this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
-    this.style.setProperty('--rotateSecondAfter',this.rotateSecond + 360 + 'deg')
-    this.style.setProperty('--rotateMinuteAfter',this.rotateMinute + 360 + 'deg')
+    this.style.setProperty(
+      '--rotateSecondAfter',
+      this.rotateSecond + 360 + 'deg'
+    )
+    this.style.setProperty(
+      '--rotateMinuteAfter',
+      this.rotateMinute + 360 + 'deg'
+    )
     this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
     this.resizeFun()
     window.addEventListener('resize', () => {
       this.resizeFun()
     })
   }
-  protected resizeFun(){
+  protected resizeFun() {
     let min = Math.min(
       this.starClock?.clientHeight || 100,
       this.starClock?.clientWidth || 100

src/components/digicipher/README.md

@@ -5,25 +5,24 @@
 - 由 0-9 数字组成的数字密码
 - 默认密码为 `123456`
 - 点击数字反馈，输入成功上滑，输入错误抖动反馈
-- 两分钟内记忆用户输入次数，如 : 用户输入3次错误密码后，两分钟内用户输入2次将锁定，两分钟后还原5次机会
+- 两分钟内记忆用户输入次数，如 : 用户输入 3 次错误密码后，两分钟内用户输入 2 次将锁定，两分钟后还原 5 次机会
 
 ## 使用
+
 1. 默认情况
+
 ```
 <star-digicipher></star-digicipher>
 ```
+
 1. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
+
 ```
 <star-digicipher saveMode></star-digicipher>
 ```
 
 ## 发送事件
+
 解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`<br>
-解锁5次失败，跳转已锁定：`star-digicipher-locked`   **value:** `false`<br>
+解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`<br>
 完成存储：`star-digicipher-savesuccess` **value:** `this.passwd`
-
-
-
-
-
-

src/components/overflowmenu/overflowmenu.ts

@@ -2,7 +2,7 @@ import {LitElement, html, HTMLTemplateResult, CSSResultArray} from 'lit'
 import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
 import '../button/button.js'
 import {OverlayStack} from '../overlay/overlay-stack'
-import { TriggerInteractions } from '../overlay/overlay-types.js'
+import {TriggerInteractions} from '../overlay/overlay-types.js'
 import {sharedStyles} from './overflowmenustyle.js'
 
 @customElement('star-overflowmenu')
@@ -34,9 +34,16 @@ export class StarOverflowMenu extends LitElement {
       const overlaycontent = this.querySelector('#menu') as HTMLElement
       // overlaycontent为空则退出
       if (!overlaycontent) return
-      const triggerInteraction = this.getAttribute('triggertype') as TriggerInteractions
+      const triggerInteraction = this.getAttribute(
+        'triggertype'
+      ) as TriggerInteractions
       // 开启overlay
-      this.overlayStack.openOverlay(originalNode, targetNode, overlaycontent, triggerInteraction)
+      this.overlayStack.openOverlay(
+        originalNode,
+        targetNode,
+        overlaycontent,
+        triggerInteraction
+      )
     } else {
       this.overlayStack.closeOverlay()
     }

src/components/overlay/active-overlay.ts

@@ -108,22 +108,22 @@ export class ActiveOverlay extends LitElement {
         targettop -
         (contentheight - targetnode.offsetHeight) -
         topboundingclient
-      this.setAttribute("placement","rightbottom")
+      this.setAttribute('placement', 'rightbottom')
     } else if (rightline) {
       // 右侧边界
       left = targetleft - this.restoreContent.offsetWidth
       top = targettop - topboundingclient
-      this.setAttribute("placement","right")
+      this.setAttribute('placement', 'right')
     } else if (bottomline) {
       // 下侧边界
       left = targetleft + targetnode.offsetWidth
       top = targetbottom - contentheight - topboundingclient
-      this.setAttribute("placement","bottom")
+      this.setAttribute('placement', 'bottom')
     } else {
       // 正常情况
       left = targetleft + targetnode.offsetWidth
       top = targettop - topboundingclient
-      this.setAttribute("placement","normal")
+      this.setAttribute('placement', 'normal')
     }
     this.style.left = left + 'px'
     this.style.top = top + 'px'

src/components/overlay/overlay-stack.ts

@@ -1,5 +1,5 @@
 import {ActiveOverlay} from './active-overlay'
-import { TriggerInteractions } from './overlay-types'
+import {TriggerInteractions} from './overlay-types'
 
 export class OverlayStack {
   public overlays: ActiveOverlay[] = []
@@ -12,7 +12,12 @@ export class OverlayStack {
     triggerInteraction: TriggerInteractions
   ) {
     // 创建activeoverlay对象
-    const activeOverlay = ActiveOverlay.create(root, targetnode, content, triggerInteraction)
+    const activeOverlay = ActiveOverlay.create(
+      root,
+      targetnode,
+      content,
+      triggerInteraction
+    )
     // 开启状态
     this.isOpen = true
     // 创建注释节点模板——用于替换要展示在overlay中的元素

src/components/overlay/overlay-types.ts

@@ -1,10 +1,7 @@
 // 定义overlay所需各种参数类型、预留接口
 
 // 弹窗的交互类型：溢出菜单、底部菜单、信息菜单
-export type TriggerInteractions =
-  | 'overflowmenu'
-  | 'bottommenu'
-  | 'infomenu'
+export type TriggerInteractions = 'overflowmenu' | 'bottommenu' | 'infomenu'
 
 // 主题：lm：light-model； dm：dark-model
 export type thememode = 'lm' | 'dm'
@@ -19,5 +16,4 @@ export interface OverlayOpenDetail {
   // skidding?: number // 滑动
   // virtualTrigger?: VirtualTrigger // 虚拟触发
   // trigger: HTMLElement // 触发
-  
 }

src/components/overlay/overlaystyle.ts

@@ -6,42 +6,42 @@ export const sharedStyles: CSSResult = css`
 
   :host([placement='normal'])::before {
     position: absolute;
-    content: "";
+    content: '';
     top: 34px;
     left: -16px;
     border-top: 16px solid transparent;
     border-bottom: 16px solid transparent;
-    border-right: 16px solid #F5F5F5;
+    border-right: 16px solid #f5f5f5;
   }
 
   :host([placement='right'])::before {
     position: absolute;
-    content: "";
+    content: '';
     top: 34px;
     right: -16px;
     z-index: 2;
     border-top: 16px solid transparent;
     border-bottom: 16px solid transparent;
-    border-left: 16px solid #F5F5F5;
+    border-left: 16px solid #f5f5f5;
   }
 
   :host([placement='bottom'])::before {
     position: absolute;
-    content: "";
+    content: '';
     bottom: 34px;
     left: -16px;
     border-top: 16px solid transparent;
     border-bottom: 16px solid transparent;
-    border-right: 16px solid #F5F5F5;
+    border-right: 16px solid #f5f5f5;
   }
 
   :host([placement='rightbottom'])::before {
     position: absolute;
-    content: "";
+    content: '';
     bottom: 34px;
     right: -16px;
     border-top: 16px solid transparent;
     border-bottom: 16px solid transparent;
-    border-left: 16px solid #F5F5F5;
+    border-left: 16px solid #f5f5f5;
   }
 `

src/components/ul/ul.css.ts

@@ -17,11 +17,11 @@ export default css`
     position: relative;
   }
 
-  :host(#overflowmenu) ul{
+  :host(#overflowmenu) ul {
     padding: 12px 0;
   }
 
-  :host(#bottommenu){
+  :host(#bottommenu) {
     width: 520px;
     height: 400px;
     display: block;
@@ -29,7 +29,7 @@ export default css`
     border-radius: 20px;
   }
 
-  :host(#bottommenu) ul{
+  :host(#bottommenu) ul {
     padding: 20px 0;
   }
 

src/test/panels/battery/battery.ts

@@ -13,7 +13,12 @@ export class PanelBattery extends LitElement {
       <star-battery vertical></star-battery>
       <star-battery vertical deep class="location"></star-battery>
       <star-battery vertical charge class="location_charge"></star-battery>
-      <star-battery vertical charge deep class="location_charge_deep"></star-battery>
+      <star-battery
+        vertical
+        charge
+        deep
+        class="location_charge_deep"
+      ></star-battery>
       <star-battery class="mini" mini></star-battery>
       <star-battery class="mini" mini charge></star-battery>
       <star-battery class="small" small></star-battery>

src/test/panels/overflowmenu/overflowmenu.ts

@@ -15,7 +15,12 @@ export class PanelOverflowMenu extends LitElement {
     return html`
       <star-overflowmenu triggertype="overflowmenu">
         <div id="menu">
-          <star-ul type="base" id="overflowmenu" class="appinfo" background="var(--bg-dialog)">
+          <star-ul
+            type="base"
+            id="overflowmenu"
+            class="appinfo"
+            background="var(--bg-dialog)"
+          >
             <star-button
               type="iconlabel"
               icon="info"
@@ -52,7 +57,12 @@ export class PanelOverflowMenu extends LitElement {
         triggertype="overflowmenu"
       >
         <div id="menu">
-          <star-ul type="base" id="overflowmenu" class="appinfo" background="var(--bg-dialog)">
+          <star-ul
+            type="base"
+            id="overflowmenu"
+            class="appinfo"
+            background="var(--bg-dialog)"
+          >
             <star-button
               type="iconlabel"
               icon="info"
@@ -89,7 +99,12 @@ export class PanelOverflowMenu extends LitElement {
         triggertype="overflowmenu"
       >
         <div id="menu">
-          <star-ul type="base" id="overflowmenu" class="appinfo" background="var(--bg-dialog)">
+          <star-ul
+            type="base"
+            id="overflowmenu"
+            class="appinfo"
+            background="var(--bg-dialog)"
+          >
             <star-button
               type="iconlabel"
               icon="info"
@@ -126,7 +141,12 @@ export class PanelOverflowMenu extends LitElement {
         triggertype="overflowmenu"
       >
         <div id="menu">
-          <star-ul type="base" id="overflowmenu" class="appinfo" background="var(--bg-dialog)">
+          <star-ul
+            type="base"
+            id="overflowmenu"
+            class="appinfo"
+            background="var(--bg-dialog)"
+          >
             <star-button
               type="iconlabel"
               icon="info"
@@ -163,7 +183,12 @@ export class PanelOverflowMenu extends LitElement {
         triggertype="overflowmenu"
       >
         <div id="menu">
-          <star-ul type="base" id="overflowmenu" class="appinfo" background="var(--bg-dialog)">
+          <star-ul
+            type="base"
+            id="overflowmenu"
+            class="appinfo"
+            background="var(--bg-dialog)"
+          >
             <star-button
               type="iconlabel"
               icon="info"

tasks/build-widgets.js

@@ -0,0 +1,77 @@
+import fs from 'fs'
+import {build} from 'vite'
+const PWD = process.cwd()
+
+const clearDir = (path, exclude) => {
+  var files = []
+
+  if (fs.existsSync(path)) {
+    files = fs.readdirSync(path)
+
+    for (const file of files) {
+      if (file === exclude) continue
+      var curPath = path + '/' + file
+
+      if (fs.statSync(curPath).isDirectory()) {
+        clearDir(curPath)
+        fs.rmdirSync(curPath)
+      } else {
+        fs.unlinkSync(curPath)
+      }
+    }
+  }
+}
+
+const fun = async (widgetName, entryName) => {
+  await build({
+    build: {
+      lib: {
+        entry: `src/widgets/${widgetName}/${entryName}.ts`,
+        formats: ['es'],
+        fileName: `${widgetName}`,
+      },
+      outDir: `dist/widgets/${widgetName}/`,
+    },
+  })
+
+  clearDir(`dist/widgets/${widgetName}`, `${widgetName}.js`)
+}
+
+const safeReadDirSync = (path) => {
+  let dirData = {}
+  try {
+    dirData = fs.readdirSync(path)
+  } catch (ex) {
+    if (ex.code == 'EACCES' || ex.code == 'EPERM') {
+      // 无权访问该文件夹，跳过
+      return null
+    } else {
+      throw ex
+    }
+  }
+
+  return dirData
+}
+
+const buildAll = () => {
+  const widgetsFilePath = `${PWD}/src/widgets`
+  const dirData = safeReadDirSync(widgetsFilePath)
+
+  dirData?.forEach((fileName) => {
+    const widgetPath = `${widgetsFilePath}/${fileName}`
+    const stats = fs.statSync(widgetPath)
+
+    if (stats.isDirectory()) {
+      const files = safeReadDirSync(widgetPath)
+      if (files.includes(`${fileName}.ts`)) {
+        fun(fileName, fileName)
+      } else if (files.includes(`index.ts`)) {
+        fun(fileName, 'index')
+      } else {
+        throw new Error(`Entry file of ${fileName} widget dose not exist!`)
+      }
+    }
+  })
+}
+
+buildAll()

tasks/esbuild-packages.js

@@ -21,8 +21,8 @@ export const watchFiles = async () => {
   const files = await fg([
     './src/components/**/!(*.d).ts',
     './src/lib/**/!(*.d).ts',
-    "src/widgets/*.ts",
-    "src/widgets/**/*.ts"
+    'src/widgets/*.ts',
+    'src/widgets/**/*.ts',
   ])
   return files
 }

tsconfig-all.json

@@ -5,6 +5,11 @@
     "noEmit": true,
     "emitDeclarationOnly": false
   },
-  "include": ["src/components/**/*.ts", "src/lib/**/*.ts", "src/widgets/*.ts", "src/widgets/**/.ts"],
+  "include": [
+    "src/components/**/*.ts",
+    "src/lib/**/*.ts",
+    "src/widgets/*.ts",
+    "src/widgets/**/.ts"
+  ],
   "exclude": ["src/*/node_modules/**/*.ts"]
 }

widgets.config.ts

@@ -1,13 +0,0 @@
-import {defineConfig} from 'vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  build: {
-    lib: {
-      entry: `src/widgets/${process.env.WIDGET_FILE_NAME}/${process.env.WIDGET_FILE_NAME}.ts`,
-      formats: ['es'],
-      fileName: `${process.env.WIDGET_FILE_NAME}`
-    },
-    outDir: `dist/widgets/${process.env.WIDGET_FILE_NAME}/`,
-  },
-})