veles 0.0.8 → 0.0.9

package/README.md

@@ -4,7 +4,7 @@
 [![Build Size](https://img.shields.io/bundlephobia/minzip/veles?label=bundle%20size)](https://bundlephobia.com/result?p=veles)
 [![Version](https://img.shields.io/npm/v/veles)](https://www.npmjs.com/package/veles)
 
-> This library is very early stages, so the API is not 100% finalized
+> This library is still in early stages, so the API is not 100% finalized
 
 `Veles` is a component-based performance-focused UI library. The main goal of this library is to provide a composable way to build highly interactive interfaces, which should be performant out of the box, as long as you follow the recommendations.
 
@@ -12,7 +12,7 @@
 
 This library's primary focus is in performance. What this means is that it allows you to write your code in a way which will ensure that when the data in your app changes, only the smallest relevant parts will update. Despite of similarities with React in syntax, it does not follow the same waterfall style for component re-renders. Instead, it gives you API to subscribe to atomic changes in your tracked state and re-render only parts of the UI which actually depend on the value. Internally, it renders new HTML and replaces the old node. A similar approach is done for attributes, where in case of changes, only the relevant attribute will be updated in place, but nothing else will change.
 
-It is important to note that the performance benefits will only be observed (and relevant as well) in case of a pretty high interactivity. It might not be faster than any other UI framework on the first render, the biggest improvement lies in the power of subscribing to individual changes.
+It is important to note that the performance benefits will only be observed (and relevant as well) in case of a pretty high interactivity. It might not be faster than any other UI framework on the first render, the biggest improvement lies in the power of subscribing to individual changes, which is especially powerful in case of lists.
 
 ## Installation
 
@@ -51,10 +51,11 @@ This will render an input and will update the Text node dynamically, without re-
 
 - [Getting started](https://bloomca.github.io/veles/)
 - [API docs](https://bloomca.github.io/veles/api/)
+- [Guides](https://bloomca.github.io/veles/guides/)
 - [Differences from other frameworks](https://bloomca.github.io/veles/frameworks-difference.html)
 
 There also a companion app ([veles-calendar-app](https://github.com/Bloomca/veles-calendar-app)), which is developed using Veles and is supposed to push it to the limits, identify the issues and ideally improve performance even more.
 
 ### Features
 
-The library is under development, so some features are not available yet, namely Context and Portals.
+The library is under development, so some features are not available yet. Namely the TypeScript type inferring is not the best (although the library does support TypeScript), and Portals are not implemented yet.

package/dist/{chunk-4QXZSBVZ.js → chunk-2KPVWPOL.js}

@@ -141,10 +141,7 @@ function assignAttribute({
     // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
     typeof value === "function" && key.startsWith("on")
   ) {
-    htmlElement.addEventListener(
-      key[2].toLocaleLowerCase() + key.slice(3),
-      value
-    );
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
   } else {
     if (typeof value === "boolean") {
       if (value)

package/dist/{chunk-GVPFIZZW.js → chunk-VW64LMPA.js}

@@ -5,7 +5,7 @@ import {
   executeComponent,
   onMount,
   onUnmount
-} from "./chunk-4QXZSBVZ.js";
+} from "./chunk-2KPVWPOL.js";
 
 // src/context/index.ts
 var publicContextStack = [];
@@ -481,7 +481,7 @@ function updateUseAttributeValue({
     if (attributeValue === newAttributeValue) {
       return;
     }
-    const eventName = attributeName[2].toLocaleLowerCase() + attributeName.slice(3);
+    const eventName = attributeName.slice(2).toLocaleLowerCase();
     if (attributeValue) {
       htmlElement.removeEventListener(eventName, attributeValue);
     }

package/dist/{index-BOpDMzdf.d.cts → index-BkD2Za6F.d.cts}

@@ -55,6 +55,15 @@ type State<ValueType> = {
   ): void;
 };
 
+/**
+ * Main state factory function.
+ *
+ * This primitive is pretty much a simple observable implementation,
+ * which is tightly integrated with the UI framework for two things:
+ *
+ * - based on subscription callback, update DOM node and replace it
+ * - correctly unsbuscribe when the Node/component is unmounted
+ */
 declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
 
 export { type State as S, createState as c };

package/dist/{index-BA0L7WRK.d.ts → index-DBdVF_11.d.ts}

@@ -55,6 +55,15 @@ type State<ValueType> = {
   ): void;
 };
 
+/**
+ * Main state factory function.
+ *
+ * This primitive is pretty much a simple observable implementation,
+ * which is tightly integrated with the UI framework for two things:
+ *
+ * - based on subscription callback, update DOM node and replace it
+ * - correctly unsbuscribe when the Node/component is unmounted
+ */
 declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
 
 export { type State as S, createState as c };

package/dist/index.cjs

@@ -244,10 +244,7 @@ function assignAttribute({
     // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
     typeof value === "function" && key.startsWith("on")
   ) {
-    htmlElement.addEventListener(
-      key[2].toLocaleLowerCase() + key.slice(3),
-      value
-    );
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
   } else {
     if (typeof value === "boolean") {
       if (value)
@@ -800,7 +797,7 @@ function updateUseAttributeValue({
     if (attributeValue === newAttributeValue) {
       return;
     }
-    const eventName = attributeName[2].toLocaleLowerCase() + attributeName.slice(3);
+    const eventName = attributeName.slice(2).toLocaleLowerCase();
     if (attributeValue) {
       htmlElement.removeEventListener(eventName, attributeValue);
     }

package/dist/index.d.cts

@@ -1,7 +1,14 @@
 import { V as VelesElement, a as VelesComponentObject, c as VelesChildren } from './types.d-CjiJHqth.cjs';
 export { Fragment, jsx as createElement } from './jsx-runtime.cjs';
-export { S as State, c as createState } from './index-BOpDMzdf.cjs';
+export { S as State, c as createState } from './index-BkD2Za6F.cjs';
 
+/**
+ * Attach Veles component tree to a regular HTML node.
+ * Right now it will wrap the app into an additional `<div>` tag.
+ *
+ * It returns a function which when executed, will remove the Veles
+ * tree from DOM and remove all subscriptions.
+ */
 declare function attachComponent({ htmlElement, component, }: {
     htmlElement: HTMLElement;
     component: VelesElement | VelesComponentObject;
@@ -10,6 +17,11 @@ declare function attachComponent({ htmlElement, component, }: {
 declare function onMount(cb: () => void | Function): void;
 declare function onUnmount(cb: Function): void;
 
+/**
+ * Create a reference which has special treatment if passed as
+ * ref={ref} to any DOM Node. `ref.current` will contain the
+ * rendered node, even if it changes.
+ */
 declare function createRef<T>(initialRefValue?: T | null): {
     velesRef: true;
     current: T | null;

package/dist/index.d.ts

@@ -1,7 +1,14 @@
 import { V as VelesElement, a as VelesComponentObject, c as VelesChildren } from './types.d-CjiJHqth.js';
 export { Fragment, jsx as createElement } from './jsx-runtime.js';
-export { S as State, c as createState } from './index-BA0L7WRK.js';
+export { S as State, c as createState } from './index-DBdVF_11.js';
 
+/**
+ * Attach Veles component tree to a regular HTML node.
+ * Right now it will wrap the app into an additional `<div>` tag.
+ *
+ * It returns a function which when executed, will remove the Veles
+ * tree from DOM and remove all subscriptions.
+ */
 declare function attachComponent({ htmlElement, component, }: {
     htmlElement: HTMLElement;
     component: VelesElement | VelesComponentObject;
@@ -10,6 +17,11 @@ declare function attachComponent({ htmlElement, component, }: {
 declare function onMount(cb: () => void | Function): void;
 declare function onUnmount(cb: Function): void;
 
+/**
+ * Create a reference which has special treatment if passed as
+ * ref={ref} to any DOM Node. `ref.current` will contain the
+ * rendered node, even if it changes.
+ */
 declare function createRef<T>(initialRefValue?: T | null): {
     velesRef: true;
     current: T | null;

package/dist/index.js

@@ -5,13 +5,13 @@ import {
   createState,
   getExecutedComponentVelesNode,
   renderTree
-} from "./chunk-GVPFIZZW.js";
+} from "./chunk-VW64LMPA.js";
 import {
   Fragment,
   createElement,
   onMount,
   onUnmount
-} from "./chunk-4QXZSBVZ.js";
+} from "./chunk-2KPVWPOL.js";
 
 // src/attach-component.ts
 function attachComponent({

package/dist/jsx-runtime.cjs

@@ -143,10 +143,7 @@ function assignAttribute({
     // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
     typeof value === "function" && key.startsWith("on")
   ) {
-    htmlElement.addEventListener(
-      key[2].toLocaleLowerCase() + key.slice(3),
-      value
-    );
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
   } else {
     if (typeof value === "boolean") {
       if (value)

package/dist/jsx-runtime.js

@@ -1,7 +1,7 @@
 import {
   Fragment,
   createElement
-} from "./chunk-4QXZSBVZ.js";
+} from "./chunk-2KPVWPOL.js";
 export {
   Fragment,
   createElement as jsx,

package/dist/utils/index.cjs

@@ -240,10 +240,7 @@ function assignAttribute({
     // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
     typeof value === "function" && key.startsWith("on")
   ) {
-    htmlElement.addEventListener(
-      key[2].toLocaleLowerCase() + key.slice(3),
-      value
-    );
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
   } else {
     if (typeof value === "boolean") {
       if (value)
@@ -742,7 +739,7 @@ function updateUseAttributeValue({
     if (attributeValue === newAttributeValue) {
       return;
     }
-    const eventName = attributeName[2].toLocaleLowerCase() + attributeName.slice(3);
+    const eventName = attributeName.slice(2).toLocaleLowerCase();
     if (attributeValue) {
       htmlElement.removeEventListener(eventName, attributeValue);
     }

package/dist/utils/index.d.cts

@@ -1,4 +1,4 @@
-import { c as createState } from '../index-BOpDMzdf.cjs';
+import { c as createState } from '../index-BkD2Za6F.cjs';
 import '../types.d-CjiJHqth.cjs';
 
 type createdState<StateType> = ReturnType<typeof createState<StateType>>;

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { c as createState } from '../index-BA0L7WRK.js';
+import { c as createState } from '../index-DBdVF_11.js';
 import '../types.d-CjiJHqth.js';
 
 type createdState<StateType> = ReturnType<typeof createState<StateType>>;

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 import {
   createState
-} from "../chunk-GVPFIZZW.js";
-import "../chunk-4QXZSBVZ.js";
+} from "../chunk-VW64LMPA.js";
+import "../chunk-2KPVWPOL.js";
 
 // src/utils/combine-state.ts
 function combineState(...states) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "UI library with main focus on performance",
   "type": "module",
   "main": "dist/index.js",