Skip to content

Conversation

paolostyle
Copy link
Contributor

@paolostyle paolostyle commented Jan 20, 2025

Description

Linked issue: #5177, #5128

Problem
This PR update date-fns to the latest version, v4.1.0. Dependabot update breaks the docs website (which is a separate topic in itself, the build system over there is extremely outdated - happy to help with that), my changes fix these issues so the website is still functional.

Changes

  • bumped version in package.json
  • removed the logic in Rollup that marks date-fns exports as external
  • adjusted imports to use date-fns directly, also in tests for consistency

To reviewers

This might seem like a bad decision, after all previous contributors were using direct date-fns exports to reduce the bundle size! This isn't actually correct after v4.1.0. Since v4, date-fns is marked as type: "module", so really any somewhat up-to-date bundle will handle tree shaking correctly (in fact this might've been the case even earlier as date-fns was providing ESM exports back in v3, too). I have a hard time imagining that people stuck on super old bundlers that don't work with ESM are keeping this library up to date.

On another note, if this was an issue, someone would likely report it already, because there was a direct date-fns import in src/calendar.tsx for a while now, so for CJS builds this would've had an impact already anyway.

As a small positive side effect, the final bundle size is slightly smaller for every produced target.

After this is merged I believe both linked issues can be closed; one is the dependabot's PR, the other contains a subset of my changes.

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:
  • Comments posted to any areas of potential concern or improvement.
  • Detailed feedback or actions needed to resolve issues that are found.
  • Turnaround times vary, but we aim to be swift.

@paolostyle you can click here to see the review status or cancel the code review job.

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PullRequest Breakdown

Reviewable lines of change

+ 92
- 101

76% TypeScript
10% JavaScript
7% TSX (tests)
6% TypeScript (tests)
1% JSON

Generated lines of change

+ 5
- 5

Type of change

Feature - These changes are adding a new feature or improvement to existing code.

Copy link

codecov bot commented Jan 20, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.87%. Comparing base (4804646) to head (8256af8).
Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5326      +/-   ##
==========================================
- Coverage   96.92%   96.87%   -0.06%     
==========================================
  Files          30       30              
  Lines        3416     3358      -58     
  Branches     1414     1431      +17     
==========================================
- Hits         3311     3253      -58     
+ Misses        105      103       -2     
- Partials        0        2       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@martijnrusschen
Copy link
Member

@paolostyle Let's give this a try. Thanks for pushing this along. The added context in the description will be helpful for future references. If you're up with helping to upgrade outdated logic feel (such as the build system) free to open a PR.

@martijnrusschen martijnrusschen merged commit dfcefaf into Hacker0x01:main Jan 20, 2025
6 checks passed
@martijnrusschen
Copy link
Member

OK, it seems we're not fully functional: https://reactdatepicker.com/

@paolostyle
Copy link
Contributor Author

paolostyle commented Jan 20, 2025

Okay I must've messed up something during my local development as it indeed does not work after I did a clean set up, more specifically the UMD build used by the docs page does not work. I will revisit this and get back to you.

That being said I wonder if the UMD build is even needed nowadays. ESM "just works" which I verified by replacing browser field in package.json with the path to ESM file. I will try to make it work, though.

DawoudIO added a commit to ChurchCRM/CRM that referenced this pull request Mar 22, 2025
![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade react-datepicker from 8.0.0 to
8.1.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **1 version** ahead of your current
version.

- The recommended version was released **22 days ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>react-datepicker</b></summary>
    <ul>
      <li>
<b>8.1.0</b> - <a
href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.1.0">2025-02-17</a></br><h2>What's
Changed</h2>
<ul>
<li>Fix <a class="issue-link js-issue-link" data-error-text="Failed to
load title" data-id="2730594768" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5274"
data-hovercard-type="issue"
data-hovercard-url="/Hacker0x01/react-datepicker/issues/5274/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/issues/5274">#5274</a>:
🐛 Auto refresh the input value with the previously entered valid value
if any invalid value is entered (when the open state is closed) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/balajis-qb/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2856011361" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5417"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5417/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5417">#5417</a></li>
<li>Fix: Make CalendarIconProps.icon optional to prevent type error by
<a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jingjing2222/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2844544321" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5406"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jingjing2222/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> made
their first contribution in <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2844544321"
data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5406"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link"
href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v8.0.0...v8.1.0"><tt>v8.0.0...v8.1.0</tt></a></p>
      </li>
      <li>
<b>8.0.0</b> - <a
href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.0.0">2025-01-31</a></br><h2>Breaking
changes</h2>
<ul>
<li>fix: Inconsistent/broken behavior in <code>parseDate</code> by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/laug/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/laug">@ laug</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2470564504" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5036"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5036/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5036">#5036</a></li>
</ul>
<h2>Other changes</h2>
<ul>
<li>🚨 Fix TypeScript Linting warnings for React 19 upgrade by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/balajis-qb/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2770364520" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5301"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5301/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5301">#5301</a></li>
<li>Upgrade to React 19 by <a class="user-mention notranslate"
data-hovercard-type="user"
data-hovercard-url="/users/martijnrusschen/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a>
in <a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="2770234268" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5300"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5300/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5300">#5300</a></li>
<li>fix: fix click outside within Shadow DOM by <a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/meriouma/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/meriouma">@ meriouma</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2776725692" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5310"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li>
<li>Fix condition preventing props.onFocus execution by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/dshster/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/dshster">@ dshster</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2784453093" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5315"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li>
<li>chore(deps): upgrade date-fns to v4.1.0 by <a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/paolostyle/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/paolostyle">@ paolostyle</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2800207617" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5326"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li>
<li>Fix deprecation warning hljs by <a class="user-mention notranslate"
data-hovercard-type="user"
data-hovercard-url="/users/martijnrusschen/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a>
in <a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="2800232085" data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5329"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5329/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5329">#5329</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/meriouma/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/meriouma">@ meriouma</a> made their
first contribution in <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2776725692"
data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5310"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li>
<li><a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/dshster/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/dshster">@ dshster</a> made their
first contribution in <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2784453093"
data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5315"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li>
<li><a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/paolostyle/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/paolostyle">@ paolostyle</a> made
their first contribution in <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2800207617"
data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5326"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li>
<li><a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/iskkiri/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/iskkiri">@ iskkiri</a> made their
first contribution in <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2820255279"
data-permission-text="Title is private"
data-url="Hacker0x01/react-datepicker#5365"
data-hovercard-type="pull_request"
data-hovercard-url="/Hacker0x01/react-datepicker/pull/5365/hovercard"
href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5365">#5365</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link"
href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v7.6.0...v8.0.0"><tt>v7.6.0...v8.0.0</tt></a></p>
      </li>
    </ul>
from <a
href="https://redirect.github.com/Hacker0x01/react-datepicker/releases">react-datepicker
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI5YmVkMGE3MS0yMzA3LTQ4NDgtYTk1OS02NTNhOTA1M2E3NjMiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjliZWQwYTcxLTIzMDctNDg0OC1hOTU5LTY1M2E5MDUzYTc2MyJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?pkg&#x3D;react-datepicker&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react-datepicker","from":"8.0.0","to":"8.1.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"9bed0a71-2307-4848-a959-653a9053a763","prPublicId":"9bed0a71-2307-4848-a959-653a9053a763","packageManager":"npm","priorityScoreList":[],"projectPublicId":"e27b08aa-e5d2-4b10-8303-630a69d0b669","projectUrl":"https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":1,"publishedDate":"2025-02-17T20:53:33.623Z"},"vulns":[]}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants