Add .pug file support generally and for .vue file templates (codesandbox#443)

* Add pug file assets

* Adding first pass pug library... things are broken, I just wanted to push my progress

* Update worker to use browserified-pug

* Add pug as loader in vue-loader

* Make recommended changes to hopefully connect all the missing pieces.

Author: just-be-dev

packages/app/src/sandbox/eval/presets/vue-cli/index.js

@@ -19,6 +19,7 @@ import vueSelector from '../../transpilers/vue/selector';
 import vueStyleLoader from '../../transpilers/vue/style-loader';
 import cssLoader from '../../transpilers/vue/css-loader';
 import base64Transpiler from '../../transpilers/base64';
+import pugTranspiler from '../../transpilers/pug';
 
 import Preset from '../';
 
@@ -166,6 +167,7 @@ export default function initialize() {
     { transpiler: noopTranspiler },
   ]);
   vuePreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
+  vuePreset.registerTranspiler((m) => m.path.endsWith('pug'), [{ transpiler: pugTranspiler }]);
 
   return vuePreset;
 }

packages/app/src/sandbox/eval/transpilers/pug/index.js

@@ -0,0 +1,44 @@
+// @flow
+import PugWorker from 'worker-loader?name=pug-transpiler.[hash].worker.js!./pug-worker.js';
+
+import WorkerTranspiler from '../worker-transpiler';
+import { type LoaderContext } from '../../transpiled-module';
+
+class PugTranspiler extends WorkerTranspiler {
+  worker: Worker;
+
+  constructor() {
+    super('pug-loader', PugWorker, 1);
+
+    this.cacheable = false;
+  }
+
+  doTranspilation(code: string, loaderContext: LoaderContext) {
+    return new Promise((resolve, reject) => {
+      const path = loaderContext.path;
+
+      this.queueTask(
+        {
+          code,
+          path,
+        },
+        loaderContext,
+        (err, data) => {
+          if (err) {
+            loaderContext.emitError(err);
+
+            return reject(err);
+          }
+
+          return resolve(data);
+        }
+      );
+    });
+  }
+}
+
+const transpiler = new PugTranspiler();
+
+export { PugTranspiler };
+
+export default transpiler;

packages/app/src/sandbox/eval/transpilers/pug/pug-worker.js

@@ -0,0 +1,27 @@
+import { buildWorkerError } from '../utils/worker-error-handler';
+
+self.importScripts(['/static/js/browserified-pug.0.1.0.min.js']);
+self.postMessage('ready');
+
+
+self.addEventListener('message', event => {
+  const { code, path } = event.data;
+
+  // register a custom importer callback
+  pug.render(code, { filename: path }, (err, html) => {
+
+    if (err) {
+      return self.postMessage({
+        type: 'error',
+        error: buildWorkerError(err)
+      });
+    }
+
+    return self.postMessage({
+      type: 'compiled',
+      transpiledCode: html,
+    });
+
+  });
+
+});

packages/app/src/sandbox/eval/transpilers/vue/loader.js

@@ -115,6 +115,7 @@ export default function(content: string, loaderContext: LoaderContext) {
     stylus: ['vue-style-loader', 'css-loader', 'stylus-loader'],
     ts: ['ts-loader'],
     typescript: ['ts-loader'],
+    pug: ['pug-loader'],
   };
 
   const loaders = Object.assign({}, defaultLoaders, codeSandboxLoaders);

packages/app/static/js/browserified-pug.0.1.0.min.js

@@ -6,6 +6,7 @@ import { fadeIn } from '../../../utils/animation';
 import babelSvg from './babel.png';
 import cssSvg from './css.png';
 import htmlSvg from './html.png';
+import pugSvg from './pug.png';
 import imageSvg from './image.png';
 import lessSvg from './less.png';
 import scssSvg from './scss.png';
@@ -39,5 +40,6 @@ export const less = { svg: lessSvg, title: 'less', extension: 'less' };
 export const stylus = { svg: stylusSvg, title: 'stylus', extension: 'styl' };
 export const image = { svg: imageSvg, title: 'image', extension: 'png' };
 export const html = { svg: htmlSvg, title: 'html', extension: 'html' };
+export const pug = { svg: pugSvg, title: 'pug', extension: 'pug' };
 export const cssGlobal = { svg: cssSvg, title: 'css', extension: 'css' };
 export const vue = { svg: vueSvg, title: 'vue', extension: 'vue' };

packages/homepage/src/screens/home/Frameworks/icons.js

@@ -22,6 +22,7 @@ import FileType, {
   stylus,
   image,
   html,
+  pug,
   cssGlobal,
   vue,
 } from './icons';
@@ -197,7 +198,19 @@ const TEMPLATE_SUPPORT = {
     css: ['Global'],
   },
   'vue-cli': {
-    loaders: [js, ts, html, vue, scss, sass, less, stylus, cssGlobal, image],
+    loaders: [
+      js,
+      ts,
+      html,
+      vue,
+      scss,
+      sass,
+      less,
+      stylus,
+      pug,
+      cssGlobal,
+      image,
+    ],
     css: ['Global', 'Scoped', 'Modules'],
   },
   'preact-cli': {