@refrakt-md/behaviors 0.20.0 → 0.20.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/dist/elements/diagram.d.ts +22 -10
- package/dist/elements/diagram.d.ts.map +1 -1
- package/dist/elements/diagram.js +93 -16
- package/dist/elements/diagram.js.map +1 -1
- package/dist/elements/helpers.d.ts +6 -0
- package/dist/elements/helpers.d.ts.map +1 -1
- package/dist/elements/helpers.js +7 -2
- package/dist/elements/helpers.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,28 @@
|
|
|
1
1
|
import { SafeHTMLElement } from './ssr-safe.js';
|
|
2
|
-
/**
|
|
3
|
-
* <rf-diagram> — renders Mermaid diagrams or ASCII art.
|
|
4
|
-
*
|
|
5
|
-
* The postTransform hook produces:
|
|
6
|
-
* - data-language attribute (mermaid | ascii)
|
|
7
|
-
* - A visible <pre><code> fallback (SSR-friendly)
|
|
8
|
-
* - A hidden div with the raw source for the web component to read
|
|
9
|
-
*
|
|
10
|
-
* Progressive enhancement: <pre><code> fallback is shown until Mermaid renders SVG.
|
|
11
|
-
*/
|
|
12
2
|
export declare class RfDiagram extends SafeHTMLElement {
|
|
3
|
+
private themeObserver?;
|
|
4
|
+
private mediaQuery?;
|
|
5
|
+
private mediaListener?;
|
|
6
|
+
private source;
|
|
7
|
+
private container;
|
|
8
|
+
private language;
|
|
13
9
|
connectedCallback(): void;
|
|
10
|
+
disconnectedCallback(): void;
|
|
11
|
+
private tryRender;
|
|
12
|
+
/**
|
|
13
|
+
* Mermaid bakes its palette into the SVG at render time, so toggling
|
|
14
|
+
* dark mode after first render leaves a light-mode diagram on a dark
|
|
15
|
+
* page (and vice-versa). Re-render whenever any source of truth for
|
|
16
|
+
* the scheme changes:
|
|
17
|
+
* • `data-theme` on <html> — the global toggle / pre-paint result;
|
|
18
|
+
* • `data-color-scheme` on any ancestor — the per-subtree override
|
|
19
|
+
* used by `preview` (its theme toggle), `tint`, and cover scope;
|
|
20
|
+
* • system `prefers-color-scheme` — when neither attribute is set,
|
|
21
|
+
* we follow the OS.
|
|
22
|
+
* Subtree-watching the documentElement is cheap because the filter
|
|
23
|
+
* limits the callback to the two attributes we care about.
|
|
24
|
+
*/
|
|
25
|
+
private watchThemeChanges;
|
|
14
26
|
private renderMermaid;
|
|
15
27
|
}
|
|
16
28
|
//# sourceMappingURL=diagram.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../src/elements/diagram.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../src/elements/diagram.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAmBhD,qBAAa,SAAU,SAAQ,eAAe;IAC7C,OAAO,CAAC,aAAa,CAAC,CAAmB;IACzC,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,QAAQ,CAAa;IAE7B,iBAAiB;IAQjB,oBAAoB;IAOpB,OAAO,CAAC,SAAS;IAuBjB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,iBAAiB;YAiBX,aAAa;CA8C3B"}
|
package/dist/elements/diagram.js
CHANGED
|
@@ -6,35 +6,111 @@ import { SafeHTMLElement } from './ssr-safe.js';
|
|
|
6
6
|
* The postTransform hook produces:
|
|
7
7
|
* - data-language attribute (mermaid | ascii)
|
|
8
8
|
* - A visible <pre><code> fallback (SSR-friendly)
|
|
9
|
-
* - A hidden
|
|
9
|
+
* - A hidden <template data-content="source"> with the raw source
|
|
10
10
|
*
|
|
11
11
|
* Progressive enhancement: <pre><code> fallback is shown until Mermaid renders SVG.
|
|
12
12
|
*/
|
|
13
|
+
function isDarkScheme() {
|
|
14
|
+
const pref = document.documentElement.dataset.theme;
|
|
15
|
+
if (pref === 'dark')
|
|
16
|
+
return true;
|
|
17
|
+
if (pref === 'light')
|
|
18
|
+
return false;
|
|
19
|
+
return matchMedia('(prefers-color-scheme: dark)').matches;
|
|
20
|
+
}
|
|
13
21
|
export class RfDiagram extends SafeHTMLElement {
|
|
22
|
+
themeObserver;
|
|
23
|
+
mediaQuery;
|
|
24
|
+
mediaListener;
|
|
25
|
+
source = '';
|
|
26
|
+
container = null;
|
|
27
|
+
language = 'mermaid';
|
|
14
28
|
connectedCallback() {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
29
|
+
// Defer one frame so children are guaranteed present after SPA
|
|
30
|
+
// navigation. Svelte's `{#key page.url}` may insert this element
|
|
31
|
+
// before its declarative children, which would empty the source
|
|
32
|
+
// read and silently no-op the render.
|
|
33
|
+
requestAnimationFrame(() => this.tryRender());
|
|
34
|
+
}
|
|
35
|
+
disconnectedCallback() {
|
|
36
|
+
this.themeObserver?.disconnect();
|
|
37
|
+
if (this.mediaQuery && this.mediaListener) {
|
|
38
|
+
this.mediaQuery.removeEventListener('change', this.mediaListener);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
tryRender(attempt = 0) {
|
|
42
|
+
this.language = this.dataset.language || 'mermaid';
|
|
43
|
+
this.source = readHiddenContent(this, 'source');
|
|
44
|
+
this.container = this.querySelector('.rf-diagram__container');
|
|
45
|
+
if (!this.container)
|
|
46
|
+
return;
|
|
47
|
+
if (!this.source) {
|
|
48
|
+
// Children not in yet — retry on the next frame. A couple of
|
|
49
|
+
// retries is enough for the SPA-navigation race; beyond that,
|
|
50
|
+
// give up so a genuinely empty diagram doesn't loop forever.
|
|
51
|
+
if (attempt < 3)
|
|
52
|
+
requestAnimationFrame(() => this.tryRender(attempt + 1));
|
|
19
53
|
return;
|
|
20
|
-
if (language === 'mermaid') {
|
|
21
|
-
this.renderMermaid(source, container);
|
|
22
54
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
55
|
+
if (this.language === 'mermaid') {
|
|
56
|
+
this.renderMermaid();
|
|
57
|
+
this.watchThemeChanges();
|
|
58
|
+
}
|
|
59
|
+
else if (this.language === 'ascii') {
|
|
60
|
+
this.container.textContent = this.source;
|
|
61
|
+
this.container.style.fontFamily = 'var(--rf-font-mono)';
|
|
62
|
+
this.container.style.whiteSpace = 'pre';
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Mermaid bakes its palette into the SVG at render time, so toggling
|
|
67
|
+
* dark mode after first render leaves a light-mode diagram on a dark
|
|
68
|
+
* page (and vice-versa). Re-render whenever any source of truth for
|
|
69
|
+
* the scheme changes:
|
|
70
|
+
* • `data-theme` on <html> — the global toggle / pre-paint result;
|
|
71
|
+
* • `data-color-scheme` on any ancestor — the per-subtree override
|
|
72
|
+
* used by `preview` (its theme toggle), `tint`, and cover scope;
|
|
73
|
+
* • system `prefers-color-scheme` — when neither attribute is set,
|
|
74
|
+
* we follow the OS.
|
|
75
|
+
* Subtree-watching the documentElement is cheap because the filter
|
|
76
|
+
* limits the callback to the two attributes we care about.
|
|
77
|
+
*/
|
|
78
|
+
watchThemeChanges() {
|
|
79
|
+
this.themeObserver?.disconnect();
|
|
80
|
+
this.themeObserver = new MutationObserver(() => this.renderMermaid());
|
|
81
|
+
this.themeObserver.observe(document.documentElement, {
|
|
82
|
+
attributes: true,
|
|
83
|
+
attributeFilter: ['data-theme', 'data-color-scheme'],
|
|
84
|
+
subtree: true,
|
|
85
|
+
});
|
|
86
|
+
if (!this.mediaQuery) {
|
|
87
|
+
this.mediaQuery = matchMedia('(prefers-color-scheme: dark)');
|
|
88
|
+
this.mediaListener = () => {
|
|
89
|
+
if (!document.documentElement.dataset.theme)
|
|
90
|
+
this.renderMermaid();
|
|
91
|
+
};
|
|
92
|
+
this.mediaQuery.addEventListener('change', this.mediaListener);
|
|
27
93
|
}
|
|
28
94
|
}
|
|
29
|
-
async renderMermaid(
|
|
95
|
+
async renderMermaid() {
|
|
96
|
+
if (!this.container || !this.source)
|
|
97
|
+
return;
|
|
30
98
|
try {
|
|
31
99
|
const cdn = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
|
32
100
|
const mermaid = (await import(/* @vite-ignore */ cdn)).default;
|
|
33
|
-
const style = getComputedStyle(container);
|
|
101
|
+
const style = getComputedStyle(this.container);
|
|
102
|
+
const dark = isDarkScheme();
|
|
103
|
+
// Mermaid bakes inline fills into the SVG, so `theme` picks the
|
|
104
|
+
// baseline palette and our themeVariables paint on top. `base` in
|
|
105
|
+
// light mode gives us the soft-on-soft look; switching to `dark`
|
|
106
|
+
// in dark mode makes Mermaid derive its own auxiliaries (note
|
|
107
|
+
// backgrounds, sub-graph borders, etc.) for the dark substrate
|
|
108
|
+
// instead of letting the base auto-derivation pull them light.
|
|
34
109
|
mermaid.initialize({
|
|
35
110
|
startOnLoad: false,
|
|
36
|
-
theme: 'base',
|
|
111
|
+
theme: dark ? 'dark' : 'base',
|
|
37
112
|
themeVariables: {
|
|
113
|
+
darkMode: dark,
|
|
38
114
|
primaryColor: style.getPropertyValue('--rf-color-surface').trim() || '#fbfaf7',
|
|
39
115
|
primaryTextColor: style.getPropertyValue('--rf-color-text').trim() || '#1c1a17',
|
|
40
116
|
primaryBorderColor: style.getPropertyValue('--rf-color-border').trim() || '#e2e0dd',
|
|
@@ -56,8 +132,9 @@ export class RfDiagram extends SafeHTMLElement {
|
|
|
56
132
|
},
|
|
57
133
|
});
|
|
58
134
|
const id = 'mermaid-' + Math.random().toString(36).slice(2);
|
|
59
|
-
const { svg } = await mermaid.render(id, source);
|
|
60
|
-
container.innerHTML = svg;
|
|
135
|
+
const { svg } = await mermaid.render(id, this.source);
|
|
136
|
+
this.container.innerHTML = svg;
|
|
137
|
+
this.dataset.rendered = '';
|
|
61
138
|
}
|
|
62
139
|
catch {
|
|
63
140
|
// Mermaid failed — fallback <pre> remains visible
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"diagram.js","sourceRoot":"","sources":["../../src/elements/diagram.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;
|
|
1
|
+
{"version":3,"file":"diagram.js","sourceRoot":"","sources":["../../src/elements/diagram.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
* `<div data-content="name" style="display:none">` child.
|
|
4
4
|
* Used for large content (diagram source, sandbox HTML) that the web component
|
|
5
5
|
* needs but shouldn't be visually rendered. Created by postTransform hooks.
|
|
6
|
+
*
|
|
7
|
+
* `<template>` is fiddly: when the HTML *parser* encounters one (the SSR /
|
|
8
|
+
* hard-reload path), children go into the `.content` DocumentFragment. When
|
|
9
|
+
* one is built imperatively via `createElement('template')` + `appendChild`
|
|
10
|
+
* (Svelte 5's client renderer on SPA navigation), children land in the
|
|
11
|
+
* regular child slots and `.content` stays empty. We check both.
|
|
6
12
|
*/
|
|
7
13
|
export declare function readHiddenContent(el: HTMLElement, name: string): string;
|
|
8
14
|
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/elements/helpers.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/elements/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAOvE"}
|
package/dist/elements/helpers.js
CHANGED
|
@@ -3,14 +3,19 @@
|
|
|
3
3
|
* `<div data-content="name" style="display:none">` child.
|
|
4
4
|
* Used for large content (diagram source, sandbox HTML) that the web component
|
|
5
5
|
* needs but shouldn't be visually rendered. Created by postTransform hooks.
|
|
6
|
+
*
|
|
7
|
+
* `<template>` is fiddly: when the HTML *parser* encounters one (the SSR /
|
|
8
|
+
* hard-reload path), children go into the `.content` DocumentFragment. When
|
|
9
|
+
* one is built imperatively via `createElement('template')` + `appendChild`
|
|
10
|
+
* (Svelte 5's client renderer on SPA navigation), children land in the
|
|
11
|
+
* regular child slots and `.content` stays empty. We check both.
|
|
6
12
|
*/
|
|
7
13
|
export function readHiddenContent(el, name) {
|
|
8
14
|
const container = el.querySelector(`[data-content="${name}"]`);
|
|
9
15
|
if (!container)
|
|
10
16
|
return '';
|
|
11
|
-
// <template> elements store content in a DocumentFragment
|
|
12
17
|
if (container instanceof HTMLTemplateElement) {
|
|
13
|
-
return container.content.textContent || '';
|
|
18
|
+
return container.content.textContent || container.textContent || '';
|
|
14
19
|
}
|
|
15
20
|
return container.textContent || '';
|
|
16
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/elements/helpers.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/elements/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAe,EAAE,IAAY;IAC9D,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAc,kBAAkB,IAAI,IAAI,CAAC,CAAC;IAC5E,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,CAAC;IAC1B,IAAI,SAAS,YAAY,mBAAmB,EAAE,CAAC;QAC9C,OAAO,SAAS,CAAC,OAAO,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,IAAI,EAAE,CAAC;IACrE,CAAC;IACD,OAAO,SAAS,CAAC,WAAW,IAAI,EAAE,CAAC;AACpC,CAAC"}
|
package/package.json
CHANGED