@arundeep_bhardwaj/r-lite 1.0.2 → 1.0.5

package/index.js

@@ -1,80 +1,3 @@
-import { h, render } from "./r_lite/core.js";
-import { useState, useEffect } from "./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"));
+// index.js (library entry)
+export { h, render } from "./core.js";
+export { useState, useEffect } from "./hooks.js";

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@arundeep_bhardwaj/r-lite",
-  "version": "1.0.2",
-  "description": "A lightweight UI library for micro-frontend architectures",
+  "version": "1.0.5",
+  "description": "A lightweight React-like UI library for micro-frontend architectures",
   "type": "module",
   "main": "index.js",
+  "files": [
+    "index.js",
+    "core.js",
+    "hooks.js"
+  ],
   "keywords": [
     "ui",
     "react",
     "hooks",
     "micro-frontend",
-    "frontend",
     "framework",
     "lightweight"
   ],

package/index.css

@@ -1,155 +0,0 @@
-
-* {
-  box-sizing: border-box;
-  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-body {
-  margin: 0;
-  background: radial-gradient(circle at top, #020617, #020617 60%);
-  color: #e5e7eb;
-  min-height: 100vh;
-}
-
-
-.app-container {
-  max-width: 1200px;
-  margin: auto;
-  padding: 32px 20px 80px;
-}
-
-
-.header {
-  margin-bottom: 56px;
-}
-
-.header h1 {
-  font-size: 3rem;
-  font-weight: 800;
-  letter-spacing: -1px;
-  margin-bottom: 10px;
-  background: linear-gradient(90deg, #49acd6, #60a5fa);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.tagline {
-  max-width: 700px;
-  font-size: 1.05rem;
-  color: #f2f3f4;
-  line-height: 1.6;
-}
-
-/* badges */
-.badges {
-  margin-top: 18px;
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.badges span {
-  padding: 6px 14px;
-  border-radius: 999px;
-  background: rgba(56, 189, 248, 0.12);
-  color: #38bdf8;
-  font-size: 0.85rem;
-  border: 1px solid rgba(56, 189, 248, 0.35);
-  backdrop-filter: blur(6px);
-}
-
-
-.card {
-  background:
-    linear-gradient(
-      145deg,
-      rgba(38, 52, 120, 0.85),
-      rgba(15, 23, 42, 0.95)
-    );
-
-  border-radius: 18px;
-  padding: 24px;
-  margin-bottom: 48px;
-
-  border: 1px solid rgba(148, 163, 184, 0.18);
-
-  box-shadow:
-    0 20px 45px rgba(0, 0, 0, 0.55),
-    0 6px 14px rgba(56, 189, 248, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-
-
-.card h2 {
-  margin-top: 0;
-  font-size: 1.4rem;
-}
-
-
-.card button {
-  margin-top: 16px;
-  padding: 10px 20px;
-  font-weight: 600;
-  border-radius: 10px;
-  border: none;
-  cursor: pointer;
-
-  background: linear-gradient(135deg, #ebcf1a, #ead308);
-  color: #020617;
-
-  box-shadow:
-    0 8px 20px rgba(206, 181, 39, 0.45),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-
-.card button:hover {
-  box-shadow:
-    0 12px 26px rgba(234, 170, 33, 0.6),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7);
-}
-
-.users-section {
-  margin-bottom: 48px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
-}
-
-
-.user-card {
-  background: rgba(2, 6, 23, 0.85);
-  border-radius: 14px;
-  padding: 18px;
-  border: 1px solid rgba(148, 163, 184, 0.12);
-
-  box-shadow:
-    0 10px 24px rgba(0, 0, 0, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
-}
-
-
-.user-card h3 {
-  margin: 0 0 8px;
-  font-size: 1.05rem;
-  color: #38bdf8;
-}
-
-.user-card p {
-  margin: 4px 0;
-  font-size: 0.9rem;
-  color: #cbd5f5;
-}
-
-.card ul {
-  margin-top: 12px;
-  padding-left: 18px;
-}
-
-.card li {
-  margin: 6px 0;
-  color: #cbd5f5;
-}

package/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>R_lite</title>
-    <link rel="stylesheet" href="./index.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>