Add twoslash to docs & migrate contents

packages/docs/docs/absolute-fill.md

@@ -6,12 +6,14 @@ title: <AbsoluteFill />
 A helper component - it is an absolutely positioned `<div>` with the following styles:
 
 ```css
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-width: 100%;
-height: 100%;
-display: flex;
-flex-direction: column;
+.absolute-fill {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 ```

packages/docs/docs/animating-properties.md

@@ -8,7 +8,9 @@ Let's start with a simple example, let's say we want to create a fade in animati
 
 If we want to fade the text in over 20 frames, we need to gradually change the `opacity` style over time so that it goes from 0 to 1.
 
-```tsx {4,11}
+```tsx twoslash {3, 10}
+import { useCurrentFrame } from "remotion"
+// ---cut---
 export const MyVideo = () => {
   const frame = useCurrentFrame();
 
@@ -37,7 +39,7 @@ The function takes 4 arguments:
 3. The range of values that you want to map the input to
 4. Optional settings
 
-```tsx {6,13}
+```tsx twoslash {5, 12}
 import {useCurrentFrame, interpolate} from 'remotion';
 
 export const MyVideo = () => {
@@ -64,7 +66,7 @@ In this example, we map the frames 0 to 20 to their opacity values `(0, 0.05, 0.
 
 Spring animations are beautiful way to put things into motion and make them natural. Remotion includes a helper function to make spring animations easy! This time, let's animate the scale of the text.
 
-```tsx {7,20}
+```tsx twoslash {6-11, 19}
 import {useCurrentFrame, useVideoConfig, spring} from 'remotion';
 
 export const MyVideo = () => {

packages/docs/docs/audio-visualization.md

@@ -23,7 +23,7 @@ Using the [`visualizeAudio()`](/docs/visualize-audio) API, you can get an audio
 
 Refer to the documentation of the above mentioned functions to learn more.
 
-```tsx
+```tsx twoslash
 import {useCurrentFrame, useVideoConfig, Audio} from 'remotion';
 import {useAudioData, visualizeAudio} from '@remotion/media-utils';
 import music from './music.mp3';

packages/docs/docs/audio.md

@@ -17,7 +17,7 @@ The component also accepts a `volume` props which allows you to control the volu
 
 `<Audio>` has two more helper props: `startFrom` and `endAt` for defining the start frame and end frame. Both are optional and do not get forwarded to the native `<audio>` element but tell Remotion which portion of the audio should be included.
 
-```tsx
+```tsx twoslash
 import {Audio} from 'remotion';
 import audio from './audio.mp3'
 

packages/docs/docs/bundle.md

@@ -29,7 +29,7 @@ A `string` containing an absolute path of the entry point of a Remotion project.
 
 A callback function that notifies about the progress of the Webpack bundling. Example function:
 
-```ts
+```ts twoslash
 const onProgressUpdate = (progress: number) => {
   console.log(`Webpack bundling progress: ${progress * 100}%`)
 }
@@ -45,7 +45,9 @@ _optional_
 
 A function to override the webpack config reducer-style. Takes a function which gives you the current webpack config which you can transform and return a modified version of it. For example:
 
-```ts
+```ts twoslash
+import {WebpackOverrideFn} from "remotion";
+// ---cut---
 const webpackOverride: WebpackOverrideFn = (webpackConfig) => {
   return {
     ...webpackConfig

packages/docs/docs/composition.md

@@ -39,7 +39,14 @@ Type your components using the `React.FC<{}>` type and the `defaultProps` prop w
 
 ## Example using `component`
 
-```tsx
+```tsx twoslash
+// @allowUmdGlobalAccess
+// @filename: ./MyComp.tsx
+export const MyComp = () => <></>
+
+// @filename: index.tsx
+// ---cut---
+import {Composition} from 'remotion';
 import {MyComp} from './MyComp';
 
 export const MyVideo = () => {

packages/docs/docs/config.mdx

@@ -9,10 +9,10 @@ These options will apply to CLI commands such as `npm start` and `npm run build`
 
 You can control several behaviors of Remotion here.
 
-```tsx
+```ts twoslash
 import {Config} from 'remotion';
 
-Config.Rendering.Concurrency(8);
+Config.Rendering.setConcurrency(8);
 Config.Output.setPixelFormat('yuv444p');
 Config.Output.setCodec('h265');
 ```
@@ -25,9 +25,15 @@ _Available from Version 1.1._
 
 Allows you to insert your custom Webpack config. [See the page about custom Webpack configs](/docs/webpack) for more information.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
   // Return a new Webpack configuration
+  return {
+    ...currentConfiguration,
+    // new configuration
+  };
 });
 ```
 
@@ -37,7 +43,9 @@ _Available from Version 2.0._
 
 Enable or disable webpack caching. Default is `true` which will make the Webpack step in the first run a bit slower but will massively speed up subsequent runs. We recommend to keep this option enabled in all cases and encourage to report issues on Github if you encounter some.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Bundling.setCachingEnabled(false);
 ```
 
@@ -49,7 +57,9 @@ Define on which port Remotion should start it's HTTP servers during preview and
 By default, Remotion will try to find a free port.
 If you specify a port, but it's not available, Remotion will throw an error.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Bundling.setPort(3003);
 ```
 
@@ -69,7 +79,9 @@ Acceptable values:
 - `info` (_default_): Default output - besides errors and warnings, prints progress and output location.
 - `verbose`: All of the above, plus browser logs and other debug info.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Log.setLevel('verbose');
 ```
 
@@ -83,7 +95,9 @@ _Available from Version 2.1.10._
 
 Set how many tracks are being displayed in the timeline at most. This does not affect your video, just the amount of tracks shown when previewing. Default `15`.
 
