lit · aomarks · Apr 9, 2021 · Apr 7, 2021 · Apr 7, 2021 · Apr 8, 2021
diff --git a/Dockerfile b/Dockerfile
@@ -43,6 +43,14 @@ RUN npx lerna run build --scope lit-dev-api --stream && \
 
 # Site content
 COPY packages/lit-dev-content/ ./packages/lit-dev-content/
+ARG PLAYGROUND_SANDBOX
+# Kaniko doesn't include ARG values in the layer cache key (see
+# https://github.com/GoogleContainerTools/kaniko/pull/1085). This is different
+# to normal Docker behavior, which would invalidate anything after the ARG
+# declaration if the value changes. So, we need to write it to the file system
+# to force a cache invalidation. Otherwise, we might re-use the most recent
+# Eleventy build output, even when the playground sandbox URL has changed.
+RUN echo "$PLAYGROUND_SANDBOX" > playground-sandbox
 RUN npx lerna run build --scope lit-dev-content --stream
 
 # Run the web service on container startup.

diff --git a/README.md b/README.md
@@ -50,11 +50,11 @@ Dev mode is different to production in these ways:
   are reflected immediately after `tsc` compile.
 - HTML is not minified.
 
-If needed, you can check for dev mode from an Eleventy template using the `dev`
-global:
+If needed, you can check for dev mode from an Eleventy template using the
+`env.DEV` global:
 
 ```
-{% if dev %}
+{% if env.DEV %}
   <p>Dev mode</p>
 {% else %}
   <p>Prod mode</p>
@@ -110,6 +110,7 @@ Serves at [`http://localhost:8080`](http://localhost:8080)
 ### Start production Docker environment locally
 
 ```sh
-docker build -t litdev .
-docker run --rm --name litdev -p 8080:8080 litdev
+docker build -t litdev . --build-arg PLAYGROUND_SANDBOX=http://localhost:8081/
+docker run --rm --name litdev -p 8080:8080 -e PORT=8080 -e MODE=main litdev
+docker run --rm --name litdev-playground -p 8081:8081 -e PORT=8081 -e MODE=playground litdev
 ```
diff --git a/cloudbuild-main.yaml b/cloudbuild-main.yaml
@@ -8,29 +8,31 @@ steps:
   # https://docs.docker.com/engine/reference/commandline/build/
   # https://github.com/GoogleCloudPlatform/cloud-builders/tree/master/docker
   # https://cloud.google.com/build/docs/kaniko-cache
-  - id: Build
+  - id: build
     name: gcr.io/kaniko-project/executor
     args:
       - --dockerfile=./Dockerfile
-      - --destination=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
+      - --destination=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA
       - --cache=true
       - --cache-ttl=168h # 1 week
+      # Bake in the playground sandbox url
+      - --build-arg=PLAYGROUND_SANDBOX=https://lit-dev-playground-5ftespv5na-uc.a.run.app/
 
-  # Create a new Cloud Run revision.
+  # Create a new Cloud Run revision for the main site.
   #
   # https://cloud.google.com/sdk/gcloud/reference/beta/run/deploy
   # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
-  - id: Deploy
+  - id: deploy-main
     name: gcr.io/google.com/cloudsdktool/cloud-sdk
     entrypoint: gcloud
     args:
       - beta
       - run
       - deploy
-      - $_SERVICE_NAME
+      - lit-dev # Service name
       - '--region=$_DEPLOY_REGION'
       - '--platform=managed'
-      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA'
+      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA'
       - '--quiet'
       - '--no-traffic'
       - '--tag=master-$SHORT_SHA'
@@ -42,20 +44,80 @@ steps:
       - '--concurrency=40'
       - '--min-instances=1'
       - '--max-instances=1000'
+      # Serve the main site
+      - '--update-env-vars=MODE=main'
 
-  # Route traffic to new revision.
+  # Create a new Cloud Run revision for the Playground sandbox.
+  #
+  # https://cloud.google.com/sdk/gcloud/reference/beta/run/deploy
+  # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
+  - id: deploy-playground
+    name: gcr.io/google.com/cloudsdktool/cloud-sdk
+    entrypoint: gcloud
+    waitFor:
+      # Don't wait for main site deploy
+      - build
+    args:
+      - beta
+      - run
+      - deploy
+      - lit-dev-playground # Service name
+      - '--region=$_DEPLOY_REGION'
+      - '--platform=managed'
+      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA'
+      - '--quiet'
+      - '--no-traffic'
+      - '--tag=master-$SHORT_SHA'
+      # IMPORTANT: If you change --memory, be sure to also change
+      # --max-old-space-size in ./Dockerfile, and this same flag in
+      # ./cloudbuild-pr.yaml
+      - '--memory=1Gi'
+      - '--cpu=1'
+      - '--concurrency=40'
+      - '--min-instances=1'
+      - '--max-instances=1000'
+      # Serve the playground files
+      - '--update-env-vars=MODE=playground'
+
+  # Route traffic to new revision for the playground.
   #
   # https://cloud.google.com/sdk/gcloud/reference/beta/run/services
   # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
