From f4f86dcfc515d9dd694b2117b1dce2fa209e41a7 Mon Sep 17 00:00:00 2001
From: nparashar150 <nparashar150@gmail.com>
Date: Thu, 6 Oct 2022 01:40:34 +0530
Subject: [PATCH] * Modify createElement as per jsx * Allow unused OwnReact
 imports

---
 .eslintrc.json                  | 9 ++++++++-
 lib/createElement.js            | 5 +++--
 public/js/own-react-bundle.js   | 2 +-
 src/components/button/button.js | 8 +++++---
 src/index.js                    | 4 ++--
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 32c2d0b..3d66310 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,7 +11,14 @@
     "indent": ["error", 2],
     "linebreak-style": 1,
     "react/react-in-jsx-scope": "off",
-    "quotes": ["error", "double"]
+    "quotes": ["error", "double"],
+    "no-unused-vars": [
+      "error",
+      {
+        // Allow unused variables that start with OwnReact
+        "varsIgnorePattern": "OwnReact"
+      }
+    ]
   },
   "parserOptions": {
     "ecmaVersion": 2021,
diff --git a/lib/createElement.js b/lib/createElement.js
index 1b19de5..595d18b 100644
--- a/lib/createElement.js
+++ b/lib/createElement.js
@@ -8,8 +8,9 @@ import { styleToString } from "./utils/styleToString";
  * @returns {HTMLElement}
  */
 export const createElement = (element, props = {}, ...children) => {
-  // create a new element
-  const _htmlElement = document?.createElement(element);
+  // create a new element with the given tagName
+  let _htmlElement =
+    typeof element === "string" ? document?.createElement(element) : element();
   // add the props to the element
   if (props && typeof props === "object" && Object.keys(props).length > 0) {
     Object.keys(props)?.map((propName) => {
diff --git a/public/js/own-react-bundle.js b/public/js/own-react-bundle.js
index 73b140d..c750f41 100644
--- a/public/js/own-react-bundle.js
+++ b/public/js/own-react-bundle.js
@@ -1 +1 @@
-(()=>{"use strict";const e=e=>0===Object.keys(e).length?"":Object.keys(e).reduce(((t,n)=>t+n.split(/(?=[A-Z])/).join("-").toLowerCase()+":"+e[n]+";"),""),t=(n,s={},l={},r=[],o=null)=>{const c=document?.createElement(n);return"object"==typeof s&&Object.keys(s).length>0&&Object.keys(s)?.map((t=>{t.includes("on")&&c.addEventListener(t.slice(2),s[t]),"classname"!==t.toLowerCase()&&"class"!==t||c.setAttribute("class",s[t]),"style"===t.toLowerCase()&&c.setAttribute("style",e(s[t])),c?.setAttribute(t,s[t])})),"object"==typeof l&&Object.keys(l).length>0&&(c.state={},c.state={...l}),o&&o instanceof HTMLElement&&o.appendChild(c),"string"==typeof r|"number"==typeof r|"boolean"==typeof r|void 0===r|null===r?c.innerHTML=r:r?.map((e=>{t({element:e?.element,props:e?.props,state:e?.state,children:e?.children,parentElement:c})})),c},n={createElement:t,styleToString:e,render:(e,t)=>{document.getElementById(t).appendChild(e)}};n.render((()=>n.createElement("div",null,"\n      ",n.createElement("h1",null,"My First Own React App"),"\n      ",n.createElement("p",null,"Lets see how it works"),"\n    ")),"root")})();
\ No newline at end of file
+(()=>{"use strict";var t=function(t){return 0===Object.keys(t).length?"":Object.keys(t).reduce((function(e,n){return e+n.split(/(?=[A-Z])/).join("-").toLowerCase()+":"+t[n]+";"}),"")};function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}const n=function(n){var o,l,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r="string"==typeof n?null===(o=document)||void 0===o?void 0:o.createElement(n):n();i&&"object"===e(i)&&Object.keys(i).length>0&&(null===(l=Object.keys(i))||void 0===l||l.map((function(e){e.includes("on")?r.addEventListener(e.slice(2),i[e]):"classname"===e.toLowerCase()?r.setAttribute("class",i[e]):"style"===e.toLowerCase()?r.setAttribute("style",t(i[e])):null==r||r.setAttribute(e,i[e])})));for(var u=arguments.length,s=new Array(u>2?u-2:0),c=2;c<u;c++)s[c-2]=arguments[c];return null==s||s.map((function(t){"string"==typeof t|"number"==typeof t|"boolean"==typeof t|void 0===t|null===t?r.innerHTML=t:r.appendChild(t)})),r};(function(t,e){document.getElementById(e).appendChild(t)})(n("div",{id:"root2"},n((function(t){return n("button",null,t)}),null,"Click me"),n("h1",null,"My First Own React App"),n("p",null,n("div",{className:"testing"},n("h1",null,"My First Own React App with custom Babel and Webpack config"),n("p",null,"This is another nesting level")))),"root")})();
\ No newline at end of file
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 74246aa..414420e 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,5 +1,7 @@
-const Button = () => {
-  return <button>Click Me</button>;
+import OwnReact from "../../../lib/index";
+
+const Button = (children) => {
+  return <button>{children}</button>;
 };
 
-export default Button;
\ No newline at end of file
+export default Button;
diff --git a/src/index.js b/src/index.js
index 3bc9e02..89ab213 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import OwnReact from "../lib/index";
-// import Button from "./components/button/button";
+import Button from "./components/button/button";
 
 const App = () => {
   return (
     <div id="root2">
+      <Button>Click me</Button>
       <h1>My First Own React App</h1>
-      {/* <Button /> */}
       <p>
         <div className="testing">
           <h1>My First Own React App with custom Babel and Webpack config</h1>