Merge pull request #4815 from remotion-dev/easier-docs

packages/docs/blog/2021-08-11-remotion-2-3.mdx

@@ -17,7 +17,7 @@ So far we focused on streamlining the workflow for making videos. While it was a
 [This new component](/docs/still) is the same as [`<Composition />`](/docs/composition) but is meant for defining a compositions that output a still image. Since it's already implied, you don't have to define the `fps` and `durationInFrames` properties.
 
 ```tsx twoslash
-import { Still } from "remotion";
+import {Still} from 'remotion';
 const Thumbnail: React.FC = () => null;
 // ---cut---
 <Still
@@ -26,9 +26,9 @@ const Thumbnail: React.FC = () => null;
   width={1200}
   height={627}
   defaultProps={{
-    title: "Welcome to Remotion",
-    description: "Edit Video.tsx to change template",
-    slogan: "Write videos\nin React",
+    title: 'Welcome to Remotion',
+    description: 'Edit Video.tsx to change template',
+    slogan: 'Write videos\nin React',
   }}
 />;
 ```
@@ -38,14 +38,16 @@ const Thumbnail: React.FC = () => null;
 There are now icons in the sidebar for compositions, and those who are stills have an image icon.
 
 <p align="center">
-  <img style={{maxWidth: 300}} src="/img/still-thumbnail.png"/> <br/>
-  <em><sub>Now still images (compositions with a duration of 1 frame) are marked with a special icon.</sub></em>
+  <img style={{maxWidth: 300}} src="/img/still-thumbnail.png" /> <br />
+  <em>
+    <sub>Now still images (compositions with a duration of 1 frame) are marked with a special icon.</sub>
+  </em>
 </p>
 
 For still images, you don't need the timeline, so it will hide itself and give you a bigger canvas.
 
 <p align="center">
-  <img style={{maxWidth: 600}} src="/img/notimeline.png"/> <br/>
+  <img style={{maxWidth: 600}} src="/img/notimeline.png" /> <br />
 </p>
 
 ## New `remotion still` command
@@ -61,21 +63,19 @@ npx remotion still --props='{"custom": "data"}'  my-comp out.png
 If you render using the Node.JS APIs, we have a new equivalent API for rendering stills as well.
 
 ```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { bundle } from "@remotion/bundler";
-import { getCompositions, renderStill } from "@remotion/renderer";
+import {bundle} from '@remotion/bundler';
+import {getCompositions, renderStill} from '@remotion/renderer';
 
 // The composition you want to render
-const compositionId = "HelloWorld";
+const compositionId = 'HelloWorld';
 
 const bundleLocation = await bundle({
-  entryPoint: require.resolve("./src/index.ts"),
+  entryPoint: require.resolve('./src/index.ts'),
 });
 
 const comps = await getCompositions(bundleLocation, {
   inputProps: {
-    custom: "data",
+    custom: 'data',
   },
 });
 const composition = comps.find((c) => c.id === compositionId);
@@ -89,9 +89,9 @@ if (!composition) {
 await renderStill({
   composition,
   serveUrl: bundleLocation,
-  output: "/tmp/still.png",
+  output: '/tmp/still.png',
   inputProps: {
-    custom: "data",
+    custom: 'data',
   },
 });
 ```
@@ -115,7 +115,7 @@ We are also working on getting still image rendering working in a serverless env
 When creating a new video, you now get to choose between different templates, that give you a great starting point for your usecase.
 
 <p align="center">
-  <img style={{maxWidth: 600}} src="/img/yarncreatetemplate.png"/> <br/>
+  <img style={{maxWidth: 600}} src="/img/yarncreatetemplate.png" /> <br />
 </p>
 
 In addition to the default template and the previously announced Three.JS template, there now is also a plain-JS template, a text-to-speech template and the above mentioned Stills template.

packages/docs/docs/4-0-migration.mdx

@@ -2,7 +2,7 @@
 image: /generated/articles-docs-4-0-migration.png
 id: 4-0-migration
 title: v4.0 Migration
