Support for options in data-plugins attribute to fix #8831 #11594

javierluraschi · 2020-05-21T22:33:31Z

Q	A
Fixed Issues?	Fixes #8831
Patch: Bug Fix?	No
Major: Breaking Change?	No
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?	No
License	MIT

It is currently not possible to use plugins that require options when injecting plugins using the data-plugins attribute. For instance, currently is not possible to make the proposal-pipeline-operator working with code similar to:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@babel/standalone@7.0.0/babel.js"></script>
  </head>
  <body>
    <script type="text/babel" data-plugins="proposal-pipeline-operator">
      "hello" |> console.log;
    </script>
  </body>
</html>

babel.js:59988 Uncaught Error: [BABEL] /Inline Babel script: The pipeline operator plugin requires a 'proposal' option.'proposal' must be one of: minimal. More details: https://babeljs.io/docs/en/next/babel-plugin-proposal-pipeline-operator (While processing: "base$0$inherits")
    at babel.js:59988
    at babel.js:2028
    at babel.js:95108
    at cachedFunction (babel.js:21719)
    at loadPluginDescriptor (babel.js:95143)
    at babel.js:95167
    at CacheConfigurator.invalidate (babel.js:21840)
    at babel.js:95166
    at cachedFunction (babel.js:21719)
    at loadPluginDescriptor (babel.js:95143)

The problem is that this plugin and others require additional options, while they can be specified explicitly under a Babel.transform(), it's not possible to inject them directly with the data-plugins attribute.

This PR adds support for plugins with options specified as plugin-nane{option1=value1,option2=value2} which, for instance, enables specifying the required minimal option to the pipeline plugin:

<!DOCTYPE html>
<html>
  <head>
    <script src="babel.js"></script>
  </head>
  <body>
    <script type="text/babel" data-plugins="proposal-pipeline-operator{proposal=minimal}">
      "hello" |> console.log;
    </script>
  </body>
</html>

codesandbox-ci · 2020-05-21T22:36:08Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5f3531b:

Sandbox	Source
kind-raman-3qsec	Configuration
shy-dream-sll6w	Configuration

babel-bot · 2020-05-21T22:37:05Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/22497/

JLHwung · 2020-07-16T19:27:56Z

I think adding options support to data-plugins/data-presets is open-ended: options could be numbers, nested objects or even functions, which is non-serializable.

https://babeljs.io/docs/en/babel-standalone#customisation

As @nicolo-ribaudo has mentioned above in #8831 (comment), @babel/standalone already offers registerPresets for customization. You can define your own preset which gives correct plugin options to "proposal-pipeline-operator":

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@babel/standalone@7.0.0/babel.js"></script>
    <script>
      Babel.registerPresets({
        customize: () => ({
          plugins: [
            [
              Babel.availablePlugins["proposal-pipeline-operator"],
              { proposal: "minimal" },
            ],
          ],
        }),
      });
    </script>
  </head>
  <body>
    <script type="text/babel" data-presets="customize">
      "hello" |> console.log;
    </script>
  </body>
</html>

javierluraschi force-pushed the data-plugins-options branch from 84a4426 to 578eb5d Compare May 21, 2020 23:08

support for options in data-plugins to fix babel#8831

5f3531b

javierluraschi force-pushed the data-plugins-options branch from 578eb5d to 5f3531b Compare May 21, 2020 23:10

nicolo-ribaudo added the PR: New Feature 🚀 A type of pull request used for our changelog categories label May 22, 2020

JLHwung closed this Jul 16, 2020

JLHwung mentioned this pull request Jul 16, 2020

add passing options example on @babel/standalone babel/website#2293

Merged

github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 16, 2020

github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for options in data-plugins attribute to fix #8831 #11594

Support for options in data-plugins attribute to fix #8831 #11594

javierluraschi commented May 21, 2020

codesandbox-ci bot commented May 21, 2020 •

edited

babel-bot commented May 21, 2020 •

edited

JLHwung commented Jul 16, 2020

Support for options in data-plugins attribute to fix #8831 #11594

Support for options in data-plugins attribute to fix #8831 #11594

Conversation

javierluraschi commented May 21, 2020

codesandbox-ci bot commented May 21, 2020 • edited

babel-bot commented May 21, 2020 • edited

JLHwung commented Jul 16, 2020

codesandbox-ci bot commented May 21, 2020 •

edited

babel-bot commented May 21, 2020 •

edited