fix(runtime): prevent ref callbacks from being called too early

[alicewriteswrongs]

Sort attribute names before calling setAccessor with their changed values in order to ensure that the ref attribute is handled by setAccessor after all other attributes have been handled. This prevents the execution order for ref callbacks from being dependency on the order in which attributes are declared in the JSX.

STENCIL-737
fixes #4074

What is the current behavior?

At present ref callbacks are, like other attributes, handled in declaration-order, i.e. they are called based on the order in which they are declared in the JSX for a component.

This means that in a component like this:

import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'ref-attr-order',
  shadow: true,
})
export class RefAttrOrder {
  render() {
    return (
      <div
        ref={(el) => {
          console.log(el.tabIndex);
        }}
        tabIndex={0}
      >
        my tabIndex: {this.index}
      </div>
    );
  }
}

The tabIndex attribute won't be set on the element when the ref is called. This leads to unexpected behavior when trying to get a reference to an element. There is a workaround, namely ensuring that the ref is the last attribute declared in the JSX, but we can do better by sorting the attributes when we're updating them to ensure that we handle ref after the others.

Documentation

Does this introduce a breaking change?

• Yes
• No

Not in my view, rather this fixes a bug (#4074).

Testing

I added a webdriverio regression test and confirmed that the test fails without the fix. I also built and then installed this in Framework, where it didn't cause any test failures.

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1138 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	21
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	17
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/connected-callback.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12
src/compiler/transformers/test/parse-vdom.spec.ts	12
src/compiler/transformers/transform-utils.ts	12
src/compiler/transpile/transpile-module.ts	12
src/mock-doc/test/attribute.spec.ts	12

Our most common errors

Typescript Error Code	Count
TS2322	361
TS2345	345
TS18048	204
TS18047	82
TS2722	37
TS2532	24
TS2531	21
TS2454	14
TS2790	11
TS2352	9
TS2769	8
TS2538	8
TS2416	7
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	61	satisfies
src/compiler/types/validate-primary-package-output-target.ts	61	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

[github-actions]

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/8523406637/artifacts/1377591531

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.14.0-dev.1712063561.474ef38.tgz.zip && npm install ~/Downloads/stencil-core-4.14.0-dev.1712063561.474ef38.tgz

[christian-bromann]

One comment but overall LGTM 👍

[tanner-reits]

LGTM