@arundeep_bhardwaj/r-lite 1.0.5 → 1.0.7

package/index.js

@@ -1,3 +1,80 @@
-// index.js (library entry)
-export { h, render } from "./core.js";
-export { useState, useEffect } from "./hooks.js";
+import { h, render } from "@arundeep_bhardwaj/r-lite/core.js";
+import { useState, useEffect } from "@arundeep_bhardwaj/r-lite/hooks.js";
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [users, setUsers] = useState([]);
+
+  // API CALL
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then(res => res.json())
+      .then(data => {
+        setUsers(data);
+      });
+  }, []);
+
+  return h(
+    "div",
+    { className: "app-container" },
+
+
+    h(
+      "header",
+      { className: "header" },
+      h("h1", null, "r_lite"),
+      h(
+        "p",
+        { className: "tagline" },
+        "A fast, lightweight UI library designed for micro-frontend architectures"
+      ),
+      h(
+        "div",
+        { className: "badges" },
+        h("span", null, "⚡ Fast"),
+        h("span", null, "📦 Lightweight"),
+        h("span", null, "🧩 Micro-Frontend Ready"),
+        h("span", null, "🧠 Hooks Based")
+      )
+    ),
+
+
+    h(
+      "section",
+      { className: "card" },
+      h("h2", null, "Counter Demo"),
+      h("p", null, `Current Count: ${count}`),
+      h(
+        "button",
+        { onclick: () => setCount(c => c + 1) },
+        "Increment"
+      )
+    ),
+
+
+    h(
+      "section",
+      { className: "users-section" },
+      h("h2", null, "Users (API Data)"),
+
+      h(
+        "div",
+        { className: "grid" },
+
+        ...users.map(user =>
+          h(
+            "div",
+            { className: "user-card", key: user.id },
+
+            h("h3", null, user.name),
+            h("p", null, `📧 ${user.email}`),
+            h("p", null, `🏙 ${user.address.city}`),
+            h("p", null, `📞 ${user.phone}`)
+          )
+        )
+      )
+    ),
+  );
+}
+
+render(App, document.getElementById("root"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arundeep_bhardwaj/r-lite",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A lightweight React-like UI library for micro-frontend architectures",
   "type": "module",
   "main": "index.js",
@@ -17,6 +17,12 @@
     "framework",
     "lightweight"
   ],
+  "scripts": {
+    "dev": "vite"
+  },
   "author": "Arundeep Bhardwaj",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "vite": "^7.3.1"
+  }
 }

package/core.js

@@ -1,45 +0,0 @@
-import { resetHooks, runEffects } from "./hooks.js";
-
-let RootComponent = null;
-let RootElement = null;
-
-export function h(type, props = {}, ...children) {
-  return { type, props, children };
-}
-
-function createDom(vnode) {
-  if (typeof vnode === "string" || typeof vnode === "number") {
-    return document.createTextNode(vnode);
-  }
-
-  if (typeof vnode.type === "function") {
-    return createDom(vnode.type(vnode.props));
-  }
-
-  const el = document.createElement(vnode.type);
-
-  Object.entries(vnode.props || {}).forEach(([key, value]) => {
-    el[key] = value;
-  });
-
-  vnode.children.forEach(child => {
-    el.appendChild(createDom(child));
-  });
-
-  return el;
-}
-
-export function render(App, container) {
-  RootComponent = App;
-  RootElement = container;
-
-  resetHooks();
-  container.innerHTML = "";
-  container.appendChild(createDom(App()));
-
-  runEffects();
-}
-
-export function rerender() {
-  render(RootComponent, RootElement);
-}

package/hooks.js

@@ -1,51 +0,0 @@
-import { rerender } from "./core.js";
-
-let hooks = [];
-let effects = [];
-let index = 0;
-
-export function resetHooks() {
-  index = 0;
-}
-
-export function useState(initialValue) {
-  const i = index;
-
-  hooks[i] = hooks[i] ?? initialValue;
-
-  const setState = value => {
-    hooks[i] =
-      typeof value === "function" ? value(hooks[i]) : value;
-
-    rerender();
-  };
-
-  index++;
-  return [hooks[i], setState];
-}
-
-export function useEffect(callback, deps) {
-  const i = index;
-  const oldDeps = hooks[i];
-
-  let hasChanged = true;
-
-  if (oldDeps) {
-    hasChanged = deps
-      ? !deps.every((dep, j) => dep === oldDeps[j])
-      : true;
-  }
-
-  if (hasChanged) {
-    effects.push(() => callback());
-    hooks[i] = deps;
-  }
-
-  index++;
-}
-
-
-export function runEffects() {
-  effects.forEach(effect => effect());
-  effects = [];
-}