feat: update to lit3 to fix ssr

.changeset/big-meals-matter.md

@@ -0,0 +1,6 @@
+---
+'@rocket/building-rollup': minor
+'@rocket/cli': minor
+---
+
+Update to Rollup v3 + all plugins that require it

examples/01-hydration-starter/package.json

@@ -14,7 +14,7 @@
     "@rocket/cli": "^0.20.0",
     "@rocket/engine": "^0.2.0",
     "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Hydration Starter",
   "imports": {

examples/02-blog-starter/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@rocket/cli": "^0.20.0",
     "@rocket/engine": "^0.2.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Blog Starter"
 }

examples/03-minimal-starter/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@rocket/cli": "^0.20.0",
     "@rocket/engine": "^0.2.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Minimal Starter"
 }

examples/04-sanity-minimal-starter/frontend/package.json

@@ -18,7 +18,7 @@
     "@sanity/client": "^3.1.0",
     "@sanity/image-url": "^1.0.1",
     "dotenv": "^16.0.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Sanity Minimal Starter"
 }

examples/50-landing-theme-spark/package.json

@@ -15,7 +15,7 @@
     "@rocket/components": "^0.2.0",
     "@rocket/engine": "^0.2.0",
     "@rocket/spark": "^0.2.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Landing Page (@rocket/spark Theme)",
   "imports": {

examples/51-docs-theme-launch/package.json

@@ -15,7 +15,7 @@
     "@rocket/engine": "^0.2.0",
     "@rocket/launch": "^0.21.0",
     "@rocket/search": "^0.7.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "@rocket/template-name": "Documentation Website (@rocket/launch Theme)",
   "imports": {

package.json

@@ -12,6 +12,7 @@
     "analyze:analyze": "node scripts/workspaces-scripts-bin.mjs analyze",
     "build": "npm run rocket:build",
     "build:site": "run-s analyze:* rocket:build",
+    "build:start": "npm run rocket:build && cd _site && npx http-server -o -p 9000",
     "changeset": "changeset",
     "debug": "web-test-runner --watch --config web-test-runner-chrome.config.mjs",
     "debug:firefox": "web-test-runner --watch --config web-test-runner-firefox.config.mjs",
@@ -32,6 +33,7 @@
     "search": "node packages/cli/src/cli.js search",
     "start": "NODE_DEBUG=engine:rendering node --trace-warnings packages/cli/src/cli.js start --open",
     "start:experimental": "NODE_DEBUG=engine:rendering node --no-warnings --experimental-loader ./packages/engine/src/litCssLoader.js packages/cli/src/cli.js start --open",
+    "start:build": "cd _site && npx http-server -o -p 9000",
     "test": "npm run test:node && npm run test:web",
     "test:integration": "playwright test packages/*/test-node/*.spec.js --retries=3",
     "test:node": "npm run test:unit && npm run test:integration",
@@ -48,9 +50,10 @@
     "@custom-elements-manifest/analyzer": "^0.4.12",
     "@open-wc/testing": "^3.1.2",
     "@playwright/test": "^1.18.1",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-typescript": "^8.1.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@types/chai": "^4.2.14",
     "@types/fs-extra": "^9.0.6",
     "@types/mocha": "^9.0.0",
@@ -82,8 +85,7 @@
     "puppeteer": "^13.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.36.1",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup": "^3.0.0",
     "sinon": "^9.2.3",
     "ts-node": "^9.1.1",
     "typescript": "^4.8.4",

packages/building-rollup/package.json

@@ -52,20 +52,20 @@
     "rollup"
   ],
   "peerDependencies": {
-    "rollup": "^2.35.0"
+    "rollup": "^3.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.12.11",
-    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@web/rollup-plugin-html": "^1.8.0",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.4",
-    "@web/rollup-plugin-polyfills-loader": "^1.1.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@web/rollup-plugin-html": "^2.0.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.0.0",
+    "@web/rollup-plugin-polyfills-loader": "^2.0.0",
     "browserslist": "^4.16.1",
     "plugins-manager": "^0.3.1",
-    "rollup-plugin-terser": "^7.0.2",
     "workbox-broadcast-update": "^6.1.5",
     "workbox-cacheable-response": "^6.1.5",
     "workbox-expiration": "^6.1.5",

packages/building-rollup/src/createBasicConfig.js

@@ -1,12 +1,9 @@
 import resolve from '@rollup/plugin-node-resolve';
-// @ts-ignore
-import { terser } from 'rollup-plugin-terser';
-import babelPkg from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+import { babel } from '@rollup/plugin-babel';
 
 import { applyPlugins } from 'plugins-manager';
 
-const { babel } = babelPkg;
-
 /** @typedef {import('../types/main.js').BuildingRollupOptions} BuildingRollupOptions */
 
 /**
@@ -84,6 +81,7 @@ export function createBasicMetaConfig(userConfig = { output: {} }) {
       },
     },
     {
+      // @ts-ignore
       plugin: terser,
       options: {},
     },

packages/building-rollup/src/createServiceWorkerConfig.js

@@ -1,13 +1,10 @@
 import resolve from '@rollup/plugin-node-resolve';
-// @ts-ignore
-import { terser } from 'rollup-plugin-terser';
-import babelPkg from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 
 import { applyPlugins } from 'plugins-manager';
 
-const { babel } = babelPkg;
-
 /** @typedef {import('../types/main.js').BuildingRollupOptions} BuildingRollupOptions */
 
 /**
@@ -86,6 +83,7 @@ export function createServiceWorkerMetaConfig(userConfig = { output: {} }) {
       },
     },
     {
+      // @ts-ignore
       plugin: terser,
       options: {
         mangle: {

packages/cli/package.json

@@ -52,7 +52,7 @@
     "rollup"
   ],
   "dependencies": {
-    "@rocket/building-rollup": "^0.4.0",
+    "@rocket/building-rollup": "^0.4.1",
     "@rocket/engine": "^0.2.7",
     "check-html-links": "^0.2.4",
     "colorette": "^2.0.16",

packages/cli/test-node/01-config.test.js

@@ -74,7 +74,7 @@ describe('Config', () => {
       testOptions: { captureLogs: true },
     });
     await build();
-    const inlineModule = await readOutput('e97af63d.js', { format: false });
+    const inlineModule = await readOutput('ddcef8d1.js', { format: false });
     expect(inlineModule).to.equal('var a={test:"data"};console.log(a);\n');
   });
 

packages/components/package.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@webcomponents/template-shadowroot": "^0.1.0",
     "fontawesome-free": "^1.0.4",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "devDependencies": {},
   "types": "./dist-types/exports/index.d.ts",

packages/engine/package.json

@@ -47,12 +47,12 @@
   ],
   "dependencies": {
     "@d4kmor/tree-model": "^0.1.3",
-    "@lit-labs/ssr": "^2.2.3",
+    "@lit-labs/ssr": "^3.0.0",
     "@mdjs/core": "^0.20.0",
     "@parcel/watcher": "^2.0.5",
     "@web/dev-server": "^0.1.4",
     "es-module-lexer": "^0.10.5",
-    "lit": "^2.3.0",
+    "lit": "^3.0.0",
     "plugins-manager": "^0.3.0",
     "sax-wasm": "^2.1.3",
     "unist-util-visit": "^4.1.0"

packages/engine/src/hydration/HydrationLoader.js

@@ -267,7 +267,9 @@ export class HydrationLoader {
     if (this.isSetup === false) {
       // Start fetching the Lit hydration support module (note the absence
       // of "await" -- we don't want to block yet).
-      const litHydrateSupportInstalled = import('lit/experimental-hydrate-support.js');
+      const litHydrateSupportInstalled = import(
+        '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+      );
 
       // Check if we require the declarative shadow DOM polyfill. As of
       // February 2022, Chrome and Edge have native support, but Firefox

packages/launch/package.json

@@ -53,7 +53,7 @@
     "@rocket/components": "^0.2.0",
     "@rocket/engine": "^0.2.7",
     "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.3.0",
+    "lit": "^3.0.0",
     "plugins-manager": "^0.3.1",
     "workbox-window": "^6.1.5"
   },

packages/mdjs-preview/index.js

@@ -9,7 +9,6 @@ export {
   getCompatibleStyle,
   supportsAdoptingStyleSheets,
   unsafeCSS,
-  UpdatingElement,
   notEqual,
   ReactiveElement,
   svg,

packages/mdjs-preview/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@lion/accordion": "^0.9.0",
     "@open-wc/scoped-elements": "^2.0.0",
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "types": "dist-types/index.d.ts"
 }

packages/mdjs-preview/server/LayoutSimulator.js

@@ -19,7 +19,6 @@ export class LayoutSimulator {
             import { render } from '@mdjs/mdjs-story';
 
             function sanitize(input, type) {
-              console.log('sanitize', input, type);
               return \`\${document.location.origin}/\${
                 input.match(/[a-zA-Z0-9-_\\/]*/)[0]
               }.\${type}\`;

packages/mdjs-preview/src/MdJsPreview.js

@@ -671,7 +671,6 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
           ? html`
               <iframe
                 part="iframe"
