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

[Proposal] Stop transpiling some builds to ES5 #1435

Merged
merged 4 commits into from
Jun 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 8 additions & 24 deletions doc/api/Miscellaneous/MultiThreading.md
Original file line number Diff line number Diff line change
Expand Up @@ -383,29 +383,13 @@ if (currentModeInfo === null) {

## Note about ES5 Environment

By default, the Worker file will use es2017 features which should be compatible to a
majority of devices.
The Worker file will use es2017 features which should be compatible to a majority of
devices.

However, some older devices might not be compatible with it yet still compatible to the
WebWorker API (and thus the `MULTI_THREAD` feature), yet not with ES2017. For those
platforms, the RxPlayer also provide an ES5 variant of the Worker file:
However, some older devices might not be compatible with ES2017 yet still compatible to
the WebWorker API (and thus could theoretically be compatible with the `MULTI_THREAD`
feature).

- The easiest way is to just import in your application its "embedded" version, exported
through the `"rx-player/experimental/features/embeds"` path:

```js
import { EMBEDDED_WORKER_ES5 } from "rx-player/experimental/features/embeds";
```

This allows to bypass the need to store and serve separately that file.

If you would prefer more control and a smaller bundle size, you may instead consider the
other following ways to it as a separate file.

- With every release note published on GitHub as `worker.es5.js` (you should only use the
file linked to the RxPlayer's version you're using),

- It is also available as `dist/worker.es5.js` from the root directory of the project
published on npm. As such, it might already be found in your project's directory, for
example in the `node_modules` directory (most probably in `node_modules/rx-player/dist/`
depending on your project).
If you need to provide support for the `MULTI_THREAD` feature on those platforms, we
recommend that you use a transpiler tool on that worker file to make it compatible to ES5.
Examples of transpiler tools are [babel](https://babeljs.io/) and [swc](https://swc.rs/).
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Pro-tip: we can just throw the hot potato to the application :D

82 changes: 21 additions & 61 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,10 @@
"build:dev": "./scripts/generate_build.mjs --dev-mode",
"build:wasm:debug": "mkdir -p dist && cd ./src/parsers/manifest/dash/wasm-parser && cargo build --target wasm32-unknown-unknown && cp target/wasm32-unknown-unknown/debug/mpd_node_parser.wasm ../../../../../dist/mpd-parser.wasm",
"build:wasm:release": "./scripts/build_wasm_release.sh",
"bundle": "webpack --progress --config webpack.config.mjs --env production",
"bundle:min": "webpack --progress --config webpack.config.mjs --env minify --env production",
"bundle:min:watch": "webpack --progress --config webpack.config.mjs -w --env production --env minify",
"bundle:watch": "webpack --progress --config webpack.config.mjs -w --env production",
"bundle": "./scripts/run_bundler.mjs src/index.ts --production-mode dist/rx-player.js",
"bundle:min": "./scripts/run_bundler.mjs src/index.ts --production-mode dist/rx-player.js --minify",
"bundle:min:watch": "./scripts/run_bundler.mjs src/index.ts --production-mode dist/rx-player.js --minify --watch",
"bundle:watch": "./scripts/run_bundler.mjs src/index.ts --production-mode dist/rx-player.js --watch",
"certificate": "./scripts/generate_certificate",
"check": "npm run check:types && npm run lint && npm run check:types:unit_tests",
"check:all": "npm run check:types && npm run lint && npm run lint:demo && npm run lint:tests && npm run test:unit && npm run test:integration && npm run test:memory && node -r esm ./scripts/check_nodejs_import_compatibility.js",
Expand Down
6 changes: 4 additions & 2 deletions scripts/build_demo.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { pathToFileURL } from "url";
import esbuild from "esbuild";
import rootDirectory from "./utils/project_root_directory.mjs";
import getHumanReadableHours from "./utils/get_human_readable_hours.mjs";
import buildWorker from "./bundle_worker.mjs";
import runBundler from "./run_bundler.mjs";

const WORKER_IN_FILE = join(rootDirectory, "src/worker_entry_point.ts");
const DEMO_OUT_FILE = join(rootDirectory, "demo/full/bundle.js");
const WORKER_OUT_FILE = join(rootDirectory, "demo/full/worker.js");
const WASM_FILE_DEPENDENCY = join(rootDirectory, "dist/mpd-parser.wasm");
Expand Down Expand Up @@ -73,7 +74,7 @@ export default function buildDemo(options) {
}
});

buildWorker({
runBundler(WORKER_IN_FILE, {
watch,
minify,
production: !isDevMode,
Expand Down Expand Up @@ -128,6 +129,7 @@ export default function buildDemo(options) {
__LOGGER_LEVEL__: JSON.stringify({
CURRENT_LEVEL: "INFO",
}),
__GLOBAL_SCOPE__: JSON.stringify(true),
},
})
.then((context) => {
Expand Down
Loading
Loading