Skip to content

Commit 94f69d4

Browse files
fubits1fubits1
committed
feat: SvelteJS Module Import Example
1 parent 80ef13f commit 94f69d4

35 files changed

+22969
-2192
lines changed

‎04-import-svelte-module.qmd

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: "Importing a Svelte Module"
3+
format:
4+
html:
5+
css: ./css/svelte-counter-style.css
6+
include-after-body:
7+
text: '<script src="./js/svelte-counter.js"></script>'
8+
---
9+
10+
```{ojs}
11+
//| echo: false
12+
targetDom = document.getElementById("counter")
13+
```
14+
15+
```{ojs}
16+
//| echo: false
17+
//| output: false
18+
(() => {
19+
targetDom.innerHTML = ''
20+
new Counter({ target: targetDom,
21+
props: { initialValue: 13 }
22+
})
23+
})()
24+
```
25+
26+
::: {#counter}
27+
Mount here
28+
:::

‎04-import-svelte-module.qmd.old

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: "Importing a Svelte Module"
3+
format:
4+
html:
5+
css: ./css/svelte-counter-style.css
6+
include-after-body:
7+
text: '<script src="./js/svelte-counter.js"></script>'
8+
---
9+
10+
```{ojs}
11+
//| echo: false
12+
//| eval: false
13+
viewof source = html`<input type=file accept=".js">`
14+
```
15+
16+
```{ojs}
17+
//| echo: false
18+
//| eval: false
19+
Counter = require(URL.createObjectURL(source))
20+
```
21+
22+
```{ojs}
23+
//| echo: false
24+
targetDom = document.getElementById("counter")
25+
```
26+
27+
```{ojs}
28+
//| echo: false
29+
//| output: false
30+
(() => {
31+
targetDom.innerHTML = ''
32+
new Counter({ target: targetDom, props: { initialValue: 13 } })
33+
})()
34+
```
35+
36+
::: {#counter}
37+
Mount here
38+
:::
39+

‎css/svelte-counter-style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
div.svelte-cephk2{display:flex;justify-content:center;align-items:center}button.svelte-cephk2{height:40px;width:80px;margin-left:1rem;margin-right:1rem}.counter.svelte-b7r1l9{font-weight:700}

‎js/svelte-counter.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎outputs/00-quarto-observable-basics.html

+15-37
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
33

44
<meta charset="utf-8">
5-
<meta name="generator" content="quarto-1.1.251">
5+
<meta name="generator" content="quarto-1.0.8">
66

77
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
88

@@ -11,15 +11,10 @@
1111
<style>
1212
code{white-space: pre-wrap;}
1313
span.smallcaps{font-variant: small-caps;}
14-
div.columns{display: flex; gap: min(4vw, 1.5em);}
15-
div.column{flex: auto; overflow-x: auto;}
14+
span.underline{text-decoration: underline;}
15+
div.column{display: inline-block; vertical-align: top; width: 50%;}
1616
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
1717
ul.task-list{list-style: none;}
18-
ul.task-list li input[type="checkbox"] {
19-
width: 0.8em;
20-
margin: 0 0.8em 0.2em -1.6em;
21-
vertical-align: middle;
22-
}
2318
pre > code.sourceCode { white-space: pre; position: relative; }
2419
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
2520
pre > code.sourceCode > span:empty { height: 1.2em; }
@@ -58,7 +53,7 @@
5853
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
5954
code span.at { color: #7d9029; } /* Attribute */
6055
code span.bn { color: #40a070; } /* BaseN */
61-
code span.bu { color: #008000; } /* BuiltIn */
56+
code span.bu { } /* BuiltIn */
6257
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
6358
code span.ch { color: #4070a0; } /* Char */
6459
code span.cn { color: #880000; } /* Constant */
@@ -71,7 +66,7 @@
7166
code span.ex { } /* Extension */
7267
code span.fl { color: #40a070; } /* Float */
7368
code span.fu { color: #06287e; } /* Function */
74-
code span.im { color: #008000; font-weight: bold; } /* Import */
69+
code span.im { } /* Import */
7570
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
7671
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
7772
code span.op { color: #666666; } /* Operator */
@@ -95,7 +90,7 @@
9590
<link href="00-quarto-observable-basics_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
9691
<script src="00-quarto-observable-basics_files/libs/bootstrap/bootstrap.min.js"></script>
9792
<link href="00-quarto-observable-basics_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
98-
<link href="00-quarto-observable-basics_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
93+
<link href="00-quarto-observable-basics_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet">
9994
<script type="module" src="00-quarto-observable-basics_files/libs/quarto-ojs/quarto-ojs-runtime.js"></script>
10095
<link href="00-quarto-observable-basics_files/libs/quarto-ojs/quarto-ojs.css" rel="stylesheet">
10196
<script type="ojs-define">
@@ -113,7 +108,7 @@
113108

114109
<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
115110
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
116-
<nav id="TOC" role="doc-toc" class="toc-active">
111+
<nav id="TOC" role="doc-toc">
117112
<h2 id="toc-title">TOC</h2>
118113

119114
<ul>
@@ -164,8 +159,10 @@ <h1>Quarto Tests</h1>
164159
<section id="todos" class="level2">
165160
<h2 class="anchored" data-anchor-id="todos">TODOs</h2>
166161
<ul class="task-list">
167-
<li><input type="checkbox" disabled=""><a href="https://observablehq.com/@observablehq/databases">Query Database</a></li>
168-
<li><input type="checkbox" disabled="">Document publishing to quartopub.com with <code>quarto publish quarto-pub &lt;filename&gt;.qmd</code></li>
162+
<li><input type="checkbox" disabled="">
163+
<a href="https://observablehq.com/@observablehq/databases">Query Database</a></li>
164+
<li><input type="checkbox" disabled="">
165+
Document publishing to quartopub.com with <code>quarto publish quarto-pub &lt;filename&gt;.qmd</code></li>
169166
</ul>
170167
</section>
171168
<section id="syntax-sugar-bytes" class="level2">
@@ -294,7 +291,7 @@ <h2 class="anchored" data-anchor-id="ggplot">2 - ggplot</h2>
294291
<div class="quarto-figure quarto-figure-center">
295292
<figure class="figure">
296293
<p><img src="00-quarto-observable-basics_files/figure-html/unnamed-chunk-2-1.png" class="img-fluid figure-img" width="672"></p>
297-
<p></p><figcaption class="figure-caption">Figure caption for this plot, 2022-09-20</figcaption><p></p>
294+
<p></p><figcaption aria-hidden="true" class="figure-caption">Figure caption for this plot, 2022-11-09</figcaption><p></p>
298295
</figure>
299296
</div>
300297
</div>
@@ -563,32 +560,14 @@ <h1>Bonus: HTML &amp; reactive CSS Style</h1>
563560
{"contents":[{"methodName":"interpret","cellName":"ojs-cell-1","inline":false,"source":"Object.entries(mtcarsJS)\n"},{"methodName":"interpret","cellName":"ojs-cell-2","inline":false,"source":"Inputs.table(transpose(mtcarsJS))\n"},{"methodName":"interpret","cellName":"ojs-cell-3","inline":false,"source":"viewof repo = Inputs.radio(\n [\n \"tidyverse/ggplot2\",\n \"sveltejs/kit\",\n \"sveltejs/svelte\"\n ], \n { label: labels[0], value: \"tidyverse/ggplot2\"}\n)\n"},{"methodName":"interpret","cellName":"ojs-cell-4","inline":false,"source":"d3 = require('d3')\ncontributors = await d3.json(\n \"https://api.github.com/repos/\" + repo + \"/stats/contributors\"\n)\ncommits = contributors.map(contributor => {\n const author = contributor.author;\n return {\n name: author.login,\n title: author.login,\n group: author.type,\n value: contributor.total\n }\n})\n"},{"methodName":"interpret","cellName":"ojs-cell-5","inline":false,"source":"Object.entries(commits)\n"},{"methodName":"interpret","cellName":"ojs-cell-6","inline":false,"source":"Inputs.table(commits, { sort: \"value\", reverse: true })\n"},{"methodName":"interpret","cellName":"ojs-cell-7","inline":false,"source":"import { chart } with { commits as data } \n from \"@d3/d3-bubble-chart\"\nchart\n"},{"methodName":"interpret","cellName":"ojs-cell-8","inline":false,"source":"import {x11colors} from \"@observablehq/input-select\"\n"},{"methodName":"interpret","cellName":"ojs-cell-9","inline":false,"source":"viewof color = Inputs.select(x11colors, {value: \"steelblue\", label: \"Favorite color\"})\n"},{"methodName":"interpret","cellName":"ojs-cell-10","inline":false,"source":"html`<div style=\"background: ${color}; width: 100%; height: 25px;\">`\n"},{"methodName":"interpretQuiet","source":"shinyInput('repo')"},{"methodName":"interpretQuiet","source":"shinyInput('color')"}]}
564561
</script>
565562
<script type="module">
566-
window._ojs.paths.runtimeToDoc = "../../..";
567-
window._ojs.paths.runtimeToRoot = "../../..";
563+
window._ojs.paths.runtimeToDoc = "..\..\..";
564+
window._ojs.paths.runtimeToRoot = "..\..\..";
568565
window._ojs.paths.docToRoot = "";
569566
window._ojs.selfContained = false;
570567
window._ojs.runtime.interpretFromScriptTags();
571568
</script>
572569
<script id="quarto-html-after-body" type="application/javascript">
573570
window.document.addEventListener("DOMContentLoaded", function (event) {
574-
const toggleBodyColorMode = (bsSheetEl) => {
575-
const mode = bsSheetEl.getAttribute("data-mode");
576-
const bodyEl = window.document.querySelector("body");
577-
if (mode === "dark") {
578-
bodyEl.classList.add("quarto-dark");
579-
bodyEl.classList.remove("quarto-light");
580-
} else {
581-
bodyEl.classList.add("quarto-light");
582-
bodyEl.classList.remove("quarto-dark");
583-
}
584-
}
585-
const toggleBodyColorPrimary = () => {
586-
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
587-
if (bsSheetEl) {
588-
toggleBodyColorMode(bsSheetEl);
589-
}
590-
}
591-
toggleBodyColorPrimary();
592571
const icon = "";
593572
const anchorJS = new window.AnchorJS();
594573
anchorJS.options = {
@@ -638,8 +617,7 @@ <h1>Bonus: HTML &amp; reactive CSS Style</h1>
638617
for (var i=0; i<noterefs.length; i++) {
639618
const ref = noterefs[i];
640619
tippyHover(ref, function() {
641-
// use id or data attribute instead here
642-
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
620+
let href = ref.getAttribute('href');
643621
try { href = new URL(href).hash; } catch {}
644622
const id = href.replace(/^#\/?/, "");
645623
const note = window.document.getElementById(id);

‎outputs/00-quarto-observable-basics_files/libs/bootstrap/bootstrap.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎outputs/00-quarto-observable-basics_files/libs/quarto-html/quarto.js

+3-96
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const sectionChanged = new CustomEvent("quarto-sectionChanged", {
66
});
77

88
window.document.addEventListener("DOMContentLoaded", function (_event) {
9-
const tocEl = window.document.querySelector('nav.toc-active[role="doc-toc"]');
9+
const tocEl = window.document.querySelector('nav[role="doc-toc"]');
1010
const sidebarEl = window.document.getElementById("quarto-sidebar");
1111
const leftTocEl = window.document.getElementById("quarto-sidebar-toc-left");
1212
const marginSidebarEl = window.document.getElementById(
@@ -275,7 +275,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
275275
const convertToMenu = () => {
276276
for (const child of el.children) {
277277
child.style.opacity = 0;
278-
child.style.overflow = "hidden";
278+
child.style.display = "none";
279279
}
280280

281281
const toggleContainer = window.document.createElement("div");
@@ -378,7 +378,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
378378
const convertToSidebar = () => {
379379
for (const child of el.children) {
380380
child.style.opacity = 1;
381-
child.style.overflow = null;
381+
clone.style.display = null;
382382
}
383383

384384
const placeholderEl = window.document.getElementById(
@@ -653,99 +653,6 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
653653
highlightReaderToggle(isReaderMode());
654654
});
655655

656-
// grouped tabsets
657-
window.addEventListener("pageshow", (_event) => {
658-
function getTabSettings() {
659-
const data = localStorage.getItem("quarto-persistent-tabsets-data");
660-
if (!data) {
661-
localStorage.setItem("quarto-persistent-tabsets-data", "{}");
662-
return {};
663-
}
664-
if (data) {
665-
return JSON.parse(data);
666-
}
667-
}
668-
669-
function setTabSettings(data) {
670-
localStorage.setItem(
671-
"quarto-persistent-tabsets-data",
672-
JSON.stringify(data)
673-
);
674-
}
675-
676-
function setTabState(groupName, groupValue) {
677-
const data = getTabSettings();
678-
data[groupName] = groupValue;
679-
setTabSettings(data);
680-
}
681-
682-
function toggleTab(tab, active) {
683-
const tabPanelId = tab.getAttribute("aria-controls");
684-
const tabPanel = document.getElementById(tabPanelId);
685-
if (active) {
686-
tab.classList.add("active");
687-
tabPanel.classList.add("active");
688-
} else {
689-
tab.classList.remove("active");
690-
tabPanel.classList.remove("active");
691-
}
692-
}
693-
694-
function toggleAll(selectedGroup, selectorsToSync) {
695-
for (const [thisGroup, tabs] of Object.entries(selectorsToSync)) {
696-
const active = selectedGroup === thisGroup;
697-
for (const tab of tabs) {
698-
toggleTab(tab, active);
699-
}
700-
}
701-
}
702-
703-
function findSelectorsToSyncByLanguage() {
704-
const result = {};
705-
const tabs = Array.from(
706-
document.querySelectorAll(`div[data-group] a[id^='tabset-']`)
707-
);
708-
for (const item of tabs) {
709-
const div = item.parentElement.parentElement.parentElement;
710-
const group = div.getAttribute("data-group");
711-
if (!result[group]) {
712-
result[group] = {};
713-
}
714-
const selectorsToSync = result[group];
715-
const value = item.innerHTML;
716-
if (!selectorsToSync[value]) {
717-
selectorsToSync[value] = [];
718-
}
719-
selectorsToSync[value].push(item);
720-
}
721-
return result;
722-
}
723-
724-
function setupSelectorSync() {
725-
const selectorsToSync = findSelectorsToSyncByLanguage();
726-
Object.entries(selectorsToSync).forEach(([group, tabSetsByValue]) => {
727-
Object.entries(tabSetsByValue).forEach(([value, items]) => {
728-
items.forEach((item) => {
729-
item.addEventListener("click", (_event) => {
730-
setTabState(group, value);
731-
toggleAll(value, selectorsToSync[group]);
732-
});
733-
});
734-
});
735-
});
736-
return selectorsToSync;
737-
}
738-
739-
const selectorsToSync = setupSelectorSync();
740-
for (const [group, selectedName] of Object.entries(getTabSettings())) {
741-
const selectors = selectorsToSync[group];
742-
// it's possible that stale state gives us empty selections, so we explicitly check here.
743-
if (selectors) {
744-
toggleAll(selectedName, selectors);
745-
}
746-
}
747-
});
748-
749656
function throttle(func, wait) {
750657
let waiting = false;
751658
return function () {

0 commit comments

Comments
 (0)