🧱 atomWithBroadcast

packages/core/package.json

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

packages/core/src/app/declare.ts

@@ -23,8 +23,8 @@ export interface BeforeInstallPromptEvent extends Event {
  * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
  */
  readonly userChoice: Promise<{
- outcome: "accepted" | "dismissed",
- platform: string
+ outcome: "accepted" | "dismissed";
+ platform: string;
  }>;
 
  /**

packages/shared/Popover.tsx

@@ -29,7 +29,10 @@ export default function MouseOverPopover(props: {
  {props.children}
  </Box>
  <Popover classes={{
- root: "mouse-over-popover" /* 暂时没用，仅作为标记 */
+ /**
+ * 暂时没用，仅作为标记
+ */
+ root: "mouse-over-popover"
  }} sx={{
  pointerEvents: "none",
  zIndex: "38602"

packages/shared/atoms/recommend/index.ts

@@ -9,9 +9,12 @@ import getTries from "./getTries";
 import atomWithInitialValue, {
  valueAtomReturn
 } from "../../reader/atomWithInitialValue";
+import {
+ emptySymbol
+} from "../../reader/atomWithStorage";
 const [recommendAtom] = atomWithInitialValue((valueAtom: valueAtomReturn<tool[]>) => atom(get => {
  const got = get(valueAtom);
- if (typeof got === "symbol") {
+ if (got === emptySymbol) {
  return getTries(get);
  }
  return got;

packages/shared/reader/atomWithBroadcast.ts

@@ -0,0 +1,43 @@
+export default function atomWithBroadcast<Value, Arg, Result>(read: (get: Getter) => Value, write: Write<Arg, Result>, broadcastChannelId: string) {
+ const created = atom(read, (get, set, update: Arg | {
+ __atom_update_type__: "message",
+ update: Arg;
+ }) => {
+ let message = false;
+ if (typeof update === "object") {
+ if ("__atom_update_type__" in update) {
+ if (update.__atom_update_type__ === "message") {
+ write(get, set, update.update);
+ message = true;
+ }
+ }
+ }
+ if (!message) {
+ write(get, set, update as Arg);
+ const channel = new BroadcastChannel(broadcastChannelId);
+ channel.postMessage(update);
+ }
+ });
+ created.debugLabel = broadcastChannelId;
+ created.onMount = setAtom => {
+ const channel = new BroadcastChannel(broadcastChannelId);
+ channel.addEventListener("message", event => {
+ setAtom({
+ __atom_update_type__: "message",
+ update: event.data
+ });
+ });
+ };
+ return created;
+}
+import {
+ Atom,
+ WritableAtom,
+ atom
+} from "jotai";
+/**
+ * @source jotai/atom.d.ts
+ */
+type Getter = <Value>(atom: Atom<Value>) => Value;
+type Setter = <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
+type Write<Arg, Result> = (get: Getter, set: Setter, arg: Arg) => Result;

packages/shared/reader/atomWithStorage.ts

@@ -1,50 +1,19 @@
-import {
- atom
-} from "jotai";
-import setSetting from "./setSetting";
-import settingReader from "./settingReader";
+import atomWithBroadcast from "./atomWithBroadcast";
 import atomWithInitialValue, {
  valueAtomReturn
 } from "./atomWithInitialValue";
+import setSetting from "./setSetting";
+import settingReader from "./settingReader";
 export const emptySymbol: unique symbol = Symbol("This atom is empty, it's waiting a value.");
-const atomWithStorage = <setting = any>(id: string, name: string, empty: setting) => atomWithInitialValue((valueAtom: valueAtomReturn<setting>) => {
- const packagedAtom = atom(get => {
- const got = get(valueAtom);
- if (typeof got === "symbol") {
- const value = settingReader(id, empty);
- return value;
- }
- return got;
- }, (get, set, update: setting | {
- __atom_update_type__: "message",
- update: setting;
- }) => {
- let message = false;
- if (typeof update === "object") {
- if ("__atom_update_type__" in update) {
- if (update.__atom_update_type__ === "message") {
- set(valueAtom, update.update);
- message = true;
- }
- }
- }
- if (!message) {
- set(valueAtom, update as setting);
- setSetting(id, name, update);
- const channel = new BroadcastChannel(`atomWithStorage-${id}`);
- channel.postMessage(update);
- }
- });
- packagedAtom.debugLabel = id;
- packagedAtom.onMount = setAtom => {
- const channel = new BroadcastChannel(`atomWithStorage-${id}`);
- channel.addEventListener("message", event => {
- setAtom({
- __atom_update_type__: "message",
- update: event.data
- });
- });
- };
- return packagedAtom;
-})[0];
+const atomWithStorage = <setting = any>(id: string, name: string, empty: setting) => atomWithInitialValue((valueAtom: valueAtomReturn<setting>) => atomWithBroadcast(get => {
+ const got = get(valueAtom);
+ if (got === emptySymbol) {
+ const value = settingReader(id, empty);
+ return value;
+ }
+ return got;
+}, (get, set, update: setting) => {
+ set(valueAtom, update);
+ setSetting(id, name, update);
+}, `storagedAtom-${id}`))[0];
 export default atomWithStorage;

packages/tools/tool-countletter/page.tsx

@@ -51,7 +51,7 @@ function CountLetter(): JSX.Element {
  }} title={get("输入字符")} label={get("在这里输入")} />
  <AlertDialog open={alertDialogOpen} title={get("输出")} description={out} onDone={() => {
  setAlertDialogOpen(false);
- }} /> {/* 输出对话框容器 */}
+ }} />
  </Box>
  <FormControl component="section">
  <FormLabel id={systemId}>

packages/tools/tool-cylinder/page.tsx

@@ -27,6 +27,10 @@ import {
  throttle
 } from "throttle-debounce";
 import Cylinder from "./makeCylinder";
+/**
+ * 1000(ms, = 1s) / 60(60fps) = 17(ms)
+ */
+const throttleTime = 17;
 function CylinderPage(): JSX.Element {
  const [radiusX, setRadiusX] = useState<number>(50),
  [radiusZ, setRadiusZ] = useState<number>(50),
@@ -41,7 +45,7 @@ function CylinderPage(): JSX.Element {
  posCache = useRef<block>([1, 1]),
  cache = useRef<block[]>([]),
  blocks = useMemo(() => new Cylinder(radiusX, radiusZ, thickness, filled), [radiusX, radiusZ, thickness, filled]),
- updatePos = throttle(17 /* 1000(ms, = 1s) / 60(60fps) = 17(ms) */, (X: number, Z: number) => {
+ updatePos = throttle(throttleTime, (X: number, Z: number) => {
  drawMatrix(blocks.slice(0), Math.max(radiusX, radiusZ), X, Z, posCache.current, cache.current, theme.palette, true);
  posCache.current = [X, Z];
  cache.current = blocks.slice(0);