@fruit-ui/core 1.1.0 → 1.2.0

package/README.md

@@ -51,6 +51,7 @@ FRUIT's features include:
 - Keys to preserve state among re-ordered siblings
 - An on-mount listener and handler methods
 - Bindings to elements within components
+- "Memo" options to make child components rerender conditionally
 
 with all special functional features (state, controlled rerendering, bindings) accessed through the `this` argument.
 
@@ -63,16 +64,15 @@ Smaller apps don't always warrant heavyweight frameworks, but interfacing with t
 ## Getting started
 
 There are three ways to use FRUIT in your projects:
-- Download and copy the [Terser-compressed JS file](https://github.com/asantagata/fruit-ui/blob/main/dist/index.js) file into your project. (This is a compressed version built with Terser; you can just as well use the [non-compressed version](https://github.com/asantagata/fruit-ui/blob/main/src/index.js) which uses JSDoc annotations.) Then you can use `import { create, replaceWith, appendChild, insertBefore } from "./modules/fruit.js"` or `<script type="module" src="./modules/fruit.js">` to access FRUIT in your JS apps.
-- Access via browser loading, i.e., `import { create, replaceWith, appendChild, insertBefore } from "https://cdn.jsdelivr.net/npm/@fruit-ui/core@latest/src/index.js"`.
-- With NPM installed, run `npm install @fruit-ui/core`. Then use `import { create, replaceWith, appendChild, insertBefore } from "@fruit-ui/core"`.
+- Download and copy the [Terser-compressed JS file](https://github.com/asantagata/fruit-ui/blob/main/dist/index.js) file into your project. (This is a compressed version built with Terser; you can just as well use the [non-compressed version](https://github.com/asantagata/fruit-ui/blob/main/src/index.js) which uses JSDoc annotations.) Then you can use `import \* as fruit from "./modules/fruit.js"` or `<script type="module" src="./modules/fruit.js">` to access FRUIT in your JS apps.
+- Access via browser loading, i.e., `import \* as fruit from "https://cdn.jsdelivr.net/npm/@fruit-ui/core@latest/src/index.js"`.
+- With NPM installed, run `npm install @fruit-ui/core`. Then use `import \* as fruit from "@fruit-ui/core"`.
 
 ## Contributing
 
 Ongoing development on FRUIT focuses on:
 - Thorough, interactive, user-facing documentation (available [here](https://asantagata.github.io/fruit-ui/))
-- Benchmarks to compare against other JS frameworks
-- A "useMemo" equivalent
+- Benchmarks against other JS frameworks
 - Basic built-in components
 
 This project's initial release is currently not yet finished, so contributions aren't currently being sought out.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fruit-ui/core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A vanilla JS toolkit for reactive UI",
   "main": "src/index.js",
   "homepage": "https://asantagata.github.io/fruit-ui/",

package/src/index.js

@@ -734,7 +734,7 @@ function create(elementable, includeOnMounts = false) {
 function replaceWith(element, elementable) {
     const {element: newElement, onMounts} = create(elementable, true);
     element.replaceWith(newElement);
-    onMounts.forEach(om => om());
+    handleOnMounts(onMounts);
 }
 
 /**
@@ -745,7 +745,7 @@ function replaceWith(element, elementable) {
 function appendChild(element, elementable) {
     const {element: newElement, onMounts} = create(elementable, true);
     element.appendChild(newElement);
-    onMounts.forEach(om => om());
+    handleOnMounts(onMounts);
 }
 
 /**
@@ -757,7 +757,15 @@ function appendChild(element, elementable) {
 function insertBefore(parentElement, nextSiblingElement, elementable) {
     const {element: newElement, onMounts} = create(elementable, true);
     parentElement.insertBefore(newElement, nextSiblingElement);
+    handleOnMounts(onMounts);
+}
+
+/**
+ * Handles onMounts functions returned by `create` with `includeOnMounts = true`.
+ * @param {Function[]} onMounts 
+ */
+function handleOnMounts(onMounts) {
     onMounts.forEach(om => om());
 }
 
-export { create, replaceWith, appendChild, insertBefore };
+export { create, replaceWith, appendChild, insertBefore, handleOnMounts };