Remove transitions API (#284)

* Remove transitions API * Remove inline transitions API * Fix build * Remove transitions from devtools and README * Fix bundling
tbranyen · Nov 2, 2022 · 2e05c9d · 2e05c9d
1 parent 8c0db2e
commit 2e05c9d
Show file tree

Hide file tree

Showing 66 changed files with 1,451 additions and 15,086 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,6 @@ your ideas.
 
 - Parses real **HTML** and supports **JSX & Tagged Templates**.
 - Memory efficient VDOM rendering that utilizes **object pooling**.
-- **Transitions** for animations and hooking into DOM changes.
 - Powerful **middleware** extends diffHTML with additional features.
 - **React-like** Components which can be rendered as **Web Components**.
 - A **lite** build which has a smaller size, meant for optimizing production code.

diff --git a/packages/babel-preset-diffhtml-imports/index.js b/packages/babel-preset-diffhtml-imports/index.js
@@ -29,21 +29,6 @@ const exportObj = {};
 
 if (NODE_ENV === 'umd' || NODE_ENV === 'min') {
   exportObj.plugins = [
-    ObjectRestSpread,
-    ClassProperties,
-    ComputedProperties,
-    BlockScoping,
-    ArrowFunctions,
-    ShorthandProperties,
-    ObjectDestructuring,
-    Parameters,
-    Spread,
-    TemplateLiterals,
-    Classes,
-    ForOf,
-    OptionalChaining,
-    NewTarget,
-    OptionalCatchBinding,
   ];
   exportObj.minified = true;
 }

diff --git a/packages/diffhtml-components/index.html b/packages/diffhtml-components/index.html
diff --git a/packages/diffhtml-components/lib/component.js b/packages/diffhtml-components/lib/component.js
@@ -190,7 +190,7 @@ export default class Component {
         this.componentWillReceiveProps(this.props, this.state);
 
         if (this.shouldComponentUpdate(this.props, this.state)) {
-          this[$$render]()?.then(resolve);
+          resolve(this[$$render]());
         }
         else {
           resolve(null);
@@ -213,7 +213,7 @@ export default class Component {
 
         this.componentWillReceiveProps(this.props, this.state);
 
-        this[$$render]()?.then(resolve);
+        resolve(this[$$render]());
       })));
     }
 
@@ -236,7 +236,7 @@ export default class Component {
    * Stateful render. Used when a component changes and needs to re-render
    * itself. This is triggered on `setState` and `forceUpdate` calls.
    *
-   * @return {Promise<Transaction> | undefined}
+   * @return {Transaction | undefined}
    */
   [$$render]() {
     // This is a WebComponent, so do something different.
@@ -253,16 +253,15 @@ export default class Component {
         this[$$hooks].i = 0;
       }
 
-      /** @type {Promise<Transaction>} */
-      const promise = /** @type {any} */ (innerHTML(
+      const transaction = /** @type {Transaction} */(innerHTML(
         /** @type {any} */ (this).shadowRoot,
         this.render(this.props, this.state),
       ));
 
       ActiveRenderState.length = 0;
 
       this.componentDidUpdate(oldProps, oldState);
-      return promise;
+      return transaction;
     }
 
     // Get the fragment tree associated with this component. This is used to
@@ -354,21 +353,15 @@ export default class Component {
       return transaction;
     });
 
-    /**
-     * Compare the existing component node(s) to the new node(s).
-     *
-     * @type {Promise<Transaction>}
-     */
-    const promise = /** @type {any} */ (outerHTML(fragment, renderTree, { tasks }));
+    // Compare the existing component node(s) to the new node(s).
+    const transaction = /** @type {Transaction} */(outerHTML(fragment, renderTree, { tasks }));
 
-    return promise.then(transaction => {
-      // Empty the fragment after using.
-      fragment.childNodes.length = 0;
-      release(fragment);
+    // Empty the fragment after using.
+    fragment.childNodes.length = 0;
+    release(fragment);
 
-      this.componentDidUpdate(this.props, this.state);
-      return transaction;
-    });
+    this.componentDidUpdate(this.props, this.state);
+    return transaction;
   }
 
   connectedCallback() {

diff --git a/packages/diffhtml-components/test/integration/component.js b/packages/diffhtml-components/test/integration/component.js
@@ -10,8 +10,6 @@ const {
   html,
   release,
   Internals,
-  addTransitionState,
-  removeTransitionState,
 } = diff;
 
 const { process } = Internals;
@@ -27,9 +25,6 @@ describe('Component implementation', function() {
   });
 
   afterEach(() => {
-    ['attached', 'detached', 'replaced', 'textChanged', 'attributeChanged']
-      .forEach(transitionName => removeTransitionState(transitionName));
-
     release(this.fixture);
     Component.unsubscribeMiddleware();
     validateCaches();
@@ -478,10 +473,11 @@ describe('Component implementation', function() {
       strictEqual(refNode.getAttribute('ref'), null);
       strictEqual(this.fixture.nodeName, 'DIV');
 
+      console.log(html``);
       innerHTML(this.fixture, html``);
 
-      ok(!refNode);
       strictEqual(count, 2);
+      ok(!refNode);
     });
   });
 
@@ -1494,111 +1490,4 @@ describe('Component implementation', function() {
       );
     });
   });
