add-new-package

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add a new Remotion package

添加新的Remotion包

Steps

步骤

Create
packages/<name>/
with these files:

```
package.json
```
— copy from
```
@remotion/light-leaks
```
as template; update name, description, homepage, dependencies

tsconfig.json

— extends

../tsconfig.settings.json

, uses tsgo with

emitDeclarationOnly: true

outDir: "dist"

module: "es2020"

moduleResolution: "bundler"

target: "ES2022"

```
src/index.ts
```
— exports

bundle.ts

— Bun build script, externalize

react

remotion

remotion/no-react

react/jsx-runtime

react/jsx-dev-runtime

react-dom

eslint.config.mjs

— use

remotionFlatConfig({react: true})

if React,

{react: false}

otherwise

```
.npmignore
```
— copy from
```
@remotion/light-leaks
```
```
README.md
```
— package name, description, install command, link to docs

Register in monorepo:

tsconfig.json

(root) — add

{"path": "./packages/<name>"}

to references

packages/cli/src/list-of-remotion-packages.ts

— add

'@remotion/<name>'

packages/create-video/src/list-of-remotion-packages.ts

— add

'@remotion/<name>'

packages/studio-shared/src/package-info.ts

— add to

packages

descriptions

installableMap

apiDocs

Documentation (
packages/docs/docs/<name>/
):
- Add
```
"@remotion/<name>": "workspace:*"
```
  to
```
packages/docs/package.json
```
  dependencies (needed for twoslash snippets)
- ```
index.mdx
```
  — install tabs, table of contents, license
- ```
table-of-contents.tsx
```
  — TOCItem grid linking to component/function pages
- Individual component/function
```
.mdx
```
  pages
- Edit
```
packages/docs/sidebars.ts
```
  — add category
- Edit
```
packages/docs/components/TableOfContents/api.tsx
```
  — import table of contents and add section

See the

writing-docs

skill for details on writing documentation.

Example usage:

Add

"@remotion/<name>": "workspace:*"

packages/example/package.json

Create
```
packages/example/src/<Name>/index.tsx
```

<Composition>

packages/example/src/Root.tsx

Add

{"path": "../<name>"}

packages/example/tsconfig.json

references

Run
bun i
to install dependencies
Build:
```
cd packages/<name> && bun run make
```

**创建

packages/<name>/

**目录并包含以下文件：

```
package.json
```
— 以
```
@remotion/light-leaks
```
为模板复制；更新名称、描述、主页和依赖项

tsconfig.json

— 继承

../tsconfig.settings.json

，使用tsgo并配置

emitDeclarationOnly: true

、

outDir: "dist"

、

module: "es2020"

、

moduleResolution: "bundler"

、

target: "ES2022"

```
src/index.ts
```
— 导出内容

bundle.ts

— Bun构建脚本，将

react

、

remotion

、

remotion/no-react

、

react/jsx-runtime

、

react/jsx-dev-runtime

、

react-dom

设为外部依赖

eslint.config.mjs

— 若涉及React则使用

remotionFlatConfig({react: true})

，否则使用

{react: false}

```
.npmignore
```
— 复制
```
@remotion/light-leaks
```
中的配置
```
README.md
```
— 包含包名称、描述、安装命令及文档链接

在monorepo中注册：

根目录

tsconfig.json

— 在references中添加

{"path": "./packages/<name>"}

packages/cli/src/list-of-remotion-packages.ts

— 添加

'@remotion/<name>'

packages/create-video/src/list-of-remotion-packages.ts

— 添加

'@remotion/<name>'

packages/studio-shared/src/package-info.ts

— 将其添加到

packages

、

descriptions

、

installableMap

、

apiDocs

中

文档配置（
packages/docs/docs/<name>/
）：
- 在
```
packages/docs/package.json
```
  的依赖项中添加
```
"@remotion/<name>": "workspace:*"
```
  （用于twoslash代码片段）
- ```
index.mdx
```
  — 包含安装选项卡、目录、许可证
- ```
table-of-contents.tsx
```
  — 包含链接到组件/函数页面的TOCItem网格
- 单独的组件/函数
```
.mdx
```
  页面
- 编辑
```
packages/docs/sidebars.ts
```
  — 添加分类
- 编辑
```
packages/docs/components/TableOfContents/api.tsx
```
  — 导入目录并添加章节

有关文档编写的详细信息，请参考

writing-docs

技能。

示例用法：

在

packages/example/package.json

中添加

"@remotion/<name>": "workspace:*"

创建
```
packages/example/src/<Name>/index.tsx
```

在

packages/example/src/Root.tsx

中注册

<Composition>

在

packages/example/tsconfig.json

的references中添加

{"path": "../<name>"}

**运行
```
bun i
```
**以安装依赖项
构建：
```
cd packages/<name> && bun run make
```

Version

版本

Use the current version from

packages/core/src/version.ts

.
For the documentation version, increment the patch version by 1 as it will only be released with the next Remotion release.

使用

packages/core/src/version.ts

中的当前版本。
对于文档版本，将补丁版本号加1，因为它仅会随下一个Remotion版本一同发布。

Patterns

模式

Use
```
"workspace:*"
```
for internal dependencies
Use
```
"catalog:"
```
for shared external dependency versions

The

make

script is:

tsgo && bun --env-file=../.env.bundle bundle.ts

Add
```
"type": "module"
```
to
```
package.json
```

Add

"@typescript/native-preview": "catalog:"

to devDependencies

Types/main point to
```
dist/index.d.ts
```
and
```
dist/index.js
```
(not
```
dist/cjs/
```
)
Packages with React components need
```
peerDependencies
```
for
```
react
```
and
```
react-dom
```

内部依赖使用
```
"workspace:*"
```
共享外部依赖版本使用
```
"catalog:"
```

make

脚本为：

tsgo && bun --env-file=../.env.bundle bundle.ts

在
```
package.json
```
中添加
```
"type": "module"
```

在devDependencies中添加

"@typescript/native-preview": "catalog:"

Types/main指向
```
dist/index.d.ts
```
和
```
dist/index.js
```
（而非
```
dist/cjs/
```
）
包含React组件的包需要在
```
peerDependencies
```
中声明
```
react
```
和
```
react-dom
```