@design.estate/wcctools 5.1.0 → 6.1.0

package/ts/standards/rules/element.tag-map.ts

@@ -0,0 +1,87 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import type { IStandardElement } from '../classes.standardproject.js';
+import type { IRuleFinding, IStandardRule, TFixAction } from '../rule.js';
+import { catalogElements, elementKey, isCustomElementName } from './shared.js';
+
+const ts = plugins.typescript;
+
+/** The tags of a file's `declare global { interface HTMLElementTagNameMap { … } }` and the first such interface. */
+const tagMapOf = (sourceFileArg: ast.TSourceFile): { tags: Set<string>; declaration: plugins.typescript.InterfaceDeclaration | null } => {
+  const tags = new Set<string>();
+  let declaration: plugins.typescript.InterfaceDeclaration | null = null;
+  for (const statement of sourceFileArg.statements) {
+    if (!ts.isModuleDeclaration(statement) || !ts.isIdentifier(statement.name) || statement.name.text !== 'global'
+      || !statement.body || !ts.isModuleBlock(statement.body)) {
+      continue;
+    }
+    for (const inner of statement.body.statements) {
+      if (ts.isInterfaceDeclaration(inner) && inner.name.text === 'HTMLElementTagNameMap') {
+        declaration ??= inner;
+        for (const member of inner.members) {
+          if (ts.isPropertySignature(member) && member.name && (ts.isStringLiteral(member.name) || ts.isIdentifier(member.name))) {
+            tags.add(member.name.text);
+          }
+        }
+      }
+    }
+  }
+  return { tags, declaration };
+};
+
+/** Adds every missing element of one file to its tag map, or appends a tag map block to the file. */
+const tagMapFix = (missingArg: IStandardElement[]): TFixAction => (builderArg) => {
+  const sourceFile = missingArg[0].sourceFile;
+  const file = missingArg[0].file;
+  const text = sourceFile.text;
+  const { declaration } = tagMapOf(sourceFile);
+  if (declaration) {
+    const closeBrace = declaration.end - 1;
+    const lineStart = text.lastIndexOf('\n', closeBrace - 1) + 1;
+    const firstMember = declaration.members[0];
+    const indentation = firstMember
+      ? ast.indentationAt(text, firstMember.getStart())
+      : `${ast.indentationAt(text, declaration.getStart())}  `;
+    const lines = missingArg.map((elementArg) => `${indentation}'${elementArg.tag}': ${elementArg.className};\n`).join('');
+    if (/^[ \t]*$/.test(text.slice(lineStart, closeBrace))) {
+      builderArg.edit(file, lineStart, lineStart, lines);
+    } else {
+      builderArg.edit(file, closeBrace, closeBrace, `\n${lines}`);
+    }
+    return;
+  }
+  const members = missingArg.map((elementArg) => `    '${elementArg.tag}': ${elementArg.className};\n`).join('');
+  const prefix = text.length === 0 || text.endsWith('\n') ? '' : '\n';
+  builderArg.edit(file, text.length, text.length, `${prefix}\ndeclare global {\n  interface HTMLElementTagNameMap {\n${members}  }\n}\n`);
+};
+
+/** The entry file declares `declare global { interface HTMLElementTagNameMap { '<tag>': <Class> } }`. */
+export const elementTagMapRule: IStandardRule = {
+  id: 'element/tag-map',
+  severity: { base: 'warn' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const byFile = new Map<string, IStandardElement[]>();
+    for (const element of catalogElements(project)) {
+      if (element.tag && !tagMapOf(element.sourceFile).tags.has(element.tag)) {
+        byFile.set(element.file, [...(byFile.get(element.file) ?? []), element]);
+      }
+    }
+    for (const missing of byFile.values()) {
+      // The tag is written into the source: only valid custom element names are.
+      const fixable = missing.every((elementArg) => elementArg.className && isCustomElementName(elementArg.tag!));
+      const fix = fixable ? tagMapFix(missing) : undefined;
+      for (const element of missing) {
+        findings.push({
+          file: element.file,
+          position: element.decoratorCall.getStart(),
+          key: elementKey(element),
+          message: `HTMLElementTagNameMap of ${element.file} does not declare '${element.tag}'`,
+          fix,
+        });
+      }
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/i18n.literals.ts

@@ -0,0 +1,58 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import { isDemoFile } from '../helpers.paths.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+
+const ts = plugins.typescript;
+
+/** The words belong to the catalog; demos, demo data, the i18n catalog and the demo pages show sample content. */
+const isExempt = (fileArg: string): boolean =>
+  isDemoFile(fileArg)
+  || fileArg.startsWith('ts_web/i18n/')
+  || fileArg.startsWith('ts_web/demos/')
+  || fileArg.startsWith('ts_web/pages/');
+
+const wordAttributes = 'aria-label|aria-description|aria-valuetext|title|placeholder|label|text|heading|subheading|alt';
+const wordProperties = new Set(['name', 'label', 'text', 'heading', 'subheading', 'title', 'placeholder', 'message', 'description', 'confirmLabel', 'cancelLabel', 'emptyText', 'tooltip', 'hint']);
+const word = /^[A-Z][a-z]+(?:[ '’,.?!…-]+[A-Za-z]+)*[.?!…]?$/;
+
+/** The patterns of dees-catalog's scripts/check-literal-ratchet.cjs that apply to template and string text. */
+const textPatterns = (): RegExp[] => [
+  // aria-label="Progress"
+  new RegExp(`\\s(?:${wordAttributes})="([A-Za-z][^"$]*[a-z][^"$]*)"`, 'g'),
+  // >Cancel< and > Back <
+  /(?<![=-])>\s*([A-Z][a-z]+(?:[ '’,.?!…-]+[A-Za-z]+)*[.?!…]?)\s*</g,
+];
+
+/** dees: no English literal a reader sees outside demo files, `ts_web/i18n/`, `ts_web/demos/` and `ts_web/pages/`. A ratchet. */
+export const i18nLiteralsRule: IStandardRule = {
+  id: 'i18n/literals',
+  severity: { dees: 'error' },
+  fixMode: 'none',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    for (const file of project.webFiles) {
+      if (isExempt(file)) {
+        continue;
+      }
+      const visit = (nodeArg: ast.TNode): void => {
+        if (ts.isStringLiteral(nodeArg) || ts.isNoSubstitutionTemplateLiteral(nodeArg)
+          || ts.isTemplateHead(nodeArg) || ts.isTemplateMiddle(nodeArg) || ts.isTemplateTail(nodeArg)) {
+          const text = nodeArg.getText();
+          for (const pattern of textPatterns()) {
+            for (const match of text.matchAll(pattern)) {
+              findings.push({ file, position: nodeArg.getStart() + match.index, key: file, message: `English literal ${match[0].trim()}` });
+            }
+          }
+        }
+        if (ts.isPropertyAssignment(nodeArg) && (ts.isIdentifier(nodeArg.name) || ts.isStringLiteral(nodeArg.name))
+          && wordProperties.has(nodeArg.name.text) && ts.isStringLiteral(nodeArg.initializer) && word.test(nodeArg.initializer.text)) {
+          findings.push({ file, position: nodeArg.getStart(), key: file, message: `English literal ${nodeArg.getText()}` });
+        }
+        ts.forEachChild(nodeArg, visit);
+      };
+      visit(project.sourceFile(file));
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/index.ts

@@ -0,0 +1,87 @@
+import type { IStandardRule } from '../rule.js';
+import { barrelElementIndexRule } from './barrel.element-index.js';
+import { barrelNoDemoExportRule } from './barrel.no-demo-export.js';
+import { demoFixtureNotExportedRule } from './demo.fixture-not-exported.js';
+import { demoGroupsRule } from './demo.groups.js';
+import { demoRequiredRule } from './demo.required.js';
+import { demoSeparateFileRule } from './demo.separate-file.js';
+import { demoShapeRule } from './demo.shape.js';
+import { docsComponentIndexRule } from './docs.component-index.js';
+import { elementExportedRule } from './element.exported.js';
+import { elementLiteralTagRule } from './element.literal-tag.js';
+import { elementReachableRule } from './element.reachable.js';
+import { elementTagMapRule } from './element.tag-map.js';
+import { i18nLiteralsRule } from './i18n.literals.js';
+import { layoutElementFolderRule } from './layout.element-folder.js';
+import { layoutEntryFileNameRule } from './layout.entry-file-name.js';
+import { layoutEntryRule } from './layout.entry.js';
+import { layoutGroupFolderRule } from './layout.group-folder.js';
+import { layoutShared00Rule } from './layout.shared-00.js';
+import { namingClassMatchesTagRule } from './naming.class-matches-tag.js';
+import { namingLowercaseFilesRule } from './naming.lowercase-files.js';
+import { namingTagPrefixRule } from './naming.tag-prefix.js';
+import { propsAccessorRule } from './props.accessor.js';
+import { propsObjectNoAttributeRule } from './props.object-no-attribute.js';
+import { propsReflectPrimitiveRule } from './props.reflect-primitive.js';
+import { propsTypedRule } from './props.typed.js';
+import { styleBdThemeRule } from './style.bdtheme.js';
+
+export { reflectExemptNames } from './props.reflect-primitive.js';
+export { renderComponentIndex } from './docs.component-index.js';
+
+/** Every rule of docs/standard.md, in the order of the document. */
+export const standardRules: readonly IStandardRule[] = [
+  layoutEntryRule,
+  layoutElementFolderRule,
+  layoutEntryFileNameRule,
+  layoutGroupFolderRule,
+  layoutShared00Rule,
+  namingLowercaseFilesRule,
+  namingTagPrefixRule,
+  namingClassMatchesTagRule,
+  elementLiteralTagRule,
+  elementExportedRule,
+  elementTagMapRule,
+  elementReachableRule,
+  barrelElementIndexRule,
+  barrelNoDemoExportRule,
+  demoShapeRule,
+  demoRequiredRule,
+  demoSeparateFileRule,
+  demoGroupsRule,
+  demoFixtureNotExportedRule,
+  propsAccessorRule,
+  propsTypedRule,
+  propsReflectPrimitiveRule,
+  propsObjectNoAttributeRule,
+  styleBdThemeRule,
+  i18nLiteralsRule,
+  docsComponentIndexRule,
+];
+
+/**
+ * The order `wcctools fix` applies rules in: content edits first, then file moves (which rewrite imports),
+ * then barrels and reachability on the final layout, then the generated docs.
+ */
+export const fixOrder: readonly string[] = [
+  'element/exported',
+  'element/tag-map',
+  'props/accessor',
+  'props/typed',
+  'props/object-no-attribute',
+  'props/reflect-primitive',
+  'demo/groups',
+  'demo/required',
+  'barrel/no-demo-export',
+  'demo/fixture-not-exported',
+  'naming/lowercase-files',
+  'layout/shared-00',
+  'layout/entry-file-name',
+  'layout/element-folder',
+  'barrel/element-index',
+  'element/reachable',
+  'docs/component-index',
+];
+
+/** Findings the checker itself produces for the allowlist. */
+export const allowlistStaleRuleId = 'allowlist/stale';

package/ts/standards/rules/layout.element-folder.ts

@@ -0,0 +1,49 @@
+import { baseOf, dirOf } from '../helpers.paths.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { catalogElements, elementKey, elementsDir, isCustomElementName, isElementParentDir, isInElementFolder } from './shared.js';
+
+/** Every element's entry file lives in its own element folder `ts_web/elements/[00group-<area>/]<tag>/<tag>.ts`. */
+export const layoutElementFolderRule: IStandardRule = {
+  id: 'layout/element-folder',
+  severity: { base: 'warn' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const elements = catalogElements(project);
+    for (const element of elements) {
+      if (!element.tag || isInElementFolder(element)) {
+        continue;
+      }
+      const currentDir = dirOf(element.file);
+      const group = /^ts_web\/elements\/(00group-[^/]+)(\/|$)/.exec(currentDir)?.[1];
+      const folder = `${elementsDir}/${group ? `${group}/` : ''}${element.tag}`;
+      const finding: IRuleFinding = {
+        file: element.file,
+        position: element.decoratorCall.getStart(),
+        key: elementKey(element),
+        message: `<${element.tag}> is declared in ${element.file}; its element folder is ${folder}/`,
+      };
+      const elementsInFile = elements.filter((otherArg) => otherArg.file === element.file);
+      const folderTaken = [...project.files.keys()].some((fileArg) => fileArg.startsWith(`${folder}/`)) || project.exists(folder);
+      // Only flat files move mechanically: a misnamed folder holds more than this element. The folder
+      // is named after the tag, so only a valid custom element name is usable.
+      if (isCustomElementName(element.tag) && elementsInFile.length === 1 && isElementParentDir(currentDir) && !folderTaken) {
+        const tag = element.tag;
+        const companions = [...project.files.keys()].filter((fileArg) =>
+          fileArg !== element.file && dirOf(fileArg) === currentDir && baseOf(fileArg).startsWith(`${tag}.`) && baseOf(fileArg) !== 'index.ts');
+        finding.fix = (builderArg) => {
+          const entry = `${folder}/${tag}.ts`;
+          const index = `${folder}/index.ts`;
+          builderArg.create(index, `export * from './${tag}.js';\n`);
+          builderArg.move(element.file, entry);
+          for (const companion of companions) {
+            builderArg.move(companion, `${folder}/${baseOf(companion)}`);
+          }
+          builderArg.redirectBarrelExports(element.file, index);
+        };
+      }
+      findings.push(finding);
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/layout.entry-file-name.ts

@@ -0,0 +1,73 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import { baseOf, dirOf, isDemoFile, resolveSpecifier } from '../helpers.paths.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { catalogElements, elementKey, isCustomElementName, isInElementFolder, rootIdentifier } from './shared.js';
+
+const ts = plugins.typescript;
+
+/** Inside an element folder the entry file is `<tag>.ts` and the demo file is `<tag>.demo.ts`. */
+export const layoutEntryFileNameRule: IStandardRule = {
+  id: 'layout/entry-file-name',
+  severity: { base: 'warn' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const elements = catalogElements(project);
+    for (const element of elements) {
+      if (!element.tag || !isInElementFolder(element)) {
+        continue;
+      }
+      const tag = element.tag;
+      // The expected file names come from the tag: only a valid custom element name is usable for a move.
+      const usableTag = isCustomElementName(tag);
+      const folder = dirOf(element.file);
+      const entry = `${folder}/${tag}.ts`;
+      if (element.file !== entry) {
+        const finding: IRuleFinding = {
+          file: element.file,
+          position: element.decoratorCall.getStart(),
+          key: elementKey(element),
+          message: `the entry file of <${tag}> is ${baseOf(element.file)}; expected ${tag}.ts`,
+        };
+        if (usableTag && elements.filter((otherArg) => otherArg.file === element.file).length === 1 && !project.exists(entry)) {
+          finding.fix = (builderArg) => builderArg.move(element.file, entry);
+        }
+        findings.push(finding);
+      }
+      // The demo file the static demo is imported from.
+      const demoMember = ast.findStaticProperty(element.classNode, 'demo');
+      const initializer = demoMember?.initializer;
+      if (!initializer) {
+        continue;
+      }
+      const references = ts.isArrayLiteralExpression(initializer) ? [...initializer.elements] : [initializer];
+      const demoFiles = new Set<string>();
+      for (const reference of references) {
+        const identifier = rootIdentifier(reference);
+        const source = identifier ? ast.importSourceOf(element.sourceFile, identifier) : null;
+        const resolved = source ? resolveSpecifier(element.file, source, (fileArg) => project.files.has(fileArg)) : null;
+        if (resolved && isDemoFile(resolved.target) && dirOf(resolved.target) === folder) {
+          demoFiles.add(resolved.target);
+        }
+      }
+      const expectedDemo = `${folder}/${tag}.demo.ts`;
+      for (const demoFile of demoFiles) {
+        if (demoFile === expectedDemo) {
+          continue;
+        }
+        const finding: IRuleFinding = {
+          file: element.file,
+          position: demoMember!.getStart(),
+          key: elementKey(element),
+          message: `the demo file of <${tag}> is ${baseOf(demoFile)}; expected ${tag}.demo.ts`,
+        };
+        if (usableTag && demoFiles.size === 1 && !project.exists(expectedDemo)) {
+          finding.fix = (builderArg) => builderArg.move(demoFile, expectedDemo);
+        }
+        findings.push(finding);
+      }
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/layout.entry.ts

@@ -0,0 +1,40 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+
+const ts = plugins.typescript;
+
+/** `html/index.ts` exists and calls `setupWccTools({ sections })`; `html/index.html` exists. */
+export const layoutEntryRule: IStandardRule = {
+  id: 'layout/entry',
+  severity: { base: 'error' },
+  fixMode: 'none',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const entry = 'html/index.ts';
+    if (!project.files.has(entry)) {
+      findings.push({ file: entry, position: 0, key: entry, message: 'html/index.ts is missing' });
+    } else {
+      let found = false;
+      const visit = (nodeArg: ast.TNode): void => {
+        if (ts.isCallExpression(nodeArg) && ast.calleeName(nodeArg.expression) === 'setupWccTools') {
+          const config = nodeArg.arguments[0];
+          if (config && ts.isObjectLiteralExpression(config) && config.properties.some((propertyArg) =>
+            (ts.isPropertyAssignment(propertyArg) || ts.isShorthandPropertyAssignment(propertyArg))
+            && ts.isIdentifier(propertyArg.name) && propertyArg.name.text === 'sections')) {
+            found = true;
+          }
+        }
+        ts.forEachChild(nodeArg, visit);
+      };
+      visit(project.sourceFile(entry));
+      if (!found) {
+        findings.push({ file: entry, position: 0, key: entry, message: 'html/index.ts does not call setupWccTools({ sections })' });
+      }
+    }
+    if (!project.files.has('html/index.html')) {
+      findings.push({ file: 'html/index.html', position: 0, key: 'html/index.html', message: 'html/index.html is missing' });
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/layout.group-folder.ts

@@ -0,0 +1,23 @@
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { catalogElements, elementKey } from './shared.js';
+
+/** dees: element folders sit under `ts_web/elements/00group-<area>/`. */
+export const layoutGroupFolderRule: IStandardRule = {
+  id: 'layout/group-folder',
+  severity: { dees: 'warn' },
+  fixMode: 'none',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    for (const element of catalogElements(project)) {
+      if (element.file.startsWith('ts_web/elements/') && !/^ts_web\/elements\/00group-[^/]+\//.test(element.file)) {
+        findings.push({
+          file: element.file,
+          position: element.decoratorCall.getStart(),
+          key: elementKey(element),
+          message: `<${element.tag ?? '?'}> is not inside a ts_web/elements/00group-<area>/ folder`,
+        });
+      }
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/layout.shared-00.ts

@@ -0,0 +1,37 @@
+import { baseOf, dirOf, isDemoFile } from '../helpers.paths.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { elementsDir } from './shared.js';
+
+/** A module at the root of `ts_web/elements/` that declares no element is named `00<name>.ts`. */
+export const layoutShared00Rule: IStandardRule = {
+  id: 'layout/shared-00',
+  severity: { base: 'info' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const rootElements = project.elements.filter((elementArg) => dirOf(elementArg.file) === elementsDir);
+    const elementFiles = new Set(project.elements.map((elementArg) => elementArg.file));
+    for (const file of project.webFiles) {
+      const name = baseOf(file);
+      if (dirOf(file) !== elementsDir || name === 'index.ts' || name.startsWith('00') || isDemoFile(file) || elementFiles.has(file)) {
+        continue;
+      }
+      // Companion files of a flat element (`<tag>.styles.ts`) move with the element instead.
+      if (rootElements.some((elementArg) => elementArg.tag && name.startsWith(`${elementArg.tag}.`))) {
+        continue;
+      }
+      const target = `${elementsDir}/00${name}`;
+      const finding: IRuleFinding = {
+        file,
+        position: 0,
+        key: file,
+        message: `${name} declares no element; shared modules at the root of ts_web/elements are named 00${name}`,
+      };
+      if (!project.exists(target)) {
+        finding.fix = (builderArg) => builderArg.move(file, target);
+      }
+      findings.push(finding);
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/naming.class-matches-tag.ts

@@ -0,0 +1,27 @@
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { catalogElements, elementKey } from './shared.js';
+
+/** The class name, lowercased, equals the tag with hyphens removed. */
+export const namingClassMatchesTagRule: IStandardRule = {
+  id: 'naming/class-matches-tag',
+  severity: { base: 'warn' },
+  fixMode: 'none',
+  allowlistCategories: ['published'],
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    for (const element of catalogElements(project)) {
+      if (!element.tag || !element.className) {
+        continue;
+      }
+      if (element.className.toLowerCase() !== element.tag.replace(/-/g, '')) {
+        findings.push({
+          file: element.file,
+          position: element.classNode.name!.getStart(),
+          key: elementKey(element),
+          message: `class ${element.className} does not match <${element.tag}>`,
+        });
+      }
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/naming.lowercase-files.ts

@@ -0,0 +1,27 @@
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+
+/** File and folder names under `ts_web/` are lowercase. */
+export const namingLowercaseFilesRule: IStandardRule = {
+  id: 'naming/lowercase-files',
+  severity: { base: 'error' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    const lowered = new Map<string, number>();
+    for (const file of project.files.keys()) {
+      lowered.set(file.toLowerCase(), (lowered.get(file.toLowerCase()) ?? 0) + 1);
+    }
+    for (const file of project.webFiles) {
+      if (!/[A-Z]/.test(file)) {
+        continue;
+      }
+      const target = file.toLowerCase();
+      const finding: IRuleFinding = { file, position: 0, key: file, message: `${file} is not lowercase; expected ${target}` };
+      if (lowered.get(target) === 1 && !project.exists(target)) {
+        finding.fix = (builderArg) => builderArg.move(file, target);
+      }
+      findings.push(finding);
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/naming.tag-prefix.ts

@@ -0,0 +1,24 @@
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { elementKey } from './shared.js';
+
+/** Every tag starts with `<tagPrefix>-`. Applies to fixture elements in demo files too: they share the page. */
+export const namingTagPrefixRule: IStandardRule = {
+  id: 'naming/tag-prefix',
+  severity: { base: 'error' },
+  fixMode: 'none',
+  allowlistCategories: ['published'],
+  detect: ({ project, config }) => {
+    const findings: IRuleFinding[] = [];
+    for (const element of project.elements) {
+      if (element.tag && !element.tag.startsWith(`${config.tagPrefix}-`)) {
+        findings.push({
+          file: element.file,
+          position: element.decoratorCall.getStart(),
+          key: elementKey(element),
+          message: `<${element.tag}> does not start with the tag prefix '${config.tagPrefix}-'`,
+        });
+      }
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/props.accessor.ts

@@ -0,0 +1,37 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { propertyKey } from './shared.js';
+
+const ts = plugins.typescript;
+
+/** Members decorated with `@property` or `@state` use the `accessor` keyword (standard decorators). */
+export const propsAccessorRule: IStandardRule = {
+  id: 'props/accessor',
+  severity: { base: 'error' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    if (project.experimentalDecorators) {
+      return findings;
+    }
+    for (const property of project.properties) {
+      const member = property.member;
+      if (!ts.isPropertyDeclaration(member) || ast.hasModifier(member, ts.SyntaxKind.AccessorKeyword)) {
+        continue;
+      }
+      const finding: IRuleFinding = {
+        file: property.file,
+        position: member.name.getStart(),
+        key: propertyKey(property),
+        message: `@${property.decorator} ${property.name} is a field; standard decorators need 'accessor ${property.name}'`,
+      };
+      if (!ast.hasModifier(member, ts.SyntaxKind.DeclareKeyword)) {
+        const at = member.name.getStart();
+        finding.fix = (builderArg) => builderArg.edit(property.file, at, at, 'accessor ');
+      }
+      findings.push(finding);
+    }
+    return findings;
+  },
+};

package/ts/standards/rules/props.object-no-attribute.ts

@@ -0,0 +1,45 @@
+import * as plugins from '../../plugins.js';
+import * as ast from '../helpers.ast.js';
+import type { IRuleFinding, IStandardRule } from '../rule.js';
+import { addOptionFix } from './props.typed.js';
+import { coreTypeOf, isArrayTypeNode, propertyKey, publicProperties } from './shared.js';
+
+const ts = plugins.typescript;
+
+/** An array, object literal type or `I`-prefixed interface annotation. */
+const isObjectAnnotation = (typeArg: ast.TTypeNode | null): boolean => {
+  if (!typeArg) {
+    return false;
+  }
+  return isArrayTypeNode(typeArg)
+    || ts.isTypeLiteralNode(typeArg)
+    || (ts.isTypeReferenceNode(typeArg) && ts.isIdentifier(typeArg.typeName) && /^I[A-Z]/.test(typeArg.typeName.text));
+};
+
+/** A public property holding an object or array declares `type: Object`/`type: Array` or `attribute: false`. */
+export const propsObjectNoAttributeRule: IStandardRule = {
+  id: 'props/object-no-attribute',
+  severity: { base: 'warn' },
+  fixMode: 'auto',
+  detect: ({ project }) => {
+    const findings: IRuleFinding[] = [];
+    for (const property of publicProperties(project)) {
+      if (property.dynamicOptions || !isObjectAnnotation(coreTypeOf(property))) {
+        continue;
+      }
+      const options = property.options;
+      const type = options ? ast.objectPropertyText(options, 'type') : null;
+      if (type === 'Object' || type === 'Array' || (options && ast.objectPropertyText(options, 'attribute') === 'false')) {
+        continue;
+      }
+      findings.push({
+        file: property.file,
+        position: property.call.getStart(),
+        key: propertyKey(property),
+        message: `@property ${property.name} holds an object or array but declares neither type: Object/Array nor attribute: false`,
+        fix: addOptionFix(property, 'attribute: false', 'last'),
+      });
+    }
+    return findings;
+  },
+};