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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#372 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript, web-dev
Domaine
frontend

Piste de recherche

Le bogue se trouve dans src/dasherize.ts, où l'expression régulière .replace(/([A-Z]($|[a-z]))/g, '-$1') détermine où placer les tirets. Commence par lire cette fonction et exécute le script de reproduction de l'issue sur lib/dasherize.js pour voir les sorties incorrectes. C'est terminé lorsque UserIDListElement, CopyURLElement, mySVGIcon, srcURL, data-URL et data-srcURL produisent les formes avec tirets attendues listées dans l'issue, avec des tests qui les couvrent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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/

Langage dominant
TypeScript
Étoiles
1.4k
Forks
61
Merge moyen
1 j 15 h
PR mergées (30 j)
8

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de github/catalyst

Toutes les issues de github/catalyst

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.