wrec 0.24.9 → 0.24.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.24.9",
+  "version": "0.24.10",
   "license": "MIT",
   "repository": {
     "type": "git",

package/scripts/lint.js

@@ -20,6 +20,7 @@
 // - invalid `form-assoc` values
 // - invalid `useState` map entries
 // - unsupported HTML attributes in templates
+// - invalid HTML element nesting in templates
 
 import fs from 'node:fs';
 import path from 'node:path';
@@ -79,6 +80,24 @@ const HTML_TAG_ATTRIBUTES = new Map([
   ['tr', new Set([])],
   ['ul', new Set([])]
 ]);
+const HTML_ALLOWED_PARENTS = new Map([
+  ['legend', new Set(['fieldset'])],
+  ['li', new Set(['ol', 'ul'])],
+  ['option', new Set(['select'])],
+  ['tbody', new Set(['table'])],
+  ['td', new Set(['tr'])],
+  ['th', new Set(['tr'])],
+  ['thead', new Set(['table'])],
+  ['tr', new Set(['table', 'tbody', 'thead'])]
+]);
+const HTML_ALLOWED_CHILDREN = new Map([
+  ['select', new Set(['option'])],
+  ['table', new Set(['tbody', 'thead', 'tr'])],
+  ['tbody', new Set(['tr'])],
+  ['thead', new Set(['tr'])],
+  ['tr', new Set(['td', 'th'])],
+  ['ul', new Set(['li'])]
+]);
 const THIS_CALL_RE = /this\.([A-Za-z_$][\w$]*)\s*\(/g;
 const THIS_REF_RE = /this\.([A-Za-z_$][\w$]*)(\.[A-Za-z_$][\w$]*)*/g;
 const PLACEHOLDER_PREFIX = '__WREC_PLACEHOLDER__';
@@ -348,6 +367,32 @@ function collectWrecClasses(sourceFile) {
   return classes;
 }
 
+function collectSupportedPropertyNames(classNode) {
+  const supportedProps = new Set();
+
+  for (const member of classNode.members) {
+    if (!isStaticMember(member)) continue;
+    if (!ts.isPropertyDeclaration(member)) continue;
+
+    const name = getMemberName(member);
+    if (
+      name !== 'properties' ||
+      !member.initializer ||
+      !ts.isObjectLiteralExpression(member.initializer)
+    ) {
+      continue;
+    }
+
+    for (const property of member.initializer.properties) {
+      if (!ts.isPropertyAssignment(property)) continue;
+      const propName = getMemberName(property);
+      if (propName) supportedProps.add(propName);
+    }
+  }
+
+  return supportedProps;
+}
+
 function findDefinedTagNames(sourceFile) {
   const tagNames = new Map();
 
@@ -698,6 +743,7 @@ function formatReport(
     findings.extraArguments.length > 0 ||
     findings.incompatibleArguments.length > 0 ||
     findings.invalidEventHandlers.length > 0 ||
+    findings.invalidHtmlNesting.length > 0 ||
     findings.unsupportedHtmlAttributes.length > 0 ||
     findings.unsupportedEventNames.length > 0 ||
     findings.typeErrors.length > 0;
@@ -814,6 +860,11 @@ function formatReport(
     findings.invalidUseStateMaps.forEach(message => lines.push(`  ${message}`));
   }
 
+  if (findings.invalidHtmlNesting.length > 0) {
+    lines.push('invalid html nesting:');
+    findings.invalidHtmlNesting.forEach(message => lines.push(`  ${message}`));
+  }
+
   if (findings.extraArguments.length > 0) {
     lines.push('extra arguments:');
     findings.extraArguments.forEach(finding => {
@@ -867,11 +918,14 @@ function getComponentPropertyMaps(filePath, sourceText, seen = new Set()) {
   seen.add(resolved);
 
   const text = sourceText ?? fs.readFileSync(resolved, 'utf8');
-  const program = createProgram(resolved, text);
-  const sourceFile = program.getSourceFile(resolved);
-  if (!sourceFile) return new Map();
-
-  const checker = program.getTypeChecker();
+  const scriptKind = resolved.endsWith('.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS;
+  const sourceFile = ts.createSourceFile(
+    resolved,
+    text,
+    ts.ScriptTarget.ESNext,
+    true,
+    scriptKind
+  );
   const tagNames = findDefinedTagNames(sourceFile);
   const propertyMaps = new Map();
 
@@ -880,8 +934,7 @@ function getComponentPropertyMaps(filePath, sourceText, seen = new Set()) {
       ? tagNames.get(classNode.name.text)
       : undefined;
     if (!tagName) continue;
-    const {supportedProps} = extractProperties(sourceFile, checker, classNode);
-    propertyMaps.set(tagName, new Set(supportedProps.keys()));
+    propertyMaps.set(tagName, collectSupportedPropertyNames(classNode));
   }
 
   for (const statement of sourceFile.statements) {
@@ -1128,10 +1181,15 @@ function isNumericLikeType(type) {
 
 function isWrecComponentFile(filePath) {
   const sourceText = fs.readFileSync(filePath, 'utf8');
-  const program = createProgram(filePath, sourceText);
-  const sourceFile = program.getSourceFile(filePath);
-  if (!sourceFile) return false;
-  return Boolean(findWrecClass(sourceFile, program.getTypeChecker()));
+  const scriptKind = filePath.endsWith('.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS;
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    sourceText,
+    ts.ScriptTarget.ESNext,
+    true,
+    scriptKind
+  );
+  return collectWrecClasses(sourceFile).length > 0;
 }
 
 function isStaticMember(node) {
@@ -1183,7 +1241,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   if (!sourceFile) throw new Error(`unable to parse ${filePath}`);
 
   const checker = baseProgram.getTypeChecker();
-  const classNode = findWrecClass(sourceFile, checker);
+  const classNode = collectWrecClasses(sourceFile)[0];
   if (!classNode) throw new Error('file must define a subclass of Wrec');
   const componentPropertyMaps = getComponentPropertyMaps(filePath, sourceText);
 
@@ -1205,6 +1263,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     invalidDefaultValues: [],
     invalidEventHandlers: [],
     invalidFormAssocValues: [],
+    invalidHtmlNesting: [],
     invalidUseStateMaps: [],
     invalidUsedByReferences: [],
     invalidValuesConfigurations: [],
@@ -1243,10 +1302,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   if (!augmentedSourceFile) throw new Error(`unable to analyze ${filePath}`);
 
   const augmentedChecker = augmentedProgram.getTypeChecker();
-  const augmentedClassNode = findWrecClass(
-    augmentedSourceFile,
-    augmentedChecker
-  );
+  const augmentedClassNode = collectWrecClasses(augmentedSourceFile)[0];
   if (!augmentedClassNode) {
     throw new Error('unable to find Wrec subclass after augmentation');
   }
@@ -1306,6 +1362,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   findings.invalidDefaultValues.sort();
   findings.invalidEventHandlers.sort();
   findings.invalidFormAssocValues.sort();
+  findings.invalidHtmlNesting.sort();
   findings.invalidUseStateMaps.sort();
   findings.invalidUsedByReferences.sort();
   findings.invalidValuesConfigurations.sort();
@@ -1677,8 +1734,48 @@ function validateValueBindingEvent(node, attrName, findings) {
   );
 }
 
+function getHtmlTagName(node) {
+  const tagName = node.rawTagName || node.tagName;
+  return typeof tagName === 'string' ? tagName.toLowerCase() : '';
+}
+
+function validateHtmlNesting(node, findings) {
+  const tagName = getHtmlTagName(node);
+  if (!tagName || tagName.includes('-')) return;
+
+  const parentNode = node.parentNode?.nodeType === 1 ? node.parentNode : null;
+  const parentTagName = parentNode ? getHtmlTagName(parentNode) : '';
+  const allowedParents = HTML_ALLOWED_PARENTS.get(tagName);
+  if (
+    allowedParents &&
+    (!parentTagName || !allowedParents.has(parentTagName))
+  ) {
+    findings.invalidHtmlNesting.push(
+      `<${tagName}> must be nested inside ${[...allowedParents]
+        .map(name => `<${name}>`)
+        .join(' or ')}, but parent is ${parentTagName ? `<${parentTagName}>` : 'the document root'}`
+    );
+  }
+
+  const allowedChildren = HTML_ALLOWED_CHILDREN.get(tagName);
+  if (!allowedChildren) return;
+
+  for (const child of node.childNodes ?? []) {
+    if (child.nodeType !== 1) continue;
+    const childTagName = getHtmlTagName(child);
+    if (!childTagName || childTagName.includes('-')) continue;
+    if (allowedChildren.has(childTagName)) continue;
+
+    findings.invalidHtmlNesting.push(
+      `<${childTagName}> is not allowed directly inside <${tagName}>`
+    );
+  }
+}
+
 function walkHtmlNode(node, expressions, findings, componentPropertyMaps) {
   if (node.nodeType === 1) {
+    validateHtmlNesting(node, findings);
+
     for (const [attrName, attrValue] of Object.entries(node.attributes)) {
       if (!attrValue) continue;
       validateFormAssocAttribute(attrName, attrValue, findings);