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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Getting Started",
  "children": [{
    "depth": 2,
    "value": "See Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Try Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Learn Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Think Solid",
    "children": [{
      "depth": 3,
      "value": "1. Declarative Data",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Vanishing Components",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Read/Write segregation",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Simple is better than easy",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Server Rendering",
    "children": []
  }, {
    "depth": 2,
    "value": "Buildless options",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    strong: "strong",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "getting-started",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#getting-started",
        children: "#"
      }), "Getting Started"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "We're working on new docs."
      }), " You can check out our new beginner tutorial ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "here"
      }), ", and join our efforts on ", jsx(_components.a, {
        href: "http://discord.com/invite/solidjs",
        children: "Discord!"
      })]
    }), "\n", jsxs(_components.h2, {
      id: "see-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#see-solid",
        children: "#"
      }), "See Solid"]
    }), "\n", jsx(_components.p, {
      children: "For quick video overviews of Solid's core concepts, check out:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "Solid in 100 seconds"
        })
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "try-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#try-solid",
        children: "#"
      }), "Try Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["By far the easiest way to get started with Solid is to try it online. Our REPL at ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " is the perfect way to try out ideas. As is ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " where you can modify any of ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "our Examples"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Alternatively, you can use our ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates",
        children: "Vite templates"
      }), " by running these commands in your terminal:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Or for TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid-ts\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Or you can install the dependencies in your own project. To use Solid with JSX\n(recommended), you need to install the ", jsx(_components.code, {
        children: "solid-js"
      }), " NPM library and the\n", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",
        children: "Solid JSX compiler"
      }), "\nBabel plugin:"]
    }), "\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: ["Then add ", jsx(_components.code, {
        children: "babel-preset-solid"
      }), " to your ", jsx(_components.code, {
        children: ".babelrc"
      }), ", or to your Babel config in webpack or rollup:"]
    }), "\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: ["For TypeScript, set your ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " to handle Solid's JSX as follows\n(see the ", jsx(_components.a, {
        href: "https://www.solidjs.com/guides/typescript",
        children: "TypeScript guide"
      }), "\nfor more details):"]
    }), "\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: "learn-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#learn-solid",
        children: "#"
      }), "Learn Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid is all about small composable pieces that serve as building blocks for applications. These pieces are mostly functions which make up many shallow top-level APIs. Fortunately, you won't need to know about most of them to get started."
    }), "\n", jsx(_components.p, {
      children: "The two main types of building blocks you have at your disposal are Components and Reactive Primitives."
    }), "\n", jsx(_components.p, {
      children: "Components are functions that accept a props object and return JSX elements including native DOM elements and other components. They can be expressed as JSX Elements in 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: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", 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"
            }), ">"]
          }), "Hello {props.name}", 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"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Components are lightweight in that they are not stateful themselves and have no instances. Instead, they serve as factory functions for DOM elements and reactive primitives."
    }), "\n", jsx(_components.p, {
      children: "Solid's fine-grained reactivity is built on three core primitives: Signals, Memos, and Effects. Together, they form an auto-tracking synchronization engine that ensures your view stays up to date. Reactive computations take the form of function-wrapped expressions that execute synchronously."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", 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"
        }), " [last, setLast] = ", 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: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["You can learn more about ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Solid's Reactivity"
      }), " and ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solid's Rendering"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "think-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#think-solid",
        children: "#"
      }), "Think Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid's design carries several opinions on what principles and values help us best build websites and applications. It is easier to learn and use Solid when you are aware of the philosophy behind it."
    }), "\n", jsxs(_components.h3, {
      id: "1-declarative-data",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-declarative-data",
        children: "#"
      }), "1. Declarative Data"]
    }), "\n", jsx(_components.p, {
      children: "Declarative data is the practice of tying the description of data’s behavior to its declaration. This allows for easy composition by packaging all aspects of data’s behavior in a single place."
    }), "\n", jsxs(_components.h3, {
      id: "2-vanishing-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-vanishing-components",
        children: "#"
      }), "2. Vanishing Components"]
    }), "\n", jsx(_components.p, {
      children: "It's hard enough to structure your components without taking updates into consideration. Solid updates are completely independent of the components. Component functions are called once and then cease to exist. Components exist to organize your code and not much else."
    }), "\n", jsxs(_components.h3, {
      id: "3-readwrite-segregation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-readwrite-segregation",
        children: "#"
      }), "3. Read/Write segregation"]
    }), "\n", jsx(_components.p, {
      children: "Precise control and predictability make for better systems. We don't need true immutability to enforce unidirectional flow, just the ability to make the conscious decision which consumers may write and which may not."
    }), "\n", jsxs(_components.h3, {
      id: "4-simple-is-better-than-easy",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-simple-is-better-than-easy",
        children: "#"
      }), "4. Simple is better than easy"]
    }), "\n", jsx(_components.p, {
      children: "A lesson that comes hard for fine-grained reactivity. Explicit and consistent conventions even if they require more effort are worth it. The aim is to provide minimal tools to serve as the basis to build upon."
    }), "\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 was born with the desire to have Web Components as first class citizens. Over time its design has evolved and goals have changed. However, Solid is still a great way to author Web Components. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " allows you to write and wrap Solid's function components to produce small and performant Web Components. Inside Solid apps Solid Element is able to still leverage Solid's Context API, and Solid's Portals support Shadow DOM isolated styling."]
    }), "\n", jsxs(_components.h2, {
      id: "server-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#server-rendering",
        children: "#"
      }), "Server Rendering"]
    }), "\n", jsx(_components.p, {
      children: "Solid has a dynamic server side rendering solution that enables a truly isomorphic development experience. Through the use of our Resource primitive, async data requests are easily made and, more importantly, automatically serialized and synchronized between client and browser."
    }), "\n", jsxs(_components.p, {
      children: ["Since Solid supports asynchronous and stream rendering on the server, you get to write your code one way and have it execute on the server. This means that features like ", 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"
      }), " and code splitting just work in Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["For more information, read the ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "Server guide"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "buildless-options",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#buildless-options",
        children: "#"
      }), "Buildless options"]
    }), "\n", jsxs(_components.p, {
      children: ["If you need or prefer to use Solid in non-compiled environments such as plain HTML files, ", jsx(_components.a, {
        href: "https://codepen.io",
        children: "https://codepen.io"
      }), ", etc, you can use ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/html",
        children: [jsx(_components.code, {
          children: "html``"
        }), " Tagged Template Literals"]
      }), " or ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/h",
        children: ["HyperScript ", jsx(_components.code, {
          children: "h()"
        }), " functions"]
      }), " in plain JavaScript instead of Solid's compile-time-optimized JSX syntax."]
    }), "\n", jsxs(_components.p, {
      children: ["You can run them straight from the browser using ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), ", for example:"]
    }), "\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: "// or"
          }), "\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: "The advantages of going buildless come with tradeoffs:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["Expressions need to always be a wrapped in a getter function or they won't be reactive.\nThe following will not update when the ", jsx(_components.code, {
          children: "first"
        }), " or ", jsx(_components.code, {
          children: "last"
        }), " values change because the values are not being accessed inside an effect that the template creates internally, therefore dependencies will not be tracked:", "\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"
                }), ">"]
              }), "Hello "]
            }), 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: "// or"
            }), "\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: "\"Hello \""
            }), ", ", 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", "The following will update as expected when ", jsx(_components.code, {
          children: "first"
        }), " or ", jsx(_components.code, {
          children: "last"
        }), " change because the template will read from the getter within an effect and dependencies will be tracked:", "\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"
                }), ">"]
              }), "Hello "]
            }), 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: "// or"
            }), "\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: "\"Hello \""
            }), ", ", 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", "Solid's JSX doesn't have this issue because of its compile-time abilities, and an expression like ", jsx(_components.code, {
          children: "<h1>Hello {first() + ' ' + last()}</h1>"
        }), " will be reactive."]
      }), "\n", jsxs(_components.li, {
        children: ["Build-time optimizations won't be in place like they are with Solid JSX, meaning app startup speed will be slightly slower because each template gets compiled at runtime the first time it is executed, but for many use cases this perf hit is imperceivable. Ongoing speed after startup will remain the same with the ", jsx(_components.code, {
          children: "html``"
        }), " template tag as with JSX. ", jsx(_components.code, {
          children: "h()"
        }), " calls will always have slower ongoing speed due to their inability to statically analyze whole templates before being executed."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["You need the corresponding DOM Expressions library for these to work with TypeScript. You can use Tagged Template Literals with ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " or HyperScript with ", 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-98f8c453.js.map
