Skip to content

Version 3.5.0
Compare
Choose a tag to compare
@tbuschto tbuschto released this 13 May 14:24
· 183 commits to master since this release
v3.5.0
8a085cb

Developer experience

Improved Error Reporting

The source map support for stack traces broke in 3.4 and has now been fixed. You need to update both the tabris module and the CLI to 3.5 for it to work again. In addition, unhandled errors in setTimeout/setInterval callbacks and rejected promises are now always logged automatically.

CLI "serve" updates

The "-l" (or "--log-requests") CLI switch will now log a summary of all fetch() and XMLHttpRequest in the CLI terminal. The previous behavior of "-l" was to log requests received by the CLI's own http server. This feature is still available by setting an environment variable "TABRIS_CLI_SERVER_LOG=true". This is useful for debugging connection issues during app sideloading.

There is also a new shortcut "CTRL+P" which lets you print out a XML summary of the UI state (previously done via "CTRL+U") OR of the localStorage content.

API

New function "app.share()"

The new share api asks the operating system to share the data with another installed app. The behavior of this API follows the W3C Web Share API. It supports to share text, url and files as well as to provide a title to show in the share dialog.

Support for "font" and "textColor" attributes in markup

In a TextView with markupEnabled set to true all elements (except <br/>) may have "font" and "textColor" attributes. As plain text these accept CSS-like font/color strings. When the text is given as the content of a <TextView> JSX element, both attributes support the usual "ColorValue" and "FontValue" syntax, such as instanced of the "Font" and "Color" classes.

Support for badges on top TabFolder tab bar on Android

The Android platform now allows to show a badge on a top TabFolder bar. iOS continues to only support the bottom location.

Resource management for fonts, colors and texts

A powerful new mechanism is introduced that supports a JSON-based selector syntax to create resource "dictionaries" based on the platform, device language setting or screen scale factor. Currently there is explicit support for fonts, colors and strings, though technically any data type can be used - just without IDE tooling via JSON schema.

A simple JSON data file that provides internationalized texts for your application may look like this:

{
  "$schema": "../node_modules/tabris/schema/texts.json",
  "$fallbackLanguage": "en-US",
  "hello": {
    "en": "Hello World!",
    "de": "Hallo Welt!"
  },
  "pickColor": {
    "en-us": "Pick a color",
    "en-gb": "Pick a colour",
    "de": "Wähle eine Farbe"
  }
}

This is then converted to a flat resource dictionary like this:

import {TextResources} from 'tabris';
import * as textData from './texts.json';
export const texts = TextResources.from(textData);

And used like this:

import {texts} from './resources';
//...
textView.text = texts.hello;

The resulting object is entirely type safe as well (in TypeScript), so there is no need to constantly look up the available keys. In addition this mechanism supports inheritance, cross-references and value conversion.

New decorator "@prop"

With this release @property gained a number of new options, and @prop acts as an alias that enables all of these by default, making it the "smarter" variant. Unlike @property, @prop always requires type information to work properly, which are implicitly provided in TypeScript and explicitly in JavaScript by passing a constructor like this:

@prop(String)
myProp;

Further differences:

  • The properties initial value is not undefined but depends on the type. For example, string properties are initialized with an empty string. The initial value my also be configured explicitly.

  • If set to null or undefined the property is reset to its initial value. If the initial value is also null (which is the default for non-primitives) an exception is thrown.

  • All values will be automatically converted to the expected type (if possible). This adds a layer of error tolerance, especially in JavaScript, but is also useful for for data binding or when creating models from untyped data sources such JSON strings. It's also possible to use a custom converter function.

  • Objects used as property values may implement an "equals" method to indicate whether or not the new value can be considered equal to the current one. If that is the case the new value will be ignored. Similarly, if the property contains an array and is set to another array that is shallow-equal (has the same length and entries), the property will keep the current value.

TypeScript

Tabris.js now officially supports/recommends TypeScript 3.8 (previously 3.3). Older TypeScript version will not be tested.

JavaScript

All JavaScript runtimes in Tabris.js 3.5 support the "async/await" syntax natively without any compiler/transpiler/polyfill. This was actually already the case in 3.4, but overlooked in the release notes.

Assets 2
Loading