fix(playground): fix the broken playground (#1410)

update playground-elements to v0.20.0 which is more resilient to missing modules, and switch off of unpkg and onto jsdelivr for better stability

Author: e111077

package-lock.json

@@ -61,7 +61,7 @@
     }
   },
   "devDependencies": {
-    "playground-elements": "^0.18.0",
+    "playground-elements": "^0.20.0",
     "prettier": "^2.1.2",
     "typescript": "~4.7.4",
     "wireit": "^0.14.0"

package.json

@@ -56,6 +56,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
   eleventyConfig.addPlugin(playgroundPlugin, {
     sandboxUrl: ENV.playgroundSandboxUrl,
+    cdnBaseUrl: ENV.playgroundCdnBaseUrl,
     isDevMode: DEV,
   });
   if (!DEV) {
@@ -65,14 +66,6 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy('site/fonts');
     eleventyConfig.addPassthroughCopy('site/images');
     eleventyConfig.addPassthroughCopy('samples');
-    // The Playground web worker is loaded directly from the main origin, so it
-    // should be in our js directory. We don't need the service worker, though,
-    // because that will be served directly out of node_modules/ by the
-    // dedicated Playground sandbox server.
-    eleventyConfig.addPassthroughCopy({
-      [require.resolve('playground-elements/playground-typescript-worker.js')]:
-        './js/playground-typescript-worker.js',
-    });
   }
   eleventyConfig.addPassthroughCopy('api/**/*');
 

packages/lit-dev-content/.eleventy.js

@@ -104,6 +104,24 @@ export default [
     preserveEntrySignatures: false,
   },
 
+  // Bundle the TS worker so that we don't have to deal with passing through
+  // the the worker's deps. Make sure there is only one input in this config.
+  {
+    input: ['lib/components/playground-typescript-worker.js'],
+    output: {
+      dir: 'rollupout',
+      format: 'esm',
+    },
+    plugins: [
+      resolve(),
+      terser(terserOptions),
+      summary({
+        // Already minified.
+        showMinifiedSize: false,
+      }),
+    ],
+  },
+
   // A separate bundle is made for the server so that we do not modify the
   // client module graph just to SSR a component.
   {

packages/lit-dev-content/rollup.config.js

@@ -18,6 +18,7 @@ module.exports = {
   DEV: ENV.eleventyMode === 'dev',
   MAIN_URL: ENV.mainUrl,
   PLAYGROUND_SANDBOX: ENV.playgroundSandboxUrl,
+  PLAYGROUND_CDN_BASE_URL: ENV.playgroundCdnBaseUrl,
   GOOGLE_ANALYTICS_ID: ENV.googleAnalyticsId,
   GITHUB_CLIENT_ID: ENV.githubClientId,
   GITHUB_AUTHORIZE_URL: `${trimTrailingSlash(ENV.githubMainUrl)}/login/oauth/authorize`,

packages/lit-dev-content/site/_data/env.js

@@ -77,6 +77,7 @@ <h2 class="exampleSectionHeading">{{ section.name }}</h2>
 
   <playground-project
      sandbox-base-url="{{ env.PLAYGROUND_SANDBOX }}"
+     cdn-base-url="{{ env.PLAYGROUND_CDN_BASE_URL }}"
      id="project">
   </playground-project>
 

packages/lit-dev-content/site/playground/index.html

@@ -26,6 +26,7 @@
 <div id="editorAndPreview">
   <playground-project
      sandbox-base-url="{{ env.PLAYGROUND_SANDBOX }}"
+     cdn-base-url="{{ env.PLAYGROUND_CDN_BASE_URL }}"
      id="tutorialProject">
   </playground-project>
 

packages/lit-dev-content/site/tutorials/view.html

@@ -140,6 +140,12 @@ export class LitDevExample extends LitElement {
   @property({attribute: 'sandbox-base-url'})
   sandboxBaseUrl?: string;
 
+  /**
+   * Base URL for CDN.
+   */
+  @property({attribute: 'cdn-base-url'})
+  cdnBaseUrl?: string;
+
   override connectedCallback() {
     super.connectedCallback();
     window.addEventListener(
@@ -190,6 +196,7 @@ export class LitDevExample extends LitElement {
           // will load its serviceworker on firstUpdated
           html`<playground-project
             sandbox-base-url=${ifDefined(this.sandboxBaseUrl)}
+            cdn-base-url=${ifDefined(this.cdnBaseUrl)}
             id="project"
             project-src=${projectSrc}
           >

packages/lit-dev-content/src/components/litdev-example.ts

@@ -0,0 +1 @@
+import 'playground-elements/playground-typescript-worker.js';

packages/lit-dev-content/src/components/playground-typescript-worker.ts

@@ -171,7 +171,7 @@ export const contentSecurityPolicyMiddleware = (
     // Allow bare module specifiers to be fetched from unpkg. Note this does not
     // restrict the user from directly importing from arbitrary other URLs in
     // their import statements when using the Playground.
-    `connect-src https://unpkg.com/`,
+    `connect-src https://unpkg.com/ https://cdn.jsdelivr.net/`,
 
     // Disallow everything else.
     `default-src 'none'`

packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts

@@ -14,6 +14,7 @@ interface LitDevEnvironment {
   googleAnalyticsId: string;
   reportCspViolations: boolean;
   playgroundSandboxUrl: string;
+  playgroundCdnBaseUrl: string;
   mainUrl: string;
   githubMainUrl: string;
   githubApiUrl: string;
@@ -74,6 +75,7 @@ export const dev = environment({
   eleventyOutDir: '_dev',
   googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
   reportCspViolations: false,
+  playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
   get mainUrl() {
     return `http://localhost:${this.mainPort}`;
   },
@@ -110,6 +112,7 @@ const local = environment({
   eleventyOutDir: '_site',
   googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
   reportCspViolations: false,
+  playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
   get mainUrl() {
     return `http://localhost:${this.mainPort}`;
   },
@@ -154,6 +157,7 @@ const pr = environment({
   eleventyOutDir: '_site',
   googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
   reportCspViolations: false,
+  playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
   get mainUrl() {
     const tag = stringEnv('REVISION_TAG');
     return `https://${tag}---lit-dev-5ftespv5na-uc.a.run.app`;
@@ -196,6 +200,7 @@ const prod = environment({
   eleventyOutDir: '_site',
   googleAnalyticsId: 'G-FTZ6CJP9F3',
   reportCspViolations: true,
+  playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
   mainUrl: 'https://lit.dev',
   playgroundSandboxUrl: 'https://playground.lit.dev/',
   githubMainUrl: 'https://github.com/',

packages/lit-dev-tools-cjs/src/lit-dev-environments.ts

@@ -89,7 +89,11 @@ const countVisibleLines = (filename: string, code: string): number => {
  */
 export const playgroundPlugin = (
   eleventyConfig: EleventyConfig,
-  {sandboxUrl, isDevMode}: {sandboxUrl: string; isDevMode: boolean}
+  {
+    sandboxUrl,
+    isDevMode,
+    cdnBaseUrl,
+  }: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string}
 ) => {
   let renderer: BlockingRenderer | undefined;
 
@@ -185,6 +189,7 @@ export const playgroundPlugin = (
       // the closing tag correctly because it will be in a  `<p>></p>`.
       return `
     <litdev-example ${sandboxUrl ? `sandbox-base-url="${sandboxUrl}"` : ''}
+      ${cdnBaseUrl ? `cdn-base-url="${cdnBaseUrl}"` : ''}
       style="--litdev-example-editor-lines-ts:${numVisibleLines.ts};
              --litdev-example-editor-lines-js:${numVisibleLines.js};
              --litdev-example-preview-height:${previewHeight};"
@@ -227,6 +232,7 @@ export const playgroundPlugin = (
       const previewHeight = config.previewHeight ?? '120px';
       return `
       <litdev-example ${sandboxUrl ? `sandbox-base-url='${sandboxUrl}'` : ''}
+        ${cdnBaseUrl ? `cdn-base-url="${cdnBaseUrl}"` : ''}
         style="--litdev-example-editor-lines-ts:${numVisibleLines.ts};
                --litdev-example-editor-lines-js:${numVisibleLines.js};
                --litdev-example-preview-height:${previewHeight}"