diff --git a/docs/essentials/displaying_text.md b/docs/essentials/displaying_text.md index 243351b5..5417720f 100644 --- a/docs/essentials/displaying_text.md +++ b/docs/essentials/displaying_text.md @@ -31,6 +31,7 @@ The Text-tag accepts the following attributes: - `lineheight` - the spacing between lines in pixels - `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes - `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow)) +- `rich` - enables _Rich Text_ parsing on the `content`, allowing inline styling (bold, italic, underline, strikethrough, color) via BBCode-style tags. Defaults to `false` (see more details [here](#rich-text)) ## Text dimensions @@ -76,6 +77,33 @@ This functionality is automatically enabled, but requires that both a _horizonta The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_. +## Rich Text + +Normally the `content` of a ``-tag is displayed as plain text. When you want to style _parts_ of a text differently (like a single bold word or a colored price), you can turn on _Rich Text_ by adding the `rich`-attribute. + +```xml + +``` + +Inside the `content` you can then use the following tags: + +- `[b]...[/b]` - bold +- `[i]...[/i]` - italic +- `[u]...[/u]` - underline +- `[s]...[/s]` - strikethrough +- `[color=...]...[/color]` - colored text, in `0xRRGGBBAA` format (i.e. `0xff0000ff` for red) + +Tags can also be combined: + +```xml + + +``` + +Rich Text is off by default, so plain texts keep the faster rendering path. Only enable it on the texts that need inline styling. + +Underline and strikethrough are drawn by the renderer and don't need extra fonts. Bold and italic are separate font faces though, so you'll need to register those styles as extra fonts in your Launch settings. See [Registering bold and italic fonts](#registering-bold-and-italic-fonts) for a full example. + ## SDF and Canvas2d Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer. @@ -116,6 +144,27 @@ From this moment on you'll be able to use the font `ComicSans` anywhere in your ``` +### Registering bold and italic fonts + +Bold and italic are separate font faces, each with its own font file. Blits has no `weight` or `style` option, so you register each style as its own entry in the `fonts` array, with its own `family` name: + +```js + fonts: [ + { family: 'roboto', type: 'msdf', file: 'fonts/Roboto-Regular.ttf' }, + { family: 'roboto-bold', type: 'msdf', file: 'fonts/Roboto-Bold.ttf' }, + { family: 'roboto-italic', type: 'msdf', file: 'fonts/Roboto-Italic.ttf' }, + ], +``` + +Each style is then a normal font family you can use with the `font`-attribute, and [Rich Text](#rich-text) uses these same registered faces for its `[b]` and `[i]` tags: + +```xml + + +``` + +> Underline (`[u]`) and strikethrough (`[s]`) are drawn by the renderer and need no extra fonts. + ### Custom characters For MSDF font, a font atlas is created. By default this atlas includes all printable main ASCII characters. If you know beforehand that you won't need certain characters, it would be more optimal to generate only those characters that are actually needed. diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index fc3ff7b2..166c2867 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -240,6 +240,9 @@ const propsTransformer = { set rotation(v) { this.props['rotation'] = v * (Math.PI / 180) }, + set rich(v) { + this.props['richText'] = v + }, set w(v) { const parsed = parsePercentage.call(this, v, 'w') this.props['w'] = parsed diff --git a/src/lib/codegenerator/generator.test.js b/src/lib/codegenerator/generator.test.js index 3e2584be..0079de91 100644 --- a/src/lib/codegenerator/generator.test.js +++ b/src/lib/codegenerator/generator.test.js @@ -82,7 +82,7 @@ test('Generate render and effect code for an empty template', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -144,7 +144,7 @@ test('Generate render and effect code for a template with a single simple elemen const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -215,7 +215,7 @@ test('Generate code for a template with a simple element and a simple nested ele const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -292,7 +292,7 @@ test('Generate code for a template with a single element with attributes', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -364,7 +364,7 @@ test('Generate code for a template with a single element with attributes with a const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -442,7 +442,7 @@ test('Generate code for a template with a single element with attributes with nu const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -528,7 +528,7 @@ test('Generate code for a template with attributes and a nested element with att const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -626,7 +626,7 @@ test('Generate code for a template with attributes and 2 nested elements with at const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -748,7 +748,7 @@ test('Generate code for a template with attributes and deep nested elements with const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -871,7 +871,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) => const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -971,7 +971,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1045,7 +1045,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1152,7 +1152,7 @@ test('Generate code for a template with attribute (object)', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1225,7 +1225,7 @@ test('Generate code for a template with dynamic attribute (object)', (assert) => const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1299,7 +1299,7 @@ test('Generate code for a template with attribute (object) with mixed dynamic & const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1373,7 +1373,7 @@ test('Generate code for a template with @-listeners', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1514,7 +1514,7 @@ test('Generate code for a template with custom components', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1704,7 +1704,7 @@ test('Generate code for a template with an unregistered custom component', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -1887,7 +1887,7 @@ test('Generate code for a template with custom components with arguments', (asse const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2077,7 +2077,7 @@ test('Generate code for a template with custom components with argument value as const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2236,7 +2236,7 @@ test('Generate code for a template with custom components with reactive props', const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2472,7 +2472,7 @@ test('Generate code for a template with a transition attributes', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2563,7 +2563,7 @@ test('Generate code for a template with slot content', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2752,7 +2752,7 @@ test('Generate code for a template with slot content, using a named slot', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -2926,7 +2926,7 @@ test('Generate code for a template with a slot', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3023,7 +3023,7 @@ test('Generate code for a template with inline Text', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3108,7 +3108,7 @@ test('Generate code for a template with inline dynamic Text', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3193,7 +3193,7 @@ test('Generate code for a template with inline dynamic Text embedded in static t const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3280,7 +3280,7 @@ test('Generate code for a template with inline text interpolation from plugins v const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3365,7 +3365,7 @@ test('Generate code for a template with a single element with attributes with pe const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3453,7 +3453,7 @@ test('Generate code for a template with a simple for-loop on an Element', (asser const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3637,7 +3637,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3798,7 +3798,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -3952,7 +3952,7 @@ test('Generate code for a template with a simple for-loop on an Element with a c const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4139,7 +4139,7 @@ test('Generate code for a template with a simple for-loop on an Element with a k const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4325,7 +4325,7 @@ test('Generate code for a template with a simple for-loop on a Component with a const expectedRender = ` function anonymous(parent,component,context,components,effect,getRaw,Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4524,7 +4524,7 @@ test('Generate code for a template with a simple for-loop on an Element with an const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4708,7 +4708,7 @@ test('Generate code for a template with double $$ (i.e. referencing a Blits plug const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4792,7 +4792,7 @@ test('Generate code for a template with verification of dynamic attributes', (as const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -4887,7 +4887,7 @@ test('Generate code for a template with verification of reactive attributes', (a const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -5010,7 +5010,7 @@ test('Generate code for a template with attribute values verified against a nest const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = [] @@ -5137,7 +5137,7 @@ test('Generate code for a template with verification of attributes with Math cal const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw, Log) { const elms = [] - const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] + const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"] const elementConfigs = [] const forloops = [] const props = []