-
-  describe('Transitions', () => {
-    it('will render a virtual tree with attached transition (no promise)', () => {
-      let attachedCalledWith = null;
-
-      addTransitionState('attached', el => {
-        attachedCalledWith = el;
-      });
-
-      class CustomComponent extends Component {
-        render() {
-          return html`
-            <div>Hello world</div>
-          `;
-        }
-      }
-
-      innerHTML(this.fixture, html`<${CustomComponent} />`);
-
-      strictEqual(
-        this.fixture.outerHTML.replace(whitespaceEx, ''),
-        '<div><div>Hello world</div></div>',
-      );
-
-      strictEqual(
-        attachedCalledWith,
-        this.fixture.childNodes[1],
-      );
-    });
-
-    it('will re-render a virtual tree with attached transition (no promise)', () => {
-      let attachedCalledWith = null;
-      let calledCount = 0;
-
-      addTransitionState('attached', el => {
-        calledCount += 1;
-        attachedCalledWith = el;
-      });
-
-      class CustomComponent {
-        render() {
-          return html`
-            <div>Hello world</div>
-          `;
-        }
-      }
-
-      innerHTML(this.fixture, html`<${CustomComponent} />`);
-      innerHTML(this.fixture, html`<${CustomComponent} />`);
-
-      strictEqual(
-        this.fixture.outerHTML.replace(whitespaceEx, ''),
-        '<div><div>Hello world</div></div>',
-      );
-
-      strictEqual(attachedCalledWith, this.fixture.childNodes[1]);
-      strictEqual(calledCount, 1);
-    });
-
-    it('will render a virtual tree with attached transition (with promise)', async () => {
-      addTransitionState('attached', el => {
-        return new Promise(resolve => {
-          el.textContent = 'Goodbye world';
-          resolve();
-        });
-      });
-
-      class CustomComponent {
-        render() {
-          return html`
-            <div>Hello world</div>
-          `;
-        }
-      }
-
-      await innerHTML(this.fixture, html`<${CustomComponent} />`);
-
-      strictEqual(
-        this.fixture.outerHTML.replace(whitespaceEx, ''),
-        '<div><div>Goodbye world</div></div>',
-      );
-    });
-
-    it('will re-render a virtual tree with attached transition (with promise)', async () => {
-      addTransitionState('attached', el => {
-        return new Promise(resolve => {
-          el.textContent = 'Goodbye world';
-          resolve();
-        });
-      });
-
-      class CustomComponent {
-        render() {
-          return html`
-            <div>Hello world</div>
-          `;
-        }
-      }
-
-      await innerHTML(this.fixture, html`<${CustomComponent} />`);
-
-      strictEqual(
-        this.fixture.outerHTML.replace(whitespaceEx, ''),
-        '<div><div>Goodbye world</div></div>',
-      );
-    });
-  });
 });
diff --git a/packages/diffhtml-components/test/util/validate-caches.js b/packages/diffhtml-components/test/util/validate-caches.js
@@ -26,7 +26,6 @@ const {
   StateCache,
   NodeCache,
   MiddlewareCache,
-  TransitionCache,
   CreateTreeHookCache,
   CreateNodeHookCache,
   SyncTreeHookCache,
@@ -55,9 +54,4 @@ function validateMemory() {
   strictEqual(CreateNodeHookCache.size, 0, 'The create node hook cache should be empty');
   strictEqual(SyncTreeHookCache.size, 0, 'The sync tree hook cache should be empty');
   strictEqual(ReleaseHookCache.size, 0, 'The release hook cache should be empty');
-
-  // Check all transition caches.
-  TransitionCache.forEach((cache, name) => {
-    strictEqual(cache.size, 0, `The ${name} transition cache should be empty`);
-  });
 }
diff --git a/packages/diffhtml-devtools/demo/index.html b/packages/diffhtml-devtools/demo/index.html
@@ -12,28 +12,17 @@
   <footer></footer>
 
   <script src="../node_modules/diffhtml/dist/diffhtml.js"></script>
-  <script src="../../diffhtml-middleware-inline-transitions/dist/inline-transitions.js"></script>
   <script src="../../diffhtml-middleware-logger/dist/logger.js"></script>
   <script>
     const { use, html, innerHTML, outerHTML } = diff;
 
-    // Current broken and not letting text update for some reason...
-    use(inlineTransitions());
     use(logger());
 
-    const animate = (el, ...args) => new Promise(resolve => el.animate(
-      ...args
-    ).onfinish = () => resolve());
-
-    const fade = el => animate(el, [{ opacity: 0 }, { opacity: 1 }], {
-      duration: 1000,
-    });
-
     const render = () => {
       innerHTML(document.querySelector('main'), html`
         <div id="test">
           <span>Current date: </span>
-          <span ontextchanged=${fade}>${new Date().toLocaleString()}</span>
+          <span>${new Date().toLocaleString()}</span>
 
           <p>
             <button onClick=${render}>Re-render</button>

diff --git a/packages/diffhtml-devtools/lib/scripts/bridge.js b/packages/diffhtml-devtools/lib/scripts/bridge.js
@@ -146,11 +146,7 @@ export default function devTools(Internals) {
           ...config,
           tasks: config.tasks.map(task => task.displayName || task.name),
         },
-        state: assign({}, state, state.nextTransaction && {
-          nextTransaction: undefined,
-        }, {
-          activeTransaction: undefined,
-        }),
+        state,
       });
     };
 
@@ -167,7 +163,6 @@ export default function devTools(Internals) {
       // TODO Make patches a separate asynchronous operation, and only
       // aggregate when completed.
       const patches = parse(stringify(transaction.patches));
-      const promises = transaction.promises.slice();
 
       transaction.onceEnded(() => {
         const endDate = performance.now();
@@ -179,13 +174,8 @@ export default function devTools(Internals) {
             ...config,
             tasks: config.tasks.map(task => task.displayName || task.name),
           },
-          state: assign({}, state, state.nextTransaction && {
-            nextTransaction: undefined,
-          }, {
-            activeTransaction: undefined,
-          }),
+          state,
           patches,
-          promises,
           completed,
           aborted,
         });

diff --git a/packages/diffhtml-devtools/lib/scripts/components/transaction-row.js b/packages/diffhtml-devtools/lib/scripts/components/transaction-row.js
@@ -27,7 +27,6 @@ class DevtoolsTransactionRow extends Component {
     const {
       mount = '',
       aborted = false,
-      promises = [],
     } = transaction;
 
     let unnecessaryRender = true;
@@ -72,10 +71,6 @@ class DevtoolsTransactionRow extends Component {
         </div>
       </td>
 
-      <td class="ui center aligned">
-        <strong><a>${String(promises.length)}</a></strong>
-      </td>
-
       <td class="ui center aligned ${getColorFromStat(stats.insert)}">
         <strong><a>${stats.insert}</a></strong>
       </td>

diff --git a/packages/diffhtml-devtools/lib/scripts/index.js b/packages/diffhtml-devtools/lib/scripts/index.js
@@ -1,5 +1,4 @@
 import { outerHTML, html, use } from 'diffhtml';
-import inlineTransitions from 'diffhtml-middleware-inline-transitions';
 import syntheticEvents from 'diffhtml-middleware-synthetic-events';
 
 // Components
@@ -23,7 +22,6 @@ const { stringify, parse } = JSON;
 const { assign } = Object;
 const background = chrome.runtime.connect({ name: 'devtools-page' });
 
-use(inlineTransitions());
 use(syntheticEvents());
 
 const cacheStyles = new Map();