Fix issues with middleware

packages/diffhtml-components/lib/component.js

@@ -19,8 +19,10 @@ const RenderDebounce = new WeakMap();
 
 /**
  * @param {Props} defaultProps
+ * @returns {string[]}
  */
-const getObserved = ({ defaultProps }) => defaultProps ? keys(defaultProps) : [];
+const getObserved = ({ defaultProps }) =>
+  defaultProps ? keys(defaultProps) : EMPTY.ARR;
 
 /**
  * Creates the `component.props` object.
@@ -440,4 +442,4 @@ try {
 } catch {}
 
 // Automatically subscribe the Component middleware.
-Component.subscribeMiddleware();
+Component.subscribeMiddleware();

packages/diffhtml-components/lib/util/types.js

@@ -3,6 +3,7 @@
  */
 export const EMPTY = {
   OBJ: {},
+  ARR: [],
   BOOL: true,
 };
 

packages/diffhtml-devtools/chrome-extension/manifest.json

@@ -4,6 +4,7 @@
   "description": "Official diffHTML Chrome DevTools Extension",
   "permissions": [
     "tabs",
+    "*://*/*",
     "http://*/*",
     "https://*/*"
   ],

packages/diffhtml-devtools/demo/index.html

@@ -18,8 +18,8 @@
     const { use, html, innerHTML, outerHTML } = diff;
 
     // Current broken and not letting text update for some reason...
