Skip to content

Commit 2e02957

Browse files
sjockerssjockers
committed
Use previous sibling as target, no more initialization loop
1 parent b404424 commit 2e02957

3 files changed

Lines changed: 38 additions & 18 deletions

File tree

‎sophora-components/datawrapper-switcher.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,26 @@
2424
</head>
2525
<body>
2626
<div data-lab-components-embed="datawrapper-switcher"></div>
27+
<script>
28+
(() => {
29+
const target = document.currentScript.previousElementSibling;
30+
if (window.__mountDatawrapperSwitcher) {
31+
window.__mountDatawrapperSwitcher(target);
32+
} else {
33+
document.addEventListener('DOMContentLoaded', () => {
34+
window.__mountDatawrapperSwitcher(target);
35+
});
36+
}
37+
})();
38+
</script>
2739
<script type="module">
28-
import { mountEmbed } from '/src/lib/utils/mountEmbed';
40+
import mountEmbed from '/src/lib/utils/mountEmbed';
2941
import Embed from '/src/components/datawrapper-switcher/embed.svelte';
30-
window.__mountDatawrapperSwitcher = () => mountEmbed('datawrapper-switcher', Embed);
31-
window.__mountDatawrapperSwitcher();
32-
</script>
33-
<script>
34-
window.__mountDatawrapperSwitcher && window.__mountDatawrapperSwitcher();
42+
43+
window.__mountDatawrapperSwitcher = (target) => {
44+
console.log('Mounting Datawrapper Switcher component on', target);
45+
mountEmbed(target, Embed);
46+
};
3547
</script>
3648
</body>
3749
</html>

‎sophora-components/highlight-cards.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,26 @@
2424
</head>
2525
<body>
2626
<div data-lab-components-embed="highlight-cards"></div>
27+
<script>
28+
(() => {
29+
const target = document.currentScript.previousElementSibling;
30+
if (window.__mountHighlightCards) {
31+
window.__mountHighlightCards(target);
32+
} else {
33+
document.addEventListener('DOMContentLoaded', () => {
34+
window.__mountHighlightCards(target);
35+
});
36+
}
37+
})();
38+
</script>
2739
<script type="module">
28-
import { mountEmbed } from '/src/lib/utils/mountEmbed';
40+
import mountEmbed from '/src/lib/utils/mountEmbed';
2941
import Embed from '/src/components/highlight-cards/embed.svelte';
3042

31-
window.__mountHighlightCards = () => mountEmbed('highlight-cards', Embed);
32-
window.__mountHighlightCards();
33-
</script>
34-
<script>
35-
window.__mountHighlightCards && window.__mountHighlightCards();
43+
window.__mountHighlightCards = (target) => {
44+
console.log('Mounting Highlight Cards component on', target);
45+
mountEmbed(target, Embed);
46+
};
3647
</script>
3748
</body>
3849
</html>

‎sophora-components/src/lib/utils/mountEmbed.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@ import { mount } from 'svelte';
22

33
type ComponentConstructor = new (...args: any[]) => any;
44

5-
export async function mountEmbed(
6-
componentName: string,
5+
export default async function mountEmbed(
6+
target: Element,
77
Component: ComponentConstructor
88
): Promise<void> {
9-
const selector = `[data-lab-components-embed="${componentName}"]`;
10-
document.querySelectorAll(selector).forEach((target) => {
11-
mount(Component, { target });
12-
});
9+
mount(Component, { target });
1310
}

0 commit comments

Comments
 (0)