update

Author: bichikim

apps/bplan-client/src/components/midi-player/SSetting.tsx

@@ -1,5 +1,6 @@
 import {cx} from 'class-variance-authority'
 import {JSX, splitProps} from 'solid-js'
+import {getRegistrations} from 'src/utils/service-worker'
 import {SPlayerButton} from './SPlayerButton'
 import {SSettingItem} from './SSettingItem'
 import {HUNDRED} from '@winter-love/utils'
@@ -16,6 +17,12 @@ export interface SSettingProps extends JSX.HTMLAttributes<HTMLDivElement> {
   settingData?: SettingData
 }
 
+const unregisterServiceWorker = async () => {
+  const registrations = await getRegistrations()
+
+  return Promise.all(registrations.map((registration) => registration.unregister()))
+}
+
 const DEFAULT_MIN_SCALE = 20
 
 export const SSetting = (props: SSettingProps) => {
@@ -51,6 +58,7 @@ export const SSetting = (props: SSettingProps) => {
         innerProps.class,
       )}
     >
+      <SSettingItem label="reset PWA" type="button" onClick={unregisterServiceWorker} />
       <SSettingItem
         label="Piano Size"
         type="slider"

apps/bplan-client/src/components/midi-player/SSettingItem.tsx

@@ -1,12 +1,13 @@
 import {createUniqueId, JSX, Match, splitProps, Switch} from 'solid-js'
 
-export type SSettingItemType = 'switch' | 'slider'
+export type SSettingItemType = 'switch' | 'slider' | 'button'
 
 export interface SSettingItemProps<T extends SSettingItemType>
-  extends JSX.HTMLAttributes<HTMLDivElement> {
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onClick'> {
   label: string
   max?: T extends 'slider' ? number : never
   min?: T extends 'slider' ? number : never
+  onClick?: () => void
   onValueChange?: (value: T extends 'switch' ? boolean : number) => void
   type: T
   value?: T extends 'switch' ? boolean : number
@@ -20,6 +21,7 @@ export function SSettingItem<T extends SSettingItemType>(props: SSettingItemProp
     'min',
     'max',
     'onValueChange',
+    'onClick',
   ])
   const id = createUniqueId()
 
@@ -37,6 +39,10 @@ export function SSettingItem<T extends SSettingItemType>(props: SSettingItemProp
     ;(event.target as any)?.click()
   }
 
+  const handleClick = () => {
+    innerProps.onClick?.()
+  }
+
   return (
     <div {...restProps} class="flex items-center justify-start gap-2">
       <label class="text-nowrap text-4" for={id}>
@@ -64,6 +70,11 @@ export function SSettingItem<T extends SSettingItemType>(props: SSettingItemProp
             onInput={handleSliderChange}
           />
         </Match>
+        <Match when={innerProps.type === 'button'}>
+          <button class="p-2 touch-none" onClick={handleClick}>
+            Run
+          </button>
+        </Match>
       </Switch>
     </div>
   )

…utils/service-worker/get-registration.ts …tils/service-worker/get-registrations.tsapps/bplan-client/src/utils/service-worker/get-registration.ts renamed to apps/bplan-client/src/utils/service-worker/get-registrations.ts apps/bplan-client/src/utils/service-worker/get-registration.ts renamed to apps/bplan-client/src/utils/service-worker/get-registrations.ts

@@ -1,6 +1,6 @@
 import {getWindow} from '@winter-love/utils'
 
-export const getRegistration = async (): Promise<
+export const getRegistrations = async (): Promise<
   readonly ServiceWorkerRegistration[]
 > => {
   const window = getWindow()

apps/bplan-client/src/utils/service-worker/index.ts

@@ -1 +1 @@
-export * from './get-registration'
+export * from './get-registrations'