@markuplint/selector 3.0.0-alpha.2105 → 3.0.0-alpha.4

package/README.md

@@ -74,22 +74,42 @@ Supported selectors and operators:
 
 The below is selectors that are extended by markuplint:
 
-| Selector Type     | Code Example      |
-| ----------------- | ----------------- |
-| ARIA pseudo-class | `:aria(has name)` |
+| Selector Type              | Code Example          |
+| -------------------------- | --------------------- |
+| ARIA pseudo-class          | `:aria(has name)`     |
+| ARIA Role pseudo-class     | `:role(heading)`      |
+| Content Model pseudo-class | `:model(interactive)` |
 
 ### ARIA pseudo-class
 
 ```
 :aria(syntax)
-:aria(syntax/version)
 ```
 
-| Syntax         | Example                                                 | Description                     |
-| -------------- | ------------------------------------------------------- | ------------------------------- |
-| `has name`     | `:aria(has name)`<br>`:aria(has name/1.1)`              | It has accessible name          |
-| `has no name`  | `:aria(has no name)`<br>`:aria(has no name/1.1)`        | It does'nt have accessible name |
-| `role is Role` | `:aria(role is banner)`<br>`:aria(role is generic/1.2)` | It matches the specfied role    |
+| Syntax        | Example              | Description                                    |
+| ------------- | -------------------- | ---------------------------------------------- |
+| `has name`    | `:aria(has name)`    | Matches the element has accessible name        |
+| `has no name` | `:aria(has no name)` | Matches the element has **no** accessible name |
+
+### ARIA Role pseudo-class
+
+```
+:role(roleName)
+:role(roleName|version)
+```
+
+For example, `:role(button)` matches `<button>` and `<div role="button">`.
+
+You can specify the version of WAI-ARIA by separating the pipe like `:role(form|1.1)`.
+
+### Content Model pseudo-class
+
+```
+:model(interactive)
+:model(palpable)
+```
+
+For example, `:role(interactive)` matches `<a>`(with `href` attr), `<button>`, and so on.
 
 ## Regex Selector
 

package/lib/create-selector.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSelector = void 0;
 const aria_pseudo_class_1 = require("./extended-selector/aria-pseudo-class");
