Skip to content

Commit dc2231d

Browse files
robin-drexlerrobin-drexler
committed
add playground
1 parent 2633d11 commit dc2231d

5 files changed

Lines changed: 179 additions & 3 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"test": "vitest",
2424
"type-check": "tsc --noEmit",
2525
"type-check:watch": "tsc --noEmit --watch",
26-
"prepublishOnly": "npm run build"
26+
"prepublishOnly": "npm run build",
27+
"playground": "vite"
2728
},
2829
"keywords": [
2930
"storage",
@@ -42,7 +43,7 @@
4243
"playwright": "^1.53.0",
4344
"rolldown": "^1.0.0-beta.15",
4445
"typescript": "^5.8.3",
46+
"vite": "^6.3.5",
4547
"vitest": "^3.2.3"
46-
},
47-
"dependencies": {}
48+
}
4849
}

‎playground/index.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Expirix Playground</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
10+
sans-serif;
11+
margin: 0;
12+
padding: 40px;
13+
background: #f8fafc;
14+
color: #2d3748;
15+
line-height: 1.6;
16+
}
17+
18+
.container {
19+
max-width: 800px;
20+
margin: 0 auto;
21+
background: white;
22+
padding: 40px;
23+
border-radius: 12px;
24+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
25+
}
26+
27+
h1 {
28+
font-size: 2.5rem;
29+
margin-bottom: 10px;
30+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
31+
-webkit-background-clip: text;
32+
-webkit-text-fill-color: transparent;
33+
background-clip: text;
34+
}
35+
36+
.subtitle {
37+
font-size: 1.2rem;
38+
color: #718096;
39+
margin-bottom: 30px;
40+
}
41+
42+
.instructions {
43+
background: #edf2f7;
44+
padding: 20px;
45+
border-radius: 8px;
46+
margin-bottom: 20px;
47+
}
48+
49+
.instructions h3 {
50+
margin-top: 0;
51+
color: #2d3748;
52+
}
53+
54+
code {
55+
background: #e2e8f0;
56+
padding: 2px 6px;
57+
border-radius: 4px;
58+
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
59+
monospace;
60+
font-size: 0.9em;
61+
}
62+
63+
.code-block {
64+
background: #2d3748;
65+
color: #e2e8f0;
66+
padding: 20px;
67+
border-radius: 8px;
68+
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
69+
monospace;
70+
overflow-x: auto;
71+
margin: 15px 0;
72+
white-space: pre;
73+
line-height: 1.5;
74+
}
75+
76+
.status {
77+
background: #c6f6d5;
78+
color: #22543d;
79+
padding: 10px 15px;
80+
border-radius: 6px;
81+
margin-top: 20px;
82+
border-left: 4px solid #38a169;
83+
}
84+
</style>
85+
</head>
86+
<body>
87+
<div class="container">
88+
<h1>🚀 Expirix Playground</h1>
89+
<p class="subtitle">
90+
Experiment with ephemeral storage in the browser console
91+
</p>
92+
93+
<div class="instructions">
94+
<h3>📖 How to use</h3>
95+
<p>
96+
Open your browser's developer console (F12 or Cmd+Option+I) and start
97+
experimenting!
98+
</p>
99+
100+
<p><strong>Available global variables:</strong></p>
101+
<ul>
102+
<li>
103+
<code>storage</code> - Wrapped localStorage with 60 seconds expiry
104+
</li>
105+
<li>
106+
<code>wrapStorage</code> - The wrapStorage function to create your
107+
own instances
108+
</li>
109+
</ul>
110+
111+
<p><strong>Try these commands:</strong></p>
112+
<div class="code-block">// Set a value that expires in 60 seconds
113+
storage.setItem("user", "John Doe")
114+
115+
// Get the value
116+
storage.getItem("user") // "John Doe"
117+
118+
// Wait 60+ seconds and try again
119+
storage.getItem("user") // null (expired)
120+
121+
// Create your own storage with different expiry
122+
const quickStorage = wrapStorage(localStorage, { expiresInSeconds: 10 })
123+
quickStorage.setItem("temp", "expires quickly")
124+
125+
// Other methods
126+
storage.removeItem("user")
127+
storage.clear()
128+
storage.length
129+
storage.key(0)</div>
130+
</div>
131+
132+
<div class="status">
133+
✅ Library loaded and ready! Check the console for the
134+
<code>storage</code> variable.
135+
</div>
136+
</div>
137+
138+
<script type="module" src="./main.js"></script>
139+
</body>
140+
</html>

‎playground/main.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { wrapStorage } from "../src/index.mjs";
2+
3+
// Create wrapped storage with 60 seconds expiry and make it globally available
4+
window.storage = wrapStorage(localStorage, { expiresInSeconds: 60 });
5+
6+
// Also expose the wrapStorage function globally for custom configurations
7+
window.wrapStorage = wrapStorage;
8+
9+
// Log to console that everything is ready
10+
console.log("🚀 Expirix loaded!");
11+
console.log("Available globals:");
12+
console.log(" storage - Pre-configured localStorage with 60s expiry");
13+
console.log(" wrapStorage - Function to create custom storage instances");
14+
console.log("");
15+
console.log("Try it out:");
16+
console.log(' storage.setItem("test", "hello world")');
17+
console.log(' storage.getItem("test")');

‎vite.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineConfig } from "vite";
2+
3+
export default defineConfig({
4+
// Set playground as the root directory
5+
root: "playground",
6+
// Use index.html as the entry point
7+
build: {
8+
rollupOptions: {
9+
input: "playground/index.html",
10+
},
11+
},
12+
// Configure dev server
13+
server: {
14+
open: true, // Open index.html automatically
15+
port: 3000,
16+
},
17+
});

0 commit comments

Comments
 (0)