spark-html-devtools 0.1.0 → 0.1.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/package.json +3 -3
- package/src/index.js +8 -2
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spark-html-devtools",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "A tiny in-page devtools panel for spark-html
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "A tiny in-page devtools panel for spark-html \u2014 live store state, component tree, and patch activity.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.js",
|
|
7
7
|
"types": "./src/index.d.ts",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"directory": "packages/spark-html-devtools"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"spark-html": "^0.
|
|
27
|
+
"spark-html": "^0.22.0"
|
|
28
28
|
},
|
|
29
29
|
"keywords": [
|
|
30
30
|
"spark-html",
|
package/src/index.js
CHANGED
|
@@ -85,6 +85,7 @@ export function devtools(options = {}) {
|
|
|
85
85
|
[data-spark-devtools] .sdt-sec{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#666;margin:12px 0 6px}
|
|
86
86
|
[data-spark-devtools] .sdt-item{border-left:2px solid #1a1a1a;padding:2px 0 2px 10px;margin:4px 0}
|
|
87
87
|
[data-spark-devtools] .sdt-name{color:${AMBER}}
|
|
88
|
+
[data-spark-devtools] .sdt-badge{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#0c0c0c;background:${AMBER};border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:middle}
|
|
88
89
|
[data-spark-devtools] pre{margin:2px 0 0;white-space:pre-wrap;color:#aaa;font-size:11px}
|
|
89
90
|
.sdt-flash{outline:1px solid ${AMBER} !important;outline-offset:-1px;transition:outline .15s}`;
|
|
90
91
|
document.head.appendChild(style);
|
|
@@ -100,8 +101,13 @@ export function devtools(options = {}) {
|
|
|
100
101
|
const stores = inspectStores();
|
|
101
102
|
const comps = components();
|
|
102
103
|
meta.textContent = `${comps.length} comp · ${patches} patches`;
|
|
103
|
-
const storeRows = Object.keys(stores).map((n) =>
|
|
104
|
-
|
|
104
|
+
const storeRows = Object.keys(stores).map((n) => {
|
|
105
|
+
// Stores tag their kind (store | derived | query) with a global-registry
|
|
106
|
+
// symbol — surface it as a small badge so derived/query state is legible.
|
|
107
|
+
const kind = stores[n] && stores[n][Symbol.for('spark.storeKind')];
|
|
108
|
+
const badge = kind && kind !== 'store' ? ` <span class="sdt-badge">${esc(kind)}</span>` : '';
|
|
109
|
+
return `<div class="sdt-item"><span class="sdt-name">${esc(n)}</span>${badge}<pre>${esc(safe(stores[n]))}</pre></div>`;
|
|
110
|
+
}).join('') || '<div class="sdt-item">—</div>';
|
|
105
111
|
const compRows = comps.map((c) =>
|
|
106
112
|
`<div class="sdt-item"><span class="sdt-name">${esc(c.name)}</span><pre>${esc(safe(c.state))}</pre></div>`).join('') || '<div class="sdt-item">—</div>';
|
|
107
113
|
panelBody.innerHTML =
|