vaderjs 1.4.1-ui7iuy47 → 1.4.2-jpiml56
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/.editorconfig +11 -0
- package/.vscode/c_cpp_properties.json +21 -0
- package/.vscode/settings.json +12 -0
- package/README.md +44 -197
- package/binaries/Kalix/index.js +673 -0
- package/binaries/compiler/main.js +540 -0
- package/binaries/vader.js +74 -0
- package/binaries/watcher/hmr.js +41 -0
- package/client/index.d.ts +226 -0
- package/client/runtime/index.js +1 -0
- package/client/runtime/router.js +1 -0
- package/config/index.ts +87 -0
- package/index.ts +344 -0
- package/package.json +13 -25
- package/plugins/cloudflare/functions/index.js +102 -0
- package/plugins/cloudflare/toCopy/@server/Kalix/index.js +673 -0
- package/plugins/cloudflare/toCopy/@server/cloudflare_ssr/index.js +85 -0
- package/plugins/cloudflare/toCopy/node_modules/vaderjs/server/index.js +99 -0
- package/plugins/cloudflare/toCopy/src/client.js +1 -0
- package/plugins/cloudflare/toCopy/src/router.js +1 -0
- package/plugins/ssg/index.js +197 -0
- package/plugins/tailwindcss/index.ts +93 -0
- package/plugins/vercel/functions/index.ts +8 -0
- package/router/index.ts +208 -0
- package/server/index.js +143 -0
- package/vader_dev.js +177 -0
- package/@integrations/ssg.js +0 -189
- package/LICENSE +0 -21
- package/binaries/IPC/index.js +0 -277
- package/binaries/main.js +0 -1464
- package/binaries/readme.md +0 -4
- package/binaries/watcher.js +0 -74
- package/binaries/win32/check.ps1 +0 -7
- package/client/index.js +0 -426
- package/config/index.js +0 -36
- package/logo.png +0 -0
- package/runtime/router.js +0 -1
- package/runtime/vader.js +0 -1
- package/vader.js +0 -230
package/.editorconfig
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"configurations": [
|
|
3
|
+
{
|
|
4
|
+
"name": "Win32",
|
|
5
|
+
"includePath": [
|
|
6
|
+
"${workspaceFolder}/**"
|
|
7
|
+
],
|
|
8
|
+
"defines": [
|
|
9
|
+
"_DEBUG",
|
|
10
|
+
"UNICODE",
|
|
11
|
+
"_UNICODE"
|
|
12
|
+
],
|
|
13
|
+
"windowsSdkVersion": "10.0.22621.0",
|
|
14
|
+
"compilerPath": "cl.exe",
|
|
15
|
+
"cStandard": "c17",
|
|
16
|
+
"cppStandard": "c++17",
|
|
17
|
+
"intelliSenseMode": "windows-msvc-x64"
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"version": 4
|
|
21
|
+
}
|
package/README.md
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
<p align="center">
|
|
3
2
|
<a href="https://vader-js.pages.dev">
|
|
4
3
|
<picture>
|
|
@@ -9,221 +8,69 @@
|
|
|
9
8
|
</a>
|
|
10
9
|
</p>
|
|
11
10
|
|
|
12
|
-
#
|
|
11
|
+
# Vader.js A reactive framework for building fast and scalable web applications
|
|
12
|
+
|
|
13
|
+
[](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [](https://www.npmjs.com/package/vaderjs)
|
|
13
14
|
|
|
14
|
-
[](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [](https://www.npmjs.com/package/vaderjs)
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
> Do not use any alpha versions as these where changed multiple times any version under latest is considered lts and are deemed to be stable
|
|
18
|
-
## Get Started
|
|
16
|
+
# Installation
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
```js
|
|
19
|
+
npx vaderjs @latest
|
|
20
|
+
```
|
|
21
21
|
|
|
22
|
-
```bash
|
|
23
|
-
npx vaderjs@latest
|
|
24
|
-
```
|
|
25
22
|
|
|
26
|
-
4. Create Proper Folders
|
|
27
23
|
|
|
24
|
+
# Project Setup
|
|
28
25
|
Create a pages folder - which allows you to have nextjs page like routing via buns file based router
|
|
29
26
|
|
|
30
27
|
Tip: Each folder can be deep nested up to 4 levels!
|
|
31
28
|
|
|
32
|
-
```
|
|
29
|
+
```md
|
|
30
|
+
|
|
33
31
|
/pages/index.jsx = /
|
|
34
32
|
/pages/home/[page].jsx = /home/:page
|
|
35
33
|
/pages/path/index.jsx = /path/
|
|
36
|
-
/pages/test/[...]/index.jsx = /path/test/*
|
|
34
|
+
/pages/test/[[...catchall]]/index.jsx = /path/test/*
|
|
37
35
|
/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
|
|
38
|
-
```
|
|
39
|
-
Keyword folders - all files are passed from these folders to the `dist` folder
|
|
40
36
|
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
pages - used for jsx route files
|
|
44
|
-
src - used for your jsx components / javascript files
|
|
45
|
-
public - used for anything
|
|
37
|
+
```
|
|
38
|
+
Keyword folders - all files are passed from these folders to the build folder
|
|
46
39
|
|
|
40
|
+
```md
|
|
41
|
+
1. pages - used for jsx route files
|
|
42
|
+
2. src - used for your jsx components / javascript -typescript files
|
|
43
|
+
3. public - used for anything / css / json etc
|
|
47
44
|
```
|
|
48
45
|
|
|
49
|
-
Create a vader.config.js file
|
|
50
46
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
47
|
+
# Define your config
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
import { defineConfig } from "vaderjs/config";
|
|
51
|
+
import cloudflare from "vaderjs/plugins/cloudflare/functions"
|
|
52
|
+
import tailwindcss from "vaderjs/plugins/tailwindcss"
|
|
53
|
+
export default defineConfig({
|
|
54
|
+
target: "web",
|
|
55
|
+
host: {
|
|
56
|
+
hostname: "localhost",
|
|
57
|
+
provider:'cloudflare' // used for ssg or ssr
|
|
58
|
+
},
|
|
59
|
+
env: {
|
|
60
|
+
PORT: 3000,
|
|
61
|
+
SSR: true,
|
|
62
|
+
apiRoute: "https://api.example.com"
|
|
63
|
+
},
|
|
64
|
+
Router: {
|
|
65
|
+
tls: {
|
|
66
|
+
cert: "cert.pem",
|
|
67
|
+
key: "key.pem"
|
|
68
|
+
},
|
|
69
|
+
headers: {
|
|
70
|
+
"cache-control": "public, max-age=0, must-revalidate"
|
|
59
71
|
}
|
|
60
72
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
integrations:[ssg]
|
|
65
|
-
})
|
|
66
|
-
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
5. And your done - Run `npx vaderjs` and the compiled output is visible inside of the `/dist/` folder!
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
## Key Features & Examples
|
|
75
|
-
|
|
76
|
-
### File based routing
|
|
77
|
-
vader's compiler automatically handles routing so you wont need to! - it uses a similar page routing to nextjs
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
/pages/index.jsx = /
|
|
81
|
-
/pages/home/[page].jsx = /home/:page
|
|
82
|
-
/pages/path/index.jsx = /path/
|
|
83
|
-
/pages/path/[...].jsx = /path/*
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
For pages that have [params] you can derive it using this.request
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
# Usage
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
```jsx
|
|
93
|
-
// pages/home.jsx
|
|
94
|
-
import {Component, useState, useRef} = from 'vaderjs/client'
|
|
95
|
-
import Mycomponent from './src/mycomponent.jsx'
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
export default function(req, res){
|
|
99
|
-
let counterRef = useRef(null)
|
|
100
|
-
let [count, setCount] = useState(0)
|
|
101
|
-
|
|
102
|
-
return <>
|
|
103
|
-
<h1>{count()}</h1>
|
|
104
|
-
<button onClick={(event)=>{setCount(count() + 1)}
|
|
105
|
-
</>
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
# ServerSide Site Generation (SSG)
|
|
113
|
-
|
|
114
|
-
Vader allows you to integrate ssg into your app via config file, it compiles all code to a static index.html page so your visitors will never have to wait for the page to load. Uppon rerender the page rehydrates reapplying functionality!
|
|
115
|
-
|
|
116
|
-
you can always opt out of ssg using:
|
|
117
|
-
|
|
118
|
-
```js
|
|
119
|
-
export const $prerender = false;
|
|
120
|
-
```
|
|
121
|
-
We can define some metadata to be used at compile
|
|
122
|
-
|
|
123
|
-
```jsx
|
|
124
|
-
// src/layout.tsx
|
|
125
|
-
export function Layout({title, keywords, description, children}){
|
|
126
|
-
return (
|
|
127
|
-
<Html lang="en-us">
|
|
128
|
-
<Head>
|
|
129
|
-
<title>{title}</title>
|
|
130
|
-
<meta charset="utf-8" />
|
|
131
|
-
<meta name="description" content={description} />
|
|
132
|
-
<meta name="robots" content="index, follow" />
|
|
133
|
-
<meta name="author" content="Malik Whitten" />
|
|
134
|
-
<meta name="keywords" content={keywords} />
|
|
135
|
-
<meta name="url" content="https://malikwhitten.com" />
|
|
136
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
137
|
-
<link rel="icon" href={logo} />
|
|
138
|
-
<script src="/src/theme.js" eager> </script>
|
|
139
|
-
<link rel="stylesheet" href="/public/css/styles.css" />
|
|
140
|
-
</Head>
|
|
141
|
-
|
|
142
|
-
{children}
|
|
143
|
-
</Html>
|
|
144
|
-
)
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// pages/index.jsx
|
|
148
|
-
export default function Index(_,req, res){
|
|
149
|
-
//_ is props which you wont need on base route componnets
|
|
150
|
-
return (
|
|
151
|
-
<Layout {...{title:'home', description:'home page', keywords:'vader.js', logo:''}}>
|
|
152
|
-
<h1> Hello World</h1>
|
|
153
|
-
</Layout>
|
|
154
|
-
)
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
```
|
|
158
|
-
Vader will take the metadata and place it inside of the compiled html file.
|
|
159
|
-
|
|
160
|
-
### Styling
|
|
161
|
-
|
|
162
|
-
Vaderjs has two types of in javascript styling - css modules and inline jsx styling
|
|
163
|
-
```jsx
|
|
164
|
-
|
|
165
|
-
// inline
|
|
166
|
-
<button style={{color:'red'}}>Button</button>
|
|
167
|
-
|
|
168
|
-
// css module
|
|
169
|
-
|
|
170
|
-
//public/app.module.css
|
|
171
|
-
`
|
|
172
|
-
.container{
|
|
173
|
-
color:red;
|
|
174
|
-
font-size:20px
|
|
175
|
-
}
|
|
176
|
-
`
|
|
177
|
-
|
|
178
|
-
// import file
|
|
179
|
-
import style from 'public/app.module.css' // this gets replaced with the compiled css output
|
|
180
|
-
|
|
181
|
-
<button style={{...style.container}}>Button </button>
|
|
182
|
-
|
|
183
|
-
```
|
|
184
|
-
### State Management
|
|
185
|
-
Vaderjs uses partial hydration & full reflection
|
|
186
|
-
|
|
187
|
-
You can pass a reference to the dom target like an id for the element u want to change - or you can just swap the value and the entire component will rerender
|
|
188
|
-
|
|
189
|
-
```jsx
|
|
190
|
-
import {Component, useState, useRef. Mounted} = from 'vaderjs/client'
|
|
191
|
-
|
|
192
|
-
export default class MyApp extends Component{
|
|
193
|
-
contructor(){
|
|
194
|
-
super()
|
|
195
|
-
this.key = 'static key for state changes'
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
render(){
|
|
199
|
-
let [count, setCount] = useState(0)
|
|
200
|
-
let ref = useRef('')
|
|
201
|
-
|
|
202
|
-
Mounted(()=>{
|
|
203
|
-
console.log(ref.current) // p tag
|
|
204
|
-
}, this)
|
|
205
|
-
return <>
|
|
206
|
-
<p ref={ref}>Count is {count}</p>
|
|
207
|
-
{/**
|
|
208
|
-
pass anything used from the toplevel render to the lowerlevel function params to be able to invoke!
|
|
209
|
-
**/}
|
|
210
|
-
<button onclick={()=>{
|
|
211
|
-
setCount(++count)
|
|
212
|
-
}}>Increment</button>
|
|
213
|
-
</>
|
|
214
|
-
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
## License
|
|
223
|
-
|
|
224
|
-
VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for details.
|
|
225
|
-
|
|
226
|
-
## Join the Community
|
|
73
|
+
plugins: [cloudflare, tailwindcss],
|
|
74
|
+
});
|
|
227
75
|
|
|
228
|
-
|
|
229
|
-
|
|
76
|
+
```
|