-  - id: Route Traffic
+  - id: route-traffic-main
     name: gcr.io/google.com/cloudsdktool/cloud-sdk
     entrypoint: gcloud
+    waitFor:
+      # Route traffic simultaneously once both deploys are done
+      - deploy-main
+      - deploy-playground
     args:
       - beta
       - run
       - services
       - update-traffic
-      - $_SERVICE_NAME
+      - lit-dev # Service name
+      - '--region=$_DEPLOY_REGION'
+      - '--platform=managed'
+      - '--quiet'
+      - '--to-tags=master-$SHORT_SHA=100'
+
+  # Route traffic to new revision for the main site.
+  #
+  # https://cloud.google.com/sdk/gcloud/reference/beta/run/services
+  # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
+  - id: route-traffic-playground
+    name: gcr.io/google.com/cloudsdktool/cloud-sdk
+    entrypoint: gcloud
+    waitFor:
+      # Route traffic simultaneously once both deploys are done
+      - deploy-main
+      - deploy-playground
+    args:
+      - beta
+      - run
+      - services
+      - update-traffic # Service name
+      - lit-dev-playground
       - '--region=$_DEPLOY_REGION'
       - '--platform=managed'
       - '--quiet'

diff --git a/cloudbuild-pr.yaml b/cloudbuild-pr.yaml
@@ -12,29 +12,31 @@ steps:
   # https://docs.docker.com/engine/reference/commandline/build/
   # https://github.com/GoogleCloudPlatform/cloud-builders/tree/master/docker
   # https://cloud.google.com/build/docs/kaniko-cache
-  - id: Build
+  - id: build
     name: gcr.io/kaniko-project/executor
     args:
       - --dockerfile=./Dockerfile
-      - --destination=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
+      - --destination=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA
       - --cache=true
       - --cache-ttl=168h # 1 week
+      # Bake in this revision's corresponding playground sandbox url
+      - --build-arg=PLAYGROUND_SANDBOX=https://pr$_PR_NUMBER-$SHORT_SHA---lit-dev-playground-5ftespv5na-uc.a.run.app/
 
-  # Create a new Cloud Run revision.
+  # Create a new Cloud Run revision for the main site.
   #
   # https://cloud.google.com/sdk/gcloud/reference/beta/run/deploy
   # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
-  - id: Deploy
+  - id: deploy-main
     name: gcr.io/google.com/cloudsdktool/cloud-sdk
     entrypoint: gcloud
     args:
       - beta
       - run
       - deploy
-      - $_SERVICE_NAME
+      - lit-dev # Service name
       - '--region=$_DEPLOY_REGION'
       - '--platform=managed'
-      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA'
+      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA'
       - '--quiet'
       - '--no-traffic'
       - '--tag=pr$_PR_NUMBER-$SHORT_SHA'
@@ -46,6 +48,40 @@ steps:
       - '--concurrency=default' # unlimited
       - '--min-instances=0'
       - '--max-instances=1'
+      # Serve the main site
+      - '--update-env-vars=MODE=main'
+
+  # Create a new Cloud Run revision for the playground sandbox.
+  #
+  # https://cloud.google.com/sdk/gcloud/reference/beta/run/deploy
+  # https://github.com/GoogleCloudPlatform/cloud-sdk-docker
+  - id: deploy-playground
+    name: gcr.io/google.com/cloudsdktool/cloud-sdk
+    entrypoint: gcloud
+    waitFor:
+      # Don't wait for main site to deploy
+      - build
+    args:
+      - beta
+      - run
+      - deploy
+      - lit-dev-playground # Service name
+      - '--region=$_DEPLOY_REGION'
+      - '--platform=managed'
+      - '--image=$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/lit-dev:$COMMIT_SHA'
+      - '--quiet'
+      - '--no-traffic'
+      - '--tag=pr$_PR_NUMBER-$SHORT_SHA'
+      # IMPORTANT: If you change --memory, be sure to also change
+      # --max-old-space-size in ./Dockerfile, and this same flag in
+      # ./cloudbuild-main.yaml
+      - '--memory=1Gi'
+      - '--cpu=1'
+      - '--concurrency=default' # unlimited
+      - '--min-instances=0'
+      - '--max-instances=1'
+      # Serve the playground
+      - '--update-env-vars=MODE=playground'
 
 tags:
   - lit-dev

diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js
@@ -28,6 +28,7 @@ const slugify = (s) => slugifyLib(s, {lower: true});
 
 const DEV = process.env.ELEVENTY_ENV === 'dev';
 const OUTPUT_DIR = DEV ? '_dev' : '_site';
