Skip to content

Commit 012037c

Browse files
authored
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
1 parent 25caa22 commit 012037c

File tree

12 files changed

+61
-20
lines changed

12 files changed

+61
-20
lines changed

package-lock.json

Lines changed: 17 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
}
6262
},
6363
"devDependencies": {
64-
"playground-elements": "^0.18.0",
64+
"playground-elements": "^0.20.0",
6565
"prettier": "^2.1.2",
6666
"typescript": "~4.7.4",
6767
"wireit": "^0.14.0"

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ module.exports = function (eleventyConfig) {
5656
eleventyConfig.addPlugin(eleventyNavigationPlugin);
5757
eleventyConfig.addPlugin(playgroundPlugin, {
5858
sandboxUrl: ENV.playgroundSandboxUrl,
59+
cdnBaseUrl: ENV.playgroundCdnBaseUrl,
5960
isDevMode: DEV,
6061
});
6162
if (!DEV) {
@@ -65,14 +66,6 @@ module.exports = function (eleventyConfig) {
6566
eleventyConfig.addPassthroughCopy('site/fonts');
6667
eleventyConfig.addPassthroughCopy('site/images');
6768
eleventyConfig.addPassthroughCopy('samples');
68-
// The Playground web worker is loaded directly from the main origin, so it
69-
// should be in our js directory. We don't need the service worker, though,
70-
// because that will be served directly out of node_modules/ by the
71-
// dedicated Playground sandbox server.
72-
eleventyConfig.addPassthroughCopy({
73-
[require.resolve('playground-elements/playground-typescript-worker.js')]:
74-
'./js/playground-typescript-worker.js',
75-
});
7669
}
7770
eleventyConfig.addPassthroughCopy('api/**/*');
7871

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,24 @@ export default [
104104
preserveEntrySignatures: false,
105105
},
106106

107+
// Bundle the TS worker so that we don't have to deal with passing through
108+
// the the worker's deps. Make sure there is only one input in this config.
109+
{
110+
input: ['lib/components/playground-typescript-worker.js'],
111+
output: {
112+
dir: 'rollupout',
113+
format: 'esm',
114+
},
115+
plugins: [
116+
resolve(),
117+
terser(terserOptions),
118+
summary({
119+
// Already minified.
120+
showMinifiedSize: false,
121+
}),
122+
],
123+
},
124+
107125
// A separate bundle is made for the server so that we do not modify the
108126
// client module graph just to SSR a component.
109127
{

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
DEV: ENV.eleventyMode === 'dev',
1919
MAIN_URL: ENV.mainUrl,
2020
PLAYGROUND_SANDBOX: ENV.playgroundSandboxUrl,
21+
PLAYGROUND_CDN_BASE_URL: ENV.playgroundCdnBaseUrl,
2122
GOOGLE_ANALYTICS_ID: ENV.googleAnalyticsId,
2223
GITHUB_CLIENT_ID: ENV.githubClientId,
2324
GITHUB_AUTHORIZE_URL: `${trimTrailingSlash(ENV.githubMainUrl)}/login/oauth/authorize`,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ <h2 class="exampleSectionHeading">{{ section.name }}</h2>
7777

7878
<playground-project
7979
sandbox-base-url="{{ env.PLAYGROUND_SANDBOX }}"
80+
cdn-base-url="{{ env.PLAYGROUND_CDN_BASE_URL }}"
8081
id="project">
8182
</playground-project>
8283

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<div id="editorAndPreview">
2727
<playground-project
2828
sandbox-base-url="{{ env.PLAYGROUND_SANDBOX }}"
29+
cdn-base-url="{{ env.PLAYGROUND_CDN_BASE_URL }}"
2930
id="tutorialProject">
3031
</playground-project>
3132

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,12 @@ export class LitDevExample extends LitElement {
140140
@property({attribute: 'sandbox-base-url'})
141141
sandboxBaseUrl?: string;
142142

143+
/**
144+
* Base URL for CDN.
145+
*/
146+
@property({attribute: 'cdn-base-url'})
147+
cdnBaseUrl?: string;
148+
143149
override connectedCallback() {
144150
super.connectedCallback();
145151
window.addEventListener(
@@ -190,6 +196,7 @@ export class LitDevExample extends LitElement {
190196
// will load its serviceworker on firstUpdated
191197
html`<playground-project
192198
sandbox-base-url=${ifDefined(this.sandboxBaseUrl)}
199+
cdn-base-url=${ifDefined(this.cdnBaseUrl)}
193200
id="project"
194201
project-src=${projectSrc}
195202
>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import 'playground-elements/playground-typescript-worker.js';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export const contentSecurityPolicyMiddleware = (
171171
// Allow bare module specifiers to be fetched from unpkg. Note this does not
172172
// restrict the user from directly importing from arbitrary other URLs in
173173
// their import statements when using the Playground.
174-
`connect-src https://unpkg.com/`,
174+
`connect-src https://unpkg.com/ https://cdn.jsdelivr.net/`,
175175

176176
// Disallow everything else.
177177
`default-src 'none'`

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface LitDevEnvironment {
1414
googleAnalyticsId: string;
1515
reportCspViolations: boolean;
1616
playgroundSandboxUrl: string;
17+
playgroundCdnBaseUrl: string;
1718
mainUrl: string;
1819
githubMainUrl: string;
1920
githubApiUrl: string;
@@ -74,6 +75,7 @@ export const dev = environment({
7475
eleventyOutDir: '_dev',
7576
googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
7677
reportCspViolations: false,
78+
playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
7779
get mainUrl() {
7880
return `http://localhost:${this.mainPort}`;
7981
},
@@ -110,6 +112,7 @@ const local = environment({
110112
eleventyOutDir: '_site',
111113
googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
112114
reportCspViolations: false,
115+
playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
113116
get mainUrl() {
114117
return `http://localhost:${this.mainPort}`;
115118
},
@@ -154,6 +157,7 @@ const pr = environment({
154157
eleventyOutDir: '_site',
155158
googleAnalyticsId: TEST_GOOGLE_ANALYTICS_ID,
156159
reportCspViolations: false,
160+
playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
157161
get mainUrl() {
158162
const tag = stringEnv('REVISION_TAG');
159163
return `https://${tag}---lit-dev-5ftespv5na-uc.a.run.app`;
@@ -196,6 +200,7 @@ const prod = environment({
196200
eleventyOutDir: '_site',
197201
googleAnalyticsId: 'G-FTZ6CJP9F3',
198202
reportCspViolations: true,
203+
playgroundCdnBaseUrl: 'https://cdn.jsdelivr.net/npm',
199204
mainUrl: 'https://lit.dev',
200205
playgroundSandboxUrl: 'https://playground.lit.dev/',
201206
githubMainUrl: 'https://github.com/',

packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,11 @@ const countVisibleLines = (filename: string, code: string): number => {
8989
*/
9090
export const playgroundPlugin = (
9191
eleventyConfig: EleventyConfig,
92-
{sandboxUrl, isDevMode}: {sandboxUrl: string; isDevMode: boolean}
92+
{
93+
sandboxUrl,
94+
isDevMode,
95+
cdnBaseUrl,
96+
}: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string}
9397
) => {
9498
let renderer: BlockingRenderer | undefined;
9599

@@ -185,6 +189,7 @@ export const playgroundPlugin = (
185189
// the closing tag correctly because it will be in a `<p>></p>`.
186190
return `
187191
<litdev-example ${sandboxUrl ? `sandbox-base-url="${sandboxUrl}"` : ''}
192+
${cdnBaseUrl ? `cdn-base-url="${cdnBaseUrl}"` : ''}
188193
style="--litdev-example-editor-lines-ts:${numVisibleLines.ts};
189194
--litdev-example-editor-lines-js:${numVisibleLines.js};
190195
--litdev-example-preview-height:${previewHeight};"
@@ -227,6 +232,7 @@ export const playgroundPlugin = (
227232
const previewHeight = config.previewHeight ?? '120px';
228233
return `
229234
<litdev-example ${sandboxUrl ? `sandbox-base-url='${sandboxUrl}'` : ''}
235+
${cdnBaseUrl ? `cdn-base-url="${cdnBaseUrl}"` : ''}
230236
style="--litdev-example-editor-lines-ts:${numVisibleLines.ts};
231237
--litdev-example-editor-lines-js:${numVisibleLines.js};
232238
--litdev-example-preview-height:${previewHeight}"

0 commit comments

Comments
 (0)