close
Skip to content

Commit f341e37

Browse files
productdevbookclaude
productdevbook
and
claude
committed
feat: add Vite playground (Chatwoot-first)
playground/ is a plain Vite + TS sandbox that imports Chatwoot straight from ../src/providers/chatwoot.ts so edits hot-reload without a build step. UI has forms for every unified method (load, identify, track, pageView, show, hide, setLocale, setLabel, shutdown, destroy) plus a live event log wired to on()/onUnreadCountChange/onIdentityChange. - pnpm playground boots the Vite dev server on :5173 - oxlint + oxfmt ignore playground/ so it doesn't inherit the main repo's semi: false style rules - .gitignore excludes playground/dist and playground/.vite Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 4756a09 commit f341e37

File tree

11 files changed

+828
-2
lines changed

11 files changed

+828
-2
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ node_modules
22
dist
33
*.tgz
44
.DS_Store
5+
playground/dist
6+
playground/.vite

‎.oxfmtrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"$schema": "https://unpkg.com/oxfmt/configuration_schema.json",
33
"semi": false,
4-
"ignorePatterns": ["CHANGELOG.md"]
4+
"ignorePatterns": ["CHANGELOG.md", "playground/**"]
55
}

‎.oxlintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://unpkg.com/oxlint/configuration_schema.json",
33
"plugins": ["unicorn", "typescript", "oxc"],
4-
"ignorePatterns": [],
4+
"ignorePatterns": ["playground/**"],
55
"rules": {}
66
}

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,22 @@ Same shape works for `react-zendesk`, `tawk-messenger-react`,
397397
across all of them: `ahize` separates **boot** (`load`) from **user
398398
identity** (`identify`).
399399
400+
## Playground
401+
402+
A plain Vite + TypeScript playground is checked into `playground/` for
403+
trying a real widget in the browser without setting up a framework.
404+
405+
```sh
406+
pnpm playground
407+
```
408+
409+
That installs the playground's own deps (vite, typescript) and opens the
410+
dev server on `http://localhost:5173`. It imports the Chatwoot provider
411+
directly from `../src/providers/chatwoot.ts`, so any code change in
412+
`src/` reloads instantly — no build step. Paste your `websiteToken` (and
413+
`baseUrl` if self-hosted), hit **load()**, then play with
414+
identify/track/show/hide/setLocale and watch the event log.
415+
400416
## Contributing
401417

402418
Issues and PRs welcome at

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@
227227
"test": "pnpm lint && pnpm typecheck && vitest run",
228228
"typecheck": "tsgo --noEmit",
229229
"bundle-budget": "node scripts/bundle-budget.mjs",
230+
"playground": "cd playground && pnpm install && pnpm dev",
230231
"attw": "pnpm dlx @arethetypeswrong/cli --pack . --profile esm-only",
231232
"release": "pnpm test && pnpm build && pnpm bundle-budget && bumpp --commit --tag --push --all",
232233
"prepack": "pnpm build"

‎playground/index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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>ahize — Chatwoot playground</title>
7+
<style>
8+
:root {
9+
color-scheme: light dark;
10+
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
padding: 2rem;
15+
max-width: 720px;
16+
margin-inline: auto;
17+
}
18+
h1 {
19+
margin-top: 0;
20+
font-size: 1.5rem;
21+
}
22+
.card {
23+
border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
24+
border-radius: 12px;
25+
padding: 1.25rem;
26+
margin-block: 1rem;
27+
}
28+
label {
29+
display: block;
30+
margin-block: 0.5rem 0.25rem;
31+
font-size: 0.85rem;
32+
opacity: 0.75;
33+
}
34+
input,
35+
button {
36+
font: inherit;
37+
padding: 0.5rem 0.75rem;
38+
border-radius: 8px;
39+
border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
40+
background: transparent;
41+
color: inherit;
42+
}
43+
input {
44+
width: 100%;
45+
box-sizing: border-box;
46+
}
47+
button {
48+
cursor: pointer;
49+
margin: 0.25rem 0.25rem 0.25rem 0;
50+
}
51+
button:hover {
52+
background: color-mix(in srgb, currentColor 6%, transparent);
53+
}
54+
.row {
55+
display: flex;
56+
flex-wrap: wrap;
57+
gap: 0.5rem;
58+
}
59+
pre {
60+
background: color-mix(in srgb, currentColor 5%, transparent);
61+
padding: 1rem;
62+
border-radius: 8px;
63+
overflow-x: auto;
64+
font-size: 0.8rem;
65+
max-height: 240px;
66+
overflow-y: auto;
67+
}
68+
.badge {
69+
display: inline-block;
70+
padding: 0.125rem 0.5rem;
71+
border-radius: 999px;
72+
font-size: 0.75rem;
73+
font-weight: 600;
74+
background: color-mix(in srgb, currentColor 10%, transparent);
75+
}
76+
.badge.ready {
77+
background: #22c55e;
78+
color: white;
79+
}
80+
.badge.loading {
81+
background: #f59e0b;
82+
color: white;
83+
}
84+
.badge.idle {
85+
background: color-mix(in srgb, currentColor 20%, transparent);
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
<h1>
91+
ahize · Chatwoot playground
92+
<span id="state" class="badge idle">idle</span>
93+
</h1>
94+
95+
<div class="card">
96+
<strong>load()</strong>
97+
<label>websiteToken</label>
98+
<input id="websiteToken" placeholder="your-chatwoot-inbox-token" />
99+
<label>baseUrl (optional — defaults to app.chatwoot.com)</label>
100+
<input id="baseUrl" placeholder="https://app.chatwoot.com" />
101+
<div class="row" style="margin-top: 0.75rem">
102+
<button id="load">load()</button>
103+
<button id="shutdown">shutdown()</button>
104+
<button id="destroy">destroy()</button>
105+
</div>
106+
</div>
107+
108+
<div class="card">
109+
<strong>identify()</strong>
110+
<label>id</label>
111+
<input id="uid" value="user_1" />
112+
<label>email</label>
113+
<input id="email" value="ada@example.com" />
114+
<label>name</label>
115+
<input id="name" value="Ada Lovelace" />
116+
<label>identifier_hash (HMAC, optional)</label>
117+
<input id="hash" placeholder="HMAC-SHA256(id, inbox_hmac_token)" />
118+
<div class="row" style="margin-top: 0.75rem">
119+
<button id="identify">identify()</button>
120+
</div>
121+
</div>
122+
123+
<div class="card">
124+
<strong>track() & pageView()</strong>
125+
<label>event name</label>
126+
<input id="event" value="plan_upgraded" />
127+
<label>metadata JSON</label>
128+
<input id="meta" value='{"tier":"pro"}' />
129+
<div class="row" style="margin-top: 0.75rem">
130+
<button id="track">track()</button>
131+
<button id="pageView">pageView()</button>
132+
</div>
133+
</div>
134+
135+
<div class="card">
136+
<strong>widget</strong>
137+
<div class="row">
138+
<button id="show">show()</button>
139+
<button id="hide">hide()</button>
140+
<button id="setLocale">setLocale('tr')</button>
141+
<button id="setLabel">setLabel('vip')</button>
142+
</div>
143+
</div>
144+
145+
<div class="card">
146+
<strong>event log</strong>
147+
<pre id="log"></pre>
148+
</div>
149+
150+
<script type="module" src="/src/main.ts"></script>
151+
</body>
152+
</html>

‎playground/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "ahize-playground",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"typescript": "^6.0.2",
13+
"vite": "^8.0.8"
14+
}
15+
}

0 commit comments

Comments
 (0)