@vyckr/tachyon 1.1.7 → 1.1.9
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 +1 -1
- package/routes/HTML +28 -6
- package/src/client/dev.html +0 -1
- package/src/client/prod.html +0 -1
- package/src/client/yon.ts +99 -117
- package/src/serve.ts +13 -4
- package/src/server/tach.ts +1 -1
package/package.json
CHANGED
package/routes/HTML
CHANGED
|
@@ -1,6 +1,28 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
<script>
|
|
2
|
+
const { default: dayjs } = await import('/modules/dayjs.js')
|
|
3
|
+
|
|
4
|
+
console.log(dayjs().format())
|
|
5
|
+
document.title = "Home"
|
|
6
|
+
|
|
7
|
+
console.log("Hello from JavaScript")
|
|
8
|
+
|
|
9
|
+
let greeting = "Hello from HTML!"
|
|
10
|
+
|
|
11
|
+
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
|
|
12
|
+
|
|
13
|
+
const start = 5
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<h1>${greeting}</h1>
|
|
17
|
+
<input type="text" placeholder="Write Something" :value="greeting" @input="(value) => greeting = value" />
|
|
18
|
+
<br/>
|
|
19
|
+
<ty-counter :count="start" />
|
|
20
|
+
<ty-loop :for="const num of arr">
|
|
21
|
+
<ty-logic :if="num % 5 === 0">
|
|
22
|
+
<p>Half way there! Number ${num}</p>
|
|
23
|
+
</ty-logic>
|
|
24
|
+
<ty-logic :else>
|
|
25
|
+
<p>Number ${num}</p>
|
|
26
|
+
</ty-logic>
|
|
27
|
+
</ty-loop>
|
|
28
|
+
<ty-counter :count="start" />
|
package/src/client/dev.html
CHANGED
package/src/client/prod.html
CHANGED
package/src/client/yon.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { JSDOM } from 'jsdom'
|
|
2
2
|
import Router from "../router.js";
|
|
3
|
-
import { EventEmitter } from 'node:stream';
|
|
4
3
|
import { BunRequest } from 'bun';
|
|
5
4
|
import { exists } from 'node:fs/promises';
|
|
6
5
|
|
|
@@ -8,8 +7,6 @@ export default class Yon {
|
|
|
8
7
|
|
|
9
8
|
private static htmlMethod = 'HTML'
|
|
10
9
|
|
|
11
|
-
private static emitter = new EventEmitter()
|
|
12
|
-
|
|
13
10
|
private static compMapping = new Map<string, string>()
|
|
14
11
|
|
|
15
12
|
static getParams(request: BunRequest, route: string) {
|
|
@@ -42,24 +39,10 @@ export default class Yon {
|
|
|
42
39
|
GET: async () => new Response(await main.bytes(), { headers: { 'Content-Type': 'application/javascript' } })
|
|
43
40
|
}
|
|
44
41
|
}
|
|
45
|
-
|
|
46
|
-
let styles = ''
|
|
47
|
-
|
|
48
|
-
Yon.emitter.addListener('style', (msg) => {
|
|
49
|
-
styles += `${msg}\n`
|
|
50
|
-
})
|
|
51
42
|
|
|
52
43
|
await Promise.all([Yon.bundleDependencies(), Yon.bundleComponents(), Yon.bundlePages(), Yon.bundleAssets()])
|
|
53
44
|
|
|
54
45
|
await Bun.write(Bun.file(`${import.meta.dir}/routes.json`), JSON.stringify(Router.routeSlugs))
|
|
55
|
-
|
|
56
|
-
Yon.emitter.removeAllListeners('style')
|
|
57
|
-
|
|
58
|
-
if(styles) {
|
|
59
|
-
Router.reqRoutes["/styles.css"] = {
|
|
60
|
-
GET: () => new Response(styles, { headers: { 'Content-Type': 'text/css' }})
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
46
|
}
|
|
64
47
|
|
|
65
48
|
private static extractComponents(data: string) {
|
|
@@ -68,114 +51,113 @@ export default class Yon {
|
|
|
68
51
|
|
|
69
52
|
html.innerHTML = data
|
|
70
53
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const script = scripts[0]
|
|
74
|
-
|
|
75
|
-
scripts.forEach(s => s.remove())
|
|
76
|
-
|
|
77
|
-
const styles = html.querySelectorAll('style')
|
|
78
|
-
|
|
79
|
-
const style = styles[0]
|
|
80
|
-
|
|
81
|
-
styles.forEach(s => s.remove())
|
|
82
|
-
|
|
83
|
-
return { html, script, style }
|
|
54
|
+
return { html, script: html.querySelectorAll('script')[0] }
|
|
84
55
|
}
|
|
85
56
|
|
|
86
|
-
private static parseHTML(elements:
|
|
57
|
+
private static parseHTML(elements: HTMLDivElement, imports: Map<string, Set<string>> = new Map<string, Set<string>>()) {
|
|
87
58
|
|
|
88
59
|
const parsed: { static?: string, render?: string, element?: string }[] = []
|
|
89
|
-
|
|
90
|
-
for (const element of elements) {
|
|
91
|
-
|
|
92
|
-
if(element.tagName
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
if
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
60
|
+
|
|
61
|
+
for (const element of elements.children) {
|
|
62
|
+
|
|
63
|
+
if(element.tagName !== "SCRIPT") {
|
|
64
|
+
|
|
65
|
+
if(element.tagName.startsWith('TY-')) {
|
|
66
|
+
|
|
67
|
+
const component = element.tagName.split('-')[1].toLowerCase()
|
|
68
|
+
|
|
69
|
+
if(component === 'loop') {
|
|
70
|
+
const attribute = element.attributes[0];
|
|
71
|
+
if (attribute.name === ':for') parsed.push({ render: `for(${attribute.value}) {`})
|
|
72
|
+
} else if(component === "logic") {
|
|
73
|
+
const attribute = element.attributes[0]
|
|
74
|
+
if (attribute.name === ':if') parsed.push({ render: `if(${attribute.value}) {`});
|
|
75
|
+
if (attribute.name === ':else-if') parsed.push({ render: `else if(${attribute.value}) {`});
|
|
76
|
+
if (attribute.name === ':else') parsed.push({ render: `else {`});
|
|
77
|
+
} else {
|
|
78
|
+
|
|
79
|
+
const exports: string[] = []
|
|
80
|
+
|
|
81
|
+
const filepath = Yon.compMapping.get(component)
|
|
82
|
+
|
|
83
|
+
if(filepath) {
|
|
84
|
+
|
|
85
|
+
for(let i = 0; i < element.attributes.length; i++) {
|
|
86
|
+
|
|
87
|
+
if(element.attributes[i].name.startsWith(':')) {
|
|
88
|
+
const propName = element.attributes[i].name.slice(1)
|
|
89
|
+
exports.push(`${propName} = ${"${" + element.attributes[i].value + "}"}`)
|
|
90
|
+
} else {
|
|
91
|
+
const propName = element.attributes[i].name
|
|
92
|
+
exports.push(`${propName} = "${element.attributes[i].value}"`)
|
|
93
|
+
}
|
|
120
94
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
95
|
+
|
|
96
|
+
if(imports.has(filepath)) {
|
|
97
|
+
|
|
98
|
+
if(!imports.get(filepath)?.has(component)) {
|
|
99
|
+
parsed.push({ static: `const { default: ${component} } = import('/components/${filepath}')`})
|
|
100
|
+
imports.get(filepath)?.add(component)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
} else {
|
|
104
|
+
|
|
105
|
+
parsed.push({ static: `const { default: ${component} } = await import('/components/${filepath}')`})
|
|
106
|
+
imports.set(filepath, new Set<string>([component]))
|
|
128
107
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
parsed.push({ static: `const
|
|
133
|
-
|
|
108
|
+
|
|
109
|
+
const hash = Bun.randomUUIDv7().split('-')[1]
|
|
110
|
+
|
|
111
|
+
parsed.push({ static: `const comp_${hash} = await ${component}(\`${exports.join(';')}\`)`})
|
|
112
|
+
|
|
113
|
+
parsed.push({ render: `elements += "<div>"` })
|
|
114
|
+
|
|
115
|
+
parsed.push({ render: `elements += comp_${hash}(execute && execute.compId === "ty-${hash}" ? execute : null).replaceAll('class="', 'class="ty-${hash} ')`})
|
|
116
|
+
|
|
117
|
+
parsed.push({ render: `elements += "</div>"` })
|
|
134
118
|
}
|
|
135
|
-
|
|
136
|
-
const hash = Bun.randomUUIDv7().split('-')[1]
|
|
137
|
-
|
|
138
|
-
parsed.push({ static: `const comp_${hash} = await ${component}(\`${exports.join(';')}\`)`})
|
|
139
|
-
|
|
140
|
-
parsed.push({ render: `elements += comp_${hash}(execute && execute.compId === "ty-${hash}" ? execute : null).replaceAll('class="', 'class="ty-${hash} ')`})
|
|
141
119
|
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
120
|
+
|
|
121
|
+
const temp = new JSDOM('').window.document.createElement('div');
|
|
122
|
+
temp.innerHTML = element.innerHTML
|
|
123
|
+
|
|
124
|
+
parsed.push(...this.parseHTML(temp, imports))
|
|
125
|
+
|
|
126
|
+
if(component === "loop" || component === "logic") parsed.push({ render: '}'})
|
|
127
|
+
|
|
128
|
+
} else if(element.tagName === "STYLE") {
|
|
129
|
+
|
|
130
|
+
element.innerHTML = `@scope { ${element.innerHTML} }`
|
|
131
|
+
|
|
132
|
+
parsed.push({ element: `\`${element.outerHTML}\`` })
|
|
133
|
+
|
|
134
|
+
} else {
|
|
135
|
+
|
|
136
|
+
for(let i = 0; i < element.attributes.length; i++) {
|
|
137
|
+
|
|
138
|
+
const attr = element.attributes[i]
|
|
139
|
+
|
|
140
|
+
if(attr.name.startsWith(':')) {
|
|
141
|
+
|
|
142
|
+
const attrName = attr.name.slice(1)
|
|
143
|
+
|
|
144
|
+
element.removeAttribute(attr.name)
|
|
145
|
+
element.setAttribute(attrName, "${" + attr.value + "}")
|
|
146
|
+
}
|
|
163
147
|
}
|
|
148
|
+
|
|
149
|
+
parsed.push({ element: `\`${element.outerHTML}\`` })
|
|
164
150
|
}
|
|
165
|
-
|
|
166
|
-
parsed.push({ element: `\`${element.outerHTML}\`` })
|
|
167
151
|
}
|
|
168
152
|
}
|
|
169
153
|
|
|
170
154
|
return parsed
|
|
171
155
|
}
|
|
172
156
|
|
|
173
|
-
private static createJSData(html: { static?: string, render?: string, element?: string }[], scriptTag?: HTMLScriptElement
|
|
157
|
+
private static createJSData(html: { static?: string, render?: string, element?: string }[], scriptTag?: HTMLScriptElement) {
|
|
174
158
|
|
|
175
159
|
const hash = Bun.randomUUIDv7().split('-')[3]
|
|
176
160
|
|
|
177
|
-
if(style && style.innerHTML) Yon.emitter.emit('style', `@scope (.ty-${hash}) { ${style.innerHTML} }`)
|
|
178
|
-
|
|
179
161
|
const outers: string[] = []
|
|
180
162
|
const inners: string[] = []
|
|
181
163
|
|
|
@@ -184,7 +166,7 @@ export default class Yon {
|
|
|
184
166
|
if(h.element) {
|
|
185
167
|
const temp = new JSDOM('').window.document.createElement('div');
|
|
186
168
|
temp.innerHTML = h.element
|
|
187
|
-
temp.children[0].classList.add(`ty-${hash}`)
|
|
169
|
+
if(temp.children[0].tagName !== 'STYLE') temp.children[0].classList.add(`ty-${hash}`)
|
|
188
170
|
inners.push(`elements += ${temp.innerHTML}`)
|
|
189
171
|
}
|
|
190
172
|
if(h.render) inners.push(h.render)
|
|
@@ -219,11 +201,11 @@ export default class Yon {
|
|
|
219
201
|
`
|
|
220
202
|
}
|
|
221
203
|
|
|
222
|
-
private static async addToStatix(html: HTMLDivElement, script: HTMLScriptElement,
|
|
223
|
-
|
|
224
|
-
const module = Yon.parseHTML(html
|
|
204
|
+
private static async addToStatix(html: HTMLDivElement, script: HTMLScriptElement, route: string, dir: 'pages' | 'components') {
|
|
205
|
+
|
|
206
|
+
const module = Yon.parseHTML(html)
|
|
225
207
|
|
|
226
|
-
const jsData = Yon.createJSData(module, script
|
|
208
|
+
const jsData = Yon.createJSData(module, script)
|
|
227
209
|
|
|
228
210
|
route = route.replace('.html', `.${script?.lang || 'js'}`)
|
|
229
211
|
|
|
@@ -274,9 +256,9 @@ export default class Yon {
|
|
|
274
256
|
|
|
275
257
|
const data = await Bun.file(`${Router.routesPath}/${route}`).text()
|
|
276
258
|
|
|
277
|
-
const { html, script
|
|
259
|
+
const { html, script } = Yon.extractComponents(data)
|
|
278
260
|
|
|
279
|
-
await Yon.addToStatix(html, script,
|
|
261
|
+
await Yon.addToStatix(html, script, `${route}.${script?.lang || 'js'}`, 'pages')
|
|
280
262
|
}
|
|
281
263
|
}
|
|
282
264
|
|
|
@@ -284,9 +266,9 @@ export default class Yon {
|
|
|
284
266
|
|
|
285
267
|
const data = await nfFile.exists() ? await nfFile.text() : await Bun.file(`${import.meta.dir}/404.html`).text()
|
|
286
268
|
|
|
287
|
-
const { html, script
|
|
269
|
+
const { html, script } = Yon.extractComponents(data)
|
|
288
270
|
|
|
289
|
-
await Yon.addToStatix(html, script,
|
|
271
|
+
await Yon.addToStatix(html, script, '404.html', 'pages')
|
|
290
272
|
}
|
|
291
273
|
|
|
292
274
|
private static async bundleComponents() {
|
|
@@ -305,9 +287,9 @@ export default class Yon {
|
|
|
305
287
|
|
|
306
288
|
const data = await Bun.file(`${Router.componentsPath}/${comp}`).text()
|
|
307
289
|
|
|
308
|
-
const { html, script
|
|
290
|
+
const { html, script } = Yon.extractComponents(data)
|
|
309
291
|
|
|
310
|
-
await Yon.addToStatix(html, script,
|
|
292
|
+
await Yon.addToStatix(html, script, comp, 'components')
|
|
311
293
|
}
|
|
312
294
|
}
|
|
313
295
|
}
|
package/src/serve.ts
CHANGED
|
@@ -87,6 +87,8 @@ const server = Bun.serve({
|
|
|
87
87
|
|
|
88
88
|
if(server.development) {
|
|
89
89
|
|
|
90
|
+
let timeout: Timer
|
|
91
|
+
|
|
90
92
|
let websocket: ServerWebSocket<unknown>;
|
|
91
93
|
|
|
92
94
|
const socket = Bun.serve({
|
|
@@ -112,23 +114,30 @@ if(server.development) {
|
|
|
112
114
|
if(await exists(Router.routesPath)) {
|
|
113
115
|
|
|
114
116
|
watcher(Router.routesPath, { recursive: true }, () => {
|
|
115
|
-
|
|
117
|
+
|
|
118
|
+
if(timeout) clearTimeout(timeout)
|
|
119
|
+
|
|
120
|
+
timeout = setTimeout(async () => {
|
|
116
121
|
console.info("HMR Update")
|
|
117
122
|
await configureRoutes()
|
|
118
123
|
server.reload({ routes: Router.reqRoutes })
|
|
119
124
|
if(websocket) websocket.send('')
|
|
120
|
-
})
|
|
125
|
+
}, 1500)
|
|
121
126
|
})
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
if(await exists(Router.componentsPath)) {
|
|
125
130
|
|
|
126
131
|
watcher(Router.componentsPath, { recursive: true }, () => {
|
|
127
|
-
|
|
132
|
+
|
|
133
|
+
if(timeout) clearTimeout(timeout)
|
|
134
|
+
|
|
135
|
+
timeout = setTimeout(async () => {
|
|
136
|
+
console.info("HMR Update")
|
|
128
137
|
await configureRoutes()
|
|
129
138
|
server.reload({ routes: Router.reqRoutes })
|
|
130
139
|
if(websocket) websocket.send('')
|
|
131
|
-
})
|
|
140
|
+
}, 1500)
|
|
132
141
|
})
|
|
133
142
|
}
|
|
134
143
|
}
|
package/src/server/tach.ts
CHANGED
|
@@ -222,7 +222,7 @@ export default class Tach {
|
|
|
222
222
|
|
|
223
223
|
if(method !== 'HTML' && method !== 'SOCKET') {
|
|
224
224
|
|
|
225
|
-
if(!Router.reqRoutes[route]) {
|
|
225
|
+
if(!Router.reqRoutes[route] || !Router.reqRoutes[`${route}/*`]) {
|
|
226
226
|
Router.reqRoutes[route] = {}
|
|
227
227
|
Router.reqRoutes[`${route}/*`] = {}
|
|
228
228
|
}
|