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

package/src/eslint-rules/no-effect-in-params.cjs

@@ -0,0 +1,265 @@
+const CORE_PACKAGE = '@craft-ts/core';
+const EFFECT_PACKAGE = '@craft-ts/effect';
+const EFFECT_RUNTIME_PACKAGE = 'effect';
+
+const PRIMITIVES = new Set([
+  'asyncProcess',
+  'asyncProcessEffect',
+  'mutation',
+  'mutationEffect',
+  'query',
+  'queryEffect',
+]);
+const SYNCHRONOUS_CALLBACKS = new Set(['craftComputed', 'craftEffect']);
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Keep Craft callbacks synchronous by allowing Effect values and Effect service reads only in loaders.',
+    },
+    schema: [],
+    messages: {
+      effect:
+        'Effect values and Effect service reads are only allowed in an Effect loader. Keep params, methods, craftComputed(...) and craftEffect(...) synchronous.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const parserServices = sourceCode.parserServices ?? context.parserServices;
+    const checker = parserServices?.program?.getTypeChecker?.();
+    const nodeMap = parserServices?.esTreeNodeToTSNodeMap;
+    const keys = sourceCode.visitorKeys ?? {};
+    const reportedNodes = new WeakSet();
+    const primitiveBindings = new Map();
+    const effectBindings = new Set();
+
+    return {
+      ImportDeclaration(node) {
+        if (node.importKind === 'type') return;
+
+        const source = node.source.value;
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== 'ImportSpecifier') continue;
+
+          const imported = getIdentifierName(specifier.imported);
+          if (!imported) continue;
+
+          if (
+            (source === CORE_PACKAGE || source === EFFECT_PACKAGE) &&
+            PRIMITIVES.has(imported)
+          ) {
+            primitiveBindings.set(specifier.local.name, imported);
+          }
+
+          if (source === CORE_PACKAGE && SYNCHRONOUS_CALLBACKS.has(imported)) {
+            primitiveBindings.set(specifier.local.name, imported);
+          }
+
+          if (source === EFFECT_RUNTIME_PACKAGE && imported === 'Effect') {
+            effectBindings.add(specifier.local.name);
+          }
+        }
+
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === 'ImportNamespaceSpecifier' &&
+            source === EFFECT_RUNTIME_PACKAGE
+          ) {
+            effectBindings.add(specifier.local.name);
+          }
+        }
+      },
+
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier') {
+          return;
+        }
+
+        const primitive = primitiveBindings.get(node.callee.name);
+        if (!primitive) return;
+
+        if (SYNCHRONOUS_CALLBACKS.has(primitive)) {
+          const factory = [...node.arguments]
+            .reverse()
+            .find((argument) =>
+              ['ArrowFunctionExpression', 'FunctionExpression'].includes(
+                unwrap(argument)?.type,
+              ),
+            );
+          if (factory) inspectParams(factory);
+          return;
+        }
+
+        const config = node.arguments[1];
+        if (!config || unwrap(config).type !== 'ObjectExpression') return;
+
+        for (const property of unwrap(config).properties) {
+          if (
+            property.type === 'Property' &&
+            getPropertyName(property.key) !== 'loader'
+          ) {
+            inspectParams(property.value);
+          }
+        }
+      },
+    };
+
+    function inspectParams(node) {
+      const expression = unwrap(node);
+      if (isEffectExpression(expression)) {
+        report(expression);
+      }
+
+      walk(
+        expression,
+        (child) => {
+          const isCalledEffectMember =
+            child.type === 'MemberExpression' &&
+            child.parent?.type === 'CallExpression' &&
+            child.parent.callee === child;
+          if (
+            child !== expression &&
+            !isCalledEffectMember &&
+            isEffectExpression(child)
+          ) {
+            report(child);
+          }
+
+          if (child.type === 'YieldExpression' && child.delegate) {
+            const yielded = unwrap(child.argument);
+            if (isEffectService(yielded) || isEffectType(yielded)) {
+              report(yielded ?? child);
+            }
+          }
+
+          if (child.type === 'TSTypeReference' && isEffectTypeSyntax(child)) {
+            report(child);
+          }
+
+          if (
+            child.type === 'ReturnStatement' &&
+            child.argument &&
+            isEffectType(child.argument)
+          ) {
+            report(child.argument);
+          }
+        },
+        keys,
+      );
+    }
+
+    function isEffectExpression(node) {
+      if (!node) return false;
+
+      if (
+        node.type === 'MemberExpression' &&
+        !node.computed &&
+        node.object.type === 'Identifier' &&
+        effectBindings.has(node.object.name)
+      ) {
+        return true;
+      }
+
+      if (node.type === 'CallExpression' && isEffectExpression(node.callee)) {
+        return true;
+      }
+
+      return isEffectType(node);
+    }
+
+    function isEffectService(node) {
+      if (!node || node.type !== 'Identifier') return false;
+      if (/Service$/.test(node.name)) return true;
+
+      if (!checker || !nodeMap) return false;
+      const type = getType(node);
+      const symbol = type?.aliasSymbol ?? type?.getSymbol?.();
+      const name = symbol && String(symbol.escapedName ?? symbol.name);
+      return Boolean(name && /Service$/.test(name));
+    }
+
+    function isEffectType(node) {
+      if (!checker || !nodeMap || !node) return false;
+
+      const type = getType(node);
+      if (!type) return false;
+
+      const text = checker.typeToString(type);
+      if (/\bEffect(?:\.Effect)?\s*</.test(text)) return true;
+
+      const symbol = type.aliasSymbol ?? type.getSymbol?.();
+      const name = symbol && String(symbol.escapedName ?? symbol.name);
+      return name === 'Effect';
+    }
+
+    function isEffectTypeSyntax(node) {
+      const typeName = node.typeName;
+      if (!typeName) return false;
+      if (typeName.type === 'Identifier') return typeName.name === 'Effect';
+      return (
+        typeName.type === 'TSQualifiedName' &&
+        typeName.left.type === 'Identifier' &&
+        effectBindings.has(typeName.left.name) &&
+        typeName.right.type === 'Identifier' &&
+        typeName.right.name === 'Effect'
+      );
+    }
+
+    function getType(node) {
+      const tsNode = nodeMap.get(node);
+      return tsNode ? checker.getTypeAtLocation(tsNode) : undefined;
+    }
+
+    function report(node) {
+      if (!node || reportedNodes.has(node)) return;
+      reportedNodes.add(node);
+      context.report({ node, messageId: 'effect' });
+    }
+  },
+};
+
+function walk(node, visit, visitorKeys) {
+  if (!node || typeof node.type !== 'string') return;
+  visit(node);
+
+  const keys = visitorKeys[node.type] ?? [];
+  for (const key of keys) {
+    const child = node[key];
+    if (Array.isArray(child)) {
+      child.forEach((item) => walk(item, visit, visitorKeys));
+    } else {
+      walk(child, visit, visitorKeys);
+    }
+  }
+}
+
+function getPropertyName(node) {
+  if (node.type === 'Identifier') return node.name;
+  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-effect-outside-loaders.cjs

@@ -0,0 +1,3 @@
+// Kept as the descriptive public name. The original file remains as a
+// compatibility entry point for projects that already enabled the old rule.
+module.exports = require('./no-effect-in-params.cjs');

package/src/eslint-rules/no-ephemeral-template-form-state.cjs

@@ -0,0 +1,131 @@
+const TEMPLATE_HOSTS = new Set(['craftComponent', 'craftDirective']);
+
+function isFunctionNode(node) {
+  return (
+    node?.type === 'ArrowFunctionExpression' ||
+    node?.type === 'FunctionExpression' ||
+    node?.type === 'FunctionDeclaration'
+  );
+}
+
+function isTemplateHostCall(node) {
+  return (
+    node?.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' &&
+    TEMPLATE_HOSTS.has(node.callee.name)
+  );
+}
+
+function declaratorName(declarator) {
+  return declarator.id.type === 'Identifier' ? declarator.id.name : undefined;
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Forbid let/const/var declarations in Craft component and directive templates; declare state in the logic factory.',
+    },
+    schema: [],
+    messages: {
+      useState:
+        "Do not declare '{{name}}' with {{kind}} in a Craft template. Move it to the logic factory as state() or craftComputed().",
+      useStatePattern:
+        'Do not declare {{kind}} bindings in a Craft template. Move them to the logic factory as state() or craftComputed().',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    return {
+      CallExpression(node) {
+        if (!isTemplateHostCall(node) || node.arguments.length < 4) {
+          return;
+        }
+
+        const template = resolveTemplateFunction(node.arguments[3]);
+        if (!template) return;
+
+        inspectTemplate(template);
+      },
+    };
+
+    function resolveTemplateFunction(node) {
+      if (isFunctionNode(node)) return node;
+      if (node?.type !== 'Identifier') return null;
+
+      let scope = sourceCode.getScope(node);
+      while (scope) {
+        const variable = scope.variables.find(
+          (candidate) => candidate.name === node.name,
+        );
+        if (variable) {
+          for (const definition of variable.defs) {
+            if (definition.type === 'ImportBinding') return null;
+            if (definition.type === 'FunctionName' && isFunctionNode(definition.node)) {
+              return definition.node;
+            }
+            if (
+              definition.type === 'Variable' &&
+              isFunctionNode(definition.node.init)
+            ) {
+              return definition.node.init;
+            }
+          }
+          return null;
+        }
+        scope = scope.upper;
+      }
+
+      return null;
+    }
+
+    function inspectTemplate(template) {
+      walk(template, (node) => {
+        if (node !== template && isTemplateHostCall(node)) {
+          return 'skip';
+        }
+
+        if (node.type !== 'VariableDeclaration') return;
+
+        const named = node.declarations
+          .map(declaratorName)
+          .filter(Boolean);
+
+        if (named.length === 0) {
+          context.report({
+            node,
+            messageId: 'useStatePattern',
+            data: { kind: node.kind },
+          });
+          return;
+        }
+
+        for (const name of named) {
+          context.report({
+            node,
+            messageId: 'useState',
+            data: { name, kind: node.kind },
+          });
+        }
+      });
+    }
+
+    function walk(node, visit) {
+      if (!node || typeof node.type !== 'string') return;
+      if (visit(node) === 'skip') return;
+
+      const keys = sourceCode.visitorKeys[node.type] ?? [];
+      for (const key of keys) {
+        const child = node[key];
+        if (Array.isArray(child)) {
+          child.forEach((item) => walk(item, visit));
+        } else {
+          walk(child, visit);
+        }
+      }
+    }
+  },
+};

