Skip to content

Commit 812d5aa

Browse files
krizzukrizzu
committed
feat(async-storage): web legacy + web example improvement
1 parent cf86924 commit 812d5aa

File tree

18 files changed

+806
-208
lines changed

18 files changed

+806
-208
lines changed

‎examples/example-react-native/macos/Podfile.lock‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1357,6 +1357,81 @@ PODS:
13571357
- React-jsiexecutor
13581358
- React-RCTFBReactNativeSpec
13591359
- ReactCommon/turbomodule/core
1360+
- react-native-safe-area-context (5.6.1):
1361+
- DoubleConversion
1362+
- glog
1363+
- hermes-engine
1364+
- RCT-Folly (= 2024.11.18.00)
1365+
- RCTRequired
1366+
- RCTTypeSafety
1367+
- React-Core
1368+
- React-debug
1369+
- React-Fabric
1370+
- React-featureflags
1371+
- React-graphics
1372+
- React-hermes
1373+
- React-ImageManager
1374+
- React-jsi
1375+
- react-native-safe-area-context/common (= 5.6.1)
1376+
- react-native-safe-area-context/fabric (= 5.6.1)
1377+
- React-NativeModulesApple
1378+
- React-RCTFabric
1379+
- React-renderercss
1380+
- React-rendererdebug
1381+
- React-utils
1382+
- ReactCodegen
1383+
- ReactCommon/turbomodule/bridging
1384+
- ReactCommon/turbomodule/core
1385+
- Yoga
1386+
- react-native-safe-area-context/common (5.6.1):
1387+
- DoubleConversion
1388+
- glog
1389+
- hermes-engine
1390+
- RCT-Folly (= 2024.11.18.00)
1391+
- RCTRequired
1392+
- RCTTypeSafety
1393+
- React-Core
1394+
- React-debug
1395+
- React-Fabric
1396+
- React-featureflags
1397+
- React-graphics
1398+
- React-hermes
1399+
- React-ImageManager
1400+
- React-jsi
1401+
- React-NativeModulesApple
1402+
- React-RCTFabric
1403+
- React-renderercss
1404+
- React-rendererdebug
1405+
- React-utils
1406+
- ReactCodegen
1407+
- ReactCommon/turbomodule/bridging
1408+
- ReactCommon/turbomodule/core
1409+
- Yoga
1410+
- react-native-safe-area-context/fabric (5.6.1):
1411+
- DoubleConversion
1412+
- glog
1413+
- hermes-engine
1414+
- RCT-Folly (= 2024.11.18.00)
1415+
- RCTRequired
1416+
- RCTTypeSafety
1417+
- React-Core
1418+
- React-debug
1419+
- React-Fabric
1420+
- React-featureflags
1421+
- React-graphics
1422+
- React-hermes
1423+
- React-ImageManager
1424+
- React-jsi
1425+
- react-native-safe-area-context/common
1426+
- React-NativeModulesApple
1427+
- React-RCTFabric
1428+
- React-renderercss
1429+
- React-rendererdebug
1430+
- React-utils
1431+
- ReactCodegen
1432+
- ReactCommon/turbomodule/bridging
1433+
- ReactCommon/turbomodule/core
1434+
- Yoga
13601435
- React-NativeModulesApple (0.79.0):
13611436
- glog
13621437
- hermes-engine
@@ -1754,6 +1829,7 @@ DEPENDENCIES:
17541829
- React-logger (from `../node_modules/react-native-macos/ReactCommon/logger`)
17551830
- React-Mapbuffer (from `../node_modules/react-native-macos/ReactCommon`)
17561831
- React-microtasksnativemodule (from `../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks`)
1832+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
17571833
- React-NativeModulesApple (from `../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios`)
17581834
- React-oscompat (from `../node_modules/react-native-macos/ReactCommon/oscompat`)
17591835
- React-perflogger (from `../node_modules/react-native-macos/ReactCommon/reactperflogger`)
@@ -1871,6 +1947,8 @@ EXTERNAL SOURCES:
18711947
:path: "../node_modules/react-native-macos/ReactCommon"
18721948
React-microtasksnativemodule:
18731949
:path: "../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks"
1950+
react-native-safe-area-context:
1951+
:path: "../node_modules/react-native-safe-area-context"
18741952
React-NativeModulesApple:
18751953
:path: "../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios"
18761954
React-oscompat:
@@ -1984,6 +2062,7 @@ SPEC CHECKSUMS:
19842062
React-logger: 043ab0e246d3d88fbc37220e564d8c54150f5cd1
19852063
React-Mapbuffer: ff9b8a32826894e5da46d6eaa48ade8b61e81a26
19862064
React-microtasksnativemodule: ae37563c9c6d7e035310598d47e96cc8880461f6
2065+
react-native-safe-area-context: 895c49ee2613865f90318789be89a8e286fe7b69
19872066
React-NativeModulesApple: a426299adfeb1475725fe03ba6396274f7e91232
19882067
React-oscompat: 2098ea5138dec4d965bd9f0fac95fc8419f64087
19892068
React-perflogger: a0b5553ee2c4577708376bb577674eaf01413ca2

‎examples/example-react-native/src/tests/BasicTests.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,18 @@ const BasicTests: React.FC<Props> = ({ storage }) => {
4545
await storage.getMany(keysToFetch)
4646
);
4747

