docs: try some ssr

package.json

@@ -204,6 +204,13 @@
         "wireit": "^0.14.3",
         "yargs": "^17.2.1"
     },
+    "resolutions": {
+        "@lit-labs/observers": "2.0.2",
+        "@lit/reactive-element": "1.6.3",
+        "lit": "2.8.0",
+        "lit-element": "3.3.3",
+        "lit-html": "2.8.0"
+    },
     "wireit": {
         "build:css:watch": {
             "command": "node ./tasks/watch-css.js",

packages/action-button/src/ActionButton.ts

@@ -116,7 +116,9 @@ export class ActionButton extends SizedMixin(ButtonBase, {
 
     constructor() {
         super();
-        this.addEventListener('click', this.onClick);
+        if ('addEventListener' in this) {
+            this.addEventListener('click', this.onClick);
+        }
     }
 
     private onClick = (): void => {

packages/button/src/ButtonBase.ts

@@ -71,9 +71,11 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         super();
         this.proxyFocus = this.proxyFocus.bind(this);
 
-        this.addEventListener('click', this.handleClickCapture, {
-            capture: true,
-        });
+        if ('addEventListener' in this) {
+            this.addEventListener('click', this.handleClickCapture, {
+                capture: true,
+            });
+        }
     }
 
     public override click(): void {

patches/@lit-labs+observers+2.0.2.patch

@@ -0,0 +1,8 @@
+diff --git a/node_modules/@lit-labs/observers/mutation-controller.js b/node_modules/@lit-labs/observers/mutation-controller.js
+index 65d9a23..c41fa07 100644
+--- a/node_modules/@lit-labs/observers/mutation-controller.js
++++ b/node_modules/@lit-labs/observers/mutation-controller.js
+@@ -1,2 +1,2 @@
+-class t{constructor(t,{target:s,config:i,callback:h,skipInitial:o}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,null!==s&&this.t.add(s??t),this.l=i,this.o=o??this.o,this.callback=h,window.MutationObserver?(this.u=new MutationObserver((t=>{this.handleChanges(t),this.h.requestUpdate()})),t.addController(this)):console.warn("MutationController error: browser does not support MutationObserver.")}handleChanges(t){this.value=this.callback?.(t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){const t=this.u.takeRecords();(t.length||!this.o&&this.i)&&this.handleChanges(t),this.i=!1}observe(t){this.t.add(t),this.u.observe(t,this.l),this.i=!0,this.h.requestUpdate()}disconnect(){this.u.disconnect()}}export{t as MutationController};
++class t{constructor(t,{target:s,config:i,callback:h,skipInitial:o}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,null!==s&&this.t.add(s??t),this.l=i,this.o=o??this.o,this.callback=h,globalThis.MutationObserver?(this.u=new MutationObserver((t=>{this.handleChanges(t),this.h.requestUpdate()})),t.addController(this)):console.warn("MutationController error: browser does not support MutationObserver.")}handleChanges(t){this.value=this.callback?.(t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){const t=this.u.takeRecords();(t.length||!this.o&&this.i)&&this.handleChanges(t),this.i=!1}observe(t){this.t.add(t),this.u.observe(t,this.l),this.i=!0,this.h.requestUpdate()}disconnect(){this.u.disconnect()}}export{t as MutationController};
+ //# sourceMappingURL=mutation-controller.js.map

projects/documentation/.eleventy.js

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
 import markdownIt from 'markdown-it';
 import markdownItAnchors from 'markdown-it-anchor';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 const packageVersion = async function (packageName) {
     let packageJSON = {};
@@ -39,13 +40,13 @@ export default function (eleventyConfig) {
     eleventyConfig.addShortcode('packageVersion', packageVersion);
     eleventyConfig.addNunjucksGlobal('WATCH_MODE', process.env.WATCH_MODE);
     eleventyConfig.setUseGitIgnore(false);
-    eleventyConfig.addPassthroughCopy('./content/favicon.ico');
-    eleventyConfig.addPassthroughCopy('./content/favicon.svg');
-    eleventyConfig.addPassthroughCopy('./content/404.html');
-    eleventyConfig.addPassthroughCopy('./content/serviceWorker.js');
-    eleventyConfig.addPassthroughCopy('./content/images/**/*');
-    eleventyConfig.addPassthroughCopy('./content/manifest.webmanifest');
-    eleventyConfig.addPassthroughCopy('../src/**/*.css');
+    eleventyConfig.addPassthroughCopy('content/favicon.ico');
+    eleventyConfig.addPassthroughCopy('content/favicon.svg');
+    eleventyConfig.addPassthroughCopy('content/404.html');
+    eleventyConfig.addPassthroughCopy('content/serviceWorker.js');
+    eleventyConfig.addPassthroughCopy('content/images/**/*');
+    eleventyConfig.addPassthroughCopy('content/manifest.webmanifest');
+    eleventyConfig.addPassthroughCopy('src/**/*.css');
     eleventyConfig.addPlugin(syntaxHighlight, {
         init: function ({ Prism }) {
             Prism.languages['html-live'] = Prism.languages.html;
@@ -184,6 +185,11 @@ export default function (eleventyConfig) {
             });
     });
 
+    eleventyConfig.addPlugin(litPlugin, {
+        mode: 'vm',
+        componentModules: ['_site/src/components/layout-element.js'],
+    });
+
     return {
         dir: { input: 'content', output: '_site' },
         passthroughFileCopy: true,

projects/documentation/.gitignore

@@ -25,3 +25,6 @@ src/custom-elements.json
 dist/
 !web-dev-server.config.js
 stats.html
+
+!src/components/*.css.ts
+!**/*.css

projects/documentation/package.json

@@ -29,6 +29,7 @@
         "@11ty/eleventy": "^3.0.0-alpha.4",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@fullhuman/postcss-purgecss": "^5.0.0",
+        "@lit-labs/eleventy-plugin-lit": "1.0.1",
         "@open-wc/building-rollup": "^3.0.2",
         "@rollup/plugin-alias": "^5.0.1",
         "@rollup/plugin-commonjs": "^25.0.7",
@@ -82,9 +83,6 @@
         },
         "build:assets": {
             "dependencies": [
-                {
-                    "script": "build:ts"
-                },
                 {
                     "script": "build:move-css"
                 },
@@ -94,8 +92,12 @@
             ]
         },
         "build:eleventy": {
-            "command": "eleventy --config=.eleventy.js --incremental --quiet",
+            "command": "NODE_OPTIONS=--experimental-vm-modules eleventy --config=.eleventy.js --incremental --quiet",
             "dependencies": [
+                {
+                    "script": "build:ts",
+                    "cascade": false
+                },
                 {
                     "script": "copy-docs"
                 }

projects/documentation/rollup.config.js

@@ -82,6 +82,7 @@ export default async () => {
                         removeStyleLinkTypeAttributes: true,
                         useShortDoctype: true,
                         minifyCSS: true,
+                        ignoreCustomComments: [/lit-/],
                         /** @param {string} code */
                         minifyJS: (code) => Terser.minify(code).code,
                     }),

projects/documentation/scripts/build-ts.js

@@ -20,6 +20,7 @@ import cssnano from 'cssnano';
 async function main() {
     await build({
         entryPoints: [
+            './src/components/layout-element.ts',
             './src/components.ts',
             './src/getting-started.ts',
             './src/index.ts',
@@ -63,7 +64,14 @@ async function main() {
                 },
             }),
         ],
-        external: ['@spectrum-web-components/*'],
+        external: [
+            '@lit/reactive-element',
+            'lit',
+            'lit-element',
+            'lit-html',
+            '@spectrum-web-components/*',
+            './layout-element.js',
+        ],
     });
     process.exit(0);
 }

projects/documentation/src/components/code-example.ts

@@ -29,7 +29,7 @@ import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
 import { copyNode } from './copy-to-clipboard.js';
-import { TrackTheme } from './layout.js';
+import { TrackTheme } from './layout-element.js';
 import { Color } from '@spectrum-web-components/theme';
 
 @customElement('code-example')