completed work to enable use of webpack relative and aliased paths

theGC · Jan 29, 2018 · e893f29 · e893f29
1 parent e75dbcb
commit e893f29
Show file tree

Hide file tree

Showing 10 changed files with 1,501 additions and 781 deletions.
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "scripts": {
         "prepublish": "npm run test",
         "test": "jasmine",
-        "debug": "node-debug jasmine"
+        "debug": "node-debug jasmine",
+        "build": "node spec/build.js"
     },
     "repository": {
         "type": "git",
@@ -30,16 +31,18 @@
     },
     "homepage": "https://github.com/thegc/html-webpack-inline-svg-plugin",
     "devDependencies": {
-        "html-webpack-plugin": "^2.28.0",
-        "jasmine": "^2.4.1",
-        "rimraf": "^2.5.2",
-        "webpack": "^2.4.1"
+        "file-loader": "^1.1.6",
+        "html-loader": "^0.5.5",
+        "html-webpack-plugin": "^2.30.1",
+        "jasmine": "^2.9.0",
+        "rimraf": "^2.6.2",
+        "webpack": "^3.10.0"
     },
     "dependencies": {
-        "chalk": "^1.1.3",
-        "cheerio": "^0.22.0",
+        "chalk": "^2.3.0",
+        "cheerio": "^1.0.0-rc.2",
         "lodash": "^4.17.4",
-        "parse5": "^3.0.2",
-        "svgo": "^0.7.2"
+        "parse5": "^4.0.0",
+        "svgo": "^1.0.3"
     }
 }
diff --git a/spec/build.js b/spec/build.js
@@ -0,0 +1,29 @@
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.base.config')
+var chalk = require('chalk')
+var rm = require('rimraf')
+
+rm(webpackConfig.outputDir, (err) => {
+
+    if (err) console.log(chalk.red(err))
+
+})
+
+/**
+ * no testing - just attempt to output the dist folder and files
+ *
+ */
+
+webpack(webpackConfig.options, function (err) {
+
+    if (err) {
+
+        console.log(chalk.red(err))
+
+        return
+
+    }
+
+    console.log(chalk.green('build complete'))
+
+})
diff --git a/spec/fixtures/blank.html b/spec/fixtures/blank.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Inline SVG Tests blank</title>
+
+        <script src="test.js"></script>
+
+    </head>
+
+    <body>
+
+        <div>
+            <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="images/face.svg"></p>
+        </div>
+
+    </body>
+
+</html>
diff --git a/spec/fixtures/images/not-an-svg.png b/spec/fixtures/images/not-an-svg.png
diff --git a/spec/fixtures/index.html b/spec/fixtures/index.html
@@ -25,26 +25,31 @@
     <body>
 
         <div>
-            <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="../spec/fixtures/images/face.svg"></p>
+            <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="images/face.svg"></p>
             <p>
                 <span>if below SVG is inlined correctly we can reference its content:</span>
                 <svg class="icon mood-good"><use xlink:href="#icon-mood-good"></use></svg>
             </p>
         </div>
 
         <section>
+            <h2>Deep Replace</h2>
             <div>
                 <span>
-                    <img id="deep-replace-me" inline src="spec/fixtures/images/face.svg">
+                    <img id="deep-replace-me" inline src="images/face.svg">
                 </span>
             </div>
         </section>
 
-        <img id="replace-me" inline src="spec/fixtures/images/moods.svg">
+        <h2>Inline images</h2>
 
-        <img id="then-replace-me" inline src="spec/fixtures/images/another-face.svg">
+        <img id="replace-me" inline src="images/moods.svg">
 
-        <img id="not-an-svg" inline src="spec/fixtures/images/not-an-svg.png">
+        <img id="replace-an-alias" src="~img/moods.svg">
+
+        <img id="then-replace-me" inline src="images/another-face.svg">
+
+        <img id="not-an-svg" inline src="images/not-an-svg.png">
 
         <div id="do-not-decode"><?= $foo->bar; ?></div>
 

diff --git a/spec/fixtures/partial.html b/spec/fixtures/partial.html
@@ -3,17 +3,17 @@
         </div>
 
         <div>
