Add UseParent atom and Comment component; update README

README.md

@@ -207,6 +207,20 @@ The callback function will be called when the data property changes. The callbac
 }
 ```
 
+### Use Parent Atom
+
+The UseParent atom allows for the parent component to be accessed in a child atom. This atom is useful when a child atom needs to access the parent component.
+
+```javascript
+UseParent((parent) =>
+{
+    // access the parent component
+    return Div({
+        class: parent.state.loaded ? 'loaded' : 'loading'
+    });
+})
+```
+
 ## Contributing
 
 Contributions to Base Framework are welcome. Follow these steps to contribute:

src/atoms.js

@@ -1,6 +1,7 @@
 import { Atom } from '@base-framework/base';
 import { On, OnRoute, OnState } from './on/on.js';
-export { On, OnRoute, OnState };
+import { UseParent } from './use/use.js';
+export { On, OnRoute, OnState, UseParent };
 
 /**
  * Creates a generic HTML tag.

src/comment.js

@@ -0,0 +1,11 @@
+/**
+ * This will create a comment.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const Comment = (props) => ({
+    tag: 'comment',
+    textContent: `${props.type} placeholder`,
+    onCreated: props.onCreated
+});

src/on/on.js

@@ -1,4 +1,5 @@
 import { Builder, dataBinder } from "@base-framework/base";
+import { Comment as BaseComment } from "src/comment.js";
 
 /**
  * This will set a previous result.
@@ -111,9 +112,8 @@ const updateLayout = (callBack, ele, prop, parent) =>
  * @param {object} props
  * @returns {object}
  */
-const Comment = (props) => ({
-    tag: 'comment',
-    textContent: 'on placeholder',
+const Comment = (props) => BaseComment({
+    type: 'on',
     onCreated: props.onCreated
 });
 

src/use/use.js

@@ -0,0 +1,72 @@
+import { Builder } from "@base-framework/base";
+import { Comment as BaseComment } from "src/comment.js";
+
+/**
+ * This will set up the update layout function.
+ *
+ * @param {function} callBack
+ * @param {object} ele
+ * @param {object} parent
+ * @returns {function}
+ */
+const updateLayout = (callBack, ele, parent) =>
+{
+    const layout = callBack(parent);
+    if (typeof layout === "undefined")
+    {
+        return;
+    }
+
+    /**
+     * This will build the layout and insert it after the
+     * comment element.
+     */
+    const frag = Builder.build(layout, null, parent);
+    ele.parentNode.insertBefore(frag, ele.nextSibling);
+};
+
+/**
+ * This will create a comment.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+const Comment = (props) => BaseComment({
+    type: 'use',
+    onCreated: props.onCreated
+});
+
+/**
+ * This will create a use parent tag.
+ *
+ * @overload
+ * @param {object} data
+ * @param {string} prop
+ * @param {function} callBack
+ *
+ * @overload
+ * @param {string} prop
+ * @param {function} callBack
+ *
+ * @returns {object}
+ */
+export const UseParent = (...args) =>
+{
+    const settings = [...args];
+    const callBack = settings.pop();
+    if (typeof callBack !== 'function')
+    {
+        return;
+    }
+
+    /**
+     * This will create a comment to use as a placeholder
+     * to keep the layout in place.
+     */
+    return Comment({
+        onCreated: (ele, parent) =>
+        {
+            updateLayout(callBack, ele, parent);
+        }
+    });
+};