1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
// Separate import from the rest so it doesn't get re-organized after other imports
import './server-shim.js';
import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
import * as parse5 from 'parse5';
function isCustomElementTag(name) {
return typeof name === 'string' && name.includes('-');
}
function getCustomElementConstructor(name) {
if (typeof customElements !== 'undefined' && isCustomElementTag(name)) {
return customElements.get(name) || null;
} else if (typeof name === 'function') {
return name;
}
return null;
}
async function isLitElement(Component) {
const Ctr = getCustomElementConstructor(Component);
return !!Ctr?._$litElement$;
}
async function check(Component) {
// Lit doesn't support getting a tagName from a Constructor at this time.
// So this must be a string at the moment.
return !!(await isLitElement(Component));
}
function* render(Component, attrs, slots) {
let tagName = Component;
if (typeof tagName !== 'string') {
tagName = Component[Symbol.for('tagName')];
}
const instance = new LitElementRenderer(tagName);
// LitElementRenderer creates a new element instance, so copy over.
const Ctr = getCustomElementConstructor(tagName);
let shouldDeferHydration = false;
if (attrs) {
for (let [name, value] of Object.entries(attrs)) {
const isReactiveProperty = name in Ctr.prototype;
const isReflectedReactiveProperty = Ctr.elementProperties.get(name)?.reflect;
// Only defer hydration if we are setting a reactive property that cannot
// be reflected / serialized as a property.
shouldDeferHydration ||= isReactiveProperty && !isReflectedReactiveProperty;
if (isReactiveProperty) {
instance.setProperty(name, value);
} else {
instance.setAttribute(name, value);
}
}
}
instance.connectedCallback();
yield `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`;
yield* instance.renderAttributes();
yield `>`;
const shadowContents = instance.renderShadow({
elementRenderers: [LitElementRenderer],
customElementInstanceStack: [instance],
customElementHostStack: [instance],
deferHydration: false,
});
if (shadowContents !== undefined) {
const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {};
// `delegatesFocus` is intentionally allowed to coerce to boolean to
// match web platform behavior.
const delegatesfocusAttr = delegatesFocus ? ' shadowrootdelegatesfocus' : '';
yield `<template shadowroot="${mode}" shadowrootmode="${mode}"${delegatesfocusAttr}>`;
yield* shadowContents;
yield '</template>';
}
if (slots) {
for (let [slot, value = ''] of Object.entries(slots)) {
if (slot !== 'default' && value) {
// Parse the value as a concatenated string
const fragment = parse5.parseFragment(`${value}`);
// Add the missing slot attribute to child Element nodes
for (const node of fragment.childNodes) {
if (node.tagName && !node.attrs.some(({ name }) => name === 'slot')) {
node.attrs.push({ name: 'slot', value: slot });
}
}
value = parse5.serialize(fragment);
}
yield value;
}
}
yield `</${tagName}>`;
}
async function renderToStaticMarkup(Component, props, slots) {
let tagName = Component;
let out = '';
for (let chunk of render(tagName, props, slots)) {
out += chunk;
}
return {
html: out,
};
}
export default {
name: '@astrojs/lit',
check,
renderToStaticMarkup,
};
|
