[gem] Add useStore

packages/duoyun-ui/docs/en/01-guide/03-customize.md

@@ -50,7 +50,7 @@ Extend theme:
 ```ts
 import { extendTheme } from 'duoyun-ui/lib/theme';
 
-export const theme = extendTheme({ myColor: '#f00' });
+export const [theme, updateTheme] = extendTheme({ myColor: '#f00' });
 ```
 
 ## Customize icon
@@ -60,7 +60,7 @@ Currently DuoyunUI uses [Material Icon](https://fonts.google.com/icons?selected=
 ```ts
 import { extendIcons } from 'duoyun-ui/lib/icons';
 
-const icons = extendIcons({
+const [icons, updateIcons] = extendIcons({
   more: `
     <svg part="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
       <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>

packages/duoyun-ui/docs/zh/01-guide/03-customize.md

@@ -50,7 +50,7 @@ updateTheme({ primaryColor: 'blue' });
 ```ts
 import { extendTheme } from 'duoyun-ui/lib/theme';
 
-export const theme = extendTheme({ myColor: '#f00' });
+export const [theme, updateTheme] = extendTheme({ myColor: '#f00' });
 ```
 
 ## 自定义图标
@@ -61,7 +61,7 @@ export const theme = extendTheme({ myColor: '#f00' });
 ```ts
 import { extendIcons } from 'duoyun-ui/lib/icons';
 
-const icons = extendIcons({
+const [icons, updateIcons] = extendIcons({
   more: `
     <svg part="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
       <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>

packages/duoyun-ui/src/elements/badge.ts

@@ -63,6 +63,18 @@ const style = createCSSSheet(css`
       anchor-name: --anchor;
     }
   }
+  @supports not (anchor-name: --foo) {
+    :host(:not([hidden])) {
+      display: inline;
+      position: relative;
+    }
+    :host(:not(:empty)) .badge {
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
+    }
+  }
 `);
 
 /**

packages/duoyun-ui/src/elements/chart-tooltip.ts

@@ -1,7 +1,7 @@
 import { connectStore, adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 
 import { theme } from '../lib/theme';
 
@@ -81,7 +81,7 @@ type Store = {
   debug: boolean;
 };
 
-const store = createStore<Store>({
+const [store, update] = useStore<Store>({
   data: {},
   x: 0,
   y: 0,
@@ -98,7 +98,7 @@ export class DuoyunChartTooltipElement extends GemElement {
   static instance: DuoyunChartTooltipElement | null = null;
 
   static open = (x: number, y: number, data: Data) => {
-    updateStore(store, { x, y, data });
+    update({ x, y, data });
     if (!ChartTooltip.instance) {
       ChartTooltip.instance = new ChartTooltip();
       document.body.append(ChartTooltip.instance);

packages/duoyun-ui/src/elements/coach-mark.ts

@@ -2,7 +2,7 @@
 import { connectStore, adoptedStyle, customElement, attribute, numattribute } from '@mantou/gem/lib/decorators';
 import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 import { splice } from '@mantou/gem/helper/i18n';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -33,15 +33,15 @@ type Store = {
   opened: boolean;
 };
 
-const store = createStore<Store>({
+const [store, update] = useStore<Store>({
   currentIndex: 0,
   opened: false,
 });
 
 export async function openTour(currentIndex = store.currentIndex) {
   if (!tourList[currentIndex]) throw new Error('missing tours');
   await tourList[currentIndex].before?.();
-  updateStore(store, { opened: true, currentIndex });
+  update({ opened: true, currentIndex });
 }
 
 export async function setTours(tours: Tour[] | Record<number, Tour>, options: Partial<Store> = {}) {
@@ -50,22 +50,22 @@ export async function setTours(tours: Tour[] | Record<number, Tour>, options: Pa
   if (opened) {
     await openTour(currentIndex);
   } else {
-    updateStore(store, { opened });
+    update({ opened });
   }
 }
 
 async function closeTour() {
-  updateStore(store, { opened: false });
+  update({ opened: false });
   tourList[store.currentIndex].skip?.();
 }
 
 async function nextTour() {
-  updateStore(store, { opened: false });
+  update({ opened: false });
   ContextMenu.close();
   const { currentIndex } = store;
   const isFinish = currentIndex === tourList.length - 1;
   if (isFinish) {
-    updateStore(store, { currentIndex: tourList.findIndex((e) => !!e) || 0 });
+    update({ currentIndex: tourList.findIndex((e) => !!e) || 0 });
   }
   await tourList[currentIndex].finish?.();
   if (!isFinish) {

packages/duoyun-ui/src/elements/contextmenu.ts

@@ -1,7 +1,7 @@
 import { connectStore, adoptedStyle, customElement, refobject, RefObject } from '@mantou/gem/lib/decorators';
 import { html, GemElement, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 
 import { icons } from '../lib/icons';
 import { locale } from '../lib/locale';
@@ -67,7 +67,7 @@ type ContextMenuOptions = {
   header?: TemplateResult;
 };
 
-const contextmenuStore = createStore<ContextMenuStore>({
+const [contextmenuStore, update] = useStore<ContextMenuStore>({
   menuStack: [],
 });
 
@@ -132,7 +132,7 @@ export class DuoyunContextMenuElement extends GemElement {
     } = options;
     if (Array.isArray(contextmenu) && contextmenu.length === 0) throw new Error('menu length is 0');
     toggleActiveState(activeElement, true);
-    updateStore(contextmenuStore, {
+    update({
       width,
       maxHeight,
       activeElement,
@@ -213,7 +213,7 @@ export class DuoyunContextMenuElement extends GemElement {
           openLeft ||
           (menuStackIndex > 0 && menuStack[menuStackIndex].x < menuStack[menuStackIndex - 1].x)) &&
         left > 300;
-      updateStore(contextmenuStore, {
+      update({
         menuStack: [
           ...menuStack.slice(0, menuStackIndex + 1),
           {
@@ -225,7 +225,7 @@ export class DuoyunContextMenuElement extends GemElement {
         ],
       });
     } else {
-      updateStore(contextmenuStore, {
+      update({
         menuStack: menuStack.slice(0, menuStackIndex + 1),
       });
     }
@@ -241,7 +241,7 @@ export class DuoyunContextMenuElement extends GemElement {
   #onKeydown = (evt: KeyboardEvent, menuStackIndex: number) => {
     evt.stopPropagation();
     const focusPrevMenu = () => {
-      updateStore(contextmenuStore, {
+      update({
         menuStack: contextmenuStore.menuStack.slice(0, menuStackIndex),
       });
       this.#menuElements[menuStackIndex - 1]?.focus();
@@ -270,13 +270,13 @@ export class DuoyunContextMenuElement extends GemElement {
       const showToTop = innerHeight - bottom < height + 2 * this.#offset && top > innerHeight - bottom;
       const x = showToLeft ? right - width : left;
       const y = showToTop ? Math.max(top - height - 2 * this.#offset, 0) : bottom;
-      updateStore(contextmenuStore, {
+      update({
         maxHeight: maxHeight || `${showToTop ? top - 2 * this.#offset : innerHeight - bottom - 2 * this.#offset}px`,
         menuStack: [{ ...menu, x, y }],
       });
     } else {
       const y = innerHeight - menu.y > width ? menu.y : Math.max(0, menu.y - (scrollHeight - clientHeight));
-      updateStore(contextmenuStore, { menuStack: [{ ...menu, y }] });
+      update({ menuStack: [{ ...menu, y }] });
     }
   };
 

packages/duoyun-ui/src/lib/icons.ts

@@ -1,4 +1,4 @@
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 import { raw } from '@mantou/gem/lib/utils';
 
 // 24x24, single path
@@ -108,9 +108,12 @@ const defaultIcons = {
   ),
 };
 
-export const icons = createStore(defaultIcons);
+export const [icons, updateIcons] = useStore(defaultIcons);
 
 export function extendIcons<T extends Record<string, string>>(customIcons: Partial<typeof defaultIcons> & T) {
-  updateStore(icons, customIcons);
-  return icons as unknown as typeof defaultIcons & T;
+  updateIcons(customIcons);
+  return [
+    icons as unknown as typeof defaultIcons & T,
+    updateIcons as (customIcons: Partial<typeof defaultIcons> & T) => void,
+  ] as const;
 }

packages/duoyun-ui/src/lib/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme, getThemeStore, updateTheme as changeTheme } from '@mantou/gem/helper/theme';
+import { getThemeStore, useTheme } from '@mantou/gem/helper/theme';
 
 export function getSemanticColor(semantic?: string) {
   switch (semantic) {
@@ -64,14 +64,10 @@ export const darkTheme: Partial<typeof lightTheme> = {
   maskAlpha: '0.4',
 };
 
-export const theme = createTheme({ ...lightTheme });
+export const [theme, updateTheme] = useTheme({ ...lightTheme });
 export const themeStore = getThemeStore(theme);
 
-export const updateTheme = (tm: Partial<typeof lightTheme>) => {
-  changeTheme(theme, tm);
-};
-
 export function extendTheme<T extends Record<string, string>>(tm: Partial<typeof lightTheme> & T) {
-  changeTheme(theme, tm);
-  return theme as unknown as typeof lightTheme & T;
+  updateTheme(tm);
+  return [theme as typeof lightTheme & T, updateTheme as (tm: Partial<typeof lightTheme> & T) => void] as const;
 }

packages/duoyun-ui/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { createStore, Store, connect, updateStore } from '@mantou/gem/lib/store';
+import { Store, connect, updateStore, useStore } from '@mantou/gem/lib/store';
 import { render, TemplateResult } from '@mantou/gem/lib/element';
 import { NonPrimitive, cleanObject } from '@mantou/gem/lib/utils';
 
@@ -324,12 +324,13 @@ export function setBodyInert(modal: HTMLElement) {
 }
 
 /**Create auto cache(localStorage) Store */
-export function createCacheStore<T extends Record<string, any>>(
+export function useCacheStore<T extends Record<string, any>>(
   storageKey: string,
   initStore: T,
   options?: {
     cacheExcludeKeys?: (keyof T)[];
     prefix?: string | (() => string | undefined);
+    // 重新初始化 store，例如切换用户
     depStore?: Store<NonPrimitive>;
   },
 ) {
@@ -351,7 +352,7 @@ export function createCacheStore<T extends Record<string, any>>(
   const cacheExcludeKeys = new Set(options?.cacheExcludeKeys || []);
   let key = getKey();
 
-  const store = createStore<T>(getStoreStore(key));
+  const [store, updater] = useStore<T>(getStoreStore(key));
 
   if (options?.depStore) {
     connect(options.depStore, () => {
@@ -372,5 +373,11 @@ export function createCacheStore<T extends Record<string, any>>(
 
   window.addEventListener('pagehide', saveStore);
 
-  return [store, saveStore] as const;
+  return [store, updater, saveStore] as const;
 }
+
+/**@deprecated use `useCacheStore` */
+export const createCacheStore = (...args: Parameters<typeof useCacheStore>) => {
+  const [store, , save] = useCacheStore(...args);
+  return [store, save] as const;
+};

packages/gem-book/src/element/elements/main.ts

@@ -1,11 +1,11 @@
-import { html, GemElement, customElement, css, property, createCSSSheet, adoptedStyle, updateStore } from '@mantou/gem';
+import { html, GemElement, customElement, css, property, createCSSSheet, adoptedStyle } from '@mantou/gem';
 import { Renderer, parse } from 'marked';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { theme } from '../helper/theme';
 import { checkBuiltInPlugin } from '../lib/utils';
 
-import { tocStore } from './toc';
+import { updateTocStore } from './toc';
 
 import '@mantou/gem/elements/unsafe';
 import '@mantou/gem/elements/link';
@@ -89,7 +89,7 @@ export class Main extends GemElement {
   };
 
   #updateToc = () =>
-    updateStore(tocStore, {
+    updateTocStore({
       elements: [...this.shadowRoot!.querySelectorAll<HTMLHeadingElement>('.markdown-header')].slice(1),
     });
 
@@ -303,7 +303,7 @@ export class Main extends GemElement {
             opacity: 1;
           }
           h1 {
-            font-size: 2.5rem;
+            font-size: 2.3rem;
           }
         }
       </style>

packages/gem-book/src/element/elements/nav.ts

@@ -17,7 +17,7 @@ import { capitalize, isSameOrigin } from '../lib/utils';
 import { bookStore } from '../store';
 
 import { icons } from './icons';
-import { sidebarStore, toggleSidebar } from './sidebar';
+import { sidebarStore, updateSidebarStore } from './sidebar';
 
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
@@ -171,7 +171,11 @@ export class Nav extends GemElement {
           }
         }
       </style>
-      <gem-use class="menu" @click=${toggleSidebar} .element=${sidebarStore.open ? icons.close : icons.menu}></gem-use>
+      <gem-use
+        class="menu"
+        @click=${() => updateSidebarStore({ open: !sidebarStore.open })}
+        .element=${sidebarStore.open ? icons.close : icons.menu}
+      ></gem-use>
       ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''}
       <div class="left">
         ${internals.map((item) => this.renderInternalItem(item))}

packages/gem-book/src/element/elements/sidebar.ts

@@ -6,11 +6,9 @@ import {
   connectStore,
   classMap,
   state,
-  createStore,
   connect,
-  updateStore,
   history,
-  disconnect,
+  useStore,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -26,10 +24,7 @@ import '@mantou/gem/elements/use';
 import './side-link';
 import './nav-logo';
 
-export const sidebarStore = createStore({ open: false });
-
-const closeSidebar = () => updateStore(sidebarStore, { open: false });
-export const toggleSidebar = () => updateStore(sidebarStore, { open: !sidebarStore.open });
+export const [sidebarStore, updateSidebarStore] = useStore({ open: false });
 
 @customElement('gem-book-sidebar')
 @connectStore(bookStore)
@@ -219,7 +214,7 @@ export class SideBar extends GemElement {
             position: fixed;
             background: ${theme.backgroundColor};
             width: 100%;
-            height: calc(100vh - ${theme.headerHeight});
+            height: calc(100dvh - ${theme.headerHeight});
             top: ${theme.headerHeight};
             z-index: 3;
           }
@@ -267,7 +262,6 @@ export class SideBar extends GemElement {
   }
 
   mounted() {
-    connect(history.store, closeSidebar);
-    return () => disconnect(history.store, closeSidebar);
+    return connect(history.store, () => updateSidebarStore({ open: false }));
   }
 }