skull-dom 1.0.0 → 1.0.1
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/README.md +7 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# 💀
|
|
1
|
+
# 💀 SkullDOM
|
|
2
2
|
> **Automagic skeleton screens for any framework.**
|
|
3
3
|
> Zero config. Zero manual styles. Just robust, layout-aware loading states.
|
|
4
4
|
|
|
5
|
-
## Why
|
|
5
|
+
## Why SkullDOM?
|
|
6
6
|
|
|
7
7
|
Most skeleton libraries require you to manually build "skeleton versions" of your components. You end up maintaining two UIs: the real one and the fake one.
|
|
8
8
|
|
|
9
|
-
**
|
|
9
|
+
**SkullDOM is different.**
|
|
10
10
|
It looks at your **existing DOM**, infers its layout (text, images, grids, flex), and overlays a pixel-perfect skeleton on top of it.
|
|
11
11
|
|
|
12
12
|
- **Framework Agnostic:** First-class adapters for React, Vue, Svelte, Solid, and Vanilla.
|
|
@@ -39,7 +39,7 @@ Add attributes to your HTML. No JS required.
|
|
|
39
39
|
<!-- 2. Toggle the attribute when loading -->
|
|
40
40
|
<div data-skeleton="loading">
|
|
41
41
|
<h1>My Content</h1>
|
|
42
|
-
<p>
|
|
42
|
+
<p>SkullDOM will infer this text structure and cover it.</p>
|
|
43
43
|
</div>
|
|
44
44
|
```
|
|
45
45
|
|
|
@@ -110,7 +110,7 @@ import { skeleton } from 'skull-dom/solid';
|
|
|
110
110
|
|
|
111
111
|
## 🧠 How it Works
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
SkullDOM operates on a simple "Overlay" mental model:
|
|
114
114
|
|
|
115
115
|
1. **Probe:** It scans your target DOM element and measures computed styles (width, height, margin, padding, line-height, etc.).
|
|
116
116
|
2. **Infer:** It creates a lightweight tree representation of what matters (Text lines? Block? Flex group?).
|
|
@@ -118,7 +118,7 @@ AutoSkeleton operates on a simple "Overlay" mental model:
|
|
|
118
118
|
4. **Overlay:** It sets your original element to `visibility: hidden` and absolutely positions the skeleton layer directly on top of it.
|
|
119
119
|
|
|
120
120
|
### Important: You need content!
|
|
121
|
-
Because
|
|
121
|
+
Because SkullDOM **infers** from your DOM, your elements need to exist in the DOM (even if empty).
|
|
122
122
|
* ✅ **Good:** Render your component with empty strings or optional chaining.
|
|
123
123
|
* ❌ **Bad:** `if (loading) return null;` (There is nothing to infer!)
|
|
124
124
|
|
|
@@ -156,7 +156,7 @@ cleanup();
|
|
|
156
156
|
```
|
|
157
157
|
|
|
158
158
|
### Styling
|
|
159
|
-
Currently,
|
|
159
|
+
Currently, SkullDOM injects a default gray theme (`#d1d5db` base, `#9ca3af` text lines) with a modest border radius.
|
|
160
160
|
Future versions will expose CSS variables for theming.
|
|
161
161
|
|
|
162
162
|
---
|