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'`