edm00se/parcel-plugin-goodie-bag

provides the Promise and fetch goodies needed for IE(11) support w/ parcel bundle loading

Archived

Per issue #55, this repository is being archived.

parcel-plugin-goodie-bag

A polyfill for Promise and fetch for Parcel v1, to keep it working for those browsers without it.

Looking at you Internet Explorer.

Parcel v1 Only!

Why This Is Needed

TL;DR: multiple bundle support in Parcel, such as using the ability to require html partial files, makes direct use of both the Promise and fetch APIs, directly.

This plugin is born of my frustaration with the scenario outline in parcel issue #2364. This requires additional intervention, since the native requirement of the potentially un-polyfilled APIs is prior to any polyfill via babel-polyfill and isn't something that can be influenced inside the application source itself; at least not without convoluted efforts.

Installation

• npm install --save-dev parcel-plugin-goodie-bag

Usage

No additional configuration required. If your app is being bundled by parcel and you have this plugin installed, the processed application will build with:

• the *.html containing a script tag in its head pointing to the "goodie bag` script (the two polyfills)
• a "goodie bag" script file, placed in the destination directory (outDir to parcel, defaults to dist)
• the script tag will respect your configured publicUrl option with Parcel (e.g.- prefixed with default / or no root slash in the case of .)

Note: If you're not processing your index.html file through parcel, for example merely bundling the JS directly, I believe you're missing out on some of the super powers of parcel. However, if that's your workflow and you're missing out on this plugin's functionality, please consult the discussion and resolution outlined in this issue.

In Action

I made use of a simple reproducible repository I had set up for tracking this issue.

Before	After

Contributing

If you have something to contribute, please do. If you're uncertain as to whether or not to open a PR, feel free to ask; just open an issue and mark that it's a question.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Eric McCormick 📝 🐛 💻 🖋 📖 💡 🤔 🚧 👀 📓

Joe Withey 💻 🤔

Klaus Breyer 🐛 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

History

Parcel is an amazing bundler with superpowers. The fact that my ability to support IE(11), a requirement for my day job, was hampered by this limitation of a multiple bundle scenario meant that I had to solve the problem myself. It is my hope that one day the configuration of Parcel will allow for the surfacing of base level APIs, such as Promise and fetch to make this plugin unnecessary. Until then, I'll keep this available to provide some sanity.

Credits

• parcel

License

MIT

parcel-plugin-goodie-bag's Issues

Create v2 Compatible Plugin

Need to:

• determine which plugin flavor best fits use case
• appropriate name ... of course that changed with v2 🙄
• test and pre-publish to npm under next or v2 tag, opt-in until v2 is fully released

Get The Word Out

For those of us stuck supporting IE(11), this is pretty plug-and-play and should cover most normal use cases.

Update Dependencies

Archiving This Plugin

Now that Parcel v2 is stably release, this plugin which only works with Parcel v1 is no longer needed.

Per my comment in another issue thread, if you have to meet these needs with Parcel v2, you can still do so. For those continuing to use Parcel v1, I am not un-publishing the npm package at this time, but you could also re-create this plugin easily should the need arise. Thank you all who contributed for making this a successful plugin.

Compatibility for projects without index.html

first of all: it's great that this project exists!
i use parcel to compile and bundle pure js. then the goodie bag doesn't kick pure ...

do you have a workaround for me how to use dsa anyway?

Fix: Duplicate goodie-bag script and too low in head

• switch to .prepend over .append
• check for existing script of same name

Parcel-2 Compatibility

Parcel-2 got released few days back. And existing plugins are not compatible with it.
We are using Parcel for all our dev/prod workflows with only one plugin(goodie-bag).
Can we test/try this plugin with Parcel-2.0 with some modifications ?

Link: https://medium.com/@devongovett/parcel-2-0-0-alpha-1-is-here-8b160c6e3f7e

Use Correct es6 Var in For Of Loop

Using const means that the private var in the for loop won’t re-assign after the first iteration; should use let.

Need to publish this as a bug fix once I have a non-mobile env again, after the holiday week.

Reword Contributing Paragraph in ReadMe

Current paragraph reads as this being a "leave it alone" repo, which it isn't meant to be. There has already been some good discussion and use cases beyond my initial expectations. PRs are welcome!

ref: #2 & #6

Add All Contributors

Requirement that the entry html file be name index.html

First of all thank you for making this plugin public, it has been a great help.

I have made a couple of modifications to the code for my own purposes and would like to consider raising a PR. The changes include:

• Supporting multiple html entry files
• Polyfilling html files that are not named index.html

Why was it made a condition that you can only polyfill a file named index.html?

Add Version Strings to Built File Header

So the developer can check what version of polyfills they have.