chore: replace deprecated String.prototype.substr() (decaporg#6333)

* chore: replace deprecated String.prototype.substr()

.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated

Signed-off-by: Tobias Speicher <[email protected]>

* refactor: add prefer slice lint rule and fix errors

Co-authored-by: erezrokah <[email protected]>

Author: CommanderRoot

.eslintrc.js

@@ -51,8 +51,9 @@ module.exports = {
         destructuring: 'all',
       },
     ],
+    'unicorn/prefer-string-slice': 'error',
   },
-  plugins: ['babel', '@emotion', 'cypress'],
+  plugins: ['babel', '@emotion', 'cypress', 'unicorn'],
   settings: {
     react: {
       version: 'detect',

dev-test/backends/test/index.html

@@ -183,7 +183,7 @@
           h('h2', {}, 'Related Post'),
           h('h3', {}, post.get('title')),
           h('img', { src: post.get('image') }),
-          h('p', {}, post.get('body', '').substr(0, 100) + '...'),
+          h('p', {}, post.get('body', '').slice(0, 100) + '...'),
         ) : null;
       }
     });

dev-test/index.html

@@ -183,7 +183,7 @@
           h('h2', {}, 'Related Post'),
           h('h3', {}, post.get('title')),
           h('img', { src: post.get('image') }),
-          h('p', {}, post.get('body', '').substr(0, 100) + '...'),
+          h('p', {}, post.get('body', '').slice(0, 100) + '...'),
         ) : null;
       }
     });

package.json

@@ -128,11 +128,12 @@
     "cypress-jest-adapter": "^0.1.1",
     "cypress-plugin-tab": "^1.0.0",
     "dotenv": "^10.0.0",
-    "eslint": "^7.0.0",
+    "eslint": "^8.12.0",
     "eslint-plugin-cypress": "^2.6.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-unicorn": "^41.0.1",
     "execa": "^5.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^10.0.0",

packages/netlify-cms-backend-azure/src/API.ts

