Provide js-fiddle merge task to generate simple demo page #11

MUCI · Dec 14, 2017 · a1dc519 · a1dc519
1 parent cba69e8
commit a1dc519
Show file tree

Hide file tree

Showing 10 changed files with 888 additions and 48 deletions.
diff --git a/bin/build.js b/bin/build.js
@@ -14,6 +14,7 @@ const path        = require('path');
 const nodemon     = require('gulp-nodemon');
 const livereload  = require('gulp-livereload');
 const stylus      = require('gulp-stylus');
+const fiddleMount = require('./fiddle-mount.js');
 const fs          = require('fs');
 
 
@@ -121,4 +122,15 @@ gulp.task('assets', function () {
 
 gulp.task('release', function(){
   gulp.start('build:release', 'examples');
+});
+
+/*
+ * Builds htdocs/index.html
+ */
+gulp.task('examples', function(){
+  fiddleMount('*', PATHS.examples, (content) => {
+    fs.writeFileSync(PATHS.examplesOut, content);
+  }, false, {
+    version: webpackConfigCommon(null, 'dev')['$VERSION']
+  });
 });
diff --git a/bin/fiddle-mount.js b/bin/fiddle-mount.js
@@ -0,0 +1,85 @@
+/*
+ * This module provides a function to join jsfiddle examples into single fancy html output.
+ * The examples must have the following layout:
+ *   example_name
+ *    |- demo.html
+ *    |- demo.js
+ *    \- demo.css
+ *
+ */
+const path = require('path');
+const fs =   require('fs');
+const dot =  require('dot');
+
+/*
+ * Generate html output for given example.
+ * Calls callback(contents) when the contents of the output html file is generated.
+ *
+ * If exampleName is '*' then one big file with all examples is generated.
+ *
+ */
+const parse = (exampleName, examplesPath, callback, onlyBody=false, conf=null) => {
+    const exampleDir = path.resolve(__dirname, examplesPath, exampleName);
+
+    const globalExampleTemplateFile = fs.readFileSync(path.resolve(__dirname, examplesPath, 'index.html'));
+    const singleExampleTemplateFile = fs.readFileSync(path.resolve(__dirname, examplesPath, 'example.html'));
+
+    const globalExampleTemplate = dot.template(globalExampleTemplateFile);
+    const singleExampleTemplate = dot.template(singleExampleTemplateFile);
+
+
+    // Make one big html out of all examples
+    if(exampleName == '*') {
+
+        const examples = fs.readdirSync(path.resolve(__dirname, examplesPath)).filter((folder) => {
+            return fs.lstatSync(path.resolve(__dirname, examplesPath, folder)).isDirectory();
+        });
+
+        let joinArray = [];
+
+        const examplesJoined = () => {
+            callback(globalExampleTemplate({
+                examples: joinArray,
+                config: conf
+            }));
+        };
+
+        const exampleJoinCallback = (i) => {
+          if(i >= examples.length) {
+              examplesJoined();
+              return;
+          }
+          parse(examples[i], examplesPath, (result) => {
+              joinArray.push(result);
+              exampleJoinCallback(i+1);
+          }, true, conf);
+        };
+
+        exampleJoinCallback(0);
+
+    } else {
+
+        fs.readFile(path.resolve(exampleDir, 'demo.css'), (err, data) => {
+          if (err) throw err;
+          const cssContents = data.toString();
+
+          fs.readFile(path.resolve(exampleDir, 'demo.js'), (err, data) => {
+              if (err) throw err;
+              const jsContents = data.toString();
+
+              fs.readFile(path.resolve(exampleDir, 'demo.html'), (err, data) => {
+                  if (err) throw err;
+                  const htmlContents = data.toString();
+                  callback(singleExampleTemplate({
+                      cssContents,
+                      jsContents,
+                      title: htmlContents.replace(/Demo/ig, ''),
+                      config: conf
+                  }));
+              });
+          });
+      });
+    }
+};
+
+module.exports = parse;
diff --git a/bin/webpack.common.config.js b/bin/webpack.common.config.js
@@ -27,10 +27,10 @@ module.exports = function(PATHS, currentEnv) {
 
   // Load build config file
   const buildConfig = require('../buildConfig.js')[currentEnv];
-  
+
   // Load package.json
   const packageJson = require('../package.json');
-  
+
   /*
    * Merge package.json attributes into final config object.
    * All properties are mapped to their upper case variants prefixed with $.
@@ -45,7 +45,7 @@ module.exports = function(PATHS, currentEnv) {
   Object.keys(packageJson).forEach((key) => {
     buildConfig['$' + key.toString().toUpperCase()] = packageJson[key];
   });
-  
+
   /*
    * Replace all variable references in all strings from buildConfig.
    *
@@ -66,17 +66,17 @@ module.exports = function(PATHS, currentEnv) {
       }
     });
   });
-  
+
   if(PATHS == null) return buildConfig;
-  
+
   if(currentEnv === 'prod') {
     buildConfig['process.env'] = {
       NODE_ENV: JSON.stringify('production')
     };
   }
-  
+
   let webpackDevtool = false;
-  
+
   // Wrap all strings in commas to prevent webpack define plugin issue.
   const buildConfigForDefinitions = buildConfig;
   Object.keys(buildConfigForDefinitions).forEach((keyTarget) => {
@@ -85,7 +85,7 @@ module.exports = function(PATHS, currentEnv) {
       buildConfigForDefinitions[keyTarget] = '"' + valueTarget + '"';
     }
   });
-  
+
   let webpackPlugins = [
     new ProgressBarPlugin(),
     new webpack.DefinePlugin(buildConfigForDefinitions)
@@ -97,13 +97,13 @@ module.exports = function(PATHS, currentEnv) {
       loader: "style-loader!css-loader"
     }
   ];
-  
+
   let webpackEntry = [
     PATHS.srcJS
   ];
-  
+
   let webpackOutput = {};
-  
+
   if(currentEnv === 'prod') {
     webpackOutput = {
       filename: PATHS.outJS,
@@ -120,9 +120,9 @@ module.exports = function(PATHS, currentEnv) {
       path: PATHS.outJSPath
     };
   }
-  
+
   if(currentEnv === 'prod') {
-    
+
     webpackDevtool = 'source-map';
     webpackLoaders = webpackLoaders.concat([
       {
@@ -146,7 +146,7 @@ module.exports = function(PATHS, currentEnv) {
         ]
       }
     ]);
-    
+
     webpackPlugins = webpackPlugins.concat([
       new webpack.optimize.OccurrenceOrderPlugin(),
       new webpack.optimize.ModuleConcatenationPlugin(),
@@ -175,9 +175,9 @@ module.exports = function(PATHS, currentEnv) {
       new webpack.optimize.AggressiveMergingPlugin()
     ]);
   } else if(currentEnv === 'dev') {
-    
+
     webpackDevtool = 'eval';
-    
+
     webpackLoaders = webpackLoaders.concat([
       {
         test: /\.js$/,
@@ -200,22 +200,22 @@ module.exports = function(PATHS, currentEnv) {
         ]
       }
     ]);
-    
+
   }
-  
+
   if(buildConfig['$CONFIG_BUILD_CACHE'] === true) {
     webpackPlugins = webpackPlugins.concat([
       // 70%-speedup caching
       new HardSourceWebpackPlugin({
         // Directory to store cache
         cacheDirectory: path.join(PATHS.buildCache, currentEnv, '[confighash]'),
         recordsPath: path.join(PATHS.buildCache, currentEnv, '[confighash]', 'records.json'),
-        
+
         // Generate hash for current cache
         configHash: function(webpackConfig) {
           return `webpack-${currentEnv}`;
         },
-        
+
         // Used to generate has for current env
         environmentHash: {
           root: '..',
@@ -227,7 +227,7 @@ module.exports = function(PATHS, currentEnv) {
       })
     ]);
   }
-  
+
   webpackPlugins.push(new webpack.BannerPlugin(buildConfig['$BANNER']));
 
   // Final webpack config
@@ -274,10 +274,10 @@ module.exports = function(PATHS, currentEnv) {
       }
     }
   };
-  
+
   // Store config in cache
   configCache[currentEnv] = finalConfig;
-  
+
   // Return generated config object
   return finalConfig;
 };
diff --git a/examples/example.html b/examples/example.html
@@ -0,0 +1,11 @@
+<div class="exampleContent">
+    <span class="htmlExampleContents">
+      {{=it.title}}
+    </span>
+    <style>
+      {{=it.cssContents}}
+    </style>
+    <script>
+      {{=it.jsContents}}
+    </script>
+</div>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Examples</title>
+  <meta name="description" content="jquery-usos examples demo">
+  <meta name="author" content="Piotr Styczyński">
+
+  <script src="../src/vendor/jquery-1.9.1.js"></script>
+  <script src="../src/vendor/jquery-migrate-1.1.0.js"></script>
+  <script src="../src/vendor/jquery-ui-1.10.1.custom.js"></script>
+  <script src="../lib/jquery-usos.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
+
+
+  <link rel="stylesheet" href="../jquery-ui-theme/jquery-ui-1.10.1.custom.css">
+  <link rel="stylesheet" href="../jquery-ui-theme/tooltipster.css">
+  <link rel="stylesheet" href="../lib/jquery-usos.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+
+</head>
+
+<body>
+
+<style>
+h1 {
+    font-size: 200%;
+    width: 100%;
+    background-color: #416067;
+    height: 43px;
+    color: white;
+    padding-top: 2px;
+    margin-left: -40px;
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+.exampleContent {
+    margin-top: 66px;
+    margin-bottom: -38px;
+}
+.htmlExampleContents {
+    margin-left: 90px;
+    display: block;
+}
+p {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.header {
+   width: 100%;
+   background-color: black;
+   position: fixed;
+   top: 0px;
+}
+.header > img {
+    box-shadow: 0px 0px 141px #161616;
+    color: black;
+    border-radius: 184px;
+    height: 50px;
+}
+.header > span {
+    color: white;
+    margin-left: 15px;
+    font-weight: 600;
+    z-index: 9999999 !important;
+}
+</style>
+
+<div class="header">
+<img src="https://avatars1.githubusercontent.com/u/2855566?s=200&v=4" />
+<span>
+  JQuery-USOS version {{=it.config.version}}
+</span>
+</div>
+
+{{~it.examples :value:index}}
+<div>{{=value}}</div>
+{{~}}
+
+</body>
+
+</html>
diff --git a/examples/latest-bundle.min.js b/examples/latest-bundle.min.js