Issue in v1.3.0: Text Handling for Text, Button, and Input Components

AppStudio
1

Hi everyone,

In version v1.3.0 , we noticed that the text setting method for three components — Text , Button , and Input — no longer handles multilingual content as expected.

🔧 Suggested Approach for Multilingual Support

We recommend using the following pattern when rendering text across multiple languages:

// Rendering text, button, and input components in multiple languages
Instance.Text_262.text = TComponents.Component_A.tParse("!!gripper1!!")

Here, tParse is used to directly resolve and return the localized string from your language entries.

⚠️ HTML Content Issue in Text Component

Another issue we observed is that the text property of the Text component no longer properly supports HTML blocks in v1.3.0.

✅ Recommended

  1. Create a function called V130Patch
  2. Input the following code into V130Patch.
// V130Patch -> UserFunction

(function () {
    console.log("🤕 AppStudio v1.3.0 patch.")
    // Text
    const desc_text = Object.getOwnPropertyDescriptor(TComponents.Text.prototype, 'text');

    Object.defineProperty(TComponents.Text.prototype, 'text', {
        get: desc_text.get,
        set: function (value) {
            this.commitProps({ text: value });
            const parsedValue = TComponents.Component_A.tParse(value);
            if (this._text) {
                this._text._text = parsedValue;
                if (this._text._divText !== null) {
                    if (typeof this._text._text === 'number') {
                        this._text._divText.innerHTML = this._text._text;
                    } else if (typeof this._text._text === 'string') {
                        this._text._divText.innerHTML = this._text._text.replace(/\\n|\n/g, '<br>');
                    } else {
                        this._text._divText.innerHTML = '';
                    }
                }
            }

        }
    });

    // Button
    const desc_button = Object.getOwnPropertyDescriptor(TComponents.Button.prototype, 'text');

    Object.defineProperty(TComponents.Button.prototype, 'text', {
        get: desc_button.get,
        set: function (value) {
            this.commitProps({ text: value });
            this._btn.text = TComponents.Component_A.tParse(value);
        }
    });


    // Input
    const desc_input = Object.getOwnPropertyDescriptor(TComponents.Input.prototype, 'text');
    Object.defineProperty(TComponents.Input.prototype, 'text', {
        get: desc_input.get,
        set: function (text) {
            if (this._props.text === text) {
                return;
            }
            (async () => {
                try {
                    await this.syncInputData(text);
                    this.commitProps({ text: text });
                    this._inputField.text = TComponents.Component_A.tParse(text);
                } catch (e) {
                    Component_A.popupEventError(e, 'syncInputData', logModule);
                    return;
                }

                try {
                    var fn = TComponents.Component_A.genFuncTemplate(this._props.onChange, this);
                    fn && (await fn(text));
                } catch (e) {
                    TComponents.Component_A.popupEventError(e, 'text setter', logModule);
                    return;
                }
            })();
        }
    });
})();


const V130Patch = async () => {
    //please coding here.
}
export default V130Patch;

image
image1826×629 61.8 KB

It is worth noting that this patch is only a temporary workaround.

The issue will be addressed in future versions, at which point users may need to manually remove this user function.