Skip to content

Commit

Permalink
Overhaul content of language-features.md, since I already pushed on…
Browse files Browse the repository at this point in the history
…e commit for it in this PR.

See #6455 (comment) and ping @davisagli
  • Loading branch information
stevepiercy committed Nov 1, 2024
1 parent 1dc2dc9 commit 528ef97
Showing 1 changed file with 38 additions and 44 deletions.
82 changes: 38 additions & 44 deletions docs/source/contributing/language-features.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,64 @@
---
myst:
html_meta:
"description": "Volto is developed using Babel to transpile modern JavaScript to JavaScript that browsers are able to understand and execute."
"property=og:description": "Volto is developed using Babel to transpile modern JavaScript to JavaScript that browsers are able to understand and execute."
"property=og:title": "Language features and conventions"
"keywords": "Volto, Plone, frontend, React, Babel, translations, language, internationalization, i18n, localization, transpilation"
"description": "Volto uses several tools and follows conventions that provide features and browser support for the JavaScript language."
"property=og:description": "Volto uses several tools and follows conventions that provide features and browser support for the JavaScript language."
"property=og:title": "JavaScript language features and browser support"
"keywords": "Volto, Plone, frontend, React, Babel, JavaScript, transpilation"
---
% Mixture of conceptual guide and how-to guide
# JavaScript language features and browser support

# Language features and conventions
Volto uses several tools and follows conventions that provide features and browser support for the JavaScript language.


% Conceptual guide
## Babel

Volto is developed using Babel to transpile modern JavaScript to JavaScript that
browsers are able to understand and execute.
Babel transpiles {term}`ECMAScript` code, including React and JSX, into a backwards compatible version of JavaScript in current and older browsers or environments.

Ecma International's TC39 (https://tc39.es/) is a group of JavaScript developers,
implementers, academics, and more, collaborating with the community to maintain and
evolve the definition of JavaScript. They stablished a process
(https://tc39.es/process-document/) where the proposals are discussed, developed, and
eventually approved (or dropped). The process has five stages (0 to 4) where reaching
the stage 4 means the proposal is accepted and it becomes part of the JavaScript
specification.
Babel provides features and syntax that you can use in code when you develop on Volto.
These features derive from the proposals that the {term}`TC39` produces.

Babel enables a series of features and syntax that the developer can use in code to
develop Volto on. These features are the proposals the TC39 is working on in the
different stages of evolution.
Volto uses `babel-razzle-preset`, which in turns uses `@babel/preset-env`, which together enable the use of all [TC39 finished proposals](https://github.com/tc39/proposals/blob/HEAD/finished-proposals.md#finished-proposals).

Volto uses `babel-razzle-preset` which in turns uses `@babel/preset-env` which enables
the use of all TC39 proposals currently in TC39's stage 4
(https://github.com/tc39/proposals/blob/HEAD/finished-proposals.md#finished-proposals).

### Browser compatibility
% How-to guide
## Browser compatibility

Babel preset-env uses `browserlist` which gives the ability to micromanage the
transformations needed by the current project depending of the browser support you are
currently targeting.
`@babel/preset-env` uses `browserslist`, which you can use to manage the transformations needed to target specific browser support in your project.
This reduces the size of bundles, as Babel will apply only the required transforms that your target environment needs.

By doing this, it enables the bundles to be smaller, as the resulting code does not need to
support old browsers (thus, transform your code to ES5 compatible code) as Babel will
apply only the required transforms that your target environments need. For more
information: https://babeljs.io/docs/babel-preset-env#browserslist-integration
```{seealso}
https://babeljs.io/docs/babel-preset-env#browserslist-integration
```

Volto project generators use this browserlist by default (you can find it in your local `package.json`):
Volto project generators use `browserslist` queries by default, which is in your local {file}`package.json`.
You can adjust this file according to the environments you want to target.

```json
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie 11",
"not dead"
],
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie 11",
"not dead"
],
```

```{seealso}
For usage and syntax, see the `browserslist` documentation of [Queries](https://github.com/browserslist/browserslist#queries).
```

which you can adjust depending on the environments you are targeting in your local
`package.json` file. You can find more information about how the queries in `broserlist`
works in: https://github.com/browserslist/browserslist#queries

### Support of deprecated browsers
% How-to guide
## Support of deprecated browsers

```{warning}
Volto does not support deprecated browsers, such as Internet Explorer 11.
```

If you still need to support deprecated browsers, you should use `browserslist` in your project to enable the required transforms for the target deprecated environments you have to support.
If you still need to support deprecated browsers, you should use `browserslist` in your project to enable the required transforms for the target deprecated environments you must support.

However, Volto (or its dependencies) might not be compatible with old browsers.
You might need to create some workarounds to make the build work, and the
deprecated browser not crash.
However, Volto or its dependencies might not be compatible with old browsers.
You might need to create some workarounds to make the build work, and the deprecated browser not crash.

0 comments on commit 528ef97

Please sign in to comment.