⚡️ 在atomWithStorage中使用初始值让渲染挂起以获得异步值

packages/core/package.json

@@ -1,8 +1,8 @@
 {
  "name": "@verkfi/core",
- "version": "1.7.1",
- "devVersion": "930",
- "dev": false,
+ "version": "1.7.2",
+ "devVersion": "934",
+ "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,
  "repository": "github:neila-a/verkfi",

packages/core/src/app/layout/extensionsAtom.ts → packages/core/src/app/atoms/extensions.ts

@@ -4,18 +4,25 @@ import db, {
 import {
  atom
 } from "jotai";
+import isBrowser from "layout/isBrowser";
 export interface extensionsDispatch extends single {
  action?: "delete"
 }
-const valueAtom = atom<single[]>([]);
-valueAtom.onMount = setValue => {
- (async () => {
- const value = await db.extensionTools.toArray();
- setValue(value);
- })();
-};
-const extensionsAtom = atom(get => get(valueAtom), (get, set, update: extensionsDispatch) => {
- const old = get(valueAtom);
+const emptyString = "__empty__",
+ valueAtom = atom<typeof emptyString | single[]>(emptyString);
+const extensionsAtom = atom(async get => {
+ const got = get(valueAtom);
+ if (got === emptyString) {
+ if (isBrowser()) {
+ const value = await db.extensionTools.toArray();
+ return value;
+ }
+ return [];
+ }
+ return got as single[];
+}, async (get, set, update: extensionsDispatch) => {
+ const realOld = get(valueAtom),
+ old = realOld === "__empty__" ? await db.extensionTools.toArray() : realOld;
  if (update?.action === "delete") {
  db.extensionTools.delete(update.to);
  set(valueAtom, old.filter(a => a.to !== update.to));

packages/core/src/app/atoms/index.ts

@@ -0,0 +1,49 @@
+"use client";
+import {
+ PaletteMode
+} from "@mui/material";
+import {
+ WindowOptions
+} from "components/window/Window";
+import {
+ viewMode as viewModeType
+} from "index/consts";
+import {
+ lists as listsType
+} from "index/sidebar";
+import {
+ atom
+} from "jotai";
+import defaultPalette from "setting/appearance/defaultPalette";
+import atomWithStorage from "setting/reader/atomWithStorage";
+import isBrowser from "layout/isBrowser";
+interface mostUsedMarks {
+ [key: string]: number;
+}
+export const sidebarMode = atomWithStorage<"menu" | "sidebar">("sidebarmode", "边栏模式", "menu"),
+ showSidebar = atomWithStorage<boolean>("sidebar", "边栏", false),
+ forkMeOnGitHub = atomWithStorage<boolean>("fork-me-on-github", "Fork me on GitHub", false),
+ share = atomWithStorage<boolean>("share", "分享", isBrowser() ? "share" in navigator : false),
+ paletteColors = atomWithStorage<typeof defaultPalette>("palette", "调色板", defaultPalette),
+ viewMode = atomWithStorage<viewModeType>("viewmode", "列表模式", "list"),
+ darkMode = atomWithStorage<PaletteMode | "system">("darkmode", "暗色模式", "system"),
+ booleanifyDarkMode = atom(async get => {
+ const [gotAtom] = await get(darkMode);
+ let value = true;
+ switch (gotAtom) {
+ case "dark":
+ value = false;
+ break;
+ case "system":
+ if (isBrowser()) {
+ value = !(window.matchMedia("(prefers-color-scheme: dark)").matches);
+ }
+ break;
+ }
+ return value;
+ }), gradientTool = atomWithStorage<boolean>("gradient-tool", "工具渐变", false),
+ recentlyUsed = atomWithStorage<string[]>("recently-tools", "最近使用的工具", []),
+ mostUsed = atomWithStorage<mostUsedMarks>("most-tools", "最常使用的工具", {
+ }),
+ lists = atomWithStorage<listsType>("lists", "分类列表", []),
+ windows = atom<WindowOptions[]>([]);

packages/core/src/app/layout/langAtom.ts → packages/core/src/app/atoms/lang.ts

@@ -5,24 +5,26 @@ import {
 import setSetting from "setting/reader/setSetting";
 import settingReader from "setting/reader/settingReader";
 import {
- isBrowser,
  locales
-} from "./layoutClient";
-const valueAtom = atom("zhCN");
-valueAtom.onMount = setValue => {
- (async () => {
+} from "../layout/layoutClient";
+import isBrowser from "layout/isBrowser";
+const emptyString = "__lang__",
+ valueAtom = atom<keyof typeof locales | typeof emptyString>(emptyString);
+const langAtom = atom(async get => {
+ let value = get(valueAtom);
+ if (value === emptyString) {
  let browserLang: string = "zhCN";
  if (isBrowser()) {
  if (window.navigator.language || window.navigator.languages) {
  browserLang = ((window.navigator.languages && window.navigator.languages[0]) || window.navigator.language).split("-").join("") || "zhCN";
  }
  }
  const detailedLang = Object.keys(locales).includes(browserLang) ? browserLang : "zhCN",
- chooseOption = await settingReader("lang", detailedLang);
- setValue(chooseOption || "zhCN");
- })();
-};
-const langAtom = atom(get => get(valueAtom), (get, set, update: string) => {
+ chooseOption = await settingReader("lang", detailedLang) as keyof typeof locales;
+ value = chooseOption;
+ }
+ return value as keyof typeof locales;
+}, async (get, set, update: keyof typeof locales) => {
  set(valueAtom, update);
  setSetting("lang", "语言", update);
 });

packages/core/src/app/index/sidebar/selects/toolsListAtom.ts → packages/core/src/app/atoms/toolsList.ts

@@ -1,19 +1,18 @@
 "use client";
 import {
- atom,
- useAtom
+ atom
 } from "jotai";
-import extensionsAtom from "layout/extensionsAtom";
+import extensionsAtom from "atoms/extensions";
 import {
  lists as listsAtom
-} from "layout/layoutClient";
+} from "atoms";
 import {
  tool
 } from "tools/info";
-import convertExtensionTools from "../../convertExtensionTools";
-const toolsListAtom = atom(get => {
- const lists = get(listsAtom),
- extensionTools = get(extensionsAtom),
+import convertExtensionTools from "../index/convertExtensionTools";
+const toolsListAtom = atom(async get => {
+ const lists = await get(listsAtom),
+ extensionTools = await get(extensionsAtom),
  converted = convertExtensionTools(extensionTools),
  list = lists.find(item => item[0] === "__global__");
  /**

packages/core/src/app/index/triesAtom.ts → packages/core/src/app/atoms/tries.ts

@@ -3,21 +3,16 @@ import {
  not
 } from "components/TransferList";
 import {
- atom,
- useAtom
+ atom
 } from "jotai";
 import {
  mostUsed as mostUsedAtom
-} from "layout/layoutClient";
+} from ".";
 import {
- get
-} from "react-intl-universal";
-import {
- getTools,
  tool
 } from "tools/info";
-const triesAtom = atom(get => {
- const mostUsed = get(mostUsedAtom);
+const triesAtom = atom(async get => {
+ const mostUsed = await get(mostUsedAtom);
  return (realTools: tool[]) => {
  const unUsed = not(realTools.map(single => single.to), Object.keys(mostUsed)).slice(0, 3),
  isUnFull = unUsed.length < 3, // 判断没用过的工具有没有三个

packages/core/src/app/components/HeadBar.tsx

@@ -21,12 +21,14 @@ import {
 import {
  useAtom
 } from "jotai";
+import {
+ repoInfo
+} from "layout/layoutClient";
 import {
  forkMeOnGitHub as forkMeOnGitHubAtom,
- repoInfo,
  share as shareAtom,
  showSidebar
-} from "layout/layoutClient";
+} from "atoms";
 import Link from "next/link";
 import {
  useRouter
@@ -188,7 +190,9 @@ export default function HeadBar(props: HeadBarOption): JSX.Element {
  backgroundColor: "rgb(170, 0, 0)",
  backgroundImage: "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))",
  top: 45
- }}>Fork me on GitHub</a>
+ }}>
+ Fork me on GitHub
+ </a>
  </Box>
  ) : <Fragment />
  }

packages/core/src/app/components/Popover.tsx

@@ -42,7 +42,9 @@ export default function MouseOverPopover(props: {
  }} onClose={handlePopoverClose} aria-label={props.text} disableRestoreFocus>
  <Typography sx={{
  p: 1
- }}>{props.text}</Typography>
+ }}>
+ {props.text}
+ </Typography>
  </Popover>
  </Box>
  );

packages/core/src/app/components/TransferList.tsx

@@ -124,7 +124,9 @@ export default function TransferList(props: {
  <Grid container spacing={2} justifyContent="center" alignItems="center" sx={{
  p: theme => theme.spacing(1, 0)
  }}>
- <Grid item>{customList(left)}</Grid>
+ <Grid item>
+ {customList(left)}
+ </Grid>
  <Grid item>
  <Grid container direction="column" alignItems="center">
  <Button
@@ -177,7 +179,9 @@ export default function TransferList(props: {
  </Button>
  </Grid>
  </Grid>
- <Grid item>{customList(right)}</Grid>
+ <Grid item>
+ {customList(right)}
+ </Grid>
  </Grid>
  );
 }

packages/core/src/app/components/dialog/CheckDialog.tsx

@@ -28,7 +28,9 @@ export default function CheckDialog(props: {
  descriptionId = `${startId}-check-dialog-description`;
  return (
  <Dialog sx={props.sx} open={props.open} TransitionComponent={Transition} aria-describedby={descriptionId}>
- <DialogTitle>{props.title}</DialogTitle>
+ <DialogTitle>
+ {props.title}
+ </DialogTitle>
  <DialogContent>
  <DialogContentText id={descriptionId}>
  {props.description}
@@ -38,10 +40,14 @@ export default function CheckDialog(props: {
  <DialogActions>
  <Button onClick={() => {
  props.onFalse();
- }}>{get("取消")}</Button>
+ }}>
+ {get("取消")}
+ </Button>
  <Button onClick={() => {
  props.onTrue();
- }}>{get("确定")}</Button>
+ }}>
+ {get("确定")}
+ </Button>
  </DialogActions>
  </Dialog>
  );

packages/core/src/app/components/dialog/InputDialog.tsx

@@ -32,7 +32,9 @@ export default function InputDialog(props: {
  };
  return (
  <Dialog open={props.open} onClose={handleClose} TransitionComponent={Transition} keepMounted>
- <DialogTitle>{props.title}</DialogTitle>
+ <DialogTitle>
+ {props.title}
+ </DialogTitle>
  <DialogContent>
  <DialogContentText>
  {props.context}
@@ -42,7 +44,9 @@ export default function InputDialog(props: {
  }} />
  </DialogContent>
  <DialogActions>
- <Button onClick={event => props.onDone(input)}>{get("确定")}</Button>
+ <Button onClick={event => props.onDone(input)}>
+ {get("确定")}
+ </Button>
  </DialogActions>
  </Dialog>
  );

packages/core/src/app/components/dialog/PureDialog.tsx

@@ -31,7 +31,9 @@ export default function PureDialog(props: {
  };
  return (
  <BootstrapDialog {...props.add} onClose={handleClose} open={props.open} TransitionComponent={Transition}>
- <BootstrapDialogTitle onClose={handleClose}>{props.title}</BootstrapDialogTitle>
+ <BootstrapDialogTitle onClose={handleClose}>
+ {props.title}
+ </BootstrapDialogTitle>
  <DialogContent dividers>
  {props.children}
  </DialogContent>

packages/core/src/app/index/showTool/SingleTool.tsx

@@ -29,7 +29,7 @@ import {
  gradientTool as gradientToolAtom,
  lists as listsAtom,
  windows as windowsAtom
-} from "layout/layoutClient";
+} from "atoms";
 import {
  Route
 } from "next";
@@ -56,7 +56,7 @@ import UpButton from "../sorting/UpButton";
 const CheckDialog = dynamic(() => import("dialog/Check"));
 import {
  viewMode as viewModeAtom
-} from "layout/layoutClient";
+} from "atoms";
 export default function SingleTool(props: {
  tool: tool;
  isFirst: boolean;

packages/core/src/app/index/showTool/index.tsx

@@ -18,7 +18,7 @@ import {
 } from "jotai";
 import {
  viewMode as viewModeAtom
-} from "layout/layoutClient";
+} from "atoms";
 import {
  get
 } from "react-intl-universal";

packages/core/src/app/index/sidebar/buttons/SwitchViewMode.tsx

@@ -12,7 +12,7 @@ import {
 } from "jotai";
 import {
  viewMode as viewModeAtom
-} from "layout/layoutClient";
+} from "atoms";
 export default function SwitchViewMode() {
  const [viewMode, setViewMode] = useAtom(viewModeAtom);
  return (

packages/core/src/app/index/sidebar/buttons/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "declare";
 import {
  viewMode as viewModeAtom
-} from "layout/layoutClient";
+} from "atoms";
 import dynamic from "next/dynamic";
 import {
  useState

packages/core/src/app/index/sidebar/index.tsx

@@ -19,7 +19,7 @@ import {
 } from "jotai";
 import {
  lists
-} from "layout/layoutClient";
+} from "atoms";
 import {
  useState
 } from "react";
@@ -34,7 +34,7 @@ import {
 } from "tools/info";
 import {
  viewMode as viewModeAtom
-} from "layout/layoutClient";
+} from "atoms";
 import Buttons from "./buttons";
 import Selects from "./selects";
 import SingleSelect from "./selects/SingleSelect";

packages/core/src/app/index/sidebar/selects/EditToolsListDialog.tsx

@@ -11,10 +11,10 @@ import {
 import {
  useAtom
 } from "jotai";
-import extensionsAtom from "layout/extensionsAtom";
+import extensionsAtom from "atoms/extensions";
 import {
  lists as listsAtom
-} from "layout/layoutClient";
+} from "atoms";
 import dynamic from "next/dynamic";
 import {
  get
@@ -26,7 +26,7 @@ import {
  lists
 } from "..";
 import convertExtensionTools from "../../convertExtensionTools";
-import toolsListAtom from "./toolsListAtom";
+import toolsListAtom from "atoms/toolsList";
 const PureDialog = dynamic(() => import("dialog/Pure"));
 export default function EditToolsListDialog(props: {
  dialogTools: string[];