Skip to content

Commit 1c1baac

Browse files
martypdxmartypdx
committed
update project configuration and dependencies; switch to ESNext module, add moduleResolution, and update vitest and webdriverio versions
1 parent 1835219 commit 1c1baac

File tree

21 files changed

+1801
-551
lines changed

21 files changed

+1801
-551
lines changed

‎docs/index.md‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
---
2-
# https://vitepress.dev/reference/default-theme-home-page
32
layout: home
43

54
hero:
65
name: The Azoth Project
76
text: Fullstack Hypermedia
87
tagline: Infinite Possibilities. Build the Web.
9-
image:
10-
light: /azoth-logo-black.svg
11-
dark: /azoth-logo-white.svg
12-
alt: Azoth Logo
13-
actions:
14-
- theme: brand
15-
text: Get Started
16-
link: /about
178
---
9+
10+
state free and renderer free
11+
- flexibly use all of JavaScript to control rendering directly
12+
- directly manipulate the DOM and use any Web Platform API seamlessly
13+
-

‎docs/maya.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
Maya - Azoth Runtime
2+
===
3+
4+
## Async to Layout
5+
6+
function | purpose
7+
---|---
8+
`use` | Single transformation channel for asynchronous layout
9+
`render` | Create and rerender the same component
10+
`act` | Perform an action, optionally initializing a component to use
11+
12+
`defer` |
13+
`tee` | Split asynchronous data source to multiple feeds
14+
`branch` | Combines `tee` with a `use` transformation per tee
15+
16+
## Use
17+
18+
```jsx
19+
const Document = use(
20+
document$,
21+
DocumentDetail,
22+
<Loading/>
23+
);
24+
25+
return <div>
26+
<Document/>
27+
</div>;
28+
```
29+
30+
```jsx
31+
return <div>
32+
<Use async={document$} as={DocumentDetail}>
33+
<Loading/>
34+
</Use>
35+
</div>
36+
```
37+
38+
## Update
39+
40+
```jsx
41+
const Document = update(document$, DocumentDetail);
42+
43+
return <div>
44+
<Document/>
45+
</div>;
46+
```
47+
48+
```jsx
49+
return <div>
50+
<Update async={document$} as={DocumentDetail}/>
51+
</div>
52+
```
53+
54+
## Act
55+
56+
```jsx
57+
act(theme$, theme => html.className = theme);
58+
```
59+
60+
```jsx
61+
return <div>
62+
<Act async={theme$} as={theme => html.className = theme}/>
63+
</div>
64+
```
65+
66+
## Tee
67+
68+
```jsx
69+
const shareable = tee(theme$);
70+
const Document = use(shareable.instance(), DocumentDetail);
71+
act(shareable.instance(), theme => html.className = theme);
72+
```
73+
74+
```jsx
75+
const shareable = tee(theme$);
76+
return <div>
77+
<Act async={theme$} as={theme => html.className = theme}/>
78+
</div>
79+
```
80+
81+
## Tee 2
82+
83+
```jsx
84+
const Document = use(tee(theme$), DocumentDetail)
85+
act(tee($theme), theme => html.className = theme)
86+
87+
88+
const Document = use(shareable.instance(), DocumentDetail);
89+
90+
act(shareable.instance(), theme => html.className = theme);
91+
92+
```
93+
94+
95+
```jsx
96+
return <div>
97+
<Use async={tee(theme$)} as={DocumentDetail}>
98+
<Loading/>
99+
</Use>
100+
101+
<Act async={tee(theme$)} as={theme => html.className = theme}/>
102+
</div>
103+
```
104+
105+
106+
## Stream
107+
108+
function | purpose
109+
---|---
110+
`stream` | asynchronous data source with a dispatch function and optional transform function
111+
`state` | Stream for emitting a value
112+
`reduce` | Streamed value with old and new state value
113+
`raf` | Request animation frame scheduler
114+
`sync` | Sync scheduler - same as raf?
115+
`tee` | Split asynchronous data source to multiple feeds
116+
117+

‎jsconfig.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{
22
"compilerOptions": {
3-
"module": "ES6",
3+
"module": "ESNext",
4+
"moduleResolution": "Bundler",
45
"strict": true,
5-
// "checkJs": true
6+
"types": ["vitest"],
7+
"jsx": "preserve"
68
}
79
}

