From 614ab76abd1625b8fecf2f1365f1d114643ea308 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 4 May 2021 14:12:47 -0700 Subject: [PATCH 1/6] Add SSR support for fluid layout --- packages/optimizer/lib/transformers/ApplyLayout.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js index 31451c80f..3090be6e8 100644 --- a/packages/optimizer/lib/transformers/ApplyLayout.js +++ b/packages/optimizer/lib/transformers/ApplyLayout.js @@ -36,6 +36,7 @@ const SUPPORTED_LAYOUTS = [ 'container', 'fill', 'flex-item', + 'fluid', 'intrinsic', ]; @@ -79,6 +80,13 @@ function apply(layout, width, height, node) { case 'container': // Do nothing here. break; + case 'fluid': + if (width.isSet) { + styles = `width:${width.numeral}${width.unit};`; + } + styles += 'height:0;'; + addClass(node, 'i-amphtml-layout-awaiting-size'); + break; case 'flex-item': if (width.isSet) { styles = `width:${width.numeral}${width.unit};`; From 24e8a5e0b9e0544d173a86a4d27f91929cbb99dc Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 27 May 2021 14:22:26 -0700 Subject: [PATCH 2/6] Remove unnecessary `width` when applying `fluid` layout --- packages/optimizer/lib/transformers/ApplyLayout.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js index 3090be6e8..067fef5c1 100644 --- a/packages/optimizer/lib/transformers/ApplyLayout.js +++ b/packages/optimizer/lib/transformers/ApplyLayout.js @@ -81,9 +81,6 @@ function apply(layout, width, height, node) { // Do nothing here. break; case 'fluid': - if (width.isSet) { - styles = `width:${width.numeral}${width.unit};`; - } styles += 'height:0;'; addClass(node, 'i-amphtml-layout-awaiting-size'); break; From b237a0feac88fe13118960cae106eb2e0dc0d35a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 27 May 2021 14:51:51 -0700 Subject: [PATCH 3/6] Add `width` to applied fluid layout --- packages/optimizer/lib/transformers/ApplyLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js index 067fef5c1..ee7fc0d35 100644 --- a/packages/optimizer/lib/transformers/ApplyLayout.js +++ b/packages/optimizer/lib/transformers/ApplyLayout.js @@ -81,7 +81,7 @@ function apply(layout, width, height, node) { // Do nothing here. break; case 'fluid': - styles += 'height:0;'; + styles += 'width:100%;height:0px;'; addClass(node, 'i-amphtml-layout-awaiting-size'); break; case 'flex-item': From 200a1006057ae126df01e6c34f0644c177d7ab11 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Fri, 28 May 2021 11:31:07 -0700 Subject: [PATCH 4/6] Remove needless unit from zero fluid height --- packages/optimizer/lib/transformers/ApplyLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js index ee7fc0d35..96e35138f 100644 --- a/packages/optimizer/lib/transformers/ApplyLayout.js +++ b/packages/optimizer/lib/transformers/ApplyLayout.js @@ -81,7 +81,7 @@ function apply(layout, width, height, node) { // Do nothing here. break; case 'fluid': - styles += 'width:100%;height:0px;'; + styles += 'width:100%;height:0;'; addClass(node, 'i-amphtml-layout-awaiting-size'); break; case 'flex-item': From 65ebd3ce82c9d56e1b2aca0d301bb0f3b6e20e2d Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Fri, 4 Jun 2021 14:34:40 -0700 Subject: [PATCH 5/6] Add transforms_layout_fluid test --- .../transforms_layout_fluid/expected_output.html | 7 +++++++ .../ServerSideRendering/transforms_layout_fluid/input.html | 6 ++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/expected_output.html create mode 100644 packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/input.html diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/expected_output.html new file mode 100644 index 000000000..6c30364ce --- /dev/null +++ b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/expected_output.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/input.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/input.html new file mode 100644 index 000000000..af9b1448a --- /dev/null +++ b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_fluid/input.html @@ -0,0 +1,6 @@ + + + + + + From 501739b4e4e3bd54ab1fc8f7b7c42226e5963e50 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 6 Jun 2021 15:08:36 -0700 Subject: [PATCH 6/6] Remove needless string concatenation Co-authored-by: Alain Schlesser --- packages/optimizer/lib/transformers/ApplyLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js index 96e35138f..3b96bf31c 100644 --- a/packages/optimizer/lib/transformers/ApplyLayout.js +++ b/packages/optimizer/lib/transformers/ApplyLayout.js @@ -81,7 +81,7 @@ function apply(layout, width, height, node) { // Do nothing here. break; case 'fluid': - styles += 'width:100%;height:0;'; + styles = 'width:100%;height:0;'; addClass(node, 'i-amphtml-layout-awaiting-size'); break; case 'flex-item':