Estoy creando una aplicación usando SvelteKit y Tailwind. Sé que cuando se usa Tailwind para diseñar, se recomienda aprovechar los componentes para reducir la cantidad de código repetido que tiene que escribir usando las clases de utilidad de Tailwinds. Mi problema es que al crear componentes basados en etiquetas HTML, por ejemplo, una etiqueta <input> , lidiar con accesorios en ese componente que normalmente solo serían atributos para esa etiqueta se vuelve abrumador. MDN muestra que la etiqueta <input> tiene 31 atributos posibles. Sé que no los usaré todos, pero ir y venir y agregarlos como accesorios a un componente se está volviendo tedioso.
¿Cuál es la mejor manera de resolver este problema sin agregar hasta 31 líneas de export let attribute a un componente y agregarlas a la etiqueta HTML real dentro del componente?
Ejemplo:
<script> export let name; export let id; export let type; export let disabled; export let required; export let minLength; export let maxLength; export let min; export let max; export let pattern; let value; let borderColor = '#D1D5DB'; const inputHandler = (e) => { if (e.target.value === '') { borderColor = '#D1D5DB'; } else { borderColor = ''; } }; </script> <input {name} {id} {type} {disabled} {required} {minLength} {maxLength} {min} {max} {pattern} on:input={inputHandler} style={`border-color: ${borderColor}`} class=" w-full px-1 py-px mb-4 bg-transparent border-2 border-gray-300 rounded-xl last:mb-0 valid:border-emerald-300 invalid:border-rose-400 " />Si quieres poder hacer
<MyInputField name="123" maxLength="5" type="text"> Sin tener que declarar todos estos atributos adicionales, la mejor manera de hacerlo es usar $$restProps , este objeto contendrá todos los accesorios que se han pasado al componente pero que no se han definido explícitamente como accesorios (exportados).
<script> export let name = ""; </script> <input name={name} {..$$restProps}> (aquí se definió el name , por lo que no se incluirá en $$restProps y tuve que agregarlo yo mismo)
Como alternativa al uso de $$restProps (y según el comentario anterior de @pilchard, gracias por eso), se podría exportar un objeto de opciones, que contiene todos los valores de atributos modificados y se distribuye después de los atributos predeterminados definidos en el elemento de entrada dentro del componente.
De esta manera, todos los atributos posibles del elemento se pueden usar/establecer sin tener que escribirlos todos en cualquier lugar REPL
<script> import Input from './Input.svelte'; const options ={ type: 'number', placeholder:'input a number', required: true }; </script> <Input {options} /> <script> export let options = {} export let value = '' </script> <input type="text" placeholder="default placeholder" {...options} bind:value style:border-color="{options.required && value === '' ? 'tomato' : ''}" class="w-full px-1 py-px mb-4 bg-transparent border-2 ..." />