@craft-ts/dev-tools 0.7.0-beta.13

package/src/eslint-rules/no-manual-route-provider-list.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+const ts = require('typescript');
+
+const SERVICE_NAME = /(?:Service|Provider)$/;
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow manually enumerating application providers in RouteCheckedDI.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const manualAliases = new Map();
+
+    return {
+      TSTypeAliasDeclaration(node) {
+        const names = stringLiteralUnion(node.typeAnnotation);
+        if (names.length > 0 && names.some((name) => SERVICE_NAME.test(name))) {
+          manualAliases.set(node.id.name, node);
+        }
+      },
+      'Program:exit'(program) {
+        for (const node of program.body) {
+          if (node.type !== 'TSTypeAliasDeclaration') continue;
+          const aliases = routeCheckedDiAliases(node.typeAnnotation);
+          if (aliases.length === 0) continue;
+          const availableNames = aliases[0];
+          const names = stringLiteralUnion(availableNames);
+          if (names.some((name) => SERVICE_NAME.test(name))) {
+            report(node, availableNames);
+          }
+        }
+
+        for (const node of manualAliases.values()) {
+          const usedByRouteCheck = sourceCode.ast.body.some(
+            (statement) =>
+              statement.type === 'TSTypeAliasDeclaration' &&
+              routeCheckedDiAliases(statement.typeAnnotation).some(
+                (availableNames) =>
+                  availableNames.type === 'TSTypeReference' &&
+                  availableNames.typeName.type === 'Identifier' &&
+                  availableNames.typeName.name === node.id.name,
+              ),
+          );
+          if (usedByRouteCheck) report(node, node.typeAnnotation);
+        }
+      },
+    };
+
+    function report(node, providerType) {
+      context.report({
+        node,
+        message:
+          'Do not maintain a manual provider-name list for RouteCheckedDI. Derive application providers from craftAppConfig (AppProvidedServiceNamesOf<typeof appConfig>) or keep only the route context providers.',
+      });
+    }
+  },
+};
+
+function routeCheckedDiAliases(typeNode) {
+  if (!typeNode || typeNode.type !== 'TSTypeReference') return [];
+  if (
+    typeNode.typeName.type !== 'Identifier' ||
+    typeNode.typeName.name !== 'RouteCheckedDI'
+  ) {
+    return [];
+  }
+  return typeNode.typeArguments?.params?.slice(1, 2) ?? [];
+}
+
+function stringLiteralUnion(node) {
+  if (!node) return [];
+  if (node.type === 'TSLiteralType' && typeof node.literal.value === 'string') {
+    return [node.literal.value];
+  }
+  if (node.type === 'TSUnionType') {
+    return node.types.flatMap(stringLiteralUnion);
+  }
+  return [];
+}

package/src/eslint-rules/no-noninteractive-element-interactions.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+const { NONINTERACTIVE_TAGS, INTERACTIVE_ROLES } = require('./html-helpers.cjs');
+const { parseHyperscriptCall, hasProp, staticPropString, property } = require('./hyperscript-walk.cjs');
+
+const INTERACTION_PROPS = new Set([
+  'click',
+  'onClick',
+  'keydown',
+  'onKeydown',
+  'keyup',
+  'onKeyup',
+  'keypress',
+  'onKeypress',
+]);
+
+function hasInteraction(props) {
+  if (!props || props.type !== 'ObjectExpression') return false;
+  return props.properties.some((entry) => {
+    if (entry.type !== 'Property' || entry.computed) return false;
+    const name =
+      entry.key.type === 'Identifier'
+        ? entry.key.name
+        : entry.key.type === 'Literal'
+          ? String(entry.key.value)
+          : '';
+    return INTERACTION_PROPS.has(name);
+  });
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Forbid click/keydown on non-interactive elements unless they have an interactive role and tabIndex.',
+    },
+    schema: [],
+    messages: {
+      noninteractive:
+        'Do not add {{handler}} to <{{tag}}>. Use a button/a, or add an interactive role plus tabIndex.',
+    },
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const call = parseHyperscriptCall(node);
+        if (!call || !call.tag || !NONINTERACTIVE_TAGS.has(call.tag)) return;
+        if (!hasInteraction(call.props)) return;
+        const role = staticPropString(call.props, 'role');
+        const hasTabIndex = hasProp(call.props, 'tabIndex') || hasProp(call.props, 'tabindex');
+        if (role && INTERACTIVE_ROLES.has(role) && hasTabIndex) return;
+        const handler = property(call.props, 'click')
+          ? 'click'
+          : property(call.props, 'keydown')
+            ? 'keydown'
+            : 'keyboard/pointer handlers';
+        context.report({
+          node,
+          messageId: 'noninteractive',
+          data: { tag: call.tag, handler },
+        });
+      },
+    };
+  },
+};

