From 719e8f5cd16a3963233ba995bbcee657c53e916b Mon Sep 17 00:00:00 2001 From: Caroline Liu Date: Tue, 24 Aug 2021 10:44:34 -0400 Subject: [PATCH 1/2] Apply sizer slot in `buildInternal` --- src/custom-element.js | 2 ++ test/unit/test-custom-element-v1.js | 10 ++++++++++ test/unit/test-custom-element.js | 2 ++ 3 files changed, 14 insertions(+) diff --git a/src/custom-element.js b/src/custom-element.js index 42dbd0a8d4f3..c9d9d98e8403 100644 --- a/src/custom-element.js +++ b/src/custom-element.js @@ -494,6 +494,7 @@ function createBaseCustomElementClass(win, elementConnectedCallback) { // Create the instance. const implPromise = this.createImpl_(); + this.getSizer_(); // Wait for consent. const consentPromise = implPromise.then(() => { @@ -962,6 +963,7 @@ function createBaseCustomElementClass(win, elementConnectedCallback) { ) { // Expect sizer to exist, just not yet discovered. this.sizerElement = this.querySelector('i-amphtml-sizer'); + this.sizerElement?.setAttribute('slot', 'i-amphtml-svc'); } return this.sizerElement || null; } diff --git a/test/unit/test-custom-element-v1.js b/test/unit/test-custom-element-v1.js index 18b8349ce796..d16658d89206 100644 --- a/test/unit/test-custom-element-v1.js +++ b/test/unit/test-custom-element-v1.js @@ -246,6 +246,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { ); const element = new ElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); doc.body.appendChild(element); const promise = element.buildInternal(); @@ -259,6 +260,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { expect(element).to.not.have.class('i-amphtml-built'); expect(element.signals().get(CommonSignals.BUILT)).to.be.null; expect(attachedCallbackStub).to.not.be.called; + expect(getSizerStub).to.be.calledOnce; await promise; expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement); @@ -280,6 +282,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { ); const element = new ElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); doc.body.appendChild(element); const promise = element.mountInternal(); @@ -293,6 +296,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { expect(element).to.not.have.class('i-amphtml-built'); expect(element.signals().get(CommonSignals.BUILT)).to.be.null; expect(attachedCallbackStub).to.not.be.called; + expect(getSizerStub).to.be.calledOnce; await promise; expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement); @@ -314,6 +318,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { ); const element = new StubElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); doc.body.appendChild(element); element.upgrade(TestElement); @@ -324,6 +329,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { expect(element.isBuilt()).to.be.false; expect(element.readyState).to.equal('building'); expect(attachedCallbackStub).to.not.be.called; + expect(getSizerStub).to.be.calledOnce; await promise; expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement); @@ -345,6 +351,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { ); const element = new StubElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); doc.body.appendChild(element); element.upgrade(TestElement); @@ -355,6 +362,7 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { expect(element.isBuilt()).to.be.false; expect(element.readyState).to.equal('building'); expect(attachedCallbackStub).to.not.be.called; + expect(getSizerStub).to.be.calledOnce; await promise; expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement); @@ -373,11 +381,13 @@ describes.realWin('CustomElement V1', {amp: true}, (env) => { env.sandbox.stub(TestElement, 'usesLoading').returns(true); const element = new ElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); doc.body.appendChild(element); await element.mountInternal(); expect(buildCallbackStub).to.be.calledOnce; expect(element.readyState).to.equal('loading'); + expect(getSizerStub).to.be.calledOnce; }); it('should continue in a state if modified by buildCallback', async () => { diff --git a/test/unit/test-custom-element.js b/test/unit/test-custom-element.js index 6954dd6972ae..d37b226f2888 100644 --- a/test/unit/test-custom-element.js +++ b/test/unit/test-custom-element.js @@ -573,6 +573,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => { it('Element - build allowed', () => { const element = new ElementClass(); + const getSizerStub = env.sandbox.stub(element, 'getSizer_'); expect(element.isBuilt()).to.equal(false); expect(testElementBuildCallback).to.have.not.been.called; @@ -585,6 +586,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => { expect(element).to.not.have.class('i-amphtml-notbuilt'); expect(element).to.not.have.class('amp-notbuilt'); expect(element).to.have.class('i-amphtml-built'); + expect(getSizerStub).to.be.calledOnce; expect(testElementBuildCallback).to.be.calledOnce; expect(element.signals().get(CommonSignals.BUILT)).to.be.ok; return element.whenBuilt(); // Should eventually resolve. From 2e7053da39166ffdd2720b51e9a607ea6a038a43 Mon Sep 17 00:00:00 2001 From: Caroline Liu Date: Thu, 26 Aug 2021 10:32:35 -0400 Subject: [PATCH 2/2] Use optional chain in `applyStaticLayout` --- src/static-layout.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/static-layout.js b/src/static-layout.js index 400339d699ce..8709d358f165 100644 --- a/src/static-layout.js +++ b/src/static-layout.js @@ -144,9 +144,7 @@ export function applyStaticLayout(element, fixIeIntrinsic = false) { // Find sizer, but assume that it might not have been parsed yet. element.sizerElement = element.querySelector('i-amphtml-sizer') || undefined; - if (element.sizerElement) { - element.sizerElement.setAttribute('slot', 'i-amphtml-svc'); - } + element.sizerElement?.setAttribute('slot', 'i-amphtml-svc'); } else if (layout == Layout.NODISPLAY) { toggle(element, false); // TODO(jridgewell): Temporary hack while SSR still adds an inline