Merge pull request #4824 from remotion-dev/eslint-9

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

@@ -6,6 +6,7 @@ export const listOfRemotionPackages = [
 	'@remotion/cli',
 	'@remotion/cloudrun',
 	'@remotion/eslint-config',
+	'@remotion/eslint-config-flat',
 	'@remotion/eslint-plugin',
 	'@remotion/enable-scss',
 	'@remotion/renderer',

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

@@ -6,6 +6,7 @@ export const listOfRemotionPackages = [
 	'@remotion/cli',
 	'@remotion/cloudrun',
 	'@remotion/eslint-config',
+	'@remotion/eslint-config-flat',
 	'@remotion/eslint-plugin',
 	'@remotion/enable-scss',
 	'@remotion/renderer',

packages/eslint-config-flat/bundle.ts

@@ -0,0 +1,20 @@
+import {build} from 'bun';
+
+if (process.env.NODE_ENV !== 'production') {
+	throw new Error('This script must be run using NODE_ENV=production');
+}
+
+const output = await build({
+	entrypoints: ['src/index.ts'],
+	naming: '[name].mjs',
+	target: 'node',
+	external: [],
+});
+
+const [file] = output.outputs;
+const text = await file.text();
+
+await Bun.write('dist/esm/index.mjs', text);
+
+export {};
+console.log('Generated.');

packages/eslint-config-flat/eslint.config.mjs

@@ -0,0 +1,7 @@
+import {remotionFlatConfig} from '@remotion/eslint-config-internal';
+
+const config = remotionFlatConfig({react: false});
+
+export default {
+	...config,
+};

packages/eslint-config-flat/package.json

@@ -0,0 +1,47 @@
+{
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-config-flat"
+	},
+	"name": "@remotion/eslint-config-flat",
+	"version": "4.0.252",
+	"description": "Default configuration for Remotion templates",
+	"main": "dist/index.js",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"lint": "eslint src",
+		"formatting": "prettier src --check",
+		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"author": "Jonny Burger <[email protected]>",
+	"license": "ISC",
+	"dependencies": {
+		"@remotion/eslint-plugin": "workspace:*",
+		"typescript-eslint": "8.21.0",
+		"@eslint/js": "9.14.0",
+		"eslint-plugin-react": "7.37.4",
+		"eslint-plugin-react-hooks": "5.2.0-canary-de1eaa26-20250124"
+	},
+	"peerDependencies": {
+		"eslint": ">=9"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "workspace:*",
+		"eslint": "9.14.0"
+	},
+	"keywords": [
+		"remotion",
+		"video",
+		"react",
+		"player"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.remotion.dev/docs/brownfield#install-the-eslint-plugin"
+}

packages/eslint-config-flat/src/auto-import-rules.ts

@@ -0,0 +1,41 @@
+export const autoImports = {
+	useRef: "import {useRef} from 'react'",
+	useEffect: "import {useEffect} from 'react'",
+	useState: "import {useState} from 'react'",
+	useCallback: "import {useCallback} from 'react'",
+	useMemo: "import {useMemo} from 'react'",
+	useReducer: "import {useReducer} from 'react'",
+	useCurrentFrame: "import {useCurrentFrame} from 'remotion'",
+	useVideoConfig: "import {useVideoConfig} from 'remotion'",
+	spring: "import {spring} from 'remotion'",
+	measureSpring: "import {measureSpring} from 'remotion'",
+	random: "import {random} from 'remotion'",
+	interpolate: "import {interpolate} from 'remotion'",
+	interpolateColors: "import {interpolateColors} from 'remotion'",
+	Easing: "import {Easing} from 'remotion'",
+	getInputProps: "import {getInputProps} from 'remotion'",
+	getStaticFiles: "import {getStaticFiles} from '@remotion/studio'",
+	watchStaticFiles: "import {watchStaticFiles} from '@remotion/studio'",
+	continueRender: "import {continueRender} from 'remotion'",
+	delayRender: "import {delayRender} from 'remotion'",
+	AbsoluteFill: "import {AbsoluteFill} from 'remotion'",
+	Sequence: "import {Sequence} from 'remotion'",
+	Composition: "import {Composition} from 'remotion'",
+	Audio: "import {Audio} from 'remotion'",
+	Video: "import {Video} from 'remotion'",
+	OffthreadVideo: "import {OffthreadVideo} from 'remotion'",
+	Series: "import {Series} from 'remotion'",
+	Still: "import {Still} from 'remotion'",
+	Freeze: "import {Freeze} from 'remotion'",
+	Loop: "import {Loop} from 'remotion'",
+	staticFile: "import {staticFile} from 'remotion'",
+	Config: "import {Config} from '@remotion/cli/config'",
+	Img: "import {Img} from 'remotion'",
+	IFrame: "import {IFrame} from 'remotion'",
+	Folder: "import {Folder} from 'remotion'",
+	useCurrentScale: "import {useCurrentScale} from 'remotion'",
+	VERSION: "import {VERSION} from 'remotion'",
+	watchStaticFile: "import {watchStaticFile} from 'remotion'",
+	z: "import {z} from 'zod'",
+	styled: "import styled from 'styled-components'",
+};

packages/eslint-config-flat/src/index.ts

@@ -0,0 +1,53 @@
+import eslint from '@eslint/js';
+import remotionPlugin from '@remotion/eslint-plugin';
+import reactPlugin from 'eslint-plugin-react';
+// @ts-expect-error no types
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+
+export const config: tseslint.ConfigArray = tseslint.config(
+	{
+		ignores: ['**/build/**', '**/dist/**', '**/out/**'],
+	},
+	eslint.configs.recommended,
+	tseslint.configs.recommended,
+	{
+		plugins: {
+			react: reactPlugin,
+			'react-hooks': hooksPlugin,
+			'@remotion': remotionPlugin,
+		},
+		languageOptions: {
+			...reactPlugin.configs.flat.recommended.languageOptions,
+			parser: tseslint.parser,
+			parserOptions: {
+				projectService: true,
+			},
+		},
+		rules: {
+			...reactPlugin.configs.recommended.rules,
+			...hooksPlugin.configs.recommended.rules,
+			...remotionPlugin.configs.recommended.rules,
+			// Turning off rules that are too strict or don't apply to Remotion
+			'no-console': 'off',
+			'react/jsx-key': 'off',
+			'react/jsx-no-target-blank': 'off',
+			// In Root.tsx we encourage using fragment for just a single composition
+			// since we intend to add more compositions later and you should then use a fragment.
+			'react/jsx-no-useless-fragment': 'off',
+			// This is generally okay because on every frame, there will be a full rerender anyway!
+			'react/no-array-index-key': 'off',
+			'react/react-in-jsx-scope': 'off',
+			'react/prop-types': 'off',
+		},
+		settings: {
+			react: {
+				version: 'detect',
+			},
+		},
+	},
+	{
+		files: ['**/*.js'],
+		extends: [tseslint.configs.disableTypeChecked],
+	},
+);

packages/eslint-config-flat/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"extends": "../tsconfig.settings.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"skipLibCheck": true,
+		"jsx": "react-jsx",
+		"module": "NodeNext",
+		"resolveJsonModule": false,
+		"moduleResolution": "nodenext"
+	},
+	"include": ["./src"],
+	"references": [
+		{
+			"path": "../eslint-plugin"
+		}
+	]
+}

