Skip to content

Commit

Permalink
fix: add examples
Browse files Browse the repository at this point in the history
  • Loading branch information
kazupon committed Sep 21, 2023
1 parent 6209414 commit ad532f5
Show file tree
Hide file tree
Showing 22 changed files with 300 additions and 2 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
dist
node_modules
coverage
deno.lock
.DS_Store
.idea

Expand Down
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
coverage
examples
deno.lock
.*
*.log
*.swp
Binary file modified bun.lockb
Binary file not shown.
13 changes: 13 additions & 0 deletions examples/browser/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/intlify.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Browser example</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions examples/browser/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "example-browser",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}
7 changes: 7 additions & 0 deletions examples/browser/public/intlify.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions examples/browser/src/counter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export function setupCounter(element: HTMLButtonElement) {
let counter = 0
const setCounter = (count: number) => {
counter = count
element.innerHTML = `count is ${counter}`
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
}
22 changes: 22 additions & 0 deletions examples/browser/src/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import './style.css'
import intlifyLogo from '/intlify.svg'
import { setupCounter } from './counter.ts'
import { isLocale } from 'https://esm.sh/@intlify/utils'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div>
<a href="https://gihtub.com/intlify/utils" target="_blank">
<img src="${intlifyLogo}" class="logo" alt="Intlify logo" />
</a>
<h1>Browser example</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Intlify logo to learn more
</p>
<p>isLocale('en-US'): ${isLocale(new Intl.Locale('en-US'))}</p>
</div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
97 changes: 97 additions & 0 deletions examples/browser/src/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #3178c6aa);
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
1 change: 1 addition & 0 deletions examples/browser/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
23 changes: 23 additions & 0 deletions examples/browser/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
3 changes: 3 additions & 0 deletions examples/bun/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# example-bun

This example for Bun
11 changes: 11 additions & 0 deletions examples/bun/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { getLocale } from '@intlify/utils/web'

const port = 8124
Bun.serve({
port,
fetch(req: Request) {
const locale = getLocale(req)
return new Response(`detect locale: ${locale.toString()}`)
},
})
console.log(`server listening on ${port}`)
18 changes: 18 additions & 0 deletions examples/bun/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"name": "example-bun",
"private": true,
"module": "index.ts",
"type": "module",
"scripts": {
"dev": "bun run index.ts"
},
"devDependencies": {
"bun-types": "latest"
},
"peerDependencies": {
"typescript": "^5.0.0"
},
"dependencies": {
"@intlify/utils": "npm:@intlify/[email protected]"
}
}
22 changes: 22 additions & 0 deletions examples/bun/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"compilerOptions": {
"lib": ["ESNext"],
"module": "esnext",
"target": "esnext",
"moduleResolution": "bundler",
"moduleDetection": "force",
"allowImportingTsExtensions": true,
"noEmit": true,
"composite": true,
"strict": true,
"downlevelIteration": true,
"skipLibCheck": true,
"jsx": "react-jsx",
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"allowJs": true,
"types": [
"bun-types" // add Bun global
]
}
}
3 changes: 3 additions & 0 deletions examples/deno/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# example-deno

This example for Deno
5 changes: 5 additions & 0 deletions examples/deno/deno.jsonc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"tasks": {
"dev": "deno run --watch main.ts"
}
}
10 changes: 10 additions & 0 deletions examples/deno/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { getAcceptLanguages } from 'https://esm.sh/@intlify/utils/web'

const port = 8125
Deno.serve({
port,
}, (req: Request) => {
const acceptLanguages = getAcceptLanguages(req)
return new Response(`detect accpect-language: ${acceptLanguages}`)
})
console.log(`server listening on ${port}`)
3 changes: 3 additions & 0 deletions examples/node/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# example-node

This example for Node.js
12 changes: 12 additions & 0 deletions examples/node/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { createServer } from 'node:http'
import { getAcceptLanguages } from '@intlify/utils/node'

const server = createServer((req, res) => {
const acceptLanguages = getAcceptLanguages(req)

res.writeHead(200)
res.end(`detect accpect-language: ${acceptLanguages}`)
})

server.listen(8123)
console.log('server listening on 8123')
14 changes: 14 additions & 0 deletions examples/node/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "example-node",
"private": true,
"scripts": {
"dev": "npx tsx index.ts"
},
"dependencies": {
"@intlify/utils": "npm:@intlify/[email protected]"
},
"devDependencies": {
"@types/node": "^20.6.0",
"typescript": "^5.2.2"
}
}
11 changes: 9 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@
"format": "deno fmt",
"build": "unbuild",
"test": "vitest run",
"test:coverage": "npm test -- --reporter verbose --coverage"
"test:coverage": "npm test -- --reporter verbose --coverage",
"play:browser": "npm run -w example-browser dev",
"play:node": "npm run -w example-node dev",
"play:deno": "cd examples/deno && deno run --allow-net main.ts",
"play:bun": "npm run -w example-bun dev"
},
"lint-staged": {
"*.{js,ts,jsx,tsx,md,json,jsonc}": [
Expand All @@ -90,5 +94,8 @@
"typescript": "^5.2.2",
"unbuild": "^2.0.0",
"vitest": "^0.34.4"
}
},
"workspaces": [
"examples/*"
]
}

0 comments on commit ad532f5

Please sign in to comment.