-crumb: "Version Upgrade"
+crumb: 'Version Upgrade'
 ---
 
 When upgrading from Remotion 3 to Remotion 4, note the following changes and apply them to your project.
@@ -157,14 +157,9 @@ The [@remotion/renderer](/docs/renderer) `ImageFormat` Type got replaced by the
 - `getParts()` has been removed. Use [`getSubpaths()`](/docs/paths/get-subpaths) instead:
 
 ```tsx twoslash title="paths.ts"
-import {
-  getLength,
-  getPointAtLength,
-  getSubpaths,
-  getTangentAtLength,
-} from "@remotion/paths";
-
-const path = "M 0 0 L 100 100";
+import {getLength, getPointAtLength, getSubpaths, getTangentAtLength} from '@remotion/paths';
+
+const path = 'M 0 0 L 100 100';
 const parts = getSubpaths(path[0]);
 const length = getLength(parts[0]);
 const start = getPointAtLength(parts[0], 0);
@@ -205,15 +200,15 @@ Previously you were able to set a value for `crf` when rendering a GIF. This was
 Previously, [`staticFile()`](/docs/staticfile) did not handle URI-unsafe characters contained in the provided path:
 
 ```tsx title="Before v4"
-staticFile("my-image#portrait.png"); //output: "my-image#portrait.png"
+staticFile('my-image#portrait.png'); //output: "my-image#portrait.png"
 ```
 
 This could lead to problems, when unsafe characters such as `#`, `?` and `&` were part of the filename.
 
 Now, [`staticFile()`](/docs/staticfile) encodes the filename using `encodeURIComponent`:
 
 ```tsx title="Since v4.0.0"
-staticFile("my-image#portrait.png"); // "my-image%23portrait.png"
+staticFile('my-image#portrait.png'); // "my-image%23portrait.png"
 ```
 
 ## Type `WebpackOverrideFn` moved
@@ -230,7 +225,7 @@ Remotion no longer aliases `react-native` automatically to `react-native-web`.
 If you are using `react-native-web`, override the Webpack config like this to restore the previous behavior:
 
 ```ts twoslash title="remotion.config.ts"
-import { Config } from "@remotion/cli/config";
+import {Config} from '@remotion/cli/config';
 
 Config.overrideWebpackConfig((config) => {
   return {
@@ -239,7 +234,7 @@ Config.overrideWebpackConfig((config) => {
       ...config.resolve,
       alias: {
         ...config.resolve?.alias,
-        "react-native$": "react-native-web",
+        'react-native$': 'react-native-web',
       },
     },
   };
@@ -259,7 +254,7 @@ export type TComposition<Schema extends AnyZodObject, Props> = {};
 If you need a type for a generic composition, you can use the new `AnyComposition` type:
 
 ```ts
