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.

Sign up for GitHub

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

Jump to bottom

Support data-native-module="true" to generate native <script type="module"> #11437

Closed
wants to merge 1 commit into from
Closed

Support data-native-module="true" to generate native <script type="module"> #11437

wants to merge 1 commit into from

Conversation

dfabulich
Copy link
Contributor

If you want to use your browser's native ES module support, the <script> tag needs to have a type="module" attribute. Now, babel standalone can generate native module scripts with <script type="text/babel" data-native-module="true">

<!doctype html>
<html>
<head>
  <title>Babel Test</title>
</head>
<body>
  <script src="./babel.js"></script>
  <script type="text/babel" data-presets="react" data-native-module="true">
    /** @jsx h */
    import { h, Component, render } from 'https://unpkg.com/preact?module';
    render(<h1>Hello World!</h1>, document.body);
  </script>
</body>
</html>
Q                       A
Fixed Issues?
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature? Yes
Tests Added + Pass?
Documentation PR Link
Any Dependency Changes?
License MIT

@dfabulich dfabulich mentioned this pull request Apr 17, 2020
Open
hzoo
hzoo approved these changes Apr 17, 2020
View reviewed changes
Copy link
Member

@hzoo hzoo left a comment

Choose a reason for hiding this comment

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

ah didn't know about "native-module" - makes sense with linked PR

@existentialism existentialism added pkg: standalone PR: New Feature 🚀 A type of pull request used for our changelog categories labels Apr 22, 2020
@JLHwung JLHwung added this to the v7.10.0 milestone Apr 22, 2020
@nicolo-ribaudo
Copy link
Member

I'd like to discuss about this a bit more. I think that a data-type="module" (or data-compiled-type) option would be better, and @babel/register should do something like scriptEl.setAttribute("type", scriptEl.getAttribute("data-type")).

@existentialism
Copy link
Member

data-type might be too generic, data-source-type?

@nicolo-ribaudo
Copy link
Member

data-source-type seems like it implies something about the type of the original source code rather than the compiled one.

I proposed data-type because the "real" attribute is called type. Maybe one of these?

  • data-final-type
  • data-compiled-type
  • data-output-type

@existentialism
Copy link
Member

Good point.

I guess data-type is fine... short of data-script-type 😆

@dfabulich
Support data-type="module" to generate native <script type="module">
a7d3877 
If you want to use your browser's native ES module support, the <script> tag
needs to have a type="module" attribute. Now, babel standalone can generate
native module scripts with <script type="text/babel" data-type="module">

```
<!doctype html>
<html>
<head>
  <title>Babel Test</title>
</head>
<body>
  <script src="./babel.js"></script>
  <script type="text/babel" data-presets="react" data-type="module">
    /** @jsx h */
    import { h, render } from 'https://unpkg.com/preact?module';
    render(<h1>Hello World!</h1>, document.body);
  </script>
</body>
</html>
```
@dfabulich dfabulich closed this Apr 22, 2020
@dfabulich dfabulich force-pushed the dgf-standalone-native-module branch from a475606 to a7d3877 Compare April 22, 2020 20:13
@dfabulich dfabulich mentioned this pull request Apr 22, 2020
Merged
@nicolo-ribaudo nicolo-ribaudo removed this from the v7.10.0 milestone Apr 26, 2020
@github-actions github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Jul 27, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 27, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@existentialism existentialism existentialism approved these changes

@hzoo hzoo hzoo approved these changes

Assignees
No one assigned
Labels
outdated A closed issue/PR that is archived due to age. Recommended to make a new issue pkg: standalone PR: Needs Docs PR: New Feature 🚀 A type of pull request used for our changelog categories
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@dfabulich @nicolo-ribaudo @existentialism @hzoo @JLHwung