Skip to content

Instantly share code, notes, and snippets.

@PatrickJS
Created November 15, 2023 03:57
Show Gist options
  • Select an option

  • Save PatrickJS/7901d66e7a38025a8cecb8645eff0773 to your computer and use it in GitHub Desktop.

Select an option

Save PatrickJS/7901d66e7a38025a8cecb8645eff0773 to your computer and use it in GitHub Desktop.
qwik ssg csr html output
<!doctype html>
<html
lang="en-us"
q:render="static-ssr"
q:route="/"
q:container="paused"
q:version="1.2.11"
q:base="/build/"
q:locale
q:manifest-hash="l4ta1m"
>
<!--qv q:id=0 q:key=3scc:pY_0--><!--qv q:id=1 q:key=TxCF:35_2--><!--qv q:s q:sref=1 q:key=--><head
q:head
>
<meta charSet="utf-8" q:head />
<link href="/manifest.json" rel="manifest" q:head />
<!--qv q:key=35_0-->
<script q:key="1Z_0" q:head>
((s, a, i, r) => {
(i = (e, t) => {
(t = document.querySelector("[q\\:base]")),
t &&
a.active &&
a.active.postMessage({
type: "qprefetch",
base: t.getAttribute("q:base"),
...e,
});
}),
document.addEventListener("qprefetch", (e) => {
const t = e.detail;
a ? i(t) : t.bundles && s.push(...t.bundles);
}),
navigator.serviceWorker
.register("/service-worker.js")
.then((e) => {
(r = () => {
(a = e), i({ bundles: s });
}),
e.installing
? e.installing.addEventListener("statechange", (t) => {
t.target.state == "activated" && r();
})
: e.active && r();
})
.catch((e) => console.error(e));
})([]);
</script>
<!--/qv-->
<style data-src="/build/q-c9de3035.css">
/**
* WHAT IS THIS FILE?
*
* Globally applied styles. No matter which components are in the page or matching route,
* the styles in here will be applied to the Document, without any sort of CSS scoping.
*
*/
:root {
--qwik-dark-blue: #006ce9;
--qwik-light-blue: #18b6f6;
--qwik-light-purple: #ac7ff4;
--qwik-dark-purple: #713fc2;
--qwik-dirty-black: #1d2033;
--qwik-dark-background: #151934;
--qwik-dark-text: #ffffff;
}
html {
line-height: 1;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 0;
margin: 0;
line-height: inherit;
}
/**
* WHAT IS THIS FILE?
*
* Globally applied styles. No matter which components are in the page or matching route,
* the styles in here will be applied to the Document, without any sort of CSS scoping.
*
*/
html {
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 0;
line-height: inherit;
}
</style>
<style q:style="lcydw1-0" hidden>
:root {
view-transition-name: none;
}
</style>
</head>
<body lang="en">
<!--qv q:id=2 q:key=e0ss:35_1--><!--qv q:key=zl_1--><!--qv q:id=3 q:key=VkLN:zl_0--><!--qv q:key=XF_4-->
<ul>
<li>
<!--qv q:id=4 q:key=8gdL:XF_0--><a
href="/"
preventdefault:click=""
on:click="q-e478c08e.js#s_i1Cv0pYJNR0[0 1 1 1]"
q:key="AD_1"
q:id="5"
><!--qv q:s q:sref=4 q:key=-->Home<!--/qv--></a
><!--/qv-->
</li>
<li>
<!--qv q:id=6 q:key=8gdL:XF_1--><a
href="/home"
preventdefault:click=""
on:click="q-e478c08e.js#s_i1Cv0pYJNR0[0 1 1 1]"
q:key="AD_1"
q:id="7"
><!--qv q:s q:sref=6 q:key=-->Home<!--/qv--></a
><!--/qv-->
</li>
<li>
<!--qv q:id=8 q:key=8gdL:XF_2--><a
href="/about"
preventdefault:click=""
on:click="q-e478c08e.js#s_i1Cv0pYJNR0[0 1 1 1]"
q:key="AD_1"
q:id="9"
><!--qv q:s q:sref=8 q:key=-->About<!--/qv--></a
><!--/qv-->
</li>
</ul>
<main>
<!--qv q:s q:sref=3 q:key=--><!--qv q:id=a q:key=xYL1:zl_0--><!--qv q:key=H1_8-->
<div>
hi<!--qv q:id=b q:key=CGC5:H1_7--><!--qv q:key=H1_6-->
<div>
hi again<!--qv q:id=c q:key=APnn:H1_5-->
<div on:qvisible="q-2c50bc91.js#_hW[0]" q:key="H1_4" q:id="d">
<input
name="todo"
on:input="q-2c50bc91.js#s_01fkBmn8LIw[0]"
q:id="e"
/>
<pre q:key="H1_0"></pre>
</div>
<!--/qv-->
</div>
<!--/qv--><!--/qv-->
</div>
<!--/qv--><!--/qv--><!--/qv-->
</main>
<!--/qv--><!--/qv-->
<script>
(async (path, symbol) => {
var _a2;
if (!window._qcs && history.scrollRestoration === "manual") {
window._qcs = true;
const scrollState =
(_a2 = history.state) == null ? void 0 : _a2._qCityScroll;
if (scrollState) window.scrollTo(scrollState.x, scrollState.y);
const currentScript = document.currentScript;
(await import(path))[symbol](currentScript);
}
})("/build/q-5666102e.js", "s_DyVc0YBIqQU");
</script>
<!--/qv--><!--/qv-->
</body>
<!--/qv--><!--/qv--><!--/qv-->
<script>
document.dispatchEvent(
new CustomEvent("qprefetch", {
detail: {
bundles: [
"q-3f726bd4.js",
"q-8c975dd6.js",
"q-a1b9a2bd.js",
"q-e478c08e.js",
"q-2c50bc91.js",
],
},
})
);
</script>
<script type="qwik/json">
{
"refs": { "5": "u 11", "7": "u 11", "9": "u 11", "d": "z", "e": "b!" },
"ctx": {
"1": {
"h": " r!",
"w": "t",
"c": "qc-c=0! qc-ic=9 qc-h=7! qc-l=m! qc-n=u qc-s=n! qc-a=a qc-ir=8"
},
"2": { "h": "e", "s": "9" },
"c": { "h": "10", "w": "z x", "s": "d b! z c!" }
},
"objs": [
{ "headings": "11", "menu": "11" },
{ "name": "g", "content": "h" },
["1"],
[],
[],
[],
{},
{
"title": "f",
"meta": "2",
"links": "3",
"styles": "4",
"scripts": "5",
"frontmatter": "6"
},
"\u0012p",
"\u001211",
"\u001211",
{ "id": "v" },
"\u00040 11",
"\u0012k",
"\u0002q-3fdc3436.js#s_e0ssiDXoeAM",
"Welcome to Qwik",
"description",
"Qwik site description",
"\u0005https://yoursite.qwik.dev/",
{},
false,
"\u0005https://yoursite.qwik.dev/",
{ "url": "i", "params": "j", "isNavigating": "k", "prevUrl": "l" },
{},
"initial",
{ "type": "o", "dest": "i" },
{},
{},
"\u0002q-3f726bd4.js#s_02wMImzEAbk[a 0! 9 7! 11 u n! q r! 8 m!]",
"\u00032 g s #1",
"\u0002q-3f726bd4.js#s_fX0bDjeJa0E[a q 8 m!]",
1,
"\u0002q-2c50bc91.js#s_HC2PbdOIBzI[d b!]",
"\u00034 3 w #c c!",
"\u0002q-2c50bc91.js#s_uBrotQomfW4[d]",
"\u00031 2 y #c",
"\u0002q-2c50bc91.js#s_APnnuO0P2c8",
"\u0001"
],
"subs": [
["_1"],
["_1"],
["_1"],
["_1"],
["_1"],
["_1"],
["_1"],
["_1"],
["0 t"],
["0 #2"],
["0 t"],
["_1"],
["0 #c __brand", "0 #c value"],
["0 x"]
]
}
</script>
<script id="qwikloader">
((e, t) => {
const n = "__q_context__",
o = window,
s = new Set(),
i = (t) => e.querySelectorAll(t),
a = (e, t, n = t.type) => {
i("[on" + e + "\\:" + n + "]").forEach((o) => f(o, e, t, n));
},
r = (e, t) => e.getAttribute(t),
l = (t) => {
if (void 0 === t._qwikjson_) {
let n = (t === e.documentElement ? e.body : t).lastElementChild;
for (; n; ) {
if ("SCRIPT" === n.tagName && "qwik/json" === r(n, "type")) {
t._qwikjson_ = JSON.parse(
n.textContent.replace(/\\x3C(\/?script)/g, "<$1")
);
break;
}
n = n.previousElementSibling;
}
}
},
c = (e, t) => new CustomEvent(e, { detail: t }),
f = async (t, o, s, i = s.type) => {
const a = "on" + o + ":" + i;
t.hasAttribute("preventdefault:" + i) && s.preventDefault();
const c = t._qc_,
f = null == c ? void 0 : c.li.filter((e) => e[0] === a);
if (f && f.length > 0) {
for (const e of f)
await e[1].getFn([t, s], () => t.isConnected)(s, t);
return;
}
const b = r(t, a);
if (b) {
const o = t.closest("[q\\:container]"),
i = new URL(r(o, "q:base"), e.baseURI);
for (const a of b.split("\n")) {
const r = new URL(a, i),
c = r.hash.replace(/^#?([^?[|]*).*$/, "$1") || "default",
f = performance.now(),
b = import(
/* @vite-ignore */
r.href.split("#")[0]
);
l(o);
const p = (await b)[c],
u = e[n];
if (t.isConnected)
try {
(e[n] = [t, s, r]),
d("qsymbol", { symbol: c, element: t, reqTime: f }),
await p(s, t);
} finally {
e[n] = u;
}
}
}
},
d = (t, n) => {
e.dispatchEvent(c(t, n));
},
b = (e) => e.replace(/([A-Z])/g, (e) => "-" + e.toLowerCase()),
p = async (e) => {
let t = b(e.type),
n = e.target;
for (a("-document", e, t); n && n.getAttribute; )
await f(n, "", e, t),
(n = e.bubbles && !0 !== e.cancelBubble ? n.parentElement : null);
},
u = (e) => {
a("-window", e, b(e.type));
},
w = () => {
var n;
const a = e.readyState;
if (
!t &&
("interactive" == a || "complete" == a) &&
((t = 1),
d("qinit"),
(null != (n = o.requestIdleCallback) ? n : o.setTimeout).bind(o)(
() => d("qidle")
),
s.has("qvisible"))
) {
const e = i("[on\\:qvisible]"),
t = new IntersectionObserver((e) => {
for (const n of e)
n.isIntersecting &&
(t.unobserve(n.target), f(n.target, "", c("qvisible", n)));
});
e.forEach((e) => t.observe(e));
}
},
q = (e, t, n, o = !1) =>
e.addEventListener(t, n, { capture: o, passive: !1 }),
v = (t) => {
for (const n of t) s.has(n) || (q(e, n, p, !0), q(o, n, u), s.add(n));
};
if (!e.qR) {
const t = o.qwikevents;
Array.isArray(t) && v(t),
(o.qwikevents = { push: (...e) => v(e) }),
q(e, "readystatechange", w),
w();
}
})(document);
</script>
<script>
window.qwikevents.push("click", "qvisible", "input");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment