refactor, sort files, import from jsfiddle and plunker

Author: jdanyow

src/editing/edit-session-factory.js

@@ -3,18 +3,24 @@ import {EventAggregator} from 'aurelia-event-aggregator';
 import {GistAdapter} from './gist-adapter';
 import {WorkerClient} from '../worker/worker-client';
 import {EditSession} from './edit-session';
+import {QueryString} from './query-string';
 
-@inject(EventAggregator, WorkerClient, GistAdapter)
+@inject(EventAggregator, WorkerClient, GistAdapter, QueryString)
 export class EditSessionFactory {
-  constructor(eventAggregator, worker, gistAdapter) {
+  constructor(eventAggregator, worker, gistAdapter, queryString) {
     this.eventAggregator = eventAggregator;
     this.worker = worker;
     this.gistAdapter = gistAdapter;
+    this.queryString = queryString;
   }
 
   create(gist) {
-    let editSesson = new EditSession(gist, this.eventAggregator, this.worker, this.gistAdapter);
-    return editSesson.resetWorker()
-      .then(() => editSesson);
+    let editSesson = new EditSession(
+      gist,
+      this.eventAggregator,
+      this.worker,
+      this.gistAdapter,
+      this.queryString);
+    return editSesson.resetWorker().then(() => editSesson);
   }
 }

src/editing/edit-session.js

@@ -1,20 +1,26 @@
 import {computedFrom} from 'aurelia-framework';
 import {RunEvent} from './run-event';
 import {CurrentFileChangedEvent} from './current-file-changed-event';
-import {getEditorMode} from './editor-mode';
 import {File} from './file';
+import {stringComparisonOrdinalIgnoreCase} from '../util';
 
 export class EditSession {
-  constructor(gist, eventAggregator, worker, gistAdapter) {
+  constructor(gist, eventAggregator, worker, gistAdapter, queryString) {
     this.gist = gist;
     this.eventAggregator = eventAggregator;
     this.worker = worker;
     this.gistAdapter = gistAdapter;
+    this.queryString = queryString;
     this.autoRun = true;
     this.files = gistAdapter.filesMapToArray(gist.files);
+    this.sortFiles();
     this._currentFile = this.files[0];
   }
 
+  sortFiles() {
+    this.files.sort((a, b) => stringComparisonOrdinalIgnoreCase(a.name, b.name));
+  }
+
   _currentFile = null;
   @computedFrom('_currentFile')
   get currentFile() {
@@ -58,6 +64,7 @@ export class EditSession {
   renameFile(file, name) {
     this.worker.deleteFile(file.clone())
       .then(() => file.rename(name))
+      .then(() => this.sortFiles())
       .then(() => this.worker.updateFile(file.clone()))
       .then(::this.run);
   }
@@ -93,6 +100,7 @@ export class EditSession {
       .then(gist => {
         this.gist = gist;
         this.files = this.gistAdapter.filesMapToArray(gist.files);
+        this.queryString.write(gist, false);
         return this.resetWorker();
       })
       .then(() => this.currentFile = this.files.find(f => f.name === selected) || this.files[0]);

src/editing/gist-adapter.js

@@ -27,17 +27,13 @@ export class GistAdapter {
 
   filesMapToArray(filesMap) {
     let files = [];
-    for (name in filesMap) {
+    for (let name in filesMap) {
       let gistFile = filesMap[name];
       let file = new File(toUrl(name), gistFile.type, gistFile.content);
-      if (file.name === 'index.html') {
-        files.unshift(file);
-      } else {
-        files.push(file);
-      }
+      files.push(file);
     }
     if (files.findIndex(f => f.name === 'index.html')) {
-      files.unshift(new File('index.html', 'text/html', defaultIndexHtml));
+      files.push(new File('index.html', 'text/html', defaultIndexHtml));
     }
     return files;
   }
@@ -55,7 +51,7 @@ export class GistAdapter {
   getUpdateFiles(filesMap, filesArray) {
     let files = filesArray.slice(0);
     let map = {};
-    for (name in filesMap) {
+    for (let name in filesMap) {
       let index = files.findIndex(f => f.originalName === name);
       let filename = toFilename(name);
       if (index === -1) {
@@ -104,29 +100,20 @@ export class GistAdapter {
 
   save(gist, filesArray, forceFork, secret) {
     let files;
-    let promise;
     let description = gist.description;
     switch (this.getSaveAction(gist, forceFork)) {
       case saveAction.update:
         files = this.getUpdateFiles(gist.files, filesArray);
-        promise = this.gists.update(gist.id, { description, files });
-        break;
+        return this.gists.update(gist.id, { description, files });
       case saveAction.fork:
-        promise = this.gists.fork(gist.id)
+        return this.gists.fork(gist.id)
           .then(gist => {
             files = this.getUpdateFiles(gist.files, filesArray);
             return this.gists.update(gist.id, { public: !secret, description, files });
           });
-        break;
       case saveAction.create:
         files = this.getCreateFiles(filesArray);
-        promise = this.gists.create({ public: !secret, description, files });
-        break;
+        return this.gists.create({ public: !secret, description, files });
     }
-
-    return promise.then(gist => {
-      history.pushState(null, window.title, '?' + this.gists.toQuery(gist, false));
-      return gist;
-    });
   }
 }

src/editing/query-string.js

@@ -0,0 +1,45 @@
+import {inject} from 'aurelia-framework';
+import {param, deparam} from '../util';
+import {Gists} from '../github/gists';
+import {defaultGist} from '../github/default-gist';
+
+@inject(Gists)
+export class QueryString {
+  constructor(gists) {
+    this.gists = gists;
+  }
+
+  clear() {
+    history.replaceState(null, document.title, '/');
+  }
+
+  read() {
+    let query = location.search;
+    if (query.length) {
+      let args = deparam(query.substring(1));
+      if (args.id) {
+        return this.gists.load(args.id, args.sha).catch(reason => {
+          this.clear();
+          return defaultGist;
+        });
+      } else {
+        this.clear();
+      }
+    }
+    return Promise.resolve(defaultGist);
+  }
+
+  write(gist, withSha) {
+    if (!gist.id || !gist.history) {
+      this.clear();
+      return;
+    }
+    let query;
+    if (withSha) {
+      query = param({ id: gist.id, sha: gist.history[0].version });
+    } else {
+      query = param({ id: gist.id });
+    }
+    history.pushState(null, window.title, '?' + query);
+  }
+}

src/github/gists.js

@@ -73,21 +73,4 @@ export class Gists {
       })
       .then(fork => this.load(fork.id));
   }
-
-  fromQuery(query) {
-    if (query.length) {
-      let args = deparam(query.substring(1));
-      if (args.id) {
-        return this.load(args.id, args.sha);
-      }
-    }
-    return new Promise(resolve => resolve(null));
-  }
-
-  toQuery(gist, withSha) {
-    if (withSha) {
-      return param({ id: gist.id, sha: gist.history[0].version });
-    }
-    return param({ id: gist.id });
-  }
 }

src/github/user.js

@@ -11,7 +11,7 @@ export class User {
     this.accessToken = accessToken;
     this.api = api;
     this.oauth = oauth;
-    this.setAnonymous();
+    this.load();
   }
 
   setAnonymous() {

src/import/gist.js

@@ -0,0 +1,23 @@
+import {inject} from 'aurelia-framework';
+import {Gists} from '../github/gists';
+
+const gistUrlRegex = /(?:^|\/)([\da-f]{20})(?:\/([\da-f]{40})){0,1}$/;
+
+@inject(Gists)
+export class GistImporter {
+  constructor(gists) {
+    this.gists = gists;
+  }
+
+  canImport(urlOrId) {
+    return gistUrlRegex.test(urlOrId);
+  }
+
+  import(urlOrId) {
+    let match = gistUrlRegex.exec(urlOrId);
+    let id = match[1];
+    let sha = match[2];
+
+    return this.gists.load(id, sha);
+  }
+}

src/import/importer.js

@@ -0,0 +1,19 @@
+import {inject} from 'aurelia-framework';
+import {GistImporter} from './gist';
+import {JSFiddleImporter} from './jsfiddle';
+import {PlunkerImporter} from './plunker';
+
+@inject(GistImporter, JSFiddleImporter, PlunkerImporter)
+export class Importer {
+  constructor(...importers) {
+    this.importers = importers;
+  }
+
+  import(urlOrId) {
+    let importer = this.importers.find(x => x.canImport(urlOrId));
+    if (importer) {
+      return importer.import(urlOrId);
+    }
+    return Promise.reject('Unrecognized URL or ID');
+  }
+}

src/import/jsfiddle.js

@@ -0,0 +1,43 @@
+export class JSFiddleImporter {
+  fiddleHtmlToGist(page) {
+    let div = document.createElement('div');
+    div.innerHTML = /<input id="id_title".*\/>/.exec(page)[0]
+    let title = div.firstElementChild.value;
+    div.innerHTML = /<textarea id="id_description".*<\/textarea>/.exec(page)[0];
+    let description = div.firstElementChild.value;
+    div.innerHTML = /<fieldset class="column left">(.|\n)*<\/fieldset>/.exec(page)[0];
+    let html = div.querySelector('#id_code_html').value;
+    let css = div.querySelector('#id_code_css').value;
+    let js = div.querySelector('#id_code_js').value;
+
+    // todo: external resources and frameworks...
+
+    return  {
+      description: title + ' - ' + description,
+      files: {
+        'index.html': {
+          type: 'text/html',
+          content: `<!doctype html>\n<html lang="en">\n<head>\n  <meta charset="utf-8">\n  <title>GistRun</title>\n  <link rel="stylesheet" href="styles.css">\n</head>\n<body>\n${html}\n  <script src="script.js"></script>\n</body>\n</html>`
+        },
+        'script.js': {
+          type: 'application/javascript',
+          content: js
+        },
+        'styles.css': {
+          contentType: 'text/css',
+          content: css
+        }
+      }
+    };
+  }
+
+  canImport(urlOrId) {
+    return /^https:\/\/jsfiddle.net\/[\da-z]+(\/\d+)?\/?$/.test(urlOrId);
+  }
+
+  import(urlOrId) {
+    return fetch(`https://crossorigin.me/${urlOrId}`)
+      .then(response => response.text())
+      .then(page => this.fiddleHtmlToGist(page));
+  }
+}

src/import/plunker.js

@@ -0,0 +1,20 @@
+const urlRegex = /^http:\/\/plnkr.co\/(?:edit\/)?([\da-zA-Z]{6})/;
+
+export class PlunkerImporter {
+  canImport(urlOrId) {
+    return urlRegex.test(urlOrId);
+  }
+
+  import(urlOrId) {
+    let plunkerID = urlRegex.exec(urlOrId)[1];
+    return fetch(`https://api.plnkr.co/plunks/${plunkerID}`)
+      .then(response => response.json())
+      .then(plunk => {
+        let gist = { description: plunk.description, files: {} };
+        for (let name in plunk.files) {
+          gist.files[name] = { content: plunk.files[name].content };
+        }
+        return gist;
+      });
+  }
+}

src/ui/app.html

@@ -7,7 +7,7 @@
   <require from="./edit-file-panel.html"></require>
   <require from="./result-panel"></require>
 
-  <header load-gist.call="loadGist(urlOrId)" new-gist.call="newGist()"></header>
+  <header import.call="import(urlOrId)" new.call="newGist()"></header>
 
   <rate-alert></rate-alert>