Merge pull request #1466 from hypothesis/preact-wrapper-fixes

Convert excerpt (1/n) - Fix several issues with Angular <-> Preact wrapper

package.json

@@ -88,7 +88,7 @@
     "npm-packlist": "^1.1.12",
     "postcss": "^7.0.13",
     "postcss-url": "^8.0.0",
-    "preact": "10.0.1",
+    "preact": "^10.0.4",
     "prettier": "1.18.2",
     "puppeteer": "^2.0.0",
     "query-string": "^3.0.1",

src/sidebar/util/test/wrap-react-component-test.js

@@ -203,6 +203,14 @@ describe('wrapReactComponent', () => {
     assert.calledWith(onDblClick, 1);
   });
 
+  it('supports invoking callback properties if a digest cycle is already in progress', () => {
+    const { element, onDblClick } = renderButton();
+    element.scope.$apply(() => {
+      lastOnDblClickCallback({ count: 1 });
+    });
+    assert.calledWith(onDblClick, 1);
+  });
+
   it('triggers a digest cycle when invoking callback properties', () => {
     // Create an Angular component which passes an `on-{event}` callback down
     // to a child React component.

src/sidebar/util/wrap-react-component.js

@@ -45,26 +45,28 @@ class ReactController {
               `Was passed "${arg}"`
           );
         }
+
+        // Test whether a digest cycle is already in progress using `$$phase`,
+        // in which case there is no need to trigger one with `$apply`.
+        //
+        // Most of the time there will be no digest cycle in progress, but this
+        // can happen if a change made by Angular code indirectly causes a
+        // component to call a function prop.
+        if ($scope.$root.$$phase) {
+          this[propName](arg);
+        } else {
           $scope.$apply(() => {
             this[propName](arg);
           });
-      };
-    });
-  }
-
-  $onInit() {
-    // Copy properties supplied by the parent Angular component to React props.
-    Object.keys(this.type.propTypes).forEach(propName => {
-      if (!useExpressionBinding(propName)) {
-        this.props[propName] = this[propName];
         }
+      };
     });
-    this.updateReactComponent();
   }
 
   $onChanges(changes) {
     // Copy updated property values from parent Angular component to React
-    // props.
+    // props. This callback is run when the component is initially created as
+    // well as subsequent updates.
     Object.keys(changes).forEach(propName => {
       if (!useExpressionBinding(propName)) {
         this.props[propName] = changes[propName].currentValue;

yarn.lock

@@ -6704,10 +6704,10 @@ preact-render-to-string@^4.1.0:
   dependencies:
     pretty-format "^3.8.0"
 
-preact@10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.0.1.tgz#16451887a8490dd534d60d1bc7d2ff4a70f7e0ee"
-  integrity sha512-lq7jo1rwwCd1YkiBcuOxRc3I0y1FZACa6O7tgNXt47QZJtSlLEE53f/FDNsLtiB2IVQTHbaey20TjSPmejhDyQ==
+preact@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.0.4.tgz#7c1a2e074ea64a2d3c83349f7f55304ed0e017a7"
+  integrity sha512-x9QW91LVQZ4lkMZ8gOucyaW1414MEtgSC//JwlxR0nfq/QEdbaLQZrWFFWgjtGyNBBXg2P0TZ6u6W+XlpjcK2Q==
 
 prelude-ls@~1.1.2:
   version "1.1.2"