Adds support for a Lit renderer (#665)

* Adds support for a Lit renderer

This adds `@astrojs/renderer-lit`. An experimental Lit renderer.

* Removed cached submodule, mistake

* Prevent globals clobbering

* Add docs on globals

1 files changed, 64 insertions, 0 deletions

diff --git a/packages/renderers/renderer-lit/server.js b/packages/renderers/renderer-lit/server.js
new file mode 100644
index 000000000..83e1d51b4
--- /dev/null
+++ b/packages/renderers/renderer-lit/server.js
@@ -0,0 +1,64 @@
+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;
+  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
+};