Skip to content

Instantly share code, notes, and snippets.

@mrienstra
Created November 10, 2022 06:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrienstra/0f3595d84ba4e4c64120c967dcfb816f to your computer and use it in GitHub Desktop.
Save mrienstra/0f3595d84ba4e4c64120c967dcfb816f to your computer and use it in GitHub Desktop.
Astro Svelte duplication test
.counter.svelte-14xytdo {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.message.svelte-14xytdo {
text-align: center;
}
html,
body {
font-family: system-ui;
margin: 0;
}
body {
padding: 2rem;
}
/* empty css */ function L() {}
function nt(t, e) {
for (const n in e) t[n] = e[n];
return t;
}
function Q(t) {
return t();
}
function z() {
return Object.create(null);
}
function A(t) {
t.forEach(Q);
}
function X(t) {
return typeof t == "function";
}
function it(t, e) {
return t != t
? e == e
: t !== e || (t && typeof t == "object") || typeof t == "function";
}
function lt(t) {
return Object.keys(t).length === 0;
}
function rt(t, e, n, i) {
if (t) {
const l = Y(t, e, n, i);
return t[0](l);
}
}
function Y(t, e, n, i) {
return t[1] && i ? nt(n.ctx.slice(), t[1](i(e))) : n.ctx;
}
function ut(t, e, n, i) {
if (t[2] && i) {
const l = t[2](i(n));
if (e.dirty === void 0) return l;
if (typeof l == "object") {
const o = [],
r = Math.max(e.dirty.length, l.length);
for (let f = 0; f < r; f += 1) o[f] = e.dirty[f] | l[f];
return o;
}
return e.dirty | l;
}
return e.dirty;
}
function ct(t, e, n, i, l, o) {
if (l) {
const r = Y(e, n, i, o);
t.p(r, l);
}
}
function ft(t) {
if (t.ctx.length > 32) {
const e = [],
n = t.ctx.length / 32;
for (let i = 0; i < n; i++) e[i] = -1;
return e;
}
return -1;
}
let C = !1;
function ot() {
C = !0;
}
function st() {
C = !1;
}
function at(t, e, n, i) {
for (; t < e; ) {
const l = t + ((e - t) >> 1);
n(l) <= i ? (t = l + 1) : (e = l);
}
return t;
}
function dt(t) {
if (t.hydrate_init) return;
t.hydrate_init = !0;
let e = t.childNodes;
if (t.nodeName === "HEAD") {
const u = [];
for (let c = 0; c < e.length; c++) {
const d = e[c];
d.claim_order !== void 0 && u.push(d);
}
e = u;
}
const n = new Int32Array(e.length + 1),
i = new Int32Array(e.length);
n[0] = -1;
let l = 0;
for (let u = 0; u < e.length; u++) {
const c = e[u].claim_order,
d =
(l > 0 && e[n[l]].claim_order <= c
? l + 1
: at(1, l, (m) => e[n[m]].claim_order, c)) - 1;
i[u] = n[d] + 1;
const a = d + 1;
(n[a] = u), (l = Math.max(a, l));
}
const o = [],
r = [];
let f = e.length - 1;
for (let u = n[l] + 1; u != 0; u = i[u - 1]) {
for (o.push(e[u - 1]); f >= u; f--) r.push(e[f]);
f--;
}
for (; f >= 0; f--) r.push(e[f]);
o.reverse(), r.sort((u, c) => u.claim_order - c.claim_order);
for (let u = 0, c = 0; u < r.length; u++) {
for (; c < o.length && r[u].claim_order >= o[c].claim_order; ) c++;
const d = c < o.length ? o[c] : null;
t.insertBefore(r[u], d);
}
}
function p(t, e) {
if (C) {
for (
dt(t),
(t.actual_end_child === void 0 ||
(t.actual_end_child !== null &&
t.actual_end_child.parentNode !== t)) &&
(t.actual_end_child = t.firstChild);
t.actual_end_child !== null && t.actual_end_child.claim_order === void 0;
)
t.actual_end_child = t.actual_end_child.nextSibling;
e !== t.actual_end_child
? (e.claim_order !== void 0 || e.parentNode !== t) &&
t.insertBefore(e, t.actual_end_child)
: (t.actual_end_child = e.nextSibling);
} else (e.parentNode !== t || e.nextSibling !== null) && t.appendChild(e);
}
function M(t, e, n) {
C && !n
? p(t, e)
: (e.parentNode !== t || e.nextSibling != n) &&
t.insertBefore(e, n || null);
}
function y(t) {
t.parentNode && t.parentNode.removeChild(t);
}
function b(t) {
return document.createElement(t);
}
function N(t) {
return document.createTextNode(t);
}
function O() {
return N(" ");
}
function F(t, e, n, i) {
return t.addEventListener(e, n, i), () => t.removeEventListener(e, n, i);
}
function G(t, e, n) {
n == null
? t.removeAttribute(e)
: t.getAttribute(e) !== n && t.setAttribute(e, n);
}
function x(t) {
return Array.from(t.childNodes);
}
function _t(t) {
t.claim_info === void 0 &&
(t.claim_info = { last_index: 0, total_claimed: 0 });
}
function Z(t, e, n, i, l = !1) {
_t(t);
const o = (() => {
for (let r = t.claim_info.last_index; r < t.length; r++) {
const f = t[r];
if (e(f)) {
const u = n(f);
return (
u === void 0 ? t.splice(r, 1) : (t[r] = u),
l || (t.claim_info.last_index = r),
f
);
}
}
for (let r = t.claim_info.last_index - 1; r >= 0; r--) {
const f = t[r];
if (e(f)) {
const u = n(f);
return (
u === void 0 ? t.splice(r, 1) : (t[r] = u),
l
? u === void 0 && t.claim_info.last_index--
: (t.claim_info.last_index = r),
f
);
}
}
return i();
})();
return (
(o.claim_order = t.claim_info.total_claimed),
(t.claim_info.total_claimed += 1),
o
);
}
function ht(t, e, n, i) {
return Z(
t,
(l) => l.nodeName === e,
(l) => {
const o = [];
for (let r = 0; r < l.attributes.length; r++) {
const f = l.attributes[r];
n[f.name] || o.push(f.name);
}
o.forEach((r) => l.removeAttribute(r));
},
() => i(e)
);
}
function $(t, e, n) {
return ht(t, e, n, b);
}
function T(t, e) {
return Z(
t,
(n) => n.nodeType === 3,
(n) => {
const i = "" + e;
if (n.data.startsWith(i)) {
if (n.data.length !== i.length) return n.splitText(i.length);
} else n.data = i;
},
() => N(e),
!0
);
}
function I(t) {
return T(t, " ");
}
function mt(t, e) {
(e = "" + e), t.wholeText !== e && (t.data = e);
}
let q;
function w(t) {
q = t;
}
const E = [],
J = [],
j = [],
K = [],
pt = Promise.resolve();
let P = !1;
function yt() {
P || ((P = !0), pt.then(tt));
}
function V(t) {
j.push(t);
}
const D = new Set();
let S = 0;
function tt() {
const t = q;
do {
for (; S < E.length; ) {
const e = E[S];
S++, w(e), gt(e.$$);
}
for (w(null), E.length = 0, S = 0; J.length; ) J.pop()();
for (let e = 0; e < j.length; e += 1) {
const n = j[e];
D.has(n) || (D.add(n), n());
}
j.length = 0;
} while (E.length);
for (; K.length; ) K.pop()();
(P = !1), D.clear(), w(t);
}
function gt(t) {
if (t.fragment !== null) {
t.update(), A(t.before_update);
const e = t.dirty;
(t.dirty = [-1]),
t.fragment && t.fragment.p(t.ctx, e),
t.after_update.forEach(V);
}
}
const k = new Set();
let bt;
function et(t, e) {
t && t.i && (k.delete(t), t.i(e));
}
function xt(t, e, n, i) {
if (t && t.o) {
if (k.has(t)) return;
k.add(t),
bt.c.push(() => {
k.delete(t), i && (n && t.d(1), i());
}),
t.o(e);
} else i && i();
}
function vt(t, e, n, i) {
const { fragment: l, after_update: o } = t.$$;
l && l.m(e, n),
i ||
V(() => {
const r = t.$$.on_mount.map(Q).filter(X);
t.$$.on_destroy ? t.$$.on_destroy.push(...r) : A(r),
(t.$$.on_mount = []);
}),
o.forEach(V);
}
function $t(t, e) {
const n = t.$$;
n.fragment !== null &&
(A(n.on_destroy),
n.fragment && n.fragment.d(e),
(n.on_destroy = n.fragment = null),
(n.ctx = []));
}
function Et(t, e) {
t.$$.dirty[0] === -1 && (E.push(t), yt(), t.$$.dirty.fill(0)),
(t.$$.dirty[(e / 31) | 0] |= 1 << e % 31);
}
function Nt(t, e, n, i, l, o, r, f = [-1]) {
const u = q;
w(t);
const c = (t.$$ = {
fragment: null,
ctx: [],
props: o,
update: L,
not_equal: l,
bound: z(),
on_mount: [],
on_destroy: [],
on_disconnect: [],
before_update: [],
after_update: [],
context: new Map(e.context || (u ? u.$$.context : [])),
callbacks: z(),
dirty: f,
skip_bound: !1,
root: e.target || u.$$.root,
});
r && r(c.root);
let d = !1;
if (
((c.ctx = n
? n(t, e.props || {}, (a, m, ...g) => {
const v = g.length ? g[0] : m;
return (
c.ctx &&
l(c.ctx[a], (c.ctx[a] = v)) &&
(!c.skip_bound && c.bound[a] && c.bound[a](v), d && Et(t, a)),
m
);
})
: []),
c.update(),
(d = !0),
A(c.before_update),
(c.fragment = i ? i(c.ctx) : !1),
e.target)
) {
if (e.hydrate) {
ot();
const a = x(e.target);
c.fragment && c.fragment.l(a), a.forEach(y);
} else c.fragment && c.fragment.c();
e.intro && et(t.$$.fragment),
vt(t, e.target, e.anchor, e.customElement),
st(),
tt();
}
w(u);
}
class wt {
$destroy() {
$t(this, 1), (this.$destroy = L);
}
$on(e, n) {
if (!X(n)) return L;
const i = this.$$.callbacks[e] || (this.$$.callbacks[e] = []);
return (
i.push(n),
() => {
const l = i.indexOf(n);
l !== -1 && i.splice(l, 1);
}
);
}
$set(e) {
this.$$set &&
!lt(e) &&
((this.$$.skip_bound = !0), this.$$set(e), (this.$$.skip_bound = !1));
}
}
function At(t) {
let e, n, i, l, o, r, f, u, c, d, a, m, g, v;
const B = t[4].default,
h = rt(B, t, t[3], null);
return {
c() {
(e = b("div")),
(n = b("button")),
(i = N("-")),
(l = O()),
(o = b("pre")),
(r = N(t[0])),
(f = O()),
(u = b("button")),
(c = N("+")),
(d = O()),
(a = b("div")),
h && h.c(),
this.h();
},
l(s) {
e = $(s, "DIV", { class: !0 });
var _ = x(e);
n = $(_, "BUTTON", {});
var H = x(n);
(i = T(H, "-")), H.forEach(y), (l = I(_)), (o = $(_, "PRE", {}));
var R = x(o);
(r = T(R, t[0])), R.forEach(y), (f = I(_)), (u = $(_, "BUTTON", {}));
var U = x(u);
(c = T(U, "+")),
U.forEach(y),
_.forEach(y),
(d = I(s)),
(a = $(s, "DIV", { class: !0 }));
var W = x(a);
h && h.l(W), W.forEach(y), this.h();
},
h() {
G(e, "class", "counter svelte-14xytdo"),
G(a, "class", "message svelte-14xytdo");
},
m(s, _) {
M(s, e, _),
p(e, n),
p(n, i),
p(e, l),
p(e, o),
p(o, r),
p(e, f),
p(e, u),
p(u, c),
M(s, d, _),
M(s, a, _),
h && h.m(a, null),
(m = !0),
g || ((v = [F(n, "click", t[2]), F(u, "click", t[1])]), (g = !0));
},
p(s, [_]) {
(!m || _ & 1) && mt(r, s[0]),
h &&
h.p &&
(!m || _ & 8) &&
ct(h, B, s, s[3], m ? ut(B, s[3], _, null) : ft(s[3]), null);
},
i(s) {
m || (et(h, s), (m = !0));
},
o(s) {
xt(h, s), (m = !1);
},
d(s) {
s && y(e), s && y(d), s && y(a), h && h.d(s), (g = !1), A(v);
},
};
}
function St(t, e, n) {
let { $$slots: i = {}, $$scope: l } = e,
o = 0;
function r() {
n(0, (o += Math.PI));
}
function f() {
n(0, (o -= 1));
}
return (
(t.$$set = (u) => {
"$$scope" in u && n(3, (l = u.$$scope));
}),
[o, r, f, l, i]
);
}
class jt extends wt {
constructor(e) {
super(), Nt(this, e, St, At, it, {});
}
}
export { jt as default };
<script lang="ts">
import { invalid_attribute_name_character } from "svelte/internal";
let count = 0;
function add() {
count += Math.PI;
}
function subtract() {
count -= 1;
}
</script>
<div class="counter">
<button on:click={subtract}>-</button>
<pre>{count}</pre>
<button on:click={add}>+</button>
</div>
<div class="message">
<slot />
</div>
<style>
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.message {
text-align: center;
}
</style>
---
// Component Imports
import Counter from "../components/Counter.svelte";
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style>
html,
body {
font-family: system-ui;
margin: 0;
}
body {
padding: 2rem;
}
</style>
</head>
<body>
<main>
<Counter client:visible>
<h1>Hello, Svelte A!</h1>
</Counter>
<Counter client:visible>
<h1>Hello, Svelte B!</h1>
</Counter>
<Counter client:visible>
<h1>Hello, Svelte C!</h1>
</Counter>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment