npm - @askviraj/linter - Versions diffs - 1.1.2 → 1.1.3 - Mend

@askviraj/linter 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (650) hide show

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/developer/custom-adapters.mdx DELETED Viewed

@@ -1,273 +0,0 @@
----
-title: Custom Adapters
-description: Learn how to create and test custom adapters for capo.js.
----
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-This guide explains how to create custom adapters for capo.js and validate them using the built-in test utilities.
-## Why custom adapters?
-Custom adapters allow you to use capo.js with different HTML parsers or AST formats, such as:
-- JSX/React elements
-- Vue template AST
-- Svelte component AST
-- Custom XML parsers
-- Server-side rendering frameworks
-## Creating a custom adapter
-### Step 1: Extend the AdapterInterface
-```javascript
-import { AdapterInterface } from '@rviscomi/capo.js/adapters';
-export class MyCustomAdapter extends AdapterInterface {
-  // Implement all 11 required methods
-  isElement(node) {
-    return node && node.type === 'YourElementType';
-  }
-  getTagName(node) {
-    return node.tagName?.toLowerCase() || '';
-  }
-  getAttribute(node, name) {
-    // ...
-  }
-  // Implement other required methods:
-  // hasAttribute, getAttributeNames, getTextContent,
-  // getChildren, getParent, getSiblings, stringify
-}
-```
-### Step 2: Use your adapter
-```javascript
-import { MyCustomAdapter } from './my-custom-adapter.js';
-import { analyzeHead } from '@rviscomi/capo.js';
-const adapter = new MyCustomAdapter();
-const results = analyzeHead(headNode, adapter);
-```
-## Node.js usage
-While capo.js is designed for the browser, you can use it in Node.js by pairing it with a DOM simulation library like [jsdom](https://github.com/jsdom/jsdom).
-Since jsdom provides a standard DOM API, you can reuse the built-in `BrowserAdapter` instead of writing a custom one:
-```javascript
-import { JSDOM } from 'jsdom';
-import { analyzeHead, BrowserAdapter } from '@rviscomi/capo.js';
-const html = `
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <title>My Page</title>
-      <meta charset="utf-8">
-    </head>
-    <body></body>
-  </html>
-`;
-// 1. Create a JSDOM instance
-const dom = new JSDOM(html);
-const head = dom.window.document.querySelector('head');
-// 2. Use the built-in BrowserAdapter
-const adapter = new BrowserAdapter();
-// 3. Analyze
-const results = analyzeHead(head, adapter);
-console.log(results.weights);
-```
-## Validating your adapter
-capo.js provides **three levels of validation** for custom adapters:
-The simplest validation is to ensure your adapter implements the required interface:
-```javascript
-import { validateAdapter } from '@rviscomi/capo.js/adapters';
-import { MyCustomAdapter } from './my-custom-adapter.js';
-const adapter = new MyCustomAdapter();
-validateAdapter(adapter); // Throws if invalid
-```
-**What it checks:**
-- Adapter class is a valid constructor
-- Adapter can be instantiated
-- All 11 required methods are implemented
-**When to use:** Quick validation during development.
-### Level 2: Programmatic validation
-Use the `validateAdapter()` function for explicit validation:
-```javascript
-import { validateAdapter } from '@rviscomi/capo.js/adapters';
-import { MyCustomAdapter } from './my-custom-adapter.js';
-const adapter = new MyCustomAdapter();
-try {
-  validateAdapter(adapter);
-  console.log('✅ Adapter is valid!');
-} catch (error) {
-  console.error('❌ Adapter validation failed:', error.message);
-}
-```
-**What it checks:**
-- All 11 required methods exist
-- Each method is a function
-**When to use:** Integration tests, CI/CD pipelines.
-### Level 3: Full test suite
-Run the comprehensive test suite to validate behavior:
-```javascript
-import { describe } from 'node:test';
-import { runAdapterTestSuite, testAdapterCompliance } from '@rviscomi/capo.js/adapters/test-suite';
-import { MyCustomAdapter } from './my-custom-adapter.js';
-import { parseHtml } from './my-parser.js';  // Your parser
-describe('MyCustomAdapter', () => {
-  // Full test suite - tests all methods with edge cases
-  runAdapterTestSuite(MyCustomAdapter, {
-    createElement: (htmlString) => {
-      // Your logic to create a node from HTML
-      return parseHtml(htmlString);
-    },
-    supportsLocation: true  // true if getLocation() works
-  });
-  // OR: Quick compliance check only
-  testAdapterCompliance(MyCustomAdapter);
-});
-```
-### Note on parent pointers
-Some adapters, like those for ESLint, require parent pointers on nodes to support `getParent()` and `getSiblings()`. If your parser doesn't provide these pointers by default (like `@html-eslint/parser`), you must shim them in your test setup.
-For ESLint adapters, it's recommended to use ESLint's `RuleTester` in your tests to provide a realistic environment where parent pointers are automatically injected:
-```javascript
-import { RuleTester } from 'eslint';
-import * as htmlParser from 'your-html-parser'; // e.g., @html-eslint/parser
-const ruleTester = new RuleTester({
-  languageOptions: { parser: htmlParser }
-});
-runAdapterTestSuite(MyAdapter, {
-  createElement: (html) => {
-    let capturedNode = null;
-    ruleTester.run('capture', {
-      create: () => ({
-        Tag: (node) => { if (!capturedNode) capturedNode = node; }
-      })
-    }, {
-      valid: [html]
-    });
-    return capturedNode;
-  }
-});
-```
-**What it tests:**
-- All 11 methods with various inputs
-- Edge cases (null, undefined, empty strings)
-- Expected return types
-- Case-insensitivity
-- 39 individual test cases
-**When to use:** Comprehensive validation before release.
-## Best practices
-1. **Extend `AdapterInterface`** to get base implementation.
-2. **Handle null/undefined** inputs in all methods.
-3. **Expect lowercase attribute names** as inputs.
-4. **Shim parent pointers** if needed for `getParent`/`getSiblings`.
-5. **Run the test suite** to verify compliance.
-## API reference
-### runAdapterTestSuite(AdapterClass, options)
-Runs comprehensive tests on a custom adapter.
-**Parameters:**
-- `AdapterClass` (Function) - The adapter constructor to test
-- `options` (Object)
-  - `createElement` (Function) - Function that creates test nodes from HTML strings
-  - `supportsLocation` (boolean, optional) - Whether adapter supports `getLocation()`. Default: `false`
-**Example:**
-```javascript
-runAdapterTestSuite(MyAdapter, {
-  createElement: (html) => parseHtml(html),
-  supportsLocation: true
-});
-```
-### testAdapterCompliance(AdapterClass)
-Quick compliance check that verifies all required methods exist.
-**Parameters:**
-- `AdapterClass` (Function) - The adapter constructor to test
-**Example:**
-```javascript
-testAdapterCompliance(MyAdapter);
-```
-### validateAdapter(adapter)
-Programmatically validates an adapter instance.
-**Parameters:**
-- `adapter` (Object) - Adapter instance to validate
-**Throws:** Error if validation fails
-**Example:**
-```javascript
-const adapter = new MyAdapter();
-validateAdapter(adapter);  // throws if invalid
-```
-## Troubleshooting
-**"Adapter missing required method: X"**
-- Ensure your adapter implements all 11 required methods
-- Check for typos in method names
-- Verify methods are functions, not properties
-**"Cannot detect adapter for node"**
-- Capo.js no longer uses auto-detection. You must explicitly provide the adapter instance to analysis functions.
-**Tests failing with "createElement is required"**
-- You must provide a `createElement` function in test options
-- This function should convert HTML strings to your parser's node format
-## Support
-For questions or issues with custom adapters:
-- [GitHub Issues](https://github.com/rviscomi/capo.js/issues)
-- [Discussions](https://github.com/rviscomi/capo.js/discussions)

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/index.mdx DELETED Viewed

@@ -1,108 +0,0 @@
----
-title: "capo.js: get your ﹤𝚑𝚎𝚊𝚍﹥ in order"
-description: Getting starting with capo.js
-hero:
-  title: capo.js
-  tagline: Get your <code>&lt;head></code> in order
-  image:
-    file: ../../assets/capo256.png
-  actions:
-    - text: Try it live
-      link: /capo.js/user/demo/
-      icon: rocket
-      variant: primary
-    - text: Browse the source
-      link: https://github.com/rviscomi/capo.js
-      icon: external
----
-import { Card, CardGrid } from '@astrojs/starlight/components';
-:::tip[Inspiration]
-This tool was built by [Rick Viscomi](https://twitter.com/rick_viscomi) and directly inspired by [Harry Roberts](https://twitter.com/csswizardry)' work on [ct.css](https://csswizardry.com/ct/) and [Vitaly Friedman](https://twitter.com/vitalyf)'s [2022 presentation](https://youtu.be/uqLl-Yew2o8?t=2873) at Nordic.js.
-:::
-## Why it matters
-How you order elements in the `<head>` can have an effect on the (perceived) performance of the page.
-Capo helps you identify which elements are out of order.
-## How to use it
-1. Install the [Capo Chrome extension](https://chromewebstore.google.com/detail/capo-get-your-%3Chead%3E-in-o/ohabpnaccigjhkkebjofhpmebofgpbeb)
-OR:
-1. Install the [Chrome extension](https://chromewebstore.google.com/detail/capo-get-your-%3Chead%3E-in-o/ohabpnaccigjhkkebjofhpmebofgpbeb)
-3. Explore the console logs
-![Capo running in Chrome](../../assets/capo-chrome.png)
-For applications that add lots of dynamic content to the `<head>` on the client, it'd be more accurate to look at the server-rendered `<head>` instead.
-### Chrome extension
-![Closeup of the Capo extension running in Chrome](../../assets/capo-extension.png)
-WIP see the [extension](/capo.js/user/extension/) guide.
-### Other
-Alternatively, you can use local overrides in DevTools to manually inject the capo.js script into the document so that it runs before anything else, eg the first child of `<body>`. Harry Roberts also has a nifty [video](https://www.youtube.com/watch?v=UOn0b5kn3jk) showing how to use this feature. This has some drawbacks as well, for example the inline script might be blocked by CSP.
-Another idea would be to use something like Cloudflare workers to inject the script into the HTML stream. To work around CSP issues, you can write the worker in such a way that it parses out the correct `nonce` and adds it to the inline script. _(Note: Not tested, but please share examples if you get it working! _😄_)_
-## Summary view
-The script logs two info groups to the console: the actual order of the `<head>`, and the optimal order. In this collapsed view, you can see at a glance whether there are any high impact elements out of order.
-Each "weight" has a corresponding color, with red being the highest and blue/grey being the lowest. See [rules.js](https://github.com/rviscomi/capo.js/blob/main/src/lib/rules.js) for the exact mapping.
-Here are a few examples.
-### `www.nytimes.com`
-<img width="1314" alt="image" src="https://github.com/rviscomi/capo.js/assets/1120896/5c19e758-9f88-42c1-81e8-9f757a6c92be"/>
-### `docs.github.io`
-<img width="819" alt="image" src="https://github.com/rviscomi/capo.js/assets/1120896/798a0e99-04dd-4d27-a241-b5d77320a46e"/>
-### `web.dev`
-<img width="842" alt="image" src="https://github.com/rviscomi/capo.js/assets/1120896/fe6bb67c-697a-4fdf-aa28-52429239fcf5"/>
-### `stackoverflow.com`
-<img width="626" alt="image" src="https://github.com/rviscomi/capo.js/assets/1120896/8964fed2-e933-4795-ada6-79c56cbc416d"/>
-## Detailed view
-Expanding the actual or sorted views reveals the detailed view. This includes an itemized list of each `<head>` element and its weight as well as a reference to the actual or sorted `<head>` element.
-### `www.nytimes.com`
-Here you can see a drilled-down view of the end of the `<head>` for the NYT site, where high impact origin trial meta elements are set too late.
-<img width="472" alt="image" src="https://github.com/rviscomi/capo.js/assets/1120896/c0342d54-9e23-4b91-8df1-277c251ee0c5"/>
-## Next steps
-<CardGrid stagger>
-  <Card title="Try it" icon="open-book">
-    Read the [quick start guide](/capo.js/user/quick-start/).
-  </Card>
-  <Card title="Get the extension" icon="external">
-    Go to [rviscomi.dev/capo-crx](https://rviscomi.dev/capo-crx) to install the extension.
-  </Card>
-  <Card title="Start contributing" icon="setting">
-    [Contribute](/capo.js/developer/contributing/) to the Capo project.
-  </Card>
-  <Card title="Submit an issue" icon="error">
-    Something not working? [File an issue on GitHub.](https://github.com/rviscomi/capo.js/issues/new)
-  </Card>
-</CardGrid>

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/migration-v2.mdx DELETED Viewed

@@ -1,62 +0,0 @@
----
-title: Migration to v2.0.0
-description: Guide for migrating from v1 to v2 of Capo.js
----
-## Breaking changes
-### Programmatic API restructuring
-The library has been refactored to provide a more direct and modern API. The previous version exported modules as namespaces, whereas v2.0.0 exports functions and constants directly.
-**Before (v1):**
-```javascript
-import { rules, validation } from '@rviscomi/capo.js';
-const weight = rules.getWeight(element);
-const isValid = validation.isValidElement(element);
-```
-**After (v2):**
-```javascript
-import { getWeight, isValidElement, BrowserAdapter } from '@rviscomi/capo.js';
-const adapter = new BrowserAdapter();
-const weight = getWeight(element, adapter);
-const isValid = isValidElement(element, adapter);
-```
-### Removal of WebPageTest and BigQuery support
-Support for WebPageTest and BigQuery has been removed from the core library to reduce maintenance burden and focus on the core analysis engine. This includes the removal of the `webpagetest/` and `bigquery/` directories.
-### Removal of Capo.js snippet
-The standalone Capo.js snippet has been removed. Users are encouraged to use the Chrome extension or the programmatic API.
-## New features and improvements
-### New adapter system
-Capo.js now supports a flexible adapter system, allowing it to run on different DOM implementations.
-- **Built-in adapter**: The `BrowserAdapter` is provided for standard browser DOM environments.
-- **Custom adapters**: Consumers can implement their own adapters by extending the base `AdapterInterface` class. This enables Capo.js to work with different parsers (like JSDOM or ASTs), unlocking its use in static analysis tools.
-```javascript
-import { BrowserAdapter, analyzeHead } from '@rviscomi/capo.js';
-const adapter = new BrowserAdapter();
-const results = analyzeHead(document.head, adapter);
-```
-### New validation rules
-- **Font preload missing crossorigin**: Capo.js now validates that font preloads include the `crossorigin` attribute.
-### Virtual console
-The demo page now includes a virtual console, making it easier to see Capo output right in the docs, without needing to open the browser console.

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/user/actionability.mdx DELETED Viewed

@@ -1,6 +0,0 @@
----
-title: Interpreting results
-description: Learn how to interpret and act on the capo.js results
----
-Coming soon

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/user/assessment-mode.mdx DELETED Viewed

@@ -1,29 +0,0 @@
----
-title: Static vs dynamic assessment modes
-description: Learn about and when to use static versus dynamic assessment modes
----
-Capo.js supports two modes of assessment: **static** and **dynamic**. Understanding the difference between these modes is crucial for interpreting the results and choosing the right tool for the job.
-## Static Mode
-In static mode, Capo.js analyzes the server-rendered HTML of the page. This is achieved by fetching the page's URL and parsing the returned HTML.
-1.  Capo.js fetches the current page's URL.
-2.  It parses the response body to extract the `<head>` element.
-3.  It analyzes the elements within this static `<head>`.
-Static mode is ideal when you want to see how the page is delivered from the server, before any client-side JavaScript has modified the DOM. This is useful for identifying issues with the initial HTML structure.
-Static mode is the default mode in the Capo.js Chrome Extension.
-## Dynamic Mode
-In dynamic mode, Capo.js analyzes the current state of the DOM in the browser.
-1.  Capo.js accesses the `document.head` element directly.
-2.  It analyzes the elements currently present in the `<head>`.
-Dynamic mode is useful when you want to see the final state of the `<head>` after client-side scripts have run. This can help identify elements added or modified dynamically, which might affect performance or behavior.
-Dynamic mode is the default mode when using the CLI, and can be enabled in the Chrome Extension options.

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/user/config.mdx DELETED Viewed

@@ -1,195 +0,0 @@
----
-title: Configuring capo.js
-description: Learn how to use config options to customize the capo.js behavior
----
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-import CapoOptions from '../../../components/CapoOptions.astro';
-import CapoPalette from '../../../components/CapoPalette.astro';
-import InlineCapoIcon from '../../../components/InlineCapoIcon.astro';
-You can configure how capo.js behaves in a couple of different ways depending on which tool you're using.
-## Configuration options
-By default, capo.js will:
-  - Prefer to evaluate the static, server-rendered head
-  - Validate the elements in the `<head>`
-  - Print using the default color palette
-  - Use the `Capo:` logging prefix
-### Static and dynamic evaluation
-By default, capo.js will try to evaluate a page's static `<head>`. This is important for validation, because browsers will automatically close the `<head>` when they encounter an invalid element. Without it, capo.js doesn't know which elements were originally marked up to be in the `<head>`.
-Static evaluation is also useful if you want to ignore the order of dynamically injected elements. For example, if a third party script appends a `<meta>` element to the `<head>` after the page has already loaded, not only is that outside of your control, but it also doesn't have an adverse affect on the initial loading performance.
-:::caution[Reliability warning]
-In some cases, the static `<head>` can't be evaluated. For example, some pages have no explicit `<head>` tags at all. When this happens, capo.js will fall back to dynamic evaluation. This is indicated by a warning in the console:
-> _Unable to parse the static (server-rendered) `<head>`. Falling back to document.head_
-In a very small number of [cases](https://github.com/rviscomi/capo.js/issues/31), getting the static `<head>` might cause the page to crash without falling back. If this affects you, you can explicitly set the `preferredAssessmentMode` parameter to `"dynamic"` to force capo.js to use dynamic evaluation.
-:::
-To use static evaluation, omit the `preferredAssessmentMode` parameter, or explicitly set it to `"static"`.
-To use dynamic evaluation, set the `preferredAssessmentMode` parameter to `"dynamic"`.
-### Validation
-By default, capo.js will log validation warnings, including things like [HTML spec](https://html.spec.whatwg.org/multipage/semantics.html#the-head-element) violations, major performance concerns, or expired origin trial tokens.
-![Validation example](../../../assets/validation-csp.png)
-To enable validation, omit the `validation` parameter, or explicitly set it to `true`.
-To disable validation, set the `validation` parameter to `false`.
-### Built-in color palettes
-capo.js supports three built-in color palettes:
-- `"DEFAULT"` (rainbow)
-- `"PINK"`
-- `"BLUE"`
-The extension supports [custom color palettes](#custom-color-palette).
-#### Default
-<CapoPalette colors='[
-  "#9e0142",
-  "#d53e4f",
-  "#f46d43",
-  "#fdae61",
-  "#fee08b",
-  "#e6f598",
-  "#abdda4",
-  "#66c2a5",
-  "#3288bd",
-  "#5e4fa2",
-  "#cccccc"
-]' />
-#### Pink
-<CapoPalette colors='[
-  "oklch(5% .1 320)",
-  "oklch(13% .2 320)",
-  "oklch(25% .2 320)",
-  "oklch(35% .25 320)",
-  "oklch(50% .27 320)",
-  "oklch(67% .31 320)",
-  "oklch(72% .25 320)",
-  "oklch(80% .2 320)",
-  "oklch(90% .1 320)",
-  "oklch(99% .05 320)",
-  "#ccc"
-]' />
-#### Blue
-<CapoPalette colors='[
-  "oklch(5% .1 200)",
-  "oklch(13% .2 200)",
-  "oklch(25% .2 200)",
-  "oklch(35% .25 200)",
-  "oklch(50% .27 200)",
-  "oklch(67% .31 200)",
-  "oklch(72% .25 200)",
-  "oklch(80% .2 200)",
-  "oklch(90% .1 200)",
-  "oklch(99% .05 200)",
-  "#ccc"
-]' />
-## Configuring the extension
-Open the **Options** page to configure the [extension](/capo.js/user/extension/):
-1. Right click on the extension icon <InlineCapoIcon />
-    ![The context menu shown after right clicking the extension icon](../../../assets/crx-menu.png)
-2. Select **Options**
-Select or deselect the options you want to enable or disable.
-<CapoOptions/>
-Options are saved automatically after each change.
-:::note
-The extension doesn't support custom logging prefixes. Also, only [built-in color palettes](#built-in-color-palettes) are available.
-:::
-For example, the default values are:
-```js
-window.__CAPO__ = {
-  // [ 'static' | 'dynamic' ]
-  preferredAssessmentMode: 'static',
-  // [ true | false ]
-  validation: true,
-  // [ 'DEFAULT' | 'PINK' | 'BLUE' | ColorArray ]
-  palette: 'DEFAULT',
-  // Any string
-  loggingPrefix: 'Capo: '
-}
-```
-Or if you only wanted to disable validation:
-```js
-window.__CAPO__ = {
-  validation: false
-}
-```
-The `__CAPO__` object must be set in the global scope (`window`) before capo.js runs for it to take effect.
-### Custom color palette
-The `palette` config property accepts string constants for preset color palettes: `DEFAULT`, `PINK`, and `BLUE`. It also optionally accepts an array of colors for a custom palette.
-For example, if—for whatever reason—you wanted to arrange the colors to match the [2022-2023 NHL standings](https://www.nhl.com/standings/2022/league):
-<CapoPalette colors='[
-  "#FFB81C",
-  "#A4A9AD",
-  "#CE1126",
-  "#00205B",
-  "#B4975A",
-  "#FF4C00",
-  "#6F263D",
-  "#006847",
-  "#0038A8",
-  "#111111",
-  "#154734"
-]' />
-```js
-window.__CAPO__ = {
-  palette: [
-    '#FFB81C', // Bruins
-    '#A4A9AD', // Hurricanes
-    '#CE1126', // Devils
-    '#00205B', // Maple Leafs
-    '#B4975A', // Golden Knights
-    '#FF4C00', // Oilers
-    '#6F263D', // Avalanche
-    '#006847', // Stars
-    '#0038A8', // Rangers
-    '#111111', // Kings
-    '#154734'  // Wild
-  ]
-}
-```
-![The custom color palette in use](../../../assets/custom-palette.png)
-You can provide colors in any format supported by Chrome, for example: hex, rgb, hsl, oklch, named colors, etc. Formats can also be mixed and matched within the same config.
-The array must contain exactly 11 colors.

package/node_modules/@rviscomi/capo.js/docs/src/content/docs/user/demo.mdx DELETED Viewed

@@ -1,9 +0,0 @@
----
-title: Try capo.js live 🚀
-description: Try capo.js
-tableOfContents: false
----
-import CapoClient from '../../../components/CapoClient.astro';
-<CapoClient/>