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

Aberta Para iniciantes
  • Algo errado?
#372 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
78/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript, web-dev
Domínio
frontend

Direção de pesquisa

O bug está em src/dasherize.ts, onde a regex .replace(/([A-Z]($|[a-z]))/g, '-$1') decide onde ficam os hífens. Comece lendo essa função e execute o script de reprodução da issue contra lib/dasherize.js para ver as saídas erradas. Está pronto quando UserIDListElement, CopyURLElement, mySVGIcon, srcURL, data-URL e data-srcURL produzirem as formas com hífen esperadas listadas na issue, com testes cobrindo esses casos.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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/

Linguagem predominante
TypeScript
Estrelas
1.4k
Forks
61
Merge médio
1d 15h
PRs com merge (30d)
8

Preparar o ambiente

Abrir no Codespaces

Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de github/catalyst

Todas as issues de github/catalyst

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.