+const aria_role_pseudo_class_1 = require("./extended-selector/aria-role-pseudo-class");
+const content_model_pseudo_class_1 = require("./extended-selector/content-model-pseudo-class");
 const selector_1 = require("./selector");
 const caches = new Map();
 function createSelector(selector, specs) {
@@ -10,7 +12,9 @@ function createSelector(selector, specs) {
         return instance;
     }
     instance = new selector_1.Selector(selector, {
-        aria: (0, aria_pseudo_class_1.ariaPseudoClass)(specs),
+        model: (0, content_model_pseudo_class_1.contentModelPseudoClass)(specs),
+        aria: (0, aria_pseudo_class_1.ariaPseudoClass)(),
+        role: (0, aria_role_pseudo_class_1.ariaRolePseudoClass)(specs),
     });
     caches.set(selector, instance);
     return instance;

package/lib/extended-selector/aria-pseudo-class.d.ts

@@ -1,3 +1,5 @@
 import type { SelectorResult } from '../types';
-import type { MLMLSpec } from '@markuplint/ml-spec';
-export declare function ariaPseudoClass(specs: MLMLSpec): (content: string) => (el: Element) => SelectorResult;
+/**
+ * Version Syntax is not support yet.
+ */
+export declare function ariaPseudoClass(): (content: string) => (el: Element) => SelectorResult;

package/lib/extended-selector/aria-pseudo-class.js

@@ -2,31 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ariaPseudoClass = void 0;
 const ml_spec_1 = require("@markuplint/ml-spec");
-const roleIsRegxp = /^roleis/gi;
-function ariaPseudoClass(specs) {
+/**
+ * Version Syntax is not support yet.
+ */
+function ariaPseudoClass() {
     return (content) => (el) => {
-        var _a, _b;
         const aria = ariaPseudoClassParser(content);
+        const name = (0, ml_spec_1.getAccname)(el);
         switch (aria.type) {
             case 'hasName': {
-                const name = (0, ml_spec_1.getAccname)(el);
+                if (name) {
+                    return {
+                        specificity: [0, 1, 0],
+                        matched: true,
+                        nodes: [el],
+                        has: [],
+                    };
+                }
                 return {
                     specificity: [0, 1, 0],
-                    matched: !!name,
+                    matched: false,
                 };
             }
             case 'hasNoName': {
-                const name = (0, ml_spec_1.getAccname)(el);
+                if (!name) {
+                    return {
+                        specificity: [0, 1, 0],
+                        matched: true,
+                        nodes: [el],
+                        has: [],
+                    };
+                }
                 return {
                     specificity: [0, 1, 0],
-                    matched: !name,
-                };
-            }
-            case 'roleIs': {
-                const computed = (0, ml_spec_1.getComputedRole)(specs, el, (_a = aria.version) !== null && _a !== void 0 ? _a : '1.2');
-                return {
-                    specificity: [0, 1, 0],
-                    matched: ((_b = computed.role) === null || _b === void 0 ? void 0 : _b.name) === aria.role,
+                    matched: false,
                 };
             }
         }
@@ -51,16 +60,5 @@ function ariaPseudoClassParser(syntax) {
             };
         }
     }
-    if (roleIsRegxp.test(query)) {
-        const role = query.replace(roleIsRegxp, '');
-        if (!role) {
-            throw new SyntaxError(`Unsupported syntax: ${syntax}`);
-        }
-        return {
-            type: 'roleIs',
-            role,
-            version,
-        };
-    }
     throw new SyntaxError(`Unsupported syntax: ${syntax}`);
 }

package/lib/extended-selector/aria-role-pseudo-class.d.ts

@@ -0,0 +1,3 @@
+import type { SelectorResult } from '../types';
+import type { MLMLSpec } from '@markuplint/ml-spec';
+export declare function ariaRolePseudoClass(specs: MLMLSpec): (content: string) => (el: Element) => SelectorResult;

package/lib/extended-selector/aria-role-pseudo-class.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ariaRolePseudoClass = void 0;
+const ml_spec_1 = require("@markuplint/ml-spec");
+function ariaRolePseudoClass(specs) {
+    return (content) => (el) => {
+        var _a, _b;
+        const aria = ariaPseudoClassParser(content);
+        const computed = (0, ml_spec_1.getComputedRole)(specs, el, (_a = aria.version) !== null && _a !== void 0 ? _a : '1.2');
+        if (((_b = computed.role) === null || _b === void 0 ? void 0 : _b.name) === aria.role) {
+            return {
+                specificity: [0, 1, 0],
+                matched: true,
+                nodes: [el],
+                has: [],
+            };
+        }
+        return {
+            specificity: [0, 1, 0],
+            matched: false,
+        };
+    };
+}
+exports.ariaRolePseudoClass = ariaRolePseudoClass;
+function ariaPseudoClassParser(syntax) {
+    const [roleName, _version] = syntax.split('|');
+    const version = _version === '1.1' ? '1.1' : '1.2';
+    return {
+        role: roleName.trim().toLowerCase(),
+        version,
+    };
+}

package/lib/extended-selector/content-model-pseudo-class.d.ts

@@ -0,0 +1,3 @@
+import type { SelectorResult } from '../types';
+import type { MLMLSpec } from '@markuplint/ml-spec';
+export declare function contentModelPseudoClass(specs: MLMLSpec): (category: string) => (el: Element) => SelectorResult;

package/lib/extended-selector/content-model-pseudo-class.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentModelPseudoClass = void 0;
+const ml_spec_1 = require("@markuplint/ml-spec");
+const create_selector_1 = require("../create-selector");
+function contentModelPseudoClass(specs) {
+    return (category) => (el) => {
+        category = category.trim().toLowerCase();
+        const selectors = (0, ml_spec_1.contentModelCategoryToTagNames)(`#${category}`, specs.def);
+        const matched = selectors
+            .map(selector => {
+            if (selector === '#custom') {
+                // @ts-ignore
+                if (el.isCustomElement) {
+                    return [
+                        {
+                            specificity: [0, 1, 0],
+                            matched: true,
+                            nodes: [el],
+                            has: [],
+                        },
+                    ];
+                }
+                return [
+                    {
+                        specificity: [0, 1, 0],
+                        matched: false,
+                    },
+                ];
+            }
+            if (selector === '#text') {
+                return [
+                    {
+                        specificity: [0, 1, 0],
+                        matched: false,
+                    },
+                ];
+            }
+            return (0, create_selector_1.createSelector)(selector, specs).search(el);
+        })
+            .flat()
+            .filter((m) => m.matched);
+        if (matched.length) {
+            return {
+                specificity: [0, 1, 0],
+                matched: true,
+                nodes: matched.map(m => (m.matched ? m.nodes : [])).flat(),
+                has: matched.map(m => (m.matched ? m.has : [])).flat(),
+            };
+        }
+        return {
+            specificity: [0, 1, 0],
+            matched: false,
+        };
+    };
+}
+exports.contentModelPseudoClass = contentModelPseudoClass;

package/lib/match-selector.js

@@ -1,6 +1,8 @@
 "use strict";
+var _SelectorTarget_combinedFrom, _SelectorTarget_selector;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.matchSelector = void 0;
+const tslib_1 = require("tslib");
 const is_1 = require("./is");
 const regex_selector_matches_1 = require("./regex-selector-matches");
 const selector_1 = require("./selector");
@@ -40,24 +42,25 @@ function regexSelect(el, selector) {
 }
 class SelectorTarget {
     constructor(selector) {
-        this._combinatedFrom = null;
-        this._selector = selector;
+        _SelectorTarget_combinedFrom.set(this, null);
+        _SelectorTarget_selector.set(this, void 0);
+        tslib_1.__classPrivateFieldSet(this, _SelectorTarget_selector, selector, "f");
     }
     from(target, combinator) {
-        this._combinatedFrom = { target, combinator };
+        tslib_1.__classPrivateFieldSet(this, _SelectorTarget_combinedFrom, { target, combinator }, "f");
     }
     match(el) {
-        const unitCheck = this._matchWithoutCombinateChecking(el);
+        const unitCheck = this._matchWithoutCombineChecking(el);
         if (!unitCheck.matched) {
             return unitCheck;
         }
-        if (!this._combinatedFrom) {
+        if (!tslib_1.__classPrivateFieldGet(this, _SelectorTarget_combinedFrom, "f")) {
             return unitCheck;
         }
         if (!(0, is_1.isNonDocumentTypeChildNode)(el)) {
             return unitCheck;
         }
-        const { target, combinator } = this._combinatedFrom;
+        const { target, combinator } = tslib_1.__classPrivateFieldGet(this, _SelectorTarget_combinedFrom, "f");
         switch (combinator) {
             // Descendant combinator
             case ' ': {
@@ -132,15 +135,16 @@ class SelectorTarget {
                 return { matched: false };
             }
             default: {
-                throw new Error(`Unsupported ${this._combinatedFrom.combinator} combinator in selector`);
+                throw new Error(`Unsupported ${tslib_1.__classPrivateFieldGet(this, _SelectorTarget_combinedFrom, "f").combinator} combinator in selector`);
             }
         }
     }
-    _matchWithoutCombinateChecking(el) {
-        return uncombinatedRegexSelect(el, this._selector);
+    _matchWithoutCombineChecking(el) {
+        return uncombinedRegexSelect(el, tslib_1.__classPrivateFieldGet(this, _SelectorTarget_selector, "f"));
     }
 }
-function uncombinatedRegexSelect(el, selector) {
+_SelectorTarget_combinedFrom = new WeakMap(), _SelectorTarget_selector = new WeakMap();
+function uncombinedRegexSelect(el, selector) {
     if (!(0, is_1.isElement)(el)) {
         return {
             matched: false,

package/lib/regex-selector-matches.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.regexSelectorMatches = void 0;
 function regexSelectorMatches(reg, raw, ignoreCase) {
     const res = {};
-    const pattern = toRegxp(reg);
+    const pattern = toRegexp(reg);
     const regex = new RegExp(pattern instanceof RegExp ? pattern : `^${pattern.trim()}$`, ignoreCase ? 'i' : undefined);
     const matched = regex.exec(raw);
     if (!matched) {
@@ -16,7 +16,7 @@ function regexSelectorMatches(reg, raw, ignoreCase) {
     };
 }
 exports.regexSelectorMatches = regexSelectorMatches;
-function toRegxp(pattern) {
+function toRegexp(pattern) {
     const matched = pattern.match(/^\/(.+)\/([ig]*)$/i);
     if (matched) {
         return new RegExp(matched[1], matched[2]);

package/lib/selector.d.ts

@@ -4,5 +4,6 @@ export declare class Selector {
     #private;
     constructor(selector: string, extended?: ExtendedPseudoClass);
     match(el: Node, scope?: ParentNode | null): Specificity | false;
+    search(el: Node, scope?: ParentNode | null): SelectorResult[];
 }
 export {};