Skip to content

Commit 7667e0d

Browse files
cqh963852cqh963852
committed
feat: add jsx-runtime
1 parent 6f608a0 commit 7667e0d

11 files changed

Lines changed: 445 additions & 0 deletions

‎addons/van_jsx/README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Quick Start
2+
3+
## Create a New Project
4+
5+
```
6+
# yarn
7+
yarn create vite my-van-jsx --template vanilla-ts
8+
```
9+
10+
```
11+
# yarn
12+
yarn add vanjs-jsx vanjs-core
13+
```
14+
15+
- Change tsconfig.json
16+
17+
```json
18+
{
19+
"compilerOptions": {
20+
"target": "ES2020",
21+
"useDefineForClassFields": true,
22+
"module": "ESNext",
23+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
24+
"skipLibCheck": true,
25+
26+
/* Bundler mode */
27+
"moduleResolution": "bundler",
28+
"allowImportingTsExtensions": true,
29+
"resolveJsonModule": true,
30+
"isolatedModules": true,
31+
"noEmit": true,
32+
33+
/* Linting */
34+
"strict": true,
35+
"noUnusedLocals": true,
36+
"noUnusedParameters": true,
37+
"noFallthroughCasesInSwitch": true,
38+
39+
/* For van-jsx */
40+
"jsx": "react-jsx",
41+
"jsxImportSource": "vanjs-jsx"
42+
},
43+
"include": ["src"]
44+
}
45+
```
46+
47+
### Add You Component
48+
49+
1. main.ts -> main.tsx
50+
51+
```tsx
52+
import van from "vanjs-core";
53+
54+
import Hello from "./Hello";
55+
56+
van.add(document.getElementById("app")!, <Hello name={"your name"} />);
57+
```
58+
59+
2. change index.html
60+
61+
```html
62+
<!DOCTYPE html>
63+
<html lang="en">
64+
<head>
65+
<meta charset="UTF-8" />
66+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
67+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
68+
<title>vanjs-jsx</title>
69+
</head>
70+
<body>
71+
<div id="app"></div>
72+
<!-- change script src -->
73+
<script type="module" src="/src/main.tsx"></script>
74+
</body>
75+
</html>
76+
```
77+
78+
3. Write Your Component
79+
80+
Hello.tsx
81+
82+
```tsx
83+
interface IProps {
84+
name: string;
85+
}
86+
87+
const Hello = (props: IProps) => {
88+
const { name } = props;
89+
return <div>Hello {name}</div>;
90+
};
91+
92+
export default Hello;
93+
```

‎addons/van_jsx/jsx-runtime.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./src/jsx-runtime";

‎addons/van_jsx/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "vanjs-jsx",
3+
"version": "0.0.1",
4+
"type": "module",
5+
"types": "./dist/index.d.ts",
6+
"description": "",
7+
"exports": {
8+
".": {
9+
"require": "./src/index.js",
10+
"import": "./src/index.js"
11+
},
12+
"./jsx-runtime": {
13+
"require": "./src/jsx-runtime.js",
14+
"import": "./src/jsx-runtime.js",
15+
"types": "./src/jsx-runtime.d.ts"
16+
},
17+
"./jsx-dev-runtime": {
18+
"require": "./src/jsx-dev-runtime.js",
19+
"import": "./src/jsx-dev-runtime.js",
20+
"types": "./src/jsx-dev-runtime.d.ts"
21+
}
22+
},
23+
"files": [
24+
"src",
25+
"jsx-runtime.d.ts"
26+
],
27+
"scripts": {},
28+
"author": "",
29+
"license": "MIT"
30+
}

‎addons/van_jsx/src/index.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { State, StateView } from "vanjs-core";
2+
3+
export interface ReadonlyState<T> extends StateView<T> {
4+
readonly val: T;
5+
}
6+
export declare const lazy: <T>(f: () => T) => T;
7+
export declare function createState<T>(initialValue: T): State<T>;
8+
export declare function createState<T>(
9+
initialValue: T | null
10+
): ReadonlyState<T>;
11+
export declare function createState<T = undefined>(): State<T | undefined>;
12+
export * from "./jsx-runtime";
13+
export * from "./type";

‎addons/van_jsx/src/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import van from "vanjs-core";
2+
3+
export const lazy = (f) => {
4+
return f;
5+
};
6+
7+
export function createState(v) {
8+
return van.state(v);
9+
}
10+
11+
export * from "./jsx-runtime";