package/src/eslint-rules/no-positive-tabindex.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const { parseHyperscriptCall, property, stringLiteralValue } = require('./hyperscript-walk.cjs');
+
+function tabIndexValue(props) {
+  const entry = property(props, 'tabIndex') ?? property(props, 'tabindex');
+  if (!entry) return undefined;
+  if (entry.value.type === 'Literal' && typeof entry.value.value === 'number') {
+    return entry.value.value;
+  }
+  if (entry.value.type === 'UnaryExpression' && entry.value.operator === '-' &&
+      entry.value.argument.type === 'Literal' && typeof entry.value.argument.value === 'number') {
+    return -entry.value.argument.value;
+  }
+  const asString = stringLiteralValue(entry.value);
+  if (asString !== undefined && asString !== '') return Number(asString);
+  return undefined;
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Forbid positive tabIndex values that scramble focus order.',
+    },
+    schema: [],
+    messages: {
+      positive:
+        'tabIndex must not be greater than 0. Use 0 (in order) or -1 (programmatic).',
+    },
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const call = parseHyperscriptCall(node);
+        if (!call) return;
+        const value = tabIndexValue(call.props);
+        if (typeof value === 'number' && value > 0) {
+          context.report({ node, messageId: 'positive' });
+        }
+      },
+    };
+  },
+};

package/src/eslint-rules/no-redundant-primitive-insertion.cjs

