Merge pull request #89 from PolymerLabs/files-property

Add files property to project and ide

CHANGELOG.md

@@ -17,6 +17,26 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 <!-- ### Fixed -->
 <!-- ### Removed -->
 
+## [0.3.7] - 2021-01-08
+
+### Added
+
+- Added `files` property to `<playground-ide>` and `<playground-project>`. Use
+  this property to directly get and set the array of project files (e.g. to
+  save/restore the project state).
+
+  Note that directly setting `files` always takes precedence over setting
+  `projectSrc`, and both take precedence over slotted children.
+
+### Changed
+
+- It is no longer necessary to load the Material Icons font. The reload button
+  icon is now inlined SVG.
+
+### Fixed
+
+- Fix caret placement issues with some dynamic layouts.
+
 ## [0.3.6] - 2020-12-08
 
 ### Fixed

configurator/index.html

@@ -4,7 +4,6 @@
   <title>Playground Elements Configurator</title>
   <link rel=icon href=data:,>
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground-elements",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A multi-file code editor component with live preview",
   "homepage": "https://github.com/PolymerLabs/playground-elements#readme",
   "repository": "github:PolymerLabs/playground-elements",
@@ -49,10 +49,10 @@
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@types/resize-observer-browser": "^0.1.4",
-    "@web/dev-server": "^0.0.25",
-    "@web/test-runner": "^0.10.0",
-    "@web/test-runner-playwright": "^0.6.0",
-    "@web/test-runner-puppeteer": "^0.7.2",
+    "@web/dev-server": "^0.1.3",
+    "@web/test-runner": "^0.11.7",
+    "@web/test-runner-playwright": "^0.7.2",
+    "@web/test-runner-puppeteer": "^0.8.2",
     "clean-css": "^4.2.3",
     "codemirror": "^5.58.1",
     "codemirror-grammar-mode": "^0.1.10",

src/playground-code-editor.ts

