Migrating from v5.x to v6.x

We are changing the way UIComponents are initialized in HTML.

Whenever you used a UIComponent directly (not using an AngularJS Directive) the syntax was similar to this:

<button ts-button ts.specialThing="fourtytwo" class="ts-primary">Touch me</button>

The new syntax is like this:

<button data-ts="Button" data-ts.specialThing="fourtytwo" class="ts-primary">Touch me</button>

So here are the rules of what is happening:

ts-xxx becomes data-ts="Xxx"

ts-xxx-yyy becomes data-ts="XxxYyy"

ts.zzz="aaa" becomes data-ts.zzz="aaa"

ts.zzzWww="aaa" becomes data-ts.zzzWww="aaa"

HTML Classes

The following classes have also been renamed:

• ts-main-content becomes ts-maincontent
• ts-group becomes ts-fieldset

This is happening so that the class can always be predicted from the name of the component (data-ts="FieldSet" -> ts-fieldset, data-ts="MainContent" -> ts-maincontent)

Why are we doing this?

Short answer: React compatibility.

Long answer: When react parses the templates it only accepts totally valid (X)HTML, so our ts-xxx attributes were rejected. We tried looking into patching JSX so we can use our own tags but these accepted attributes are hardcoded in several different places in the React codebase, and we couldn't find a nice maintainable way of "fixing" it so we opted to change our markup.

This also means that now code using Tradeshift UI will be 100% valid (X)HTML which will probably help us down the road.

Tradeshift specific internal migration guide

AngularJS Directives

We decided not to change the existing AngularJS Directives we have in place for 2 reasons:

• Let's not change any more syntax than we have to
• It's clearly visible now which calls are using UIComponents directly and which are going through directives, which will help with debugging code.

Here is a list of all the components/features that are running through Directives:

• ts-component-factory
• ts-input-validator
• ts-file-on-change
• <aside />
• ts-company-card
• ts-sidebar
• ts-topbar
• ts-userimage
• ts-pager

Porting existing code

We are already working on a big search & replace operation in the whole Apps repo, you can find the PR here: https://github.com/Tradeshift/Apps/pull/3213

And the Apps-Server PR is here: https://github.com/Tradeshift/Apps-Server/pull/286

Once we're finished, tests are green and we like what we see, we'll deploy all of this to a sandbox and we'll need your help to test your apps manually. Stay tuned!

Thanks,

The Tradeshift UI Team