-                csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
                 .src=${this.iframeUrl}
                 style=${`width: ${this.sizeData.width}px; height: ${this.deviceHeight}px;`}
               ></iframe>
@@ -963,6 +962,10 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
         border-radius: 3px;
       }
 
+      iframe {
+        min-height: 50px;
+      }
+
       /** Showing/Hiding additional code blocks **/
       ::slotted(pre) {
         display: none;

packages/mdjs-preview/src/resizeHandler.js

@@ -6,14 +6,18 @@ export function addResizeHandler() {
     return;
   }
   window.addEventListener('message', ev => {
-    const data = JSON.parse(ev.data);
-    if (data.action === 'mdjs-viewer-resize') {
-      const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ (
-        document.body.querySelector(`[mdjs-story-name="${data.storyKey}"]`)
-      );
-      if (viewer) {
-        viewer.contentHeight = data.height;
+    try {
+      const data = JSON.parse(ev.data);
+      if (data.action === 'mdjs-viewer-resize') {
+        const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ (
+          document.body.querySelector(`[mdjs-story-name="${data.storyKey}"]`)
+        );
+        if (viewer) {
+          viewer.contentHeight = data.height;
+        }
       }
+    } catch (error) {
+      // do nothing
     }
   });
 }

packages/mdjs-story/index.js

@@ -9,7 +9,6 @@ export {
   getCompatibleStyle,
   supportsAdoptingStyleSheets,
   unsafeCSS,
-  UpdatingElement,
   notEqual,
   ReactiveElement,
   svg,

packages/mdjs-story/package.json

@@ -31,7 +31,7 @@
     "src"
   ],
   "dependencies": {
-    "lit": "^2.3.0"
+    "lit": "^3.0.0"
   },
   "types": "dist-types/index.d.ts"
 }

presets/spark/package.json

@@ -42,7 +42,7 @@
   "dependencies": {
     "@rocket/components": "^0.2.0",
     "@rocket/engine": "^0.2.6",
-    "lit": "^2.3.0",
+    "lit": "^3.0.0",
     "plugins-manager": "^0.3.1"
   },
   "wireit": {

site/pages/20--presets/30--spark/20--demo.rocket.js

@@ -6,8 +6,6 @@ export { html, setupUnifiedPlugins, openGraphLayout };
 export async function registerCustomElements() {
   // server-only components
   // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // prettier-ignore
   customElements.define('rocket-header-scroll-menu', await import('@rocket/components/header-scroll-menu.js').then(m => m.RocketHeaderScrollMenu));
   // prettier-ignore
   customElements.define('permanent-notification', await import('@rocket/components/permanent-notification.js').then(m => m.PermanentNotification));

site/pages/40--blog/index.rocket.js

@@ -9,8 +9,6 @@ export async function registerCustomElements() {
   // prettier-ignore
   customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
   // prettier-ignore
-  customElements.define('launch-blog-preview', await import('@rocket/launch/blog-preview.js').then(m => m.LaunchBlogPreview));
-  // prettier-ignore
   customElements.define('launch-blog-overview', await import('@rocket/launch/blog-overview.js').then(m => m.LaunchBlogOverview));
   // prettier-ignore
   customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));