Conversation
|
|
||
| import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player'; | ||
| // @ts-ignore | ||
| import YoutubePlaylist from '@webteam/youtube-playlist/lib'; |
There was a problem hiding this comment.
I don't know why, but types resolve doesn't work with it.
| if (useFallbackForInternalPackages) { | ||
| config.resolve.alias['@webteam'] = path.resolve( | ||
| __dirname, | ||
| 'components/webteam-fallback' | ||
| ); | ||
| } |
There was a problem hiding this comment.
this is the place, where all the magic happens.
We just resolve another module in case the env variable is set.
7d83a28 to
0bcb6dd
Compare
| import React, { FC } from 'react'; | ||
|
|
||
| import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player'; | ||
|
|
||
| interface YoutubePlaylistProps { | ||
| playlistId: string; | ||
| playlistTitle: string; | ||
| } | ||
|
|
||
| const YoutubePlaylist: FC<YoutubePlaylistProps> = ({ playlistId, playlistTitle }) => { | ||
| return ( | ||
| <YoutubePlayer | ||
| mode={1} | ||
| id={playlistId} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default YoutubePlaylist; |
There was a problem hiding this comment.
Fallback component.
Initially I wanted to use a very simple one, only with a text, but then decided to use the player.
Not sure that this is needed.
ce4d1cd to
5a21005
Compare
| transpiledPackages.push( | ||
| '@webteam/youtube-playlist', | ||
| '@webteam/ui-contexts', | ||
| '@webteam/colors', | ||
| '@webteam/toggle', | ||
| '@webteam/youtube-player', | ||
| '@webteam/use-fetch', | ||
| '@webteam/use-async-data', | ||
| '@webteam/bem-cn-fast', | ||
| '@webteam/list' | ||
| ) | ||
| } |
There was a problem hiding this comment.
This is not a workaround, it is expected to be here, we do the same with the RescUI components above.
5605eb4 to
3e899b8
Compare
3e899b8 to
1f926a0
Compare
| ) | ||
| } | ||
|
|
||
| const withTranspile = nextTranspileModules(transpiledPackages); |
There was a problem hiding this comment.
We can probably keep it for now, but I found out that next-transpile-modules is deprecated see https://github.com/martpie/next-transpile-modules/releases/tag/the-end
https://youtrack.jetbrains.com/issue/KTL-2944/Add-webteam-youtube-playlist
How does it work
By default WEBTEAM_UI_NPM_TOKEN is expected.
External users can set
export USE_FALLBACK_FOR_INTERNAL_PACKAGES=1to install dependencies and run the website locally.In this case, a fallback UI component will be used.
How we can use webteam-ui
No limits, we just need to to the following things:
transpiledPackagessection in the next.js config.