Lazy Loading TextZoom Plugin even if not required (Browser)

[joeldhenry]

Bug Report

In order to avoid unnecessary bundle size increase, we are blocking capacitor from our webapp, and only using features on mobile (ios & android) all other plugins are not loaded if they are blocked by this setup, except text-zoom.

the file loaded is

 http://localhost:8085/node_modules_capacitor_text-zoom_dist_esm_ios_js.js

Plugin(s)

TextZoom

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.3.2
  @capacitor/core: 3.3.2
  @capacitor/android: 3.3.2
  @capacitor/ios: 3.3.2

Installed Dependencies:

  @capacitor/cli: 3.3.2
  @capacitor/android: 3.3.2
  @capacitor/core: 3.3.2
  @capacitor/ios: 3.3.2

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

Browser (Chrome)

Current Behavior

loads node_modules_capacitor_text-zoom_dist_esm_ios_js.js even though not used

Expected Behavior

not loading node_modules_capacitor_text-zoom_dist_esm_ios_js.js unnecessarily

Code Reproduction

    async setTextZoom(percentage: number) {
        if (!(Capacitor.getPlatform() !== 'web' && Capacitor.isPluginAvailable('text-zoom'))) {
            console.log('disable textzoom');
            return;
        }

        await TextZoom.set({value: percentage/100});
    }

[jcesarmobile]

Can you provide a sample app with a plugin where it works and another one where it doesn't work?

Might be possible that as the plugin doesn't have a web implementation but it has a ios js implementation it always loads the ios implementation even if not using it on that platform. In that case it would be a bug in @capacitor/core.

As workaround you can import the plugin right where you want to use it so it's not imported on web, something like

async setTextZoom(percentage: number) {
    if (!(Capacitor.getPlatform() !== 'web' && Capacitor.isPluginAvailable('text-zoom'))) {
        console.log('disable textzoom');
        return;
    }

    const textZoomPlugin = await import('@capacitor/text-zoom');
    await textZoomPlugin.TextZoom.set({value: percentage/100});
}

[joeldhenry]

@jcesarmobile i think you are 100% right. here is an example. just run npm i; npm start
https://github.com/joeldhenry/Capacitor-TextZoomBug

[jcesarmobile]

Hello joeldhenry,

The repository only has a README.md and no code, maybe you forgot to push latest changes?

[joeldhenry]

ha! rookie error @jcesarmobile try now :D

[jcesarmobile]

Thanks for the example, but I had already reproduced that part.
What I was asking for is to include two plugins, one where it can be reproduced (text-zoom, that's already covered by the example) and another one where the issue is not reproduced, so I can compare both, since you said "all other plugins are not loaded if they are blocked by this setup, except text-zoom", so any of them that is working as you expect would be fine.

Nevermind, I installed Device plugin and could reproduce

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.