1 line
5.6 KiB
JavaScript
1 line
5.6 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6717"],{3270:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>a,metadata:()=>t,assets:()=>d,toc:()=>c,contentTitle:()=>l});var t=JSON.parse('{"id":"languages/tsx","title":"TSX","description":"TSX is a syntax that allows using TypeScript in JSX.","source":"@site/docs/languages/tsx.mdx","sourceDirName":"languages","slug":"/languages/tsx","permalink":"/docs/languages/tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Token CSS","permalink":"/docs/languages/tokencss"},"next":{"title":"Twig","permalink":"/docs/languages/twig"}}'),i=s("5893"),r=s("65");let a={},l="TSX",d={},c=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Links",id:"links",level:2}];function o(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"tsx",children:"TSX"})}),"\n",(0,i.jsxs)(n.p,{children:["TSX is a syntax that allows using TypeScript in JSX.\n",(0,i.jsx)(n.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})," is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.\nIt has been popularized by ",(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"}),", and then adopted by many other libraries/frameworks."]}),"\n",(0,i.jsxs)(n.p,{children:["By default, when running JSX/TSX in LiveCodes, ",(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"})," runtime is used.\nHowever, other libraries like ",(0,i.jsx)(n.a,{href:"https://preactjs.com/",children:"Preact"}),", ",(0,i.jsx)(n.a,{href:"https://nanojsx.io/",children:"nano JSX"})," and others can be used as well (see ",(0,i.jsx)(n.a,{href:"/docs/languages/jsx#custom-jsx-runtimes",children:"Custom JSX Runtimes"}),")."]}),"\n",(0,i.jsxs)(n.p,{children:["Please note that ",(0,i.jsx)(n.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"})," is also available in LiveCodes and is ",(0,i.jsx)(n.a,{href:"/docs/languages/react",children:"documented here"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(n.p,{children:["For usage and examples, see documentation for ",(0,i.jsx)(n.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,i.jsx)(n.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,i.jsx)(n.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(n.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"tsx"})}),"\n",(0,i.jsx)(n.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:".tsx"})}),"\n",(0,i.jsx)(n.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"script"})}),"\n",(0,i.jsx)(n.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"})}),"\n",(0,i.jsx)(n.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(n.p,{children:["Using ",(0,i.jsx)(n.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(n.code,{children:"tsx"})," are passed to the TypeScript compiler as ",(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#compilerOptions",children:"compiler options"})," while compiling TSX.\nIn addition, the option ",(0,i.jsx)(n.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(n.code,{children:"true"})," to disable ",(0,i.jsx)(n.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "tsx": {\n "disableAutoRender": true,\n "jsxFactory": "h",\n "jsxFragmentFactory": "Fragment"\n }\n}\n'})}),"\n",(0,i.jsx)(n.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},65:function(e,n,s){s.d(n,{Z:function(){return l},a:function(){return a}});var t=s(7294);let i={},r=t.createContext(i);function a(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); |