Added Pug support from parcel-plugin-pug (#1051)

parcel-bundler · Mar 28, 2018 · 09a959d · 09a959d
1 parent 4bd32f2
commit 09a959d
Show file tree

Hide file tree

Showing 21 changed files with 416 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "postcss-modules": "^0.8.0",
     "posthtml-include": "^1.1.0",
     "prettier": "^1.9.1",
+    "pug": "^2.0.3",
     "rimraf": "^2.6.1",
     "sinon": "^4.2.2",
     "sourcemap-validator": "^1.0.6",

diff --git a/src/Parser.js b/src/Parser.js
@@ -42,6 +42,9 @@ class Parser {
     this.registerExtension('vert', './assets/GLSLAsset');
     this.registerExtension('frag', './assets/GLSLAsset');
 
+    this.registerExtension('jade', './assets/PugAsset');
+    this.registerExtension('pug', './assets/PugAsset');
+
     let extensions = options.extensions || {};
     for (let ext in extensions) {
       this.registerExtension(ext, extensions[ext]);

diff --git a/src/assets/PugAsset.js b/src/assets/PugAsset.js
@@ -0,0 +1,39 @@
+const path = require('path');
+const Asset = require('../Asset');
+const localRequire = require('../utils/localRequire');
+
+class PugAsset extends Asset {
+  constructor(name, pkg, options) {
+    super(name, pkg, options);
+    this.type = 'html';
+  }
+
+  async generate() {
+    const pug = await localRequire('pug', this.name);
+    const config =
+      (await this.getConfig(['.pugrc', '.pugrc.js', 'pug.config.js'])) || {};
+
+    const compiled = pug.compile(this.contents, {
+      compileDebug: false,
+      filename: this.name,
+      basedir: path.dirname(this.name),
+      pretty: !this.options.minify,
+      templateName: path.basename(this.basename, path.extname(this.basename)),
+      filters: config.filters,
+      filterOptions: config.filterOptions,
+      filterAliases: config.filterAliases
+    });
+
+    if (compiled.dependencies) {
+      for (let item of compiled.dependencies) {
+        this.addDependency(item, {
+          includedInParent: true
+        });
+      }
+    }
+
+    return compiled();
+  }
+}
+
+module.exports = PugAsset;
diff --git a/test/integration/pug-filters/.pugrc.js b/test/integration/pug-filters/.pugrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  filters: {
+    'custom-filter': function (text, options) {
+      return 'FILTERED: ' + text;
+    }
+  }
+}
diff --git a/test/integration/pug-filters/index.pug b/test/integration/pug-filters/index.pug
@@ -0,0 +1,2 @@
+:custom-filter()
+    Hello!
diff --git a/test/integration/pug-include-extends/base.pug b/test/integration/pug-include-extends/base.pug
@@ -0,0 +1,4 @@
+doctype html
+html
+  body
+    block content
diff --git a/test/integration/pug-include-extends/expect.html b/test/integration/pug-include-extends/expect.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Yep, it's working!</h1>
+  </body>
+</html>
diff --git a/test/integration/pug-include-extends/index.pug b/test/integration/pug-include-extends/index.pug
@@ -0,0 +1,4 @@
+extends ./base.pug
+
+block content
+  include other.pug
diff --git a/test/integration/pug-include-extends/other.pug b/test/integration/pug-include-extends/other.pug
@@ -0,0 +1 @@
+h1 Yep, it's working!
diff --git a/test/integration/pug-minify/index.pug b/test/integration/pug-minify/index.pug
@@ -0,0 +1,6 @@
+doctype html
+html
+  head
+    title Minify
+  body
+    h1 Minified
diff --git a/test/integration/pug-mixins/index.pug b/test/integration/pug-mixins/index.pug
@@ -0,0 +1,8 @@
+include ./mixins.pug
+
+doctype html
+html
+  head
+    title Pug variables
+  body
+    +greetings('Parcel')
diff --git a/test/integration/pug-mixins/mixins.pug b/test/integration/pug-mixins/mixins.pug
@@ -0,0 +1,2 @@
+mixin greetings(name)
+  h1 Greetings, #{name}
diff --git a/test/integration/pug-var/100x100.png b/test/integration/pug-var/100x100.png
diff --git a/test/integration/pug-var/index.pug b/test/integration/pug-var/index.pug
@@ -0,0 +1,7 @@
+doctype html
+html
+  head
+    title Pug variables
+  body
+    - var image = './100x100.png'
+    img(src=image, alt='100x100')
diff --git a/test/integration/pug/100x100.png b/test/integration/pug/100x100.png
diff --git a/test/integration/pug/icons.svg b/test/integration/pug/icons.svg
diff --git a/test/integration/pug/index.css b/test/integration/pug/index.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/test/integration/pug/index.js b/test/integration/pug/index.js
@@ -0,0 +1 @@
+alert('Hi');
diff --git a/test/integration/pug/index.pug b/test/integration/pug/index.pug
@@ -0,0 +1,16 @@
+doctype html
+html
+  head
+    link(rel='stylesheet', href='index.css')
+    meta(property='og:image', content='100x100.png')
+  body
+    h1 Hello world
+    a(href='#hash_link') Hash link
+    a(href='mailto:[email protected]') Mailto link
+    a(href='tel:+33636757575') Tel link
+    script(src='index.js')
+    script(src='https://unpkg.com/parcel-bundler')
+    i hello
+    i world
+    svg
+      use(href='icons.svg#icon-repo-pull')
diff --git a/test/pug.js b/test/pug.js
@@ -0,0 +1,120 @@
+const assert = require('assert');
+const fs = require('fs');
+const {bundle, assertBundleTree} = require('./utils');
+
+describe('pug', function() {
+  it('should support bundling HTML', async function() {
+    const b = await bundle(__dirname + '/integration/pug/index.pug');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug'],
+      childBundles: [
+        {
+          type: 'png',
+          assets: ['100x100.png'],
+          childBundles: []
+        },
+        {
+          type: 'svg',
+          assets: ['icons.svg'],
+          childBundles: []
+        },
+        {
+          type: 'css',
+          assets: ['index.css'],
+          childBundles: []
+        },
+        {
+          type: 'js',
+          assets: ['index.js'],
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
+        }
+      ]
+    });
+
+    const files = fs.readdirSync(__dirname + '/dist');
+    const html = fs.readFileSync(__dirname + '/dist/index.html');
+    for (const file of files) {
+      const ext = file.match(/\.([0-9a-z]+)(?:[?#]|$)/i)[0];
+      if (file !== 'index.html' && ext !== '.map') {
+        assert(html.includes(file));
+      }
+    }
+  });
+
+  it('should support include and extends files', async function() {
+    const b = await bundle(
+      __dirname + '/integration/pug-include-extends/index.pug'
+    );
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug']
+    });
+
+    const html = fs.readFileSync(__dirname + '/dist/index.html', 'utf-8');
+    const expect = fs.readFileSync(
+      __dirname + '/integration/pug-include-extends/expect.html',
+      'utf-8'
+    );
+
+    assert.equal(html, expect, 'Content mismatch');
+  });
+
+  it('should support variables', async function() {
+    const b = await bundle(__dirname + '/integration/pug-var/index.pug');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug']
+    });
+
+    const html = fs.readFileSync(__dirname + '/dist/index.html', 'utf-8');
+
+    assert(/src="\/?100x100.*.png"/.test(html));
+  });
+
+  it('should support mixins', async function() {
+    const b = await bundle(__dirname + '/integration/pug-mixins/index.pug');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug']
+    });
+
+    const html = fs.readFileSync(__dirname + '/dist/index.html', 'utf-8');
+    assert(html.includes('Greetings, Parcel'));
+  });
+
+  it('should support filters', async function() {
+    const b = await bundle(__dirname + '/integration/pug-filters/index.pug');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug']
+    });
+
+    const html = fs.readFileSync(__dirname + '/dist/index.html', 'utf-8');
+    assert(html.includes('FILTERED: Hello!'));
+  });
+
+  it('should minify HTML in production mode', async function() {
+    const b = await bundle(__dirname + '/integration/pug-minify/index.pug', {
+      production: true
+    });
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.pug']
+    });
+
+    const html = fs.readFileSync(__dirname + '/dist/index.html', 'utf-8');
+
+    assert(html.includes('Minified'));
+  });
+});