aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-25 19:54:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Share: sync

Browse Source
This commit is contained in:
Frank
2025-05-23 15:57:33 -04:00
committed by Dax Raad
parent 34a2dcb80a
commit d51b4263ab
25 changed files with 1395 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/packages/web/.gitignore vendored
View File

@@ -1,28 +1,2 @@
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
node_modules
dist

40
app/packages/web/README.md
View File

@@ -1,32 +1,34 @@
# SolidStart
## Usage
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
## Creating a project
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
```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
$ npm install # or pnpm install or yarn install
```
## Developing
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
## Available Scripts
```bash
npm run dev
In the project directory, you can run:
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
### `npm run dev` or `npm start`
## Building
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
The page will reload if you make edits.<br>
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`.
### `npm run build`
## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
## Deployment
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

3
app/packages/web/app.config.ts
View File

@@ -1,3 +0,0 @@
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({});

16
app/packages/web/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

28
app/packages/web/package.json
View File

@@ -1,20 +1,22 @@
{
"name": "example-basic",
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"version": "vinxi version"
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"typescript": "5.8.2",
"vite": "6.2.2",
"vite-plugin-solid": "2.11.6"
},
"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"
"@solidjs/router": "0.15.3",
"solid-js": "1.9.5"
}
}

1065
app/packages/web/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
app/packages/web/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 664 B

33
app/packages/web/src/App.module.css Normal file
View File

@@ -0,0 +1,33 @@
.App {
text-align: center;
}
.logo {
animation: logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.link {
color: #b318f0;
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

39
app/packages/web/src/app.css
View File

@@ -1,39 +0,0 @@
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;
}
}

164
app/packages/web/src/app.tsx
View File

@@ -1,20 +1,154 @@
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"
import { createSignal, onCleanup, onMount, Show, For } from "solid-js"
import { useParams } from "@solidjs/router"
type Message = {
key: string
content: string
}
export default function App() {
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 (!shareId) {
console.error("Share ID not found in environment variables")
setConnectionStatus("Error: Share ID not found")
return
}
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 (
<Router
root={(props) => (
<MetaProvider>
<Title>SolidStart - Basic</Title>
<Suspense>{props.children}</Suspense>
</MetaProvider>
)}
>
<FileRoutes />
</Router>
<main>
<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>Key:</strong> {msg.key}
</div>
<div>
<strong>Content:</strong> {msg.content}
</div>
</li>
)}
</For>
</ul>
</Show>
</div>
</div>
</main>
)
}

BIN
app/packages/web/src/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
app/packages/web/src/entry-client.tsx
View File

@@ -1,4 +0,0 @@
// @refresh reload
import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);

21
app/packages/web/src/entry-server.tsx
View File

@@ -1,21 +0,0 @@
// @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
View File

@@ -1 +0,0 @@
/// <reference types="@solidjs/start/env" />

13
app/packages/web/src/index.css Normal file
View File

@@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

24
app/packages/web/src/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
/* @refresh reload */
import { render } from "solid-js/web"
import { Router, Route } from "@solidjs/router"
import "./index.css"
import App from "./App"
const root = document.getElementById("root")
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
)
}
render(
() => (
<Router>
<Route path="/share/:id" component={App} />
<Route path="/" component={App} />
</Router>
),
root!,
)

1
app/packages/web/src/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

19
app/packages/web/src/routes/[...404].tsx
View File

@@ -1,19 +0,0 @@
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
View File

@@ -1,14 +0,0 @@
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
View File

@@ -1,150 +0,0 @@
import { Title } from "@solidjs/meta"
import { createSignal, onCleanup, onMount, Show, For } from "solid-js"
import { useParams } from "@solidjs/router"
type Message = {
key: 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>Key:</strong> {msg.key}
</div>
<div>
<strong>Content:</strong> {msg.content}
</div>
</li>
)}
</For>
</ul>
</Show>
</div>
</div>
</main>
)
}

10
app/packages/web/src/sst-env.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/* This file is auto-generated by SST. Do not edit. */
/* tslint:disable */
/* eslint-disable */
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}

12
app/packages/web/tsconfig.json
View File

@@ -1,19 +1,15 @@
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"allowJs": true,
"strict": true,
"types": ["vite/client"],
"noEmit": true,
"types": ["vinxi/types/client"],
"isolatedModules": true,
"paths": {
"~/*": ["./src/*"]
}
"isolatedModules": true
}
}

12
app/packages/web/vite.config.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
plugins: [solidPlugin()],
server: {
port: 3000,
},
build: {
target: 'esnext',
},
});