diff options
Diffstat (limited to 'packages/integrations/lit/server.js')
-rw-r--r-- | packages/integrations/lit/server.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js new file mode 100644 index 000000000..1622ef619 --- /dev/null +++ b/packages/integrations/lit/server.js @@ -0,0 +1,72 @@ +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. + const Ctr = getCustomElementConstructor(tagName); + for (let [name, value] of Object.entries(attrs)) { + // check if this is a reactive property + if (name in Ctr.prototype) { + instance.setProperty(name, value); + } else { + instance.setAttribute(name, value); + } + } + + instance.connectedCallback(); + + yield `<${tagName}`; + yield* instance.renderAttributes(); + yield `>`; + const shadowContents = instance.renderShadow({}); + if (shadowContents !== undefined) { + yield '<template shadowroot="open">'; + yield* shadowContents; + yield '</template>'; + } + yield children || ''; // don’t 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, +}; |