Convert blocking-elements to TypeScript #16

aomarks · 2019-07-25T19:35:28Z

Convert to TypeScript. NOTE: I strongly recommend reading the "Convert to TypeScript" commit (cd01c88) separately from the rest.
[BREAKING] Remove WebComponents V0 support
[BREAKING] /dist/blocking-elements.js is now ES2017 instead of ES5 (i.e. it now has classes). /dist/blocking-elements.min.js is still ES5. /blocking-elements.js doesn't exist anymore.
[BREAKING] Remove HTML import file.
Clang-format, and replace eslint with tslint.
dist/ files are no longer checked in, instead we ensure npm run build is run in prepack.
Add full text LICENSE file.

- /dist/blocking-elements.js is now ES2015 (previously ES5), and is still non-minified. - /dist/blocking-elements.min.js continues to be minified ES5. - /blocking-elements.js is removed.

valdrinkoshi

Great update! Nits/questions around the IntertableHTMLElement interface, the current version forces runtime checks that we could probably avoid.

valdrinkoshi · 2019-07-25T21:11:50Z

blocking-elements.ts

+  destructor() {
+    // Restore original inertness.
+    this[_restoreInertedSiblings](this[_topElParents]);
+    const nullable = this as unknown as {


these properties can be updated to accept null, and you wouldn't need this cast here, e.g.

private[_blockingElements]: IntertableHTMLElement[]|null = [];

But I guess you did it here because otherwise you'd need to add checks everywhere for them being defined, right? If so, mind adding a comment here?

Yep, exactly. Done.

valdrinkoshi · 2019-07-25T21:15:02Z

blocking-elements.ts

+  /**
+   * Adds the element to the blocking elements.
+   */
+  push(element: HTMLElement): HTMLElement|undefined {


fix the return type to void

valdrinkoshi · 2019-07-25T21:34:24Z

blocking-elements.ts

+    // if it's inertable and if already inert.
+    if (this[_isInertable](oldInert) && !oldInert.inert) {
+      oldInert.inert = true;
+      if (siblingsToRestore) {


This check here and in L214 is new, and will show in the runtime too.
This condition should never happen (siblingsToRestore undefined), because we call this method on elements that passed through _inertSiblings method which sets this variable on the element.
I think we should update all IntertableHTMLElement properties to be non-optional, and remove these checks here

Done. I minimized the amount of casting we need by splitting into HasInternalState and a MaybeHasInternalState, and only casting for _topElParents, which was the only place we needed it.

valdrinkoshi · 2019-07-25T21:38:31Z

blocking-elements.ts

+  private[_restoreInertedSiblings](elements: IntertableHTMLElement[]) {
+    elements.forEach((el) => {
+      const mo = el[_parentMO];
+      if (mo !== undefined) {


same as above, these checks will show at runtime. We should probably change IntertableHTMLElement properties to be non-optional, and remove these checks here

Fixed, see other comment.

valdrinkoshi · 2019-07-25T21:40:32Z

blocking-elements.ts

+    for (const element of elements) {
+      const children =
+          element.parentNode !== null ? element.parentNode.children : [];
+      const inertedSiblings = new Set<HTMLElement>();


type should be <IntertableHTMLElement>

Fixed, see other comment.

valdrinkoshi · 2019-07-25T21:43:29Z

blocking-elements.ts

+      element[_parentMO] =
+          new MutationObserver(this[_handleMutations].bind(this));
+      const mo = element[_parentMO];
+      if (element.parentNode !== null && mo !== undefined) {


avoid these checks:

const mo = new MutationObserver(this[_handleMutations].bind(this)); element[_parentMO] = mo; mo.observe(element.parentNode!, {

valdrinkoshi · 2019-07-25T21:51:25Z

blocking-elements.ts

+          this.pop();
+          return;
+        }
+        if (inertedSiblings && inertedSiblings.has(sibling)) {


check for inertedSiblings not needed if we make _siblingsToRestore non-optional

Fixed, see other comment.

valdrinkoshi · 2019-07-25T21:51:34Z

blocking-elements.ts

+          toKeepInert.add(sibling);
+        } else {
+          sibling.inert = true;
+          if (inertedSiblings) {


check not needed if we make _siblingsToRestore non-optional

Fixed, see other comment.

valdrinkoshi · 2019-07-25T22:04:09Z

.gitignore

 node_modules
-bower_components


valdrinkoshi · 2019-07-25T22:05:17Z

package.json

@@ -2,26 +2,28 @@
  "name": "blocking-elements",
  "version": "0.0.2",
  "description": "A polyfill for the proposed blocking elments stack API",
-  "main": "dist/blocking-elements.js",
+  "main": "blocking-elements.js",


should this be .ts?

Oops, this shouldn't actually have changed.

valdrinkoshi · 2019-07-25T22:11:51Z

rollem.config.js

-  ],
-}, {
-  entry: 'blocking-elements.js',
+  entry: 'dist/blocking-elements.js',


The generated js does not have an IIFEE

Fixed.

As discussed in chat, /dist/blocking-elements.js is now an ES module that exports a singleton instead of setting the document.$blockingElements global. The .min.js file does still set the global, and continues to be IIFE-guarded ES5 minified. Included usage instructions in the README.

Uhm, I'm wondering if we should rather create a new dist/blocking-elements-module.js for the ES module case. The README.md is centered around the document.$blockingElements API, so probably dist/blocking-elements.js and dist/blocking-elements.min.js should differ only on minification (both should be IFEEd and set the document.$blockingElements global).

Agreed, it is a little weird. Both files now set document.$blockingElement.

valdrinkoshi · 2019-07-25T22:13:46Z

blocking-elements.ts

@@ -0,0 +1,407 @@
+/**
+ * @license


license currently not included in the dist/* files

Fixed. For some reason the rollup license-preserving text wasn't working. I upgraded to the latest rollup and babel, removed rollem (not needed anymore), and also tweaked the script to only emit each unique license once (since there are now two input files).

aomarks · 2019-07-26T21:06:56Z

PTAL! Note I moved the source files (of which there are now two) into src/, sorry for the churn.

valdrinkoshi · 2019-07-26T21:38:23Z

test/shadow.js

@@ -25,65 +25,6 @@
    }
  }

-  describe('ShadowDom v0', function() {


valdrinkoshi · 2019-07-26T21:44:19Z

package.json

-    "build": "rollem"
+    "format": "clang-format --style=file -i src/*.ts",
+    "prepack": "npm run build",
+    "build": "rm dist/* -f && tsc && rollup -c && rm dist/document-global.*"


typo: should be rm -rf dist/ && ... here

Actually I wanted to rm dist/* instead of rm dist on on purpose because in the past I've been bitten by tools that are watching the directory's inode getting confused by the directory going away. Rewrote a little though.

valdrinkoshi · 2019-07-26T22:02:30Z

rollem.config.js

-  ],
-}, {
-  entry: 'blocking-elements.js',
+  entry: 'dist/blocking-elements.js',


Uhm, I'm wondering if we should rather create a new dist/blocking-elements-module.js for the ES module case. The README.md is centered around the document.$blockingElements API, so probably dist/blocking-elements.js and dist/blocking-elements.min.js should differ only on minification (both should be IFEEd and set the document.$blockingElements global).

valdrinkoshi · 2019-07-26T22:06:49Z

src/blocking-elements.ts

+  inert?: boolean;
+}
+
+interface InternalState {


Throwing this here: the BlockingElements class could as well keep track of all this via couple WeakMaps, but that would be quite some refactoring (which probably does belong to a separate PR)

valdrinkoshi · 2019-07-26T22:11:15Z

src/blocking-elements.ts

+    // Top changed only if the removed element was the top element.
+    if (i === this[_blockingElements].length) {
+      const top = this.top;
+      if (top !== null) {


this check is not needed, _topChanged allows for top === null:

this[_topChanged](this.top);

valdrinkoshi · 2019-07-26T22:15:14Z

src/blocking-elements.ts

+      mo.disconnect();
+      (element as MaybeHasInternalState)[_parentMO] = undefined;
+      const siblings = element[_siblingsToRestore];
+      if (siblings !== undefined) {


can remove this check

A ShadyDOM root acts like a real ShadowRoot, but isn't actually in the real DOM tree, so it's not observable. Observe its host instead, which is the real DOM parent of the shady children.

Seems like kind of Sauce or easy-sauce issue? Also test latest Edge instead of 14.

aomarks · 2019-07-27T20:42:37Z

PTAL!

This includes a fix for an exception that was being thrown in the tests when ShadyDOM was enabled. I'm not 100% sure about it, but it does make the tests pass.

In investigating that issue, I also found a case that crashes with native shadow roots, described at #18. I included a test case for it in this PR (currently marked as .skip).

Also, I have not been able to get Safari to report success from Sauce, even though from the Sauce videos, Safari is passing 100% of tests. I assume this is some issue with Safari/sauce/easy-sauce. For now I have removed Safari and filed #17 to investigate later. I also bumped the version of Edge we're testing from 14 to "latest".

valdrinkoshi

This LGTM 👍 Nice find about #18, thanks for filing it and adding a test. There are some typos in the test itself, anyways I think #19 should fix both the issue and enable the test.

aomarks added 11 commits July 25, 2019 12:17

Fix some package.json metadata

11115c2

Clang format JS file

3e42be8

Add TypeScript build config

46893da

Convert to TypeScript

cd01c88

Simplify/modernize script building.

d505b45

- /dist/blocking-elements.js is now ES2015 (previously ES5), and is still non-minified. - /dist/blocking-elements.min.js continues to be minified ES5. - /blocking-elements.js is removed.

Export a DocumentWithBlockingElements interface

5579b32

Remove HTML import

5d96ca0

Configure the right files to NPM publish

24c312d

Add full text of license

9d9f0bd

Add tslint and fix errors

2ad119c

Don't check in built files.

77b6c55

aomarks requested a review from valdrinkoshi July 25, 2019 19:35

valdrinkoshi reviewed Jul 25, 2019

View reviewed changes

aomarks added 8 commits July 26, 2019 10:06

Upgrade to latest rollup and babel

68fa4a1

Fix package.json main

31ed2b2

/dist/blocking-elements.js is now an ES module that exports a singleton

df475fe

Move source files to src/

43685b0

Remove unnecessary mo defined check

6743779

Fix intertable interface typo

5e1a3f9

Remove runtime checks with a new type and some casts.

c419da5

Update README to explain new ES module usage

7f69db1

aomarks added 3 commits July 26, 2019 14:09

Don't error on build if dist/ doesn't exist

0727138

Use latest Travis Linux and Node

7cdf758

Upgrade test deps, test the minified version, and remove CEV0 tests

3cb4c98

aomarks force-pushed the typescript branch from e5983ae to 3cb4c98 Compare July 26, 2019 21:18

valdrinkoshi reviewed Jul 26, 2019

View reviewed changes

aomarks added 4 commits July 26, 2019 15:56

Undo change where blocking-elements.js exports a singleton.

54aa756

Remove more unnecessary checks

ca9ded8

rm -rf dist/*

38af7c0

Fix addedNodes->removedNodes typo

b758f0d

aomarks force-pushed the typescript branch from 8fba0aa to 83080d2 Compare July 27, 2019 04:07

aomarks added 2 commits July 26, 2019 21:07

Add special handling for ShadyDOM roots.

0e54e06

A ShadyDOM root acts like a real ShadowRoot, but isn't actually in the real DOM tree, so it's not observable. Observe its host instead, which is the real DOM parent of the shady children.

Document the two files in the README

b75984d

aomarks force-pushed the typescript branch from 83080d2 to b75984d Compare July 27, 2019 04:08

aomarks added 4 commits July 27, 2019 12:27

Test with ES5 transpiled .min js

02f12a7

Bump sauce timeout

540cbdb

Drop Safari for now. Video shows it is passing, but test never finishes.

2f9bf50

Seems like kind of Sauce or easy-sauce issue? Also test latest Edge instead of 14.

Add failing test for shadow root mutation case

69f9293

valdrinkoshi approved these changes Jul 29, 2019

View reviewed changes

aomarks merged commit 54e853d into master Jul 29, 2019

aomarks deleted the typescript branch July 29, 2019 18:20

		node_modules
		bower_components

Convert blocking-elements to TypeScript #16

Convert blocking-elements to TypeScript #16

Conversation

aomarks commented Jul 25, 2019 • edited Loading

valdrinkoshi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aomarks commented Jul 26, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aomarks commented Jul 27, 2019

valdrinkoshi left a comment

Choose a reason for hiding this comment

aomarks commented Jul 25, 2019 •

edited

Loading