@remotion/eslint-plugin 4.0.484 → 4.0.486

package/dist/cjs/index.js

@@ -935,13 +935,101 @@ var rule = createRule13({
 });
 var v4_import_default = rule;
 
-// src/rules/volume-callback.ts
+// src/rules/valid-composition-and-folder-name.ts
 var import_utils14 = require("@typescript-eslint/utils");
 var createRule14 = import_utils14.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
+var validNameRegex = /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/;
+var InvalidCompositionId = "Composition IDs can only contain a-z, A-Z, 0-9, CJK characters and -.";
+var InvalidFolderName = "Folder names can only contain a-z, A-Z, 0-9, CJK characters and -.";
+var getStringValue = (value) => {
+  if (!value) {
+    return null;
+  }
+  if (value.type === "Literal") {
+    return typeof value.value === "string" ? value.value : null;
+  }
+  if (value.type !== "JSXExpressionContainer") {
+    return null;
+  }
+  const { expression } = value;
+  if (expression.type === "Literal") {
+    return typeof expression.value === "string" ? expression.value : null;
+  }
+  if (expression.type === "TemplateLiteral" && expression.expressions.length === 0) {
+    return expression.quasis[0].value.cooked;
+  }
+  return null;
+};
+var getJsxElementName = (node) => {
+  if (node.type !== "JSXIdentifier") {
+    return null;
+  }
+  return node.name;
+};
+var valid_composition_and_folder_name_default = createRule14({
+  name: "valid-composition-and-folder-name",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Warns about invalid Remotion composition IDs and folder names.",
+      recommended: "warn"
+    },
+    fixable: undefined,
+    schema: [],
+    messages: {
+      InvalidCompositionId,
+      InvalidFolderName
+    }
+  },
+  defaultOptions: [],
+  create: (context) => {
+    return {
+      JSXAttribute: (node) => {
+        if (node.type !== "JSXAttribute") {
+          return;
+        }
+        if (node.name.type !== "JSXIdentifier") {
+          return;
+        }
+        const parent = node.parent;
+        if (!parent || parent.type !== "JSXOpeningElement") {
+          return;
+        }
+        const elementName = getJsxElementName(parent.name);
+        if (elementName === null) {
+          return;
+        }
+        const propName = node.name.name;
+        const value = getStringValue(node.value);
+        if (value === null || validNameRegex.test(value)) {
+          return;
+        }
+        if ((elementName === "Composition" || elementName === "Still") && propName === "id") {
+          context.report({
+            messageId: "InvalidCompositionId",
+            node
+          });
+        }
+        if (elementName === "Folder" && propName === "name") {
+          context.report({
+            messageId: "InvalidFolderName",
+            node
+          });
+        }
+      }
+    };
+  }
+});
+
+// src/rules/volume-callback.ts
+var import_utils15 = require("@typescript-eslint/utils");
+var createRule15 = import_utils15.ESLintUtils.RuleCreator(() => {
+  return `https://github.com/remotion-dev/remotion`;
+});
 var VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume";