-import { AnyComposition } from "remotion";
+import {AnyComposition} from 'remotion';
 
 const composition: AnyComposition = {
   width: 1920,
@@ -293,13 +288,7 @@ const Hi = (props: MyProps) => {
   return <div>{props.title}</div>;
 };
 
-<Still
-  component={Hi}
-  id="interface-props"
-  defaultProps={{ title: "hi" }}
-  height={1080}
-  width={1080}
-/>;
+<Still component={Hi} id="interface-props" defaultProps={{title: 'hi'}} height={1080} width={1080} />;
 ```
 
 This is because props must now be an object and satisfy the shape `Record<string, unknown>`.  
@@ -322,22 +311,19 @@ If you register a composition with a component that requires some props, you now
 [`renderMedia()`](/docs/renderer/render-media) accepts a `VideoConfig` object for the `composition` option, which now has a `props` field:
 
 ```tsx twoslash {5-7}
-// @module: esnext
-// @target: es2022
-
-import { renderMedia } from "@remotion/renderer";
+import {renderMedia} from '@remotion/renderer';
 
 const options = {
-  codec: "h264",
-  serveUrl: "https://example.com",
+  codec: 'h264',
+  serveUrl: 'https://example.com',
 } as const;
 
 const composition = {
   width: 1920,
   height: 1080,
   fps: 30,
   durationInFrames: 30 * 5,
-  id: "comp-name",
+  id: 'comp-name',
   defaultProps: {},
   defaultCodec: null,
 } as const;
@@ -348,11 +334,11 @@ await renderMedia({
   composition: {
     ...composition,
     props: {
-      title: "Hello world",
+      title: 'Hello world',
     },
   },
   inputProps: {
-    title: "Hi there",
+    title: 'Hi there',
   },
 });
 ```

packages/docs/docs/artifacts.mdx

@@ -36,27 +36,18 @@ import {generateSubtitles} from './subtitles';
 
 export const MyComp: React.FC = () => {
   const frame = useCurrentFrame();
-  return (
-    <>
-      {frame === 0 ? (
-        <Artifact filename="captions.srt" content={generateSubtitles()} />
-      ) : null}
-    </>
-  );
+  return <>{frame === 0 ? <Artifact filename="captions.srt" content={generateSubtitles()} /> : null}</>;
 };
 ```
 
 ## Rules of artifacts
 
-<Step>1</Step> The asset should only be rendered for one single frame of the video.
-Otherwise, the asset will get emitted multiple times. <br />
+<Step>1</Step> The asset should only be rendered for one single frame of the video. Otherwise, the asset will get emitted multiple times. <br />
 
-<Step>2</Step> It is possible to emit multiple assets, but they may not have the
-same filename.<br/>
+<Step>2</Step> It is possible to emit multiple assets, but they may not have the same filename.
+<br />
 
-<Step>3</Step> For the <code>content</code> prop it is possible to pass a <code>string</code>, or a <code>Uint8Array</code> for binary data. Passing an <code>
-  Uint8Array
-</code> should not be considered faster due to it having to be serialized.
+<Step>3</Step> For the <code>content</code> prop it is possible to pass a <code>string</code>, or a <code>Uint8Array</code> for binary data. Passing an <code>Uint8Array</code> should not be considered faster due to it having to be serialized.
 <br />
 
 ## Receiving artifacts
@@ -70,8 +61,6 @@ Artifacts get saved to `out/[composition-id]/[filename]` when rendering a video.
 Use the [`onArtifact`](/docs/renderer/render-media#onartifact) callback to receive the artifacts.
 
 ```tsx twoslash title="render.mjs"
-// @module: es2022
-// @target: es2017
 import type {VideoConfig} from 'remotion';
 
 const composition: VideoConfig = {
@@ -122,8 +111,6 @@ When using [`renderMediaOnLambda()`](/docs/lambda/rendermediaonlambda), artifact
 You can obtain a list of currently received assets from [`getRenderProgress()`](/docs/lambda/getrenderprogress#artifacts).
 
 ```tsx twoslash title="progress.ts"
-// @module: es2022
-// @target: es2017
 import {getRenderProgress} from '@remotion/lambda/client';
 
 const renderProgress = await getRenderProgress({
@@ -157,8 +144,6 @@ const imageFormat = 'png' as const;
 const region = 'eu-central-1' as const;
 
 // ---cut---
-// @module: es2022
-// @target: es2017
 import {renderStillOnLambda} from '@remotion/lambda/client';
 
 const stillResponse = await renderStillOnLambda({

packages/docs/docs/bundle.mdx

@@ -2,7 +2,7 @@
 image: /generated/articles-docs-bundle.png
 id: bundle
 title: bundle()
-crumb: "@remotion/bundler"
+crumb: '@remotion/bundler'
 ---
 
 _Part of the `@remotion/bundler` package._
@@ -17,13 +17,11 @@ Calling `bundle()` for every video that you render is an anti-pattern.
 ## Example
 
 ```tsx twoslash title="render.mjs"
-import path from "path";
-// @module: ESNext
-// @target: ESNext
-import { bundle } from "@remotion/bundler";
+import path from 'path';
+import {bundle} from '@remotion/bundler';
 
 const serveUrl = await bundle({
-  entryPoint: path.join(process.cwd(), "./src/index.ts"),
+  entryPoint: path.join(process.cwd(), './src/index.ts'),
   // If you have a webpack override in remotion.config.ts, pass it here as well.
   webpackOverride: (config) => config,
 });
@@ -52,7 +50,7 @@ _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 twoslash
-import { WebpackOverrideFn } from "@remotion/bundler";
+import {WebpackOverrideFn} from '@remotion/bundler';
 // ---cut---
 const webpackOverride: WebpackOverrideFn = (webpackConfig) => {
   return {
@@ -128,7 +126,7 @@ const bundle: (
 Example:
 
 ```ts
-await bundle("src/index.ts", () => console.log(progress * 100 + "% done"), {
+await bundle('src/index.ts', () => console.log(progress * 100 + '% done'), {
   webpackOverride,
 });
 ```

packages/docs/docs/cloudrun/deleteservice.mdx

@@ -3,11 +3,13 @@ image: /generated/articles-docs-cloudrun-deleteservice.png
 id: deleteservice
 title: deleteService()
 slug: /cloudrun/deleteservice
-crumb: "Cloud Run API"
+crumb: 'Cloud Run API'
 ---
 
 <ExperimentalBadge>
-<p>Cloud Run is in <a href="/docs/cloudrun-alpha">Alpha</a>, which means APIs may change in any version and documentation is not yet finished. See the <a href="https://remotion.dev/changelog">changelog to stay up to date with breaking changes</a>.</p>
+  <p>
+    Cloud Run is in <a href="/docs/cloudrun-alpha">Alpha</a>, which means APIs may change in any version and documentation is not yet finished. See the <a href="https://remotion.dev/changelog">changelog to stay up to date with breaking changes</a>.
+  </p>
 </ExperimentalBadge>
 
 Deletes a deployed Cloud Run service based on its name.
@@ -17,18 +19,15 @@ To retrieve a list of services, call [`getServices()`](/docs/cloudrun/getservice
 ## Example
 
 ```ts twoslash
-// @module: esnext
-// @target: es2017
-
-import { deleteService, getServices } from "@remotion/cloudrun";
+import {deleteService, getServices} from '@remotion/cloudrun';
 
 const services = await getServices({
-  region: "us-east1",
+  region: 'us-east1',
   compatibleOnly: false,
 });
 for (const service of services) {
   await deleteService({
-    region: "us-east1",
+    region: 'us-east1',
     serviceName: service.serviceName,
   });
 }

packages/docs/docs/cloudrun/deletesite.mdx

@@ -3,11 +3,13 @@ image: /generated/articles-docs-cloudrun-deletesite.png
 id: deletesite
 title: deleteSite()
 slug: /cloudrun/deletesite
-crumb: "Cloud Run API"
+crumb: 'Cloud Run API'
 ---
 
 <ExperimentalBadge>
-<p>Cloud Run is in <a href="/docs/cloudrun-alpha">Alpha</a>, which means APIs may change in any version and documentation is not yet finished. See the <a href="https://remotion.dev/changelog">changelog to stay up to date with breaking changes</a>.</p>
+  <p>
+    Cloud Run is in <a href="/docs/cloudrun-alpha">Alpha</a>, which means APIs may change in any version and documentation is not yet finished. See the <a href="https://remotion.dev/changelog">changelog to stay up to date with breaking changes</a>.
+  </p>
 </ExperimentalBadge>
 
 Removes a Remotion project from your Cloud Storage bucket.
@@ -19,13 +21,11 @@ Each project is located in the `sites/` subdirectory of your Cloud Storage bucke
 Gets all sites and deletes them.
 
 ```ts twoslash
-// @module: ESNext
-// @target: ESNext
-import { GcpRegion, deleteSite, getSites } from "@remotion/cloudrun";
+import {GcpRegion, deleteSite, getSites} from '@remotion/cloudrun';
 
-const region: GcpRegion = "australia-southeast1";
+const region: GcpRegion = 'australia-southeast1';
 
-const { sites } = await getSites(region);
+const {sites} = await getSites(region);
 
 for (const site of sites) {
   await deleteSite({