-```ts
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Preview.setMaxTimelineTracks(20);
 ```
 
@@ -95,7 +109,9 @@ _Available from Version 1.5._
 
 Set a custom Chrome or Chromium executable path. By default Remotion will try to find an existing version of Chrome on your system and if not found, it will download one. This flag is useful if you don't have Chrome installed in a standard location and you want to prevent downloading an additional browser or need [support for the H264 codec](/docs/video#codec-support).
 
-```ts
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Puppeteer.setBrowserExecutable('/usr/bin/google-chrome-stable');
 ```
 
@@ -108,7 +124,9 @@ The [command line flag](/docs/cli#--browser-executable) `--browser-executable` w
 Sets how many Puppeteer instances will work on rendering your video in parallel.
 Default: `null`, meaning **half of the threads** available on your CPU.
 
-```ts
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setConcurrency(8)
 ```
 
@@ -128,7 +146,9 @@ Determines which in which image format to render the frames. Either:
 - `png` - slower, but supports transparency
 - `none` - don't render images, just calculate audio information (available from v2.0)
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setImageFormat('png')
 ```
 
@@ -140,13 +160,17 @@ _Available from Version 2.0._
 
 Pass a number to render a still frame or a tuple to render a subset of a video. The frame sequence is zero-indexed.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setFrameRange(90); // To render only the 91st frame
 ```
 
 or
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setFrameRange([0, 20]); // Render a video only containing the first 21 frames
 ```
 
@@ -156,7 +180,9 @@ The [command line flag](/docs/cli#--frames) `--frames` will take precedence over
 
 The JPEG quality of each frame. Must be a number between 0 and 100. Will not work if you render PNG frames. [Default: 80](https://github.com/chromium/chromium/blob/99314be8152e688bafbbf9a615536bdbb289ea87/headless/lib/browser/protocol/headless_handler.cc#L32).
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setQuality(90);
 ```
 
@@ -166,7 +192,9 @@ The [command line flag](/docs/cli#--quality) `--quality` will take precedence ov
 
 Set a custom location for a [`.env`](https://www.npmjs.com/package/dotenv) file. You can specify an absolute path or a relative path in which case it gets resolved based on the current working directory.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Rendering.setDotEnvLocation('.my-env')
 ```
 
@@ -178,7 +206,9 @@ The [command line flag](/docs/cli#--env-file) `--env-file` will take precedence
 
 Set this to `false` to prevent overwriting Remotion outputs when they already exists.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setOverwriteOutput(false)
 ```
 
@@ -193,7 +223,9 @@ In version 1.x, the default behavior was inverse - Remotion would not override b
 Controls the pixel format in FFMPEG. [Read more about it here.](https://trac.ffmpeg.org/wiki/Chroma%20Subsampling) Acceptable values: `yuv420p`, `yuv422p`, `yuv444p`, `yuv420p10le`, `yuv422p10le`, `yuv444p10le`. Since v1.4, `yuva420p` is also supported for transparent WebM videos. Since v2.1.7, `yuva444p10le` is also supported for transparent ProRes videos
 Default value: `yuv420p`
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setPixelFormat('yuv420p')
 ```
 
@@ -215,7 +247,9 @@ Choose one of the supported codecs: `h264` _(default)_, `h265`, `vp8`, `vp9`.
 - `aac` will export audio only as an AAC file _(available from v2.0)_
 - `mkv` will export using H264 codec, MKV container format and WAV audio codec. _(available from v2.1.12)_
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setCodec('h265');
 ```
 
@@ -232,7 +266,9 @@ Possible values: `4444-xq`, `4444`, `hq`, `standard`, `light`, `proxy`.
 See [here](https://video.stackexchange.com/a/14715) for explanation of possible values.
 Default: `hq`
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setProResProfile('4444');
 ```
 
@@ -246,7 +282,9 @@ _Available from Version 1.4._
 
 Set to true if you want to output an image sequence instead of a video.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setImageSequence(true);
 ```
 
@@ -258,7 +296,9 @@ _Deprecated_. Use `setCodec()` and `setImageSequence()` instead.
 
 Either `'mp4'` or `'png-sequence'`.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setOutputFormat('mp4');
 ```
 
@@ -285,7 +325,9 @@ The range is exponential, so increasing the CRF value +6 results in roughly half
 
 Choose the highest CRF value that still provides an acceptable quality. If the output looks good, then try a higher value. If it looks bad, choose a lower value.
 
-```tsx
+```ts twoslash
+import {Config} from 'remotion';
+// ---cut---
 Config.Output.setCrf(16);
 ```
 

packages/docs/docs/data-fetching.md

@@ -9,11 +9,10 @@ One of the most groundbreaking things about Remotion is that you can fetch data
 
 There are two functions, [`delayRender`](/docs/delay-render) and [`continueRender`](/docs/continue-render), which you can use to tell Remotion to not yet render the frame. If you want to asynchronously render a frame, you should call `delayRender()` as soon as possible, before the window `onload` event is fired. The function returns a handle that you need to give Remotion the green light to render later using `continueRender()`.
 
-```tsx
+```tsx twoslash
 import {useEffect, useState} from 'react';
 import {continueRender, delayRender} from 'remotion';
 
-
 export const MyVideo = () => {
   const [data, setData] = useState(null);
   const [handle] = useState(() => delayRender());

packages/docs/docs/delay-render.md

@@ -22,7 +22,7 @@ This method is useful if you for example want to call an API to fetch data befor
 
 ## Example
 
-```tsx
+```tsx twoslash
 import {useEffect, useState} from 'react';
 import {continueRender, delayRender} from 'remotion';