-var volume_callback_default = createRule14({
+var volume_callback_default = createRule15({
   name: "volume-callback",
   meta: {
     type: "problem",
@@ -1009,15 +1097,15 @@ var volume_callback_default = createRule14({
 });
 
 // src/rules/warn-native-media-tag.ts
-var import_utils15 = require("@typescript-eslint/utils");
-var createRule15 = import_utils15.ESLintUtils.RuleCreator(() => {
+var import_utils16 = require("@typescript-eslint/utils");
+var createRule16 = import_utils16.ESLintUtils.RuleCreator(() => {
   return `https://github.com/remotion-dev/remotion`;
 });
 var NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.";
 var NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.";
 var NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.";
 var NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.";
-var warn_native_media_tag_default = createRule15({
+var warn_native_media_tag_default = createRule16({
   name: "warn-native-media-tag",
   meta: {
     type: "problem",
@@ -1121,7 +1209,8 @@ var rules = {
   "non-pure-animation": non_pure_animation_default,
   "slow-css-property": slow_css_property_default,
   "v4-config-import": v4_import_default,
-  "no-object-fit-on-media-video": no_object_fit_on_media_video_default
+  "no-object-fit-on-media-video": no_object_fit_on_media_video_default,
+  "valid-composition-and-folder-name": valid_composition_and_folder_name_default
 };
 var recommendedRuleConfig = {
   "@remotion/warn-native-media-tag": "error",
@@ -1137,7 +1226,8 @@ var recommendedRuleConfig = {
   "@remotion/no-background-image": "error",
   "@remotion/non-pure-animation": "warn",
   "@remotion/v4-config-import": "error",
-  "@remotion/no-object-fit-on-media-video": "warn"
+  "@remotion/no-object-fit-on-media-video": "warn",
+  "@remotion/valid-composition-and-folder-name": "error"
 };
 var configs = {
   recommended: {

package/dist/esm/index.mjs

@@ -973,14 +973,101 @@ var init_v4_import = __esm(() => {
   v4_import_default = rule;
 });
 
-// src/rules/volume-callback.ts
+// src/rules/valid-composition-and-folder-name.ts
 import { ESLintUtils as ESLintUtils14 } from "@typescript-eslint/utils";
-var createRule14, VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume", volume_callback_default;
-var init_volume_callback = __esm(() => {
+var createRule14, validNameRegex, InvalidCompositionId = "Composition IDs can only contain a-z, A-Z, 0-9, CJK characters and -.", InvalidFolderName = "Folder names can only contain a-z, A-Z, 0-9, CJK characters and -.", getStringValue = (value) => {
+  if (!value) {
+    return null;
+  }
+  if (value.type === "Literal") {
+    return typeof value.value === "string" ? value.value : null;
+  }
+  if (value.type !== "JSXExpressionContainer") {
+    return null;
+  }
+  const { expression } = value;
+  if (expression.type === "Literal") {
+    return typeof expression.value === "string" ? expression.value : null;
+  }
+  if (expression.type === "TemplateLiteral" && expression.expressions.length === 0) {
+    return expression.quasis[0].value.cooked;
+  }
+  return null;
+}, getJsxElementName = (node) => {
+  if (node.type !== "JSXIdentifier") {
+    return null;
+  }
+  return node.name;
+}, valid_composition_and_folder_name_default;
+var init_valid_composition_and_folder_name = __esm(() => {
   createRule14 = ESLintUtils14.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
-  volume_callback_default = createRule14({
+  validNameRegex = /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/;
+  valid_composition_and_folder_name_default = createRule14({
+    name: "valid-composition-and-folder-name",
+    meta: {
+      type: "problem",
+      docs: {
+        description: "Warns about invalid Remotion composition IDs and folder names.",
+        recommended: "warn"
+      },
+      fixable: undefined,
+      schema: [],
+      messages: {
+        InvalidCompositionId,
+        InvalidFolderName
+      }
+    },
+    defaultOptions: [],
+    create: (context) => {
+      return {
+        JSXAttribute: (node) => {
+          if (node.type !== "JSXAttribute") {
+            return;
+          }
+          if (node.name.type !== "JSXIdentifier") {
+            return;
+          }
+          const parent = node.parent;
+          if (!parent || parent.type !== "JSXOpeningElement") {
+            return;
+          }
+          const elementName = getJsxElementName(parent.name);
+          if (elementName === null) {
+            return;
+          }
+          const propName = node.name.name;
+          const value = getStringValue(node.value);
+          if (value === null || validNameRegex.test(value)) {
+            return;
+          }
+          if ((elementName === "Composition" || elementName === "Still") && propName === "id") {
+            context.report({
+              messageId: "InvalidCompositionId",
+              node
+            });
+          }
+          if (elementName === "Folder" && propName === "name") {
+            context.report({
+              messageId: "InvalidFolderName",
+              node
+            });
+          }
+        }
+      };
+    }
+  });
+});
+
+// src/rules/volume-callback.ts
+import { ESLintUtils as ESLintUtils15 } from "@typescript-eslint/utils";
+var createRule15, VolumeCallback = "Prefer a callback function for setting the volume: `volume={(f) => interpolate(...)}`. See https://www.remotion.dev/docs/audio/volume", volume_callback_default;
+var init_volume_callback = __esm(() => {
+  createRule15 = ESLintUtils15.RuleCreator(() => {
+    return `https://github.com/remotion-dev/remotion`;
+  });
+  volume_callback_default = createRule15({
     name: "volume-callback",
     meta: {
       type: "problem",
@@ -1049,13 +1136,13 @@ var init_volume_callback = __esm(() => {
 });
 
 // src/rules/warn-native-media-tag.ts
-import { ESLintUtils as ESLintUtils15 } from "@typescript-eslint/utils";
-var createRule15, NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.", NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.", NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", warn_native_media_tag_default;
+import { ESLintUtils as ESLintUtils16 } from "@typescript-eslint/utils";
+var createRule16, NoNativeImgTag = "Prefer the <Img /> tag from 'remotion' package, because it will wait until the image is loaded when you are rendering your video.", NoNativeIFrameTag = "Prefer the <IFrame /> tag from 'remotion' package, because it will wait until the iframe is loaded when you are rendering your video.", NoNativeAudioTag = "Use the <Audio /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", NoNativeVideoTag = "Use the <Video /> tag from '@remotion/media' package, because it will synchronize with the Remotion timeline.", warn_native_media_tag_default;
 var init_warn_native_media_tag = __esm(() => {
-  createRule15 = ESLintUtils15.RuleCreator(() => {
+  createRule16 = ESLintUtils16.RuleCreator(() => {
     return `https://github.com/remotion-dev/remotion`;
   });
-  warn_native_media_tag_default = createRule15({
+  warn_native_media_tag_default = createRule16({
     name: "warn-native-media-tag",
     meta: {
       type: "problem",
@@ -1159,6 +1246,7 @@ var require_src = __commonJS((exports, module) => {
   init_staticfile_no_remote();
   init_use_gif_component();
   init_v4_import();
+  init_valid_composition_and_folder_name();
   init_volume_callback();
   init_warn_native_media_tag();
   var rules = {
@@ -1176,7 +1264,8 @@ var require_src = __commonJS((exports, module) => {
     "non-pure-animation": non_pure_animation_default,
     "slow-css-property": slow_css_property_default,
     "v4-config-import": v4_import_default,
-    "no-object-fit-on-media-video": no_object_fit_on_media_video_default
+    "no-object-fit-on-media-video": no_object_fit_on_media_video_default,
+    "valid-composition-and-folder-name": valid_composition_and_folder_name_default
   };
   var recommendedRuleConfig = {
     "@remotion/warn-native-media-tag": "error",
@@ -1192,7 +1281,8 @@ var require_src = __commonJS((exports, module) => {
     "@remotion/no-background-image": "error",
     "@remotion/non-pure-animation": "warn",
     "@remotion/v4-config-import": "error",
-    "@remotion/no-object-fit-on-media-video": "warn"
+    "@remotion/no-object-fit-on-media-video": "warn",
+    "@remotion/valid-composition-and-folder-name": "error"
   };
   var configs = {
     recommended: {

package/dist/index.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
                 readonly '@remotion/non-pure-animation': "warn";
                 readonly '@remotion/v4-config-import': "error";
                 readonly '@remotion/no-object-fit-on-media-video': "warn";
+                readonly '@remotion/valid-composition-and-folder-name': "error";
             };
             readonly plugins: readonly ["@remotion"];
         };
@@ -36,6 +37,7 @@ declare const _default: {
         'slow-css-property': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"SlowCssProperty", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
         'v4-config-import': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"ImportConfig", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
         'no-object-fit-on-media-video': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NoObjectFitInClassName" | "NoObjectFitInStyle", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+        'valid-composition-and-folder-name': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"InvalidCompositionId" | "InvalidFolderName", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     };
     flatPlugin: {
         rules: {
@@ -53,6 +55,7 @@ declare const _default: {
             readonly '@remotion/non-pure-animation': "warn";
             readonly '@remotion/v4-config-import': "error";
             readonly '@remotion/no-object-fit-on-media-video': "warn";
+            readonly '@remotion/valid-composition-and-folder-name': "error";
         };
         plugins: {
             '@remotion': {
@@ -72,6 +75,7 @@ declare const _default: {
                     'slow-css-property': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"SlowCssProperty", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                     'v4-config-import': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"ImportConfig", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                     'no-object-fit-on-media-video': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"NoObjectFitInClassName" | "NoObjectFitInStyle", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+                    'valid-composition-and-folder-name': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<"InvalidCompositionId" | "InvalidFolderName", [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
                 };
             };
         };

package/dist/rules/valid-composition-and-folder-name.d.ts

@@ -0,0 +1,3 @@
+type MessageIds = 'InvalidCompositionId' | 'InvalidFolderName';
+declare const _default: import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<MessageIds, [], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
+export default _default;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-plugin"
 	},
 	"name": "@remotion/eslint-plugin",
-	"version": "4.0.484",
+	"version": "4.0.486",
 	"description": "Rules for writing Remotion code",
 	"scripts": {
 		"test": "node src/tests/execute.mjs",