@@ -0,0 +1,361 @@
+const CORE_PACKAGE = '@craft-ts/core';
+const EFFECT_PACKAGE = '@craft-ts/effect';
+const ANGULAR_PACKAGE = '@angular/core';
+
+const PRIMITIVES = new Set([
+  'asyncProcess',
+  'asyncProcessEffect',
+  'computedEffect',
+  'mutation',
+  'mutationEffect',
+  'query',
+  'queryEffect',
+]);
+
+const INSERTION_PIPES = new Set([
+  'insertAsyncProcessPipe',
+  'insertMutationPipe',
+  'insertQueryPipe',
+]);
+
+const NATIVE_PROPERTIES = new Set(['hasValue', 'isLoading', 'status', 'value']);
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow insertion properties that only duplicate a primitive resource property.',
+    },
+    schema: [],
+    messages: {
+      redundant:
+        "'{{property}}' is already provided by the primitive; do not re-declare it in an insertion without additional logic.",
+    },
+  },
+
+  create(context) {
+    const primitiveBindings = new Map();
+    const pipeBindings = new Map();
+    const computedBindings = new Map();
+
+    return {
+      ImportDeclaration(node) {
+        if (node.importKind === 'type') return;
+
+        const source = node.source.value;
+        if (
+          source !== CORE_PACKAGE &&
+          source !== EFFECT_PACKAGE &&
+          source !== ANGULAR_PACKAGE
+        ) {
+          return;
+        }
+
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type !== 'ImportSpecifier' ||
+            specifier.importKind === 'type'
+          ) {
+            continue;
+          }
+
+          const importedName = getIdentifierName(specifier.imported);
+          if (!importedName) continue;
+
+          if (
+            (source === CORE_PACKAGE || source === EFFECT_PACKAGE) &&
+            PRIMITIVES.has(importedName)
+          ) {
+            primitiveBindings.set(specifier.local.name, importedName);
+          }
+
+          if (source === CORE_PACKAGE && INSERTION_PIPES.has(importedName)) {
+            pipeBindings.set(specifier.local.name, importedName);
+          }
+
+          if (
+            (source === CORE_PACKAGE && importedName === 'craftComputed') ||
+            (source === ANGULAR_PACKAGE && importedName === 'computed')
+          ) {
+            computedBindings.set(specifier.local.name, importedName);
+          }
+        }
+      },
+
+      FunctionExpression(node) {
+        inspectInsertionCallback(node);
+      },
+
+      ArrowFunctionExpression(node) {
+        inspectInsertionCallback(node);
+      },
+    };
+
+    function inspectInsertionCallback(node) {
+      if (!isInsertionCallback(node, primitiveBindings, pipeBindings)) {
+        return;
+      }
+
+      const resourceParameter = getResourceParameter(node);
+      if (!resourceParameter) return;
+
+      const object = getReturnedObject(node);
+      if (!object) return;
+
+      for (const property of object.properties) {
+        if (
+          property.type !== 'Property' ||
+          property.computed ||
+          property.kind !== 'init'
+        ) {
+          continue;
+        }
+
+        const propertyName = getPropertyName(property.key);
+        if (!propertyName || !NATIVE_PROPERTIES.has(propertyName)) continue;
+
+        const computed = getComputedCall(property.value, computedBindings);
+        if (
+          !computed ||
+          (computed.name !== undefined && computed.name !== propertyName)
+        ) {
+          continue;
+        }
+
+        const read = getReturnedResourceRead(
+          computed.callback,
+          resourceParameter,
+        );
+        if (read === propertyName) {
+          context.report({
+            node: property,
+            messageId: 'redundant',
+            data: { property: propertyName },
+          });
+        }
+      }
+    }
+  },
+};
+
+function isInsertionCallback(node, primitiveBindings, pipeBindings) {
+  const parent = node.parent;
+  if (!parent || parent.type !== 'CallExpression') return false;
+
+  const callee = parent.callee;
+  if (callee.type !== 'Identifier') return false;
+
+  return primitiveBindings.has(callee.name) || pipeBindings.has(callee.name);
+}
+
+function getResourceParameter(node) {
+  for (const parameter of node.params) {
+    if (parameter.type !== 'ObjectPattern') continue;
+
+    for (const property of parameter.properties) {
+      if (
+        property.type !== 'Property' ||
+        property.computed ||
+        getPropertyName(property.key) !== 'resource'
+      ) {
+        continue;
+      }
+
+      const value = property.value;
+      if (value.type === 'Identifier') return value.name;
+    }
+  }
+
+  return undefined;
+}
+
+function getReturnedObject(node) {
+  const body = unwrap(node.body);
+  if (body.type === 'ObjectExpression') return body;
+  if (body.type !== 'BlockStatement') return undefined;
+
+  const returnStatement = body.body.find(
+    (statement) => statement.type === 'ReturnStatement',
+  );
+  return returnStatement?.argument
+    ? getObjectExpression(returnStatement.argument)
+    : undefined;
+}
+
+function getObjectExpression(node) {
+  const expression = unwrap(node);
+  return expression.type === 'ObjectExpression' ? expression : undefined;
+}
+
+function getComputedCall(node, computedBindings) {
+  const call = unwrap(node);
+  if (call.type !== 'CallExpression' || call.callee.type !== 'Identifier') {
+    return undefined;
+  }
+
+  const importedName = computedBindings.get(call.callee.name);
+  if (importedName === 'craftComputed') {
+    const name = getStringLiteral(call.arguments[0]);
+    const callback = call.arguments[call.arguments.length - 1];
+    return name && callback && isFunction(callback)
+      ? { name, callback }
+      : undefined;
+  }
+
+  if (importedName === 'computed') {
+    const callback = call.arguments[0];
+    return callback && isFunction(callback)
+      ? { name: undefined, callback }
+      : undefined;
+  }
+
+  return undefined;
+}
+
+function getReturnedResourceRead(node, resourceParameter) {
+  const body = unwrap(node.body);
+  if (body.type === 'BlockStatement') {
+    const returnStatement = body.body.find(
+      (statement) => statement.type === 'ReturnStatement',
+    );
+    if (!returnStatement?.argument) return undefined;
+
+    const directRead = getResourceRead(
+      returnStatement.argument,
+      resourceParameter,
+    );
+    if (directRead) return directRead;
+
+    const statusVariable = getStatusVariable(body, resourceParameter);
+    return isCanonicalIsLoading(returnStatement.argument, statusVariable)
+      ? 'isLoading'
+      : undefined;
+  }
+
+  return getResourceRead(body, resourceParameter);
+}
+
+function getStatusVariable(body, resourceParameter) {
+  for (const statement of body.body) {
+    if (
+      statement.type !== 'VariableDeclaration' ||
+      statement.declarations.length !== 1
+    ) {
+      continue;
+    }
+
+    const declaration = statement.declarations[0];
+    if (declaration.id.type !== 'Identifier') continue;
+    if (getResourceRead(declaration.init, resourceParameter) !== 'status') {
+      continue;
+    }
+
+    return declaration.id.name;
+  }
+
+  return undefined;
+}
+
+function getResourceRead(node, resourceParameter) {
+  let expression = unwrap(node);
+  if (!expression) return undefined;
+  if (expression.type === 'YieldExpression') {
+    expression = unwrap(expression.argument);
+  }
+  if (!expression) return undefined;
+
+  if (
+    expression.type !== 'CallExpression' ||
+    expression.callee.type !== 'MemberExpression' ||
+    expression.callee.computed ||
+    expression.callee.object.type !== 'Identifier' ||
+    expression.callee.object.name !== resourceParameter ||
+    expression.callee.property.type !== 'Identifier' ||
+    expression.arguments.length !== 0
+  ) {
+    return undefined;
+  }
+
+  return expression.callee.property.name;
+}
+
+function isCanonicalIsLoading(node, statusVariable) {
+  if (!statusVariable) return false;
+
+  const expression = unwrap(node);
+  if (expression.type !== 'LogicalExpression' || expression.operator !== '||') {
+    return false;
+  }
+
+  const values = [
+    getStatusComparison(expression.left, statusVariable),
+    getStatusComparison(expression.right, statusVariable),
+  ];
+  return values.includes('loading') && values.includes('reloading');
+}
+
+function getStatusComparison(node, statusVariable) {
+  const expression = unwrap(node);
+  if (
+    expression.type !== 'BinaryExpression' ||
+    !['===', '=='].includes(expression.operator)
+  ) {
+    return undefined;
+  }
+
+  if (
+    expression.left.type === 'Identifier' &&
+    expression.left.name === statusVariable
+  ) {
+    return getStringLiteral(expression.right);
+  }
+
+  if (
+    expression.right.type === 'Identifier' &&
+    expression.right.name === statusVariable
+  ) {
+    return getStringLiteral(expression.left);
+  }
+
+  return undefined;
+}
+
+function isFunction(node) {
+  return (
+    node.type === 'ArrowFunctionExpression' ||
+    node.type === 'FunctionExpression'
+  );
+}
+
+function getPropertyName(node) {
+  if (node.type === 'Identifier') return node.name;
+  return getStringLiteral(node);
+}
+
+function getStringLiteral(node) {
+  return node?.type === 'Literal' && typeof node.value === 'string'
+    ? node.value
+    : undefined;
+}
+
+function getIdentifierName(node) {
+  return node.type === 'Identifier' ? node.name : undefined;
+}
+
+function unwrap(node) {
+  let current = node;
+  while (
+    current &&
+    [
+      'ChainExpression',
+      'TSAsExpression',
+      'TSNonNullExpression',
+      'TSSatisfiesExpression',
+      'TSTypeAssertion',
+    ].includes(current.type)
+  ) {
+    current = current.expression;
+  }
+  return current;
+}

