vasille-web 4.3.2 → 5.0.0
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 +43 -31
- package/lib/index.js +12 -12
- package/package.json +16 -12
- package/types/dev.d.ts +1 -1
- package/types/index.d.ts +10 -17
- package/types/jsx-runtime.d.ts +3 -3
- package/fake-types/index.d.ts +0 -213
- package/lib/bin.js +0 -33
- package/spec/css.d.ts +0 -7
- package/spec/html.d.ts +0 -942
- package/types/bin.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Steel Frame
|
|
2
2
|
|
|
3
|
-

|
|
4
4
|
|
|
5
|
-
`
|
|
5
|
+
`SteelFrameKit` is a front-end development kit, which is developed to provide bulletproof frontends.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/vasille)
|
|
8
8
|
|
|
9
9
|
## Table of content
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
- [Steel Frame](#steel-frame)
|
|
12
|
+
- [Table of content](#table-of-content)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [How to use SteelFramekit](#how-to-use-steelframekit)
|
|
15
|
+
- [Full documentation:](#full-documentation)
|
|
16
|
+
- [Examples](#examples)
|
|
17
|
+
- [How SAFE is SteelFrameKit](#how-safe-is-steelframekit)
|
|
18
|
+
- [How INTUITIVE is SteelFrameKit](#how-intuitive-is-steelframekit)
|
|
19
|
+
- [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
|
|
20
|
+
- [Road map](#road-map)
|
|
21
|
+
- [Change log](#change-log)
|
|
22
|
+
- [5.0.0](#500)
|
|
23
|
+
- [4.3.0](#430)
|
|
24
|
+
- [4.2.0](#420)
|
|
25
|
+
- [4.1.0](#410)
|
|
26
|
+
- [4.0.0](#400)
|
|
27
|
+
- [Questions](#questions)
|
|
17
28
|
|
|
18
29
|
|
|
19
30
|
<hr>
|
|
@@ -21,21 +32,22 @@
|
|
|
21
32
|
## Installation
|
|
22
33
|
|
|
23
34
|
```
|
|
24
|
-
npm install
|
|
35
|
+
npm install steel-frame --save
|
|
25
36
|
```
|
|
26
37
|
|
|
27
|
-
## How to use
|
|
38
|
+
## How to use SteelFramekit
|
|
28
39
|
|
|
29
40
|
Create an app from a template
|
|
30
41
|
|
|
31
42
|
```bash
|
|
32
|
-
$ npm create
|
|
43
|
+
$ npm create steel-frame
|
|
33
44
|
```
|
|
34
45
|
|
|
35
46
|
### Full documentation:
|
|
36
|
-
* [Learn `
|
|
37
|
-
* [
|
|
38
|
-
* [
|
|
47
|
+
* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
|
|
48
|
+
* [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
|
|
49
|
+
* [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
|
|
50
|
+
* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
|
|
39
51
|
|
|
40
52
|
### Examples
|
|
41
53
|
* [TypeScript Example](https://github.com/vasille-js/example-typescript)
|
|
@@ -43,14 +55,14 @@ $ npm create vasille
|
|
|
43
55
|
|
|
44
56
|
<hr>
|
|
45
57
|
|
|
46
|
-
## How SAFE is
|
|
58
|
+
## How SAFE is SteelFrameKit
|
|
47
59
|
|
|
48
60
|
The safe of your application is ensured by
|
|
49
61
|
* `100%` coverage of code by unit tests.
|
|
50
62
|
Each function, each branch is working as designed.
|
|
51
63
|
* OOP, DRY, KISS and SOLID principles are applied.
|
|
52
64
|
* `strong typing` makes your javascript/typescript code safe as C++ code.
|
|
53
|
-
All entities of `
|
|
65
|
+
All entities of `SteelFrameKit` core library are strongly typed, including:
|
|
54
66
|
* data fields & properties.
|
|
55
67
|
* computed properties (function parameters and result).
|
|
56
68
|
* methods.
|
|
@@ -60,11 +72,11 @@ All entities of `vasille` core library are strongly typed, including:
|
|
|
60
72
|
* references to children.
|
|
61
73
|
* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
|
|
62
74
|
|
|
63
|
-
## How INTUITIVE is
|
|
75
|
+
## How INTUITIVE is SteelFrameKit
|
|
64
76
|
|
|
65
77
|
There is the "Hello World":
|
|
66
78
|
```typescript jsx
|
|
67
|
-
import { compose, mount } from "
|
|
79
|
+
import { compose, mount } from "steel-frame";
|
|
68
80
|
|
|
69
81
|
const App = compose(() => {
|
|
70
82
|
<p>Hello world</p>;
|
|
@@ -73,7 +85,7 @@ const App = compose(() => {
|
|
|
73
85
|
mount(document.body, App, {});
|
|
74
86
|
```
|
|
75
87
|
|
|
76
|
-
## How POWERFUL is
|
|
88
|
+
## How POWERFUL is SteelFrameKit
|
|
77
89
|
|
|
78
90
|
All of these are supported:
|
|
79
91
|
* Components.
|
|
@@ -85,25 +97,30 @@ All of these are supported:
|
|
|
85
97
|
* 2-way data binding in components.
|
|
86
98
|
* Logic block (if, else).
|
|
87
99
|
* Loops (array, map, set).
|
|
100
|
+
* Dependency injection.
|
|
88
101
|
|
|
89
102
|
<hr>
|
|
90
103
|
|
|
91
104
|
## Road map
|
|
92
105
|
|
|
93
|
-
* [x] Update the `
|
|
106
|
+
* [x] Update the `core` library to version 3.0.
|
|
94
107
|
* [x] `100%` Test Coverage for core Library v3.
|
|
95
|
-
* [x] Develop the `
|
|
108
|
+
* [x] Develop the `JSX` library.
|
|
96
109
|
* [x] `100%` Test Coverage for the JSX library.
|
|
97
|
-
* [x] Develop the `
|
|
110
|
+
* [x] Develop the `Babel Plugin`.
|
|
98
111
|
* [x] `100%` Test Coverage fot babel plugin.
|
|
99
112
|
* [x] Add CSS support (define styles in components).
|
|
100
113
|
* [x] Add router.
|
|
101
114
|
* [x] Add SSG (static site generation).
|
|
115
|
+
* [ ] Develop tools extension for debugging (WIP).
|
|
102
116
|
* [ ] Add SSR (server side rendering).
|
|
103
|
-
* [ ] Develop tools extension for debugging.
|
|
104
117
|
|
|
105
118
|
## Change log
|
|
106
119
|
|
|
120
|
+
### 5.0.0
|
|
121
|
+
|
|
122
|
+
Add support for context and dependencies injection.
|
|
123
|
+
|
|
107
124
|
### 4.3.0
|
|
108
125
|
|
|
109
126
|
Add new function `safe` which make functions safe, errors are reported automatically.
|
|
@@ -114,19 +131,14 @@ Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator
|
|
|
114
131
|
|
|
115
132
|
### 4.1.0
|
|
116
133
|
|
|
117
|
-
Added SSG (static site generation) as build option `
|
|
134
|
+
Added SSG (static site generation) as build option `sf build static`.
|
|
118
135
|
|
|
119
136
|
### 4.0.0
|
|
120
137
|
|
|
121
|
-
Initial version of the framework with file based routing and building scripts (`
|
|
138
|
+
Initial version of the framework with file based routing and building scripts (`sf dev` and `sf build spa`).
|
|
122
139
|
|
|
123
140
|
## Questions
|
|
124
141
|
|
|
125
142
|
If you have questions, feel free to contact the maintainer of the project:
|
|
126
143
|
|
|
127
144
|
* [Author's Email](mailto:vas.lixcode@gmail.com)
|
|
128
|
-
* [Author's Telegram](https://t.me/lixcode)
|
|
129
|
-
|
|
130
|
-
<hr>
|
|
131
|
-
|
|
132
|
-
**Made in Moldova** 🇲🇩
|
package/lib/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import { Portal, reportError } from "vasille";
|
|
2
2
|
import { Runner } from "vasille/web-runner";
|
|
3
3
|
import { mount as coreMount } from "vasille-jsx";
|
|
4
|
-
import { styleSheet as coreStyleSheet } from "vasille-css";
|
|
5
4
|
import { routeApp as coreRouteApp } from "vasille-router/web-router";
|
|
5
|
+
export { styleSheet } from "vasille-css";
|
|
6
6
|
export { safe } from "vasille";
|
|
7
|
-
export { view, view as component, view as compose,
|
|
7
|
+
export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } from "vasille-jsx";
|
|
8
8
|
export { screen, screen as page, } from "vasille-router";
|
|
9
|
-
export { Router
|
|
9
|
+
export { Router } from "vasille-router/web-router";
|
|
10
10
|
export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
|
|
11
|
-
export
|
|
11
|
+
export { context, impute, receive, share } from "vasille-context";
|
|
12
12
|
function createPortal(node) {
|
|
13
13
|
const portal = new Portal({ node: document.body }, node.runner);
|
|
14
14
|
node.create(portal);
|
|
15
15
|
return portal;
|
|
16
16
|
}
|
|
17
|
-
export function modal(modal) {
|
|
17
|
+
export function modal(modal, create = createPortal) {
|
|
18
18
|
return function (props, node) {
|
|
19
19
|
if (!node) {
|
|
20
20
|
throw new Error("Vasille: Modal context is missing");
|
|
21
21
|
}
|
|
22
|
-
const portal =
|
|
22
|
+
const portal = create(node);
|
|
23
23
|
try {
|
|
24
24
|
modal(portal, props);
|
|
25
25
|
}
|
|
@@ -28,10 +28,10 @@ export function modal(modal) {
|
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
export function prompt(modal) {
|
|
31
|
+
export function prompt(modal, create = createPortal) {
|
|
32
32
|
return function (node, input, timeout) {
|
|
33
33
|
return new Promise((resolve, reject) => {
|
|
34
|
-
const portal =
|
|
34
|
+
const portal = create(node);
|
|
35
35
|
const timer = timeout &&
|
|
36
36
|
setTimeout(() => {
|
|
37
37
|
destroy();
|
|
@@ -61,9 +61,9 @@ export function prompt(modal) {
|
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
|
-
export function mount(element, component, input
|
|
65
|
-
return coreMount(element, component, new Runner(
|
|
64
|
+
export function mount(element, component, input) {
|
|
65
|
+
return coreMount(element, component, new Runner(window.document), input);
|
|
66
66
|
}
|
|
67
|
-
export function routerApp(init, element
|
|
68
|
-
return coreRouteApp(element ?? document.body, window, window.location, init
|
|
67
|
+
export function routerApp(init, element) {
|
|
68
|
+
return coreRouteApp(element ?? document.body, window, window.location, init);
|
|
69
69
|
}
|
package/package.json
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vasille-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "The same framework which is designed to build bulletproof frontends.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "./index.d.ts",
|
|
7
|
-
"bin": {
|
|
8
|
-
"vasille-web": "./lib/bin.js"
|
|
9
|
-
},
|
|
10
7
|
"exports": {
|
|
11
8
|
".": {
|
|
12
|
-
"types": "./
|
|
9
|
+
"types": "./types/index.d.ts",
|
|
13
10
|
"import": "./lib/index.js",
|
|
14
11
|
"browser": "./lib/index.js",
|
|
15
12
|
"node": "./lib/index.js"
|
|
@@ -19,13 +16,19 @@
|
|
|
19
16
|
"import": "./lib/jsx-runtime.js",
|
|
20
17
|
"browser": "./lib/jsx-runtime.js",
|
|
21
18
|
"node": "./lib/jsx-runtime.js"
|
|
19
|
+
},
|
|
20
|
+
"./dev": {
|
|
21
|
+
"types": "./types/dev.d.ts",
|
|
22
|
+
"import": "./lib/dev.js",
|
|
23
|
+
"browser": "./lib/dev.js",
|
|
24
|
+
"node": "./lib/dev.js"
|
|
22
25
|
}
|
|
23
26
|
},
|
|
24
27
|
"scripts": {
|
|
25
28
|
"prepack": "cp -f ../README.md ./README.md",
|
|
26
|
-
"prettier": "prettier src
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
+
"prettier": "prettier src --write",
|
|
30
|
+
"prebuild": "rm -rf lib types",
|
|
31
|
+
"build": "tsc --build tsconfig.json"
|
|
29
32
|
},
|
|
30
33
|
"type": "module",
|
|
31
34
|
"repository": {
|
|
@@ -47,10 +50,11 @@
|
|
|
47
50
|
"homepage": "https://github.com/vasille-js/vasille-js#readme",
|
|
48
51
|
"dependencies": {
|
|
49
52
|
"csstype": "^3.1.3",
|
|
50
|
-
"vasille": "^
|
|
51
|
-
"vasille-
|
|
52
|
-
"vasille-
|
|
53
|
-
"vasille-
|
|
53
|
+
"vasille": "^5.0.0",
|
|
54
|
+
"vasille-context": "^5.0.0",
|
|
55
|
+
"vasille-css": "^5.0.0",
|
|
56
|
+
"vasille-jsx": "^5.0.0",
|
|
57
|
+
"vasille-router": "^5.0.0"
|
|
54
58
|
},
|
|
55
59
|
"devDependencies": {
|
|
56
60
|
"@types/node": "^24.3.0",
|
package/types/dev.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { TagOptions } from "vasille/web-runner";
|
|
|
3
3
|
import { IDevRunner, Inspector, StaticPosition } from "vasille/dev";
|
|
4
4
|
import { PromptProps } from "./index.js";
|
|
5
5
|
import { WebRouterInitialization } from "vasille-router/web-router";
|
|
6
|
-
export declare function devModal<T extends object>(modalFn: (node: Fragment<Node, Element, TagOptions
|
|
6
|
+
export declare function devModal<T extends object>(modalFn: (node: Fragment<Node, Element, TagOptions>, input: T) => void, declaration: StaticPosition, name: string): (input: T, node: Fragment<Node, Element, TagOptions>, usage: StaticPosition | undefined) => void;
|
|
7
7
|
export declare function devPrompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, input: T) => void, declaration: StaticPosition, name: string): (node: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, input: T, timeout: number | undefined, usage: StaticPosition | undefined) => Promise<unknown>;
|
|
8
8
|
export declare function devMount<T>(element: Element, component: ($: T) => void, input: T, inspector: Inspector): import("vasille").App<Node, Element, import("vasille/dev").DevTagOptions, import("vasille").Runner<Node, Element, import("vasille/dev").DevTagOptions>>;
|
|
9
9
|
export declare function devRouterApp<Routes extends string>(init: WebRouterInitialization<Routes>, element: Element, inspector: Inspector): import("vasille").App<Node, Element, import("vasille/dev").DevTagOptions, import("vasille").Runner<Node, Element, import("vasille/dev").DevTagOptions>>;
|
package/types/index.d.ts
CHANGED
|
@@ -1,27 +1,20 @@
|
|
|
1
|
-
import { Fragment } from "vasille";
|
|
2
|
-
import { StyleProps } from "../spec/css.js";
|
|
1
|
+
import { App, Fragment, Portal } from "vasille";
|
|
3
2
|
import { TagOptions } from "vasille/web-runner";
|
|
4
3
|
import { WebRouterInitialization } from "vasille-router/web-router";
|
|
5
|
-
export
|
|
4
|
+
export { styleSheet } from "vasille-css";
|
|
5
|
+
export type { RawStyleProps as StyleProps, StyleSheetProps } from "./spec/css.js";
|
|
6
6
|
export type { ClassItem } from "./jsx-runtime.js";
|
|
7
7
|
export { safe } from "vasille";
|
|
8
|
-
export { view, view as component, view as compose,
|
|
8
|
+
export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } from "vasille-jsx";
|
|
9
9
|
export { type QueryParams, type ScreenProps, type RouteParameters, screen, screen as page, type FallbackScreenProps, type ErrorScreenProps, } from "vasille-router";
|
|
10
|
-
export { Router, type WebRouterInitialization, type NavigationMode
|
|
10
|
+
export { Router, type WebRouterInitialization, type NavigationMode } from "vasille-router/web-router";
|
|
11
11
|
export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
[media: `@${string}`]: {
|
|
15
|
-
[state: `:${string}`]: StyleProps;
|
|
16
|
-
} & StyleProps;
|
|
17
|
-
[state: `:${string}`]: StyleProps;
|
|
18
|
-
} & StyleProps;
|
|
19
|
-
}>(input: T) => { [K in keyof T]: string; };
|
|
20
|
-
export declare function modal<T extends object>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void): (input: T, node: Fragment<Node, Element, TagOptions>) => void;
|
|
12
|
+
export { context, impute, receive, share } from "vasille-context";
|
|
13
|
+
export declare function modal<T extends object>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, TagOptions>) => Portal<Node, Element, TagOptions>): (input: T, node: Fragment<Node, Element, TagOptions>) => void;
|
|
21
14
|
export interface PromptProps {
|
|
22
15
|
resolve(data: unknown): void;
|
|
23
16
|
reject(err: unknown): void;
|
|
24
17
|
}
|
|
25
|
-
export declare function prompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void): (node: Fragment<Node, Element, TagOptions>, input: T, timeout?: number) => Promise<unknown>;
|
|
26
|
-
export declare function mount<T>(element: Element, component: ($: T) => void, input: T
|
|
27
|
-
export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element
|
|
18
|
+
export declare function prompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, TagOptions>) => Portal<Node, Element, TagOptions>): (node: Fragment<Node, Element, TagOptions>, input: T, timeout?: number) => Promise<unknown>;
|
|
19
|
+
export declare function mount<T>(element: Element, component: ($: T) => void, input: T): App<Node, Element, TagOptions>;
|
|
20
|
+
export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element): App<Node, Element, TagOptions>;
|
package/types/jsx-runtime.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { RawStyleProps } from "
|
|
2
|
-
import type { HtmlTagMap } from "
|
|
1
|
+
import type { RawStyleProps } from "./spec/css.ts";
|
|
2
|
+
import type { HtmlTagMap } from "./spec/html.ts";
|
|
3
3
|
type prefixedObject<T, P extends string> = {
|
|
4
4
|
[K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
|
|
5
5
|
};
|
|
@@ -21,7 +21,7 @@ export declare namespace JSX {
|
|
|
21
21
|
slot: unknown;
|
|
22
22
|
}
|
|
23
23
|
interface IntrinsicElements {
|
|
24
|
-
|
|
24
|
+
a: HtmlInput<"a">;
|
|
25
25
|
abbr: HtmlInput<"abbr">;
|
|
26
26
|
address: HtmlInput<"address">;
|
|
27
27
|
area: HtmlInput<"area">;
|
package/fake-types/index.d.ts
DELETED
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
import { App, Destroyable } from "vasille";
|
|
2
|
-
import type { TagOptions } from "vasille/web-runner";
|
|
3
|
-
import type { StyleProps } from "../spec/css.d.ts";
|
|
4
|
-
import type { ScreenProps } from "vasille-router";
|
|
5
|
-
import type { Router } from "vasille-router/web-router";
|
|
6
|
-
|
|
7
|
-
export type { RawStyleProps as StyleProps } from "../spec/css.d.ts";
|
|
8
|
-
export type ClassItem = string | Record<string, boolean> | false;
|
|
9
|
-
export type { FallbackScreenProps, ErrorScreenProps } from "vasille-router";
|
|
10
|
-
export { safe } from "vasille";
|
|
11
|
-
|
|
12
|
-
/** Set a handler for component errors */
|
|
13
|
-
export declare function setErrorHandler(handler: (e: unknown) => void): void;
|
|
14
|
-
|
|
15
|
-
declare interface Params {
|
|
16
|
-
slot(...args: unknown[]): unknown;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
declare type Composed<In extends object, Out> = (
|
|
20
|
-
$: (Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In) & {
|
|
21
|
-
callback?(data: Out): void;
|
|
22
|
-
},
|
|
23
|
-
) => void;
|
|
24
|
-
declare type ComposedNoCallback<In extends object, Out> = (
|
|
25
|
-
$: Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In,
|
|
26
|
-
) => void;
|
|
27
|
-
|
|
28
|
-
/** Composes a component (v3), which can receive external reactive values via props */
|
|
29
|
-
export declare function compose<In extends object, Out extends NonNullable<unknown>>(
|
|
30
|
-
renderer: (input: In) => Out,
|
|
31
|
-
): Composed<In, Out>;
|
|
32
|
-
export declare function compose<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
|
|
33
|
-
|
|
34
|
-
/** Composes a component (v4), which can receive external reactive values via props */
|
|
35
|
-
export declare function component<In extends object, Out extends NonNullable<unknown>>(
|
|
36
|
-
renderer: (input: In) => Out,
|
|
37
|
-
): Composed<In, Out>;
|
|
38
|
-
export declare function component<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
|
|
39
|
-
|
|
40
|
-
/** Composes a view, which can receive external reactive values via props */
|
|
41
|
-
export declare function view<Out extends NonNullable<unknown>>(
|
|
42
|
-
renderer: () => Out,
|
|
43
|
-
): Composed<NonNullable<unknown>, Out>;
|
|
44
|
-
export declare function view<In extends object, Out extends NonNullable<unknown>>(
|
|
45
|
-
renderer: (input: In) => Out,
|
|
46
|
-
): Composed<In, Out>;
|
|
47
|
-
export declare function view(renderer: () => void): ComposedNoCallback<NonNullable<unknown>, void>;
|
|
48
|
-
export declare function view<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
|
|
49
|
-
|
|
50
|
-
/** A Vasille.JS App screen */
|
|
51
|
-
type Screen<Route extends string> = (input: ScreenProps<Route>) => Promise<void>;
|
|
52
|
-
|
|
53
|
-
/** Composes a screen, the router navigates between screens */
|
|
54
|
-
export declare function screen<Route extends string>(renderer: Screen<Route>): Screen<Route>;
|
|
55
|
-
/** Composes a page, the file-based router navigates between pages (used for tests only) */
|
|
56
|
-
export declare function page<Route extends string>(renderer: Screen<Route>): Screen<Route>;
|
|
57
|
-
|
|
58
|
-
/** Returns the raw value of expression */
|
|
59
|
-
export declare function raw<T>(v: T): T;
|
|
60
|
-
/** Returns a reactive value of expression */
|
|
61
|
-
export declare function ref<T>(v: T): T;
|
|
62
|
-
/** Returns a reactive-computed form of expression */
|
|
63
|
-
export declare function bind<T>(v: T): T;
|
|
64
|
-
/** Returns a reactive-computed form of returned value */
|
|
65
|
-
export declare function calculate<T>(fn: () => T): T;
|
|
66
|
-
/** Runs the function each time when a dependency is changed */
|
|
67
|
-
export declare function watch(f: () => void): void;
|
|
68
|
-
/** Returns a view-model bind, which send data only forward */
|
|
69
|
-
export declare function forward<T>(v: T): T;
|
|
70
|
-
/** Returns a view-model bind, which send data only backward */
|
|
71
|
-
export declare function backward<T>(v: T): T;
|
|
72
|
-
/** Returns an array model of the array */
|
|
73
|
-
export declare function arrayModel<T>(v?: T[]): T[];
|
|
74
|
-
/** Returns a set model of array values */
|
|
75
|
-
export declare function setModel<T>(v?: T[]): Set<T>;
|
|
76
|
-
/** Returns a map model of map data */
|
|
77
|
-
export declare function mapModel<K, T>(v?: [K, T][]): Map<K, T>;
|
|
78
|
-
|
|
79
|
-
/** Awaits async data in a sync component */
|
|
80
|
-
export declare function awaited<T>(target: Promise<T>): [unknown, T | undefined, () => void];
|
|
81
|
-
export declare function awaited<T>(target: () => Promise<T>): [unknown, T | undefined, () => void];
|
|
82
|
-
|
|
83
|
-
/** Mounts a slot parameter of the component */
|
|
84
|
-
export declare function Slot(options: { model?: () => void; slot?: () => void }): void;
|
|
85
|
-
export declare function Slot<Props extends object>(
|
|
86
|
-
options: {
|
|
87
|
-
model?: (props: Props) => void;
|
|
88
|
-
slot?: () => void;
|
|
89
|
-
} & Props,
|
|
90
|
-
): void;
|
|
91
|
-
|
|
92
|
-
/** Renders content conditionally */
|
|
93
|
-
export declare function If(props: { $condition: unknown; slot?: unknown }): void;
|
|
94
|
-
|
|
95
|
-
/** Renders content conditionally, use strict after `<If/>` */
|
|
96
|
-
export declare function ElseIf(props: { $condition: unknown; slot?: unknown }): void;
|
|
97
|
-
|
|
98
|
-
/** Renders content conditionally, use strict after `<If/>` or `<ElseIf/>` */
|
|
99
|
-
export declare function Else(props: { slot?: unknown }): void;
|
|
100
|
-
|
|
101
|
-
/** Renders content several times using a model (array, map or set) */
|
|
102
|
-
export declare function For<T>(props: { of: readonly T[]; slot?: (value: T) => void }): void;
|
|
103
|
-
export declare function For<T>(props: { of: ReadonlySet<T>; slot?: (value: T) => void }): void;
|
|
104
|
-
export declare function For<K, T>(props: { of: ReadonlyMap<K, T>; slot?: (value: T, index: K) => void }): void;
|
|
105
|
-
|
|
106
|
-
/** Refresh the content each time then the reactive model is updated */
|
|
107
|
-
export declare function Watch<T>(props: { $model: T; slot?: (value: T) => void }): void;
|
|
108
|
-
|
|
109
|
-
/** Create a debug comment in DOM */
|
|
110
|
-
export declare function Debug(props: { $model: unknown }): void;
|
|
111
|
-
|
|
112
|
-
/** Render content after a while */
|
|
113
|
-
export declare function Delay(props: { time?: number; slot?: unknown }): void;
|
|
114
|
-
|
|
115
|
-
/** Stores a singleton state to memory */
|
|
116
|
-
export declare function store<Return extends object>(fn: () => Return): Return;
|
|
117
|
-
|
|
118
|
-
/** Creates a model (state) constructor */
|
|
119
|
-
export declare function model<Return extends object>(fn: () => Return): () => Return & Destroyable;
|
|
120
|
-
export declare function model<Input extends object, Return extends object>(
|
|
121
|
-
fn: (input: Input) => Return,
|
|
122
|
-
): (input: Input) => Return & Destroyable;
|
|
123
|
-
|
|
124
|
-
export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
|
|
125
|
-
export { Router, NavigationMode } from "vasille-router/web-router";
|
|
126
|
-
|
|
127
|
-
/** Applies the value to theme `name` */
|
|
128
|
-
export declare function theme<T>(name: string, value: T): T;
|
|
129
|
-
/** Applies the value to dark theme */
|
|
130
|
-
export declare function dark<T>($: T): T;
|
|
131
|
-
/** Applies the value to mobile devices */
|
|
132
|
-
export declare function mobile<T>($: T): T;
|
|
133
|
-
/** Applies the value to tablet devices */
|
|
134
|
-
export declare function tablet<T>($: T): T;
|
|
135
|
-
/** Applies the value to laptop devices */
|
|
136
|
-
export declare function laptop<T>($: T): T;
|
|
137
|
-
/** Applies the value when user prefers dark theme */
|
|
138
|
-
export declare function prefersDark<T>($: T): T;
|
|
139
|
-
/** Applies the value when user prefers light theme */
|
|
140
|
-
export declare function prefersLight<T>($: T): T;
|
|
141
|
-
|
|
142
|
-
export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
|
|
143
|
-
|
|
144
|
-
/** Creates a local style sheet */
|
|
145
|
-
export declare const styleSheet: <
|
|
146
|
-
T extends {
|
|
147
|
-
[className: string]: {
|
|
148
|
-
[media: `@${string}`]: {
|
|
149
|
-
[state: `:${string}`]: StyleProps;
|
|
150
|
-
} & StyleProps;
|
|
151
|
-
[state: `:${string}`]: StyleProps;
|
|
152
|
-
} & StyleProps;
|
|
153
|
-
},
|
|
154
|
-
>(
|
|
155
|
-
input: T,
|
|
156
|
-
) => { [K in keyof T]: string };
|
|
157
|
-
|
|
158
|
-
/** Mounts a Vasille.JS component to page */
|
|
159
|
-
export declare function mount<T>(
|
|
160
|
-
element: Element,
|
|
161
|
-
component: ($: T) => void,
|
|
162
|
-
$: T,
|
|
163
|
-
debugUi?: boolean,
|
|
164
|
-
): App<Node, Element, TagOptions>;
|
|
165
|
-
|
|
166
|
-
interface RouterInitialization<Routes extends string> {
|
|
167
|
-
routes: {
|
|
168
|
-
[K in Routes]: {
|
|
169
|
-
screen: Screen<K>;
|
|
170
|
-
minAccessLevel?: number;
|
|
171
|
-
};
|
|
172
|
-
};
|
|
173
|
-
getAccessLevel?(): Promise<number>;
|
|
174
|
-
fallbackScreen?(arg: { cause: "not-found" | "no-access" }): void;
|
|
175
|
-
errorScreen?(data: { error: unknown }): void;
|
|
176
|
-
loadingScreen?(props: object): void;
|
|
177
|
-
loadingOverlay?(props: object): void;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/** Starts a route app */
|
|
181
|
-
export declare function routerApp<Routes extends string>(
|
|
182
|
-
init: RouterInitialization<Routes>,
|
|
183
|
-
element?: Element,
|
|
184
|
-
debugUi?: boolean,
|
|
185
|
-
): App<Node, Element, TagOptions>;
|
|
186
|
-
|
|
187
|
-
/** Run a function before component mount */
|
|
188
|
-
export declare function beforeMount(fn: () => void): void;
|
|
189
|
-
export declare function beforeMount(fn: () => Promise<void>): void;
|
|
190
|
-
|
|
191
|
-
/** Run a function after component mount */
|
|
192
|
-
export declare function afterMount(fn: () => void): void;
|
|
193
|
-
export declare function afterMount(fn: () => Promise<void>): void;
|
|
194
|
-
|
|
195
|
-
/** Run a function before component destroy */
|
|
196
|
-
export declare function beforeDestroy(fn: () => void): void;
|
|
197
|
-
|
|
198
|
-
/** Returns the current used router */
|
|
199
|
-
export declare function router(): Router<string> | undefined;
|
|
200
|
-
|
|
201
|
-
/** Composes a modal window (v4+) */
|
|
202
|
-
export declare function modal<T extends object>(modal: (input: T) => void): (input: T) => void;
|
|
203
|
-
|
|
204
|
-
/** Describes properties of a prompt window */
|
|
205
|
-
export interface PromptProps<T> {
|
|
206
|
-
resolve(data: T): void;
|
|
207
|
-
reject(err: unknown): void;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/** Composes a function which will show a prompt on call */
|
|
211
|
-
export declare function prompt<T, Input extends PromptProps<T> = PromptProps<T>>(
|
|
212
|
-
modal: (input: Input) => void,
|
|
213
|
-
): (input: Omit<Input, keyof PromptProps<unknown>>, timeout?: number) => Promise<T>;
|
package/lib/bin.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
import { cwd, exit } from "node:process";
|
|
3
|
-
import { readFileSync } from "fs";
|
|
4
|
-
import path from "node:path";
|
|
5
|
-
const packageJsonPath = path.join(cwd(), "./package.json");
|
|
6
|
-
let content = undefined;
|
|
7
|
-
try {
|
|
8
|
-
content = readFileSync(packageJsonPath, "utf8");
|
|
9
|
-
}
|
|
10
|
-
catch (e) {
|
|
11
|
-
console.error("Failed to read package.json", e);
|
|
12
|
-
exit(1);
|
|
13
|
-
}
|
|
14
|
-
let parsed;
|
|
15
|
-
try {
|
|
16
|
-
parsed = JSON.parse(content);
|
|
17
|
-
}
|
|
18
|
-
catch (e) {
|
|
19
|
-
console.error("Failed to parse package.json", e);
|
|
20
|
-
exit(2);
|
|
21
|
-
}
|
|
22
|
-
if (parsed &&
|
|
23
|
-
typeof parsed === "object" &&
|
|
24
|
-
"devDependencies" in parsed &&
|
|
25
|
-
parsed.devDependencies &&
|
|
26
|
-
typeof parsed.devDependencies === "object" &&
|
|
27
|
-
"vasille-web-cli" in parsed.devDependencies) {
|
|
28
|
-
import(path.join(cwd(), "./node_modules/vasille-web-cli/bin/run.js"));
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
console.info("Vasille Web CLI is not installed. Please run `npm install --save-dev vasille-web-cli`");
|
|
32
|
-
exit(1);
|
|
33
|
-
}
|
package/spec/css.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type {ObsoletePropertiesHyphen, StandardPropertiesHyphen, VendorPropertiesHyphen} from "csstype";
|
|
2
|
-
|
|
3
|
-
export type RawStyleProps = StandardPropertiesHyphen<string | number | number[]> &
|
|
4
|
-
VendorPropertiesHyphen<string | number | number[]> &
|
|
5
|
-
ObsoletePropertiesHyphen<string | number | number[]> &
|
|
6
|
-
{[variable: `--${string}`]: string};
|
|
7
|
-
export type StyleProps = {[K in keyof RawStyleProps]: RawStyleProps[K] | RawStyleProps[K][] };
|