-    //use(inlineTransitions());
-    //use(logger());
+    use(inlineTransitions());
+    use(logger());
 
     const animate = (el, ...args) => new Promise(resolve => el.animate(
       ...args

packages/diffhtml-devtools/lib/scripts/background.js

@@ -5,10 +5,10 @@ const savedRequests = [];
 
 chrome.runtime.onConnect.addListener(port => {
   if (port.name === 'devtools-page') {
-    const devToolsListener = function(message, sender, sendResponse) {
+    const devToolsListener = message => {
       connections.set(message.tabId, port);
 
-      savedRequests.forEach(function([id, request]) {
+      savedRequests.forEach(([id, request]) => {
         connections.get(id).postMessage(request);
       });
 
@@ -23,7 +23,7 @@ chrome.runtime.onConnect.addListener(port => {
 
     port.onMessage.addListener(devToolsListener);
 
-    port.onDisconnect.addListener(function(port) {
+    port.onDisconnect.addListener(port => {
        port.onMessage.removeListener(devToolsListener);
 
        connections.forEach((prevPort, tabId) => {
@@ -37,7 +37,7 @@ chrome.runtime.onConnect.addListener(port => {
 
 // Receive message from content script and relay to the devTools page for the
 // current tab
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((request, sender) => {
   // Messages from content scripts should have sender.tab set
   if (sender.tab) {
     const { id } = sender.tab;

packages/diffhtml-devtools/lib/scripts/bridge.js

@@ -127,7 +127,7 @@ export default function devTools(Internals) {
 
   function devToolsTask(transaction) {
     const {
-      mount, markup, config, state: { newTree }, state
+      mount, markup, config, newTree, state
     } = transaction;
 
     const isFunction = typeof mount.rawNodeName === 'function';
@@ -136,9 +136,12 @@ export default function devTools(Internals) {
     const startDate = performance.now();
 
     const start = () => {
-      console.log('Start transaction');
+      selectors.set(selector, newTree);
+
+      extension.activate(getInternals());
+
       return extension.startTransaction(startDate, {
-        domNode: selector,
+        mount: selector,
         markup,
         options: config,
         state: assign({}, state, state.nextTransaction && {
@@ -156,8 +159,6 @@ export default function devTools(Internals) {
       start();
     }
 
-    selectors.set(selector, newTree);
-
     return function() {
       // TODO Make patches a separate asynchronous operation, and only
       // aggregate when completed.
@@ -172,7 +173,7 @@ export default function devTools(Internals) {
 
         const { aborted, completed } = transaction;
         const stop = () => extension.endTransaction(startDate, endDate, {
-          domNode: selector,
+          mount: selector,
           markup,
           options: config,
           state: assign({}, state, state.nextTransaction && {
@@ -189,8 +190,6 @@ export default function devTools(Internals) {
         if (!extension) {
           cacheTask.push(() => stop());
         } else {
-
-          extension.activate(getInternals());
           stop();
         }
       });

packages/diffhtml-devtools/lib/scripts/components/transaction-detail.js

@@ -2,10 +2,10 @@ import { html } from 'diffhtml';
 import { Component } from 'diffhtml-components';
 
 class DevtoolsTransactionDetail extends Component {
-  static propTypes = {
-    transaction: Object,
-    stats: Object,
-    closeDetail: Function,
+  static defaultProps = {
+    transaction: {},
+    stats: {},
+    closeDetail: () => {},
   }
 
   state = {

packages/diffhtml-devtools/lib/scripts/components/transaction-row.js

@@ -5,12 +5,12 @@ import SemanticUITable from '../semantic-ui/table';
 const { keys } = Object;
 
 class DevtoolsTransactionRow extends Component {
-  static propTypes = {
-    index: Number,
-    transaction: Object,
-    stateName: String,
-    startTime: Number,
-    endTime: Number,
+  static defaultProps = {
+    index: -1,
+    transaction: {},
+    stateName: '',
+    startTime: -1,
+    endTime: -1,
   }
 
   render() {
@@ -25,7 +25,7 @@ class DevtoolsTransactionRow extends Component {
     const stats = this.calculateStats();
 
     const {
-      domNode = '',
+      mount = '',
       aborted = false,
       promises = [],
     } = transaction;
@@ -68,7 +68,7 @@ class DevtoolsTransactionRow extends Component {
 
       <td class="ui center aligned">
         <div class="node">
-          &lt;${domNode}&gt;
+          &lt;${mount}&gt;
         </div>
       </td>
 

packages/diffhtml-devtools/lib/scripts/components/vtree.js

@@ -5,8 +5,8 @@ const { keys } = Object;
 const { stringify } = JSON;
 
 class DevtoolsVTree extends Component {
-  static propTypes = {
-    vTree: Object,
+  static defaultProps = {
+    vTree: {},
   }
 
   state = {

packages/diffhtml-devtools/lib/scripts/index.js

@@ -1,5 +1,6 @@
 import { outerHTML, html, use } from 'diffhtml';
 import inlineTransitions from 'diffhtml-middleware-inline-transitions';
+import syntheticEvents from 'diffhtml-middleware-synthetic-events';
 
 // Components
 import './components/panels';
@@ -22,7 +23,8 @@ const { stringify, parse } = JSON;
 const { assign } = Object;
 const background = chrome.runtime.connect({ name: 'devtools-page' });
 
-//use(inlineTransitions());
+use(inlineTransitions());
+use(syntheticEvents());
 
 use({
   // When dark mode is set, automatically add Semantic UI `inverted` class.
@@ -90,7 +92,8 @@ const fadeIn = el => {
     });
 };
 
-const render = () => outerHTML(main, html`<main id="main" data-theme=${state.theme}>
+const render = () => outerHTML(main, html`
+  <main id="main" data-theme=${state.theme}>
     <devtools-split-view onattached=${fadeIn}>
       ${Boolean(state.version) && html`
         <devtools-navigation
@@ -146,7 +149,8 @@ const render = () => outerHTML(main, html`<main id="main" data-theme=${state.the
         />
       </devtools-panels>
     </devtools-split-view>
-  </main>`).catch(ex => {
+  </main>
+`).catch(ex => {
   throw ex;
 });
 
@@ -159,8 +163,6 @@ background.onMessage.addListener(unparsedMessage => {
     case 'activated': {
       const clonedData = clone(message.data);
 
-      console.log(clonedData);
-
       assign(state, {
         ...clonedData,
         inProgress: clonedData.inProgress || state.inProgress,

packages/diffhtml-devtools/lib/scripts/injector.js

@@ -13,6 +13,7 @@ if (!window.__diffHTMLDevTools) {
   window.__diffHTMLDevTools = () => ({
     activate(args={}) {
       triggerEvent('activated', args);
+      this.activated = true;
       return this;
     },
 

packages/diffhtml-devtools/lib/scripts/panels/health.js

@@ -4,9 +4,9 @@ import { Component } from 'diffhtml-components';
 //import ChartistGraph from 'react-chartist';
 
 class DevtoolsHealthPanel extends Component {
-  static propTypes = {
-    activeRoute: String,
-    memory: Array,
+  static defaultProps = {
+    activeRoute: '',
+    memory: [],
   }
 
   state = {

packages/diffhtml-devtools/lib/scripts/panels/help.js

@@ -2,10 +2,10 @@ import diff, { html } from 'diffhtml';
 import { Component } from 'diffhtml-components';
 
 class DevtoolsHelpPanel extends Component {
-  static propTypes = {
-    theme: String,
-    activeRoute: String,
-    version: Number,
+  static defaultProps = {
+    theme: '',
+    activeRoute: '',
+    version: -1,
   }
 
   state = {

packages/diffhtml-devtools/lib/scripts/panels/middleware.js

@@ -2,9 +2,9 @@ import { html } from 'diffhtml';
 import { Component } from 'diffhtml-components';
 
 class DevtoolsMiddlewarePanel extends Component {
-  static propTypes = {
-    activeRoute: String,
-    middleware: Array,
+  static defaultProps = {
+    activeRoute: '',
+    middleware: [],
   }
 
   state = {

packages/diffhtml-devtools/lib/scripts/panels/mounts.js

@@ -2,10 +2,10 @@ import { html } from 'diffhtml';
 import { Component } from 'diffhtml-components';
 
 class DevtoolsMountsPanel extends Component {
-  static propTypes = {
-    mounts: Array,
-    inspect: Function,
-    activeRoute: String,
+  static defaultProps = {
+    mounts: [],
+    inspect: () => {},
+    activeRoute: '',
   }
 
   state = {
@@ -28,7 +28,7 @@ class DevtoolsMountsPanel extends Component {
       <style>${styles()}</style>
 
       <div class="ui tall segment">
-        <h3 onclick=${() => this.setState({ isExpanded: !isExpanded })}>
+        <h3 onClick=${() => this.setState({ isExpanded: !isExpanded })}>
           <i style="position: relative; top: -2px" class="icon chevron ${isExpanded ? 'up' : 'down'}"></i> Mounts
         </h3>
 

packages/diffhtml-devtools/lib/scripts/panels/transactions.js

@@ -2,11 +2,11 @@ import { html } from 'diffhtml';
 import { Component } from 'diffhtml-components';
 
 class DevtoolsTransactionsPanel extends Component {
-  static propTypes = {
-    inProgress: Array,
-    completed: Array,
-    inspect: Function,
-    activeRoute: String,
+  static defaultProps = {
+    inProgress: [],
+    completed: [],
+    inspect: () => {},
+    activeRoute: '',
   }
 
   state = {
@@ -20,15 +20,15 @@ class DevtoolsTransactionsPanel extends Component {
   }
 
   render() {
-    const { clearEntries, inProgress, completed } = this.props;
+    const { clearEntries } = this.props;
     const {
       isExpanded,
       autoScroll,
       hideEmpty,
       activeTransaction,
       sorted,
     } = this.state;
-    const { fragment, toggleAutoscroll, toggleHideEmpty } = this;
+    const { toggleAutoscroll, toggleHideEmpty } = this;
 
     return html`
       <link rel="stylesheet" href="/styles/theme.css">
@@ -286,7 +286,7 @@ class DevtoolsTransactionsPanel extends Component {
   }
 
   componentDidUpdate() {
-    const { isExpanded, expandedIndex, autoScroll } = this.state;
+    const { expandedIndex, autoScroll } = this.state;
 
     // TODO Have more intelligent locking for scrolling.
     if (expandedIndex === -1 && autoScroll) {

packages/diffhtml-devtools/package.json

@@ -2,6 +2,9 @@
   "name": "diffhtml-devtools",
   "private": true,
   "main": "module/devtools.es5.js",
+  "scripts": {
+    "build": "grunt"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -12,6 +15,7 @@
     "aliasify": "^2.1.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "babel-plugin-transform-diffhtml": "^1.0.0-beta.18",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^10.0.0",
@@ -55,6 +59,11 @@
     }
   },
   "dependencies": {
+    "diffhtml": "^1.0.0-beta.18",
+    "diffhtml-components": "^1.0.0-beta.18",
+    "diffhtml-middleware-inline-transitions": "^1.0.0-beta.18",
+    "diffhtml-middleware-synthetic-events": "^1.0.0-beta.18",
+    "diffhtml-react-compat": "^1.0.0-beta.18",
     "hyperlist": "^1.0.0",
     "semantic-ui-react": "^2.0.1"
   }