import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "FAQ",
  "children": [{
    "depth": 3,
    "value": "¿JSX sin un DOM virtual? ¿Es esto un vaporware? He escuchado voces prominentes decir que esto no es posible.",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Por qué Solid es tan eficaz?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Existe React-Compat, o alguna forma de usar mis bibliotecas React en Solid?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Por qué no debería usar map en mi plantilla y cuál es la diferencia entre <For> e <Index>?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Por qué pierdo reactividad cuando uso desestructuración en el objeto props?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Por qué mi controlador de eventos onChange no se activa a tiempo?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Puede agregar soporte para componentes de clase? Encuentro que los ciclos de vida son más fáciles de razonar.",
    "children": []
  }, {
    "depth": 3,
    "value": "Realmente no me gusta JSX, ¿hay alguna posibilidad de un lenguaje de plantilla diferente? Ah, veo tienes Tagged Template Literal/HyperScript. Tal vez use esos...",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Cuándo uso Signal vs Store? ¿Por qué son diferentes?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Por qué no puedo simplemente asignar un valor a Solid's Store como puedo hacerlo en Vue, Svelte o MobX? ¿Dónde está el enlace bidireccional?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Puedo usar la reactividad de Solid por sí sola?",
    "children": []
  }, {
    "depth": 3,
    "value": "¿Solid tiene Next.js o Material Components como biblioteca que pueda usar?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code",
    em: "em",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "faq",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#faq",
        children: "#"
      }), "FAQ"]
    }), "\n", jsxs(_components.h3, {
      id: "jsx-sin-un-dom-virtual-es-esto-un-vaporware-he-escuchado-voces-prominentes-decir-que-esto-no-es-posible",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#jsx-sin-un-dom-virtual-es-esto-un-vaporware-he-escuchado-voces-prominentes-decir-que-esto-no-es-posible",
        children: "#"
      }), "¿JSX sin un DOM virtual? ¿Es esto un vaporware? He escuchado voces prominentes decir que esto no es posible."]
    }), "\n", jsx(_components.p, {
      children: "Es posible cuando no tienes el modelo de actualización de React. JSX es un lenguaje de plantillas como los de Svelte o Vue, solo que es más flexible en ciertos aspectos. Insertar arbitrariamente JavaScript a veces puede ser un desafío, pero no es diferente a admitir spread operators. Entonces, no: esto no es vaporware, sino un enfoque que ha demostrado ser uno de los más eficaces."
    }), "\n", jsxs(_components.p, {
      children: ["El verdadero beneficio viene en cuán extensible es. Tenemos un compilador trabajando para ti para brindarte actualizaciones DOM nativas óptimas, pero tienes toda la libertad de una biblioteca como React. Puede escribir componentes utilizando técnicas estándar como ", jsx(_components.a, {
        href: "https://reactjs.org/docs/render-props.html",
        children: "render props"
      }), " y componentes de orden superior junto con sus \"ganchos\" reactivos. ¿No le gusta cómo funciona el flujo de control de Solid? Escribe el tuyo."]
    }), "\n", jsxs(_components.h3, {
      id: "por-qué-solid-es-tan-eficaz",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#por-qué-solid-es-tan-eficaz",
        children: "#"
      }), "¿Por qué Solid es tan eficaz?"]
    }), "\n", jsx(_components.p, {
      children: "Desearíamos poder señalar una sola cosa, pero en realidad es la combinación de varias decisiones de diseño importantes:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Reactividad explícita, por lo que solo se rastrean las cosas que deberían ser reactivas."
      }), "\n", jsx(_components.li, {
        children: "Compilación con la creación inicial en mente. Solid usa heurística y combina las expresiones correctas para reducir la cantidad de computaciones, pero mantiene las actualizaciones clave granulares y eficientes."
      }), "\n", jsx(_components.li, {
        children: "Las expresiones reactivas son solo funciones. Esto habilita \"componentes que desaparecen\" con evaluación perezosa de props eliminando envoltorios innecesarios y sobrecarga de sincronización."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Actualmente estas son las técnicas únicas que en combinación le dan a Solid una ventaja sobre la competencia."
    }), "\n", jsxs(_components.h3, {
      id: "existe-react-compat-o-alguna-forma-de-usar-mis-bibliotecas-react-en-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#existe-react-compat-o-alguna-forma-de-usar-mis-bibliotecas-react-en-solid",
        children: "#"
      }), "¿Existe React-Compat, o alguna forma de usar mis bibliotecas React en Solid?"]
    }), "\n", jsx(_components.p, {
      children: "No. Y probablemente nunca lo habrá. Si bien las API son similares y los componentes a menudo se pueden mover con ediciones menores, el modelo de actualización es fundamentalmente diferente. React Components se procesan una y otra vez, por lo que el código fuera de los Hooks funciona de manera muy diferente. Las reglas de closure y hooks no solo son innecesarias en Solid: pueden prescribir código que no funciona aquí."
    }), "\n", jsx(_components.p, {
      children: "Vue-compat por otro lado, eso sería factible; aunque no hay planes para implementarlo actualmente."
    }), "\n", jsxs(_components.h3, {
      id: "por-qué-no-debería-usar-map-en-mi-plantilla-y-cuál-es-la-diferencia-entre-for-e-index",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#por-qué-no-debería-usar-map-en-mi-plantilla-y-cuál-es-la-diferencia-entre-for-e-index",
        children: "#"
      }), "¿Por qué no debería usar ", jsx(_components.code, {
        children: "map"
      }), " en mi plantilla y cuál es la diferencia entre ", jsx(_components.code, {
        children: "<For>"
      }), " e ", jsx(_components.code, {
        children: "<Index>"
      }), "?"]
    }), "\n", jsxs(_components.p, {
      children: ["Si su array es estático, no hay nada de malo en usar map. Pero si está recorriendo una señal o una propiedad reactiva, ", jsx(_components.code, {
        children: "map"
      }), " es ineficiente: si el array cambia por algún motivo, ", jsx(_components.em, {
        children: "el mapa completo"
      }), " se volverá a ejecutar y todos los nodos se volverán a crear."]
    }), "\n", jsxs(_components.p, {
      children: ["Tanto ", jsx(_components.code, {
        children: "<For>"
      }), " como ", jsx(_components.code, {
        children: "<Index>"
      }), " proporcionan una solución de bucle que es más inteligente que esta. Acoplan cada nodo renderizado con un elemento del array, de modo que cuando cambia un elemento en el array, solo se volverá a renderizar el nodo correspondiente."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "<Index>"
      }), " hará esto ", jsx(_components.em, {
        children: "by index"
      }), ": cada nodo corresponde a un index del array; ", jsx(_components.code, {
        children: "<For>"
      }), " hará esto ", jsx(_components.em, {
        children: "by value"
      }), ": cada nodo corresponde a un dato del array. Por eso, el callback, ", jsx(_components.code, {
        children: "<Index>"
      }), " le da una señal para el item: el index de cada elemento se considera fijo, pero los datos en ese index pueden cambiar. Por otro lado, ", jsx(_components.code, {
        children: "<For>"
      }), " le da una señal para el index: el contenido del elemento se considera fijo, pero puede moverse si los elementos se mueven en el array."]
    }), "\n", jsxs(_components.p, {
      children: ["Por ejemplo, si se intercambian dos elementos del array, ", jsx(_components.code, {
        children: "<For>"
      }), " reubicará los dos nodos DOM correspondientes y actualizará sus señales ", jsx(_components.code, {
        children: "index()"
      }), " en el camino. ", jsx(_components.code, {
        children: "<Index>"
      }), " no cambiará la posición de ningún nodo DOM, pero actualizará las señales ", jsx(_components.code, {
        children: "item()"
      }), " para los dos nodos DOM y hará que se vuelvan a renderizar."]
    }), "\n", jsxs(_components.p, {
      children: ["Para ver una demostración detallada de la diferencia, consulte ", jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=YxroH_MXuhw&t=2164s",
        children: "este segmento"
      }), " del stream de Ryan."]
    }), "\n", jsxs(_components.h3, {
      id: "por-qué-pierdo-reactividad-cuando-uso-desestructuración-en-el-objeto-props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#por-qué-pierdo-reactividad-cuando-uso-desestructuración-en-el-objeto-props",
        children: "#"
      }), "¿Por qué pierdo reactividad cuando uso desestructuración en el objeto props?"]
    }), "\n", jsxs(_components.p, {
      children: ["Con un objeto props, la reactividad se da gracias al seguimiento de acceso a una propiedad.\nSi accedes a una propiedad dentro de un ", jsx(_components.em, {
        children: "tracking scope"
      }), ",\ncomo una expresión JSX o un efecto, entonces, la expresión JSX se volverá a renderizar o el efecto se volverá a ejecutar cuando esa propiedad cambie."]
    }), "\n", jsx(_components.p, {
      children: "En este ejemplo, el acceso a la propiedad ocurre dentro de un template JSX, por lo tanto, se le realiza un seguimiento y el contenido del texto es actualizado cuando la señal cambia:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "TextoAzul"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{props.text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "TextoAzul"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Pero en ningúno de estos ejemplos se actualiza el texto debido a que la propiedad se accede por fuera del template:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "TextoAzul"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " text = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "text"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "TextoAzul"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "TextoAzul"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "{text}"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "TextoAzul"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Si prefieres usar desestructuración, existen dos plugins de Babel que permiten usar reactividad y desestructuración: ", jsx(_components.a, {
        href: "https://github.com/orenelbaum/babel-plugin-solid-undestructure",
        children: "babel-plugin-solid-undestructure"
      }), "\ny ", jsx(_components.a, {
        href: "https://github.com/LXSMNSYC/solid-labels",
        children: "Solid Labels'"
      }), " ", jsx(_components.a, {
        href: "https://github.com/LXSMNSYC/solid-labels/blob/main/docs/ctf.md#objects",
        children: "object features"
      }), "."]
    }), "\n", jsxs(_components.h3, {
      id: "por-qué-mi-controlador-de-eventos-onchange-no-se-activa-a-tiempo",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#por-qué-mi-controlador-de-eventos-onchange-no-se-activa-a-tiempo",
        children: "#"
      }), "¿Por qué mi controlador de eventos ", jsx(_components.code, {
        children: "onChange"
      }), " no se activa a tiempo?"]
    }), "\n", jsxs(_components.p, {
      children: ["En algunos marcos, el evento ", jsx(_components.code, {
        children: "onChange"
      }), " para las entradas se modifica para que se active con cada pulsación de tecla. Pero no es así como el evento ", jsx(_components.code, {
        children: "onChange"
      }), " [funciona de forma nativa] (", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange",
        children: "https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange"
      }), "): está destinado a reflejar un cambio ", jsx(_components.em, {
        children: "entregado"
      }), " al input y generalmente se disparará cuando el input pierda el foco. Para manejar todos los cambios en el valor de un input, utilice ", jsx(_components.code, {
        children: "onInput"
      }), "."]
    }), "\n", jsxs(_components.h3, {
      id: "puede-agregar-soporte-para-componentes-de-clase-encuentro-que-los-ciclos-de-vida-son-más-fáciles-de-razonar",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#puede-agregar-soporte-para-componentes-de-clase-encuentro-que-los-ciclos-de-vida-son-más-fáciles-de-razonar",
        children: "#"
      }), "¿Puede agregar soporte para componentes de clase? Encuentro que los ciclos de vida son más fáciles de razonar."]
    }), "\n", jsx(_components.p, {
      children: "No tenemos la intención de admitir componentes de clase. Los ciclos de vida de los componentes de Solid están vinculados a la programación del sistema reactivo y son artificiales. Podría crear una clase a partir de él, pero efectivamente todo el código del controlador que no es de eventos se ejecutaría en el constructor, incluida la función de renderizado. Es solo más sintaxis como excusa para hacer que sus datos sean menos granulares."
    }), "\n", jsx(_components.p, {
      children: "Agrupe los datos y sus comportamientos juntos, en lugar de ciclos de vida. Esta es una mejor práctica reactiva que ha funcionado durante décadas."
    }), "\n", jsxs(_components.h3, {
      id: "realmente-no-me-gusta-jsx-hay-alguna-posibilidad-de-un-lenguaje-de-plantilla-diferente-ah-veo-tienes-tagged-template-literalhyperscript-tal-vez-use-esos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#realmente-no-me-gusta-jsx-hay-alguna-posibilidad-de-un-lenguaje-de-plantilla-diferente-ah-veo-tienes-tagged-template-literalhyperscript-tal-vez-use-esos",
        children: "#"
      }), "Realmente no me gusta JSX, ¿hay alguna posibilidad de un lenguaje de plantilla diferente? Ah, veo tienes Tagged Template Literal/HyperScript. Tal vez use esos..."]
    }), "\n", jsx(_components.p, {
      children: "no Detente ahí mismo. Usamos JSX de la misma manera que Svelte usa sus plantillas, para crear instrucciones DOM optimizadas. Las soluciones Tagged Template Literal e HyperScript pueden ser realmente impresionantes por derecho propio, pero a menos que tenga una razón real como un requisito de no compilación, son inferiores en todos los sentidos. Paquetes más grandes, rendimiento más lento y la necesidad ajustes manuales para envolver los valores."
    }), "\n", jsx(_components.p, {
      children: "Es bueno tener opciones, pero JSX de Solid es realmente la mejor solución en este caso. Una plantilla DSL también sería excelente, aunque más restrictiva, pero JSX nos brinda mucho y de forma gratuita. Analizadores existentes como, Resaltado de sintaxis, Prettier, Autocompletado de Código y, por último, pero no menos importante, TypeScript."
    }), "\n", jsx(_components.p, {
      children: "Otras bibliotecas han estado agregando soporte para estas funciones, pero eso ha sido un esfuerzo enorme y aún es imperfecto y en mantenimiento un dolor de cabeza constante. Esto es realmente tomar una postura pragmática."
    }), "\n", jsxs(_components.h3, {
      id: "cuándo-uso-signal-vs-store-por-qué-son-diferentes",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#cuándo-uso-signal-vs-store-por-qué-son-diferentes",
        children: "#"
      }), "¿Cuándo uso Signal vs Store? ¿Por qué son diferentes?"]
    }), "\n", jsx(_components.p, {
      children: "Las stores envuelven automáticamente los valores anidados, lo que lo hace ideal para estructuras de datos profundas y para cosas como modelos. Para la mayoría de las otras cosas, las signals son livianas y hacen el trabajo maravillosamente."
    }), "\n", jsxs(_components.p, {
      children: ["Por mucho que nos encantaría envolverlos juntos como una sola cosa, no puede usar proxy para los primitivos. Las funciones son la interfaz más simple y cualquier expresión reactiva (incluido el acceso de estado) se puede envolver en una al transportarse por lo que proporciona una API universal. Puede nombrar sus signals y estado como elija y se mantiene mínimo. Lo último que nos gustaría hacer es forzar a escribir ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " en el usuario final o incluso peor ", jsx(_components.code, {
        children: ".value"
      }), ". Al menos, el primero puede tener un alias para mantenerlo breve, mientras que el segundo es solo la forma menos concisa de llamar a una función."]
    }), "\n", jsxs(_components.h3, {
      id: "por-qué-no-puedo-simplemente-asignar-un-valor-a-solids-store-como-puedo-hacerlo-en-vue-svelte-o-mobx-dónde-está-el-enlace-bidireccional",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#por-qué-no-puedo-simplemente-asignar-un-valor-a-solids-store-como-puedo-hacerlo-en-vue-svelte-o-mobx-dónde-está-el-enlace-bidireccional",
        children: "#"
      }), "¿Por qué no puedo simplemente asignar un valor a Solid's Store como puedo hacerlo en Vue, Svelte o MobX? ¿Dónde está el enlace bidireccional?"]
    }), "\n", jsx(_components.p, {
      children: "La reactividad es una herramienta poderosa pero también peligrosa. MobX lo sabe e introdujo el modo estricto y las acciones para limitar dónde y cuándo ocurren las actualizaciones. En Solid, que se ocupa de árboles completos de datos de componentes, se hizo evidente que podemos aprender algo de React aquí. No necesita ser realmente inmutable siempre que proporcione los medios para tener el mismo contrato."
    }), "\n", jsx(_components.p, {
      children: "Podría decirse que poder pasar la capacidad de actualizar el estado es incluso más importante que decidir pasar el estado. Entonces, poder separarlo es importante, y solo es posible si la lectura es inmutable. Tampoco necesitamos pagar el costo de la inmutabilidad si aún podemos actualizar granularmente. Afortunadamente, hay toneladas de arte previo aquí entre ImmutableJS e Immer. Irónicamente, Solid actúa principalmente como un Immer inverso con sus componentes internos mutables y su interfaz inmutable."
    }), "\n", jsxs(_components.h3, {
      id: "puedo-usar-la-reactividad-de-solid-por-sí-sola",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#puedo-usar-la-reactividad-de-solid-por-sí-sola",
        children: "#"
      }), "¿Puedo usar la reactividad de Solid por sí sola?"]
    }), "\n", jsxs(_components.p, {
      children: ["Por supuesto. Si bien no hemos exportado un paquete independiente, es fácil instalar Solid sin el compilador y solo usar las primitivas reactivas. Uno de los beneficios de la reactividad granular es que es independiente de la biblioteca. De hecho, casi todas las bibliotecas reactivas funcionan de esta manera. Eso es lo que inspiró ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " y su ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "biblioteca subyacente DOM Expressions"
      }), " en primer lugar para hacer un renderizador exclusivamente del sistema reactivo."]
    }), "\n", jsxs(_components.p, {
      children: ["Para enumerar algunos para probar: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", [Knockout](", jsx(_components.a, {
        href: "https://github",
        children: "https://github"
      }), " .com/knockout/knockout), ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", [CellX](https: //github.com/Riim/cellx), ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), ", e incluso recientemente ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue "
      }), ". Se necesita mucho más para crear una biblioteca reactiva que etiquetarla en un renderizador como ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), ", por ejemplo, pero es una buena manera de hacerse a la idea."]
    }), "\n", jsxs(_components.h3, {
      id: "solid-tiene-nextjs-o-material-components-como-biblioteca-que-pueda-usar",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-tiene-nextjs-o-material-components-como-biblioteca-que-pueda-usar",
        children: "#"
      }), "¿Solid tiene Next.js o Material Components como biblioteca que pueda usar?"]
    }), "\n", jsxs(_components.p, {
      children: ["Estamos trabajando en ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), ", que está en nuestra solución SSR para empezar similar a Next.js o SvelteKit."]
    }), "\n", jsxs(_components.p, {
      children: ["En cuanto a librerías de componentes, tenemos ", jsx(_components.a, {
        href: "https://suid.io/",
        children: "SUID"
      }), " para Material, ", jsx(_components.a, {
        href: "https://hope-ui.com/",
        children: "Hope UI"
      }), " para soluciones similares a Chakra, ", jsx(_components.a, {
        href: "https://solid-libs.github.io/solid-bootstrap/",
        children: "Solid Bootstrap"
      }), " y muchas más. Echale un vistazo a nuestro ", jsx(_components.a, {
        href: "https://www.solidjs.com/ecosystem",
        children: "creciente ecosistema de librerías y herramientas"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Si estás interesado en construir tu propio ecosistema de herramientas, estamos disponibles en nuestro ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), ", donde puedes sumarte a los esfuerzos para ecosistemas existentes o comenzar el tuyo."]
    }), "\n", jsxs(_components.p, {
      children: ["¡Están en proceso! Si está interesado en construir uno, estamos disponibles en nuestro [Discord] (", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "https://discord.com/invite/solidjs"
      }), "), donde puede unirse a los esfuerzos del ecosistema existente o comenzar el suyo propio."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=faq-56123a9a.js.map
