⚡️(frontend) lib-video live transpiling #2150

AntoLC · 2023-03-24T13:28:09Z

Purpose

Only for lib_video for the moment.

Improve development process by not having to rebuild our packages after a change.
We will listen our packages from our applications and transpile automatically when a change happen.

Proposal

package marsha-config to mutualize and organize our configs (tsconfig , packages, config...)
package eslint-config-marsha to manage our linter
use Craco to customize the create-react-app configuration without ejecting the app
adapt lib_video with the new setup
remove rollup from lib-video
plug lib_video to standalone
plug lib_video to LTI

kernicPanel

I didn't try to run it yet, but seems great !

Just a comment about filenames in src/frontend/packages/marsha-config/tsconfig/
Maybe we could use those:

app.json -> tsc_apps.json
base.json -> tsc_base.json
react-library.json -> tsc_packages.json

With something like that, we would be closer to our directory names.
WDYT ?

AntoLC · 2023-03-29T08:50:58Z

Some fixup about what we said during the daily (renaming tsconfig files, lint order between eslint and tsc --noEmit).

AntoLC · 2023-03-29T09:09:40Z

src/frontend/packages/marsha-config/tsconfig/tsc-apps.json

+        "../../../packages/lib_video/src/*",
+        "../../packages/lib_video/src/*"


I forgot to talk about that, we have to double our path in this way, because we have 2 perspectives the standalone one and the LTI one, in the lti tsconfig the baseUrl is at the root ".", while in the standalone the baseUrl is at ./src, so the relative import are different depend the app.

lunika · 2023-03-29T09:00:42Z

src/frontend/apps/standalone_site/craco.config.js

