WIP - swapping parcel for webpack

shakyShane · shakyShane · commit f42a77e3d88b · 2018-03-25T17:22:55.000+01:00
diff --git a/crossbow.yaml b/crossbow.yaml
@@ -13,21 +13,19 @@ tasks:
       - chrome
       - inject
       - bg
-      - build-chrome
-      - tasks/manifest
+      - webpack
 
   start:
     description: |
       Run the application in a regular Browser window with sample data
     tasks:
       - app-watch
 
-  build-chrome:
-    description: |
-      Build the chrome Shell
+  webpack:
     adaptor: npm
-    command: >
-      parcel build chrome.html --out-dir shells/chrome/dist --no-cache
+    env:
+      NODE_ENV: production
+    command: webpack
 
   app-watch:
     description: Run the extension in regular browser window
diff --git a/fixtures/large-page.html b/fixtures/large-page.html
diff --git a/fixtures/large.json b/fixtures/large.json
@@ -4152,4 +4152,4 @@
     ],
     "id": "2"
   }
-]
+]
diff --git a/package.json b/package.json
@@ -13,6 +13,9 @@
   "license": "ISC",
   "dependencies": {
     "@types/node": "^9.4.7",
+    "@types/react": "16.0.41",
+    "@types/react-dom": "16.0.4",
+    "awesome-typescript-loader": "4.0.1",
     "browserify": "^16.1.1",
     "classnames": "^2.2.5",
     "dlv": "^1.1.1",
@@ -28,10 +31,14 @@
     "react-addons-perf": "15.4.2",
     "react-dom": "^16.2.0",
     "rxjs": "^5.5.6",
-    "ts-node": "^5.0.1"
+    "ts-node": "^5.0.1",
+    "uglifyjs-webpack-plugin": "1.2.4",
+    "webpack": "4.2.0",
+    "webpack-dev-server": "3.1.1"
   },
   "devDependencies": {
     "node-sass": "4.7.2",
-    "typescript": "2.7.2"
+    "typescript": "2.7.2",
+    "webpack-cli": "2.0.13"
   }
 }