48+
addLog(`removing ${key}`);
49+
await storage.removeItem(key);
50+
addLog(`current ${key} value:`, await storage.getItem(key));
51+
4852
value = `value-${Math.round(Math.random() * 1000)}`;
49-
addLog(`Overriding ${key} with value ${value}`);
53+
addLog(`Saving new ${key} value: ${value}`);
5054
await storage.setItem(key, value);
5155
addLog(`current ${key} value:`, await storage.getItem(key));
5256

53-
addLog(`removing ${key}`);
54-
await storage.removeItem(key);
57+
value = `value-${Math.round(Math.random() * 1000)}`;
58+
addLog(`Overriding ${key} value: ${value}`);
59+
await storage.setItem(key, value);
5560
addLog(`current ${key} value:`, await storage.getItem(key));
5661

5762
keysToFetch = [key, "missing-key-1", "missing-key-2"];

‎examples/example-web/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/react.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="/src/style.css" rel="stylesheet">
78
<title>AsyncStorage for Web</title>
89
</head>
910
<body>
1011
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
12+
<script type="module" src="/src/App.tsx"></script>
1213
</body>
1314
</html>

‎examples/example-web/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8+
"start": "vite",
89
"build": "tsc -b && vite build",
910
"test:lint": "eslint .",
1011
"test:ts": "tsc --noEmit -p tsconfig.app.json",
@@ -13,8 +14,10 @@
1314
"dependencies": {
1415
"@react-native-async-storage/async-storage": "workspace:*",
1516
"@react-native-async-storage/eslint-config": "workspace:*",
17+
"@tailwindcss/vite": "^4.1.13",
1618
"react": "19.1.1",
17-
"react-dom": "19.1.1"
19+
"react-dom": "19.1.1",
20+
"tailwindcss": "^4.1.13"
1821
},
1922
"installConfig": {
2023
"hoistingLimits": "workspaces"

‎examples/example-web/src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎examples/example-web/src/App.tsx‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,63 @@
1-
import "./App.css";
2-
import BasicCrud from "./BasicCrud";
1+
import { StrictMode, useState } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import BasicTest from "./tests/BasicTests";
4+
import WithAsyncStorage from "./WithAsyncStorage";
5+
import WithLegacyStorage from "./WithLegacyStorage";
36

47
function App() {
8+
const [example, setExample] = useState<"basic" | "legacy-basic">("basic");
9+
510
return (
6-
<>
7-
<h1>AsyncStorage for web</h1>
8-
<div className="card">
9-
<BasicCrud />
11+
<div className="flex flex-col flex-1 min-h-screen">
12+
<div className="flex flex-row justify-center gap-1 p-2 mb-12">
13+
<Tab
14+
title="Basic"
15+
active={example === "basic"}
16+
onPress={() => setExample("basic")}
17+
/>
18+
19+
<Tab
20+
title="Basic (Legacy)"
21+
active={example === "legacy-basic"}
22+
onPress={() => setExample("legacy-basic")}
23+
/>
24+
</div>
25+
26+
<div className="flex-1">
27+
{(() => {
28+
switch (example) {
29+
case "basic":
30+
return (
31+
<WithAsyncStorage dbName="test-db" TestComponent={BasicTest} />
32+
);
33+
case "legacy-basic":
34+
return <WithLegacyStorage TestComponent={BasicTest} />;
35+
default:
36+
return null;
37+
}
38+
})()}
1039
</div>
11-
</>
40+
</div>
1241
);
1342
}
1443

15-
export default App;
44+
const Tab: React.FC<{
45+
active: boolean;
46+
title: string;
47+
onPress: () => void;
48+
}> = ({ active, title, onPress }) => {
49+
return (
50+
<button
51+
onClick={onPress}
52+
className={`px-3 py-2 text-white rounded ${active ? "bg-[#F42C04]" : "bg-[#625F63AA]"}`}
53+
>
54+
{title}
55+
</button>
56+
);
57+
};
58+
59+
createRoot(document.getElementById("root")!).render(
60+
<StrictMode>
61+
<App />
62+
</StrictMode>
63+
);

‎examples/example-web/src/BasicCrud.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎examples/example-web/src/WithAsyncStorage.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { AsyncStorage } from "@react-native-async-storage/async-storage";
2+
import { createAsyncStorage } from "@react-native-async-storage/async-storage";
3+
import type React from "react";
4+
import { useState } from "react";
5+
6+
type Props = {
7+
dbName: string;
8+
TestComponent: React.FC<{ storage: AsyncStorage }>;
9+
};
10+
11+
const WithAsyncStorage: React.FC<Props> = ({ TestComponent, dbName }) => {
12+
const [storage] = useState(() => createAsyncStorage(dbName));
13+
14+
return <TestComponent storage={storage} />;
15+
};
16+
17+
export default WithAsyncStorage;

‎examples/example-web/src/WithLegacyStorage.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { AsyncStorage } from "@react-native-async-storage/async-storage";
2+
import LegacyAsyncStorage from "@react-native-async-storage/async-storage";
3+
import type React from "react";
4+
5+
type Props = {
6+
TestComponent: React.FC<{ storage: AsyncStorage }>;
7+
};
8+
9+
const WithLegacyStorage: React.FC<Props> = ({ TestComponent }) => {
10+
return <TestComponent storage={LegacyAsyncStorage} />;
11+
};
12+
13+
export default WithLegacyStorage;

0 commit comments

Comments
 (0)