Flatpickr module is getting included in vendor file even though we are doing auto import

[AhamedFrontEndDeveloper]

Flatpickr module is getting included in vendor file even though we are doing auto import. It should be ignored when we do an auto import of flatpickr.

[AhamedFrontEndDeveloper]

This PR will help to exclude the flatpickr module in vendor file if client is using auto import functionality. In the current behaviour, flatpickr module is included in vendor file even though if auto import is implemented.

@rwwagner90 Can you please check this PR if it helps.

[RobbieTheWagner]

@AhamedFrontEndDeveloper I am curious, why would you use this addon and also manually import flatpickr?

[AhamedFrontEndDeveloper]

I am using this addon in my Ember app to work correctly in ember way. By default if i do an ember build, vendor file includes 'flatpickr' module and vendor file size is coming around 1.23mb. After doing this changes as prescribed in the PR, the vendor file excludes 'flatpickr' module and size is reduced to 1.18mb which saves around ~50kb in vendor file.

In my app, whenever we need flatpickr component we can import it dynamically. We can reduce the vendor js file while loading the app. This flatpickr module can be imported as separate file on demand.

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return import('flatpickr').then((module) => module.default);
  }
});

My sample app Vendor file size in Current implementation:

My sample app Vendor size with Proposed PR:

Visualization in ember-cli-bundle-analyzer

Current:

Proposed approach:

@rwwagner90

[RobbieTheWagner]

@AhamedFrontEndDeveloper so you are doing this just to make the initial load smaller? We could do a dynamic import in this addon instead, if that is the goal.

[AhamedFrontEndDeveloper]

Yes, we are trying to make the initial load smaller. Thought with this approach user can choose the option whether to dynamic import or not based on their needs. This approach is already used in https://github.com/ahmadsoe/ember-highcharts addon as well

Since we dont have route in this addon. If we want to support dynamic import in this addon then we need to add one more wrapper to import flatpickr module and then load the component once the module is ready. We need to show a placeholder component at first till it load the flatpickr module. @rwwagner90

[AhamedFrontEndDeveloper]

Would like to know about your thoughts on the above. @rwwagner90

[RobbieTheWagner]

@AhamedFrontEndDeveloper we should be able to add a dynamic import right to the component. We should not need a wrapper.

[AhamedFrontEndDeveloper]

If we add it directly in the component, we need to handle the loading state till this import (async request) is completed. If user want to render the component immediately it wont show immediately during the first load. User have to wait for sometime to load this component. This will impact the user experience right? Please let me know your thoughts. @rwwagner90

For example, If i am interacting with a dropdown and choosing the date as value. Expectation is that it should show the date picker immediately. But if we do auto import in component directly, it will take some time to load the date picker. Which will affect the user experience.

But if we give the control to the user directly, user can choose where to auto import based on their use cases. They can auto import while loading the component or while loading the route.

[RobbieTheWagner]

@AhamedFrontEndDeveloper no, it will load when the component loads, not when the component is interacted with.

[AhamedFrontEndDeveloper]

Introducing auto import in the component during init hook:

ember-flatpickr/addon/components/ember-flatpickr.ts:

import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
import { BaseOptions as FlatpickrOptions } from 'flatpickr/dist/types/options';

export default class EmberFlatpickr extends Component<EmberFlatpickrArgs> {
  init() {
    import('flatpickr').then((module) => module.default);
  }

It will throw error saying flatpickr is undefined in the below line. Flatpickr module is not yet loaded for importing. Flatpickr module will only be available after module is imported.

Uncaught (in promise) ReferenceError: flatpickr is not defined
    at EmberFlatpickr._setFlatpickrOptions (ember-flatpickr.js:148:1)

Have created a sample commit with the changes. Please check once. https://github.com/shipshapecode/ember-flatpickr/pull/1233

Please let me know if you have any other thoughts. @rwwagner90

[AhamedFrontEndDeveloper]

And if we suppose fix the above using some wrapper or other, There is one other scenario where user loads the component based on some condition.

The component will be loaded only after that condition is met.

In the below example, Datepicker component will be loaded only if user do some action on the page. By clicking some button inside another component 'myOtherComponent' Date picker will be loaded. In this case, auto import will be called now and user has to wait till this auto import gets completed

Ex: myRoute.hbs:

<MyComponent />

myComponent/template.hbs:

{{#if shouldLoadDatePicker}}
 <EmberFlatpickr />
{{else}}
 <button
  onclick={{action 'toggleDatePicker'}}
 />
{{/if}}

myComponent/component.js:

import Component from '@ember/component';

export default Component.extend() {

shouldLoadDatePicker = false;

@action
  toggleDatePicker() {
    set(this, 'shouldLoadDatePicker', !this.shouldLoadDatePicker);
  }

}

[RobbieTheWagner]

@AhamedFrontEndDeveloper I would put the import right before this.flatpickrRef =. You can wrap that in the dynamic import and then set the flatpickrRef.

[AhamedFrontEndDeveloper]

Have updated the sample PR to work. https://github.com/shipshapecode/ember-flatpickr/pull/1233/files I faced a problem with locales support. Since flatpickr module is not loaded in vendor file, locales modules are not working properly. So I have to dynamically import the locale again to make it work.

I am facing one user experience problem

• If i try to load the component with network throttling as 3g slow, It is taking some time to load the date picker UI. It is showing a blank input, if i click it does not show the date picker immediately. I have to wait for sometime then click on input, then it shows the date-picker properly. I tried passing inline as true to datepicker component, but it is not showing the date picker immediately. It is taking some time to load. Since the component itself is totally depending on the dynamic import promise to resolve, it is not loading the date picker immediately.

How about giving the control to the user itself, Let user decide how to load the flatpickr either by dynamic import or in a normal way. In that case, we do not have to worry about the user experience and just loads the component properly. We can give the user a privilege to load the component in a dynamic way or normal way. We can just change the index.js file to support the dynamic import. (PR: https://github.com/shipshapecode/ember-flatpickr/pull/1213/files. Do you see any problems with this approach? @rwwagner90

[RobbieTheWagner]

@AhamedFrontEndDeveloper I really don't think this library is large enough to need to dynamic import, but if we are going to make the switch, I would do it across the board.

[AhamedFrontEndDeveloper]

Ok @rwwagner90 Thanks. For now, I have forked this repo and using it.

[RobbieTheWagner]

Flatpickr is now a peerDep, so you have control of how it is included.