+const PLAYGROUND_SANDBOX = process.env.PLAYGROUND_SANDBOX;
 
 module.exports = function (eleventyConfig) {
   // https://github.com/JordanShurmer/eleventy-plugin-toc#readme
@@ -37,7 +38,9 @@ module.exports = function (eleventyConfig) {
     wrapperClass: '',
   });
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
-  eleventyConfig.addPlugin(playgroundPlugin);
+  eleventyConfig.addPlugin(playgroundPlugin, {
+    sandboxUrl: PLAYGROUND_SANDBOX,
+  });
   if (!DEV) {
     // In dev mode, we symlink these directly to source.
     eleventyConfig.addPassthroughCopy({'rollupout/': './js/'});

diff --git a/packages/lit-dev-content/site/_data/dev.js b/packages/lit-dev-content/site/_data/dev.js
diff --git a/packages/lit-dev-content/site/_data/env.js b/packages/lit-dev-content/site/_data/env.js
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// Allow templates to access environment settings, e.g. if we are building in
+// dev mode or not with `{% if env.DEV %}`.
+//
+// https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables
+ module.exports = {
+   DEV: process.env.ELEVENTY_ENV === 'dev',
+   PLAYGROUND_SANDBOX: process.env.PLAYGROUND_SANDBOX,
+ }
diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html
@@ -19,10 +19,12 @@
 
     <!-- Preload common chunks we always need. Note <link rel="modulepreload">
          isn't yet supported in Firefox or Safari. -->
-    <script type="module" src="{{ site.baseurl }}/js/lit.js"></script>
-    <script type="module" src="{{ site.baseurl }}/js/tslib.js"></script>
-    <script type="module" src="{{ site.baseurl }}/js/mwc-base.js"></script>
-    <script type="module" src="{{ site.baseurl }}/js/mwc-icon-button.js"></script>
+    {% if not env.DEV %}
+      <script type="module" src="{{ site.baseurl }}/js/lit.js"></script>
+      <script type="module" src="{{ site.baseurl }}/js/tslib.js"></script>
+      <script type="module" src="{{ site.baseurl }}/js/mwc-base.js"></script>
+      <script type="module" src="{{ site.baseurl }}/js/mwc-icon-button.js"></script>
+    {% endif %}
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
 

diff --git a/packages/lit-dev-content/site/index.html b/packages/lit-dev-content/site/index.html
@@ -4,7 +4,7 @@
   {% inlinecss "home.css" %}
   {% inlinejs "pages/home.js" %}
 
-  {% if dev %}
+  {% if env.DEV %}
     <!-- HACK: In dev mode, the logo renders before the stylesheet loads, so it
     is initially visible, and then immediately fades away. This doesn't affect
     prod because the whole stylesheet is inlined. -->

diff --git a/packages/lit-dev-content/site/playground.html b/packages/lit-dev-content/site/playground.html
@@ -69,6 +69,9 @@ <h3>{{ section.name }}</h3>
   </div>
 
   <playground-ide
+    {% if env.PLAYGROUND_SANDBOX %}
+      sandbox-base-url={{ env.PLAYGROUND_SANDBOX }}
+    {% endif %}
     slot="appContent"
     pragmas="off"
     resizable

diff --git a/packages/lit-dev-content/site/tutorial/index.html b/packages/lit-dev-content/site/tutorial/index.html
@@ -22,6 +22,9 @@
 
 <div id="editorAndPreview">
   <playground-project
+    {% if env.PLAYGROUND_SANDBOX %}
+      sandbox-base-url={{ env.PLAYGROUND_SANDBOX }}
+    {% endif %}
      id="tutorialProject">
   </playground-project>
 

diff --git a/packages/lit-dev-content/src/components/litdev-example.ts b/packages/lit-dev-content/src/components/litdev-example.ts
@@ -6,6 +6,7 @@
 
 import {LitElement, html, css, property} from 'lit-element';
 import {nothing} from 'lit-html';
+import {ifDefined} from 'lit-html/directives/if-defined.js';
 import 'playground-elements/playground-ide.js';
 
 /**
@@ -78,12 +79,19 @@ export class LitDevExample extends LitElement {
   @property()
   filename?: string;
 
+  /**
+   * Base URL for script execution sandbox.
+   */
+  @property({attribute: 'sandbox-base-url'})
+  sandboxBaseUrl?: string;
+
   render() {
     if (!this.project || !this.filename) {
       return nothing;
     }
     return html`
       <playground-project
+        sandbox-base-url=${ifDefined(this.sandboxBaseUrl)}
         id="project"
         project-src="/samples/${this.project}/project.json"
       >

diff --git a/packages/lit-dev-server/package.json b/packages/lit-dev-server/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "build": "npm run build:ts",
     "build:ts": "../../node_modules/.bin/tsc",
-    "start": "node index.js",
+    "start": "MODE=main PORT=8080 node index.js",
     "format": "../../node_modules/.bin/prettier \"**/*.{ts,js,json,html,css,md}\" --write"
   },
   "dependencies": {