Feature: support conditional import

[Raiondesu]

This PR allows to conditionally import the polyfill to be used with modern es-module environments and bundlers.

Current approach only allows to inject the polyfill on DOMContentLoaded, which is not ideal when there's a need to strip 30kb off of the resulting app bundle for modern browsers and only initialize the polyfill when needed - conditionally.

[KreutzerCode]

Hi @Raiondesu ,

Thank you for your pull request. I really appreciate the improvements you've made to the Polyfill. I apologize for the delay in reviewing your changes.

Overall, the changes look very good. However, I have a small suggestion regarding the organization of the code. Currently, the supportsDateInput and addPickerToInputs methods are in separate files (index.js, add-picker.js). While this approach minimizes the amount of loaded JavaScript, I believe that consolidating these methods into one file would be more beneficial for the project structure.

If you have any arguments against this suggestion, I'm open to hearing them.

Otherwise, I kindly suggest that you update your pull request so it can be merged.

Once again, thank you for your contribution. I hope to see this feature merged soon!

[Raiondesu]

@KreutzerCode, thanks for a comprehensive feedback!

This separation is exactly the point of this pull-request. Without this separation, the whole bundle might get imported if the user doesn't specifically manage this case in their bundler config. While storing the functions in separate files indeed seems cumbersome, this, unfortunately, is the only approach I can think of to provide a surefire way of supporting true tree-shaking out-of-the-box.

[KreutzerCode]

I understand, therefore, we will maintain the current arrangement. However, there are a few aspects that need modification:

1. Let's consider renaming index.js to a more precise name, such as supportCheck.js or any other suitable alternative.
2. Then we should update the Readme to reflect the updated import for support check and also update "yourInputElement" to "yourInputElements" in the example since the method expects an array or nodeList.

Furthermore, I would like to ensure the availability of the feature to automatically including the datepicker when an input element is dynamically added later on.
Therefore it would be beneficial to extract line 19 from configurable-date-input-polyfill.js:

document.querySelector('body')?.addEventListener('mousedown', () => addPolyfillPickers());

and add that as separate method within add-picker.js. This way, you can import it as needed and apply it back in the configurable-date-input-polyfill.js

Again if you have any arguments against this suggestion, I'm open to hearing them.

Otherwise, Im looking forward to see this feature merged soon!

[KreutzerCode]

@Raiondesu are you working on the changes we discussed?
I can do that if you are busy. Just let me know. I would like to integrate the feature soon.

Best regards

[KreutzerCode]

Hi @Raiondesu,

I tested your es modules implementation code to include it in the project and found that in this setup the default styles of the datepicker are not loaded.

I tested it in a vanila vite project with the following implementation:
(testet in firefox so the condition is modified)

import supportsDateInput from "configurable-date-input-polyfill/src";

if (supportsDateInput()) {
  import("configurable-date-input-polyfill/src/add-picker").then(
    ({ default: addPickerToInputs }) => {
      addPickerToInputs([...document.querySelectorAll("input")]);
    }
  );
}

<input type="date" data-force-polyfill="true" />

Do you have a solution in mind for this problem or is it an implementation error on my end?