hydro-js - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "hydro-js",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight reactive library",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -22,9 +22,15 @@ # hydro-js
 
-TODO after publishing
+- [Simple Counter](https://codesandbox.io/s/hydro-js-counter-mwpf4?file=/index.js)
+- [Two Way Data Binding](https://codesandbox.io/s/hydro-js-two-way-data-binding-observe-extpq?file=/index.js)
+- [Destructure Attributes](https://codesandbox.io/s/hydro-js-destructure-attributes-zhcx7?file=/index.js)
+- [Ternary](https://codesandbox.io/s/hydro-js-ternary-c01h2?file=/index.js)
+- [Promise Handling](https://codesandbox.io/s/hydro-js-promise-handling-eo90f?file=/index.js)
+- [Nested Reactivity](https://codesandbox.io/s/hydro-js-nested-reactivity-myjpt?file=/index.js)
+- [Nested Reactivity 2](https://codesandbox.io/s/hydro-js-nested-reactivity-6xy42?file=/index.js)
 
 ## Concept
 
-There are multiple things this library can use. The first thing is generating HTML from strings. This is mostly done by the `Range Web API`. There are already ways to do that, like `Element.insertAdjacentHTML()`, but this has some drawbacks, as it does not create some Table Elements, like `<colgroup>`, `<tbody>`, `<tfoot>`, `<thead>` and `<tr>`. Furthermore, the html function deals with inline events, objects, {{ Mustache }} etc. Using this function will feel like writing JSX without a build step.
+There are multiple things this library can do. The first thing is generating HTML from strings. This is mostly done by the `Range Web API`. There are already ways to do that, like `Element.insertAdjacentHTML()`, but this has some drawbacks, as it does not create some Table Elements, like `<colgroup>`, `<tbody>`, `<tfoot>`, `<thead>` and `<tr>`. Furthermore, the html function deals with inline events, objects, {{ Mustache }} etc. Using this function will feel like writing JSX without a build step.
 
-The render function is used for mounting and unmounting Elements to the DOM and for executing lifecycle Hooks. Optionally, it can diff both HTML Trees and reuse Elements (optionally too).
+The render function is used for mounting and unmounting Elements to the DOM and for executing lifecycle hooks. Optionally, it can diff both HTML Trees and reuse Elements (optionally too).
 
@@ -101,3 +107,4 @@ The functions calls for `render` and <em>DOM Updates</em> are queued and worked on during a browser's idle periods.
 
-Returns a Proxy object that can be used in `html`. The Proxy is a layer over a function that can set the value. Interally, the hydro Proxy is used and this reactive Proxy hides it's complexity.
+Returns a Proxy object that can be used in `html`. The Proxy is a layer over a function that can set the value. If the argument is a function, then the argument of the passed in function will be provided as the current value for the Proxy.
+Interally, the hydro Proxy is used and this reactive Proxy hides it's complexity.
 
@@ -104,0 +111,0 @@ ### observe

src/tests/index.ts

@@ -728,2 +728,4 @@ import {
         const unmount = render(video2, "#video");
+        setInsertDiffing(false);
+
         await sleep(150);
@@ -733,3 +735,2 @@
           unmount();
-          setInsertDiffing(false);
         });
@@ -736,0 +737,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136462

increased by0.57%

Number of lines in readme file

170

increased by4.29%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes