-
Notifications
You must be signed in to change notification settings - Fork 196
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
448 additions
and
0 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
apps/wing/project-templates/wing/react-vite/backend/broadcaster.w
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
bring cloud; | ||
bring websockets; | ||
bring ui; | ||
|
||
pub class Broadcaster { | ||
pub url: str; | ||
server: websockets.WebSocket; | ||
clients: cloud.Bucket; | ||
|
||
new() { | ||
this.server = new websockets.WebSocket(name: "counter_updates") as "counter_updates"; | ||
this.url = this.server.url; | ||
this.clients = new cloud.Bucket(); | ||
|
||
// upon connection, add the client to the list | ||
this.server.onConnect(inflight(id: str): void => { | ||
this.clients.put(id, ""); | ||
}); | ||
|
||
// upon disconnect, remove the client from the list | ||
this.server.onDisconnect(inflight(id: str): void => { | ||
this.clients.delete(id); | ||
}); | ||
|
||
// Custom resource display in Console UI | ||
// hide the websockets server and cloud bucket resources from the Console UI | ||
nodeof(this.server).hidden = true; | ||
nodeof(this.clients).hidden = true; | ||
} | ||
|
||
// send a message to all clients | ||
pub inflight broadcast(messgae: str) { | ||
for id in this.clients.list() { | ||
this.server.sendMessage(id, messgae); | ||
} | ||
} | ||
} |
47 changes: 47 additions & 0 deletions
47
apps/wing/project-templates/wing/react-vite/backend/main.w
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
bring cloud; | ||
bring expect; | ||
bring vite; | ||
bring http; | ||
bring "./broadcaster.w" as broadcaster; | ||
|
||
// Winglang doesn't have a built-in support for __dirname yet, so we use a workaround to get the current directory. | ||
// @see tracking issue: https://github.com/winglang/wing/issues/3736 | ||
class Utils { | ||
extern "utils.js" pub static __dirname(): str; | ||
} | ||
|
||
let myBroadcaster = new broadcaster.Broadcaster() as "Broadcaster"; | ||
let api = new cloud.Api(cors: true); | ||
let counter = new cloud.Counter(); | ||
|
||
let website = new vite.Vite( | ||
root: "{Utils.__dirname()}/../frontend", | ||
publicEnv: { | ||
TITLE: "Wing + Vite + React", | ||
API_URL: api.url, | ||
WS_URL: myBroadcaster.url | ||
} | ||
) as "Vite Website"; | ||
|
||
api.get("/counter", inflight () => { | ||
return { | ||
body: "{counter.peek()}" | ||
}; | ||
}); | ||
|
||
api.post("/counter", inflight () => { | ||
let prev = counter.inc(); | ||
myBroadcaster.broadcast("refresh"); | ||
return { | ||
body: "{prev + 1}" | ||
}; | ||
}); | ||
|
||
test "api counter increment and get" { | ||
log("counter initial value: {counter.peek()}"); | ||
assert(counter.peek() == 0); | ||
http.post(api.url + "/counter"); | ||
let res = http.get(api.url + "/counter"); | ||
log("counter value after increment: {res.body}"); | ||
assert(res.body == "1"); | ||
} |
11 changes: 11 additions & 0 deletions
11
apps/wing/project-templates/wing/react-vite/backend/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"name": "my-wing-app", | ||
"version": "0.0.0", | ||
"description": "A description of my Wing application", | ||
"author": "Your Name", | ||
"license": "MIT", | ||
"wing": true, | ||
"dependencies": { | ||
"@winglibs/vite": "^0.1.2" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
exports.__dirname = () => __dirname; |
18 changes: 18 additions & 0 deletions
18
apps/wing/project-templates/wing/react-vite/frontend/.eslintrc.cjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
module.exports = { | ||
root: true, | ||
env: { browser: true, es2020: true }, | ||
extends: [ | ||
'eslint:recommended', | ||
'plugin:@typescript-eslint/recommended', | ||
'plugin:react-hooks/recommended', | ||
], | ||
ignorePatterns: ['dist', '.eslintrc.cjs'], | ||
parser: '@typescript-eslint/parser', | ||
plugins: ['react-refresh'], | ||
rules: { | ||
'react-refresh/only-export-components': [ | ||
'warn', | ||
{ allowConstantExport: true }, | ||
], | ||
}, | ||
} |
24 changes: 24 additions & 0 deletions
24
apps/wing/project-templates/wing/react-vite/frontend/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
30 changes: 30 additions & 0 deletions
30
apps/wing/project-templates/wing/react-vite/frontend/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# React + TypeScript + Vite | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
||
Currently, two official plugins are available: | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
|
||
## Expanding the ESLint configuration | ||
|
||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
|
||
- Configure the top-level `parserOptions` property like this: | ||
|
||
```js | ||
export default { | ||
// other rules... | ||
parserOptions: { | ||
ecmaVersion: 'latest', | ||
sourceType: 'module', | ||
project: ['./tsconfig.json', './tsconfig.node.json'], | ||
tsconfigRootDir: __dirname, | ||
}, | ||
} | ||
``` | ||
|
||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` | ||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` | ||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
13 changes: 13 additions & 0 deletions
13
apps/wing/project-templates/wing/react-vite/frontend/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React + TS</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
apps/wing/project-templates/wing/react-vite/frontend/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
{ | ||
"name": "frontend", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "tsc && vite build", | ||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"react-use-websocket": "^4.7.0" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^18.2.56", | ||
"@types/react-dom": "^18.2.19", | ||
"@typescript-eslint/eslint-plugin": "^7.0.2", | ||
"@typescript-eslint/parser": "^7.0.2", | ||
"@vitejs/plugin-react": "^4.2.1", | ||
"eslint": "^8.56.0", | ||
"eslint-plugin-react-hooks": "^4.6.0", | ||
"eslint-plugin-react-refresh": "^0.4.5", | ||
"typescript": "^5.2.2", | ||
"vite": "^5.1.4" | ||
} | ||
} |
1 change: 1 addition & 0 deletions
1
apps/wing/project-templates/wing/react-vite/frontend/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions
42
apps/wing/project-templates/wing/react-vite/frontend/src/App.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
#root { | ||
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.react:hover { | ||
filter: drop-shadow(0 0 2em #61dafbaa); | ||
} | ||
|
||
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
.read-the-docs { | ||
color: #888; | ||
} |
59 changes: 59 additions & 0 deletions
59
apps/wing/project-templates/wing/react-vite/frontend/src/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { useState, useEffect } from 'react' | ||
import reactLogo from './assets/react.svg' | ||
import viteLogo from '/vite.svg' | ||
import './App.css' | ||
import useWebSocket from 'react-use-websocket'; | ||
|
||
const API_URL = window.wing.env.API_URL; | ||
const WS_URL = window.wing.env.WS_URL; | ||
|
||
function App() { | ||
const [count, setCount] = useState("0"); | ||
const incrementCount = async () => { | ||
const response = await fetch(`${API_URL}/counter`, { | ||
method: "POST" | ||
}); | ||
setCount(await response.text()); | ||
} | ||
const updateCount = async () => { | ||
const response = await fetch(`${API_URL}/counter`); | ||
setCount(await response.text()); | ||
} | ||
|
||
useWebSocket(WS_URL, { | ||
onMessage: () => { | ||
updateCount(); | ||
} | ||
}); | ||
|
||
useEffect(() => { | ||
updateCount(); | ||
}, []); | ||
|
||
return ( | ||
<> | ||
<div> | ||
<a href="https://vitejs.dev" target="_blank"> | ||
<img src={viteLogo} className="logo" alt="Vite logo" /> | ||
</a> | ||
<a href="https://react.dev" target="_blank"> | ||
<img src={reactLogo} className="logo react" alt="React logo"/> | ||
</a> | ||
</div> | ||
<h1>{window.wing.env.TITLE}</h1> | ||
<div className="card"> | ||
<button key={count} onClick={incrementCount}> | ||
count is {count} | ||
</button> | ||
<p> | ||
Edit <code>src/App.tsx</code> and save to test HMR | ||
</p> | ||
</div> | ||
<p className="read-the-docs"> | ||
Click on the Vite and React logos to learn more | ||
</p> | ||
</> | ||
) | ||
} | ||
|
||
export default App; |
1 change: 1 addition & 0 deletions
1
apps/wing/project-templates/wing/react-vite/frontend/src/assets/react.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions
68
apps/wing/project-templates/wing/react-vite/frontend/src/index.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
: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; | ||
} | ||
|
||
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; | ||
} | ||
|
||
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; | ||
} | ||
} |
Oops, something went wrong.