feat: update to lit3 to fix ssr

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",

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));