packages/eslint-config-internal/package.json

@@ -26,7 +26,7 @@
 		"@typescript-eslint/eslint-plugin": "8.12.2",
 		"@typescript-eslint/parser": "8.12.2",
 		"eslint-plugin-10x": "1.5.2",
-		"eslint-plugin-react": "7.37.2",
+		"eslint-plugin-react": "7.37.4",
 		"eslint-plugin-react-hooks": "5.0.0",
 		"@eslint/compat": "1.2.2",
 		"@eslint/eslintrc": "3.1.0",

packages/eslint-config-internal/src/base.ts

@@ -1,14 +1,7 @@
 import js from '@eslint/js';
 import {Linter} from 'eslint';
-import {autoImportRules} from './auto-import-rules.js';
 
-export const rules = ({
-	react,
-	enable10x,
-}: {
-	react: boolean;
-	enable10x: boolean;
-}) => {
+export const rules = ({react}: {react: boolean}) => {
 	return {
 		...js.configs.recommended.rules,
 		'for-direction': 'error',
@@ -367,20 +360,6 @@ export const rules = ({
 		'@typescript-eslint/prefer-interface': 'off',
 		'@typescript-eslint/ban-types': 'off',
 		'require-atomic-updates': 'off',
-		...{
-			...(enable10x
-				? {
-						'10x/no-full-import': 'error',
-						'10x/react-in-scope': 'off',
-						'10x/auto-import': [
-							'error',
-							{
-								imports: autoImportRules,
-							},
-						],
-					}
-				: {}),
-		},
 		complexity: 'off',
 		'no-shadow': 'off',
 		'no-undef': 'off',
@@ -626,7 +605,6 @@ export const plugins = ({react}: {react: boolean}) => {
 		react ? 'react' : undefined,
 		react ? 'react-hooks' : undefined,
 		'@typescript-eslint/eslint-plugin',
-		'10x',
 	].filter(Boolean) as string[];
 };
 
@@ -657,7 +635,7 @@ export const base = ({
 				jsx: true,
 			},
 		},
-		rules: rules({react, enable10x: true}),
+		rules: rules({react}),
 		settings: {
 			...(react
 				? {

packages/eslint-config-internal/src/index.ts

@@ -52,7 +52,7 @@ export const remotionFlatConfig = ({
 		'@typescript-eslint': typescriptPlugin,
 		...(react ? compat.plugins('react-hooks')[0].plugins : {}),
 	},
-	rules: rules({react, enable10x: false}),
+	rules: rules({react}),
 	files: [
 		'src/**/*.ts',
 		'src/**/*.tsx',

packages/eslint-config/package.json

@@ -19,18 +19,16 @@
 	},
 	"author": "Jonny Burger <[email protected]>",
 	"license": "ISC",
-	"dependencies": {
-		"@remotion/eslint-plugin": "workspace:*",
-		"@typescript-eslint/eslint-plugin": "6.21.0",
-		"@typescript-eslint/parser": "6.21.0",
-		"eslint-plugin-10x": "1.5.2",
-		"eslint-plugin-react": "7.37.2",
-		"eslint-plugin-react-hooks": "4.6.0"
-	},
+	"dependencies": {},
 	"peerDependencies": {
 		"eslint": ">=7.15.0"
 	},
 	"devDependencies": {
+		"@remotion/eslint-plugin": "workspace:*",
+		"@typescript-eslint/eslint-plugin": "6.21.0",
+		"@typescript-eslint/parser": "6.21.0",
+		"eslint-plugin-react": "7.37.4",
+		"eslint-plugin-react-hooks": "4.6.0",
 		"@remotion/eslint-config-internal": "workspace:*",
 		"eslint": "9.14.0"
 	},

packages/eslint-config/src/index.ts

@@ -1,4 +1,3 @@
-import {autoImports} from './auto-import-rules';
 import {allowESLintShareableConfig} from './patch-eslint';
 
 const baseExtends = ['eslint:recommended', 'plugin:@remotion/recommended'];
@@ -471,7 +470,6 @@ const getRules = (typescript: boolean) => {
 		// Turning off rules that are too strict or don't apply to Remotion
 		'react/jsx-no-constructed-context-values': 'off',
 		'no-console': 'off',
-		'10x/react-in-scope': 'off',
 		'react/react-in-jsx-scope': 'off',
 		'react/jsx-key': 'off',
 		'react/jsx-no-target-blank': 'off',
@@ -509,12 +507,6 @@ const getRules = (typescript: boolean) => {
 		'react/jsx-no-useless-fragment': 'off',
 		// This is generally okay because on every frame, there will be a full rerender anyway!
 		'react/no-array-index-key': 'off',
-		'10x/auto-import': [
-			'error',
-			{
-				imports: autoImports,
-			},
-		],
 	};
 };
 
@@ -526,7 +518,7 @@ export = {
 		es6: true,
 		jest: true,
 	},
-	plugins: ['react', 'react-hooks', '@typescript-eslint', '10x', '@remotion'],
+	plugins: ['react', 'react-hooks', '@typescript-eslint', '@remotion'],
 	extends: baseExtends,
 	parser: require.resolve('@typescript-eslint/parser'),
 	parserOptions: {

packages/eslint-plugin/src/index.ts

@@ -3,7 +3,6 @@ import evenDimensions from './rules/even-dimensions';
 import noBackgroundImage from './rules/no-background-image';
 import durationInFrames from './rules/no-duration-frames-infinity';
 import noFrom0 from './rules/no-from-0';
-import nomp4Import from './rules/no-mp4-import';
 import noStringAssets from './rules/no-string-assets';
 import staticFileNoRelative from './rules/staticfile-no-relative';
 import staticFileNoRemote from './rules/staticfile-no-remote';
@@ -13,7 +12,6 @@ import volumeCallback from './rules/volume-callback';
 import warnNativeMediaTag from './rules/warn-native-media-tag';
 
 const rules = {
-	'no-mp4-import': nomp4Import,
 	'warn-native-media-tag': warnNativeMediaTag,
 	'deterministic-randomness': deterministicRandomness,
 	'no-string-assets': noStringAssets,
@@ -33,7 +31,6 @@ export = {
 	configs: {
 		recommended: {
 			rules: {
-				'@remotion/no-mp4-import': 'off',
 				'@remotion/warn-native-media-tag': 'error',
 				'@remotion/deterministic-randomness': 'error',
 				'@remotion/no-string-assets': 'error',
@@ -49,4 +46,4 @@ export = {
 			},
 		},
 	},
-};
+} as const;