package/src/eslint-rules/no-hardcoded-design-values.cjs

@@ -0,0 +1,15 @@
+const { componentInfo } = require('./css-rule-utils.cjs');
+module.exports = {
+  meta: { type: 'suggestion', schema: [], messages: { hardcoded: 'Component styles contain hard-coded color values; expose design values through component CSS variables.' } },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return { CallExpression(node) {
+      const info = componentInfo(context, sourceCode, node); if (!info?.css) return;
+      const declarationsRemoved = info.css.replace(/--[\w-]+\s*:[^;}]+[;}]/g, '');
+      if (/(#[\da-f]{3,8}\b|\b(?:rgb|hsl)a?\(|\b(?:red|blue|green|orange|gray|white|black)\b)/i.test(declarationsRemoved)) {
+        context.report({ node: info.styles?.value ?? info.stylesUrl.value, messageId: 'hardcoded' });
+      }
+    } };
+  },
+};
+

package/src/eslint-rules/no-heading-level-skip.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+const { parseHyperscriptCall } = require('./hyperscript-walk.cjs');
+
+const TRANSPARENT = new Set([
+  'ifBlock',
+  'each',
+  'matchBlock',
+  'catchBlock',
+  'pendingBlock',
+  'defer',
+  'craftTemplate',
+]);
+
+function headingLevelOf(call) {
+  if (!call?.tag) return undefined;
+  if (call.tag === 'heading') return 'relative';
+  const match = /^h([1-6])$/.exec(call.tag);
+  return match ? Number(match[1]) : undefined;
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Walk a Craft template and reject heading-level skips (h1 then h3, or headingSection that jumps a rank).',
+    },
+    schema: [],
+    messages: {
+      skip: 'Heading level skips from {{from}} to {{to}}. Insert the intermediate headingSection or heading.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    function visitTemplate(templateNode) {
+      let current = 0;
+      let lastEmitted = 0;
+
+      function walkCall(node, sectionDepth) {
+        if (!node || typeof node.type !== 'string') return;
+        if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+          const name = node.callee.name;
+          if (name === 'headingSection') {
+            walkCall(node.arguments[0], sectionDepth + 1);
+            return;
+          }
+          if (TRANSPARENT.has(name)) {
+            for (const arg of node.arguments) walkCall(arg, sectionDepth);
+            return;
+          }
+          const call = parseHyperscriptCall(node);
+          const level = headingLevelOf(call);
+          if (level === 'relative') {
+            const emitted = Math.max(1, sectionDepth + 1);
+            if (lastEmitted > 0 && emitted > lastEmitted + 1) {
+              context.report({
+                node,
+                messageId: 'skip',
+                data: { from: String(lastEmitted), to: String(emitted) },
+              });
+            }
+            lastEmitted = Math.max(lastEmitted, emitted);
+            current = emitted;
+          } else if (typeof level === 'number') {
+            if (lastEmitted > 0 && level > lastEmitted + 1) {
+              context.report({
+                node,
+                messageId: 'skip',
+                data: { from: String(lastEmitted), to: String(level) },
+              });
+            }
+            lastEmitted = Math.max(lastEmitted, level);
+            current = level;
+          }
+        }
+        const keys = sourceCode.visitorKeys[node.type] ?? [];
+        for (const key of keys) {
+          const child = node[key];
+          if (Array.isArray(child)) child.forEach((item) => walkCall(item, sectionDepth));
+          else walkCall(child, sectionDepth);
+        }
+      }
+
+      walkCall(templateNode, current);
+    }
+
+    return {
+      CallExpression(node) {
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'craftComponent' &&
+          node.arguments.length >= 4
+        ) {
+          visitTemplate(node.arguments[3]);
+        }
+      },
+    };
+  },
+};