Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 1080818e8fd4d18f9fa1fdb511812e7396a6c0a5 @AndrewRayCode committed Jun 30, 2016
Showing with 222 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +67 −0 README.md
  3. +94 −0 client.js
  4. +31 −0 index.js
  5. BIN my-bitcoin-address.png
  6. +28 −0 package.json
  7. BIN webpack-hot-2048-downsize.gif
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
@@ -0,0 +1,67 @@
+# Webpack Hot 2048 Loader
+
+Shows [2048](https://gabrielecirulli.github.io/2048/) in an iFrame during hot reload rebuilding to keep your easily distracted mind focused on your project.
+
+![Screencap showing hot reloading 2048 iFrame appearing and disappearing](https://raw.githubusercontent.com/DelvarWorld/webpack-hot-2048-loader/master/webpack-hot-2048-downsize.gif)
+
+## Requirements
+
+This project **requires** [webpack-hot-midleware](https://github.com/glenjamin/webpack-hot-middleware) with **at least version 2.12.0** (see [this PR](https://github.com/glenjamin/webpack-hot-middleware/pull/112)). It **won't work** with the vanilla Webpack dev server.
+
+## How To Use
+
+```sh
+npm install --save-dev webpack-hot-2048-loader
+```
+
+In your development Webpack config file, find your entry point where you include [webpack-hot-midleware](https://github.com/glenjamin/webpack-hot-middleware). It will look something like:
+
+```javascript
+entry: {
+ 'main': [
+ 'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
+ ...
+```
+
+Then **add the webpack-hot-2048-loader before** the `webpack-hot-middleware` loader:
+
+```javascript
+entry: {
+ 'main': [
+ 'webpack-hot-2048!webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
+ ...
+```
+
+Then restart your development server. That's it!
+
+## Configuring
+
+You can change the website it loads with:
+
+```javascript
+'webpack-hot-2048?website=http://blog.andrewray.me!...'
+```
+
+## FAQ
+
+### Really?
+
+Recently I've been thinking a lot about distraction. One of my projects takes up to 15 seconds to hot reload. 15 isn't a lot of seconds in general, especially for code compiling, but it's a lifetime for the brain to get distracted. Often I'll tab away to something else, completely forget my code is compiling, then lose the next 10 minutes to Twitter or [cat derping](http://cats.andrewray.me). This is an experiment to see if keeping distracting toys in the same tab as the development application can help manage distractions.
+
+### Why Does This Require `webpack-hot-middleware`?
+
+I wrote this to fit only my exact needs. And working with Webpack is sometimes convoluted and undocumented, so making this more generic is harder.
+
+### I Get Lot of Junk Logs in the Console From the 2048 iFrame
+
+Yeah
+
+## Follow Me and/or Give Me Bitcoin
+
+**Twitter**
+@[andrewray](https://twitter.com/andrewray)
+
+**Bitcoin**
+`19MZGbDFT3NZcjoUTJL6wNMxnQTMpphiEq`
+
+![My coinbase address if you want to support my wretched lifestyle](https://raw.githubusercontent.com/DelvarWorld/webpack-hot-2048-loader/master/my-bitcoin-address.png)
@@ -0,0 +1,94 @@
+const BUILDING_ACTION = 'building';
+const BUILT_ACTION = 'built';
+
+// Note the below template uses the website variable, which is injected by the
+// loader source code (index.js)
+
+const overlay = document.createElement( 'div' );
+overlay.setAttribute(
+ 'style', `
+ position:fixed;
+ /* arbitrarily high enough to go over devtools lol */
+ z-index: 999999999;
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ text-align:center;
+ display:none;
+ `
+);
+
+overlay.innerHTML = `
+<div style="
+ position:absolute;
+ z-index:1;
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ opacity:0.5;
+ background:#000;
+"></div>
+<div style="
+ position:relative;
+ z-index:2;
+ background:#fff;
+ border-radius:12px;
+ box-shadow:0 0 20px #000;
+ margin-top:10px;
+ width:530px;
+ min-height:812px;
+ display:inline-block;
+">
+ <h2
+ style="
+ position: relative;
+ z-index: 2;
+ background: linear-gradient(#333344, #000);
+ padding: 20px;
+ box-shadow: 0 0 10px #000;
+ border-radius: 4px 4px 0 0;
+ color: #fff;
+ font-size:30px;
+ line-height: 30px;
+ margin: 0;
+ "
+ ><span
+ style="
+ font-size:15px;
+ color:#ddd;
+ "
+ >(bundle rebuilding)</span> webpack-hot-2048</h2>
+ <div style="
+ position:absolute;
+ top:20px;
+ right:0;
+ bottom:0;
+ left:0;
+ ">
+ <iframe
+ src="${website}"
+ width="530px"
+ height="100%"
+ />
+ </div>
+</div>
+`;
+
+document.body.appendChild( overlay );
+
+// How does this work? The contents of this file are concatenated along with
+// the contents of https://github.com/glenjamin/webpack-hot-middleware/blob/master/client.js
+// in the loader index.js file. You can see on the last lines of that linked
+// file that we can access the subscribe functions on module.exports. I'm not
+// proud.
+module.exports.subscribeAll(function subAll( message ) {
+ if( message.action === BUILDING_ACTION ) {
+ overlay.style.display = 'block';
+ overlay.querySelector('iframe').contentWindow.focus();
+ } else if( message.action === BUILT_ACTION ) {
+ overlay.style.display = 'none';
+ }
+});
+
@@ -0,0 +1,31 @@
+var fs = require('fs');
+var path = require('path');
+var loaderUtils = require('loader-utils');
+
+var DEFAULT_WEBSITE = 'https://gabrielecirulli.github.io/2048/';
+
+module.exports = function inject( src ) {
+ this.cacheable && this.cacheable();
+
+ var callback = this.async();
+ var query = loaderUtils.parseQuery(this.query);
+
+ var website = query.website || DEFAULT_WEBSITE;
+
+ fs.readFile( path.join( __dirname, './client.js' ), 'utf-8', function( err, contents ) {
+
+ if( err ) {
+ throw err;
+ }
+
+ var built = [
+ 'var website = "' + website + '";',
+ src,
+ contents,
+ ].join('\n');
+
+ callback( null, built );
+
+ });
+
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,28 @@
+{
+ "name": "webpack-hot-2048-loader",
+ "version": "0.0.1",
+ "description": "A Webpack loader that shows you 2048 during hot reload rebuilding from webpack-hot-middleware",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/DelvarWorld/webpack-hot-2048-loader.git"
+ },
+ "keywords": [
+ "webpack"
+ ],
+ "author": "Andrew Ray",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/DelvarWorld/webpack-hot-2048-loader/issues"
+ },
+ "homepage": "https://github.com/DelvarWorld/webpack-hot-2048-loader#readme",
+ "dependencies": {
+ "loader-utils": "^0.2.15"
+ },
+ "peerDependencies": {
+ "webpack-hot-middleware": ">=2.12.0"
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1080818

Please sign in to comment.