@@ -293,7 +293,7 @@ export default class API {
   fromBase64 = (str: string) => Base64.decode(str);
 
   branchToRef = (branch: string): string => `refs/heads/${branch}`;
-  refToBranch = (ref: string): string => ref.substr('refs/heads/'.length);
+  refToBranch = (ref: string): string => ref.slice('refs/heads/'.length);
 
   user = async () => {
     const result = await this.requestJSON<AzureUser>({

packages/netlify-cms-backend-github/src/API.ts

@@ -361,7 +361,7 @@ export default class API {
       return parseContentKey(contentKey);
     }
 
-    return parseContentKey(contentKey.substring(this.repo.length + 1));
+    return parseContentKey(contentKey.slice(this.repo.length + 1));
   }
 
   checkMetadataRef() {
@@ -728,7 +728,7 @@ export default class API {
 
   async migrateToVersion1(pullRequest: GitHubPull, metadata: Metadata) {
     // hard code key/branch generation logic to ignore future changes
-    const oldContentKey = pullRequest.head.ref.substring(`cms/`.length);
+    const oldContentKey = pullRequest.head.ref.slice(`cms/`.length);
     const newContentKey = `${metadata.collection}/${oldContentKey}`;
     const newBranchName = `cms/${newContentKey}`;
 
@@ -765,7 +765,7 @@ export default class API {
   async migrateToPullRequestLabels(pullRequest: GitHubPull, metadata: Metadata) {
     await this.setPullRequestStatus(pullRequest, metadata.status);
 
-    const contentKey = pullRequest.head.ref.substring(`cms/`.length);
+    const contentKey = pullRequest.head.ref.slice(`cms/`.length);
     await this.deleteMetadata(contentKey);
   }
 
@@ -829,7 +829,7 @@ export default class API {
       // open authoring branches can exist without a pr
       const cmsBranches: Octokit.GitListMatchingRefsResponse =
         await this.getOpenAuthoringBranches();
-      branches = cmsBranches.map(b => b.ref.substring('refs/heads/'.length));
+      branches = cmsBranches.map(b => b.ref.slice('refs/heads/'.length));
       // filter irrelevant branches
       const branchesWithFilter = await Promise.all(
         branches.map(b => this.filterOpenAuthoringBranches(b)),

packages/netlify-cms-backend-github/src/__tests__/API.spec.js

@@ -11,7 +11,7 @@ describe('github API', () => {
 
   function mockAPI(api, responses) {
     api.request = jest.fn().mockImplementation((path, options = {}) => {
-      const normalizedPath = path.indexOf('?') !== -1 ? path.substr(0, path.indexOf('?')) : path;
+      const normalizedPath = path.indexOf('?') !== -1 ? path.slice(0, path.indexOf('?')) : path;
       const response = responses[normalizedPath];
       return typeof response === 'function'
         ? Promise.resolve(response(options))

packages/netlify-cms-core/src/backend.ts

@@ -292,7 +292,7 @@ function prepareMetaPath(path: string, collection: Collection) {
     return path;
   }
   const dir = dirname(path);
-  return dir.substr(collection.get('folder')!.length + 1) || '/';
+  return dir.slice(collection.get('folder')!.length + 1) || '/';
 }
 
 function collectionDepth(collection: Collection) {

packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js

@@ -117,15 +117,15 @@ export class EntriesCollection extends React.Component {
 
 export function filterNestedEntries(path, collectionFolder, entries) {
   const filtered = entries.filter(e => {
-    const entryPath = e.get('path').substring(collectionFolder.length + 1);
+    const entryPath = e.get('path').slice(collectionFolder.length + 1);
     if (!entryPath.startsWith(path)) {
       return false;
     }
 
     // only show immediate children
     if (path) {
       // non root path
-      const trimmed = entryPath.substring(path.length + 1);
+      const trimmed = entryPath.slice(path.length + 1);
       return trimmed.split('/').length === 2;
     } else {
       // root path

packages/netlify-cms-core/src/components/Collection/NestedCollection.js

@@ -144,7 +144,7 @@ export function getTreeData(collection, entries) {
   const rootFolder = '/';
   const entriesObj = entries
     .toJS()
-    .map(e => ({ ...e, path: e.path.substring(collectionFolder.length) }));
+    .map(e => ({ ...e, path: e.path.slice(collectionFolder.length) }));
 
   const dirs = entriesObj.reduce((acc, entry) => {
     let dir = dirname(entry.path);

packages/netlify-cms-core/src/formats/frontmatter.ts

@@ -27,15 +27,16 @@ const parsers = {
     parse: (input: string) => {
       let JSONinput = input.trim();
       // Fix JSON if leading and trailing brackets were trimmed.
-      if (JSONinput.substr(0, 1) !== '{') {
+      if (JSONinput.slice(0, 1) !== '{') {
         JSONinput = '{' + JSONinput + '}';
       }
       return jsonFormatter.fromFile(JSONinput);
     },
     stringify: (metadata: object) => {
       let JSONoutput = jsonFormatter.toFile(metadata).trim();
       // Trim leading and trailing brackets.
-      if (JSONoutput.substr(0, 1) === '{' && JSONoutput.substr(-1) === '}') {
+      if (JSONoutput.slice(0, 1) === '{' && JSONoutput.slice(-1) === '}') {
+        // eslint-disable-next-line unicorn/prefer-string-slice
         JSONoutput = JSONoutput.substring(1, JSONoutput.length - 1);
       }
       return JSONoutput;
@@ -54,8 +55,9 @@ const parsers = {
 };
 
 function inferFrontmatterFormat(str: string) {
-  const firstLine = str.substr(0, str.indexOf('\n')).trim();
-  if (firstLine.length > 3 && firstLine.substr(0, 3) === '---') {
+  // eslint-disable-next-line unicorn/prefer-string-slice
+  const firstLine = str.substring(0, str.indexOf('\n')).trim();
+  if (firstLine.length > 3 && firstLine.slice(0, 3) === '---') {
     // No need to infer, `gray-matter` will handle things like `---toml` for us.
     return;
   }
@@ -130,6 +132,7 @@ export class FrontmatterFormatter {
       comments,
       ...format,
     });
+    // eslint-disable-next-line unicorn/prefer-string-slice
     return trimLastLineBreak && file.slice(-1) === '\n' ? file.substring(0, file.length - 1) : file;
   }
 }

packages/netlify-cms-core/src/lib/textHelper.js

@@ -7,5 +7,6 @@ export function stringToRGB(str) {
 
   const c = (hash & 0x00ffffff).toString(16).toUpperCase();
 
+  // eslint-disable-next-line unicorn/prefer-string-slice
   return '00000'.substring(0, 6 - c.length) + c;
 }

packages/netlify-cms-lib-util/src/APIUtils.ts

@@ -13,7 +13,7 @@ export function isCMSLabel(label: string, labelPrefix: string) {
 }
 
 export function labelToStatus(label: string, labelPrefix: string) {
-  return label.substr(getLabelPrefix(labelPrefix).length);
+  return label.slice(getLabelPrefix(labelPrefix).length);
 }
 
 export function statusToLabel(status: string, labelPrefix: string) {
@@ -26,11 +26,11 @@ export function generateContentKey(collectionName: string, slug: string) {
 
 export function parseContentKey(contentKey: string) {
   const index = contentKey.indexOf('/');
-  return { collection: contentKey.substr(0, index), slug: contentKey.substr(index + 1) };
+  return { collection: contentKey.slice(0, index), slug: contentKey.slice(index + 1) };
 }
 
 export function contentKeyFromBranch(branch: string) {
-  return branch.substring(`${CMS_BRANCH_PREFIX}/`.length);
+  return branch.slice(`${CMS_BRANCH_PREFIX}/`.length);
 }
 
 export function branchFromContentKey(contentKey: string) {

packages/netlify-cms-lib-util/src/path.ts

@@ -36,9 +36,9 @@ export function basename(p: string, ext = '') {
   }
   // Remove the extension, if need be.
   if (ext.length > 0) {
-    const lastPartExt = lastPart.substr(lastPart.length - ext.length);
+    const lastPartExt = lastPart.slice(-ext.length);
     if (lastPartExt === ext) {
-      return lastPart.substr(0, lastPart.length - ext.length);
+      return lastPart.slice(0, -ext.length);
     }
   }
   return lastPart;
@@ -68,7 +68,7 @@ export function fileExtensionWithSeparator(p: string) {
   if (i === -1 || i === 0) {
     return '';
   }
-  return p.substr(i);
+  return p.slice(i);
 }
 
 /**
@@ -82,5 +82,5 @@ export function fileExtensionWithSeparator(p: string) {
  */
 export function fileExtension(p: string) {
   const ext = fileExtensionWithSeparator(p);
-  return ext === '' ? ext : ext.substr(1);
+  return ext === '' ? ext : ext.slice(1);
 }

packages/netlify-cms-lib-widgets/src/stringTemplate.ts

@@ -135,7 +135,7 @@ function getExplicitFieldReplacement(key: string, data: Map<string, unknown>) {
   if (!key.startsWith(FIELD_PREFIX)) {
     return;
   }
-  const fieldName = key.substring(FIELD_PREFIX.length);
+  const fieldName = key.slice(FIELD_PREFIX.length);
   const value = data.getIn(keyToPathArray(fieldName));
   if (typeof value === 'object' && value !== null) {
     return JSON.stringify(value);
@@ -241,7 +241,7 @@ export function addFileTemplateFields(entryPath: string, fields: Map<string, str
   fields = fields.withMutations(map => {
     map.set('dirname', dirnameExcludingFolder);
     map.set('filename', filename);
-    map.set('extension', extension === '' ? extension : extension.substr(1));
+    map.set('extension', extension === '' ? extension : extension.slice(1));
   });
 
   return fields;

packages/netlify-cms-proxy-server/src/middlewares/utils/fs.ts

@@ -29,7 +29,7 @@ export async function listRepoFiles(
   depth: number,
 ) {
   const files = await listFiles(path.join(repoPath, folder), extension, depth);
-  return files.map(f => f.substr(repoPath.length + 1));
+  return files.map(f => f.slice(repoPath.length + 1));
 }
 
 export async function writeFile(filePath: string, content: Buffer | string) {

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -319,6 +319,7 @@ export default function withFileControl({ forImage } = {}) {
       if (!value || value.length <= size) {
         return value;
       }
+      // eslint-disable-next-line unicorn/prefer-string-slice
       const text = `${value.substring(0, size / 2)}\u2026${value.substring(
         value.length - size / 2 + 1,
         value.length,

packages/netlify-cms-widget-markdown/src/serializers/slateRemark.js

@@ -177,7 +177,9 @@ export default function slateToRemark(raw, { voidCodeBlock }) {
     const index = node.text.search(exp);
     if (index > -1) {
       const substringIndex = trailing ? index : index + 1;
+      // eslint-disable-next-line unicorn/prefer-string-slice
       const firstSplit = node.text.substring(0, substringIndex);
+      // eslint-disable-next-line unicorn/prefer-string-slice
       const secondSplit = node.text.substring(substringIndex);
       const whitespace = trailing ? secondSplit : firstSplit;
       const text = trailing ? firstSplit : secondSplit;

scripts/webpack.js

@@ -138,7 +138,7 @@ function baseConfig({ target = isProduction ? 'umd' : 'umddir' } = {}) {
      * Exclude peer dependencies from package bundles.
      */
     externals:
-      target.substr(0, 3) === 'umd'
+      target.slice(0, 3) === 'umd'
         ? umdExternals
         : (context, request, cb) => {
             const externals = Object.keys(pkg.peerDependencies || {});