package/src/eslint-rules/no-render-writes.cjs

@@ -0,0 +1,106 @@
+const WRITE_METHODS = new Set(['set', 'update', 'mutate']);
+const DOM_EVENTS = new Set([
+  'change',
+  'click',
+  'input',
+  'keydown',
+  'keypress',
+  'keyup',
+  'submit',
+]);
+
+function isFunctionNode(node) {
+  return (
+    node?.type === 'ArrowFunctionExpression' ||
+    node?.type === 'FunctionExpression'
+  );
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow signal writes from Craft component templates and render bindings.',
+    },
+    schema: [],
+    messages: {
+      renderWrite:
+        'Do not call {{method}}() while rendering a Craft template. Move the write to a DOM event, output, mutation, or explicit business effect.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    return {
+      CallExpression(node) {
+        if (
+          node.callee.type !== 'Identifier' ||
+          node.callee.name !== 'craftComponent' ||
+          node.arguments.length < 4 ||
+          !isFunctionNode(node.arguments[3])
+        ) {
+          return;
+        }
+        inspect(node.arguments[3].body);
+      },
+    };
+
+    function inspect(root) {
+      walk(root, (node) => {
+        if (isNestedCraftComponent(node)) return 'skip';
+        if (node.type === 'Property' && isAllowedCallbackProperty(node)) {
+          return 'skip';
+        }
+        if (
+          node.type !== 'CallExpression' ||
+          node.callee.type !== 'MemberExpression' ||
+          node.callee.computed ||
+          node.callee.property.type !== 'Identifier' ||
+          !WRITE_METHODS.has(node.callee.property.name)
+        ) {
+          return;
+        }
+        context.report({
+          node,
+          messageId: 'renderWrite',
+          data: { method: node.callee.property.name },
+        });
+      });
+    }
+
+    function isAllowedCallbackProperty(node) {
+      if (node.computed || !isFunctionNode(node.value)) return false;
+      const name =
+        node.key.type === 'Identifier'
+          ? node.key.name
+          : node.key.type === 'Literal' && typeof node.key.value === 'string'
+            ? node.key.value
+            : undefined;
+      return Boolean(name && (DOM_EVENTS.has(name) || /^on[A-Z]/.test(name)));
+    }
+
+    function isNestedCraftComponent(node) {
+      return (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'craftComponent'
+      );
+    }
+
+    function walk(node, visitor) {
+      if (!node || typeof node.type !== 'string') return;
+      if (visitor(node) === 'skip') return;
+      const keys = sourceCode.visitorKeys[node.type] ?? [];
+      for (const key of keys) {
+        const child = node[key];
+        if (Array.isArray(child)) {
+          child.forEach((entry) => walk(entry, visitor));
+        } else {
+          walk(child, visitor);
+        }
+      }
+    }
+  },
+};