vasille-web 7.0.0-rc.2 → 7.0.0-rc.3

package/README.md

@@ -130,9 +130,12 @@ We respect semantic versioning:
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
-### 7.0
+### 7.0 RC (WIP)
 
-- WIP
+- Add `debounceRef`, `edgeRef` and `fieldRef` functions, which extend the reativity system.
+- Add `Zombie` component, it keeps HTML elements alive some time after destruction.
+- Add `abortSignal` to cancel fetch requests and timers when component is destroyed.
+- Add `safeRef`, `safeExpr`, `safeInit` functions, they make the JSX much safer.
 
 ### 6.0 RC (never released)
 
@@ -161,12 +164,12 @@ We respect semantic versioning:
 
 - Switch to a babel plugin to compile components code. **[API change]**
 - 100% of the code has been covered with unit tests.
-- New developement direction: `keep it simple`.
+- New development direction: `keep it simple`.
 
 ### 2.0 - 2.3
 
 - Introduces components compilation via a typescript plugin. **[API change]**
-- New developement direction: `write less, do more`.
+- New development direction: `write less, do more`.
 
 ### 1.0 - 1.2
 

package/lib/dev.js

@@ -3,8 +3,8 @@ import { devRouteApp as coreRouteApp } from "vasille-router/dev";
 import { DevFragment, DevPortal, DevRunner, errorToString, inspector, toDevValue, } from "vasille/dev";
 import { modal, prompt } from "./index.js";
 function createPortal(node, declaration, usage, name) {
-    const portal = new DevPortal({ node: document.body }, node.runner, declaration, usage, name);
-    node.create(portal);
+    const portal = new DevPortal(document.body, node.runner, declaration, usage, name);
+    node.child(portal);
     return portal;
 }
 export function devModal(modalFn, declaration, name) {
@@ -39,7 +39,7 @@ export function devModal(modalFn, declaration, name) {
         if (!input.slot && slot) {
             input.slot = slot;
         }
-        node.create(frag);
+        node.child(frag);
         fragments.set(frag, { props: input, node: frag, usage });
         run(frag, input, usage);
     };
@@ -93,7 +93,7 @@ export function devPrompt(modal, declaration, name) {
     };
     const renderer = (node, input, timeout, usage) => {
         const frag = new DevFragment(node.runner, null, null, name, {});
-        node.create(frag);
+        node.child(frag);
         fragments.set(frag, { props: input, node: frag, usage });
         return run(frag, input, timeout, usage);
     };

package/lib/index.js

@@ -4,14 +4,14 @@ import { mount as coreMount } from "vasille-jsx";
 import { routeApp as coreRouteApp } from "vasille-router/web-router";
 export { styleSheet } from "vasille-css";
 export { safe } from "vasille";
-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, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, } from "vasille-jsx";
+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, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, debounceRef, edgeRef, safeExpr, safeInit, safeRef, toDeepFieldRef, toFieldRef, Zombie, abortSignal, } from "vasille-jsx";
 export { screen, screen as page, } from "vasille-router";
 export { Router } from "vasille-router/web-router";
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
 export { context, impute, receive, share, receiveOptional } from "vasille-context";
 function createPortal(node) {
-    const portal = new Portal({ node: document.body }, node.runner, node.sDeep + 1);
-    node.create(portal);
+    const portal = new Portal(document.body, node.runner, node.sDeep + 1);
+    node.child(portal);
     return portal;
 }
 export function modal(modal, create = createPortal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-web",
-  "version": "7.0.0-rc.2",
+  "version": "7.0.0-rc.3",
   "description": "The same devkit which is designed to build fault tolerant frontends.",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -50,11 +50,11 @@
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
     "csstype": "^3.1.3",
-    "vasille": "^7.0.0-rc.3",
-    "vasille-context": "^6.0.0-rc",
-    "vasille-css": "^5.0.0",
-    "vasille-jsx": "^7.0.0-rc.2",
-    "vasille-router": "^7.0.0-rc"
+    "vasille": "^7.0.0-rc.9",
+    "vasille-context": "^7.0.0-rc.1",
+    "vasille-css": "^7.0.0-rc.3",
+    "vasille-jsx": "^7.0.0-rc.7",
+    "vasille-router": "^7.0.0-rc.3"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/types/index.d.ts

@@ -6,7 +6,7 @@ export { styleSheet } from "vasille-css";
 export type { RawStyleProps as StyleProps, StyleSheetProps } from "./spec/css.js";
 export type { ClassItem } from "./jsx-runtime.js";
 export { safe } from "vasille";
-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, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, } from "vasille-jsx";
+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, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, debounceRef, edgeRef, safeExpr, safeInit, safeRef, toDeepFieldRef, toFieldRef, Zombie, abortSignal, } from "vasille-jsx";
 export { type QueryParams, type ScreenProps, type RouteParameters, screen, screen as page, type FallbackScreenProps, type ErrorScreenProps, } from "vasille-router";
 export { Router, type WebRouterInitialization, type NavigationMode } from "vasille-router/web-router";
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";

package/types/jsx-runtime.d.ts

@@ -1,5 +1,6 @@
 import type { RawStyleProps } from "./spec/css.ts";
 import type { HtmlTagMap } from "./spec/html.ts";
+import type { CssStyleInjector } from "vasille-css";
 export type { TagEvents, TagAttrs, TagProps } from "./spec/html.ts";
 export type prefixedObject<T, P extends string> = {
     [K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
@@ -7,7 +8,7 @@ export type prefixedObject<T, P extends string> = {
 export type EventHandlers<T> = {
     [K in keyof T]: T[K] | [T[K], boolean | AddEventListenerOptions];
 };
-export type ClassItem = string | Record<string, boolean> | false;
+export type ClassItem = string | CssStyleInjector | Record<string, boolean> | false;
 declare const internal: unique symbol;
 export interface VasilleElement {
     [internal]: typeof internal;
@@ -15,11 +16,11 @@ export interface VasilleElement {
 export type VasilleChild = VasilleElement | string | number | boolean | null | undefined;
 export type VasilleSlot = VasilleChild | VasilleChild[];
 type HtmlInput<K extends keyof HTMLElementTagNameMap & keyof HtmlTagMap> = {
-    callback?: (node: HTMLElementTagNameMap[K]) => unknown;
+    callback?: (node: HTMLElementTagNameMap[K]) => void | HTMLElementTagNameMap[K] | (() => void);
     class?: ClassItem[] | string;
     style?: RawStyleProps | string;
     "vasille:slot"?: VasilleSlot;
-} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<EventHandlers<HtmlTagMap[K]["events"]>, "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "bind:">>;
+} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<EventHandlers<HtmlTagMap[K]["events"]>, "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "property:">>;
 export declare namespace JSX {
     type ElementType = keyof IntrinsicElements | ((props: any) => void);
     type Element = VasilleElement;

package/types/spec/html.d.ts

@@ -28,6 +28,7 @@ export interface TagAttrs {
     lang: string;
     nonce: string;
     part: string;
+    role: string;
     slot: string;
     spellcheck: "true" | "false" | "" | boolean;
     tabindex: number;
@@ -132,6 +133,7 @@ interface ImgAttrs extends TagAttrs {
     referrerpolicy: string;
     decoding: string;
     loading: string;
+    fetchpriority: string;
 }
 interface IframeAttrs extends TagAttrs {
     src: string;