‎package.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,18 @@
2121
"devDependencies": {
2222
"@changesets/cli": "^2.27.1",
2323
"@testing-library/dom": "^9.3.4",
24-
"@vitest/browser": "^1.4.0",
24+
"@vitest/browser": "^4.0.17",
25+
"@vitest/browser-webdriverio": "^4.0.17",
2526
"azoth": "workspace:./packages/azoth",
27+
"esbuild": "^0.27.2",
2628
"eslint": "^8.57.0",
2729
"globals": "^14.0.0",
2830
"happy-dom": "^13.10.1",
29-
"vite": "^5.2.8",
30-
"vite-plugin-inspect": "^0.8.3",
31-
"vitest": "^1.4.0"
31+
"jsdom": "^27.4.0",
32+
"typescript": "^5.9.3",
33+
"vite": "^6.4.1",
34+
"vite-plugin-inspect": "^11.3.3",
35+
"vitest": "^4.0.17"
3236
},
3337
"dependencies": {
3438
"webdriverio": "^8.35.1"

‎packages/azoth/JSX-TYPES.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Azoth JSX Type Definitions
2+
3+
## Architecture
4+
5+
TypeScript's JSX type system has two mappings:
6+
- `IntrinsicElements` → props validation per tag (works great)
7+
- `Element` → single return type for ALL JSX expressions
8+
9+
## Current Implementation
10+
11+
`jsx.d.ts` defines:
12+
- `JSX.Element = Node` — covers elements, fragments, text
13+
- `IntrinsicElements` maps tags to `IntrinsicElementProps<HTMLElementType>`
14+
15+
## Type Assertion Pattern
16+
17+
Since TypeScript can't infer per-tag return types:
18+
19+
```typescript
20+
const p = <p>hello</p> as HTMLParagraphElement;
21+
```
22+
23+
This is type-safe because Azoth JSX literally creates that element type at runtime.
24+
25+
## Known Limitation
26+
27+
No `JSX.IntrinsicElementReturnTypes` exists in TypeScript. The return type cannot vary by tag name. Potential future TypeScript contribution.
28+
29+
## Gotchas
30+
31+
- Don't create both `jsx.d.ts` (global namespace) and `jsx-runtime.d.ts` (export namespace) — they conflict
32+
- IDE may cache stale types; restart TS server after changes

‎packages/azoth/jsx.d.ts‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/**
2+
* Azoth JSX Type Definitions
3+
*
4+
* Azoth JSX produces "DOM literals" - actual DOM elements, not virtual DOM.
5+
* `<p>hello</p>` yields an HTMLParagraphElement, not a React component.
6+
*
7+
* These type definitions leverage TypeScript's built-in lib.dom.d.ts types
8+
* to provide accurate intellisense for Azoth JSX.
9+
*/
10+
11+
// Children can be strings, numbers, nodes, or arrays of these
12+
type DOMChild =
13+
| string
14+
| number
15+
| boolean
16+
| Node
17+
| null
18+
| undefined
19+
| DOMChild[];
20+
21+
// Properties to exclude from element attributes
22+
type ExcludedProps = "children";
23+
24+
// Get writable properties from an element, excluding functions and specific props
25+
type WritableElementProps<T> = {
26+
[
27+
K in keyof T as K extends ExcludedProps ? never
28+
: K extends string ? (T[K] extends Function ? never : K)
29+
: never
30+
]?: T[K];
31+
};
32+
33+
// HTML attributes that differ from DOM properties
34+
// Azoth supports both HTML attributes (class, for) and DOM properties (className, htmlFor)
35+
type HTMLAttributeAliases = {
36+
class?: string; // HTML attribute (alias for className)
37+
for?: string; // HTML attribute (alias for htmlFor)
38+
};
39+
40+
// Combined props for an intrinsic element
41+
type IntrinsicElementProps<T> =
42+
& WritableElementProps<T>
43+
& HTMLAttributeAliases
44+
& {
45+
children?: DOMChild;
46+
};
47+
48+
declare global {
49+
namespace JSX {
50+
// JSX expressions evaluate to DOM Nodes
51+
// Specific element types require assertion: <p>hi</p> as HTMLParagraphElement
52+
// Future: TypeScript contribution for per-tag return types
53+
type Element = Node;
54+
55+
// Children attribute
56+
interface ElementChildrenAttribute {
57+
children: {};
58+
}
59+
60+
// Intrinsic elements: HTML + SVG
61+
interface IntrinsicElements {
62+
// HTML Elements
63+
a: IntrinsicElementProps<HTMLAnchorElement>;
64+
abbr: IntrinsicElementProps<HTMLElement>;
65+
address: IntrinsicElementProps<HTMLElement>;
66+
area: IntrinsicElementProps<HTMLAreaElement>;
67+
article: IntrinsicElementProps<HTMLElement>;
68+
aside: IntrinsicElementProps<HTMLElement>;
69+
audio: IntrinsicElementProps<HTMLAudioElement>;
70+
b: IntrinsicElementProps<HTMLElement>;
71+
base: IntrinsicElementProps<HTMLBaseElement>;
72+
bdi: IntrinsicElementProps<HTMLElement>;
73+
bdo: IntrinsicElementProps<HTMLElement>;
74+
blockquote: IntrinsicElementProps<HTMLQuoteElement>;
75+
body: IntrinsicElementProps<HTMLBodyElement>;
76+
br: IntrinsicElementProps<HTMLBRElement>;
77+
button: IntrinsicElementProps<HTMLButtonElement>;
78+
canvas: IntrinsicElementProps<HTMLCanvasElement>;
79+
caption: IntrinsicElementProps<HTMLTableCaptionElement>;
80+
cite: IntrinsicElementProps<HTMLElement>;
81+
code: IntrinsicElementProps<HTMLElement>;
82+
col: IntrinsicElementProps<HTMLTableColElement>;
83+
colgroup: IntrinsicElementProps<HTMLTableColElement>;
84+
data: IntrinsicElementProps<HTMLDataElement>;
85+
datalist: IntrinsicElementProps<HTMLDataListElement>;
86+
dd: IntrinsicElementProps<HTMLElement>;
87+
del: IntrinsicElementProps<HTMLModElement>;
88+
details: IntrinsicElementProps<HTMLDetailsElement>;
89+
dfn: IntrinsicElementProps<HTMLElement>;
90+
dialog: IntrinsicElementProps<HTMLDialogElement>;
91+
div: IntrinsicElementProps<HTMLDivElement>;
92+
dl: IntrinsicElementProps<HTMLDListElement>;
93+
dt: IntrinsicElementProps<HTMLElement>;
94+
em: IntrinsicElementProps<HTMLElement>;
95+
embed: IntrinsicElementProps<HTMLEmbedElement>;
96+
fieldset: IntrinsicElementProps<HTMLFieldSetElement>;
97+
figcaption: IntrinsicElementProps<HTMLElement>;
98+
figure: IntrinsicElementProps<HTMLElement>;
99+
footer: IntrinsicElementProps<HTMLElement>;
100+
form: IntrinsicElementProps<HTMLFormElement>;
101+
h1: IntrinsicElementProps<HTMLHeadingElement>;
102+
h2: IntrinsicElementProps<HTMLHeadingElement>;
103+
h3: IntrinsicElementProps<HTMLHeadingElement>;
104+
h4: IntrinsicElementProps<HTMLHeadingElement>;
105+
h5: IntrinsicElementProps<HTMLHeadingElement>;
106+
h6: IntrinsicElementProps<HTMLHeadingElement>;
107+
head: IntrinsicElementProps<HTMLHeadElement>;
108+
header: IntrinsicElementProps<HTMLElement>;
109+
hgroup: IntrinsicElementProps<HTMLElement>;
110+
hr: IntrinsicElementProps<HTMLHRElement>;
111+
html: IntrinsicElementProps<HTMLHtmlElement>;
112+
i: IntrinsicElementProps<HTMLElement>;
113+
iframe: IntrinsicElementProps<HTMLIFrameElement>;
114+
img: IntrinsicElementProps<HTMLImageElement>;
115+
input: IntrinsicElementProps<HTMLInputElement>;
116+
ins: IntrinsicElementProps<HTMLModElement>;
117+
kbd: IntrinsicElementProps<HTMLElement>;
118+
label: IntrinsicElementProps<HTMLLabelElement>;
119+
legend: IntrinsicElementProps<HTMLLegendElement>;
120+
li: IntrinsicElementProps<HTMLLIElement>;
121+
link: IntrinsicElementProps<HTMLLinkElement>;
122+
main: IntrinsicElementProps<HTMLElement>;
123+
map: IntrinsicElementProps<HTMLMapElement>;
124+
mark: IntrinsicElementProps<HTMLElement>;
125+
menu: IntrinsicElementProps<HTMLMenuElement>;
126+
meta: IntrinsicElementProps<HTMLMetaElement>;
127+
meter: IntrinsicElementProps<HTMLMeterElement>;
128+
nav: IntrinsicElementProps<HTMLElement>;
129+
noscript: IntrinsicElementProps<HTMLElement>;
130+
object: IntrinsicElementProps<HTMLObjectElement>;
131+
ol: IntrinsicElementProps<HTMLOListElement>;
132+
optgroup: IntrinsicElementProps<HTMLOptGroupElement>;
133+
option: IntrinsicElementProps<HTMLOptionElement>;
134+
output: IntrinsicElementProps<HTMLOutputElement>;
135+
p: IntrinsicElementProps<HTMLParagraphElement>;
136+
picture: IntrinsicElementProps<HTMLPictureElement>;
137+
pre: IntrinsicElementProps<HTMLPreElement>;
138+
progress: IntrinsicElementProps<HTMLProgressElement>;
139+
q: IntrinsicElementProps<HTMLQuoteElement>;
140+
rp: IntrinsicElementProps<HTMLElement>;
141+
rt: IntrinsicElementProps<HTMLElement>;
142+
ruby: IntrinsicElementProps<HTMLElement>;
143+
s: IntrinsicElementProps<HTMLElement>;
144+
samp: IntrinsicElementProps<HTMLElement>;
145+
script: IntrinsicElementProps<HTMLScriptElement>;
146+
section: IntrinsicElementProps<HTMLElement>;
147+
select: IntrinsicElementProps<HTMLSelectElement>;
148+
slot: IntrinsicElementProps<HTMLSlotElement>;
149+
small: IntrinsicElementProps<HTMLElement>;
150+
source: IntrinsicElementProps<HTMLSourceElement>;
151+
span: IntrinsicElementProps<HTMLSpanElement>;
152+
strong: IntrinsicElementProps<HTMLElement>;
153+
style: IntrinsicElementProps<HTMLStyleElement>;
154+
sub: IntrinsicElementProps<HTMLElement>;
155+
summary: IntrinsicElementProps<HTMLElement>;
156+
sup: IntrinsicElementProps<HTMLElement>;
157+
table: IntrinsicElementProps<HTMLTableElement>;
158+
tbody: IntrinsicElementProps<HTMLTableSectionElement>;
159+
td: IntrinsicElementProps<HTMLTableCellElement>;
160+
template: IntrinsicElementProps<HTMLTemplateElement>;
161+
textarea: IntrinsicElementProps<HTMLTextAreaElement>;
162+
tfoot: IntrinsicElementProps<HTMLTableSectionElement>;
163+
th: IntrinsicElementProps<HTMLTableCellElement>;
164+
thead: IntrinsicElementProps<HTMLTableSectionElement>;
165+
time: IntrinsicElementProps<HTMLTimeElement>;
166+
title: IntrinsicElementProps<HTMLTitleElement>;
167+
tr: IntrinsicElementProps<HTMLTableRowElement>;
168+
track: IntrinsicElementProps<HTMLTrackElement>;
169+
u: IntrinsicElementProps<HTMLElement>;
170+
ul: IntrinsicElementProps<HTMLUListElement>;
171+
var: IntrinsicElementProps<HTMLElement>;
172+
video: IntrinsicElementProps<HTMLVideoElement>;
173+
wbr: IntrinsicElementProps<HTMLElement>;
174+
}
175+
}
176+
177+
// JSX factory function signature (for TypeScript's classic JSX transform)
178+
function h(
179+
tag: string,
180+
props?: object | null,
181+
...children: DOMChild[]
182+
): Node;
183+
function Fragment(props: { children?: DOMChild }): Node;
184+
}
185+
186+
export {};

0 commit comments

Comments
 (0)