@arundeep_bhardwaj/r-lite 1.0.2 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -3
- package/index.css +0 -155
- package/index.html +0 -11
- package/r_lite/core.js +0 -45
- package/r_lite/hooks.js +0 -51
package/package.json
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arundeep_bhardwaj/r-lite",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A lightweight UI library for micro-frontend architectures",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "A lightweight React-like UI library for micro-frontend architectures",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"index.js",
|
|
9
|
+
"core.js",
|
|
10
|
+
"hooks.js"
|
|
11
|
+
],
|
|
7
12
|
"keywords": [
|
|
8
13
|
"ui",
|
|
9
14
|
"react",
|
|
10
15
|
"hooks",
|
|
11
16
|
"micro-frontend",
|
|
12
|
-
"frontend",
|
|
13
17
|
"framework",
|
|
14
18
|
"lightweight"
|
|
15
19
|
],
|
package/index.css
DELETED
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
* {
|
|
3
|
-
box-sizing: border-box;
|
|
4
|
-
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
body {
|
|
8
|
-
margin: 0;
|
|
9
|
-
background: radial-gradient(circle at top, #020617, #020617 60%);
|
|
10
|
-
color: #e5e7eb;
|
|
11
|
-
min-height: 100vh;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.app-container {
|
|
16
|
-
max-width: 1200px;
|
|
17
|
-
margin: auto;
|
|
18
|
-
padding: 32px 20px 80px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.header {
|
|
23
|
-
margin-bottom: 56px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.header h1 {
|
|
27
|
-
font-size: 3rem;
|
|
28
|
-
font-weight: 800;
|
|
29
|
-
letter-spacing: -1px;
|
|
30
|
-
margin-bottom: 10px;
|
|
31
|
-
background: linear-gradient(90deg, #49acd6, #60a5fa);
|
|
32
|
-
-webkit-background-clip: text;
|
|
33
|
-
-webkit-text-fill-color: transparent;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.tagline {
|
|
37
|
-
max-width: 700px;
|
|
38
|
-
font-size: 1.05rem;
|
|
39
|
-
color: #f2f3f4;
|
|
40
|
-
line-height: 1.6;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* badges */
|
|
44
|
-
.badges {
|
|
45
|
-
margin-top: 18px;
|
|
46
|
-
display: flex;
|
|
47
|
-
gap: 12px;
|
|
48
|
-
flex-wrap: wrap;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.badges span {
|
|
52
|
-
padding: 6px 14px;
|
|
53
|
-
border-radius: 999px;
|
|
54
|
-
background: rgba(56, 189, 248, 0.12);
|
|
55
|
-
color: #38bdf8;
|
|
56
|
-
font-size: 0.85rem;
|
|
57
|
-
border: 1px solid rgba(56, 189, 248, 0.35);
|
|
58
|
-
backdrop-filter: blur(6px);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
.card {
|
|
63
|
-
background:
|
|
64
|
-
linear-gradient(
|
|
65
|
-
145deg,
|
|
66
|
-
rgba(38, 52, 120, 0.85),
|
|
67
|
-
rgba(15, 23, 42, 0.95)
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
border-radius: 18px;
|
|
71
|
-
padding: 24px;
|
|
72
|
-
margin-bottom: 48px;
|
|
73
|
-
|
|
74
|
-
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
75
|
-
|
|
76
|
-
box-shadow:
|
|
77
|
-
0 20px 45px rgba(0, 0, 0, 0.55),
|
|
78
|
-
0 6px 14px rgba(56, 189, 248, 0.12),
|
|
79
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
.card h2 {
|
|
85
|
-
margin-top: 0;
|
|
86
|
-
font-size: 1.4rem;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
.card button {
|
|
91
|
-
margin-top: 16px;
|
|
92
|
-
padding: 10px 20px;
|
|
93
|
-
font-weight: 600;
|
|
94
|
-
border-radius: 10px;
|
|
95
|
-
border: none;
|
|
96
|
-
cursor: pointer;
|
|
97
|
-
|
|
98
|
-
background: linear-gradient(135deg, #ebcf1a, #ead308);
|
|
99
|
-
color: #020617;
|
|
100
|
-
|
|
101
|
-
box-shadow:
|
|
102
|
-
0 8px 20px rgba(206, 181, 39, 0.45),
|
|
103
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.card button:hover {
|
|
107
|
-
box-shadow:
|
|
108
|
-
0 12px 26px rgba(234, 170, 33, 0.6),
|
|
109
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.users-section {
|
|
113
|
-
margin-bottom: 48px;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.grid {
|
|
117
|
-
display: grid;
|
|
118
|
-
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
119
|
-
gap: 20px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
.user-card {
|
|
124
|
-
background: rgba(2, 6, 23, 0.85);
|
|
125
|
-
border-radius: 14px;
|
|
126
|
-
padding: 18px;
|
|
127
|
-
border: 1px solid rgba(148, 163, 184, 0.12);
|
|
128
|
-
|
|
129
|
-
box-shadow:
|
|
130
|
-
0 10px 24px rgba(0, 0, 0, 0.5),
|
|
131
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
.user-card h3 {
|
|
136
|
-
margin: 0 0 8px;
|
|
137
|
-
font-size: 1.05rem;
|
|
138
|
-
color: #38bdf8;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.user-card p {
|
|
142
|
-
margin: 4px 0;
|
|
143
|
-
font-size: 0.9rem;
|
|
144
|
-
color: #cbd5f5;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.card ul {
|
|
148
|
-
margin-top: 12px;
|
|
149
|
-
padding-left: 18px;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.card li {
|
|
153
|
-
margin: 6px 0;
|
|
154
|
-
color: #cbd5f5;
|
|
155
|
-
}
|
package/index.html
DELETED
package/r_lite/core.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { resetHooks, runEffects } from "./hooks.js";
|
|
2
|
-
|
|
3
|
-
let RootComponent = null;
|
|
4
|
-
let RootElement = null;
|
|
5
|
-
|
|
6
|
-
export function h(type, props = {}, ...children) {
|
|
7
|
-
return { type, props, children };
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function createDom(vnode) {
|
|
11
|
-
if (typeof vnode === "string" || typeof vnode === "number") {
|
|
12
|
-
return document.createTextNode(vnode);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
if (typeof vnode.type === "function") {
|
|
16
|
-
return createDom(vnode.type(vnode.props));
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const el = document.createElement(vnode.type);
|
|
20
|
-
|
|
21
|
-
Object.entries(vnode.props || {}).forEach(([key, value]) => {
|
|
22
|
-
el[key] = value;
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
vnode.children.forEach(child => {
|
|
26
|
-
el.appendChild(createDom(child));
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
return el;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export function render(App, container) {
|
|
33
|
-
RootComponent = App;
|
|
34
|
-
RootElement = container;
|
|
35
|
-
|
|
36
|
-
resetHooks();
|
|
37
|
-
container.innerHTML = "";
|
|
38
|
-
container.appendChild(createDom(App()));
|
|
39
|
-
|
|
40
|
-
runEffects();
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export function rerender() {
|
|
44
|
-
render(RootComponent, RootElement);
|
|
45
|
-
}
|
package/r_lite/hooks.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { rerender } from "./core.js";
|
|
2
|
-
|
|
3
|
-
let hooks = [];
|
|
4
|
-
let effects = [];
|
|
5
|
-
let index = 0;
|
|
6
|
-
|
|
7
|
-
export function resetHooks() {
|
|
8
|
-
index = 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export function useState(initialValue) {
|
|
12
|
-
const i = index;
|
|
13
|
-
|
|
14
|
-
hooks[i] = hooks[i] ?? initialValue;
|
|
15
|
-
|
|
16
|
-
const setState = value => {
|
|
17
|
-
hooks[i] =
|
|
18
|
-
typeof value === "function" ? value(hooks[i]) : value;
|
|
19
|
-
|
|
20
|
-
rerender();
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
index++;
|
|
24
|
-
return [hooks[i], setState];
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function useEffect(callback, deps) {
|
|
28
|
-
const i = index;
|
|
29
|
-
const oldDeps = hooks[i];
|
|
30
|
-
|
|
31
|
-
let hasChanged = true;
|
|
32
|
-
|
|
33
|
-
if (oldDeps) {
|
|
34
|
-
hasChanged = deps
|
|
35
|
-
? !deps.every((dep, j) => dep === oldDeps[j])
|
|
36
|
-
: true;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
if (hasChanged) {
|
|
40
|
-
effects.push(() => callback());
|
|
41
|
-
hooks[i] = deps;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
index++;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
export function runEffects() {
|
|
49
|
-
effects.forEach(effect => effect());
|
|
50
|
-
effects = [];
|
|
51
|
-
}
|