WIP: Breaking changes for 2022 #57

tripodsan · 2022-05-10T13:34:58Z

Breaking changes

and (non-breaking):

table layout hints: preserve author's layout choices as data attributes

Details

Picture Decoration

Sources

All <img> elements pointing to a media-bus image are converted to a <picture> element with various <source>s and a residual <img> source. The sources provide 2 types (webp and the orignal) via the fastly image optimization urls).

Example:

<picture>
  <source type="image/webp" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 400px)">
  <source type="image/webp" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&#x26;format=webply&#x26;optimize=medium">
  <source type="image/png" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=2000&#x26;format=png&#x26;optimize=medium" media="(min-width: 400px)">
  <img loading="eager" alt="" type="image/png" src="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&#x26;format=png&#x26;optimize=medium" width="1600" height="1130">
  </picture>
<picture>

Remove Styling

All <img> (and <picture>) elements that are directly wrapped by an  or  element and unwrapped. Most likely, there was a formatting mistake happen in authoring and the image contained such a style. Although this should be removed during the docx2md transformation, it could have some left-over content from older content.

Example:

<em>
  <picture>....</picture>
</em>

is now:

<picture>....</picture>

Intrinsic image dimensions

If contained in the media link, the intrinsic image dimensions, are added as width and height attribute to the image source. This helps the browser to compute the aspect ratio.

Example

<picture>
  ...
  <img loading="eager" alt="" type="image/png" src="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&#x26;format=png&#x26;optimize=medium" width="1600" height="1130">
</picture>

Relative Links

All links (<a href="">) and image sources (<img src="">) are subject to link rewriting:

If the URLs address the same site, there are made relative
If they are media links they are made local to the current page.

the same site is either the same *.hlx.page or *.hlx.live domain, or the cdn.prod.domain configured in .helix/config.json.

Example

original	rewritten
`https://main--helix-website--adobe.hlx.page/blog/article`	`/blog/article`
`https://main--helix-website--adobe.hlx3.page/blog/article`	`/blog/article`
`https://main--helix-website--adobe.hlx.live/blog/article`	`/blog/article`
`https://www.hlx.live/blog/article`	`/blog/article`
`https://main--helix-website--adobe.hlx.live/media_1234.png`	`./media_1234.png`

Pretty print HTML output

Instead of output the entire HTML in 1 line, it's not nicely formatted.

Example

  <body>
    <header></header>
    <main>
      <div>
        <div class="columns bleed">
          <div>
            <div>
              <h1 id="these-arent-the-droids-youre-looking-for-">These aren’t the droids you’re looking for ⸺</h1>
            </div>
            ....

Note: this changes the amount of inter-element whitespace, which might cause problems with textContent. You probably need to trim the textContent you receive.

This has a serious impact on DOM node traversing functions which now contains text nodes. You probably need to review their usages and replace those with the corresponding element traversing functions: the list of nodes can now contain text nodes, especially line breaks!

