@remyyy/create-velox 0.0.12 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +14 -1
- package/templates/vanilla-js/index.html +9 -1
- package/templates/vanilla-js/package.json +4 -2
- package/templates/vanilla-js/src/App.js +99 -15
- package/templates/vanilla-js/src/components/Card.jsx +16 -0
- package/templates/vanilla-js/src/components/Header.jsx +28 -0
- package/templates/vanilla-js/src/main.js +1 -1
- package/templates/vanilla-js/src/style.css +50 -31
- package/templates/vanilla-js/vite.config.js +21 -1
- package/templates/vanilla-ts/index.html +9 -1
- package/templates/vanilla-ts/package.json +4 -2
- package/templates/vanilla-ts/src/App.tsx +86 -26
- package/templates/vanilla-ts/src/components/Card.tsx +18 -0
- package/templates/vanilla-ts/src/components/Header.tsx +28 -0
- package/templates/vanilla-ts/src/main.ts +1 -1
- package/templates/vanilla-ts/vite.config.ts +21 -1
package/package.json
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remyyy/create-velox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
|
+
"author": "TheRemyyy",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/TheRemyyy/velox-framework.git",
|
|
8
|
+
"directory": "packages/create-velox"
|
|
9
|
+
},
|
|
10
|
+
"keywords": [
|
|
11
|
+
"cli",
|
|
12
|
+
"scaffold",
|
|
13
|
+
"generator",
|
|
14
|
+
"velox"
|
|
15
|
+
],
|
|
16
|
+
"license": "MIT",
|
|
4
17
|
"publishConfig": {
|
|
5
18
|
"access": "public"
|
|
6
19
|
},
|
|
@@ -5,7 +5,15 @@
|
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
<title>Velox App - Zero-Copy Performance</title>
|
|
10
|
+
<meta name="description" content="Built with Velox Framework - The fastest way to build web applications." />
|
|
11
|
+
<meta name="keywords" content="velox, framework, performance, reactive, signals" />
|
|
12
|
+
|
|
13
|
+
<!-- Open Graph -->
|
|
14
|
+
<meta property="og:title" content="Velox App" />
|
|
15
|
+
<meta property="og:description" content="Experience the speed of fine-grained reactivity." />
|
|
16
|
+
<meta property="og:type" content="website" />
|
|
9
17
|
</head>
|
|
10
18
|
|
|
11
19
|
<body>
|
|
@@ -10,10 +10,12 @@
|
|
|
10
10
|
"check": "tsc"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@remyyy/velox": "^0.0.
|
|
13
|
+
"@remyyy/velox": "^0.0.6"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"vite": "^6.0.0",
|
|
17
|
-
"@remyyy/vite-plugin-velox": "^0.0.
|
|
17
|
+
"@remyyy/vite-plugin-velox": "^0.0.9",
|
|
18
|
+
"vite-plugin-compression": "^0.5.1",
|
|
19
|
+
"terser": "^5.24.0"
|
|
18
20
|
}
|
|
19
21
|
}
|
|
@@ -1,22 +1,106 @@
|
|
|
1
|
-
import { createSignal } from '@remyyy/velox'
|
|
1
|
+
import { createSignal, createEffect, Router, Route, For } from '@remyyy/velox';
|
|
2
|
+
import { Header } from './components/Header';
|
|
3
|
+
import { Card } from './components/Card';
|
|
4
|
+
import './style.css';
|
|
2
5
|
|
|
3
|
-
|
|
4
|
-
const [count, setCount] = createSignal(0)
|
|
6
|
+
function Dashboard() {
|
|
7
|
+
const [count, setCount] = createSignal(0);
|
|
8
|
+
const [logs, setLogs] = createSignal([]);
|
|
9
|
+
|
|
10
|
+
createEffect(() => {
|
|
11
|
+
const c = count();
|
|
12
|
+
setLogs(prev => [`Counter updated to: ${c}`, ...prev].slice(0, 5));
|
|
13
|
+
});
|
|
5
14
|
|
|
6
15
|
return (
|
|
7
|
-
<div>
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
<div className="layout">
|
|
17
|
+
<Header />
|
|
18
|
+
|
|
19
|
+
<section>
|
|
20
|
+
<h1 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '1rem' }}>
|
|
21
|
+
Welcome to <span style={{ color: 'var(--color-primary)' }}>Velox</span>
|
|
22
|
+
</h1>
|
|
23
|
+
<p style={{ color: 'var(--color-text-secondary)', fontSize: '1.1rem', maxWidth: '600px' }}>
|
|
24
|
+
You are running a production-ready template optimized for speed.
|
|
25
|
+
Start editing <code>src/App.js</code> to build your next big idea.
|
|
15
26
|
</p>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<div className="grid">
|
|
30
|
+
<Card title="Interactive Signal">
|
|
31
|
+
<div style={{
|
|
32
|
+
fontSize: '3rem',
|
|
33
|
+
fontWeight: 700,
|
|
34
|
+
color: 'var(--color-primary)',
|
|
35
|
+
fontVariantNumeric: 'tabular-nums'
|
|
36
|
+
}}>
|
|
37
|
+
{count}
|
|
38
|
+
</div>
|
|
39
|
+
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|
40
|
+
<button onClick={() => setCount(c => c + 1)}>Increment</button>
|
|
41
|
+
<button onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
42
|
+
</div>
|
|
43
|
+
</Card>
|
|
44
|
+
|
|
45
|
+
<Card title="Reactive Logs">
|
|
46
|
+
<div style={{
|
|
47
|
+
background: '#111',
|
|
48
|
+
padding: '1rem',
|
|
49
|
+
borderRadius: '8px',
|
|
50
|
+
fontFamily: 'monospace',
|
|
51
|
+
fontSize: '0.875rem',
|
|
52
|
+
height: '150px',
|
|
53
|
+
overflow: 'hidden'
|
|
54
|
+
}}>
|
|
55
|
+
<For each={logs}>
|
|
56
|
+
{(log) => <div style={{ color: '#0f0', marginBottom: '0.25rem' }}>➜ {log}</div>}
|
|
57
|
+
</For>
|
|
58
|
+
</div>
|
|
59
|
+
</Card>
|
|
60
|
+
|
|
61
|
+
<Card title="Performance Stats">
|
|
62
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
63
|
+
<div>Bundle Size: <span style={{ color: 'var(--color-primary)' }}>< 5kb</span></div>
|
|
64
|
+
<div>Reactivity: <span style={{ color: 'var(--color-primary)' }}>Fine-Grained</span></div>
|
|
65
|
+
<div>Virtual DOM: <span style={{ color: 'var(--color-primary)' }}>None</span></div>
|
|
66
|
+
<div>Hydration: <span style={{ color: 'var(--color-primary)' }}>Instant</span></div>
|
|
67
|
+
</div>
|
|
68
|
+
</Card>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function Features() {
|
|
75
|
+
const features = [
|
|
76
|
+
{ name: "Zero Virtual DOM", desc: "Compiles directly to surgical DOM operations." },
|
|
77
|
+
{ name: "Fine-Grained Reactivity", desc: "Only updates what needs to change." },
|
|
78
|
+
{ name: "Tiny Footprint", desc: "Entire runtime is under 3kb min+gzip." },
|
|
79
|
+
{ name: "JavaScript First", desc: "Simple API for modern JS." }
|
|
80
|
+
];
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<div className="layout">
|
|
84
|
+
<Header />
|
|
85
|
+
<h2 style={{ fontSize: '2rem', marginBottom: '2rem' }}>Core Features</h2>
|
|
86
|
+
<div className="grid">
|
|
87
|
+
<For each={() => features}>
|
|
88
|
+
{(item) => (
|
|
89
|
+
<Card title={item.name}>
|
|
90
|
+
<p style={{ color: 'var(--color-text-secondary)' }}>{item.desc}</p>
|
|
91
|
+
</Card>
|
|
92
|
+
)}
|
|
93
|
+
</For>
|
|
16
94
|
</div>
|
|
17
|
-
< p class="read-the-docs" >
|
|
18
|
-
Click on the Velox logo to learn more
|
|
19
|
-
</p>
|
|
20
95
|
</div>
|
|
21
|
-
)
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default function App() {
|
|
100
|
+
return (
|
|
101
|
+
<Router>
|
|
102
|
+
<Route path="/" component={Dashboard} />
|
|
103
|
+
<Route path="/features" component={Features} />
|
|
104
|
+
</Router>
|
|
105
|
+
);
|
|
22
106
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const Card = (props) => {
|
|
2
|
+
return (
|
|
3
|
+
<div style={{
|
|
4
|
+
background: 'var(--color-surface)',
|
|
5
|
+
border: '1px solid var(--color-border)',
|
|
6
|
+
borderRadius: '12px',
|
|
7
|
+
padding: '1.5rem',
|
|
8
|
+
display: 'flex',
|
|
9
|
+
flexDirection: 'column',
|
|
10
|
+
gap: '1rem',
|
|
11
|
+
}}>
|
|
12
|
+
{props.title && <h3 style={{ fontSize: '1.25rem', fontWeight: 600 }}>{props.title}</h3>}
|
|
13
|
+
{props.children}
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Link } from '@remyyy/velox';
|
|
2
|
+
|
|
3
|
+
export function Header() {
|
|
4
|
+
return (
|
|
5
|
+
<header style={{
|
|
6
|
+
display: 'flex',
|
|
7
|
+
alignItems: 'center',
|
|
8
|
+
justifyContent: 'space-between',
|
|
9
|
+
marginBottom: '3rem',
|
|
10
|
+
borderBottom: '1px solid var(--color-border)',
|
|
11
|
+
paddingBottom: '1.5rem'
|
|
12
|
+
}}>
|
|
13
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
14
|
+
<div style={{
|
|
15
|
+
width: '32px', height: '32px',
|
|
16
|
+
background: 'var(--color-primary)',
|
|
17
|
+
borderRadius: '6px'
|
|
18
|
+
}} />
|
|
19
|
+
<span style={{ fontSize: '1.5rem', fontWeight: 700 }}>Velox App</span>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<nav style={{ display: 'flex', gap: '2rem' }}>
|
|
23
|
+
<Link to="/">Dashboard</Link>
|
|
24
|
+
<Link to="/features">Features</Link>
|
|
25
|
+
</nav>
|
|
26
|
+
</header>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -1,56 +1,75 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
color-
|
|
7
|
-
color:
|
|
8
|
-
|
|
2
|
+
--font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
|
|
4
|
+
--color-bg: #09090b;
|
|
5
|
+
--color-surface: #18181b;
|
|
6
|
+
--color-surface-hover: #27272a;
|
|
7
|
+
--color-border: #27272a;
|
|
8
|
+
|
|
9
|
+
--color-text-primary: #f4f4f5;
|
|
10
|
+
--color-text-secondary: #a1a1aa;
|
|
11
|
+
|
|
12
|
+
--color-primary: #f97316;
|
|
13
|
+
--color-primary-glow: rgba(249, 115, 22, 0.5);
|
|
14
|
+
}
|
|
9
15
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
* {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
body {
|
|
17
23
|
margin: 0;
|
|
18
|
-
display: flex;
|
|
19
|
-
place-items: center;
|
|
20
24
|
min-width: 320px;
|
|
21
25
|
min-height: 100vh;
|
|
26
|
+
background-color: var(--color-bg);
|
|
27
|
+
color: var(--color-text-primary);
|
|
28
|
+
font-family: var(--font-family);
|
|
29
|
+
line-height: 1.5;
|
|
30
|
+
font-synthesis: none;
|
|
31
|
+
text-rendering: optimizeLegibility;
|
|
32
|
+
-webkit-font-smoothing: antialiased;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
a {
|
|
36
|
+
font-weight: 500;
|
|
37
|
+
color: var(--color-primary);
|
|
38
|
+
text-decoration: none;
|
|
39
|
+
transition: opacity 0.2s;
|
|
22
40
|
}
|
|
23
41
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
line-height: 1.1;
|
|
42
|
+
a:hover {
|
|
43
|
+
opacity: 0.8;
|
|
27
44
|
}
|
|
28
45
|
|
|
29
46
|
button {
|
|
30
47
|
border-radius: 8px;
|
|
31
|
-
border: 1px solid
|
|
48
|
+
border: 1px solid var(--color-border);
|
|
32
49
|
padding: 0.6em 1.2em;
|
|
33
50
|
font-size: 1em;
|
|
34
51
|
font-weight: 500;
|
|
35
52
|
font-family: inherit;
|
|
36
|
-
background-color:
|
|
53
|
+
background-color: var(--color-surface);
|
|
54
|
+
color: var(--color-text-primary);
|
|
37
55
|
cursor: pointer;
|
|
38
|
-
transition:
|
|
56
|
+
transition: all 0.25s;
|
|
39
57
|
}
|
|
58
|
+
|
|
40
59
|
button:hover {
|
|
41
|
-
border-color:
|
|
60
|
+
border-color: var(--color-primary);
|
|
61
|
+
background-color: var(--color-surface-hover);
|
|
42
62
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
63
|
+
|
|
64
|
+
.layout {
|
|
65
|
+
max-width: 1200px;
|
|
66
|
+
margin: 0 auto;
|
|
67
|
+
padding: 2rem;
|
|
46
68
|
}
|
|
47
69
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
button {
|
|
54
|
-
background-color: #f9f9f9;
|
|
55
|
-
}
|
|
70
|
+
.grid {
|
|
71
|
+
display: grid;
|
|
72
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
73
|
+
gap: 1.5rem;
|
|
74
|
+
margin-top: 2rem;
|
|
56
75
|
}
|
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
import { defineConfig } from 'vite'
|
|
2
2
|
import velox from '@remyyy/vite-plugin-velox'
|
|
3
|
+
import compression from 'vite-plugin-compression';
|
|
3
4
|
|
|
4
5
|
export default defineConfig({
|
|
5
|
-
plugins: [
|
|
6
|
+
plugins: [
|
|
7
|
+
velox(),
|
|
8
|
+
compression({ algorithm: 'gzip' })
|
|
9
|
+
],
|
|
10
|
+
build: {
|
|
11
|
+
minify: 'terser',
|
|
12
|
+
terserOptions: {
|
|
13
|
+
compress: {
|
|
14
|
+
drop_console: true,
|
|
15
|
+
drop_debugger: true,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
rollupOptions: {
|
|
19
|
+
output: {
|
|
20
|
+
manualChunks: {
|
|
21
|
+
vendor: ['@remyyy/velox'],
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
6
26
|
})
|
|
@@ -4,7 +4,15 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
<title>Velox App - Zero-Copy Performance</title>
|
|
9
|
+
<meta name="description" content="Built with Velox Framework - The fastest way to build web applications." />
|
|
10
|
+
<meta name="keywords" content="velox, framework, performance, reactive, signals" />
|
|
11
|
+
|
|
12
|
+
<!-- Open Graph -->
|
|
13
|
+
<meta property="og:title" content="Velox App" />
|
|
14
|
+
<meta property="og:description" content="Experience the speed of fine-grained reactivity." />
|
|
15
|
+
<meta property="og:type" content="website" />
|
|
8
16
|
</head>
|
|
9
17
|
<body>
|
|
10
18
|
<div id="app"></div>
|
|
@@ -10,11 +10,13 @@
|
|
|
10
10
|
"check": "tsc"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@remyyy/velox": "^0.0.
|
|
13
|
+
"@remyyy/velox": "^0.0.6"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"typescript": "^5.2.2",
|
|
17
17
|
"vite": "^6.0.0",
|
|
18
|
-
"@remyyy/vite-plugin-velox": "^0.0.
|
|
18
|
+
"@remyyy/vite-plugin-velox": "^0.0.9",
|
|
19
|
+
"vite-plugin-compression": "^0.5.1",
|
|
20
|
+
"terser": "^5.24.0"
|
|
19
21
|
}
|
|
20
22
|
}
|
|
@@ -1,46 +1,106 @@
|
|
|
1
|
-
import { createSignal, Router, Route,
|
|
1
|
+
import { createSignal, createEffect, Router, Route, For } from '@remyyy/velox';
|
|
2
|
+
import { Header } from './components/Header';
|
|
3
|
+
import { Card } from './components/Card';
|
|
2
4
|
import './style.css';
|
|
3
5
|
|
|
4
|
-
function
|
|
6
|
+
function Dashboard() {
|
|
5
7
|
const [count, setCount] = createSignal(0);
|
|
8
|
+
const [logs, setLogs] = createSignal<string[]>([]);
|
|
9
|
+
|
|
10
|
+
createEffect(() => {
|
|
11
|
+
const c = count();
|
|
12
|
+
setLogs(prev => [`Counter updated to: ${c}`, ...prev].slice(0, 5));
|
|
13
|
+
});
|
|
6
14
|
|
|
7
15
|
return (
|
|
8
|
-
<div className="
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
<div className="layout">
|
|
17
|
+
<Header />
|
|
18
|
+
|
|
19
|
+
<section>
|
|
20
|
+
<h1 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '1rem' }}>
|
|
21
|
+
Welcome to <span style={{ color: 'var(--color-primary)' }}>Velox</span>
|
|
22
|
+
</h1>
|
|
23
|
+
<p style={{ color: 'var(--color-text-secondary)', fontSize: '1.1rem', maxWidth: '600px' }}>
|
|
24
|
+
You are running a production-ready template optimized for speed.
|
|
25
|
+
Start editing <code>src/App.tsx</code> to build your next big idea.
|
|
16
26
|
</p>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<div className="grid">
|
|
30
|
+
<Card title="Interactive Signal">
|
|
31
|
+
<div style={{
|
|
32
|
+
fontSize: '3rem',
|
|
33
|
+
fontWeight: 700,
|
|
34
|
+
color: 'var(--color-primary)',
|
|
35
|
+
fontVariantNumeric: 'tabular-nums'
|
|
36
|
+
}}>
|
|
37
|
+
{count}
|
|
38
|
+
</div>
|
|
39
|
+
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|
40
|
+
<button onClick={() => setCount(c => c + 1)}>Increment</button>
|
|
41
|
+
<button onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
42
|
+
</div>
|
|
43
|
+
</Card>
|
|
44
|
+
|
|
45
|
+
<Card title="Reactive Logs">
|
|
46
|
+
<div style={{
|
|
47
|
+
background: '#111',
|
|
48
|
+
padding: '1rem',
|
|
49
|
+
borderRadius: '8px',
|
|
50
|
+
fontFamily: 'monospace',
|
|
51
|
+
fontSize: '0.875rem',
|
|
52
|
+
height: '150px',
|
|
53
|
+
overflow: 'hidden'
|
|
54
|
+
}}>
|
|
55
|
+
<For each={logs}>
|
|
56
|
+
{(log) => <div style={{ color: '#0f0', marginBottom: '0.25rem' }}>➜ {log}</div>}
|
|
57
|
+
</For>
|
|
58
|
+
</div>
|
|
59
|
+
</Card>
|
|
60
|
+
|
|
61
|
+
<Card title="Performance Stats">
|
|
62
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
63
|
+
<div>Bundle Size: <span style={{ color: 'var(--color-primary)' }}>< 5kb</span></div>
|
|
64
|
+
<div>Reactivity: <span style={{ color: 'var(--color-primary)' }}>Fine-Grained</span></div>
|
|
65
|
+
<div>Virtual DOM: <span style={{ color: 'var(--color-primary)' }}>None</span></div>
|
|
66
|
+
<div>Hydration: <span style={{ color: 'var(--color-primary)' }}>Instant</span></div>
|
|
67
|
+
</div>
|
|
68
|
+
</Card>
|
|
17
69
|
</div>
|
|
18
|
-
<p className="read-the-docs">
|
|
19
|
-
Click on the Velox logo to learn more
|
|
20
|
-
</p>
|
|
21
70
|
</div>
|
|
22
71
|
);
|
|
23
72
|
}
|
|
24
73
|
|
|
25
|
-
function
|
|
74
|
+
function Features() {
|
|
75
|
+
const features = [
|
|
76
|
+
{ name: "Zero Virtual DOM", desc: "Compiles directly to surgical DOM operations." },
|
|
77
|
+
{ name: "Fine-Grained Reactivity", desc: "Only updates what needs to change." },
|
|
78
|
+
{ name: "Tiny Footprint", desc: "Entire runtime is under 3kb min+gzip." },
|
|
79
|
+
{ name: "TypeScript First", desc: "Written in TS for TS developers." }
|
|
80
|
+
];
|
|
81
|
+
|
|
26
82
|
return (
|
|
27
|
-
<div className="
|
|
28
|
-
<
|
|
29
|
-
<
|
|
83
|
+
<div className="layout">
|
|
84
|
+
<Header />
|
|
85
|
+
<h2 style={{ fontSize: '2rem', marginBottom: '2rem' }}>Core Features</h2>
|
|
86
|
+
<div className="grid">
|
|
87
|
+
<For each={() => features}>
|
|
88
|
+
{(item) => (
|
|
89
|
+
<Card title={item.name}>
|
|
90
|
+
<p style={{ color: 'var(--color-text-secondary)' }}>{item.desc}</p>
|
|
91
|
+
</Card>
|
|
92
|
+
)}
|
|
93
|
+
</For>
|
|
94
|
+
</div>
|
|
30
95
|
</div>
|
|
31
96
|
);
|
|
32
97
|
}
|
|
33
98
|
|
|
34
99
|
export default function App() {
|
|
35
100
|
return (
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</nav>
|
|
41
|
-
<Route path="/" component={Home} />
|
|
42
|
-
<Route path="/about" component={About} />
|
|
43
|
-
</Router>
|
|
44
|
-
</div>
|
|
101
|
+
<Router>
|
|
102
|
+
<Route path="/" component={Dashboard} />
|
|
103
|
+
<Route path="/features" component={Features} />
|
|
104
|
+
</Router>
|
|
45
105
|
);
|
|
46
106
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Component } from '@remyyy/velox';
|
|
2
|
+
|
|
3
|
+
export const Card: Component = (props) => {
|
|
4
|
+
return (
|
|
5
|
+
<div style={{
|
|
6
|
+
background: 'var(--color-surface)',
|
|
7
|
+
border: '1px solid var(--color-border)',
|
|
8
|
+
borderRadius: '12px',
|
|
9
|
+
padding: '1.5rem',
|
|
10
|
+
display: 'flex',
|
|
11
|
+
flexDirection: 'column',
|
|
12
|
+
gap: '1rem',
|
|
13
|
+
}}>
|
|
14
|
+
{props.title && <h3 style={{ fontSize: '1.25rem', fontWeight: 600 }}>{props.title}</h3>}
|
|
15
|
+
{props.children}
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Link } from '@remyyy/velox';
|
|
2
|
+
|
|
3
|
+
export function Header() {
|
|
4
|
+
return (
|
|
5
|
+
<header style={{
|
|
6
|
+
display: 'flex',
|
|
7
|
+
alignItems: 'center',
|
|
8
|
+
justifyContent: 'space-between',
|
|
9
|
+
marginBottom: '3rem',
|
|
10
|
+
borderBottom: '1px solid var(--color-border)',
|
|
11
|
+
paddingBottom: '1.5rem'
|
|
12
|
+
}}>
|
|
13
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
14
|
+
<div style={{
|
|
15
|
+
width: '32px', height: '32px',
|
|
16
|
+
background: 'var(--color-primary)',
|
|
17
|
+
borderRadius: '6px'
|
|
18
|
+
}} />
|
|
19
|
+
<span style={{ fontSize: '1.5rem', fontWeight: 700 }}>Velox App</span>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<nav style={{ display: 'flex', gap: '2rem' }}>
|
|
23
|
+
<Link to="/">Dashboard</Link>
|
|
24
|
+
<Link to="/features">Features</Link>
|
|
25
|
+
</nav>
|
|
26
|
+
</header>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
import { defineConfig } from 'vite'
|
|
2
2
|
import velox from '@remyyy/vite-plugin-velox'
|
|
3
|
+
import compression from 'vite-plugin-compression';
|
|
3
4
|
|
|
4
5
|
export default defineConfig({
|
|
5
|
-
plugins: [
|
|
6
|
+
plugins: [
|
|
7
|
+
velox(),
|
|
8
|
+
compression({ algorithm: 'gzip' })
|
|
9
|
+
],
|
|
10
|
+
build: {
|
|
11
|
+
minify: 'terser',
|
|
12
|
+
terserOptions: {
|
|
13
|
+
compress: {
|
|
14
|
+
drop_console: true,
|
|
15
|
+
drop_debugger: true,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
rollupOptions: {
|
|
19
|
+
output: {
|
|
20
|
+
manualChunks: {
|
|
21
|
+
vendor: ['@remyyy/velox'],
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
6
26
|
})
|