test.html

casesandberg · Aug 16, 2015 · 61845a8 · 61845a8
1 parent 2b69273
commit 61845a8
Show file tree

Hide file tree

Showing 7 changed files with 2,275 additions and 1,014 deletions.
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/docs/index.js b/docs/index.js
@@ -1,11 +1,18 @@
 'use strict';
 
 var React = require('react');
-require('../node_modules/normalize.css/normalize.css');
+// require('../node_modules/normalize.css/normalize.css');
 
-var Home = require('./components/home/Home');
+var Home = require('./components/home/Home.jsx');
 
-React.render(
-  React.createElement(Home),
-  document.getElementById('root')
-);
+var html = React.renderToString(React.createElement(Home));
+console.log(html);
+
+if (typeof document !== 'undefined') {
+  React.render(
+    React.createElement(Home),
+    document.getElementById('root')
+  );
+}
+
+module.exports = Home;
diff --git a/gulpfile.js b/gulpfile.js
@@ -46,7 +46,8 @@ gulp.task('build', function(done) {
 
   webpack(build, function(err, stats) {
     if (err) {
-      throw new Error(err);
+      // throw new Error(err);
+      console.log(err);
     }
 
     done();

diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 
     <title>React Color</title>
 
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">
     <link href="http://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet">
   </head>
   <body>

diff --git a/modules/webpack-react-static/index.js b/modules/webpack-react-static/index.js
@@ -0,0 +1,118 @@
+var React = require('react');
+var evaluate = require('eval');
+var _ = require('lodash');
+
+// src can be either a filename or a chunk name
+function ReactToHtmlWebpackPlugin(destPath, src, options) {
+  this.src = src;
+  this.destPath = destPath;
+  this.options = typeof options === 'object' ? options : {};
+}
+
+ReactToHtmlWebpackPlugin.prototype.apply = function(compiler) {
+  compiler.plugin('emit', function(compiler, done) {
+
+    var webpackStatsJson = compiler.getStats().toJson();
+
+    try {
+      var asset = findAsset(this.src, compiler, webpackStatsJson);
+      // if (!asset) {
+      //   throw new Error('Output file not found: "' + this.src + '"');
+      // }
+
+      // console.log(compiler);
+
+      // var data = require('/Users/case/Github/react-color/docs/index.js');
+      // console.log(compiler.getStats().toJson());
+
+      var index = compiler.getStats().toJson().modules[1];
+      console.log(evaluate(index.source, undefined, index.identifier, true));
+
+      // console.log('compiler.compiler.inputFileSystem', compiler.compiler.inputFileSystem);
+      // console.log('compiler.fileDependencies[0]', compiler.fileDependencies[0])
+      // var source = asset.source();
+      // console.log(source);
+      // var Component = evaluate(source, /* filename: */ undefined, /* scope: */ undefined, /* includeGlobals: */ true);
+
+      // var renderMethod = this.options.static ? 'renderToStaticMarkup' : 'renderToString';
+      // var html = React[renderMethod](React.createElement(Component));
+      //
+      // var template = this.options.template;
+      //
+      // if (template != null && typeof template !== 'function') {
+      //   throw new Error('Template must be a function');
+      // }
+
+      // var output = typeof template === 'function' ?
+      //   template({
+      //     html: html,
+      //     assets: getAssetsFromCompiler(compiler, webpackStatsJson),
+      //   }) :
+      //   html;
+
+      // var output = React.renderToString(React.createElement(asset.source()));
+
+      compiler.assets[this.destPath] = createAssetFromContents(asset.source());
+    } catch (err) {
+      return done(err);
+    }
+
+    done();
+  }.bind(this));
+};
+
+var findAsset = function(src, compiler, webpackStatsJson) {
+  var asset = compiler.assets[src];
+  if (asset) {
+    return asset;
+  }
+
+  var chunkValue = webpackStatsJson.assetsByChunkName[src];
+  if (!chunkValue) {
+    return null;
+  }
+
+  // Webpack outputs an array for each chunk when using sourcemaps
+  if (chunkValue instanceof Array) {
+    // Is the main bundle always the first element?
+    chunkValue = chunkValue[0];
+  }
+
+  return compiler.assets[chunkValue];
+};
+
+// Shamelessly stolen from html-webpack-plugin - Thanks @ampedandwired :)
+var getAssetsFromCompiler = function(compiler, webpackStatsJson) {
+  var assets = {};
+  for (var chunk in webpackStatsJson.assetsByChunkName) {
+    var chunkValue = webpackStatsJson.assetsByChunkName[chunk];
+
+    // Webpack outputs an array for each chunk when using sourcemaps
+    if (chunkValue instanceof Array) {
+      // Is the main bundle always the first element?
+      chunkValue = chunkValue[0];
+    }
+
+    if (compiler.options.output.publicPath) {
+      chunkValue = compiler.options.output.publicPath + chunkValue;
+    }
+
+    assets[chunk] = chunkValue;
+  }
+
+  return assets;
+};
+
+var createAssetFromContents = function(contents) {
+  return {
+    source: function() {
+      return contents;
+    },
+
+    size: function() {
+      return contents.length;
+    },
+  };
+};
+
+module.exports = ReactToHtmlWebpackPlugin;
diff --git a/modules/webpack-react-static/package.json b/modules/webpack-react-static/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "webpack-react-static",
+  "version": "2.2.0",
+  "description": "Webpack plugin that renders React components to HTML files",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/markdalgleish/react-to-html-webpack-plugin.git"
+  },
+  "author": {
+    "name": "Mark Dalgleish"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/markdalgleish/react-to-html-webpack-plugin/issues"
+  },
+  "homepage": "https://github.com/markdalgleish/react-to-html-webpack-plugin",
+  "dependencies": {
+    "eval": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "0.12.x || >=0.13.0-beta.1"
+  },
+  "gitHead": "3aeac9d26dbf3722fa76632cff3770697e2011a2",
+  "_id": "react-to-html-webpack-plugin@2.2.0",
+  "_shasum": "0a1555459b867d6d0a3549248dfbc61dbf0c887b",
+  "_from": "react-to-html-webpack-plugin@*",
+  "_npmVersion": "2.11.2",
+  "_nodeVersion": "0.10.36",
+  "_npmUser": {
+    "name": "markdalgleish",
+    "email": "mark.john.dalgleish@gmail.com"
+  },
+  "maintainers": [
+    {
+      "name": "markdalgleish",
+      "email": "mark.john.dalgleish@gmail.com"
+    }
+  ],
+  "dist": {
+    "shasum": "0a1555459b867d6d0a3549248dfbc61dbf0c887b",
+    "tarball": "http://registry.npmjs.org/react-to-html-webpack-plugin/-/react-to-html-webpack-plugin-2.2.0.tgz"
+  },
+  "directories": {},
+  "_resolved": "https://registry.npmjs.org/react-to-html-webpack-plugin/-/react-to-html-webpack-plugin-2.2.0.tgz"
+}
diff --git a/test.html b/test.html