Telegram-Mini-Apps / telegram-apps

Made from scratch TypeScript packages, examples and documentation you will surely need to start developing on Telegram Mini Apps.
https://docs.telegram-mini-apps.com/
MIT License
693 stars 192 forks source link

Fix mount problems and make SDK usage a bit stricter. #505

Closed heyqbnk closed 1 month ago

heyqbnk commented 1 month ago

As we have discovered, the miniApp.mount() method behaves improperly because mount does not check if all Mini App methods are supported by the current environment.

To resolve this issue, we used the following code:

setBackgroundColor.isSupported() && subAndCall(backgroundColor, onBgColorChanged);
setBottomBarColor.isSupported() && subAndCall(bottomBarColor, onBottomBarBgColorChanged);
setHeaderColor.isSupported() && subAndCall(headerColor, onHeaderColorChanged);

This should work as expected.

⚠️ BREAKING CHANGES

This Pull Request introduces stricter SDK usage requirements.

init.postEvent: 'non-strict' Removed

We realized that many developers might be using the SDK without knowing that some functionality they're using may not work. This is due to the non-strict postEvent function in the init function:

import { init } from '@telegram-apps/sdk';

init({
  postEvent: 'non-strict'
});

Using the non-strict postEvent can lead to bugs that developers are unaware of. For example:

backButton.onClick(() => {
  // User clicked the button, navigate to a new page.
  navigate('market');
});

backButton.show();

In this case, if the show method is unsupported, and the postEvent function is non-strict (not throwing an error, only using console.warn), the user could get stuck on the current screen without any indication to the developer.

To prevent such scenarios, we now disallow non-strict postEvent. Only a custom postEvent function can be passed. This way, you can bypass the protection mechanism, but you'll be fully aware of the risks. This function can also be used to decorate the original postEvent from the SDK.

Require isMounted and isSupported Checks

Since we no longer allow non-strict actions, most component and utility methods now include the isSupported property. For example:

import { backButton } from '@telegram-apps/sdk';

if (backButton.mount.isSupported()) {
  backButton.mount();
  backButton.show();
}

Calling the mount method without checking if it's supported may throw an error if the method is unsupported in the current Mini App version.

Additionally, if a component has the mount method, many of its other methods now check if the component was mounted. If it wasn't, an error will be thrown. This behavior ensures that you are working with components within their intended lifecycle.

For example, the following code will throw an error:

import { backButton } from '@telegram-apps/sdk';

backButton.show();
// TypedError('ERR_NOT_MOUNTED') will be thrown
changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: 32eacc630944a412b43c1fd08aa70655f0e2da7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages | Name | Type | | ------------------------- | ----- | | @telegram-apps/sdk | Minor | | @telegram-apps/bridge | Minor | | @telegram-apps/sdk-react | Patch | | @telegram-apps/sdk-solid | Patch | | @telegram-apps/navigation | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 17, 2024 9:14am