vasille-web 0.99.3 → 3.1.1
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/README.md +3 -4
- package/fake-types/index.d.ts +52 -0
- package/lib/index.js +8 -0
- package/lib/jsx-runtime.js +1 -0
- package/package.json +27 -7
- package/types/index.d.ts +13 -0
- package/types/jsx-runtime.d.ts +135 -0
- package/index-node.js +0 -5
- package/index.d.ts +0 -40
- package/index.js +0 -24
package/README.md
CHANGED
|
@@ -103,12 +103,11 @@ All of these are supported:
|
|
|
103
103
|
* [x] Develop the `Vasille JSX` library.
|
|
104
104
|
* [x] `100%` Test Coverage for the JSX library.
|
|
105
105
|
* [x] Develop the `Vasille Babel Plugin`.
|
|
106
|
-
* [
|
|
106
|
+
* [x] `100%` Test Coverage fot babel plugin.
|
|
107
107
|
* [x] Add CSS support (define styles in components).
|
|
108
|
-
* [ ] Add custom `input` components with 2-way value binding.
|
|
109
108
|
* [ ] Add router.
|
|
110
|
-
* [ ]
|
|
111
|
-
* [ ] Develop
|
|
109
|
+
* [ ] Add SSR (server side rendering).
|
|
110
|
+
* [ ] Develop tools extension for debugging.
|
|
112
111
|
|
|
113
112
|
## Questions
|
|
114
113
|
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import type { StyleProps } from "../src/spec/css.d.ts";
|
|
2
|
+
|
|
3
|
+
export {
|
|
4
|
+
ref,
|
|
5
|
+
bind,
|
|
6
|
+
calculate,
|
|
7
|
+
forward,
|
|
8
|
+
arrayModel,
|
|
9
|
+
setModel,
|
|
10
|
+
mapModel,
|
|
11
|
+
reactiveObject,
|
|
12
|
+
value,
|
|
13
|
+
watch,
|
|
14
|
+
state,
|
|
15
|
+
} from "vasille-dx";
|
|
16
|
+
|
|
17
|
+
export {
|
|
18
|
+
compose,
|
|
19
|
+
Debug,
|
|
20
|
+
Delay,
|
|
21
|
+
Else,
|
|
22
|
+
ElseIf,
|
|
23
|
+
For,
|
|
24
|
+
If,
|
|
25
|
+
Slot,
|
|
26
|
+
Watch,
|
|
27
|
+
awaited,
|
|
28
|
+
} from "vasille-dx";
|
|
29
|
+
|
|
30
|
+
export {
|
|
31
|
+
theme,
|
|
32
|
+
tablet,
|
|
33
|
+
dark,
|
|
34
|
+
mobile,
|
|
35
|
+
laptop,
|
|
36
|
+
prefersLight,
|
|
37
|
+
prefersDark,
|
|
38
|
+
setMobileMaxWidth,
|
|
39
|
+
setTabletMaxWidth,
|
|
40
|
+
setLaptopMaxWidth,
|
|
41
|
+
} from "vasille-css";
|
|
42
|
+
|
|
43
|
+
export declare const styleSheet: <T extends {
|
|
44
|
+
[className: string]: {
|
|
45
|
+
[media: `@${string}`]: {
|
|
46
|
+
[state: `:${string}`]: StyleProps;
|
|
47
|
+
} & StyleProps;
|
|
48
|
+
[state: `:${string}`]: StyleProps;
|
|
49
|
+
} & StyleProps;
|
|
50
|
+
}>(input: T) => { [K in keyof T]: string; };
|
|
51
|
+
export declare function mount<T>(element: Element, component: ($: T) => void, $: T, debugUi?: boolean): void;
|
|
52
|
+
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Runner } from "vasille/web-runner";
|
|
2
|
+
import { mount as coreMount } from "vasille-dx";
|
|
3
|
+
import { styleSheet as coreStyleSheet } from "vasille-css";
|
|
4
|
+
export { compose, Debug, Delay, Else, ElseIf, For, If, Slot, Watch, awaited, } from "vasille-dx";
|
|
5
|
+
export const styleSheet = coreStyleSheet;
|
|
6
|
+
export function mount(element, component, $, debugUi) {
|
|
7
|
+
coreMount(element, component, new Runner(debugUi ?? false, window.document), $);
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,16 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vasille-web",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "3.1.1",
|
|
4
|
+
"description": "The first Developer eXperience Orientated web front-end framework.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "./index.d.ts",
|
|
7
7
|
"exports": {
|
|
8
|
-
"
|
|
9
|
-
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./fake-types/index.d.ts",
|
|
10
|
+
"import": "./lib/index.js",
|
|
11
|
+
"browser": "./lib/index.js",
|
|
12
|
+
"node": "./lib/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./jsx-runtime": {
|
|
15
|
+
"types": "./types/jsx-runtime.d.ts",
|
|
16
|
+
"import": "./lib/jsx-runtime.js",
|
|
17
|
+
"browser": "./lib/jsx-runtime.js",
|
|
18
|
+
"node": "./lib/jsx-runtime.js"
|
|
19
|
+
}
|
|
10
20
|
},
|
|
11
21
|
"scripts": {
|
|
12
|
-
"prepack": "cp -f ../README.md ./README.md"
|
|
22
|
+
"prepack": "cp -f ../README.md ./README.md",
|
|
23
|
+
"build": "tsc --build tsconfig.json",
|
|
24
|
+
"check-types": "tsc --noEmit --lib es2020 --types web ./fake-types/index.d.ts",
|
|
25
|
+
"update-types": "tsc --build tsconfig-types.json"
|
|
13
26
|
},
|
|
27
|
+
"type": "module",
|
|
14
28
|
"repository": {
|
|
15
29
|
"type": "git",
|
|
16
30
|
"url": "git+https://github.com/vasille-js/vasille-js.git"
|
|
@@ -30,7 +44,13 @@
|
|
|
30
44
|
"homepage": "https://github.com/vasille-js/vasille-js#readme",
|
|
31
45
|
"dependencies": {
|
|
32
46
|
"babel-plugin-vasille": "^0.99.2",
|
|
33
|
-
"vasille
|
|
34
|
-
"vasille-
|
|
47
|
+
"vasille": "^3.1.0",
|
|
48
|
+
"vasille-css": "^3.1.0",
|
|
49
|
+
"vasille-dx": "^3.1.0"
|
|
50
|
+
},
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@types/web": "^0.0.256",
|
|
53
|
+
"csstype": "^3.1.3",
|
|
54
|
+
"typescript": "^5.8.3"
|
|
35
55
|
}
|
|
36
56
|
}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StyleProps } from "./spec/css.js";
|
|
2
|
+
export { compose, Debug, Delay, Else, ElseIf, For, If, Slot, Watch, awaited, } from "vasille-dx";
|
|
3
|
+
export type { ref, bind, calculate, forward, arrayModel, setModel, mapModel, reactiveObject, value, watch, state, } from "vasille-dx";
|
|
4
|
+
export type { theme, tablet, dark, mobile, laptop, prefersLight, prefersDark, setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, } from "vasille-css";
|
|
5
|
+
export declare const styleSheet: <T extends {
|
|
6
|
+
[className: string]: {
|
|
7
|
+
[media: `@${string}`]: {
|
|
8
|
+
[state: `:${string}`]: StyleProps;
|
|
9
|
+
} & StyleProps;
|
|
10
|
+
[state: `:${string}`]: StyleProps;
|
|
11
|
+
} & StyleProps;
|
|
12
|
+
}>(input: T) => { [K in keyof T]: string; };
|
|
13
|
+
export declare function mount<T>(element: Element, component: ($: T) => void, $: T, debugUi?: boolean): void;
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import type { RawStyleProps } from "./spec/css.d.ts";
|
|
2
|
+
import type { HtmlTagMap } from "./spec/html.d.ts";
|
|
3
|
+
type prefixedObject<T, P extends string> = {
|
|
4
|
+
[K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
|
|
5
|
+
};
|
|
6
|
+
type HtmlInput<K extends keyof HTMLElementTagNameMap & keyof HtmlTagMap> = {
|
|
7
|
+
callback?: (node: HTMLElementTagNameMap[K]) => unknown;
|
|
8
|
+
class?: (string | Record<string, boolean> | false)[] | string;
|
|
9
|
+
style?: RawStyleProps | string;
|
|
10
|
+
slot?: unknown;
|
|
11
|
+
} & Partial<HtmlTagMap[K]['attrs']> & prefixedObject<HtmlTagMap[K]['events'], 'on'> & {
|
|
12
|
+
[K in `bind:${string}`]?: unknown;
|
|
13
|
+
};
|
|
14
|
+
export declare namespace JSX {
|
|
15
|
+
type ElementType = keyof IntrinsicElements | ((props?: object) => void);
|
|
16
|
+
type Element = never;
|
|
17
|
+
type ElementClass = never;
|
|
18
|
+
interface ElementChildrenAttribute {
|
|
19
|
+
slot: unknown;
|
|
20
|
+
}
|
|
21
|
+
interface IntrinsicElements {
|
|
22
|
+
"a2": HtmlInput<"a">;
|
|
23
|
+
"abbr": HtmlInput<"abbr">;
|
|
24
|
+
"address": HtmlInput<"address">;
|
|
25
|
+
"area": HtmlInput<"area">;
|
|
26
|
+
"article": HtmlInput<"article">;
|
|
27
|
+
"aside": HtmlInput<"aside">;
|
|
28
|
+
"audio": HtmlInput<"audio">;
|
|
29
|
+
"b": HtmlInput<"b">;
|
|
30
|
+
"base": HtmlInput<"base">;
|
|
31
|
+
"bdi": HtmlInput<"bdi">;
|
|
32
|
+
"bdo": HtmlInput<"bdo">;
|
|
33
|
+
"blockquote": HtmlInput<"blockquote">;
|
|
34
|
+
"body": HtmlInput<"body">;
|
|
35
|
+
"br": HtmlInput<"br">;
|
|
36
|
+
"button": HtmlInput<"button">;
|
|
37
|
+
"canvas": HtmlInput<"canvas">;
|
|
38
|
+
"caption": HtmlInput<"caption">;
|
|
39
|
+
"cite": HtmlInput<"cite">;
|
|
40
|
+
"code": HtmlInput<"code">;
|
|
41
|
+
"col": HtmlInput<"col">;
|
|
42
|
+
"colgroup": HtmlInput<"colgroup">;
|
|
43
|
+
"data": HtmlInput<"data">;
|
|
44
|
+
"datalist": HtmlInput<"datalist">;
|
|
45
|
+
"dd": HtmlInput<"dd">;
|
|
46
|
+
"del": HtmlInput<"del">;
|
|
47
|
+
"details": HtmlInput<"details">;
|
|
48
|
+
"dfn": HtmlInput<"dfn">;
|
|
49
|
+
"dialog": HtmlInput<"dialog">;
|
|
50
|
+
"div": HtmlInput<"div">;
|
|
51
|
+
"dl": HtmlInput<"dl">;
|
|
52
|
+
"dt": HtmlInput<"dt">;
|
|
53
|
+
"em": HtmlInput<"em">;
|
|
54
|
+
"embed": HtmlInput<"embed">;
|
|
55
|
+
"fieldset": HtmlInput<"fieldset">;
|
|
56
|
+
"figcaption": HtmlInput<"figcaption">;
|
|
57
|
+
"figure": HtmlInput<"figure">;
|
|
58
|
+
"footer": HtmlInput<"footer">;
|
|
59
|
+
"form": HtmlInput<"form">;
|
|
60
|
+
"h1": HtmlInput<"h1">;
|
|
61
|
+
"h2": HtmlInput<"h2">;
|
|
62
|
+
"h3": HtmlInput<"h3">;
|
|
63
|
+
"h4": HtmlInput<"h4">;
|
|
64
|
+
"h5": HtmlInput<"h5">;
|
|
65
|
+
"h6": HtmlInput<"h6">;
|
|
66
|
+
"head": HtmlInput<"head">;
|
|
67
|
+
"header": HtmlInput<"header">;
|
|
68
|
+
"hgroup": HtmlInput<"hgroup">;
|
|
69
|
+
"hr": HtmlInput<"hr">;
|
|
70
|
+
"html": HtmlInput<"html">;
|
|
71
|
+
"i": HtmlInput<"i">;
|
|
72
|
+
"iframe": HtmlInput<"iframe">;
|
|
73
|
+
"img": HtmlInput<"img">;
|
|
74
|
+
"input": HtmlInput<"input">;
|
|
75
|
+
"ins": HtmlInput<"ins">;
|
|
76
|
+
"kbd": HtmlInput<"kbd">;
|
|
77
|
+
"label": HtmlInput<"label">;
|
|
78
|
+
"legend": HtmlInput<"legend">;
|
|
79
|
+
"li": HtmlInput<"li">;
|
|
80
|
+
"link": HtmlInput<"link">;
|
|
81
|
+
"main": HtmlInput<"main">;
|
|
82
|
+
"map": HtmlInput<"map">;
|
|
83
|
+
"mark": HtmlInput<"mark">;
|
|
84
|
+
"menu": HtmlInput<"menu">;
|
|
85
|
+
"meta": HtmlInput<"meta">;
|
|
86
|
+
"meter": HtmlInput<"meter">;
|
|
87
|
+
"nav": HtmlInput<"nav">;
|
|
88
|
+
"noscript": HtmlInput<"noscript">;
|
|
89
|
+
"object": HtmlInput<"object">;
|
|
90
|
+
"ol": HtmlInput<"ol">;
|
|
91
|
+
"optgroup": HtmlInput<"optgroup">;
|
|
92
|
+
"option": HtmlInput<"option">;
|
|
93
|
+
"output": HtmlInput<"output">;
|
|
94
|
+
"p": HtmlInput<"p">;
|
|
95
|
+
"picture": HtmlInput<"picture">;
|
|
96
|
+
"pre": HtmlInput<"pre">;
|
|
97
|
+
"progress": HtmlInput<"progress">;
|
|
98
|
+
"q": HtmlInput<"q">;
|
|
99
|
+
"rp": HtmlInput<"rp">;
|
|
100
|
+
"rt": HtmlInput<"rt">;
|
|
101
|
+
"ruby": HtmlInput<"ruby">;
|
|
102
|
+
"s": HtmlInput<"s">;
|
|
103
|
+
"samp": HtmlInput<"samp">;
|
|
104
|
+
"script": HtmlInput<"script">;
|
|
105
|
+
"section": HtmlInput<"section">;
|
|
106
|
+
"select": HtmlInput<"select">;
|
|
107
|
+
"slot": HtmlInput<"slot">;
|
|
108
|
+
"small": HtmlInput<"small">;
|
|
109
|
+
"source": HtmlInput<"source">;
|
|
110
|
+
"span": HtmlInput<"span">;
|
|
111
|
+
"strong": HtmlInput<"strong">;
|
|
112
|
+
"style": HtmlInput<"style">;
|
|
113
|
+
"sub": HtmlInput<"sub">;
|
|
114
|
+
"summary": HtmlInput<"summary">;
|
|
115
|
+
"sup": HtmlInput<"sub">;
|
|
116
|
+
"table": HtmlInput<"table">;
|
|
117
|
+
"tbody": HtmlInput<"tbody">;
|
|
118
|
+
"td": HtmlInput<"td">;
|
|
119
|
+
"template": HtmlInput<"template">;
|
|
120
|
+
"textarea": HtmlInput<"textarea">;
|
|
121
|
+
"tfoot": HtmlInput<"tfoot">;
|
|
122
|
+
"th": HtmlInput<"th">;
|
|
123
|
+
"thead": HtmlInput<"thead">;
|
|
124
|
+
"time": HtmlInput<"time">;
|
|
125
|
+
"title": HtmlInput<"title">;
|
|
126
|
+
"tr": HtmlInput<"tr">;
|
|
127
|
+
"track": HtmlInput<"track">;
|
|
128
|
+
"u": HtmlInput<"u">;
|
|
129
|
+
"ul": HtmlInput<"ul">;
|
|
130
|
+
"var": HtmlInput<"var">;
|
|
131
|
+
"video": HtmlInput<"video">;
|
|
132
|
+
"wbr": HtmlInput<"wbr">;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
export {};
|
package/index-node.js
DELETED
package/index.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export {
|
|
2
|
-
compose,
|
|
3
|
-
extend,
|
|
4
|
-
mount,
|
|
5
|
-
Adapter,
|
|
6
|
-
Debug,
|
|
7
|
-
Delay,
|
|
8
|
-
Else,
|
|
9
|
-
ElseIf,
|
|
10
|
-
For,
|
|
11
|
-
If,
|
|
12
|
-
Mount,
|
|
13
|
-
Show,
|
|
14
|
-
Slot,
|
|
15
|
-
Watch,
|
|
16
|
-
awaited,
|
|
17
|
-
ref,
|
|
18
|
-
bind,
|
|
19
|
-
calculate,
|
|
20
|
-
forward,
|
|
21
|
-
arrayModel,
|
|
22
|
-
setModel,
|
|
23
|
-
mapModel,
|
|
24
|
-
reactiveObject,
|
|
25
|
-
value,
|
|
26
|
-
watch,
|
|
27
|
-
} from "vasille-dx";
|
|
28
|
-
export {
|
|
29
|
-
theme,
|
|
30
|
-
tablet,
|
|
31
|
-
dark,
|
|
32
|
-
mobile,
|
|
33
|
-
laptop,
|
|
34
|
-
prefersLight,
|
|
35
|
-
prefersDark,
|
|
36
|
-
webStyleSheet,
|
|
37
|
-
setMobileMaxWidth,
|
|
38
|
-
setTabletMaxWidth,
|
|
39
|
-
setLaptopMaxWidth,
|
|
40
|
-
} from "vasille-css";
|
package/index.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export {
|
|
2
|
-
compose,
|
|
3
|
-
extend,
|
|
4
|
-
mount,
|
|
5
|
-
Adapter,
|
|
6
|
-
Debug,
|
|
7
|
-
Delay,
|
|
8
|
-
Else,
|
|
9
|
-
ElseIf,
|
|
10
|
-
For,
|
|
11
|
-
If,
|
|
12
|
-
Mount,
|
|
13
|
-
Show,
|
|
14
|
-
Slot,
|
|
15
|
-
Watch,
|
|
16
|
-
awaited,
|
|
17
|
-
$,
|
|
18
|
-
} from "vasille-dx";
|
|
19
|
-
export {
|
|
20
|
-
webStyleSheet,
|
|
21
|
-
setMobileMaxWidth,
|
|
22
|
-
setTabletMaxWidth,
|
|
23
|
-
setLaptopMaxWidth,
|
|
24
|
-
} from "vasille-css";
|