Cleaner separation of mock data for webdebugger + easier dev setup

omarbelkhodja · May 17, 2016 · feac1d5 · feac1d5
1 parent 952c830
commit feac1d5
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 86 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 build/*.map
 node_modules/
+npm-debug.log
diff --git a/webdebugger/.gitignore b/webdebugger/.gitignore
@@ -1,2 +1,3 @@
 build/*.map
 node_modules/
+npm-debug.log
diff --git a/webdebugger/build/index.html b/webdebugger/build/index.html
@@ -18,51 +18,52 @@ <h1>PostCSS Debugger</h1>
 
   <script>
     window.postcssDebug = {
-      files: [
+  files: [
+    {
+      path: '/Users/andy/workspace/postcss-debug/test/css/test.css',
+      // maybe `error` object in here (message + stack trace) (snapshot will also be there in `snapshots`)
+      snapshots: [
         {
-          path: '/Users/andy/workspace/postcss-debug/test/css/test.css',
-          // maybe `error` object in here (message + stack trace) (snapshot will also be there in `snapshots`)
-          snapshots: [
-            {
-              timestamp: 1462203864674,
-              prevPlugin: null,
-              nextPlugin: 'postcss-calc',
-              content: `
-              .test {
-                  color: black;
-                  &:hover {
-                      margin-top: calc(10px + 20px)
-                  }
-              }`
-            },
-            {
-              timestamp: 1462203864674,
-              prevPlugin: 'postcss-calc',
-              nextPlugin: 'postcss-nested',
-              content: `
-              .test {
-                  color: black;
-                  &:hover {
-                      margin-top: 30px
-                  }
-              }`
-            },
-            {
-              timestamp: 1462203864674,
-              prevPlugin: 'postcss-nested',
-              nextPlugin: null,
-              content: `
-              .test {
-                  color: black
+          timestamp: 1462203864674,
+          prevPlugin: null,
+          nextPlugin: 'postcss-calc',
+          content: `
+          .test {
+              color: black;
+              &:hover {
+                  margin-top: calc(10px + 20px)
               }
-              .test:hover {
+          }`
+        },
+        {
+          timestamp: 1462203864674,
+          prevPlugin: 'postcss-calc',
+          nextPlugin: 'postcss-nested',
+          content: `
+          .test {
+              color: black;
+              &:hover {
                   margin-top: 30px
-              }`
-            }
-          ]
+              }
+          }`
+        },
+        {
+          timestamp: 1462203864674,
+          prevPlugin: 'postcss-nested',
+          nextPlugin: null,
+          content: `
+          .test {
+              color: black
+          }
+          .test:hover {
+              margin-top: 30px
+          }`
         }
       ]
     }
+  ]
+}
+
   </script>
   <script src="./app.js"></script>
 </body>

diff --git a/webdebugger/dev/prepare-index-html.js b/webdebugger/dev/prepare-index-html.js
@@ -0,0 +1,8 @@
+'use strict'
+
+var fs = require('fs')
+
+var html = fs.readFileSync(__dirname + '/../src/index.html', { encoding: 'utf8' })
+var sampleData = fs.readFileSync(__dirname + '/sample-data.js', { encoding: 'utf8' })
+
+fs.writeFileSync(__dirname + '/../build/index.html', html.replace('/* DEBUG_SNAPSHOTS */', sampleData))
diff --git a/webdebugger/dev/sample-data.js b/webdebugger/dev/sample-data.js
@@ -0,0 +1,46 @@
+{
+  files: [
+    {
+      path: '/Users/andy/workspace/postcss-debug/test/css/test.css',
+      // maybe `error` object in here (message + stack trace) (snapshot will also be there in `snapshots`)
+      snapshots: [
+        {
+          timestamp: 1462203864674,
+          prevPlugin: null,
+          nextPlugin: 'postcss-calc',
+          content: `
+          .test {
+              color: black;
+              &:hover {
+                  margin-top: calc(10px + 20px)
+              }
+          }`
+        },
+        {
+          timestamp: 1462203864674,
+          prevPlugin: 'postcss-calc',
+          nextPlugin: 'postcss-nested',
+          content: `
+          .test {
+              color: black;
+              &:hover {
+                  margin-top: 30px
+              }
+          }`
+        },
+        {
+          timestamp: 1462203864674,
+          prevPlugin: 'postcss-nested',
+          nextPlugin: null,
+          content: `
+          .test {
+              color: black
+          }
+          .test:hover {
+              margin-top: 30px
+          }`
+        }
+      ]
+    }
+  ]
+}
diff --git a/webdebugger/package.json b/webdebugger/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "rollup -c --sourcemap && cp src/index.html build/",
+    "build": "rollup -c --sourcemap",
+    "serve": "node dev/prepare-index-html.js && http-server build/ -o -c-1",
+    "start": "run-p watch serve",
     "watch": "watch 'npm run build' src/"
   },
   "devDependencies": {
@@ -13,6 +15,8 @@
     "babel-preset-es2015-loose": "^7.0.0",
     "babelify": "^7.3.0",
     "browserify": "^13.0.0",
+    "http-server": "^0.9.0",
+    "npm-run-all": "^2.1.0",
     "rollup": "^0.26.2",
     "rollup-plugin-babel": "^2.4.0",
     "rollup-plugin-commonjs": "^2.2.1",

diff --git a/webdebugger/src/index.html b/webdebugger/src/index.html
@@ -17,52 +17,7 @@ <h1>PostCSS Debugger</h1>
   </footer>
 
   <script>
-    window.postcssDebug = {
-      files: [
-        {
-          path: '/Users/andy/workspace/postcss-debug/test/css/test.css',
-          // maybe `error` object in here (message + stack trace) (snapshot will also be there in `snapshots`)
-          snapshots: [
-            {
-              timestamp: 1462203864674,
-              prevPlugin: null,
-              nextPlugin: 'postcss-calc',
-              content: `
-              .test {
-                  color: black;
-                  &:hover {
-                      margin-top: calc(10px + 20px)
-                  }
-              }`
-            },
-            {
-              timestamp: 1462203864674,
-              prevPlugin: 'postcss-calc',
-              nextPlugin: 'postcss-nested',
-              content: `
-              .test {
-                  color: black;
-                  &:hover {
-                      margin-top: 30px
-                  }
-              }`
-            },
-            {
-              timestamp: 1462203864674,
-              prevPlugin: 'postcss-nested',
-              nextPlugin: null,
-              content: `
-              .test {
-                  color: black
-              }
-              .test:hover {
-                  margin-top: 30px
-              }`
-            }
-          ]
-        }
-      ]
-    }
+    window.postcssDebug = /* DEBUG_SNAPSHOTS */
   </script>
   <script src="./app.js"></script>
 </body>