‎addons/van_jsx/src/jsx-dev-runtime.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./jsx-runtime";

‎addons/van_jsx/src/jsx-dev-runtime.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./jsx-runtime";

‎addons/van_jsx/src/jsx-internal.d.ts‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import * as CSS from "csstype";
2+
import { State } from "vanjs-core";
3+
import { ComponentChildren, FunctionChild } from "./type";
4+
5+
type OriginalElement = HTMLElement;
6+
7+
export declare namespace JSX {
8+
type HTMLAttributes<T> = Partial<Omit<T, "style" | "children">> & {
9+
style?: CSS.Properties;
10+
ref?: State<T>;
11+
children?: ComponentChildren;
12+
};
13+
type SVGAttributes<T> = Partial<Omit<T, "style" | "children">> & {
14+
style?: CSS.Properties;
15+
ref?: State<T>;
16+
children?: ComponentChildren;
17+
};
18+
export type ElementType = string | FunctionChild<any>;
19+
export interface Element extends OriginalElement {}
20+
export interface ElementAttributesProperty {
21+
props: {};
22+
}
23+
export interface ElementChildrenAttribute {
24+
children: {};
25+
}
26+
export interface IntrinsicAttributes {}
27+
export interface IntrinsicElements {
28+
a: HTMLAttributes<HTMLAnchorElement>;
29+
abbr: HTMLAttributes<HTMLElement>;
30+
address: HTMLAttributes<HTMLElement>;
31+
area: HTMLAttributes<HTMLAreaElement>;
32+
article: HTMLAttributes<HTMLElement>;
33+
aside: HTMLAttributes<HTMLElement>;
34+
audio: HTMLAttributes<HTMLAudioElement>;
35+
b: HTMLAttributes<HTMLElement>;
36+
base: HTMLAttributes<HTMLBaseElement>;
37+
bdi: HTMLAttributes<HTMLElement>;
38+
bdo: HTMLAttributes<HTMLElement>;
39+
big: HTMLAttributes<HTMLElement>;
40+
blockquote: HTMLAttributes<HTMLQuoteElement>;
41+
body: HTMLAttributes<HTMLBodyElement>;
42+
br: HTMLAttributes<HTMLBRElement>;
43+
button: HTMLAttributes<HTMLButtonElement>;
44+
canvas: HTMLAttributes<HTMLCanvasElement>;
45+
caption: HTMLAttributes<HTMLTableCaptionElement>;
46+
cite: HTMLAttributes<HTMLElement>;
47+
code: HTMLAttributes<HTMLElement>;
48+
col: HTMLAttributes<HTMLTableColElement>;
49+
colgroup: HTMLAttributes<HTMLTableColElement>;
50+
data: HTMLAttributes<HTMLDataElement>;
51+
datalist: HTMLAttributes<HTMLDataListElement>;
52+
dd: HTMLAttributes<HTMLElement>;
53+
del: HTMLAttributes<HTMLModElement>;
54+
details: HTMLAttributes<HTMLDetailsElement>;
55+
dfn: HTMLAttributes<HTMLElement>;
56+
dialog: HTMLAttributes<HTMLDialogElement>;
57+
div: HTMLAttributes<HTMLDivElement>;
58+
dl: HTMLAttributes<HTMLDListElement>;
59+
dt: HTMLAttributes<HTMLElement>;
60+
em: HTMLAttributes<HTMLElement>;
61+
embed: HTMLAttributes<HTMLEmbedElement>;
62+
fieldset: HTMLAttributes<HTMLFieldSetElement>;
63+
figcaption: HTMLAttributes<HTMLElement>;
64+
figure: HTMLAttributes<HTMLElement>;
65+
footer: HTMLAttributes<HTMLElement>;
66+
form: HTMLAttributes<HTMLFormElement>;
67+
h1: HTMLAttributes<HTMLHeadingElement>;
68+
h2: HTMLAttributes<HTMLHeadingElement>;
69+
h3: HTMLAttributes<HTMLHeadingElement>;
70+
h4: HTMLAttributes<HTMLHeadingElement>;
71+
h5: HTMLAttributes<HTMLHeadingElement>;
72+
h6: HTMLAttributes<HTMLHeadingElement>;
73+
head: HTMLAttributes<HTMLHeadElement>;
74+
header: HTMLAttributes<HTMLElement>;
75+
hgroup: HTMLAttributes<HTMLElement>;
76+
hr: HTMLAttributes<HTMLHRElement>;
77+
html: HTMLAttributes<HTMLHtmlElement>;
78+
i: HTMLAttributes<HTMLElement>;
79+
iframe: HTMLAttributes<HTMLIFrameElement>;
80+
img: HTMLAttributes<HTMLImageElement>;
81+
input: HTMLAttributes<HTMLInputElement>;
82+
ins: HTMLAttributes<HTMLModElement>;
83+
kbd: HTMLAttributes<HTMLElement>;
84+
keygen: HTMLAttributes<HTMLUnknownElement>;
85+
label: HTMLAttributes<HTMLLabelElement>;
86+
legend: HTMLAttributes<HTMLLegendElement>;
87+
li: HTMLAttributes<HTMLLIElement>;
88+
link: HTMLAttributes<HTMLLinkElement>;
89+
main: HTMLAttributes<HTMLElement>;
90+
map: HTMLAttributes<HTMLMapElement>;
91+
mark: HTMLAttributes<HTMLElement>;
92+
marquee: HTMLAttributes<HTMLMarqueeElement>;
93+
menu: HTMLAttributes<HTMLMenuElement>;
94+
menuitem: HTMLAttributes<HTMLUnknownElement>;
95+
meta: HTMLAttributes<HTMLMetaElement>;
96+
meter: HTMLAttributes<HTMLMeterElement>;
97+
nav: HTMLAttributes<HTMLElement>;
98+
noscript: HTMLAttributes<HTMLElement>;
99+
object: HTMLAttributes<HTMLObjectElement>;
100+
ol: HTMLAttributes<HTMLOListElement>;
101+
optgroup: HTMLAttributes<HTMLOptGroupElement>;
102+
option: HTMLAttributes<HTMLOptionElement>;
103+
output: HTMLAttributes<HTMLOutputElement>;
104+
p: HTMLAttributes<HTMLParagraphElement>;
105+
param: HTMLAttributes<HTMLParamElement>;
106+
picture: HTMLAttributes<HTMLPictureElement>;
107+
pre: HTMLAttributes<HTMLPreElement>;
108+
progress: HTMLAttributes<HTMLProgressElement>;
109+
q: HTMLAttributes<HTMLQuoteElement>;
110+
rp: HTMLAttributes<HTMLElement>;
111+
rt: HTMLAttributes<HTMLElement>;
112+
ruby: HTMLAttributes<HTMLElement>;
113+
s: HTMLAttributes<HTMLElement>;
114+
samp: HTMLAttributes<HTMLElement>;
115+
script: HTMLAttributes<HTMLScriptElement>;
116+
search: HTMLAttributes<HTMLElement>;
117+
section: HTMLAttributes<HTMLElement>;
118+
select: HTMLAttributes<HTMLSelectElement>;
119+
slot: HTMLAttributes<HTMLSlotElement>;
120+
small: HTMLAttributes<HTMLElement>;
121+
source: HTMLAttributes<HTMLSourceElement>;
122+
span: HTMLAttributes<HTMLSpanElement>;
123+
strong: HTMLAttributes<HTMLElement>;
124+
style: HTMLAttributes<HTMLStyleElement>;
125+
sub: HTMLAttributes<HTMLElement>;
126+
summary: HTMLAttributes<HTMLElement>;
127+
sup: HTMLAttributes<HTMLElement>;
128+
table: HTMLAttributes<HTMLTableElement>;
129+
tbody: HTMLAttributes<HTMLTableSectionElement>;
130+
td: HTMLAttributes<HTMLTableCellElement>;
131+
textarea: HTMLAttributes<HTMLTextAreaElement>;
132+
tfoot: HTMLAttributes<HTMLTableSectionElement>;
133+
th: HTMLAttributes<HTMLTableCellElement>;
134+
thead: HTMLAttributes<HTMLTableSectionElement>;
135+
time: HTMLAttributes<HTMLTimeElement>;
136+
title: HTMLAttributes<HTMLTitleElement>;
137+
tr: HTMLAttributes<HTMLTableRowElement>;
138+
track: HTMLAttributes<HTMLTrackElement>;
139+
u: HTMLAttributes<HTMLElement>;
140+
ul: HTMLAttributes<HTMLUListElement>;
141+
var: HTMLAttributes<HTMLElement>;
142+
video: HTMLAttributes<HTMLVideoElement>;
143+
wbr: HTMLAttributes<HTMLElement>;
144+
svg: SVGAttributes<SVGSVGElement>;
145+
animate: SVGAttributes<SVGAnimateElement>;
146+
circle: SVGAttributes<SVGCircleElement>;
147+
animateMotion: SVGAttributes<SVGAnimateMotionElement>;
148+
animateTransform: SVGAttributes<SVGAnimateTransformElement>;
149+
clipPath: SVGAttributes<SVGClipPathElement>;
150+
defs: SVGAttributes<SVGDefsElement>;
151+
desc: SVGAttributes<SVGDescElement>;
152+
ellipse: SVGAttributes<SVGEllipseElement>;
153+
feBlend: SVGAttributes<SVGFEBlendElement>;
154+
feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
155+
feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
156+
feComposite: SVGAttributes<SVGFECompositeElement>;
157+
feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
158+
feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
159+
feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
160+
feDistantLight: SVGAttributes<SVGFEDistantLightElement>;
161+
feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
162+
feFlood: SVGAttributes<SVGFEFloodElement>;
163+
feFuncA: SVGAttributes<SVGFEFuncAElement>;
164+
feFuncB: SVGAttributes<SVGFEFuncBElement>;
165+
feFuncG: SVGAttributes<SVGFEFuncGElement>;
166+
feFuncR: SVGAttributes<SVGFEFuncRElement>;
167+
feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
168+
feImage: SVGAttributes<SVGFEImageElement>;
169+
feMerge: SVGAttributes<SVGFEMergeElement>;
170+
feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
171+
feMorphology: SVGAttributes<SVGFEMorphologyElement>;
172+
feOffset: SVGAttributes<SVGFEOffsetElement>;
173+
fePointLight: SVGAttributes<SVGFEPointLightElement>;
174+
feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
175+
feSpotLight: SVGAttributes<SVGFESpotLightElement>;
176+
feTile: SVGAttributes<SVGFETileElement>;
177+
feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
178+
filter: SVGAttributes<SVGFilterElement>;
179+
foreignObject: SVGAttributes<SVGForeignObjectElement>;
180+
g: SVGAttributes<SVGGElement>;
181+
image: SVGAttributes<SVGImageElement>;
182+
line: SVGAttributes<SVGLineElement>;
183+
linearGradient: SVGAttributes<SVGLinearGradientElement>;
184+
marker: SVGAttributes<SVGMarkerElement>;
185+
mask: SVGAttributes<SVGMaskElement>;
186+
metadata: SVGAttributes<SVGMetadataElement>;
187+
mpath: SVGAttributes<SVGMPathElement>;
188+
path: SVGAttributes<SVGPathElement>;
189+
pattern: SVGAttributes<SVGPatternElement>;
190+
polygon: SVGAttributes<SVGPolygonElement>;
191+
polyline: SVGAttributes<SVGPolylineElement>;
192+
radialGradient: SVGAttributes<SVGRadialGradientElement>;
193+
rect: SVGAttributes<SVGRectElement>;
194+
set: SVGAttributes<SVGSetElement>;
195+
stop: SVGAttributes<SVGStopElement>;
196+
switch: SVGAttributes<SVGSwitchElement>;
197+
symbol: SVGAttributes<SVGSymbolElement>;
198+
text: SVGAttributes<SVGTextElement>;
199+
textPath: SVGAttributes<SVGTextPathElement>;
200+
tspan: SVGAttributes<SVGTSpanElement>;
201+
use: SVGAttributes<SVGUseElement>;
202+
view: SVGAttributes<SVGViewElement>;
203+
}
204+
}

‎addons/van_jsx/src/jsx-runtime.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as CSS from "csstype";
2+
import { State } from "vanjs-core";
3+
import { ComponentChildren } from "./type";
4+
5+
export declare const jsx: (
6+
jsxTag: string | Function,
7+
{
8+
children,
9+
style,
10+
ref,
11+
...props
12+
}: {
13+
children?: ComponentChildren;
14+
style?:
15+
| CSS.Properties<0 | (string & {}), string & {}>
16+
| (() => CSS.Properties)
17+
| undefined;
18+
ref?: State<Element> | undefined;
19+
}
20+
) => any;
21+
export { jsx as jsxDEV, jsx as jsxs };
22+
export type { JSX } from "./jsx-internal";

0 commit comments

Comments
 (0)