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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#372 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript, web-dev
Lĩnh vực
frontend

Hướng nghiên cứu

Lỗi nằm ở src/dasherize.ts, nơi biểu thức chính quy .replace(/([A-Z]($|[a-z]))/g, '-$1') quyết định vị trí đặt dấu gạch ngang. Bắt đầu bằng cách đọc hàm đó và chạy script tái tạo lỗi trong issue với lib/dasherize.js để xem các kết quả sai. Hoàn thành khi UserIDListElement, CopyURLElement, mySVGIcon, srcURL, data-URL và data-srcURL cho ra các dạng có gạch ngang như mong đợi được liệt kê trong issue, và có test bao phủ chúng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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/

Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
61
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
8

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của github/catalyst

Tất cả issue của github/catalyst

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.