`dasherize` mangles mid-name and trailing acronyms (`CopyURLElement` throws `SyntaxError`, `@attr URL` -> `data-ur-l`)

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#372 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript, web-dev
Bereich
frontend

Rechercherichtung

Der Fehler steckt in src/dasherize.ts, wo der reguläre Ausdruck .replace(/([A-Z]($|[a-z]))/g, '-$1') festlegt, wo Bindestriche gesetzt werden. Beginne damit, diese Funktion zu lesen, und führe das Reproduktionsskript aus dem Issue gegen lib/dasherize.js aus, um die falschen Ausgaben zu sehen. Fertig ist es, wenn UserIDListElement, CopyURLElement, mySVGIcon, srcURL, data-URL und data-srcURL die im Issue aufgelisteten erwarteten Formen mit Bindestrichen erzeugen und Tests diese abdecken.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

dasherize only treats an acronym as a single word when it starts the identifier (URLBar -> url-bar, added in #44), mangling acronyms in the middle or at the end of controller class names and @attr property names.

npm install @github/[email protected]
node --input-type=module -e '
import { dasherize } from "@github/catalyst/lib/dasherize.js";

for (const s of ["UserIDListElement", "CopyURLElement", "mySVGIcon", "srcURL", "data-URL", "data-srcURL"]) {
  console.log(s, "->", dasherize(s));
}
'

Actual:

UserIDListElement -> userid-list-element
CopyURLElement -> copyurl-element
mySVGIcon -> mysvg-icon
srcURL -> srcur-l
data-URL -> data-ur-l
data-srcURL -> data-srcur-l

Expected:

UserIDListElement -> user-id-list-element
CopyURLElement -> copy-url-element
mySVGIcon -> my-svg-icon
srcURL -> src-url
data-URL -> data-url
data-srcURL -> data-src-url

In a browser, @controller class UserIDListElement registers <userid-list>, @controller class CopyURLElement throws DOMException: Failed to execute 'define' on 'CustomElementRegistry': "copyurl" is not a valid custom element name once register() strips -element, and @attr URL / @attr srcURL map to data-ur-l / data-srcur-l instead of data-url (the example in https://github.github.io/catalyst/guide/attrs) and data-src-url.

In src/dasherize.ts, .replace(/([A-Z]($|[a-z]))/g, '-$1') only inserts a dash before a capital letter followed by a lowercase letter or end-of-string, so no boundary is inserted between a lowercase letter and a multi-letter acronym, and a trailing acronym is split before its final capital.

Versions: @github/[email protected] (npm latest) and main (f022227), Node.js v26.13.0 and Chromium.

Credit: https://ucsbplse.github.io/

Vorherrschende Sprache
TypeScript
Sterne
1.4k
Forks
61
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
8

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus github/catalyst

Alle Issues in github/catalyst

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.