Merge pull request #78 from BeAPI/feature/static_env_support

Feature/static env support

Author: Milan Ricoul

src/js/vendor/webpack-php-output.js

@@ -0,0 +1,118 @@
+// TODO: remove lodash and other dependencies
+var _ = require('lodash')
+var path = require('path')
+var url = require('url')
+var fs = require('fs')
+
+function PhpOutputPlugin(options) {
+  var defaults = {
+    outPutPath: false, // false for default webpack path of pass string to specify
+    assetsPathPrefix: '',
+    phpClassName: 'WebpackBuiltFiles', //
+    phpFileName: 'WebpackBuiltFiles',
+    nameSpace: false, // false {nameSpace: 'name', use: ['string'] or empty property or don't pass "use" property}
+    path: '',
+    extraPurePatches: [],
+  }
+
+  this.options = _.defaults(options, defaults)
+}
+
+PhpOutputPlugin.prototype.apply = function apply(compiler) {
+  var options = this.options
+
+  var getCssFiles = function(filelist, filepath) {
+    return _.map(
+      _.filter(filelist, filename => filename.endsWith('.css') && !filename.startsWith('editor-style')), // filtering
+      filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered
+    )
+  }
+
+  var getJsFiles = function(filelist, filepath) {
+    let files = _.map(
+      _.filter(filelist, filename => filename.endsWith('.js') && !filename.startsWith('editor-style')), // filtering
+      filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered
+    )
+
+    if (options.extraPurePatches.length) {
+      files = files.concat(options.extraPurePatches)
+    }
+
+    // return files.sort().reverse()
+    return files
+  }
+
+  var arrayToPhpStatic = function(list, varname) {
+    var out = '  static $' + varname + ' = [\n'
+    _.forEach(list, function(item) {
+      out += "    '" + item + "',"
+    })
+    out += '\n  ];\n'
+    return out
+  }
+
+  var objectToPhpClass = function(obj) {
+    // Create a header string for the generated file:
+    var out = '<?php\n\n'
+
+    if (options.nameSpace) {
+      let nameSpaceVal = _.isString(options.nameSpace) ? options.nameSpace : options.nameSpace.nameSpace
+      out += 'namespace ' + nameSpaceVal + '; \n\n'
+      if (options.nameSpace.use && options.nameSpace.use.length) {
+        _.forEach(options.nameSpace.use, use => {
+          out += 'use ' + use + ';\n'
+        })
+      }
+    }
+    out += 'class ' + options.phpClassName + ' {\n'
+
+    _.forEach(obj, (list, name) => {
+      out += arrayToPhpStatic(list, name)
+    })
+
+    out += '\n}\n'
+    return out
+  }
+
+  var mkOutputDir = function(dir) {
+    // Make webpack output directory if it doesn't already exist
+    try {
+      fs.mkdirSync(dir)
+    } catch (err) {
+      // If it does exist, don't worry unless there's another error
+      if (err.code !== 'EEXIST') throw err
+    }
+  }
+
+  compiler.plugin('emit', function(compilation, callback) {
+    var stats = compilation.getStats().toJson()
+    var toInclude = []
+
+    // Flatten the chunks (lists of files) to one list
+    for (var chunkName in stats.assetsByChunkName) {
+      var asset = stats.assetsByChunkName[chunkName]
+
+      if (typeof asset === 'string') {
+        toInclude.push(asset)
+      } else if (Array.isArray(asset)) {
+        toInclude = _.union(toInclude, asset)
+      }
+    }
+
+    var out = objectToPhpClass({
+      jsFiles: getJsFiles(toInclude, options.path),
+      cssFiles: getCssFiles(toInclude, options.path),
+    })
+
+    // Write file using fs
+    // Build directory if it doesn't exist
+    var outPutPath = options.outPutPath ? options.outPutPath : compiler.options.output.path
+
+    mkOutputDir(path.resolve(outPutPath))
+    fs.writeFileSync(path.join(outPutPath, options.phpFileName + '.php'), out)
+
+    callback()
+  })
+}
+
+module.exports = PhpOutputPlugin

src/templates/partials/footer.php

@@ -37,6 +37,13 @@ function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("sc
 				loadJS('assets/js/vendor_async/fonts-css-async.js');
 			}
 		</script>
-		<script src="assets/app.js" async defer></script>
+		<?php
+		if ( is_readable( dirname( __FILE__ ) . '/../WebpackBuiltFiles.php' ) ) {
+			require_once dirname( __FILE__ ) . '/../WebpackBuiltFiles.php';
+			foreach ( WebpackBuiltFiles::$jsFiles as $file ) { ?>
+				<script src="assets/<?php echo $file; ?>" async defer></script>
+			<?php }
+		}
+		?>
 	</body>
 </html>

src/templates/partials/header.php

@@ -45,7 +45,14 @@
 			<script type="text/javascript" src="assets/js/vendor_ie/placeholders.min.js"></script>
 		<![endif]-->
 
-		<link rel="stylesheet" href="assets/app.css">
+		<?php
+		if ( is_readable( dirname( __FILE__ ) . '/../WebpackBuiltFiles.php' ) ) {
+			require_once dirname( __FILE__ ) . '/../WebpackBuiltFiles.php';
+			foreach ( WebpackBuiltFiles::$cssFiles as $file ) { ?>
+				<link rel="stylesheet" href="assets/<?php echo $file; ?>">
+			<?php }
+		}
+		?>
 
 		<!-- jQuery from official WordPress Core -->
 		<script type="text/javascript" src="assets/js/vendor_async/jquery.js"></script>

webpack.config.js

@@ -1,10 +1,12 @@
 const config = require('./webpack.settings')
+const path = require('path')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const PhpOutputPlugin = require('./src/js/vendor/webpack-php-output')
 const SoundsPlugin = require('sounds-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const WebpackProgressOraPlugin = require('webpack-progress-ora-plugin')
@@ -152,6 +154,15 @@ const webpackConfig = {
         to: 'img/sample/',
       },
     ]),
+    new PhpOutputPlugin({
+      devServer: false, // false or string with server entry point, e.g: app.js or
+      outPutPath: path.resolve(__dirname, 'dist/'), // false for default webpack path of pass string to specify
+      assetsPathPrefix: '',
+      phpClassName: 'WebpackBuiltFiles', //
+      phpFileName: 'WebpackBuiltFiles',
+      nameSpace: false, // false {nameSpace: 'name', use: ['string'] or empty property or don't pass "use" property}
+      path: '',
+    }),
     new WebpackProgressOraPlugin(),
   ],
 }
@@ -175,7 +186,7 @@ module.exports = (env, argv) => {
               fn: function(event, file) {
                 const bs = require('browser-sync').get('bs-webpack-plugin')
 
-                if (event === 'change' && file.indexOf('.css') === -1) {
+                if (event === 'change' && file !== 'dist/WebpackBuiltFiles.php' && file.indexOf('.css') === -1) {
                   bs.reload()
                 }