-            <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="../spec/fixtures/images/face.svg"></p>
+            <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="~img/face.svg"></p>
             <p>
                 <span>if below SVG is inlined correctly we can reference its content:</span>
                 <svg class="icon mood-good"><use xlink:href="#icon-mood-good"></use></svg>
-                <img id="find-and-replace-me" inline src="spec/fixtures/images/face.svg">
+                <img id="find-and-replace-me" inline src="images/face.svg">
             </p>
         </div>
 
-        <img id="replace-me" inline src="spec/fixtures/images/moods.svg">
+        <img id="replace-me" inline src="images/moods.svg">
 
-        <img id="not-an-svg" inline src="spec/fixtures/images/not-an-svg.png">
+        <img id="not-an-svg" inline src="images/not-an-svg.png">
 
         <div id="do-not-decode"><?= $foo->bar; ?></div>
 

diff --git a/spec/index.spec.js b/spec/index.spec.js
@@ -4,54 +4,39 @@ var fs = require('fs')
 var chalk = require('chalk')
 var cheerio = require('cheerio')
 var webpack = require('webpack')
+var webpackConfig = require('./webpack.base.config')
 var rm = require('rimraf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var HtmlWebpackInlineSVGPlugin = require('../')
 
-var OUTPUT_DIR = path.join(__dirname, '../dist')
-
-rm(OUTPUT_DIR, (err) => {
+rm(webpackConfig.outputDir, (err) => {
 
     if (err) console.log(chalk.red(err))
 
 })
 
 describe('HtmlWebpackInlineSVGPlugin', function () {
 
-    beforeEach(function (done) {
-
-        webpack({
-            entry: path.join(__dirname, 'fixtures', 'entry.js'),
-            output: {
-                path: OUTPUT_DIR,
-            },
-            plugins: [
-                new HtmlWebpackPlugin({
-                    template: path.join(__dirname, 'fixtures', 'index.html'),
-                }),
-                new HtmlWebpackPlugin({
-                    filename: path.resolve(OUTPUT_DIR, 'partial.html'),
-                    template: path.join(__dirname, 'fixtures', 'partial.html'),
-                }),
-                new HtmlWebpackInlineSVGPlugin(),
-            ],
-        }, function (err) {
+    beforeAll(function (done) {
+
+        webpack(webpackConfig.options, (err) => {
 
             expect(err).toBeFalsy()
 
-            done()
+            // callbck is fired before all files hve been written to disk
+            // due to use of after-emit - place a timeout to try and avoid the issue
+
+            setTimeout(done, 2000)
 
         })
 
     })
 
     it('should not inline imgs without inline attribute', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -65,11 +50,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should inline imgs with inline attribute', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -83,11 +68,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should remove img tags with inline attribute', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -101,11 +86,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should remove multiple inlined img tags within the same document', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -119,11 +104,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should ignore images that are not svg', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -137,18 +122,14 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('do not html decode content', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
-
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-            expect(er).toBeFalsy()
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            var $ = cheerio.load(data, {
-                decodeEntities: false,
-            })
+            expect(err).toBeFalsy()
 
-            expect($('#do-not-decode').html())
-                .toBe('<?= $foo->bar; ?>')
+            expect(data.indexOf('<?= $foo->bar; ?>'))
+                .not.toBe(-1)
 
             done()
 
@@ -158,11 +139,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('do not touch broken tags', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var re1 = /should output broken tags<\/p>/gi;
 
@@ -188,11 +169,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
      */
     it('allow partials to have broken tags', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'partial.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'partial.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             const dataSquashed = data.replace(/\s/g,'')
 
@@ -207,11 +188,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should replace nested inline imgs', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)
 
@@ -225,11 +206,11 @@ describe('HtmlWebpackInlineSVGPlugin', function () {
 
     it('should contain deep inline SVG', function (done) {
 
-        var htmlFile = path.resolve(OUTPUT_DIR, 'index.html')
+        var htmlFile = path.resolve(webpackConfig.outputDir, 'index.html')
 
-        fs.readFile(htmlFile, 'utf8', function (er, data) {
+        fs.readFile(htmlFile, 'utf8', function (err, data) {
 
-            expect(er).toBeFalsy()
+            expect(err).toBeFalsy()
 
             var $ = cheerio.load(data)