@@ -184,6 +184,15 @@ export class PlaygroundCodeEditor extends LitElement {
       (dom) => {
         this.shadowRoot!.innerHTML = '';
         this.shadowRoot!.appendChild(dom);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            // It seems that some dynamic layouts confuse CodeMirror, causing it
+            // to measure itself too soon, which then causes the position of
+            // interactions to be interpreted incorrectly. Here we hackily force
+            // a refresh after initial layout is usually done.
+            this._codemirror?.refresh();
+          });
+        });
       },
       {
         value: this.value ?? '',

src/playground-ide.ts

@@ -22,10 +22,12 @@ import {
   PropertyValues,
 } from 'lit-element';
 import {nothing} from 'lit-html';
+import {SampleFile} from './shared/worker-api.js';
 
 import './playground-project.js';
 import './playground-file-editor.js';
 import './playground-preview.js';
+import {PlaygroundProject} from './playground-project.js';
 
 /**
  * A multi-file code editor component with live preview that works without a
@@ -188,17 +190,31 @@ export class PlaygroundIde extends LitElement {
   @property({type: Boolean})
   resizable = false;
 
+  /**
+   * Get or set the array of project files.
+   *
+   * Files set through this property always take precedence over `projectSrc`
+   * and slotted children.
+   */
+  @property({attribute: false})
+  files?: SampleFile[];
+
   @query('#resizeBar')
   private _resizeBar!: HTMLDivElement;
 
   @query('#rhs')
   private _rhs!: HTMLDivElement;
 
+  @query('playground-project')
+  private _project!: PlaygroundProject;
+
   render() {
     const projectId = 'project';
     return html`
       <playground-project
         id=${projectId}
+        .files=${this.files}
+        @filesChanged=${this._onFilesChanged}
         .projectSrc=${this.projectSrc}
         .sandboxBaseUrl=${this.sandboxBaseUrl}
         .sandboxScope=${this.sandboxScope}
@@ -246,6 +262,10 @@ export class PlaygroundIde extends LitElement {
     super.update(changedProperties);
   }
 
+  private _onFilesChanged() {
+    this.files = this._project.files;
+  }
+
   private onResizeBarPointerdown({pointerId}: PointerEvent) {
     const bar = this._resizeBar;
     bar.setPointerCapture(pointerId);

src/playground-preview.ts

@@ -160,10 +160,22 @@ export class PlaygroundPreview extends LitElement {
         <mwc-icon-button
           id="reload-button"
           part="preview-reload-button"
-          icon="refresh"
           ?disabled=${!this.src}
           @click=${this._onReloadClick}
-        ></mwc-icon-button>
+        >
+          <!-- Source: https://material.io/resources/icons/?icon=refresh&style=baseline -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentcolor"
+            width="18px"
+            height="18px"
+          >
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </mwc-icon-button>
       </div>
 
       <div id="content">

src/playground-project.ts

@@ -36,9 +36,7 @@ import {
 } from './shared/worker-api.js';
 import {getRandomString, endWithSlash} from './shared/util.js';
 import {PlaygroundPreview} from './playground-preview.js';
-import './playground-file-editor.js';
 import {PlaygroundFileEditor} from './playground-file-editor.js';
-import './playground-preview.js';
 
 declare global {
   interface ImportMeta {
@@ -160,6 +158,30 @@ export class PlaygroundProject extends LitElement {
     ).href;
   }
 
+  private _filesSetExternally = false;
+
+  /**
+   * Get or set the array of project files.
+   *
+   * Files set through this property always take precedence over `projectSrc`
+   * and slotted children.
+   */
+  get files(): SampleFile[] | undefined {
+    return this._files;
+  }
+
+  set files(files: SampleFile[] | undefined) {
+    if (!files) {
+      return;
+    }
+    this._filesSetExternally = true;
+    this._files = files;
+    if (this._typescriptWorkerAPI) {
+      this._compileProject();
+    }
+    this.requestUpdate();
+  }
+
   static styles = css`
     iframe {
       display: none;
@@ -174,6 +196,7 @@ export class PlaygroundProject extends LitElement {
       for (const editor of this._editors) {
         editor.files = this._files;
       }
+      this.dispatchEvent(new CustomEvent('filesChanged'));
     }
     if (
       changedProperties.has('_serviceWorkerAPI') ||
@@ -198,7 +221,7 @@ export class PlaygroundProject extends LitElement {
   }
 
   private _slotChange(_e: Event) {
-    if (this.projectSrc) {
+    if (this.projectSrc || this._filesSetExternally) {
       // Note that the slotchange event will fire even if the only child is
       // whitespace.
       return;
@@ -244,15 +267,15 @@ export class PlaygroundProject extends LitElement {
   }
 
   private async _fetchProject() {
-    if (!this.projectSrc) {
+    if (!this.projectSrc || this._filesSetExternally) {
       return;
     }
     const projectUrl = new URL(this.projectSrc, document.baseURI);
     const manifestFetched = await fetch(this.projectSrc);
     const manifest = (await manifestFetched.json()) as ProjectManifest;
 
     const filenames = manifest.files ? Object.keys(manifest.files) : [];
-    this._files = await Promise.all(
+    const files = await Promise.all(
       filenames.map(async (filename) => {
         const fileUrl = new URL(filename, projectUrl);
         const response = await fetch(fileUrl.href);
@@ -270,12 +293,20 @@ export class PlaygroundProject extends LitElement {
         };
       })
     );
-    this._compileProject();
+    if (!this._filesSetExternally) {
+      // Note we check _filesSetExternally again here in case it was set while
+      // we were fetching the project and its files.
+      this._files = files;
+      this._compileProject();
+    }
   }
 
   firstUpdated() {
     const worker = new Worker(typescriptWorkerScriptUrl);
     this._typescriptWorkerAPI = wrap<TypeScriptWorkerAPI>(worker);
+    if (this._files) {
+      this._compileProject();
+    }
   }
 
   private _onServiceWorkerProxyIframeLoad() {