+  moduleNameMapper,
+} = require('marsha-config');
+
+module.exports = {


Can you explain with a comment what you are modifying here from the original webpack config in the create-react-app package ?

lunika · 2023-03-29T09:01:42Z

src/frontend/apps/standalone_site/package.json

    "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
    "lint:fix": "yarn run lint -- --fix",


This should not be working anymore I think.

The lint command is ok, but not lint:fix anymore, because it resolves as eslint src/**/*.{ts,tsx} && tsc --noEmit -- --fix
Besides, tsc seems quicker than eslint, so I think we should keep it in the same order than before.

Ok, I rolled back so: 340a31b

lunika · 2023-03-29T09:02:32Z

src/frontend/apps/standalone_site/package.json

    "postbuild": "./postbuild.sh",
-    "test": "cross-env CI=true TZ=UTC react-scripts test",
+    "test": "cross-env CI=true TZ=UTC craco test",
    "eject": "react-scripts eject",


Do we keep this command ? We know it exists and we are working on how to not eject the project.

lunika · 2023-03-29T09:05:00Z

src/frontend/packages/eslint-config-marsha/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "eslint-config-marsha",
+  "version": "0.0.0",


we should use the same version used in all other packages.

921e29c
7a2558a

lunika · 2023-03-29T09:10:15Z

src/frontend/packages/lib_video/package.json

-    "lint": "eslint src/**/*.{ts,tsx}",
-    "lint:fix": "yarn run lint -- --fix",
+    "lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
+    "lint:fix": "yarn run lint --fix",


Same here, this should not be working anymore

kernicPanel

This package is used to share config files between our frontend apps and packages. tsconfig: - base.json: base tsconfig file used by all frontend packages - app.json: tsconfig file used by our frontend apps - react-library.json: tsconfig file used by our frontend packages You can still overide your configuration inside the tsconfig.json file in your app directory.

Craco is a tool that allows to customize the create-react-app configuration without ejecting the app. We will be able to listen our different packages to tranpile on the fly.

Plug the new tsconfig to lib_video, to externalize and mutualize the typescript configuration.

- add lib_video package in the standalone site - plug it with craco and webpack to have the automatic transpilation, a change in the lib_video package will be automatically transpiled and available in the standalone site.

By including lib-video in the standalone webpack, we got relative imports problems coming from lib-video, it is because the relative import are from the standalone perspective. This commit fixes this issue by using the `@lib-video` alias.

- genere routes packages for webpack - genere aliases for webpack - genere moduleNameMapper for jest

We don't need to build lib_video anymore, it is transpile during the apps build. - review dependencies packages about lib-video - 🔥 all build relative dependencies from lib_video - 🔥 rollup.config.mjs from lib_video - adapt CI config and frontend package

To share our eslint configuration with other projects, we created eslint-config-marsha package. This package contains our eslint configuration and all the dependencies needed to run it.

- add lib_video package in the LTI with live transpilation - update the tsconfig.json to use the one in marsha-config - update the webpack.config.js to add the alias of lib_video - update the app.json in marsha-config to fit LTI hierarchy, LTI doesn't use a src folder - remove not used libs

Added - standalone website: - Integrate VOD dashboard (#2086) - List the lives in the contents section (#2104) - Live session model - Livesession backend rewrite - Add sentry - Create a live from the website (#2134) - Integrate webinar dashboard (#2135) - Add a License Manager widget for LTI VOD view - Add a title to the classroom file dropzone - Add can_edit property on a serialized video - Add an attribute to consumer site to deactivate resources in LTI select - live transpilation on lib-video (#2150) - live transpilation on lib-classroom (#2157) - live transpilation on lib-markdown (#2160) - live transpilation on lib-components (#2161) - live transpilation on lib-tests (#2163) - live transpilation on lib-common (#2164) - Add a widget provider for the classroom creation form - Allow delete playlist resources - FileDepository - Classroom - Document - Markdown - Allow delete playlist - add routes related URL: - thumbnails - timed_text_track - shared_live_media - Add classroom widgets : - InfoBar - Description - Scheduling - Invite links - Support sharing - Recordings - Add classroom invite link for an instructor - Add a "Tools & Applications" widget for classrooms Changed - Update live sessions API to use nested video ID route - Move generic widget components from lib-video to lib-components - Make video dashboard collapsed by default - improve the dropdown languages positionning in the dashboard (#2138) - Make video dashboard visible by default, and collapsed when using the Moodle atto plugin - Update live_session api to use mixin to prevent url crafting - standalone website: - put the creating ressource form submit button disabled when the form is invalid (#2175) Fixed - redirect to error page when VOD is deleted - Manage disconnection when multiple tabs were open on standalone site - synchronisation between pages for the VOD description widget - tooltip position on the website context dashboard (#2136) - thumbnail not reset correctly on the video player (#2137) - display title / description when a classroom is not scheduled and not started - correctly fetch transcript content in TranscriptReader - remove unused 'initiate-live' permissions - increase debounce time in classroom description widget - remove id3 tags upload when live channel is not ready - add an invitation link for moderators in a launched classroom if available

AntoLC added improvement feature dependencies Pull requests that update a dependency file Frontend labels Mar 24, 2023

AntoLC self-assigned this Mar 24, 2023

AntoLC force-pushed the feature/anthony/transpile-on-the-fly branch 10 times, most recently from fbc3ddf to d30e4c9 Compare March 28, 2023 13:28

AntoLC added the critical label Mar 28, 2023

AntoLC force-pushed the feature/anthony/transpile-on-the-fly branch 2 times, most recently from dad89f7 to fb4f252 Compare March 28, 2023 14:28

AntoLC requested review from lunika and kernicPanel March 28, 2023 14:41

AntoLC marked this pull request as ready for review March 28, 2023 15:19

kernicPanel reviewed Mar 28, 2023

View reviewed changes

AntoLC force-pushed the feature/anthony/transpile-on-the-fly branch 2 times, most recently from c8d0372 to f22f0ca Compare March 29, 2023 08:48

AntoLC commented Mar 29, 2023

View reviewed changes

lunika reviewed Mar 29, 2023

View reviewed changes

kernicPanel approved these changes Mar 29, 2023

View reviewed changes

AntoLC requested a review from lunika March 29, 2023 10:49

lunika approved these changes Mar 29, 2023

View reviewed changes

AntoLC added 6 commits March 29, 2023 15:05

➕(website) add craco dependency to standalone_site

5684c30

Craco is a tool that allows to customize the create-react-app configuration without ejecting the app. We will be able to listen our different packages to tranpile on the fly.

🔧(lib-video) plug new tsconfig to lib_video

6578b90

Plug the new tsconfig to lib_video, to externalize and mutualize the typescript configuration.

⚡️(frontend) add lib-video in the standalone site

2ef1d90

- add lib_video package in the standalone site - plug it with craco and webpack to have the automatic transpilation, a change in the lib_video package will be automatically transpiled and available in the standalone site.

🎨(marsha-config) add helper to share config packages informations

9a65000

- genere routes packages for webpack - genere aliases for webpack - genere moduleNameMapper for jest

AntoLC force-pushed the feature/anthony/transpile-on-the-fly branch from 720185d to 39bfcf4 Compare March 29, 2023 13:41

AntoLC enabled auto-merge (rebase) March 29, 2023 13:48

AntoLC added 3 commits March 29, 2023 16:06

🎨(frontend) create eslint-config-marsha package

c86e553

To share our eslint configuration with other projects, we created eslint-config-marsha package. This package contains our eslint configuration and all the dependencies needed to run it.

AntoLC force-pushed the feature/anthony/transpile-on-the-fly branch from 39bfcf4 to 1f5b033 Compare March 29, 2023 14:07

AntoLC merged commit 062254d into master Mar 29, 2023

AntoLC deleted the feature/anthony/transpile-on-the-fly branch March 29, 2023 15:33

lunika mentioned this pull request Apr 19, 2023

🔖(beta) bump release to 4.0.0-beta.19 #2196

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

⚡️(frontend) lib-video live transpiling #2150

⚡️(frontend) lib-video live transpiling #2150

AntoLC commented Mar 24, 2023 •

edited

Loading

kernicPanel left a comment

AntoLC commented Mar 29, 2023 •

edited

Loading

AntoLC Mar 29, 2023 •

edited

Loading

lunika Mar 29, 2023

AntoLC Mar 29, 2023

lunika Mar 29, 2023

kernicPanel Mar 29, 2023

AntoLC Mar 29, 2023

lunika Mar 29, 2023

AntoLC Mar 29, 2023

lunika Mar 29, 2023

AntoLC Mar 29, 2023

lunika Mar 29, 2023

AntoLC Mar 29, 2023

kernicPanel left a comment

		"../../../packages/lib_video/src/*",
		"../../packages/lib_video/src/*"

⚡️(frontend) lib-video live transpiling #2150

⚡️(frontend) lib-video live transpiling #2150

Conversation

AntoLC commented Mar 24, 2023 • edited Loading

Purpose

Proposal

kernicPanel left a comment

Choose a reason for hiding this comment

AntoLC commented Mar 29, 2023 • edited Loading

AntoLC Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kernicPanel left a comment

Choose a reason for hiding this comment

AntoLC commented Mar 24, 2023 •

edited

Loading

AntoLC commented Mar 29, 2023 •

edited

Loading

AntoLC Mar 29, 2023 •

edited

Loading