bestax-migrate 2.29.1 → 2.29.2

package/dist/sources/_shared/html/attributes.d.ts

@@ -23,7 +23,10 @@
  *     passes through as written (`class` aside);
  *   - an `on…` attribute is code React can't run from a string, and a name
  *     JSX can't spell (`@click`, `x-on:click`) can't be written at all; both
- *     are handed back to the caller instead of emitted.
+ *     are handed back to the caller instead of emitted;
+ *   - an attribute HTML gives the element no meaning for, which the browser
+ *     ignores and React's types reject there (`type` on a `<textarea>`), is
+ *     handed back too (`IGNORED`).
  */
 import { type Element } from './parse.js';
 export type PropValue = true | string | {
@@ -44,16 +47,20 @@ export interface Prop {
  * Something the converter can't carry over as written, for the caller to
  * report. Emitted: `unknown-attribute`, `javascript-url`, `style-important`
  * (without its priority), and the element kinds. Not emitted:
- * `attribute-name`, `event-handler`, `style` (the one declaration it
- * quotes), `element-name` (its children are), and a `conditional-comment`.
+ * `attribute-name`, `ignored-attribute`, `event-handler`, `style` (the one
+ * declaration it quotes), `element-name` (its children are), and a
+ * `conditional-comment`.
  */
 export interface HtmlIssue {
-    kind: 'attribute-name' | 'event-handler' | 'unknown-attribute' | 'javascript-url' | 'style' | 'style-important' | 'custom-element' | 'obsolete-element' | 'unknown-element' | 'template' | 'element-name' | 'conditional-comment';
+    kind: 'attribute-name' | 'ignored-attribute' | 'event-handler' | 'unknown-attribute' | 'javascript-url' | 'style' | 'style-important' | 'custom-element' | 'obsolete-element' | 'unknown-element' | 'template' | 'element-name' | 'conditional-comment';
     /** The attribute, tag or CSS property it is about, as written. */
     token: string;
     /** The attribute it is on, for its line. */
     attribute?: string;
-    /** What a report quotes: a handler's code, a style, a declaration. */
+    /**
+     * What a report quotes: a handler's code, a style, a declaration, the tag
+     * an ignored attribute was on.
+     */
     detail?: string;
     /** For an `event-handler`, the React prop that takes a function. */
     prop?: string;

package/dist/sources/_shared/html/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../../src/sources/_shared/html/attributes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAGH,OAAO,EAAqB,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,WAAW,IAAI;IACnB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EACA,gBAAgB,GAChB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,GAChB,OAAO,GACP,iBAAiB,GACjB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,qBAAqB,CAAC;IAC1B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,MAAM,CAwD5C,CAAC;AAuCH;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAMzD;AA8DD,kEAAkE;AAClE,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAED,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,CAiGA;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,GAAE,MAAM,GAAG,KAAc,GAC7B,OAAO,CAET;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI1D"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../../src/sources/_shared/html/attributes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,EAAqB,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,WAAW,IAAI;IACnB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EACA,gBAAgB,GAChB,mBAAmB,GACnB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,GAChB,OAAO,GACP,iBAAiB,GACjB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,qBAAqB,CAAC;IAC1B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,MAAM,CAwD5C,CAAC;AA+CH;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAMzD;AA8DD,kEAAkE;AAClE,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAED,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,CA8GA;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,GAAE,MAAM,GAAG,KAAc,GAC7B,OAAO,CAET;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI1D"}

package/dist/sources/_shared/html/attributes.js

@@ -23,12 +23,16 @@
  *     passes through as written (`class` aside);
  *   - an `on…` attribute is code React can't run from a string, and a name
  *     JSX can't spell (`@click`, `x-on:click`) can't be written at all; both
- *     are handed back to the caller instead of emitted.
+ *     are handed back to the caller instead of emitted;
+ *   - an attribute HTML gives the element no meaning for, which the browser
+ *     ignores and React's types reject there (`type` on a `<textarea>`), is
+ *     handed back too (`IGNORED`).
  */
 import { find, hastToReact, html, svg } from 'property-information';
 import { isElement, isText } from './parse.js';
 import { styleObject } from './style.js';
 import { attributeValue, jsString } from './text.js';
+const HTML = 'http://www.w3.org/1999/xhtml';
 const SVG = 'http://www.w3.org/2000/svg';
 const MATHML = 'http://www.w3.org/1998/Math/MathML';
 /**
@@ -106,6 +110,13 @@ const VALUE_NOT_TYPED = new Set([
     'reset',
     'submit',
 ]);
+/**
+ * Attributes HTML gives these elements no meaning for, by tag: the browser
+ * ignores them, and React's types reject them there, so they are left out.
+ */
+const IGNORED = {
+    textarea: new Set(['type']),
+};
 /** What JSX can write as an attribute name (no namespace, no symbols). */
 const JSX_NAME = /^[A-Za-z_$][\w$-]*$/;
 /**
@@ -244,6 +255,17 @@ export function convertAttributes(element) {
             add(attribute === 'class' ? 'className' : attribute, value, attribute);
             continue;
         }
+        if (element.namespaceURI === HTML &&
+            Object.hasOwn(IGNORED, tag) &&
+            IGNORED[tag].has(attribute.toLowerCase())) {
+            issues.push({
+                kind: 'ignored-attribute',
+                token: attribute,
+                attribute,
+                detail: tag,
+            });
+            continue;
+        }
         if (tag === 'option' && attribute === 'selected' && selectOf(element)) {
             continue; // The select carries it, as its `defaultValue`.
         }

package/dist/sources/bulma-classes/html-rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-rules.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html-rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,EAAE,SAAS,MAAM,EASjD,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAAkC,CAAC;AAE9E,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAO5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAQxC,CAAC;AAoCF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,CAAoC,CAAC;AAKhF,2DAA2D;AAC3D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAErE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/D"}
+{"version":3,"file":"html-rules.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html-rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,EAAE,SAAS,MAAM,EASjD,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAAkC,CAAC;AAE9E,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAO5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAQxC,CAAC;AA2CF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,CAAoC,CAAC;AAKhF,2DAA2D;AAC3D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAErE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/D"}

package/dist/sources/bulma-classes/html-rules.js

@@ -56,7 +56,7 @@ const EVENT_ATTRIBUTES = Object.values(html.property)
     .map(info => info.attribute)
     .filter(attribute => /^on[a-z]+$/.test(attribute));
 const VOCABULARY = {
-    'html-head': new Set(['title', 'meta', 'link', 'style', 'base']),
+    'html-head': new Set(['title', 'meta', 'csp', 'link', 'style', 'base']),
     'html-asset': new Set(ASSET_KINDS),
     'html-script': new Set(SCRIPT_PATTERNS),
     'html-document': new Set([
@@ -79,7 +79,14 @@ const VOCABULARY = {
         'unknown',
     ]),
     'html-url': new Set(['javascript', 'missing', 'relative']),
-    'html-attr': new Set(['important', 'name', 'style', 'unknown']),
+    'html-attr': new Set([
+        'ignored',
+        'important',
+        'name',
+        'stray',
+        'style',
+        'unknown',
+    ]),
     'html-parse': new Set(Object.values(ErrorCodes)),
     'html-file': new Set(['exists', 'not-included', 'template-syntax']),
 };

package/dist/sources/bulma-classes/html.d.ts

@@ -54,12 +54,21 @@ export declare function keepingMost(displays: ReadonlySet<string>): string;
  */
 export declare const pageDisplayOf: DisplayOf;
 /**
- * The component a page becomes: its file's name in PascalCase (its folder's
- * for an `index.html`) and `Page`, so `hero.html` can't shadow bestax's
- * `Hero`. A name starting with a digit starts with `Page` instead
- * (`404.html` is `Page404`), and one with nothing to go by is `Page`.
+ * The component a page becomes: its file's name in PascalCase and `Page`, so
+ * `hero.html` can't shadow bestax's `Hero`. A name starting with a digit
+ * starts with `Page` instead (`404.html` is `Page404`), and one with nothing
+ * to go by is `Page`. An `index.html` is named after its folder, which is
+ * what tells `docs/index.html` from `blog/index.html`, but for the site's home
+ * page: the `index.html` in a folder the run starts from (`roots`, the
+ * project's `runRoots`), with other pages beside it and none of them named
+ * `HomePage` already. Another spelling of the index beside it (`index.htm`)
+ * is no other page: it only competes for the name, and an `index.html` wins
+ * it, so one folder writes one `HomePage`. Only that page's folder is read
+ * for the pages beside it.
  */
-export declare function componentName(file: string): string;
+export declare function componentName(file: string, roots?: unknown): string;
+/** The other HTML pages in a page's folder, by file name. */
+export declare function pagesBeside(file: string): string[];
 /**
  * Where a page's module goes: beside it, `.tsx` when the package around it is
  * TypeScript (a tsconfig, or a dependency on `typescript`), `.jsx` otherwise.

package/dist/sources/bulma-classes/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,KAAK,EAEV,UAAU,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAexB,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAC;AAiEvC;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAYjE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,SAoB3B,CAAC;AAIF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAiBlD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAQR;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAU3E;AA4KD,+EAA+E;AAC/E,eAAO,MAAM,YAAY,wCAAsC,CAAC;AAivBhE;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA4BjD;AAID,+EAA+E;AAC/E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,2EAA2E;IAC3E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAWD,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAgHf;AAED,yCAAyC;AACzC,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,UAAU,CAGZ"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,KAAK,EAEV,UAAU,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAexB,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAC;AAiEvC;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAYjE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,SAoB3B,CAAC;AAsBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAgBnE;AAYD,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAmBlD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAQR;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAU3E;AA4KD,+EAA+E;AAC/E,eAAO,MAAM,YAAY,wCAAsC,CAAC;AAyxBhE;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA4BjD;AAID,+EAA+E;AAC/E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,2EAA2E;IAC3E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAWD,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAsHf;AAgCD,yCAAyC;AACzC,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,UAAU,CAGZ"}

package/dist/sources/bulma-classes/html.js

@@ -40,7 +40,7 @@ import { bulmaDisplay, bulmaOutOfFlow, HELPER_DISPLAY } from './display.js';
 import { bulmaBuildMessage, bulmaMediaMessage, bulmaStylesheetMessage, classifyAsset, extensionMessage, fontAwesomeMessage, jqueryMessage, PRIMARY_CLASS, scriptMessage, stylesheetMessage, webfontMessage, } from './html-assets.js';
 import { htmlRuleId, NAVBAR_FIXED_CLASSES, THEME_CLASSES, } from './html-rules.js';
 import { inNextApp, writesTypeScript } from './project.js';
-import transform from './transform.js';
+import transform, { FILE_RULES } from './transform.js';
 const HTML_NS = 'http://www.w3.org/1999/xhtml';
 function attributeOf(element, name) {
     return element.attrs.find(attr => attr.name === name && !attr.prefix)?.value;
@@ -132,17 +132,8 @@ export const pageDisplayOf = element => {
     return keepingMost(displays);
 };
 // ---- Naming and placing the module -----------------------------------------
-/**
- * The component a page becomes: its file's name in PascalCase (its folder's
- * for an `index.html`) and `Page`, so `hero.html` can't shadow bestax's
- * `Hero`. A name starting with a digit starts with `Page` instead
- * (`404.html` is `Page404`), and one with nothing to go by is `Page`.
- */
-export function componentName(file) {
-    const stem = path.basename(file, path.extname(file));
-    const named = /^index$/i.test(stem)
-        ? path.basename(path.dirname(path.resolve(file)))
-        : stem;
+/** A page's name with nothing but its words, as a component's name. */
+function pageName(named) {
     const words = named.split(/[^\p{L}\p{Nd}]+/u).filter(Boolean);
     const pascal = words
         .map(word => {
@@ -159,6 +150,66 @@ export function componentName(file) {
         name = `${pascal}Page`;
     return /^[\p{ID_Start}$_][\p{ID_Continue}$]*$/u.test(name) ? name : 'Page';
 }
+const HOME = 'HomePage';
+/**
+ * The component a page becomes: its file's name in PascalCase and `Page`, so
+ * `hero.html` can't shadow bestax's `Hero`. A name starting with a digit
+ * starts with `Page` instead (`404.html` is `Page404`), and one with nothing
+ * to go by is `Page`. An `index.html` is named after its folder, which is
+ * what tells `docs/index.html` from `blog/index.html`, but for the site's home
+ * page: the `index.html` in a folder the run starts from (`roots`, the
+ * project's `runRoots`), with other pages beside it and none of them named
+ * `HomePage` already. Another spelling of the index beside it (`index.htm`)
+ * is no other page: it only competes for the name, and an `index.html` wins
+ * it, so one folder writes one `HomePage`. Only that page's folder is read
+ * for the pages beside it.
+ */
+export function componentName(file, roots) {
+    const stem = path.basename(file, path.extname(file));
+    if (!/^index$/i.test(stem))
+        return pageName(stem);
+    const dir = path.dirname(path.resolve(file));
+    const atRoot = Array.isArray(roots) && roots.includes(dir);
+    const beside = atRoot ? pagesBeside(file) : [];
+    const rivals = beside.filter(isIndexPage);
+    const pages = beside.filter(sibling => !isIndexPage(sibling));
+    const own = indexRank(path.basename(file));
+    const home = pages.length > 0 &&
+        pages.every(page => pageName(path.basename(page, path.extname(page))) !== HOME) &&
+        rivals.every(rival => indexRank(rival) > own);
+    return home ? HOME : pageName(path.basename(dir));
+}
+/** Whether a page beside another is its folder's index, by another spelling. */
+function isIndexPage(name) {
+    return /^index\.html?$/i.test(name);
+}
+/** Which of a folder's index pages is its home: `.html` first, then by name. */
+function indexRank(name) {
+    return `${path.extname(name).toLowerCase() === '.html' ? 0 : 1}${name}`;
+}
+/** The other HTML pages in a page's folder, by file name. */
+export function pagesBeside(file) {
+    const dir = path.dirname(path.resolve(file));
+    let names;
+    try {
+        names = fs.readdirSync(dir);
+    }
+    catch {
+        return [];
+    }
+    const own = path.basename(file);
+    const isPage = (name) => {
+        try {
+            return fs.statSync(path.join(dir, name)).isFile();
+        }
+        catch {
+            return false;
+        }
+    };
+    return names
+        .filter(name => name !== own && /\.html?$/i.test(name) && isPage(name))
+        .sort();
+}
 /**
  * Where a page's module goes: beside it, `.tsx` when the package around it is
  * TypeScript (a tsconfig, or a dependency on `typescript`), `.jsx` otherwise.
@@ -232,7 +283,7 @@ const SCRIPT_PATTERNS = [
     [
         'theme',
         /data-theme|dataset\.theme|theme-(?:dark|light)|prefers-color-scheme/,
-        "switches Bulma's light and dark schemes: bestax's `Theme` writes `data-theme` on `<html>` from its `colorMode` (`light`, `dark` or `system`), so keep the choice in state, saved in `localStorage`, and pass it; `Theme` writes the attribute from an effect, after the first paint, so for a saved choice to paint first, keep a small inline script in the `<head>` of the app's index.html that reads it (or the OS's, with none saved) and writes `data-theme` before the app loads, and start the state from what that script wrote",
+        "switches Bulma's light and dark schemes: bestax's `Theme` writes `data-theme` on `<html>` from its `colorMode` (`light`, `dark` or `system`), so keep the choice in state, saved in `localStorage`, and pass it; `Theme` writes the attribute from an effect, after the first paint, so for a saved choice to paint first, keep a small inline script in the `<head>` of the app's index.html that reads it (or the OS's, with none saved) and writes `data-theme` before the app loads, and start the state from what that script wrote (the bestax-theming skill's `examples/dark-mode.tsx` has the script and the app's side)",
     ],
 ];
 /**
@@ -265,7 +316,7 @@ function scriptNotes(script, page) {
         return [
             {
                 rule: htmlRuleId('html-script', 'json-ld'),
-                message: `structured data for search engines (JSON-LD) was dropped with the page's scripts: render it where the app sets each page's head, as \`<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />\`; the JSON is ${kept}`,
+                message: `structured data for search engines (JSON-LD) was dropped with the page's scripts: data about the whole site, or about a single-page app's one page, goes in the app's index.html as it is, where a crawler that runs no JavaScript still reads it, and data that differs from page to page goes where the app sets each page's head, as \`<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />\`; the JSON is ${kept}`,
                 line,
                 endLine,
             },
@@ -479,6 +530,11 @@ function assetNotes(page, root) {
     }
     return { notes, importsBulma };
 }
+/** A `<meta http-equiv>` that sets the page's Content Security Policy. */
+function isCsp(meta) {
+    return ((attributeOf(meta, 'http-equiv') ?? '').trim().toLowerCase() ===
+        'content-security-policy');
+}
 /** What a `<meta>` is for: its `name`, `property`, `http-equiv` or charset. */
 function metaKind(meta) {
     if (attributeOf(meta, 'charset') !== undefined)
@@ -511,7 +567,17 @@ function headNotes(head, notes, page) {
                 });
                 break;
             case 'meta':
-                metas.push(node);
+                if (isCsp(node)) {
+                    notes.push({
+                        rule: htmlRuleId('html-head', 'csp'),
+                        message: "the page's `<head>` sets a Content Security Policy in a `<meta http-equiv>`, which a component can't carry: it was written for what this page loads, and copied into the app's index.html as it is, it can block what the app loads instead (a Vite dev server runs an inline script for React's fast refresh and opens a socket for hot reloading, and the build serves the app's own scripts, styles and fonts), so write the app's own policy, best sent as a response header, and try it under both the dev server and the build",
+                        line,
+                        endLine,
+                    });
+                }
+                else {
+                    metas.push(node);
+                }
                 break;
             case 'link': {
                 const rel = (attributeOf(node, 'rel') ?? '').toLowerCase().split(/\s+/);
@@ -572,6 +638,12 @@ function headNotes(head, notes, page) {
 }
 /** Bulma's light and dark schemes, by `data-theme` value. */
 const SCHEMES = new Set(['light', 'dark']);
+/**
+ * Where a page's scheme goes in the app: on its `<html>`, which the first
+ * paint reads, since `Theme` writes the attribute from an effect, after it.
+ */
+const SCHEME_ON_HTML = "put it on the `<html>` in the app's index.html, where the first paint has it";
+const SCHEME_TOGGLE = "for a scheme the visitor switches, bestax's `Theme colorMode` writes the choice only after that paint, so write a saved one before it too, as the `html-script:theme` recipe says and the bestax-theming skill's `examples/dark-mode.tsx` does";
 function documentAttributeNotes(where, element, notes) {
     if (!element)
         return;
@@ -602,7 +674,7 @@ function documentAttributeNotes(where, element, notes) {
                 else if (THEME_CLASSES.includes(token)) {
                     notes.push({
                         rule: htmlRuleId('html-document', token),
-                        message: `the page's \`<${where}>\` has \`${token}\`, which sets Bulma's ${token.slice(6)} scheme: put it on the \`<html>\` in the app's index.html, or render bestax's \`<Theme colorMode="${token.slice(6)}">\`, which writes \`data-theme\` on \`<html>\``,
+                        message: `the page's \`<${where}>\` has \`${token}\`, which sets Bulma's ${token.slice(6)} scheme: ${SCHEME_ON_HTML}; ${SCHEME_TOGGLE}`,
                         line,
                     });
                 }
@@ -623,9 +695,7 @@ function documentAttributeNotes(where, element, notes) {
             const scheme = value.trim().toLowerCase();
             notes.push({
                 rule: htmlRuleId('html-document', name),
-                message: `the page's \`<${where}>\` has \`data-theme="${quote(value)}"\`, which sets Bulma's color scheme: put it on the \`<html>\` in the app's index.html${SCHEMES.has(scheme)
-                    ? `, or render bestax's \`<Theme colorMode="${scheme}">\`, which writes it on \`<html>\``
-                    : ''}`,
+                message: `the page's \`<${where}>\` has \`data-theme="${quote(value)}"\`, which sets Bulma's color scheme: ${SCHEME_ON_HTML}${SCHEMES.has(scheme) ? `; ${SCHEME_TOGGLE}` : ''}`,
                 line,
             });
             continue;
@@ -711,11 +781,26 @@ function convertedNote(issue) {
                 line,
             };
         case 'attribute-name':
+            // A name with no letter or digit in it is no directive: it is a stray
+            // character the browser read as an attribute (`<figure … \>`).
+            if (!/[\p{L}\p{N}]/u.test(token)) {
+                return {
+                    rule: htmlRuleId('html-attr', 'stray'),
+                    message: `\`${quote(token, 20)}\` in the tag is a stray character, a typo (such as \`\\>\` meant as \`/>\`) that the browser read as the name of an empty attribute: it was left out, so there is nothing to port, and it can go from the page too`,
+                    line,
+                };
+            }
             return {
                 rule: htmlRuleId('html-attr', 'name'),
                 message: `the attribute \`${token}\` was left out, since JSX can't write that name (a framework's directive, such as \`@click\` or \`:class\`, is code to port into the component), or the element already has it under another spelling`,
                 line,
             };
+        case 'ignored-attribute':
+            return {
+                rule: htmlRuleId('html-attr', 'ignored'),
+                message: `\`${token}\` was left out: HTML gives a \`<${issue.detail}>\` no \`${token}\` attribute, so the browser ignored it, and React's types reject it there; there is nothing to port, unless a stylesheet or script of the page's selects on it`,
+                line,
+            };
         case 'unknown-attribute':
             return {
                 rule: htmlRuleId('html-attr', 'unknown'),
@@ -917,7 +1002,7 @@ function outsideCommentLines(comments) {
     });
 }
 function todoLine(note, page) {
-    const message = note.message.replace(/[\r\n\u2028\u2029]+/g, ' ').trim();
+    const message = todoText(note.message);
     const at = note.line === null
         ? ''
         : note.lines !== undefined
@@ -1081,7 +1166,7 @@ export function convertPage(file, source, collector, options = {}) {
         // The transform retargets it under `--css`, as it would in a JSX file.
         ...(assets.importsBulma ? [BULMA_IMPORT] : []),
         ...notes.document.map(note => todoLine(note, page)),
-        `export default function ${componentName(file)}() {`,
+        `export default function ${componentName(file, options.runRoots)}() {`,
         ...contentLines(notes.content, page).map(line => `  ${line}`),
         '  return (',
     ];
@@ -1097,14 +1182,21 @@ export function convertPage(file, source, collector, options = {}) {
     }
     // The transform reads the module's path, so the gates for a server
     // component or another JSX runtime apply to it; its report names the page.
+    const planned = new Map();
     const onPage = {
-        add: entry => collector?.add({
-            ...entry,
-            file,
-            line: entry.line === null || entry.line < jsxStart
+        add: entry => {
+            const line = entry.line === null || entry.line < jsxStart
                 ? null
-                : emitted.htmlLineOf(entry.line - jsxStart + 1),
-        }),
+                : emitted.htmlLineOf(entry.line - jsxStart + 1);
+            // A file-level gate's TODO is about the whole page, so it gets no
+            // page line of the element it sits on.
+            const forFile = FILE_RULES.includes(entry.rule);
+            if (line !== null && !forFile) {
+                const text = todoText(entry.message);
+                planned.set(text, [...(planned.get(text) ?? []), line]);
+            }
+            collector?.add({ ...entry, file, line });
+        },
     };
     const { output } = runTransform(transform, outputPath, intermediate, onPage, {
         ...options,
@@ -1112,10 +1204,37 @@ export function convertPage(file, source, collector, options = {}) {
     });
     return {
         outputPath,
-        output: finishModule(output ?? intermediate),
+        output: finishModule(withPageLines(output ?? intermediate, planned, page)),
         intermediate,
     };
 }
+/** A TODO's message as its comment writes it, on one line. */
+function todoText(message) {
+    return message.replace(/[\r\n\u2028\u2029]+/g, ' ').trim();
+}
+/**
+ * The planner's TODO lines, each with the page's lines it is about. The
+ * transform writes one line for each message, however many elements share
+ * it (five `.icon`s missing the same attribute), above the `return`, so the
+ * lines go on after, the way the page's own notes carry theirs. Nothing from
+ * the `return` on is read, since the page's text is there.
+ */
+function withPageLines(code, planned, page) {
+    if (planned.size === 0)
+        return code;
+    const lines = code.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        if (/^\s*return\b/.test(lines[i]))
+            break;
+        const todo = /^\s*\/\/ TODO\(bestax-migrate\): (.*)$/.exec(lines[i]);
+        const on = todo ? planned.get(todo[1]) : undefined;
+        if (!on)
+            continue;
+        const at = [...new Set(on)].sort((a, b) => a - b).join(', ');
+        lines[i] = `${lines[i]} (${page}:${at})`;
+    }
+    return lines.join('\n');
+}
 /** The `transformHtml` the CLI calls. */
 export function transformHtml(file, source, collector, options = {}) {
     const { outputPath, output } = convertPage(file, source, collector, options);

package/dist/sources/bulma-classes/project.d.ts

@@ -3,11 +3,13 @@
  * see from one file: which files a Next.js App Router may render as server
  * components, which packages render JSX through a runtime other than React,
  * and, for the module an HTML page becomes, which are written in TypeScript
- * and which are Next.js apps, where that module imports no stylesheet.
+ * and which are Next.js apps, where that module imports no stylesheet, and
+ * which folders the run starts from, where an `index.html` is the site's
+ * home page.
  *
  * Read once per run, from every package.json the run touches: the nearest one
  * above each target, and every one below it, so a monorepo run from its root
- * still finds `apps/web`.
+ * still finds `apps/web`. The folders come from the targets themselves.
  */
 /** `jsxImportSource` values whose JSX is React's. */
 export declare const REACT_RUNTIMES: ReadonlySet<string>;
@@ -42,6 +44,12 @@ export interface ProjectFacts {
     serverComponentRoots: ServerComponentRoot[];
     jsxRuntimes: JsxRuntime[];
     packageLanguages: PackageLanguage[];
+    /**
+     * The folders the run starts from, absolute: each folder it names and each
+     * named file's folder, but for one inside another. Only an `index.html`
+     * in one of them can be the site's home page.
+     */
+    runRoots: string[];
 }
 /**
  * The JSX runtime a package declares: what its tsconfig's `jsxImportSource`

package/dist/sources/bulma-classes/project.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"project.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/project.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,MAAM,CAK7C,CAAC;AAqBH,MAAM,WAAW,UAAU;IACzB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,mEAAmE;AACnE,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,gBAAgB,EAAE,eAAe,EAAE,CAAC;CACrC;AA2GD;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,GACjD,MAAM,GAAG,IAAI,CAKf;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CAuD9D;AAcD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,CAE1E;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,CAEnE"}
+{"version":3,"file":"project.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/project.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,MAAM,CAK7C,CAAC;AAqBH,MAAM,WAAW,UAAU;IACzB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,mEAAmE;AACnE,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAmHD;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,GACjD,MAAM,GAAG,IAAI,CAKf;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CA8D9D;AAcD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,CAE1E;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,CAEnE"}

package/dist/sources/bulma-classes/project.js

@@ -3,11 +3,13 @@
  * see from one file: which files a Next.js App Router may render as server
  * components, which packages render JSX through a runtime other than React,
  * and, for the module an HTML page becomes, which are written in TypeScript
- * and which are Next.js apps, where that module imports no stylesheet.
+ * and which are Next.js apps, where that module imports no stylesheet, and
+ * which folders the run starts from, where an `index.html` is the site's
+ * home page.
  *
  * Read once per run, from every package.json the run touches: the nearest one
  * above each target, and every one below it, so a monorepo run from its root
- * still finds `apps/web`.
+ * still finds `apps/web`. The folders come from the targets themselves.
  */
 import fs from 'node:fs';
 import path from 'node:path';
@@ -35,6 +37,11 @@ const SKIP_DIRS = new Set([
     '.next',
     '.e2e-tmp',
 ]);
+/** Whether `dir` is a folder below `parent`. */
+function isInside(dir, parent) {
+    const relative = path.relative(parent, dir);
+    return (relative !== '' && !relative.startsWith('..') && !path.isAbsolute(relative));
+}
 function nearestManifest(target) {
     let dir = path.resolve(target);
     if (fs.statSync(dir, { throwIfNoEntry: false })?.isFile()) {
@@ -162,6 +169,7 @@ export function runtimeOf(dir, deps) {
 }
 export function analyzeProject(targets) {
     const manifests = new Set();
+    const starts = new Set();
     for (const target of targets) {
         const nearest = nearestManifest(target);
         if (nearest)
@@ -169,6 +177,10 @@ export function analyzeProject(targets) {
         const below = [];
         if (fs.statSync(target, { throwIfNoEntry: false })?.isDirectory()) {
             manifestsBelow(path.resolve(target), below);
+            starts.add(path.resolve(target));
+        }
+        else {
+            starts.add(path.dirname(path.resolve(target)));
         }
         for (const manifest of below)
             manifests.add(manifest);
@@ -177,6 +189,9 @@ export function analyzeProject(targets) {
         serverComponentRoots: [],
         jsxRuntimes: [],
         packageLanguages: [],
+        runRoots: [...starts]
+            .filter(dir => ![...starts].some(other => isInside(dir, other)))
+            .sort(),
     };
     for (const manifest of [...manifests].sort()) {
         let pkg;

package/dist/sources/bulma-classes/transform.d.ts

@@ -20,5 +20,11 @@
  */
 import type { API, FileInfo } from 'jscodeshift';
 import type { TransformOptions } from '../../types.js';
+/**
+ * The rules of the gates that leave a whole file alone. Their TODO is about
+ * the file, though it sits on the first element that would convert, so no
+ * line of the file is where it came from.
+ */
+export declare const FILE_RULES: readonly ["jsx-runtime", "imports", "styled-jsx", "rsc"];
 export default function transform(fileInfo: FileInfo, api: API, options?: TransformOptions): string | undefined;
 //# sourceMappingURL=transform.d.ts.map

package/dist/sources/bulma-classes/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAW,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkiCvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CAy9BpB"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAW,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkiCvD;;;;GAIG;AACH,eAAO,MAAM,UAAU,0DAKb,CAAC;AAGX,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CAy9BpB"}

package/dist/sources/bulma-classes/transform.js

@@ -877,6 +877,17 @@ function onlyChildOf(elementPath, bestaxLocals) {
         ? name
         : undefined;
 }
+/**
+ * The rules of the gates that leave a whole file alone. Their TODO is about
+ * the file, though it sits on the first element that would convert, so no
+ * line of the file is where it came from.
+ */
+export const FILE_RULES = [
+    'jsx-runtime',
+    'imports',
+    'styled-jsx',
+    'rsc',
+];
 export default function transform(fileInfo, api, options = {}) {
     const source = fileInfo.source;
     // Cheap pre-filter: no className and no stylesheet import, nothing to do.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-migrate",
-  "version": "2.29.1",
+  "version": "2.29.2",
   "description": "Codemods for migrating existing React apps from other Bulma libraries to @allxsmith/bestax-bulma",
   "type": "module",
   "bin": {
@@ -40,7 +40,7 @@
     "jscodeshift": "^17.3.0",
     "parse5": "^7.3.0",
     "property-information": "^7.2.0",
-    "@allxsmith/bestax-bulma": "^5.39.0"
+    "@allxsmith/bestax-bulma": "^5.40.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",