EFL DOM like markup syntax looks to works as
some text <key1=val1 key2=val2 keyN=valN>styled text</key1>
Where key1, key2, keyN or any other key can be any of the EFL text style property as defined in the evas_textblock_style documentation
Ex:
some text <font_size="12" font_weight="bold" color="#5F6B">styled text</font_size>
It is not a valid DOM syntax as here, the tag name receives a value
To get the best DOM representation in the debugger, we will generate a very similar syntax which will look like:
some text <key1 key1="val1" key2="val2" keyN="valN">styled text</key1>We then duplicates the tag name as an inner attribute that receives the value expected by the first style property.
Ex:
some text <Font_size font_size="12" font_weight="bold" color="#5F6B">styled text</Font_size>When generated as React components, such syntax can be nicely seen in the debugger using the react-developer-tools
- To be considered as React Components, the tag names must start by an uppercase. But this rule helps to prevent from conflicts (see custom elements)
- The plugin
eslint-plugin-reactraise warnings such asFont_size must be in PascalCaserelated to thereact/jsx-pascal-caserule