diff --git a/plain.html b/plain.html
@@ -6,9 +6,41 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <link rel="stylesheet" href="./scss/core.scss">
+    <style>
+        html,body {
+            padding:0;
+            margin:0;
+            height:100%;
+            width: 100%;
+            overflow: hidden;
+        }
+        .wrapper {
+            width: 100%;
+            height: 100%;
+        }
+        .iframe {
+            width: 100%;
+            height: 50%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .devtoolspanel {
+            width: 100%;
+            height: 50%;
+            position: absolute;
+            top: 50%;
+            left: 0;
+        }
+    </style>
 </head>
 <body>
-<div id="app"></div>
-<script src="./src/plain.tsx"></script>
+<div class="wrapper">
+    <iframe class="iframe" src="./fixtures/large-page.html" id="m2-iframe" width="100%"></iframe>
+    <div class="devtoolspanel">
+        <div id="app"></div>
+    </div>
+</div>
+<script src="/panel.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {pullData} from "../utils";
 import {NodeItem} from "../types";
 import {App} from "./App";
-import * as dlv from "dlv";
+const dlv = require('dlv');
 import {SelectionOverlay} from "./SelectionOverlay";
 
 export interface ActionBarProps {
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {Node} from "./Node";
-import * as dlv from "dlv";
 
 declare var require;
 import {collectIds, flattenNodes, getSearchNodes} from "../utils";
@@ -23,7 +22,6 @@ export interface AppProps {
 export class App extends React.Component<AppProps, any> {
     props: AppProps;
     sub: Subscription | null;
-    setState: (...args) => void;
     ref: any;
     state: {
         collapsed: Set<string>,
diff --git a/src/components/Node.tsx b/src/components/Node.tsx
@@ -3,7 +3,7 @@ import {NodeId, NodeItem, NodePath} from "../types";
 import {NodeHead} from "./NodeHead";
 import {NodeEnd} from "./NodeEnd";
 import {App} from "./App";
-import * as dlv from 'dlv';
+const dlv = require('dlv');
 
 export interface NodeProps {
     key?: string|number,
@@ -15,15 +15,14 @@ export interface NodeProps {
     select(id: NodeId, path: NodePath, pos: {head: boolean, tail: boolean}): void,
     addHover(id: NodeId): void,
     toggle(id: NodeId): void,
-    removeHover(id: NodeId): void
     showOverlay(id: NodeId): void
 }
 
 export class Node extends React.PureComponent<NodeProps> {
     props: NodeProps;
     render() {
         const {props} = this;
-        const {node, depth, addHover, removeHover, searchTerm} = props;
+        const {node, depth, addHover, searchTerm} = props;
         const {children} = node;
         const hasNodes = children && (children.length > 0);
         const isCollapsed = props.collapsed.has(node.id);
@@ -37,7 +36,6 @@ export class Node extends React.PureComponent<NodeProps> {
                         depth={nextDepth}
                         key={n.id}
                         addHover={addHover}
-                        removeHover={removeHover}
                         toggle={props.toggle}
                         collapsed={props.collapsed}
                         searchTerm={searchTerm}
@@ -54,7 +52,6 @@ export class Node extends React.PureComponent<NodeProps> {
             hasChildren={hasNodes}
             indent={indent}
             addHover={addHover}
-            removeHover={removeHover}
             isCollapsed={isCollapsed}
             toggle={props.toggle}
             searchTerm={searchTerm}
@@ -69,7 +66,6 @@ export class Node extends React.PureComponent<NodeProps> {
                 hasChildren={hasNodes}
                 indent={indent}
                 addHover={addHover}
-                removeHover={removeHover}
                 isSelected={tailIsSelected}
                 select={props.select}
                 showOverlay={props.showOverlay}
diff --git a/src/components/NodeEnd.tsx b/src/components/NodeEnd.tsx
@@ -13,7 +13,6 @@ export interface NodeEndProps {
     showOverlay(id: NodeId): void,
     select(id: NodeId, path: NodePath, pos: {head: boolean, tail: boolean}): void,
     addHover(id: NodeId, path: NodePath, pos: {head: boolean, tail: boolean}): void,
-    removeHover(id: NodeId): void
 }
 export class NodeEnd extends React.PureComponent<NodeEndProps> {
     props: NodeEndProps;
diff --git a/src/components/NodeHead.tsx b/src/components/NodeHead.tsx
@@ -8,7 +8,6 @@ import {NodeInfoButton} from "./NodeInfoButton";
 export interface NodeInfoProps {
     node: NodeItem,
     indent: number,
-    isHovered: boolean,
     isCollapsed: boolean,
     isSelected: boolean,
     hasChildren: boolean,
@@ -35,7 +34,6 @@ export class NodeHead extends React.PureComponent<NodeInfoProps> {
         }
         const classes = classnames({
             node_info: true,
-            'node_info--hovered': props.isHovered,
             'node_info--selected': props.isSelected
         });
         const nodeName = node.data && node.data.type;
diff --git a/src/components/keypresses.ts b/src/components/keypresses.ts
@@ -1,7 +1,7 @@
 import {Msg} from "../messages.types";
 import {Observable} from "../rx";
 import {App} from "./App";
-import * as dlv from "dlv";
+const dlv = require('dlv');
 import {down, left, up} from "../utils/tree-move";
 
 export const keyPresses = {
@@ -63,4 +63,4 @@ export const keyPresses = {
             });
         });
     }
-}
+}
diff --git a/src/plain.tsx b/src/plain.tsx
@@ -1,14 +1,14 @@
 import {createWall} from "./plain-wall";
 import {createApp} from "./index";
 import {Msg} from "./messages.types";
-const nodes = require('../fixtures/large.json');
+// const nodes = require('../fixtures/large.json');
 
 const {incoming$, outgoing$} = createWall();
 const app = createApp({incoming$, outgoing$});
 
 const msg: Msg.ParsedComments = {
     type: Msg.Names.ParsedComments,
-    payload: nodes
+    payload: []
 };
 
 setTimeout(() => incoming$.next(msg), 1000);
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,6 @@
 import {NodeId, NodeItem, NodeItems, NodeItemShort, NodePath} from "./types";
 import {App} from "./components/App";
-import * as dlv from "dlv";
+const dlv = require("dlv");
 
 export function collectIds(nodes: NodeItem[]) {
     const names = [];
@@ -65,7 +65,7 @@ export function flattenNodes(nodes: NodeItem[]): NodeItems {
 
     return flattenChildren(nodes, '$$root', [], []), output;
 
-    function flattenChildren(nodes: NodeItem[], parentId: string, path: NodePath, namePath: string[]) {
+    function flattenChildren(nodes: NodeItem[], parentId: string, path: NodePath, namePath: {name: string, type: string}[]) {
         nodes.forEach((node, index) => {
             const nextPath = path.concat(index);
             const newNode = {
@@ -96,4 +96,4 @@ export function getSearchNodes(searchTerm: string, flatNodes: App['state']['flat
         });
 
     return matches;
-}
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
+    "outDir": "./dist/",
     "jsx": "react",
     "target": "es2016",
-    "lib": ["DOM", "ES2015"]
+    "lib": ["DOM", "ES2015"],
+    "sourceMap": true,
+    "moduleResolution": "node"
   },
   "include": ["src/chrome.tsx"]
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,41 @@
+const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    entry: env({dev: './src/plain.tsx', production: "./src/chrome.tsx"}),
+    devtool: env({dev: 'inline-source-map', production: "source-map"}),
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'awesome-typescript-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js']
+    },
+    output: {
+        filename: 'panel.js',
+        path: path.resolve(__dirname, 'shells/chrome/dist')
+    },
+    mode: env({dev: 'development', production: 'production'}),
+    devServer: {},
+    plugins: env({
+        dev: [],
+        production: [
+            new UglifyJSPlugin({
+                sourceMap: true
+            })
+        ]
+    })
+};
+
+function env(input) {
+    const selection = input[process.env.NODE_ENV || 'dev'];
+    if (input.shared && Array.isArray(input.shared)) {
+        return input.shared.concat(selection);
+    }
+    return selection;
+}
diff --git a/yarn-error.log b/yarn-error.log
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -4152,4 +4152,4 @@`
`4152`	`4152`	`],`
`4153`	`4153`	`"id": "2"`
`4154`	`4154`	`}`
`4155`		`-]`
	`4155`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,6 @@ export interface NodeEndProps {`
`13`	`13`	`showOverlay(id: NodeId): void,`
`14`	`14`	`select(id: NodeId, path: NodePath, pos: {head: boolean, tail: boolean}): void,`
`15`	`15`	`addHover(id: NodeId, path: NodePath, pos: {head: boolean, tail: boolean}): void,`
`16`		`- removeHover(id: NodeId): void`
`17`	`16`	`}`
`18`	`17`	`export class NodeEnd extends React.PureComponent<NodeEndProps> {`
`19`	`18`	`props: NodeEndProps;`