stenciljs/core

feat: support prop casing for SVG attributes

Closed

#5.674 aberto em 16 de abr. de 2024

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (844 forks)auto 404
Feature: Want this? Upvote it!Help Wanted

Métricas do repositório

Stars
 (13.111 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

Prerequisites

Describe the Feature Request

It'd be useful to support prop case for SVG attributes (similar to React).

Describe the Use Case

Spreading an object with props onto an SVG will not render properly and warnings/errors will be swallowed.

See repro case.

Describe Preferred Solution

SVG props get mapped to attributes.

In the following example, strokeWidth would be mapped and rendered as stroke-width

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 10">
  <circle cx={15} cy={5} r={3} stroke="green" strokeWidth={3} />
</svg>

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Guia do colaborador

Direção de pesquisa
Investigue como o Stencil atualmente mapeia props de componentes para atributos HTML e, em seguida, estenda o mapeamento para converter props SVG em camelCase para atributos kebab case (por exemplo, strokeWidth > stroke width). Foco na lógica de conversão de prop para attr e garanta que afete apenas elementos SVG.
Pilha de tecnologia
typescript
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
TypeScriptStencil basics
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65