Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: fix sourcemaps #79

Merged
merged 1 commit into from
Jun 17, 2020
Merged

Conversation

justingrant
Copy link

react-confetti's sourcemaps don't actually point to source files in the sourcemap's sources array. This causes a few problems:

  • Warnings are emitted into the console at runtime when using some tools that check for presence of source files, like source-map-loader.
  • Using an IDE debugger like VSCode, you can't set breakpoints on the actual source files unless the debugger is running, because the source files aren't published to npm so they don't actually exist on disk on a client dev's machine. This makes it harder to debug startup scenarios or other cases where it's helpful to proactively set breakpoints before starting the debugger.
  • It also makes it harder for devs who want to understand how the library works, because the code inside node_modules is confusing transpiled ES5 javascript. The only way today to see the actual TS code is to go to github, instead of being able to look inside node_modules and easily understand what the library is doing.

This PR fixes these problems by making the following changes:

  • Adds src/ to the files published to the npm registry
  • Changes the invalid paths emitted by Webpack into relative URLs that will be valid relative paths pointing to source files when a developer installs this package from the registry.

With these changes made, client devs can view and set breakpoints in the actual TS source code of this library. FWIW, this PR is analogous to similar PRs merged into aws-amplify, react-router, swiper, libphonenumber-js, etc.

Here's what the start of react-confetti.js.map looks like in the current version, with line breaks added for clarity:

