Update for latest changes in Superpowers Core, upgrade from Jade to Pug

README.md

@@ -4,7 +4,7 @@
 
 Make static websites in live collaboration with [Superpowers](http://superpowers-html5.com/).
 
-The Superpowers Web system uses [Jade](http://jade-lang.com/) for HTML and [Stylus](http://stylus-lang.com/) for stylesheets.
+The Superpowers Web system uses [Pug](https://pugjs.org/) for HTML and [Stylus](http://stylus-lang.com/) for stylesheets.
 
 ## How to install
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "superpowers-web",
   "description": "Static website system for Superpowers, the HTML5 app for real-time collaborative projects",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -11,4 +11,4 @@
     "systemId": "web",
     "publishedPluginBundles": []
   }
-}
+}

player/gulpfile.js

@@ -1,15 +1,17 @@
-var gulp = require("gulp");
+"use strict";
+
+const gulp = require("gulp");
 
 // TypeScript
-var ts = require("gulp-typescript");
-var tsProject = ts.createProject("tsconfig.json");
-var tslint = require("gulp-tslint");
+const ts = require("gulp-typescript");
+const tsProject = ts.createProject("./tsconfig.json");
+const tslint = require("gulp-tslint");
 
-gulp.task("typescript", function() {
-  var failed = false;
-  var tsResult = tsProject.src()
-    .pipe(tslint())
-    .pipe(tslint.report("prose", { emitError: true }))
+gulp.task("typescript", () => {
+  let failed = false;
+  const tsResult = tsProject.src()
+    .pipe(tslint({ formatter: "prose" }))
+    .pipe(tslint.report({ emitError: true }))
     .on("error", (err) => { throw err; })
     .pipe(tsProject())
     .on("error", () => { failed = true; })
@@ -18,13 +20,13 @@ gulp.task("typescript", function() {
 });
 
 // Browserify
-var browserify = require("browserify");
-var source = require("vinyl-source-stream");
-gulp.task("browserify", [ "typescript" ],function() {
-  var bundler = browserify("./index.js");
+const browserify = require("browserify");
+const source = require("vinyl-source-stream");
+gulp.task("browserify", () => {
+  const bundler = browserify("./index.js");
   function bundle() { return bundler.bundle().pipe(source("index.js")).pipe(gulp.dest("../public")); }
   return bundle();
 });
 
 // All
-gulp.task("default", [ "typescript", "browserify" ]);
+gulp.task("default", gulp.series("typescript", "browserify"));

player/index.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../SupClient/typings/SupApp.d.ts" />
 
 import * as querystring from "querystring";
-const qs: { project: string; build: string; } = querystring.parse(window.location.search.slice(1));
+const qs: { project: string; build: string; } = querystring.parse(window.location.search.slice(1)) as any;
 
 const indexPath = `/builds/${qs.project}/${qs.build}/files/index.html`;
 

player/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "noImplicitAny": true,
     "typeRoots": [ "../../../node_modules/@types" ]
   }

plugins/default/blob/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "noImplicitAny": true,
     "rootDir": "./",
     "typeRoots": [ "../../../../../node_modules/@types" ]

plugins/default/export/build/buildWeb.ts

@@ -6,14 +6,16 @@ import * as path from "path";
 const qs = querystring.parse(window.location.search.slice(1));
 
 let settings: WebBuildSettings;
+let projectWindowId: number;
 
 const progress = { index: 0, total: 0, errors: 0 };
 const statusElt = document.querySelector(".status");
 const progressElt = document.querySelector("progress") as HTMLProgressElement;
 const detailsListElt = document.querySelector(".details ol") as HTMLOListElement;
 
-export default function build(socket: SocketIOClient.Socket, theSettings: WebBuildSettings, buildPort: number) {
+export default function build(socket: SocketIOClient.Socket, theSettings: WebBuildSettings, theProjectWindowId: number, buildPort: number) {
   settings = theSettings;
+  projectWindowId = theProjectWindowId;
 
   socket.emit("build:project", (err: string, buildId: string) => {
     const buildPath = `${window.location.protocol}//${window.location.hostname}:${buildPort}/builds/${qs.project}/${buildId}/`;
@@ -51,14 +53,16 @@ function updateProgress() {
 
   if (progress.index < progress.total) {
     statusElt.textContent = SupClient.i18n.t("builds:web.progress", { path: settings.outputFolder, index: progress.index, total: progress.total });
-  } else if (progress.errors > 0) {
-    statusElt.textContent = SupClient.i18n.t("builds:web.doneWithErrors", { path: settings.outputFolder, total: progress.total, errors: progress.errors });
   } else {
-    statusElt.textContent = SupClient.i18n.t("builds:web.done", { path: settings.outputFolder, total: progress.total });
+    statusElt.textContent = progress.errors > 0 ?
+      SupClient.i18n.t("builds:web.doneWithErrors", { path: settings.outputFolder, total: progress.total, errors: progress.errors }) :
+      SupClient.i18n.t("builds:web.done", { path: settings.outputFolder, total: progress.total });
+
+      SupApp.sendMessage(projectWindowId, "build-finished");
   }
 }
 
-function downloadFile(buildPath: string, filePath: string, callback: ErrorCallback) {
+function downloadFile(buildPath: string, filePath: string, callback: (err: Error) => void) {
   const inputPath = `${buildPath}files/${filePath}`;
   const outputPath = path.join(settings.outputFolder, filePath);
 

plugins/default/export/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "noImplicitAny": true,
     "rootDir": "./",
     "typeRoots": [ "../../../../../node_modules/@types" ]

plugins/default/json/data/JSONAsset.ts

@@ -91,7 +91,8 @@ export default class JSONAsset extends SupCore.Data.Base.Asset {
 
   serverExport(buildPath: string, assetsById: { [id: string]: JSONAsset }, callback: (err: Error, writtenFiles: string[]) => void) {
     let pathFromId = this.server.data.entries.getPathFromId(this.id);
-    if (pathFromId.lastIndexOf(".json") === pathFromId.length - 5) pathFromId = pathFromId.slice(0, -5);
+    const ext = ".json";
+    if (pathFromId.lastIndexOf(ext) === pathFromId.length - ext.length) pathFromId = pathFromId.slice(0, -ext.length);
     let outputPath = `${buildPath}/${pathFromId}.json`;
     let parentPath = outputPath.slice(0, outputPath.lastIndexOf("/"));
 

plugins/default/json/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "noImplicitAny": true,
     "rootDir": "./",
     "typeRoots": [ "../../../../../node_modules/@types" ]

plugins/default/jade/api/JadeAPIPlugin.d.ts → plugins/default/pug/api/PugAPIPlugin.d.ts

@@ -1,5 +1,5 @@
 declare namespace SupCore {
-  export interface JadeAPIPlugin {
+  export interface PugAPIPlugin {
     locals: { [name: string]: any };
   }
 }

plugins/default/jade/data/JadeAsset.ts → plugins/default/pug/data/PugAsset.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../../common/textEditorWidget/operational-transform.d.ts" />
-/// <reference path="../api/JadeAPIPlugin.d.ts" />
+/// <reference path="../api/PugAPIPlugin.d.ts" />
 
 import * as OT from "operational-transform";
 import * as mkdirp from "mkdirp";
@@ -13,17 +13,17 @@ let serverRequire = require;
 
 let fs: typeof dummy_fs;
 let path: typeof dummy_path;
-let jade: any;
+let pug: any;
 if ((<any>global).window == null) {
   fs = serverRequire("fs");
   path = serverRequire("path");
-  jade = serverRequire("jade");
+  pug = serverRequire("pug");
 }
 
 type EditTextCallback = SupCore.Data.Base.ErrorCallback & ((err: string, ack: any, operationData: OperationData, revisionIndex: number) => void);
 type ApplyDraftChangedCallback = SupCore.Data.Base.ErrorCallback;
 
-interface JadeAssetPub {
+interface PugAssetPub {
   text: string;
   draft: string;
   revisionId: number;
@@ -33,19 +33,19 @@ interface JadeAssetPub {
 // That's why we keep a reference to our containing system here
 let system = SupCore.system;
 
-export default class JadeAsset extends SupCore.Data.Base.Asset {
+export default class PugAsset extends SupCore.Data.Base.Asset {
   static schema: SupCore.Data.Schema = {
     text: { type: "string" },
     draft: { type: "string" },
     revisionId: { type: "integer" }
   };
 
-  pub: JadeAssetPub;
+  pub: PugAssetPub;
   document: OT.Document;
   hasDraft: boolean;
 
-  constructor(id: string, pub: JadeAssetPub, server: ProjectServer) {
-    super(id, pub, JadeAsset.schema, server);
+  constructor(id: string, pub: PugAssetPub, server: ProjectServer) {
+    super(id, pub, PugAsset.schema, server);
   }
 
   init(options: any, callback: Function) {
@@ -68,9 +68,9 @@ export default class JadeAsset extends SupCore.Data.Base.Asset {
   }
 
   load(assetPath: string) {
-    let pub: JadeAssetPub;
-    fs.readFile(path.join(assetPath, "page.jade"), { encoding: "utf8" }, (err, text) => {
-      fs.readFile(path.join(assetPath, "draft.jade"), { encoding: "utf8" }, (err, draft) => {
+    let pub: PugAssetPub;
+    fs.readFile(path.join(assetPath, "page.pug"), { encoding: "utf8" }, (err, text) => {
+      fs.readFile(path.join(assetPath, "draft.pug"), { encoding: "utf8" }, (err, draft) => {
         pub = { revisionId: 0, text, draft: (draft != null) ? draft : text };
 
         pub.draft = pub.draft.replace(/\r\n/g, "\n");
@@ -82,58 +82,59 @@ export default class JadeAsset extends SupCore.Data.Base.Asset {
   }
 
   save(assetPath: string, callback: (err: Error) => any) {
-    fs.writeFile(path.join(assetPath, "page.jade"), this.pub.text, { encoding: "utf8" }, (err) => {
+    fs.writeFile(path.join(assetPath, "page.pug"), this.pub.text, { encoding: "utf8" }, (err) => {
       if (err != null) { callback(err); return; }
 
       if (this.hasDraft) {
-        fs.writeFile(path.join(assetPath, "draft.jade"), this.pub.draft, { encoding: "utf8" }, callback);
+        fs.writeFile(path.join(assetPath, "draft.pug"), this.pub.draft, { encoding: "utf8" }, callback);
       } else {
-        fs.unlink(path.join(assetPath, "draft.jade"), (err) => {
+        fs.unlink(path.join(assetPath, "draft.pug"), (err) => {
           if (err != null && err.code !== "ENOENT") { callback(err); return; }
           callback(null);
         });
       }
     });
   }
 
-  serverExport(buildPath: string, assetsById: { [id: string]: JadeAsset }, callback: (err: Error, writtenFiles: string[]) => void) {
+  serverExport(buildPath: string, assetsById: { [id: string]: PugAsset }, callback: (err: Error, writtenFiles: string[]) => void) {
     let pathFromId = this.server.data.entries.getPathFromId(this.id);
-    if (pathFromId.lastIndexOf(".jade") === pathFromId.length - 5) pathFromId = pathFromId.slice(0, -5);
+    const ext = ".pug";
+    if (pathFromId.lastIndexOf(ext) === pathFromId.length - ext.length) pathFromId = pathFromId.slice(0, -ext.length);
     let outputPath = `${buildPath}/${pathFromId}.html`;
     let parentPath = outputPath.slice(0, outputPath.lastIndexOf("/"));
 
-    const jadeFiles: { [filename: string]: string; } = {};
+    const pugFiles: { [filename: string]: string; } = {};
     for (const assetId in assetsById) {
-      if (this.server.data.entries.byId[assetId].type !== "jade") continue;
+      if (this.server.data.entries.byId[assetId].type !== "pug") continue;
 
       let filename = this.server.data.entries.getPathFromId(assetId);
-      if (filename.lastIndexOf(".jade") !== filename.length - 5) filename += ".jade";
-      jadeFiles[filename] = assetsById[assetId].pub.text;
+      if (filename.lastIndexOf(ext) !== filename.length - ext.length) filename += ext;
+      pugFiles[filename] = assetsById[assetId].pub.text;
     }
 
     // NOTE: It might be possible to replace this hack once Jade (well, Pug) 2 is out
     // see https://github.com/pugjs/pug-loader and https://github.com/pugjs/jade/issues/1933
     let oldReadFileSync = fs.readFileSync;
     (fs as any).readFileSync = (...args: any[]) => {
-      if (args[0].indexOf(".jade") === -1) return oldReadFileSync.apply(null, args);
-      return jadeFiles[args[0].replace(/\\/g, "/")];
+      if (args[0].indexOf(".pug") === -1) return oldReadFileSync.apply(null, args);
+      return pugFiles[args[0].replace(/\\/g, "/")];
     };
 
     let options: { [key: string]: any; } = {};
 
-    let plugins = system.getPlugins<SupCore.JadeAPIPlugin>("jadeAPI");
+    let plugins = system.getPlugins<SupCore.PugAPIPlugin>("pugAPI");
     if (plugins != null) {
       for (let pluginName in plugins) {
         let pluginLocals = plugins[pluginName].locals;
         for (let localName in pluginLocals) options[localName] = pluginLocals[localName];
       }
     }
 
-    options["filename"] = `${pathFromId}.jade`;
+    options["filename"] = `${pathFromId}.pug`;
 
     let html = "";
     try {
-      html = jade.render(this.pub.text, options);
+      html = pug.render(this.pub.text, options);
     } catch (err) {
       console.log(err);
     }

plugins/default/pug/data/index.ts

@@ -0,0 +1,3 @@
+import PugAsset from "./PugAsset";
+
+SupCore.system.data.registerAssetClass("pug", PugAsset);

plugins/default/jade/editors/jade/index.ts → plugins/default/pug/editors/pug/index.ts

@@ -1,9 +1,9 @@
-import JadeAsset from "../../data/JadeAsset";
+import PugAsset from "../../data/PugAsset";
 
 let socket: SocketIOClient.Socket;
 let projectClient: SupClient.ProjectClient;
 let editor: TextEditorWidget;
-let asset: JadeAsset;
+let asset: PugAsset;
 
 socket = SupClient.connect(SupClient.query.project);
 socket.on("welcome", onWelcome);
@@ -18,10 +18,10 @@ function onWelcome(clientId: string) {
     onAssetTrashed: SupClient.onAssetTrashed
   };
 
-  projectClient.subAsset(SupClient.query.asset, "jade", subscriber);
+  projectClient.subAsset(SupClient.query.asset, "pug", subscriber);
 }
 
-function onAssetReceived(assetId: string, theAsset: JadeAsset) {
+function onAssetReceived(assetId: string, theAsset: PugAsset) {
   asset = theAsset;
   editor.setText(asset.pub.draft);
 }
@@ -38,7 +38,7 @@ function onAssetEdited(assetId: string, command: string, ...args: any[]) {
 function setupEditor(clientId: string) {
   let textArea = <HTMLTextAreaElement>document.querySelector(".text-editor");
   editor = new TextEditorWidget(projectClient, clientId, textArea, {
-    mode: "text/x-jade",
+    mode: "text/x-pug",
     extraKeys: {
       "Ctrl-S": () => { applyDraftChanges(); },
       "Cmd-S": () => { applyDraftChanges(); },