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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Empezando",
  "children": [{
    "depth": 2,
    "value": "Mira Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Prueba Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Aprende Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Piensa Solid",
    "children": [{
      "depth": 3,
      "value": "1. Datos Declarativos",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Desaparición de Componentes",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Segregación de Lectura/Escritura",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Simple es mejor que fácil",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Renderizado de Servidor",
    "children": []
  }, {
    "depth": 2,
    "value": "Opciones sin compilar",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "empezando",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#empezando",
        children: "#"
      }), "Empezando"]
    }), "\n", jsxs(_components.p, {
      children: ["**Estamos trabajando en una nueva documentación. Puedes echar un vistazo a nuestro nuevo tutorial para principiantes ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/getting-started-with-solid/welcome",
        children: "aquí"
      }), ", y unete a nuestros esfuerzos en ", jsx(_components.a, {
        href: "http://discord.com/invite/solidjs",
        children: "Discord!"
      })]
    }), "\n", jsxs(_components.h2, {
      id: "mira-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#mira-solid",
        children: "#"
      }), "Mira Solid"]
    }), "\n", jsx(_components.p, {
      children: "Para revisiones rápidas sore los conceptos principales de Solid, mira lo siguiente:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "Solid en 100 segundos"
        })
      }), "\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/J70HXl1KhWE",
          children: "Reactividad de Solid en 10 minutos"
        })
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "prueba-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#prueba-solid",
        children: "#"
      }), "Prueba Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["Por mucho, la forma mas fácil de empezar con Solid es probarlo online. Nuestro REPL en ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " es el lugar perfecto para probar ideas. Igual que ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " donde puedes modificar cualquiera de ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "nuestros Ejemplos"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Otra alternativa es usar nuestros ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates",
        children: "templates Vite"
      }), " corriendo los siguientes comandos en tu terminal:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js nombre-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " nombre-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Si necesitas TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts nombre-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " nombre-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["O puedes instalar las dependencias en tu propio proyecto. Para usar Solid con JSX (recomendado), neceistarás instalar la librería ", jsx(_components.code, {
        children: "solid-js"
      }), " de NPM y el ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",
        children: "compilador de Solid JSX"
      }), " para babel:"]
    }), "\n", jsx(_components.pre, {
      children: jsx(_components.code, {
        className: "hljs language-sh",
        children: "> npm install solid-js babel-preset-solid\n"
      })
    }), "\n", jsxs(_components.p, {
      children: ["Luego, agrega ", jsx(_components.code, {
        children: "babel-preset-solid"
      }), " a tu ", jsx(_components.code, {
        children: ".babelrc"
      }), ", o a tu configuración de Babel en webpack o:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"presets\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "["
        }), jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: "]"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Para TypeScript, configura tu ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " para manejar el JSX provisto por Solid de la siguiente manera (mira la ", jsx(_components.a, {
        href: "https://www.solidjs.com/guides/typescript",
        children: "guía de TypeScript"
      }), " para más detalles):"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "aprende-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#aprende-solid",
        children: "#"
      }), "Aprende Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid es todo sobre pequeñas piezas componibles que sirven como bloques de construcción de aplicaciones. Estas piezas son en su mayoría funciones que componen muchas API's top-level. Afortunadamente, tu no necesitas conocer la mayoría para empezar."
    }), "\n", jsx(_components.p, {
      children: "Los dos tipos principales de bloques de construcción que tienes a tu disposición son Componentes y Primitivos Reactivos."
    }), "\n", jsx(_components.p, {
      children: "Los Componentes son funciones que aceptan un objeto de propiedades o props y retornan elementos JSX incluyendo elementos nativos del DOM y otros componentes. Pueden ser representados como elementos JSW en PascalCase"
    }), "\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: "MiComponente"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Hola {props.nombre}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " nombre=", jsx(_components.span, {
          className: "hljs-string",
          children: "'Solid'"
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Los componentes son muy ligeros dado que no tienen estado y no tienen instancias. En cambio, sirven como fábrica de funciones para elementos del DOM y Primitivos Reactivos."
    }), "\n", jsx(_components.p, {
      children: "La reactividad finamente detallada de Solid está construida en 3 simples primitivos: Signals, Memos y Effects. Juntos, forman un motor de auto-rastreo sincronizado que se asegura de que tus vistas se mantengan actualizadas. Las computaciones reactivas toman la form de simples expresiones envueltas en funciones que se ejecutan de forma sincronizada."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [nombre, setNombre] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [apellido, setApellido] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${nombre()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${apellido()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Puedes aprender mas sobre ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Reactividad Solid"
      }), " y ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Renderizado Solid"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "piensa-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#piensa-solid",
        children: "#"
      }), "Piensa Solid"]
    }), "\n", jsx(_components.p, {
      children: "El diseño de Solid tiene varias opiniones sobre que principios y valores nos ayudan mas a construir sitios web y aplicaciones. Es mas fácil aprender y usar Solid cuando estás al tanto de la filosofía detrás."
    }), "\n", jsxs(_components.h3, {
      id: "1-datos-declarativos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-datos-declarativos",
        children: "#"
      }), "1. Datos Declarativos"]
    }), "\n", jsx(_components.p, {
      children: "Los datos declarativos es la practica de atar la descripción del comportamiento de los datos a su declaración. Esto permite una composición fácil al envolver de todos los aspectos del comportamiento de los datos en un solo lugar."
    }), "\n", jsxs(_components.h3, {
      id: "2-desaparición-de-componentes",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-desaparición-de-componentes",
        children: "#"
      }), "2. Desaparición de Componentes"]
    }), "\n", jsx(_components.p, {
      children: "Ya es lo suficientemente duro tener que estructurar tus componentes sin tomar en cuenta las actualizaciones. Las actualizaciones de Solid son completamente independientes de los componentes. Las funciones de componentes son llamadas una sola vez y dejan de existir. Los componentes existen para organizar tu código y poco mas."
    }), "\n", jsxs(_components.h3, {
      id: "3-segregación-de-lecturaescritura",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-segregación-de-lecturaescritura",
        children: "#"
      }), "3. Segregación de Lectura/Escritura"]
    }), "\n", jsx(_components.p, {
      children: "Control preciso y predictibilidad permiten mejores sistemas. No necesitamos verdadera inmutabilidad para forzar flujo unidireccional, solo la habilidad de hacer decisiones conscientes de que clientes pueden escribir y cuales no podrán."
    }), "\n", jsxs(_components.h3, {
      id: "4-simple-es-mejor-que-fácil",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-simple-es-mejor-que-fácil",
        children: "#"
      }), "4. Simple es mejor que fácil"]
    }), "\n", jsx(_components.p, {
      children: "Una lección que puede seguir a la reactividad finamente detallada. Convenciones explicitas y consistentes incluso si requieren mas esfuerzo, valen la pena. La meta es proveer herramientas mínimas para servir de base sobre la cual construir."
    }), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid nació con el deseo de tener Web Components como ciudadanos de primera clase. Con el tiempo su diseño ha evolucionado y las metas cambiado. Sin embargo, Solid sigue siendo una gran forma de escribir Web Components. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " te permite escribir y envolver componentes funcionales de Solid para producir pequeños y eficaces Web Components. Dentro de las apps Solid, Solid Element es capaz de aprovechar el API Context de Solid y los Portals Solid soportan estilizado isolado del Shadow DOM."]
    }), "\n", jsxs(_components.h2, {
      id: "renderizado-de-servidor",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#renderizado-de-servidor",
        children: "#"
      }), "Renderizado de Servidor"]
    }), "\n", jsx(_components.p, {
      children: "Solid tiene una solución dinámica de renderizado de servidor que habilita una experiencia de desarrollo verdaderamente isomorfa. Mediante el uso de nuestros recursos primitivos, las peticiones asíncronas de datos son hechas fácilmente y aún mas importante, automáticamente serializadas y sincronizadas entre el cliente y el navegador."
    }), "\n", jsxs(_components.p, {
      children: ["Ya que Solid soporta renderizado asíncrono y streameable en el servidor, puedes escribir tu código de una forma y ejecutarlo en el servidor. Esto significa que funciones como ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " y separación de código simplemente funcionan en Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Para mas información, lee la ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "Guía de Servidor"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "opciones-sin-compilar",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#opciones-sin-compilar",
        children: "#"
      }), "Opciones sin compilar"]
    }), "\n", jsxs(_components.p, {
      children: ["Si necesitas o prefieres usar Solid en un entorno sin compilar, como archivos HTML, ", jsx(_components.a, {
        href: "https://codepen.io",
        children: "https://codepen.io"
      }), ", etc, puedes usar ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/html",
        children: [jsx(_components.code, {
          children: "html``"
        }), " Tagged Template Literals"]
      }), " o ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/h",
        children: ["HyperScript ", jsx(_components.code, {
          children: "h()"
        }), " functions"]
      }), " usando JavaScript puro en lugar de la sintaxis JSX optimizada de Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Puedes ejecutarlos directo en el navegador usando ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n        ", jsx(_components.span, {
            className: "hljs-comment",
            children: "// o"
          }), "\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "h"
          }), "(", jsx(_components.span, {
            className: "hljs-string",
            children: "\"div\""
          }), ", {}, count);\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Las ventajas de usar Solid sin compilar tiene algunos puntos a considerar:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["Las expresiones siempre tienen que estar contenidas en una función getter o no serán reactivas.\nEl siguiente ejemplo no se actualizará cuando los valores de ", jsx(_components.code, {
          children: "first"
        }), " ni ", jsx(_components.code, {
          children: "last"
        }), " cambien ya que los valores no están siendo accedidos dentro de un efecto que el template crea internamente, por lo tanto, las dependencias no serán observadas:", "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hola "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// o"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hola \""
            }), ", ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["El siguiente ejemplo se actualizará cómo se espera cuando los valores de ", jsx(_components.code, {
        children: "first"
      }), " o ", jsx(_components.code, {
        children: "last"
      }), " cambien porque el template va a leer dichos valores desde una función getter dentro de un effect y las dependencias se observarán:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: ["html`", jsxs(_components.span, {
          className: "xml",
          children: [" ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), "Hola "]
        }), jsxs(_components.span, {
          className: "hljs-subst",
          children: ["${() => first() + ", jsx(_components.span, {
            className: "hljs-string",
            children: "\" \""
          }), " + last()}"]
        }), jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), " `"]
        }), ";\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// o"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "h"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"h1\""
        }), ", {}, ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hola \""
        }), ", ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "first"
        }), "() + ", jsx(_components.span, {
          className: "hljs-string",
          children: "\" \""
        }), " + ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "last"
        }), "());\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["La sintaxis JSX de Solid no tiene este problema porque, gracias a sus habilidades en tiempo de compilación, una expresión como ", jsx(_components.code, {
        children: "<h1>Hola {first() + ' ' + last()}</h1>"
      }), " va a ser reactiva."]
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["Las optimizaciónes en tiempo de build no estarán presentes a diferencia de si usaramos la sintáxis JSX de Solid, lo que significa que la aplicación empezará a correr en un tiempo un poco mayor ya que cada template es compilado en tiempo de ejecución la primera vez que es ejecutado, pero para muchos usos este golpe de rendimiento es casi inperceptible. La velocidad luego de que la aplicación está corriendo va a ser la misma tanto para templates ", jsx(_components.code, {
          children: "html``"
        }), " como para JSX. Las llamadas ", jsx(_components.code, {
          children: "h()"
        }), " siempre serán más lentas debido a la que no se puede analizar estáticamente todas las templates antes de que sean ejecutadas."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["Recuerda que aún necesitaras la correspondiente librería de expresiones DOM para que estos funciones con TypeScript. Puedes usar Tagged Template Literals con ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " o HyperScript usando ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), "."]
    })]
  });
}
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=getting-started-f0b259d7.js.map