Node	Element	Comment
`firstChild`	`firstElementChild`	The first child might be a text node (like a line break)
`lastChild`	`lastElementChild`	The last child might be a text node (like a line break)
`previousSibling`	`previousElementSibling`	The previous node might be a text node (like a line break)
`nextSibling`	`nextElementSibling`	The next node might be a text node (like a line break)
`childNodes`	`children`	The list of children can contain text nodes. `children` list only the HTMLElements. Note that it does not have a `forEach` method (use can use `[...node.children]`
`haschildnodes()`	`childElementCount`	Text nodes count has child nodes

Clean up empty paragraphs

The previous pipeline version had some stray empty  injected in the html, most often before images. those are now cleaned up and became proper paragraphs.

Example:

<p></p>
<picture>...</picture>
<p></p>

is now:

<p>
  <picture>...</picture>
</p>

Icon Handling

Icons specified with the :name: or :#name syntax are not longer converted to <img> or <svg> elements, but always to  elements. They should be decorated accordingly on the client side.

<img class="icon icon-search">

is now:

<span class="icon icon-search"></span>

Block CSS Class Names

The CSS class names for blocks is now computed differently:

only the 1st table cell is used to compute the class names
the value is split into a primary and optionals. the optionals are specified by a coma separated list in braces ( ... )
each of the names are lowercased, all consecutive non letters or digits are replaced by a -.
trailing and leading - are removed.

Example

value	v6 classes	v7 classes
`foo`	`foo`	`foo`
`foo bar`	`foo-bar`	`foo-bar`
`!Joe\'s Pizza!'`	`-joe--s-pizza--`	`joe-s-pizza`
`'!Joe\'s Pizza! (small)`	`--joe--s-pizza---small-`	`joe-s-pizza` `small`
`Sparkling (5dl glass)`	`sparkling--5dl-glass-`	`sparkling` `5dl-glass`
`Country Fries (small, sweat&sour )`	`country-fries--small--sweat-sour--`	`country-fries` `small` `sweat-sour`

Table-Cell layout hints

Table cells that are formatted by the author, now contain those formats as data attributes where applicable. currently the align and vAlign attributes are conveyed.

example:

    <div>
        <div class="pricing">
            <div>
                <div data-align="center">Sheet</div>
                <div data-valign="bottom">pricing-sheet</div>
            </div>
        </div>
    </div>

BREAKING CHANGE: inter-element whitespace changes

codecov · 2022-05-10T13:35:48Z

Codecov Report

Merging #57 (9d2db72) into main (b2af7bf) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main       #57   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           44        44           
  Lines         3012      3079   +67     
=========================================
+ Hits          3012      3079   +67

Impacted Files	Coverage Δ
src/utils/mdast-to-hast.js	`100.00% <ø> (ø)`
src/html-pipe.js	`100.00% <100.00%> (ø)`
src/steps/create-page-blocks.js	`100.00% <100.00%> (ø)`
src/steps/create-pictures.js	`100.00% <100.00%> (ø)`
src/steps/get-metadata.js	`100.00% <100.00%> (ø)`
src/steps/rewrite-icons.js	`100.00% <100.00%> (ø)`
src/steps/rewrite-urls.js	`100.00% <100.00%> (ø)`
src/steps/stringify-response.js	`100.00% <100.00%> (ø)`
src/steps/utils.js	`100.00% <100.00%> (ø)`
src/utils/heading-handler.js	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 68a8cb9...9d2db72. Read the comment docs.

BREAKING CHANGE: empty tags now properly sourround the following element, eg pictures

github-actions · 2022-05-10T13:47:08Z

This PR will trigger a major release when merged.

BREAKING CHANGE: all links to media and same hlx sites are relativized

BREAKING CHANGE: picture dom changed

BREAKING CHANGE: dom changes

BREAKING CHANGE: the format of the css class names changed

BREAKING CHANGE: :icons: are now replaced with elements

github-actions · 2022-05-25T10:34:35Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix: pretty-print html

529facf

BREAKING CHANGE: inter-element whitespace changes

tripodsan added the breaking label May 10, 2022

fix: clean up empty paragraphs

30547b7

BREAKING CHANGE: empty tags now properly sourround the following element, eg pictures

tripodsan added 7 commits May 11, 2022 16:11

fix: add link rewriting

bde5fb6

BREAKING CHANGE: all links to media and same hlx sites are relativized

fix: create <picture> tags

88c1ab9

BREAKING CHANGE: picture dom changed

chore: fix ci

192cb75

fix: preserve table-cell align attributes as data-attribures

c5a5c1a

fix: unwrap img inside em/strong

dbc6a82

BREAKING CHANGE: dom changes

fix: improve block css class names

ff05d3c

BREAKING CHANGE: the format of the css class names changed

fix: replace icon svgs with spans

55aeeeb

BREAKING CHANGE: :icons: are now replaced with elements

tripodsan force-pushed the breaking-2022 branch from 03ce6cb to 55aeeeb Compare May 13, 2022 13:56

tripodsan added 2 commits May 14, 2022 10:45

fix: detect and fix wrong dimensions fragment

e0df3dc

Merge branch 'main' into breaking-2022

9d2db72

tripodsan merged commit f2d1523 into main May 25, 2022

tripodsan deleted the breaking-2022 branch May 25, 2022 10:33

github-actions bot added the released label May 25, 2022

mreutegg mentioned this pull request Nov 30, 2022

feat: v7 upgrade adobe/blog#213

Merged

10 tasks

rhudea mentioned this pull request Nov 30, 2022

feat: v7 upgrade alexander-forbes/aem-blogs#14

Merged

This was referenced Nov 30, 2022

feat: v7 upgrade adobe/business-website#235

Merged

feat: v7 upgrade jckautzmann/business-website#1

Open

This was referenced Dec 7, 2022

Migrate to v7 maxakuru/franklin-figma#1

Closed

Migrate to v7 hlxsites/venia-jam#3

Closed

feat: v7 upgrade (#235) adobe/business-website#238

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Breaking changes for 2022 #57

WIP: Breaking changes for 2022 #57

tripodsan commented May 10, 2022 •

edited by kptdobe

Loading

codecov bot commented May 10, 2022 •

edited

Loading

github-actions bot commented May 10, 2022

github-actions bot commented May 25, 2022

WIP: Breaking changes for 2022 #57

WIP: Breaking changes for 2022 #57

Conversation

tripodsan commented May 10, 2022 • edited by kptdobe Loading

Breaking changes

and (non-breaking):

Details

Picture Decoration

Sources

Example:

Remove Styling

Example:

Intrinsic image dimensions

Example

Relative Links

Example

Pretty print HTML output

Example

Clean up empty paragraphs

Example:

Icon Handling

Block CSS Class Names

Example

Table-Cell layout hints

codecov bot commented May 10, 2022 • edited Loading

Codecov Report

github-actions bot commented May 10, 2022

github-actions bot commented May 25, 2022

tripodsan commented May 10, 2022 •

edited by kptdobe

Loading

codecov bot commented May 10, 2022 •

edited

Loading