@remyyy/create-velox 0.0.11 → 0.0.13
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/LICENSE +21 -0
- 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/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/vite.config.ts +21 -1
- package/templates/vanilla-js/_gitignore +0 -3
- package/templates/vanilla-ts/_gitignore +0 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 TheRemyyy
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/package.json
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remyyy/create-velox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
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
|
})
|