Premium support for our pure JavaScript UI components


Post by MauriceLapre »

Hi,
I'm rolling out our app based on Gantt 4.1.3 and using gantt.module.js, but ran into the fact that you're using "optional chaining (?.)". That's supported from Chrome v80+. We have customers running an older version, where the app isn't working now.

1) Should Gantt 4.1.3 UMD or lite UMD work with this browser version? (e.g. what's the minimal supported Chrome version)
2) If so, can you help me on how to set a redirect in my html file?

Thank you!

Kind regards,

Maurice


Post by saki »

  1. Yes, UMD bundles will work with older browsers, they don't contain optional chaining.
  2. The test can be pretty easy with the help of BrowserHelper:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Module version</title>
    </head>
    <body>
        <script type="module">
            import { BrowserHelper } from '../../build/gantt.module.js'

            if(BrowserHelper.chromeVersion < 80) {
                window.location.href = 'index.umd.html';
            }
        </script>
        Module version
    </body>
</html>

You can test if it works by setting version below you actual version and with this file:

index.umd.html:

<!DOCTYPE html>
<html>
    <head>
        <title>UMD version</title>
    </head>
    <body>
        UMD version
    </body>
</html>

Post by MauriceLapre »

Thanks, I'll give that a try!


Post by MauriceLapre »

Hi,

I've added this, but getting an error:

Screenshot 2021-06-20 144920.png
Screenshot 2021-06-20 144920.png (12.12 KiB) Viewed 653 times

If it would have something to do with it, my URL does have some search parameters for username and others but that shouldn't be of any concern I suppose.


Post by sergey.maltsev »

Hi!

This is compatibility info for the *v4.1.5 published products.
Grid/Scheduler UMD bundles are built with webpack to be compatible with ie11 or all modern browsers.
SchedulerPro/Gantt/Calendar UMD bundles were built with chrome 75 version or above.
All products module bundles are compatible with chrome 75 version or above.


Post by MauriceLapre »

Hi guys,

You're giving me some confusing information. After further research, Saki's approach with importing BrowserHelper from module isn't working for me as well because Object.fromEntries is only supported from Chrome 73 and up and I'm using 70 (didn't share that info yet).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Sergey's response saying

All products module bundles are compatible with chrome 75 version or above.

isn't correct either because e.g. optional chaining is only supported from Chrome 80 and up (or 79 with experimental javascript enabled).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining


Post by sergey.maltsev »

Hi!

This is the exact config we use for webpack 4 to prepare bundle.

module.exports = {
    presets : [
        ['@babel/preset-env',
            {
                targets : {
                    chrome : 75
                }
            }
        ]],
    plugins : [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
    ]
};

So I was not mistaken saying that we use chrome 75 version config.
I see no optional chaining in gantt.module.js. Except in comments.

For example this is transpiled example from gantt.module.js bundle

if (!(project !== null && project !== void 0 && project.isModel)) {

which in source is

 if (!project?.isModel) {

Please point to the exact API method where you've found it?

Anyway you may retranspile module bundle for any lower browser version you need.

This is sample app you may use for chrome: 70.

  1. Unzip attached retranspile-gantt.zip
  2. Copy gantt.module.js to lib folder
  3. Run
    npm install
    npm run build
  4. Check build folder for retranspiled gantt.module.js output

Use webpack.config.js to configure the target browser version.

Attachments
retranspile-gantt.zip
(888 Bytes) Downloaded 52 times

Post by MauriceLapre »

After some more digging, I think I know what's happening here. I've added custom locales, and one of them used

import LocaleManager from 'gantt-4.1.3/lib/Core/localization/LocaleManager.js';

. Probably and old approach. That file is having optional chaining, and that's where it went wrong for me. So, I was mistaken, apologies.
Will look at your current Localization examples to correct mine, and see if that fixes the problem.

Thanks for the help!


Post Reply