Skip to content

Commit 9a9a970

Browse files
frixacofrixaco
committed
feat: I like Solid
1 parent 1c84bc7 commit 9a9a970

10 files changed

Lines changed: 227 additions & 140 deletions

File tree

‎assets/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎package.json‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"name": "codesync",
3-
"displayName": "codesync",
4-
"description": "Synchronize your code changes across different devices",
3+
"displayName": "Codesync",
4+
"publisher": "frixaco",
5+
"description": "Synchronize your code changes across your devices",
56
"version": "0.0.1",
67
"repository": {
78
"type": "git",
@@ -13,47 +14,45 @@
1314
"categories": [
1415
"Other"
1516
],
16-
"main": "./dist/extension.js",
17+
"main": "./dist/main.js",
1718
"activationEvents": [
18-
"onCommand:codesync.getChanges",
19-
"onCommand:codesync.retrieveChanges",
20-
"onView:codesync.mainView"
19+
"onView:codesync.webview",
20+
"onCommand:codesync.applyChanges",
21+
"onCommand:codesync.sendChanges"
2122
],
2223
"contributes": {
2324
"viewsContainers": {
2425
"activitybar": [
2526
{
26-
"id": "codesync-sidebar-view",
27+
"id": "codesync-sidepanel-view",
2728
"title": "Codesync",
28-
"icon": "solid/logo.svg"
29+
"icon": "assets/logo.svg"
2930
}
3031
]
3132
},
3233
"views": {
33-
"codesync-sidebar-view": [
34+
"codesync-sidepanel-view": [
3435
{
3536
"type": "webview",
36-
"id": "codesync.mainView",
37-
"name": "Codesync",
38-
"icon": "solid/logo.svg",
39-
"contextualTitle": "Codesync"
37+
"id": "codesync.webview",
38+
"name": "Codesync"
4039
}
4140
]
4241
},
4342
"commands": [
4443
{
45-
"command": "codesync.getChanges",
46-
"title": "CodeSync: Get current changes"
44+
"command": "codesync.applyChanges",
45+
"title": "CodeSync: Apply changes from other device(s)"
4746
},
4847
{
49-
"command": "codesync.retrieveChanges",
50-
"title": "CodeSync: Retrieve changes"
48+
"command": "codesync.sendChanges",
49+
"title": "CodeSync: Send changes to other device(s)"
5150
}
5251
]
5352
},
5453
"scripts": {
5554
"vscode:prepublish": "npm run esbuild-base -- --minify",
56-
"build:base": "esbuild ./src/extension.ts --bundle --outfile=dist/main.js --external:vscode --format=cjs --platform=node",
55+
"build:base": "rm -rf dist/ && esbuild ./src/extension.ts --bundle --outfile=dist/main.js --external:vscode --format=cjs --platform=node",
5756
"build": "npm run build:base -- --sourcemap",
5857
"dev": "npm run build:base -- --sourcemap --watch",
5958
"test-compile": "tsc -p ./",

‎solid/.gitignore‎

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

‎solid/package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{
2-
"name": "vite-template-solid",
3-
"version": "0.0.0",
4-
"description": "",
2+
"name": "codesync-ui",
53
"scripts": {
64
"start": "vite",
75
"dev": "vite",

‎solid/src/App.module.css‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,3 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.logo {
6-
animation: logo-spin infinite 20s linear;
7-
height: 40vmin;
8-
pointer-events: none;
9-
}
10-
11-
.header {
12-
background-color: #282c34;
13-
min-height: 100vh;
14-
display: flex;
15-
flex-direction: column;
16-
align-items: center;
17-
justify-content: center;
18-
font-size: calc(10px + 2vmin);
19-
color: white;
20-
}
21-
22-
.link {
23-
color: #b318f0;
24-
}
25-
26-
@keyframes logo-spin {
27-
from {
28-
transform: rotate(0deg);
29-
}
30-
to {
31-
transform: rotate(360deg);
32-
}
1+
.todo {
2+
font-weight: bold;
333
}

‎solid/src/App.tsx‎

Lines changed: 155 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,163 @@
1-
import type { Component } from 'solid-js';
1+
import {
2+
children,
3+
createEffect,
4+
createMemo,
5+
createSignal,
6+
For,
7+
PropsWithChildren,
8+
splitProps,
9+
} from "solid-js";
10+
import { ResolvedJSXElement } from "solid-js/types/reactive/signal";
11+
import styles from "./App.module.css";
212

3-
import logo from './logo.svg';
4-
import styles from './App.module.css';
13+
type Todo = {
14+
id: number;
15+
title: string;
16+
finished: boolean;
17+
};
18+
19+
const formattedTodo = (todo: Todo) => {
20+
return createMemo(
21+
() => `${todo.title} - ${todo.finished ? "DONE" : "ACTIVE"}`
22+
);
23+
};
24+
25+
type TodoProps = {
26+
todo: Todo;
27+
updateTodo: (todo: Todo) => void;
28+
deleteTodo: (todoId: number) => void;
29+
};
30+
31+
const Todo = (props: TodoProps) => {
32+
const [editedTitle, setEditedTitle] = createSignal(props.todo.title);
33+
const [editMode, setEditMode] = createSignal(false);
34+
35+
const [data, actions] = splitProps(props, ["todo"]);
36+
37+
return (
38+
<div>
39+
{editMode() ? (
40+
<input
41+
value={editedTitle()}
42+
onInput={(e) => setEditedTitle(e.currentTarget.value)}
43+
/>
44+
) : (
45+
<p>{formattedTodo(data.todo)()}</p>
46+
)}
47+
48+
{editMode() ? (
49+
<button
50+
onClick={() =>
51+
actions.updateTodo({ ...data.todo, title: editedTitle() })
52+
}>
53+
Save
54+
</button>
55+
) : (
56+
<button onClick={() => setEditMode(true)}>Edit</button>
57+
)}
58+
59+
{!data.todo.finished && (
60+
<button
61+
onClick={() => actions.updateTodo({ ...data.todo, finished: true })}>
62+
Finish
63+
</button>
64+
)}
65+
66+
<button onClick={() => actions.deleteTodo(data.todo.id)}>Delete</button>
67+
</div>
68+
);
69+
};
70+
71+
const ListTodos = (props: PropsWithChildren) => {
72+
const memo = children(() => props.children);
73+
const [counter, setCounter] = createSignal(0);
74+
75+
createEffect(() =>
76+
setCounter(((memo() as ResolvedJSXElement[]) || []).length)
77+
);
78+
// Below code won't work (because props.children.length is not "reactive"?)
79+
// createEffect(() => setCounter(props.children.length));
80+
81+
return (
82+
<div class={styles.todo}>
83+
<div>{memo()}</div>
84+
{/* <div>{props.children}</div> */}
85+
<p>Total todos: {counter()}</p>
86+
</div>
87+
);
88+
};
89+
90+
type AddTodosProps = {
91+
addTodo: (todo: Todo) => void;
92+
count: number;
93+
};
94+
95+
const AddTodos = (props: AddTodosProps) => {
96+
const [title, setTitle] = createSignal("");
97+
98+
const addTodo = () => {
99+
props.addTodo({ id: props.count, title: title(), finished: false });
100+
setTitle("");
101+
};
5102

6-
const App: Component = () => {
7103
return (
8-
<div class={styles.App}>
9-
<header class={styles.header}>
10-
<img src={logo} class={styles.logo} alt="logo" />
11-
<p>
12-
Edit <code>src/App.tsx</code> and save to reload.
13-
</p>
14-
<a
15-
class={styles.link}
16-
href="https://github.com/solidjs/solid"
17-
target="_blank"
18-
rel="noopener noreferrer"
19-
>
20-
Learn Solid
21-
</a>
22-
</header>
104+
<div>
105+
<input
106+
type="text"
107+
onInput={(e) => setTitle(e.currentTarget.value)}
108+
value={title()}
109+
/>
110+
{title() && <button onClick={addTodo}>Add</button>}
23111
</div>
24112
);
25113
};
26114

115+
function App() {
116+
const [todos, setTodos] = createSignal<Todo[]>([]);
117+
118+
return (
119+
<div>
120+
<button
121+
onClick={() =>
122+
vscodeApi.postMessage({
123+
type: "fetch",
124+
text: "hooli",
125+
})
126+
}>
127+
PUSH SOME MESSAGE TO VSCODE
128+
</button>
129+
130+
<div>
131+
<h4>Simple Todo App</h4>
132+
<AddTodos
133+
addTodo={(todo) => setTodos([...todos(), todo])}
134+
count={todos().length}
135+
/>
136+
137+
<ListTodos>
138+
<For each={todos()}>
139+
{(todo) => (
140+
<Todo
141+
todo={todo}
142+
updateTodo={(newTodo) =>
143+
setTodos(
144+
todos().map((t) => (t.id === newTodo.id ? newTodo : t))
145+
)
146+
}
147+
deleteTodo={(todoId) =>
148+
setTodos(todos().filter((t) => t.id !== todoId))
149+
}
150+
/>
151+
)}
152+
</For>
153+
</ListTodos>
154+
</div>
155+
156+
<div>
157+
<h4>(WIP)</h4>
158+
</div>
159+
</div>
160+
);
161+
}
162+
27163
export default App;

‎solid/src/global.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as _vscode from "vscode";
2+
3+
declare global {
4+
const vscodeApi: any;
5+
}

‎solid/vite.config.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import { defineConfig } from 'vite';
2-
import solidPlugin from 'vite-plugin-solid';
1+
import { defineConfig } from "vite";
2+
import solidPlugin from "vite-plugin-solid";
33

44
export default defineConfig({
55
plugins: [solidPlugin()],
66
build: {
7-
target: 'esnext',
7+
target: "esnext",
88
polyfillDynamicImport: false,
9+
rollupOptions: {
10+
output: {
11+
chunkFileNames: "[name].js",
12+
assetFileNames: "[name][extname]",
13+
entryFileNames: "[name].js",
14+
},
15+
},
916
},
1017
});

0 commit comments

Comments
 (0)