plugins support

src/index.js

@@ -22,6 +22,7 @@ import markSwupElements from './modules/markSwupElements'
 import updateTransition from './modules/updateTransition'
 import preloadPages from './modules/preloadPages'
 import usePlugin from './modules/usePlugin'
+import log from './modules/log'
 
 export default class Swup {
     constructor(setOptions) {
@@ -42,6 +43,7 @@ export default class Swup {
             preload: true,
             support: true,
             disableIE: false,
+            plugins: [],
 
             LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
         }
@@ -91,6 +93,7 @@ export default class Swup {
         this.updateTransition = updateTransition
         this.preloadPages = preloadPages
         this.usePlugin = usePlugin
+        this.log = log
         this.detectie = detectie
         this.enable = this.enable
         this.destroy = this.destroy
@@ -162,7 +165,7 @@ export default class Swup {
         /**
          * initial save to cache
          */
-        var page = this.getDataFromHtml(document.documentElement.innerHTML)
+        var page = this.getDataFromHtml(document.documentElement.outerHTML)
         page.url = this.currentUrl
         if (this.options.cache) {
             this.cache.cacheUrl(page, this.options.debugMode)
@@ -173,6 +176,11 @@ export default class Swup {
          */
         this.markSwupElements(document.documentElement)
 
+        /**
+         * enable plugins from options
+         */
+        this.options.plugins.forEach(item => this.usePlugin(item))
+
         /**
          * trigger enabled event
          */

src/modules/log.js

@@ -0,0 +1,5 @@
+module.exports = function (str) {
+    if (this.options.debugMode) {
+        console.log(str + '%c', 'color: #009ACD')
+    }
+}

src/modules/usePlugin.js

@@ -1,5 +1,16 @@
 module.exports = function(plugin, options) {
+    options = Object.assign({}, plugin.options, options)
+
+    plugin.options = options
+
+    let getCurrentPageHtml = () => {
+        let page = this.cache.getPage(window.location.pathname + window.location.search)
+        let html = document.createElement('html')
+        html.innerHTML = page.originalContent
+        return html
+    }
+
     this.plugins.push(plugin)
-    plugin(options, this)
+    plugin.exec(options, this, getCurrentPageHtml)
     return this.plugins
 }

webpack.config.js

@@ -1,16 +1,15 @@
+const webpack = require('webpack')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const fs = require('fs')
+var glob = require("glob");
+let plugins = [];
 
-module.exports = {
+glob.sync("./src/plugins/**.js").forEach(item => {
+    plugins.push(item.replace('./src/plugins/', '').replace('.js', ''));
+});
+
+const baseConfig = {
     mode: "production",
-    entry: {
-        "swup": "./entry.js",
-        "swup.min": "./entry.js",
-    },
-    output: {
-        library: "Swup",
-        libraryTarget: "umd",
-        filename: "[name].js",
-    },
     module: {
         rules: [
             {
@@ -36,4 +35,43 @@ module.exports = {
             })
         ]
     }
-}
+}
+
+const swupConfig = Object.assign({}, baseConfig, {
+    entry: {
+        "swup": "./entry.js",
+        "swup.min": "./entry.js",
+    },
+    output: {
+        path: __dirname + "/dist/",
+        library: "Swup",
+        libraryTarget: "umd",
+        filename: "[name].js",
+    },
+})
+
+
+function createPluginConfig(pluginName) {
+    let config = Object.assign({}, baseConfig, {
+        entry: {},
+        output: {
+            path: __dirname + "/dist/plugins",
+            library: pluginName,
+            libraryTarget: "umd",
+            filename: "[name].js",
+        },
+    })
+
+    config.entry[pluginName] = `./src/plugins/${pluginName}.js`
+    config.entry[pluginName + ".min"] = `./src/plugins/${pluginName}.js`
+
+    return config
+}
+
+let configsArray = []
+configsArray.push(swupConfig)
+plugins.forEach(item => {
+    configsArray.push(createPluginConfig(item))
+})
+
+module.exports = configsArray