@tripod311/splash 0.0.4 → 0.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/README.md +43 -1
- package/dist/component.js +6 -6
- package/dist/component.js.map +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/templateCache.d.ts +9 -1
- package/dist/templateCache.d.ts.map +1 -1
- package/dist/templateCache.js +63 -1
- package/dist/templateCache.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -168,7 +168,49 @@ this.slots["mySlot"].setContent([child]);
|
|
|
168
168
|
|
|
169
169
|
---
|
|
170
170
|
|
|
171
|
-
### 3.
|
|
171
|
+
### 3. Drops
|
|
172
|
+
|
|
173
|
+
Drops are lightweight HTML snippets stored in the `TemplateCache`.
|
|
174
|
+
They are not components: no state, no lifecycle, no reactivity.
|
|
175
|
+
Instead, they allow you to register small reusable pieces of HTML with the same directives (`data-ref`, `data-text`, `data-html`, `data-class`, `data-style`, `data-prop-*`).
|
|
176
|
+
|
|
177
|
+
A drop can be **instantiated** at any moment, filled with values, and mounted into the DOM as a regular element.
|
|
178
|
+
|
|
179
|
+
**Example template registration:**
|
|
180
|
+
```ts
|
|
181
|
+
TemplateCache.registerDrop("chatMessage", `
|
|
182
|
+
<div class="msg">
|
|
183
|
+
<span data-ref="author" data-text="author"></span>
|
|
184
|
+
<p data-ref="text" data-html="text"></p>
|
|
185
|
+
</div>
|
|
186
|
+
`);
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
**Creating a drop**
|
|
190
|
+
```ts
|
|
191
|
+
const drop = TemplateCache.createDrop("chatMessage", {
|
|
192
|
+
author: "Alice",
|
|
193
|
+
text: "<b>Hello!</b>"
|
|
194
|
+
});
|
|
195
|
+
|
|
196
|
+
// Access refs
|
|
197
|
+
console.log(drop.refs.author.innerText); // "Alice"
|
|
198
|
+
|
|
199
|
+
// Insert into DOM
|
|
200
|
+
document.body.appendChild(drop.node);
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
**Drop interface**
|
|
204
|
+
```ts
|
|
205
|
+
export interface Drop {
|
|
206
|
+
node: Node; // the root DOM node
|
|
207
|
+
refs: Record<string, HTMLElement>; // all elements with data-ref
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
### 4. Mounting & Unmounting
|
|
172
214
|
|
|
173
215
|
To place a component on the page you can use the `mount` method:
|
|
174
216
|
|
package/dist/component.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import TemplateCache from "./templateCache.js";
|
|
1
|
+
import { TemplateCache } from "./templateCache.js";
|
|
2
2
|
import { ComponentState } from "./componentState.js";
|
|
3
3
|
import ReactiveText from "./reactives/reactiveText.js";
|
|
4
4
|
import ReactiveHTML from "./reactives/reactiveHTML.js";
|
|
@@ -45,19 +45,19 @@ export default class Component {
|
|
|
45
45
|
else if (root.nodeType === Node.ELEMENT_NODE) {
|
|
46
46
|
const element = root;
|
|
47
47
|
for (const attr of Array.from(element.attributes)) {
|
|
48
|
-
if (attr.name
|
|
48
|
+
if (attr.name === "data-ref") {
|
|
49
49
|
this.refs[attr.value] = element;
|
|
50
50
|
}
|
|
51
|
-
if (attr.name
|
|
51
|
+
if (attr.name === "data-text") {
|
|
52
52
|
this.textReactives[attr.value] = new ReactiveText(element);
|
|
53
53
|
}
|
|
54
|
-
if (attr.name
|
|
54
|
+
if (attr.name === "data-html") {
|
|
55
55
|
this.htmlReactives[attr.value] = new ReactiveHTML(element);
|
|
56
56
|
}
|
|
57
|
-
if (attr.name
|
|
57
|
+
if (attr.name === "data-class") {
|
|
58
58
|
this.classReactives[attr.value] = new ReactiveClass(element);
|
|
59
59
|
}
|
|
60
|
-
if (attr.name
|
|
60
|
+
if (attr.name === "data-style") {
|
|
61
61
|
this.styleReactives[attr.value] = new ReactiveStyle(element);
|
|
62
62
|
}
|
|
63
63
|
if (attr.name.startsWith("data-prop-")) {
|
package/dist/component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Component from "./component.js";
|
|
2
2
|
import { ComponentState } from "./componentState.js";
|
|
3
3
|
import Slot from "./slot.js";
|
|
4
|
-
import TemplateCache from "./templateCache.js";
|
|
4
|
+
import { TemplateCache } from "./templateCache.js";
|
|
5
5
|
import ReactiveElement from "./reactiveElement.js";
|
|
6
6
|
import ReactiveText from "./reactives/reactiveText.js";
|
|
7
7
|
import ReactiveHTML from "./reactives/reactiveHTML.js";
|
|
@@ -9,6 +9,7 @@ import ReactiveStyle from "./reactives/reactiveStyle.js";
|
|
|
9
9
|
import ReactiveClass from "./reactives/reactiveClass.js";
|
|
10
10
|
import ReactiveProp from "./reactives/reactiveProp.js";
|
|
11
11
|
import type { StateListener } from "./componentState.js";
|
|
12
|
-
|
|
12
|
+
import type { Drop } from "./templateCache.js";
|
|
13
|
+
export type { StateListener, Drop };
|
|
13
14
|
export { Component, ComponentState, Slot, TemplateCache, ReactiveElement, ReactiveText, ReactiveHTML, ReactiveStyle, ReactiveClass, ReactiveProp };
|
|
14
15
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,aAAa,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,eAAe,MAAM,sBAAsB,CAAA;AAClD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,aAAa,MAAM,8BAA8B,CAAA;AACxD,OAAO,aAAa,MAAM,8BAA8B,CAAA;AACxD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAE9C,YAAY,EACX,aAAa,EACb,IAAI,EACJ,CAAA;AAED,OAAO,EACN,SAAS,EACT,cAAc,EACd,IAAI,EACJ,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Component from "./component.js";
|
|
2
2
|
import { ComponentState } from "./componentState.js";
|
|
3
3
|
import Slot from "./slot.js";
|
|
4
|
-
import TemplateCache from "./templateCache.js";
|
|
4
|
+
import { TemplateCache } from "./templateCache.js";
|
|
5
5
|
import ReactiveElement from "./reactiveElement.js";
|
|
6
6
|
import ReactiveText from "./reactives/reactiveText.js";
|
|
7
7
|
import ReactiveHTML from "./reactives/reactiveHTML.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,aAAa,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,eAAe,MAAM,sBAAsB,CAAA;AAClD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,aAAa,MAAM,8BAA8B,CAAA;AACxD,OAAO,aAAa,MAAM,8BAA8B,CAAA;AACxD,OAAO,YAAY,MAAM,6BAA6B,CAAA;AAUtD,OAAO,EACN,SAAS,EACT,cAAc,EACd,IAAI,EACJ,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,CAAA"}
|
package/dist/templateCache.d.ts
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface Drop {
|
|
2
|
+
node: HTMLElement;
|
|
3
|
+
refs: Record<string, HTMLElement>;
|
|
4
|
+
}
|
|
5
|
+
export declare class TemplateCache {
|
|
6
|
+
private static drops;
|
|
2
7
|
private static templates;
|
|
3
8
|
static compileTemplate(componentName: string, template: string): Node;
|
|
4
9
|
static getTemplate(componentName: string): Node | null;
|
|
10
|
+
static registerDrop(dropName: string, template: string): void;
|
|
11
|
+
static createDrop(dropName: string, fill: Record<string, any>): Drop | null;
|
|
12
|
+
private static fillDrop;
|
|
5
13
|
}
|
|
6
14
|
//# sourceMappingURL=templateCache.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templateCache.d.ts","sourceRoot":"","sources":["../src/templateCache.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"templateCache.d.ts","sourceRoot":"","sources":["../src/templateCache.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CAClC;AAED,qBAAa,aAAa;IACzB,OAAO,CAAC,MAAM,CAAC,KAAK,CAAmC;IACvD,OAAO,CAAC,MAAM,CAAC,SAAS,CAA4B;IAEpD,MAAM,CAAC,eAAe,CAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAYtE,MAAM,CAAC,WAAW,CAAE,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvD,MAAM,CAAC,YAAY,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAWvD,MAAM,CAAC,UAAU,CAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,IAAI;IAa5E,OAAO,CAAC,MAAM,CAAC,QAAQ;CAkDvB"}
|
package/dist/templateCache.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export
|
|
1
|
+
export class TemplateCache {
|
|
2
|
+
static drops = {};
|
|
2
3
|
static templates = {};
|
|
3
4
|
static compileTemplate(componentName, template) {
|
|
4
5
|
if (componentName in TemplateCache.templates) {
|
|
@@ -13,5 +14,66 @@ export default class TemplateCache {
|
|
|
13
14
|
static getTemplate(componentName) {
|
|
14
15
|
return TemplateCache.templates[componentName]?.cloneNode(true) || null;
|
|
15
16
|
}
|
|
17
|
+
static registerDrop(dropName, template) {
|
|
18
|
+
if (dropName in TemplateCache.drops) {
|
|
19
|
+
console.warn(`TemplateCache already contains drop with name ${dropName}`);
|
|
20
|
+
}
|
|
21
|
+
const root = document.createElement("div");
|
|
22
|
+
root.innerHTML = template;
|
|
23
|
+
const compiled = root.firstElementChild;
|
|
24
|
+
TemplateCache.drops[dropName] = compiled;
|
|
25
|
+
}
|
|
26
|
+
static createDrop(dropName, fill) {
|
|
27
|
+
if (TemplateCache.drops[dropName] === undefined)
|
|
28
|
+
return null;
|
|
29
|
+
const result = {
|
|
30
|
+
node: TemplateCache.drops[dropName].cloneNode(true),
|
|
31
|
+
refs: {}
|
|
32
|
+
};
|
|
33
|
+
TemplateCache.fillDrop(result, result.node, fill);
|
|
34
|
+
return result;
|
|
35
|
+
}
|
|
36
|
+
static fillDrop(drop, root, fill) {
|
|
37
|
+
if (root.nodeType !== Node.ELEMENT_NODE)
|
|
38
|
+
return;
|
|
39
|
+
const element = root;
|
|
40
|
+
for (const attr of Array.from(element.attributes)) {
|
|
41
|
+
if (attr.name === "data-ref") {
|
|
42
|
+
drop.refs[attr.value] = element;
|
|
43
|
+
}
|
|
44
|
+
if (attr.name === "data-text") {
|
|
45
|
+
if (fill[attr.value] !== undefined) {
|
|
46
|
+
element.innerText = fill[attr.value];
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (attr.name === "data-html") {
|
|
50
|
+
if (fill[attr.value] !== undefined) {
|
|
51
|
+
element.innerHTML = fill[attr.value];
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
if (attr.name === "data-class") {
|
|
55
|
+
if (fill[attr.value] !== undefined) {
|
|
56
|
+
element.className = fill[attr.value].join(' ');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (attr.name === "data-style") {
|
|
60
|
+
if (fill[attr.value] !== undefined) {
|
|
61
|
+
const styles = fill[attr.value];
|
|
62
|
+
for (const key in styles) {
|
|
63
|
+
element.style.setProperty(key, styles[key].toString());
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
if (attr.name.startsWith("data-prop-")) {
|
|
68
|
+
const propName = attr.name.slice("data-prop-".length);
|
|
69
|
+
if (fill[attr.value] !== undefined) {
|
|
70
|
+
element.setAttribute(propName, fill[attr.value]);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
for (const child of Array.from(root.childNodes)) {
|
|
75
|
+
TemplateCache.fillDrop(drop, child, fill);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
16
78
|
}
|
|
17
79
|
//# sourceMappingURL=templateCache.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templateCache.js","sourceRoot":"","sources":["../src/templateCache.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"templateCache.js","sourceRoot":"","sources":["../src/templateCache.ts"],"names":[],"mappings":"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"}
|