Extensions

Layout rendering can be fully customized as the program was built to be nearly completely modular. Some of the common layouts already have built-in extensions which you can load or unload based on your preference.

Interface

squared.accessibility

interface ExtensionAccessibilityOptions {
    displayLabel: boolean;
}

squared.grid

interface ResourceGridOptions {
    floatPrecision: number;
}

squared.css-grid

interface ResourceCssGridOptions {
    floatPrecision: number;
}

squared.list

interface ExtensionListOptions {
    ordinalFontSizeAdjust: number;
    ordinalPaddingLeft: number;
    imagePaddingRight: number;
    /* base */
    symbolDisc: string;
    symbolSquare: string;
    symbolCircle: string;
    symbolDisclosureOpen: string;
    symbolDisclosureClosed: string | [string, string /* rtl */];
    symbolFallback: string;
    markerStyle: CssStyleMap;
}

android.substitute

interface ExtensionSubstituteOptions {
    element: Record<string, ExtensionAttributeElement>;
    resource: PlainObject;
    viewAttributes: string[];
    attributeMapping: StringMap;
}

android.delegate.multiline

interface DelegateMultilineOptions {
    mergeSingleLine: boolean;
    intlLocales: Intl.LocaleArguments | null;
}

android.delegate.scrollbar

interface DelegateScrollbarOptions {
    alwaysDrawTrack: boolean;
    alwaysDrawHorizontalTrack: boolean;
    alwaysDrawVerticalTrack: boolean;
    style: "none" | "outsideInset" | "insideInset" | "insideOverlay" | "outsideOverlay";
    size: string; // px
    thinSize: string;
    fadeDuration: number;
    delayBeforeFade: number;
}

android.resource.background

interface ResourceBackgroundOptions {
    outlineAsInsetBorder: boolean;
    enableImageRepeat: boolean;
}

android.resource.dimens

interface ResourceDimensOptions {
    percentAsResource: boolean;
    floatPrecision: number;
}

android.resource.fonts

interface ResourceFontsOptions {
    defaultFontFamily: string;
    systemFonts: string[];
    disableFontAlias: boolean;
    installGoogleFonts: boolean;
    fontSizeAdjust: number;
    floatPrecision: number;
}

android.resource.fragment

interface ExtensionFragmentOptions {
    viewAttributes: string[];
    viewAttributesApp: string[];
    retainAttributes: string[];
    retainAttributesApp: string[];
    dynamicNestedFragments: boolean;
}

android.resource.includes

interface ExtensionIncludesOptions {
    viewAttributes: string[];
    viewAttributesApp: string[];
    viewAttributesOuterView: string[];
}

android.resource.strings

interface ResourceStringsOptions {
    numberAsResource: boolean;
    enableEmojiViews: boolean;
    detectEmojiPattern: RegExp | null;
    ignoreEmojiPattern: RegExp | null;
}

android.resource.svg

interface ResourceSvgOptions {
    textAsImage: boolean;
    mergeClipPath: boolean;
    mergeVectorDrawable: boolean;
    dependencyVectorDrawable: "animated" | "seekable";
    transformExclude: SvgTransformExclude;
    floatPrecision: number;
    floatPrecisionKeyTime: number;
    animateInterpolator: string;
    customInterpolator: boolean | 1;
}

jetpack.compose.view

interface JetpackComposeViewOptions {
    viewAttributes: string[];
    renderChildren: boolean;
}

Note

These are the built-in extensions which have configurable settings.

Changelog

Added in version 5.5.2:

• ResourceStringsOptions properties were created:

  enableEmojiViews

  detectEmojiPattern

  ignoreEmojiPattern

• ResourceSvgOptions property customInterpolator for modifying built-in attributes as boolean | 1 was created.

Added in version 5.3.0:

• DelegateMultilineOptions property intlLocales for the default Unicode locale identifier as Intl.LocaleArguments | null was created.

Added in version 5.2.1:

• ResourceSvgOptions property dependencyVectorDrawable for the Java implementation as seekable | animated was created.

Added in version 5.2.0:

• ExtensionListOptions properties were created:

  symbolDisc symbolSquare symbolCircle

  symbolDisclosureOpen symbolDisclosureClosed

  symbolFallback markerStyle

• DelegateScrollbarOptions properties were created:

  alwaysDrawHorizontalTrack alwaysDrawVerticalTrack style

  size thinSize

  fadeDuration delayBeforeFade

• ResourceSvgOptions properties mergeClipPath | mergeVectorDrawable as boolean were created.

Changed in version 5.2.0:

• ProjectMap methods get | has will also check default project “_” for key.

Example usage

Some extensions have a few settings which can be configured. The default settings usually achieve the best overall rendering accuracy without noticeably affecting performance.

Create

class Sample extends squared.base.ExtensionUI {
    options = {
        attributeName: [],
        floatPrecision: 3
    };

    constructor(name, framework = 0, options = {}) {
        super(name, framework, options);
    }

    processNode(node) {
        const data = this.project.get(node.element, node.localSettings.projectId);
        if (data) {
            node.each((child, index) => child.element.title = data[index]);
        }
    }
}

Install

const sample = new Sample("widget.example.com", 2 /* APP_FRAMEWORK.ANDROID */, { tagNames: ["span", "li"], dependencies: ["android.substitute"] });
squared.add(sample);
// OR
squared.add([sample, { attributeName: ["width", "height"] }]);

Configure

squared.attr("widget.example.com", "floatPrecision", 2); // typeof is enforced and will only set existing attributes

Add project data

const ext = squared.get("widget.example.com");

ext.project.set(element, await fetch(url?id=1)); // Map interface with optional "projectId" argument
ext.project.set(element, await fetch(url?id=2), "project-1");

const data = ext.project.get(element, "project-2"); // Returns data from default project (id=1)