Skip to content

Commit 525a4d0

Browse files
jesperorbjesperorb
committed
chore: update actions and instructions
1 parent a30d620 commit 525a4d0

File tree

6 files changed

+175
-63
lines changed

6 files changed

+175
-63
lines changed

‎.github/actions/setup-node/action.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: "Setup node, pnpm and install dependencies"
2+
3+
inputs:
4+
node-version:
5+
description: 'Which node version to use'
6+
required: true
7+
pnpm-version:
8+
description: 'Which pnpm version to use'
9+
required: true
10+
11+
runs:
12+
using: "composite"
13+
steps:
14+
- uses: actions/checkout@v4
15+
- uses: pnpm/action-setup@v4
16+
with:
17+
version: ${{ inputs.pnpm-version }}
18+
- name: Setup node
19+
uses: actions/setup-node@v6
20+
with:
21+
node-version: ${{ inputs.node-version }}
22+
cache: "pnpm"
23+
- name: Install dependencies
24+
run: pnpm install

‎.github/copilot-instructions.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# AI Agent Instructions for Intl Explorer
2+
3+
## Project Overview
4+
Intl Explorer is an interactive SvelteKit application for experimenting with the ECMAScript Internationalization API (`Intl`). The app provides live playgrounds for each `Intl` method (NumberFormat, DateTimeFormat, etc.) with dynamic option controls, browser compatibility data, and i18n support.
5+
6+
## Architecture & Key Patterns
7+
8+
### Core Structure
9+
- **SvelteKit 5** app with file-based routing deployed on Cloudflare
10+
- **Paraglide.js** for i18n with URL strategy (`$paraglide/messages`)
11+
- **Melt UI** component library with custom preprocessing
12+
- **MDN Browser Compat Data** integration for live compatibility checking
13+
- **Playwright** for E2E testing with custom page object models
14+
15+
### Format Method System
16+
Each `Intl` method has a consistent structure:
17+
```
18+
src/routes/{Method}/ # Route pages
19+
src/lib/components/pages/{Method}.svelte # Main playground component
20+
src/lib/format-options/{method}.options.ts # Type-safe option definitions
21+
static/{Method}-compat-data.json # Generated browser support data
22+
```
23+
24+
The `formatMethods` array in `src/lib/format-methods.ts` drives all method-related functionality.
25+
26+
### Playground Architecture
27+
- **Schema-driven**: Each method defines a `PlaygroundSchema<Method>` with typed options
28+
- **Dynamic validation**: `invalidOptionCombos` prevents incompatible option combinations
29+
- **Live execution**: Real-time `Intl` API calls with error handling and output formatting
30+
31+
### Browser Compatibility Integration
32+
- Run `pnpm update:compat` to regenerate compatibility data from `@mdn/browser-compat-data`
33+
- Data flows: `src/update-compat-data.ts` → `static/*.json` → runtime loading via `loadJson()`
34+
- Conditional loading based on `$settings.showBrowserSupport` store
35+
36+
## Development Workflows
37+
38+
### Essential Commands
39+
```bash
40+
pnpm dev # Development server
41+
pnpm update:compat # Regenerate browser compatibility data
42+
pnpm test:e2e # Run Playwright tests
43+
pnpm test:gen # Generate new Playwright tests via codegen
44+
```
45+
46+
### Adding New Intl Methods
47+
1. Add method to `formatMethods` array in `src/lib/format-methods.ts`
48+
2. Create option definitions in `src/lib/format-options/{method}.options.ts`
49+
3. Add to exports in `src/lib/format-options/index.ts`
50+
4. Create route structure: `src/routes/{Method}/+page.svelte`
51+
5. Build playground component in `src/lib/components/pages/{Method}.svelte`
52+
6. Run `pnpm update:compat` to generate compatibility data
53+
54+
### Store Management
55+
- **Reactive stores**: `$store/locales.ts` (URL-derived), `$store/settings.ts` (localStorage-persisted)
56+
- **Locale handling**: Automatically synced with URL params via `getLocaleFromParams()`
57+
- **Settings**: Theme, browser support visibility, accessibility options
58+
59+
### Path Aliases (Critical)
60+
```typescript
61+
$paraglide → ./src/paraglide # i18n messages
62+
$ui → ./src/lib/components/ui # Reusable components
63+
$pages → ./src/lib/components/pages # Route-specific components
64+
$utils → ./src/lib/utils # Utilities
65+
$store → ./src/lib/store # Svelte stores
66+
$types → ./src/lib/types # TypeScript types
67+
```
68+
69+
## Testing Patterns
70+
71+
### Playwright Structure
72+
- **Page Object Model**: `tests/pages/` with `IntlPage`, `PlaygroundPage`, `SettingsPage`
73+
- **Extended fixtures**: Custom test fixtures in `tests/test.ts`
74+
- **Method testing**: Each `Intl` method has dedicated test specs following consistent patterns
75+
76+
### Test Execution
77+
```bash
78+
pnpm test:e2e # Run all E2E tests
79+
pnpm test:gen # Interactive test generation
80+
NODE_NO_WARNINGS=1 playwright test # Suppress Node warnings
81+
```
82+
83+
## Internationalization (i18n)
84+
85+
### Paraglide.js Integration
86+
- **Message files**: `messages/{locale}.json` with typed access via `m.messageKey()`
87+
- **URL strategy**: Locale detection from URL parameters
88+
- **Build integration**: Vite plugin auto-generates typed message functions
89+
- **Adding locales**: Update `project.inlang/settings.json` + create message file
90+
91+
### Translation Workflow
92+
1. Add locale to `project.inlang/settings.json`
93+
2. Create `messages/{locale}.json` by copying `en.json`
94+
3. Translate all message keys
95+
4. Test locally with locale URL parameter
96+
97+
## Build & Deployment
98+
99+
### Cloudflare Adapter
100+
- **SSG deployment** with `@sveltejs/adapter-cloudflare`
101+
- **Static assets**: Browser compat data, icons in `static/`
102+
- **Build optimization**: Vite handles code splitting and asset optimization
103+
104+
### Code Quality
105+
- **Linting**: ESLint 9 with Svelte plugin
106+
- **Formatting**: Prettier with Svelte support
107+
- **Commits**: Conventional commits enforced via commitlint + husky
108+
- **Pre-commit**: Format + lint checks
109+
110+
## Common Gotchas
111+
112+
### Svelte 5 Patterns
113+
- Use `$derived` for computed values, `$effect` for side effects
114+
- Props destructuring: `let { prop }: Props = $props()`
115+
- Snippet types for component children slots
116+
117+
### Browser Compatibility
118+
- Always run `pnpm update:compat` after updating `@mdn/browser-compat-data`
119+
- Compatibility data loading is async - handle loading states
120+
- Settings control visibility, not availability of compat data
121+
122+
### Type Safety
123+
- Format options are strictly typed per method
124+
- Playground schemas enforce option validation at compile time
125+
- Use `AllFormatOptions[Method]` and `AllMethods[Method]` types

‎.github/workflows/e2e-tests.yml‎

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

‎.github/workflows/pr.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: run tests
2+
on:
3+
pull_request:
4+
types: [opened, edited, reopened, synchronize]
5+
branches:
6+
- main
7+
paths-ignore:
8+
- '**.md'
9+
- '.vscode/**'
10+
jobs:
11+
test:
12+
timeout-minutes: 60
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: setup node
16+
uses: ./.github/actions/setup-node
17+
with:
18+
node-version: ${{ vars.NODE_VERSION }}
19+
pnpm-version: ${{ vars.PNPM_VERSION }}
20+
- name: install Playwright
21+
run: npx playwright install --with-deps chromium
22+
- name: run unit tests
23+
run: pnpm test
24+
- name: run e2e tests
25+
run: npx playwright test

‎.github/workflows/unit-tests.yml‎

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

‎playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const config: PlaywrightTestConfig = {
1818
webServer: {
1919
command: "pnpm dev",
2020
url: localBaseURL,
21-
reuseExistingServer: !Boolean(process.env.CI)
21+
reuseExistingServer: !process.env.CI
2222
},
2323
projects: [
2424
{

0 commit comments

Comments
 (0)