j20 0.0.0 → 0.0.2
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 +1 -1
- package/README.md +3 -0
- package/dist/index.d.mts +3486 -0
- package/dist/index.mjs +883 -0
- package/dist/jsx-runtime.d.mts +10 -0
- package/dist/jsx-runtime.mjs +23 -0
- package/package.json +31 -11
- package/.vscode/settings.json +0 -4
- package/example/index.html +0 -12
- package/example/index.ts +0 -74
- package/example/item.ts +0 -31
- package/jsx.d.ts +0 -1361
- package/src/api.ts +0 -14
- package/src/component.ts +0 -76
- package/src/control.ts +0 -120
- package/src/tags.ts +0 -64
- package/src/utils.ts +0 -7
- package/tsconfig.json +0 -110
- package/vite.config.js +0 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
//#region src/jsx-runtime.d.ts
|
|
2
|
+
declare const h2: (tag: any, props: any, children: any) => JSX.Element;
|
|
3
|
+
declare const jsx: (tag: any, props: any, children: any) => JSX.Element;
|
|
4
|
+
declare const jsxs: (tag: any, props: any, children: any) => JSX.Element;
|
|
5
|
+
declare const Fragment: (props: {
|
|
6
|
+
children: JSX.Element;
|
|
7
|
+
}) => any;
|
|
8
|
+
declare const template: (template: string) => (isSvg: boolean) => any;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { Fragment, h2, jsx, jsxs, template };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { createElement } from ".";
|
|
2
|
+
|
|
3
|
+
//#region src/jsx-runtime.ts
|
|
4
|
+
const h2 = (tag, props, children) => {
|
|
5
|
+
return createElement(tag, props, children);
|
|
6
|
+
};
|
|
7
|
+
const jsx = h2;
|
|
8
|
+
const jsxs = h2;
|
|
9
|
+
const Fragment = (props) => props.value.children;
|
|
10
|
+
const template = (template$1) => {
|
|
11
|
+
let dom;
|
|
12
|
+
return (isSvg) => {
|
|
13
|
+
if (!dom) {
|
|
14
|
+
const templateEl = isSvg ? document.createElementNS("http://www.w3.org/2000/svg", "svg") : document.createElement("template");
|
|
15
|
+
templateEl.innerHTML = template$1;
|
|
16
|
+
dom = isSvg ? templateEl.firstChild : templateEl.content.firstChild;
|
|
17
|
+
}
|
|
18
|
+
return dom.cloneNode();
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { Fragment, h2, jsx, jsxs, template };
|
package/package.json
CHANGED
|
@@ -1,19 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "j20",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"author": "anuoua",
|
|
3
|
+
"version": "0.0.2",
|
|
5
4
|
"homepage": "https://www.github.com/anuoua/j20",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
|
|
5
|
+
"type": "module",
|
|
6
|
+
"author": "anuoua",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.mjs",
|
|
11
|
+
"types": "./dist/index.d.mts"
|
|
12
|
+
},
|
|
13
|
+
"./jsx-runtime": {
|
|
14
|
+
"import": "./dist/jsx-runtime.mjs",
|
|
15
|
+
"types": "./dist/jsx-runtime.d.mts"
|
|
16
|
+
}
|
|
9
17
|
},
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"csstype": "^3.1.2"
|
|
13
23
|
},
|
|
14
24
|
"devDependencies": {
|
|
15
|
-
"
|
|
25
|
+
"happy-dom": "^10.1.1",
|
|
26
|
+
"rimraf": "^5.0.1",
|
|
16
27
|
"typescript": "^5.1.6",
|
|
17
|
-
"
|
|
28
|
+
"vitest": "^0.33.0",
|
|
29
|
+
"tsdown": "^0.16.6",
|
|
30
|
+
"vite": "^6.3.5",
|
|
31
|
+
"@j20org/signal": "0.0.1"
|
|
32
|
+
},
|
|
33
|
+
"scripts": {
|
|
34
|
+
"dev": "vite example --config vite.config.mjs",
|
|
35
|
+
"build": "rimraf dist && tsdown",
|
|
36
|
+
"test:watch": "vitest",
|
|
37
|
+
"test": "vitest --run --dom"
|
|
18
38
|
}
|
|
19
|
-
}
|
|
39
|
+
}
|
package/.vscode/settings.json
DELETED
package/example/index.html
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>j20 example</title>
|
|
7
|
-
<script type="module" src="./index.ts"></script>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="root"></div>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
package/example/index.ts
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { ref } from "@vue/reactivity";
|
|
2
|
-
import { defineComponent } from "../src/component";
|
|
3
|
-
import { tags } from "../src/tags";
|
|
4
|
-
import { For } from "../src/control";
|
|
5
|
-
import { str } from "../src/tags";
|
|
6
|
-
import { Item } from "./item";
|
|
7
|
-
|
|
8
|
-
const { div, ul, h1, button, input } = tags;
|
|
9
|
-
|
|
10
|
-
export interface TodoItem {
|
|
11
|
-
name: string;
|
|
12
|
-
canceled: boolean;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const App = defineComponent(
|
|
16
|
-
{
|
|
17
|
-
tag: "app-main",
|
|
18
|
-
shadow: true,
|
|
19
|
-
},
|
|
20
|
-
() => {
|
|
21
|
-
let inputRef: HTMLInputElement = undefined!;
|
|
22
|
-
|
|
23
|
-
const list = ref<TodoItem[]>([]);
|
|
24
|
-
|
|
25
|
-
const handleAdd = (e: MouseEvent | KeyboardEvent) => {
|
|
26
|
-
if (e instanceof KeyboardEvent && e.key !== "Enter") return;
|
|
27
|
-
list.value = [
|
|
28
|
-
...list.value,
|
|
29
|
-
{
|
|
30
|
-
name: inputRef.value,
|
|
31
|
-
canceled: false,
|
|
32
|
-
},
|
|
33
|
-
];
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const handleRemove = (item: TodoItem) => {
|
|
37
|
-
list.value = list.value.filter((i) => i !== item);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
return div(
|
|
41
|
-
{},
|
|
42
|
-
h1({ style: { color: "red" } }, str("Todo list")),
|
|
43
|
-
div(
|
|
44
|
-
{},
|
|
45
|
-
(inputRef = input({
|
|
46
|
-
placeholder: "请输入",
|
|
47
|
-
onKeydown: handleAdd,
|
|
48
|
-
}) as HTMLInputElement),
|
|
49
|
-
button(
|
|
50
|
-
{
|
|
51
|
-
onClick: handleAdd,
|
|
52
|
-
},
|
|
53
|
-
str("添加")
|
|
54
|
-
)
|
|
55
|
-
),
|
|
56
|
-
div(
|
|
57
|
-
{},
|
|
58
|
-
For({
|
|
59
|
-
list,
|
|
60
|
-
children: (item) =>
|
|
61
|
-
div(
|
|
62
|
-
{},
|
|
63
|
-
Item({
|
|
64
|
-
item,
|
|
65
|
-
onDelete: () => handleRemove(item),
|
|
66
|
-
})
|
|
67
|
-
),
|
|
68
|
-
})
|
|
69
|
-
)
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
document.querySelector("#root")?.append(...([] as HTMLElement[]).concat(App()));
|
package/example/item.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { computed } from "@vue/reactivity";
|
|
2
|
-
import { str, tags } from "../src/tags";
|
|
3
|
-
import { TodoItem } from ".";
|
|
4
|
-
import { defineComponent } from "../src/component";
|
|
5
|
-
|
|
6
|
-
const { div, input, button } = tags;
|
|
7
|
-
|
|
8
|
-
export const Item = defineComponent(
|
|
9
|
-
{
|
|
10
|
-
tag: "todo-item",
|
|
11
|
-
shadow: true,
|
|
12
|
-
},
|
|
13
|
-
(p: { item: TodoItem; onDelete: () => void }) => {
|
|
14
|
-
return div(
|
|
15
|
-
{},
|
|
16
|
-
input({
|
|
17
|
-
type: "text",
|
|
18
|
-
value: computed(() => p.item.name),
|
|
19
|
-
onInput: (e) => {
|
|
20
|
-
p.item.name = (e.target as HTMLInputElement).value;
|
|
21
|
-
},
|
|
22
|
-
}),
|
|
23
|
-
button(
|
|
24
|
-
{
|
|
25
|
-
onClick: p.onDelete,
|
|
26
|
-
},
|
|
27
|
-
str("删除")
|
|
28
|
-
)
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
);
|