mirror of
https://github.com/aljazceru/opencode.git
synced 2026-01-08 10:24:52 +01:00
Share: sync
This commit is contained in:
28
app/packages/web/.gitignore
vendored
Normal file
28
app/packages/web/.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
dist
|
||||
.wrangler
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.vinxi
|
||||
app.config.timestamp_*.js
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env*.local
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
*.launch
|
||||
.settings/
|
||||
|
||||
# Temp
|
||||
gitignore
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
32
app/packages/web/README.md
Normal file
32
app/packages/web/README.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# SolidStart
|
||||
|
||||
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
|
||||
|
||||
## Creating a project
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm init solid@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm init solid@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
|
||||
|
||||
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
|
||||
|
||||
## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
|
||||
3
app/packages/web/app.config.ts
Normal file
3
app/packages/web/app.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { defineConfig } from "@solidjs/start/config";
|
||||
|
||||
export default defineConfig({});
|
||||
20
app/packages/web/package.json
Normal file
20
app/packages/web/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "example-basic",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vinxi dev",
|
||||
"build": "vinxi build",
|
||||
"start": "vinxi start",
|
||||
"version": "vinxi version"
|
||||
},
|
||||
"dependencies": {
|
||||
"@solidjs/meta": "^0.29.4",
|
||||
"@solidjs/router": "^0.15.0",
|
||||
"@solidjs/start": "^1.1.0",
|
||||
"solid-js": "^1.9.5",
|
||||
"vinxi": "^0.5.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
}
|
||||
}
|
||||
BIN
app/packages/web/public/favicon.ico
Normal file
BIN
app/packages/web/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
39
app/packages/web/src/app.css
Normal file
39
app/packages/web/src/app.css
Normal file
@@ -0,0 +1,39 @@
|
||||
body {
|
||||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #335d92;
|
||||
text-transform: uppercase;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
line-height: 1.1;
|
||||
margin: 4rem auto;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 14rem;
|
||||
margin: 2rem auto;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
20
app/packages/web/src/app.tsx
Normal file
20
app/packages/web/src/app.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { MetaProvider, Title } from "@solidjs/meta"
|
||||
import { Router } from "@solidjs/router"
|
||||
import { FileRoutes } from "@solidjs/start/router"
|
||||
import { Suspense } from "solid-js"
|
||||
import "./app.css"
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router
|
||||
root={(props) => (
|
||||
<MetaProvider>
|
||||
<Title>SolidStart - Basic</Title>
|
||||
<Suspense>{props.children}</Suspense>
|
||||
</MetaProvider>
|
||||
)}
|
||||
>
|
||||
<FileRoutes />
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
4
app/packages/web/src/entry-client.tsx
Normal file
4
app/packages/web/src/entry-client.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
// @refresh reload
|
||||
import { mount, StartClient } from "@solidjs/start/client";
|
||||
|
||||
mount(() => <StartClient />, document.getElementById("app")!);
|
||||
21
app/packages/web/src/entry-server.tsx
Normal file
21
app/packages/web/src/entry-server.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// @refresh reload
|
||||
import { createHandler, StartServer } from "@solidjs/start/server";
|
||||
|
||||
export default createHandler(() => (
|
||||
<StartServer
|
||||
document={({ assets, children, scripts }) => (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
{assets}
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">{children}</div>
|
||||
{scripts}
|
||||
</body>
|
||||
</html>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
1
app/packages/web/src/global.d.ts
vendored
Normal file
1
app/packages/web/src/global.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="@solidjs/start/env" />
|
||||
19
app/packages/web/src/routes/[...404].tsx
Normal file
19
app/packages/web/src/routes/[...404].tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { HttpStatusCode } from "@solidjs/start";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main>
|
||||
<Title>Not Found</Title>
|
||||
<HttpStatusCode code={404} />
|
||||
<h1>Page Not Found</h1>
|
||||
<p>
|
||||
Visit{" "}
|
||||
<a href="https://start.solidjs.com" target="_blank">
|
||||
start.solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build SolidStart apps.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
14
app/packages/web/src/routes/index.tsx
Normal file
14
app/packages/web/src/routes/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Title } from "@solidjs/meta"
|
||||
import { A } from "@solidjs/router"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Title>Share Demo</Title>
|
||||
<h1>Share Demo</h1>
|
||||
<p>
|
||||
<A href="/share/test-share-id">Go to test share</A>
|
||||
</p>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
150
app/packages/web/src/routes/share/[id].tsx
Normal file
150
app/packages/web/src/routes/share/[id].tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { Title } from "@solidjs/meta"
|
||||
import { createSignal, onCleanup, onMount, Show, For } from "solid-js"
|
||||
import { useParams } from "@solidjs/router"
|
||||
|
||||
type Message = {
|
||||
filename: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export default function SharePage() {
|
||||
const params = useParams<{ id: string }>()
|
||||
const [messages, setMessages] = createSignal<Message[]>([])
|
||||
const [connectionStatus, setConnectionStatus] = createSignal("Disconnected")
|
||||
|
||||
onMount(() => {
|
||||
// Get the API URL from environment
|
||||
const apiUrl = import.meta.env.VITE_API_URL
|
||||
const shareId = params.id
|
||||
|
||||
console.log("Mounting Share component with ID:", shareId)
|
||||
console.log("API URL:", apiUrl)
|
||||
|
||||
if (!apiUrl) {
|
||||
console.error("API URL not found in environment variables")
|
||||
setConnectionStatus("Error: API URL not found")
|
||||
return
|
||||
}
|
||||
|
||||
let reconnectTimer: number | undefined
|
||||
let socket: WebSocket | null = null
|
||||
|
||||
// Function to create and set up WebSocket with auto-reconnect
|
||||
const setupWebSocket = () => {
|
||||
// Close any existing connection
|
||||
if (socket) {
|
||||
socket.close()
|
||||
}
|
||||
|
||||
setConnectionStatus("Connecting...")
|
||||
|
||||
// Always use secure WebSocket protocol (wss)
|
||||
const wsBaseUrl = apiUrl.replace(/^https?:\/\//, 'wss://')
|
||||
const wsUrl = `${wsBaseUrl}/share_poll?share_id=${shareId}`
|
||||
console.log("Connecting to WebSocket URL:", wsUrl)
|
||||
|
||||
// Create WebSocket connection
|
||||
socket = new WebSocket(wsUrl)
|
||||
|
||||
// Handle connection opening
|
||||
socket.onopen = () => {
|
||||
setConnectionStatus("Connected")
|
||||
console.log("WebSocket connection established")
|
||||
}
|
||||
|
||||
// Handle incoming messages
|
||||
socket.onmessage = (event) => {
|
||||
console.log("WebSocket message received")
|
||||
try {
|
||||
const data = JSON.parse(event.data) as Message
|
||||
setMessages((prev) => [...prev, data])
|
||||
} catch (error) {
|
||||
console.error("Error parsing WebSocket message:", error)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle errors
|
||||
socket.onerror = (error) => {
|
||||
console.error("WebSocket error:", error)
|
||||
setConnectionStatus("Error: Connection failed")
|
||||
}
|
||||
|
||||
// Handle connection close and reconnection
|
||||
socket.onclose = (event) => {
|
||||
console.log(`WebSocket closed: ${event.code} ${event.reason}`)
|
||||
setConnectionStatus("Disconnected, reconnecting...")
|
||||
|
||||
// Try to reconnect after 2 seconds
|
||||
clearTimeout(reconnectTimer)
|
||||
reconnectTimer = window.setTimeout(
|
||||
setupWebSocket,
|
||||
2000
|
||||
) as unknown as number
|
||||
}
|
||||
}
|
||||
|
||||
// Initial connection
|
||||
setupWebSocket()
|
||||
|
||||
// Clean up on component unmount
|
||||
onCleanup(() => {
|
||||
console.log("Cleaning up WebSocket connection")
|
||||
if (socket) {
|
||||
socket.close()
|
||||
}
|
||||
clearTimeout(reconnectTimer)
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Title>Share: {params.id}</Title>
|
||||
<h1>Share: {params.id}</h1>
|
||||
|
||||
<div style={{ margin: "2rem 0" }}>
|
||||
<h2>WebSocket Connection</h2>
|
||||
<p>
|
||||
Status: <strong>{connectionStatus()}</strong>
|
||||
</p>
|
||||
|
||||
<h3>Live Updates</h3>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
padding: "1rem",
|
||||
borderRadius: "0.5rem",
|
||||
maxHeight: "500px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<Show
|
||||
when={messages().length > 0}
|
||||
fallback={<p>Waiting for messages...</p>}
|
||||
>
|
||||
<ul style={{ listStyleType: "none", padding: 0 }}>
|
||||
<For each={messages()}>
|
||||
{(msg) => (
|
||||
<li
|
||||
style={{
|
||||
padding: "0.5rem",
|
||||
margin: "0.5rem 0",
|
||||
backgroundColor: "#f5f5f5",
|
||||
borderRadius: "0.25rem",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>Filename:</strong> {msg.filename}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Content:</strong> {msg.content}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
9
app/packages/web/sst-env.d.ts
vendored
Normal file
9
app/packages/web/sst-env.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/* This file is auto-generated by SST. Do not edit. */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/* deno-fmt-ignore-file */
|
||||
|
||||
/// <reference path="../../sst-env.d.ts" />
|
||||
|
||||
import "sst"
|
||||
export {}
|
||||
19
app/packages/web/tsconfig.json
Normal file
19
app/packages/web/tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"types": ["vinxi/types/client"],
|
||||
"isolatedModules": true,
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user