@lvce-editor/eslint-plugin-virtual-dom 13.2.0 → 13.4.0

package/dist/index.js

@@ -1,6 +1,12 @@
 const isPropertyNode = node => {
   return typeof node === 'object' && node !== null && 'type' in node && node.type === 'Property' && 'key' in node && 'value' in node && 'computed' in node;
 };
+const isObjectExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'ObjectExpression' && 'properties' in node;
+};
+const isArrayExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'ArrayExpression' && 'elements' in node;
+};
 const isIdentifierNode = node => {
   return typeof node === 'object' && node !== null && 'type' in node && node.type === 'Identifier' && 'name' in node;
 };
@@ -13,25 +19,412 @@ const isTemplateLiteralNode = node => {
 const isBinaryExpressionNode = node => {
   return typeof node === 'object' && node !== null && 'type' in node && node.type === 'BinaryExpression' && 'operator' in node && 'left' in node && 'right' in node;
 };
-const isClassNameKey = node => {
-  if (node.computed) {
-    return false;
+const isCallExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'CallExpression' && 'callee' in node && 'arguments' in node;
+};
+const isUnaryExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'UnaryExpression' && 'operator' in node && 'argument' in node;
+};
+const isMemberExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'MemberExpression' && 'object' in node && 'property' in node && 'computed' in node;
+};
+const isArrowFunctionExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'ArrowFunctionExpression';
+};
+const isFunctionExpressionNode = node => {
+  return typeof node === 'object' && node !== null && 'type' in node && node.type === 'FunctionExpression';
+};
+const getStaticPropertyName = property => {
+  if (property.computed) {
+    return undefined;
   }
-  if (isIdentifierNode(node.key)) {
-    return node.key.name === 'className';
+  if (isIdentifierNode(property.key)) {
+    return property.key.name;
   }
-  if (isLiteralNode(node.key)) {
-    return node.key.value === 'className';
+  if (isLiteralNode(property.key) && typeof property.key.value === 'string') {
+    return property.key.value;
   }
-  return false;
+  return undefined;
+};
+const getProperty = (node, name) => {
+  return node.properties.find(property => isPropertyNode(property) && getStaticPropertyName(property) === name);
+};
+const hasProperty = (node, name) => {
+  return Boolean(getProperty(node, name));
+};
+const isVirtualDomNode = node => {
+  return isObjectExpressionNode(node) && hasProperty(node, 'type');
+};
+const isTextCall = node => {
+  return isCallExpressionNode(node) && isIdentifierNode(node.callee) && node.callee.name === 'text';
+};
+const isMemberExpressionWithProperty = (node, propertyName) => {
+  return isMemberExpressionNode(node) && !node.computed && isIdentifierNode(node.property) && node.property.name === propertyName;
+};
+const isNumericLiteral = node => {
+  return isLiteralNode(node) && typeof node.value === 'number';
+};
+const getStaticNumberValue = node => {
+  if (isNumericLiteral(node)) {
+    return node.value;
+  }
+  if (isUnaryExpressionNode(node) && node.operator === '-' && isNumericLiteral(node.argument)) {
+    return -node.argument.value;
+  }
+  return undefined;
+};
+const isStringLiteral = node => {
+  return isLiteralNode(node) && typeof node.value === 'string';
+};
+
+const meta$9 = {
+  docs: {
+    description: 'Require an explicit role on clickable virtual-dom div nodes'
+  },
+  messages: {
+    clickableDivNeedsRole: 'Add an explicit `role` to clickable virtual-dom div nodes.'
+  },
+  type: 'problem'
+};
+const create$9 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      const typeProperty = getProperty(node, 'type');
+      const clickProperty = getProperty(node, 'onClick');
+      const roleProperty = getProperty(node, 'role');
+      if (!typeProperty || !clickProperty || roleProperty || !isMemberExpressionWithProperty(typeProperty.value, 'Div')) {
+        return;
+      }
+      context.report({
+        messageId: 'clickableDivNeedsRole',
+        node: clickProperty
+      });
+    }
+  };
+};
+
+const clickableDivNeedsRole = {
+  __proto__: null,
+  create: create$9,
+  meta: meta$9
+};
+
+const meta$8 = {
+  docs: {
+    description: 'Disallow empty ARIA values in virtual-dom nodes'
+  },
+  messages: {
+    noEmptyAria: 'Omit empty ARIA attributes instead of using an empty string.'
+  },
+  type: 'problem'
+};
+const isAriaProperty = name => {
+  return /^aria[A-Z]/.test(name);
+};
+const create$8 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      for (const property of node.properties) {
+        if (!isPropertyNode(property)) {
+          continue;
+        }
+        const name = getStaticPropertyName(property);
+        if (!name || !isAriaProperty(name) || !isStringLiteral(property.value) || property.value.value !== '') {
+          continue;
+        }
+        context.report({
+          messageId: 'noEmptyAria',
+          node: property.value
+        });
+      }
+    }
+  };
+};
+
+const noEmptyAria = {
+  __proto__: null,
+  create: create$8,
+  meta: meta$8
+};
+
+const meta$7 = {
+  docs: {
+    description: 'Disallow empty className values in virtual-dom nodes'
+  },
+  messages: {
+    noEmptyClassName: 'Omit `className` instead of using an empty string.'
+  },
+  type: 'problem'
+};
+const create$7 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      const classNameProperty = getProperty(node, 'className');
+      if (!classNameProperty || !isStringLiteral(classNameProperty.value) || classNameProperty.value.value !== '') {
+        return;
+      }
+      context.report({
+        messageId: 'noEmptyClassName',
+        node: classNameProperty.value
+      });
+    }
+  };
+};
+
+const noEmptyClassName = {
+  __proto__: null,
+  create: create$7,
+  meta: meta$7
+};
+
+const meta$6 = {
+  docs: {
+    description: 'Disallow inline event handlers in virtual-dom nodes'
+  },
+  messages: {
+    noInlineEventHandlers: 'Use a registered event listener id instead of an inline event handler.'
+  },
+  type: 'problem'
+};
+const isEventPropertyName = name => {
+  return /^on[A-Z]/.test(name);
+};
+const isInlineEventHandler = node => {
+  return isStringLiteral(node) || isTemplateLiteralNode(node) || isArrowFunctionExpressionNode(node) || isFunctionExpressionNode(node);
+};
+const create$6 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      for (const property of node.properties) {
+        if (!isPropertyNode(property)) {
+          continue;
+        }
+        const name = getStaticPropertyName(property);
+        if (!name || !isEventPropertyName(name) || !isInlineEventHandler(property.value)) {
+          continue;
+        }
+        context.report({
+          messageId: 'noInlineEventHandlers',
+          node: property.value
+        });
+      }
+    }
+  };
+};
+
+const noInlineEventHandlers = {
+  __proto__: null,
+  create: create$6,
+  meta: meta$6
+};
+
+const meta$5 = {
+  docs: {
+    description: 'Disallow inline style attributes in virtual-dom nodes'
+  },
+  messages: {
+    noInlineStyle: 'Use class names or generated CSS instead of inline `style`.'
+  },
+  type: 'problem'
+};
+const create$5 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      const styleProperty = getProperty(node, 'style');
+      if (!styleProperty) {
+        return;
+      }
+      context.report({
+        messageId: 'noInlineStyle',
+        node: styleProperty
+      });
+    }
+  };
+};
+
+const noInlineStyle = {
+  __proto__: null,
+  create: create$5,
+  meta: meta$5
+};
+
+const meta$4 = {
+  docs: {
+    description: 'Disallow object-like attribute values in virtual-dom nodes'
+  },
+  messages: {
+    noObjectAttributeValues: 'Avoid object, array, or function attribute values because virtual-dom diffing compares attributes by reference.'
+  },
+  type: 'problem'
+};
+const ignoredProperties = new Set(['childCount', 'type']);
+const isObjectLikeAttributeValue = node => {
+  return isObjectExpressionNode(node) || isArrayExpressionNode(node) || isArrowFunctionExpressionNode(node) || isFunctionExpressionNode(node);
+};
+const create$4 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      for (const property of node.properties) {
+        if (!isPropertyNode(property)) {
+          continue;
+        }
+        const name = getStaticPropertyName(property);
+        if (!name || ignoredProperties.has(name) || !isObjectLikeAttributeValue(property.value)) {
+          continue;
+        }
+        context.report({
+          messageId: 'noObjectAttributeValues',
+          node: property.value
+        });
+      }
+    }
+  };
+};
+
+const noObjectAttributeValues = {
+  __proto__: null,
+  create: create$4,
+  meta: meta$4
+};
+
+const meta$3 = {
+  docs: {
+    description: 'Disallow raw string children in virtual-dom arrays'
+  },
+  messages: {
+    noRawTextChildren: 'Use `text(...)` instead of a raw string in virtual-dom arrays.'
+  },
+  type: 'problem'
+};
+const isVirtualDomArray = node => {
+  return isArrayExpressionNode(node) && node.elements.some(element => isVirtualDomNode(element) || isTextCall(element));
+};
+const create$3 = context => {
+  return {
+    ArrayExpression(node) {
+      if (!isVirtualDomArray(node)) {
+        return;
+      }
+      for (const element of node.elements) {
+        if (!isStringLiteral(element)) {
+          continue;
+        }
+        context.report({
+          messageId: 'noRawTextChildren',
+          node: element
+        });
+      }
+    }
+  };
+};
+
+const noRawTextChildren = {
+  __proto__: null,
+  create: create$3,
+  meta: meta$3
+};
+
+const meta$2 = {
+  docs: {
+    description: 'Prefer virtual-dom constants over raw type, role, aria boolean, and tabIndex values'
+  },
+  messages: {
+    preferAriaBooleanConstant: 'Use an ARIA boolean constant instead of a raw string.',
+    preferRoleConstant: 'Use `AriaRoles.*` instead of a raw role string.',
+    preferTabIndexConstant: 'Use `TabIndex.*` instead of a raw tabIndex number.',
+    preferTypeConstant: 'Use `VirtualDomElements.*` instead of a raw element type number.'
+  },
+  type: 'suggestion'
+};
+const isAriaBooleanProperty = name => {
+  return /^aria[A-Z]/.test(name);
+};
+const create$2 = context => {
+  return {
+    ObjectExpression(node) {
+      if (!isVirtualDomNode(node)) {
+        return;
+      }
+      for (const property of node.properties) {
+        if (!isPropertyNode(property)) {
+          continue;
+        }
+        const name = getStaticPropertyName(property);
+        if (!name) {
+          continue;
+        }
+        if (name === 'type' && isNumericLiteral(property.value)) {
+          context.report({
+            messageId: 'preferTypeConstant',
+            node: property.value
+          });
+          continue;
+        }
+        if (name === 'role' && isStringLiteral(property.value)) {
+          context.report({
+            messageId: 'preferRoleConstant',
+            node: property.value
+          });
+          continue;
+        }
+        if (name === 'tabIndex' && isNumericLiteral(property.value)) {
+          context.report({
+            messageId: 'preferTabIndexConstant',
+            node: property.value
+          });
+          continue;
+        }
+        if (isAriaBooleanProperty(name) && isStringLiteral(property.value) && (property.value.value === 'true' || property.value.value === 'false')) {
+          context.report({
+            messageId: 'preferAriaBooleanConstant',
+            node: property.value
+          });
+        }
+      }
+    }
+  };
+};
+
+const preferConstants = {
+  __proto__: null,
+  create: create$2,
+  meta: meta$2
+};
+
+const isClassNameKey = node => {
+  return getStaticPropertyName(node) === 'className';
 };
 const isStringLiteralWithSpace = node => {
-  return isLiteralNode(node) && typeof node.value === 'string' && /\s/.test(node.value);
+  return isStringLiteral(node) && /\s/.test(node.value);
+};
+const isStaticMultiClassName = node => {
+  return isStringLiteral(node) && /\s/.test(node.value) && node.value.trim().split(/\s+/).length > 1;
 };
 const hasTemplateClassSeparator = node => {
   return node.quasis.some(quasi => /\s/.test(quasi.value.raw));
 };
 const isManualClassNameConcatenation = node => {
+  if (isStaticMultiClassName(node)) {
+    return true;
+  }
   if (isTemplateLiteralNode(node)) {
     return node.expressions.length > 0 && hasTemplateClassSeparator(node);
   }
@@ -40,7 +433,7 @@ const isManualClassNameConcatenation = node => {
   }
   return isStringLiteralWithSpace(node.left) || isStringLiteralWithSpace(node.right) || isManualClassNameConcatenation(node.left) || isManualClassNameConcatenation(node.right);
 };
-const meta = {
+const meta$1 = {
   docs: {
     description: 'Prefer mergeClassNames for composing virtual-dom className values'
   },
@@ -49,7 +442,7 @@ const meta = {
   },
   type: 'suggestion'
 };
-const create = context => {
+const create$1 = context => {
   return {
     Property(node) {
       if (!isPropertyNode(node) || !isClassNameKey(node) || !isManualClassNameConcatenation(node.value)) {
@@ -64,6 +457,115 @@ const create = context => {
 };
 
 const preferMergeClassNames = {
+  __proto__: null,
+  create: create$1,
+  meta: meta$1
+};
+
+const meta = {
+  docs: {
+    description: 'Validate statically analyzable virtual-dom childCount values'
+  },
+  messages: {
+    invalidChildCount: '`childCount` must be a non-negative integer.',
+    validChildCount: '`childCount` declares more children than this static virtual-dom array contains.'
+  },
+  type: 'problem'
+};
+const getChildCountNode = node => {
+  if (!isVirtualDomNode(node)) {
+    return undefined;
+  }
+  return getProperty(node, 'childCount')?.value;
+};
+const getStaticChildCount = node => {
+  if (isTextCall(node)) {
+    return 0;
+  }
+  if (!isVirtualDomNode(node)) {
+    return undefined;
+  }
+  const childCountProperty = getProperty(node, 'childCount');
+  if (!childCountProperty) {
+    return 0;
+  }
+  const childCount = getStaticNumberValue(childCountProperty.value);
+  if (childCount === undefined) {
+    return undefined;
+  }
+  return childCount;
+};
+const isValidChildCount = childCount => {
+  return Number.isSafeInteger(childCount) && childCount >= 0;
+};
+const isAnalyzableVirtualDomElement = node => {
+  return isTextCall(node) || isVirtualDomNode(node);
+};
+const computeSubtreeEnd = (elements, index) => {
+  const childCount = getStaticChildCount(elements[index]);
+  if (childCount === undefined || !isValidChildCount(childCount)) {
+    return undefined;
+  }
+  let next = index + 1;
+  for (let childIndex = 0; childIndex < childCount; childIndex++) {
+    if (next >= elements.length) {
+      return undefined;
+    }
+    const childEnd = computeSubtreeEnd(elements, next);
+    if (childEnd === undefined) {
+      return undefined;
+    }
+    next = childEnd;
+  }
+  return next;
+};
+const hasImpossibleChildCount = (elements, index) => {
+  const childCount = getStaticChildCount(elements[index]);
+  if (childCount === undefined || !isValidChildCount(childCount)) {
+    return false;
+  }
+  let next = index + 1;
+  for (let childIndex = 0; childIndex < childCount; childIndex++) {
+    if (next >= elements.length) {
+      return true;
+    }
+    const childEnd = computeSubtreeEnd(elements, next);
+    if (childEnd === undefined) {
+      return true;
+    }
+    next = childEnd;
+  }
+  return false;
+};
+const create = context => {
+  return {
+    ArrayExpression(node) {
+      if (!isArrayExpressionNode(node) || !node.elements.some(isVirtualDomNode) || !node.elements.every(isAnalyzableVirtualDomElement)) {
+        return;
+      }
+      for (let index = 0; index < node.elements.length; index++) {
+        const element = node.elements[index];
+        const childCount = getStaticChildCount(element);
+        const childCountNode = getChildCountNode(element);
+        if (childCount !== undefined && !isValidChildCount(childCount) && childCountNode) {
+          context.report({
+            messageId: 'invalidChildCount',
+            node: childCountNode
+          });
+          continue;
+        }
+        if (childCountNode && hasImpossibleChildCount(node.elements, index)) {
+          context.report({
+            messageId: 'validChildCount',
+            node: childCountNode
+          });
+        }
+      }
+    }
+  };
+};
+
+const validChildCount = {
   __proto__: null,
   create,
   meta
@@ -76,7 +578,16 @@ const plugin = {
     version: '0.0.1'
   },
   rules: {
-    'prefer-merge-class-names': preferMergeClassNames
+    'clickable-div-needs-role': clickableDivNeedsRole,
+    'no-empty-aria': noEmptyAria,
+    'no-empty-class-name': noEmptyClassName,
+    'no-inline-event-handlers': noInlineEventHandlers,
+    'no-inline-style': noInlineStyle,
+    'no-object-attribute-values': noObjectAttributeValues,
+    'no-raw-text-children': noRawTextChildren,
+    'prefer-constants': preferConstants,
+    'prefer-merge-class-names': preferMergeClassNames,
+    'valid-child-count': validChildCount
   }
 };
 const recommended = [{
@@ -85,7 +596,16 @@ const recommended = [{
     'virtual-dom': plugin
   },
   rules: {
-    'virtual-dom/prefer-merge-class-names': 'error'
+    'virtual-dom/clickable-div-needs-role': 'error',
+    'virtual-dom/no-empty-aria': 'error',
+    'virtual-dom/no-empty-class-name': 'error',
+    'virtual-dom/no-inline-event-handlers': 'error',
+    'virtual-dom/no-inline-style': 'error',
+    'virtual-dom/no-object-attribute-values': 'error',
+    'virtual-dom/no-raw-text-children': 'error',
+    'virtual-dom/prefer-constants': 'error',
+    'virtual-dom/prefer-merge-class-names': 'error',
+    'virtual-dom/valid-child-count': 'error'
   }
 }];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/eslint-plugin-virtual-dom",
-  "version": "13.2.0",
+  "version": "13.4.0",
   "main": "dist/index.js",
   "repository": {
     "type": "git",