astro/packages/renderers/renderer-lit/server.js
Drew Powers 330620e1b3 Update renderer API for Vite (#1623)
* Update renderer API for Vite

* Fix lit-element tests

* Clean up comments

* Throw friendly error if renderer provides viteConfig in a bad format
2021-10-22 16:25:38 -06:00

64 lines
1.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import './server-shim.js';
import '@lit-labs/ssr/lib/render-lit-html.js';
import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
function isCustomElementTag(name) {
return typeof name === 'string' && /-/.test(name);
}
function getCustomElementConstructor(name) {
if (typeof customElements !== 'undefined' && isCustomElementTag(name)) {
return customElements.get(name) || null;
}
return null;
}
async function isLitElement(Component) {
const Ctr = getCustomElementConstructor(Component);
return !!(Ctr && Ctr._$litElement$);
}
async function check(Component, _props, _children) {
// 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(tagName, attrs, children) {
const instance = new LitElementRenderer(tagName);
// LitElementRenderer creates a new element instance, so copy over.
for (let [name, value] of Object.entries(attrs)) {
instance.setAttribute(name, value);
}
yield `<${tagName}`;
yield* instance.renderAttributes();
yield `>`;
const shadowContents = instance.renderShadow({});
if (shadowContents !== undefined) {
yield '<template shadowroot="open">';
yield* shadowContents;
yield '</template>';
}
yield children || ''; // dont print “undefined” as string
yield `</${tagName}>`;
}
async function renderToStaticMarkup(Component, props, children) {
let tagName = Component;
let out = '';
for (let chunk of render(tagName, props, children)) {
out += chunk;
}
return {
html: out,
};
}
export default {
check,
renderToStaticMarkup,
};