{"version":3,"sources":[
  "webpack://ReactConfetti/webpack/universalModuleDefinition",
  "webpack://ReactConfetti/webpack/bootstrap",
  "webpack://ReactConfetti/./node_modules/tween-functions/index.js",
  "webpack://ReactConfetti/./src/Confetti.ts",
  "webpack://ReactConfetti/./src/Particle.ts",
  "webpack://ReactConfetti/./src/ParticleGenerator.ts",
  "webpack://ReactConfetti/./src/ReactConfetti.tsx",
  "webpack://ReactConfetti/./src/utils.ts",
  "webpack://ReactConfetti/external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}"
],

Those paths don't exist on disk, and the webpack:// prefix is not recognized by webpack itself (when this library is being bundled into an app).

Here's what it looks like after this PR:

{"version":3,"sources":[
  "webpack/universalModuleDefinition",
  "webpack/bootstrap",
  "../../tween-functions/index.js",
  "../src/Confetti.ts",
  "../src/Particle.ts",
  "../src/ParticleGenerator.ts",
  "../src/ReactConfetti.tsx",
  "../src/utils.ts",
  "external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}"
],

All the paths that point to actual source files have been updated to point to actual locations on disk where the files will be on the developer's machine after this library is installed. webpack/universalModuleDefinition, webpack/bootstrap, and external ... aren't real files, but they don't cause warnings at build time or runtime, so they're OK.

BTW I wasn't sure if I should base my branch on develop or on master, so I based it on master. If you want it to be on top of develop instead, just let me know and I can open a new PR with that basing.

@stale
Copy link

stale bot commented Feb 29, 2020

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label Feb 29, 2020
@justingrant
Copy link
Author

Yes, still relevant. Waiting for a maintainer to review.

@stale stale bot removed the wontfix label Feb 29, 2020
@rkuykendall
Copy link

rkuykendall commented Mar 15, 2020

Hey @justingrant. Forked the project here, overhauled the build/publication process and actively accepting PRs:

https://github.com/rkuykendall/confetti-react

@stale
Copy link

stale bot commented Apr 14, 2020

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label Apr 14, 2020
@justingrant
Copy link
Author

Yes, still relevant. Waiting for a maintainer to review.

@stale stale bot removed the wontfix label Apr 14, 2020
@stale
Copy link

stale bot commented May 14, 2020

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label May 14, 2020
@justingrant
Copy link
Author

Yes, still relevant. Waiting for a maintainer to review.

@stale stale bot removed the wontfix label May 14, 2020
@stale
Copy link

stale bot commented Jun 13, 2020

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label Jun 13, 2020
@justingrant
Copy link
Author

Yes, still relevant. Waiting for a maintainer to review.

@stale stale bot removed the wontfix label Jun 13, 2020
@alampros
Copy link
Owner

Thanks for this amazing PR, @justingrant ! (Seriously, kudos for the level of explanation)

Sorry for the long delay - I started a new job and got slammed.

@alampros alampros merged commit 1184141 into alampros:master Jun 17, 2020
@justingrant
Copy link
Author

No worries, thanks @alampros for the kind words!

alampros added a commit that referenced this pull request Jun 17, 2020
@alampros
Copy link
Owner

🎉 This PR is included in version 5.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

alampros added a commit that referenced this pull request May 20, 2022
commit 510e1fd
Author: semantic-release-bot <[email protected]>
Date:   Fri May 20 14:49:12 2022 +0000

    chore(release): 6.1.0 [skip ci]

    # [6.1.0](v6.0.1...v6.1.0) (2022-05-20)

    ### Bug Fixes

    * **ci:** add gh and npm tokens ([ecc2d87](ecc2d87))
    * **ci:** explicitly add npm token ([fb14930](fb14930))
    * Allow react 18 in peer dependency ([6598781](6598781))

    ### Features

    * **ci:** travis => gh actions ([7af7f03](7af7f03))

commit fb14930
Author: Aaron Lampros <[email protected]>
Date:   Fri May 20 10:47:58 2022 -0400

    fix(ci): explicitly add npm token

commit ecc2d87
Author: Aaron Lampros <[email protected]>
Date:   Fri May 20 10:45:28 2022 -0400

    fix(ci): add gh and npm tokens

commit bb37abd
Merge: fc3e0ff 7af7f03
Author: Aaron Lampros <[email protected]>
Date:   Fri May 20 10:39:06 2022 -0400

    Merge branch 'develop'

    # Conflicts:
    #	yarn.lock

commit fc3e0ff
Author: semantic-release-bot <[email protected]>
Date:   Mon Feb 22 19:11:04 2021 +0000

    chore(release): 6.0.1 [skip ci]

    ## [6.0.1](v6.0.0...v6.0.1) (2021-02-22)

    ### Bug Fixes

    * Allow react 17 in peer dependency ([266a3dd](266a3dd))

commit 78dc4c4
Merge: cadf67d 266a3dd
Author: Aaron Lampros <[email protected]>
Date:   Mon Feb 22 12:56:15 2021 -0500

    Merge branch 'develop'

commit cadf67d
Author: semantic-release-bot <[email protected]>
Date:   Fri Jul 17 15:41:16 2020 +0000

    chore(release): 6.0.0 [skip ci]

    # [6.0.0](v5.1.0...v6.0.0) (2020-07-17)

    ### chore

    * **deps:** upgrade deps ([25d75da](25d75da))

    ### BREAKING CHANGES

    * **deps:** Requires node >= 10.18

commit b54e7c9
Merge: 8bb948d 6222add
Author: Aaron Lampros <[email protected]>
Date:   Fri Jul 17 11:30:20 2020 -0400

    July release 1

    # Conflicts:
    #	package.json
    #	yarn.lock

commit 8bb948d
Author: semantic-release-bot <[email protected]>
Date:   Wed Jun 17 01:10:20 2020 +0000

    chore(release): 5.1.0 [skip ci]

    # [5.1.0](v5.0.1...v5.1.0) (2020-06-17)

    ### Features

    * initial velocity range options\ ([929bc50](929bc50))

commit 399fe09
Author: Aaron Lampros <[email protected]>
Date:   Tue Jun 16 21:05:33 2020 -0400

    chore(deps): upgrade deps

commit 52ce76a
Merge: 1184141 5b8fe1e
Author: Aaron Lampros <[email protected]>
Date:   Tue Jun 16 21:00:46 2020 -0400

    Merge branch 'develop'

commit 1184141
Merge: e6f29f0 0e562e4
Author: Aaron Lampros <[email protected]>
Date:   Tue Jun 16 20:33:07 2020 -0400

    Merge pull request #79 from justingrant/fix-sourcemaps

    build: fix sourcemaps

commit 0e562e4
Author: Justin Grant <[email protected]>
Date:   Wed Jan 29 14:42:36 2020 -0800

    build: fix sourcemaps

commit e6f29f0
Author: semantic-release-bot <[email protected]>
Date:   Fri Oct 18 20:44:15 2019 +0000

    chore(release): 5.0.1 [skip ci]

    ## [5.0.1](v5.0.0...v5.0.1) (2019-10-18)

    ### Bug Fixes

    * use componentDidUpdate instead ([1ad95f9](1ad95f9)), closes [#73](#73)
    * **types:** make canvasRef optional ([607068a](607068a)), closes [#72](#72)

commit 5392c2a
Merge: 15911b1 607068a
Author: Aaron Lampros <[email protected]>
Date:   Fri Oct 18 16:38:40 2019 -0400

    Merge branch 'develop'

commit 15911b1
Author: semantic-release-bot <[email protected]>
Date:   Fri Oct 18 17:38:55 2019 +0000

    chore(release): 5.0.0 [skip ci]

    # [5.0.0](v4.0.1...v5.0.0) (2019-10-18)

    * Merge pull request #70 from wheeler/mw-r169 ([8e7ec50](8e7ec50)), closes [#70](#70)

    ### Bug Fixes

    * **deps:** upgrade deps ([902da73](902da73))

    ### BREAKING CHANGES

    * Requires at least React version 16.3 - that version adds the new lifecycle method used to replace the unsafe one.

commit 9e3c6f7
Merge: 5c266e0 bade928
Author: Aaron Lampros <[email protected]>
Date:   Fri Oct 18 13:34:51 2019 -0400

    Merge branch 'develop'

commit 5c266e0
Merge: 902da73 6e9f04f
Author: Aaron Lampros <[email protected]>
Date:   Fri Oct 18 13:31:50 2019 -0400

    Merge branch 'develop'

commit 902da73
Author: Aaron Lampros <[email protected]>
Date:   Fri Oct 18 13:29:53 2019 -0400

    fix(deps): upgrade deps

commit 353546f
Author: semantic-release-bot <[email protected]>
Date:   Fri Aug 9 02:28:23 2019 +0000

    chore(release): 4.0.1 [skip ci]

    ## [4.0.1](v4.0.0...v4.0.1) (2019-08-09)

    ### Bug Fixes

    * **types:** remove NamedExoticComponent ([b6dec94](b6dec94)), closes [#65](#65)

commit c06b5bc
Merge: 0aefdef b6dec94
Author: Aaron Lampros <[email protected]>
Date:   Thu Aug 8 22:24:43 2019 -0400

    Merge pull request #66 from alampros/develop

    fix(types): remove NamedExoticComponent

commit 0aefdef
Author: semantic-release-bot <[email protected]>
Date:   Tue Aug 6 12:28:08 2019 +0000

    chore(release): 4.0.0 [skip ci]

    # [4.0.0](v3.1.2...v4.0.0) (2019-08-06)

    ### Bug Fixes

    * disable pointer events again ([a28a426](a28a426)), closes [#63](#63)
    * Export the same class as the default export ([385f981](385f981))

    ### BREAKING CHANGES

    * changes module exports

commit d2b9adb
Merge: d03a173 df48e10
Author: Aaron Lampros <[email protected]>
Date:   Tue Aug 6 08:22:41 2019 -0400

    Merge pull request #64 from alampros/develop

    August release

commit d03a173
Author: semantic-release-bot <[email protected]>
Date:   Thu Jul 11 02:33:13 2019 +0000

    chore(release): 3.1.2 [skip ci]

    ## [3.1.2](v3.1.1...v3.1.2) (2019-07-11)

    ### Bug Fixes

    * **deps:** upgrade deps ([41c7dd0](41c7dd0))

commit a058c6d
Merge: e324de2 41c7dd0
Author: Aaron Lampros <[email protected]>
Date:   Wed Jul 10 22:28:57 2019 -0400

    Merge pull request #59 from alampros/develop

    Update deps

commit e324de2
Author: semantic-release-bot <[email protected]>
Date:   Fri Jul 5 13:38:16 2019 +0000

    chore(release): 3.1.1 [skip ci]

    ## [3.1.1](v3.1.0...v3.1.1) (2019-07-05)

    ### Bug Fixes

    * **deps:** upgrade deps ([34385dc](34385dc))

commit d9e8162
Merge: cfe6fdf 34385dc
Author: Aaron Lampros <[email protected]>
Date:   Fri Jul 5 09:34:39 2019 -0400

    Merge pull request #57 from alampros/develop

    Upgrade deps

commit cfe6fdf
Author: semantic-release-bot <[email protected]>
Date:   Thu Apr 25 20:34:23 2019 +0000

    chore(release): 3.1.0 [skip ci]

    # [3.1.0](v3.0.0...v3.1.0) (2019-04-25)

    ### Features

    * add `initialVelocityX` and `initialVelocityY` props ([bfc2ff5](bfc2ff5))

commit ca8806e
Merge: 7aa8d41 bfc2ff5
Author: Aaron Lampros <[email protected]>
Date:   Thu Apr 25 16:27:39 2019 -0400

    Merge branch 'develop'

commit 7aa8d41
Author: semantic-release-bot <[email protected]>
Date:   Thu Apr 25 20:03:15 2019 +0000

    chore(release): 3.0.0 [skip ci]

    # [3.0.0](v2.8.0...v3.0.0) (2019-04-25)

    ### Features

    * forward ref to inner canvas ([091b055](091b055))

    ### BREAKING CHANGES

    * wrap default export in forwardRef

commit 48d7c42
Merge: 408686f 65e1560
Author: Aaron Lampros <[email protected]>
Date:   Thu Apr 25 15:59:07 2019 -0400

    Merge pull request #55 from alampros/develop

    ForwardRef

commit 408686f
Merge: 65323b8 5a046b7
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 24 13:26:08 2019 -0400

    Merge branch 'develop'

commit 65323b8
Merge: bfa5819 3ff94f6
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 17 12:13:36 2019 -0400

    Merge branch 'develop'

commit bfa5819
Author: semantic-release-bot <[email protected]>
Date:   Wed Apr 17 15:53:20 2019 +0000

    chore(release): 2.8.0 [skip ci]

    # [2.8.0](v2.7.3...v2.8.0) (2019-04-17)

    ### Features

    * Add onConfettiComplete param ([8af89f2](8af89f2))

commit 8449377
Merge: 4297309 c04f0f5
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 17 11:47:59 2019 -0400

    Merge pull request #54 from alampros/develop

    onConfettiComplete param

commit 4297309
Author: semantic-release-bot <[email protected]>
Date:   Wed Apr 3 23:23:27 2019 +0000

    chore(release): 2.7.3 [skip ci]

    ## [2.7.3](v2.7.2...v2.7.3) (2019-04-03)

    ### Bug Fixes

    * **Performance:** stop raf loop before unmounting ([fc2b48f](fc2b48f)), closes [#47](#47)

commit 5cae4ea
Merge: fb0665a fc2b48f
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 3 19:18:51 2019 -0400

    Merge pull request #53 from alampros/develop

    Performance fix

commit fb0665a
Merge: 8cff300 aea30c1
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 3 17:34:15 2019 -0400

    Merge pull request #52 from alampros/develop

    Docs update

commit 8cff300
Merge: 5f1d907 937a382
Author: Aaron Lampros <[email protected]>
Date:   Wed Apr 3 09:54:46 2019 -0400

    Merge pull request #51 from alampros/develop

    Link to repo from storybook

commit 5f1d907
Author: semantic-release-bot <[email protected]>
Date:   Tue Apr 2 20:24:31 2019 +0000

    chore(release): 2.7.2 [skip ci]

    ## [2.7.2](v2.7.1...v2.7.2) (2019-04-02)

    ### Bug Fixes

    * Destroy confetti instance on unmount ([6965e37](6965e37)), closes [#47](#47)

commit 1a1416f
Merge: 217580e 6965e37
Author: Aaron Lampros <[email protected]>
Date:   Tue Apr 2 16:20:02 2019 -0400

    Merge pull request #50 from alampros/develop

    Cleanup on mount and update deps

commit 217580e
Author: semantic-release-bot <[email protected]>
Date:   Tue Apr 2 17:52:06 2019 +0000

    chore(release): 2.7.1 [skip ci]

    ## [2.7.1](v2.7.0...v2.7.1) (2019-04-02)

    ### Bug Fixes

    * trigger release to fix typescript typings ([817b7c0](817b7c0)), closes [#45](#45)

commit b9c465c
Merge: 7c5bf83 817b7c0
Author: Aaron Lampros <[email protected]>
Date:   Tue Apr 2 13:45:04 2019 -0400

    Merge pull request #49 from alampros/develop

    fix: trigger release to fix typescript typings

commit 7c5bf83
Merge: 0b661a0 f99bb57
Author: Aaron Lampros <[email protected]>
Date:   Tue Apr 2 13:28:06 2019 -0400

    Merge pull request #48 from alampros/develop

    Fix typescript types

commit 0b661a0
Merge: 79be663 1da1d39
Author: Aaron Lampros <[email protected]>
Date:   Mon Mar 18 19:23:07 2019 -0400

    Merge branch 'develop'

commit 79be663
Merge: 82919bc c786216
Author: Aaron Lampros <[email protected]>
Date:   Mon Mar 18 19:03:30 2019 -0400

    Merge branch 'develop'

commit 82919bc
Author: semantic-release-bot <[email protected]>
Date:   Mon Mar 18 21:05:50 2019 +0000

    chore(release): 2.7.0 [skip ci]

    # [2.7.0](v2.6.1...v2.7.0) (2019-03-18)

    ### Bug Fixes

    * point to entire types dir ([3c3184c](3c3184c))

    ### Features

    * **build:** storybook ([462f682](462f682))

commit c2b2be5
Merge: b601825 07029e6
Author: Aaron Lampros <[email protected]>
Date:   Mon Mar 18 17:00:25 2019 -0400

    Merge pull request #43 from alampros/develop

    Webpack + storybook

commit b601825
Author: semantic-release-bot <[email protected]>
Date:   Wed Mar 13 16:00:38 2019 +0000

    chore(release): 2.6.1 [skip ci]

    ## [2.6.1](v2.6.0...v2.6.1) (2019-03-13)

    ### Bug Fixes

    * add rotation direction to fix jump visible when rendering asymetrical shapes ([ca2b22b](ca2b22b))

commit 96c89e6
Merge: a181119 04db715
Author: Aaron Lampros <[email protected]>
Date:   Wed Mar 13 11:55:44 2019 -0400

    Merge pull request #40 from alampros/develop

    Rotation fixes

commit a181119
Author: semantic-release-bot <[email protected]>
Date:   Sun Mar 10 23:20:43 2019 +0000

    chore(release): 2.6.0 [skip ci]

    # [2.6.0](v2.5.0...v2.6.0) (2019-03-10)

    ### Features

    * Add prop to draw custom confetti ([992376b](992376b))

commit 34256f0
Merge: a0a8f40 992376b
Author: Aaron Lampros <[email protected]>
Date:   Sun Mar 10 19:16:54 2019 -0400

    Merge pull request #35 from alampros/develop

    feat: Add prop to draw custom confetti

commit a0a8f40
Author: semantic-release-bot <[email protected]>
Date:   Fri Mar 8 20:16:07 2019 +0000

    chore(release): 2.5.0 [skip ci]

    # [2.5.0](v2.4.1...v2.5.0) (2019-03-08)

    ### Features

    * **build:** output and add types to package ([1349e1d](1349e1d))
    * **ParticleGenerator:** Bulk particle addition ([3c9e108](3c9e108))
    * use easing function for adding confetti ([829a560](829a560))

commit 47c906f
Merge: 470f04d 72e7473
Author: Aaron Lampros <[email protected]>
Date:   Fri Mar 8 15:09:31 2019 -0500

    Merge pull request #34 from alampros/develop

    Typescript refactor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants