Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
dev subcommand",id:"1-dev-subcommand",level:3},{value:"2. typegate subcommand",id:"2-typegate-subcommand",level:3}];function r(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.em,{children:"Meta CLI"})," comes with an embedded typegate packaged inside it. A ",(0,s.jsx)(n.a,{href:"/docs/reference/typegate",children:"typegate"})," instance is where you deploy your ",(0,s.jsx)(n.a,{href:"/docs/reference/typegraph",children:"typegraphs"})," where any logic written in them is exposed via an HTTP or GraphQL endpoints. You can run an embedded typegate node from the terminal. There are two ways to launch the embedded typegate"]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you have not installed ",(0,s.jsx)(n.em,{children:"Meta CLI"})," or you have downloaded the ",(0,s.jsx)(n.em,{children:"thin"})," version, you can check ",(0,s.jsx)(n.a,{href:"/docs/reference/meta-cli#Installation",children:"this"})," installation guide of the ",(0,s.jsx)(n.em,{children:"CLI"}),"."]})}),"\n",(0,s.jsxs)(n.h3,{id:"1-dev-subcommand",children:["1. ",(0,s.jsx)(n.code,{children:"dev"})," subcommand"]}),"\n",(0,s.jsx)(n.p,{children:"You can start the embedded typegatxe easily with default configs using the following command."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"meta dev\n"})}),"\n",(0,s.jsx)(n.p,{children:"The above command can be a good gateway to get started and also for development purposes. But if you want more granular control, you can use the second approach."}),"\n",(0,s.jsxs)(n.h3,{id:"2-typegate-subcommand",children:["2. ",(0,s.jsx)(n.code,{children:"typegate"})," subcommand"]}),"\n",(0,s.jsxs)(n.p,{children:["Set the ",(0,s.jsx)(n.code,{children:"tg_admin_password"})," and ",(0,s.jsx)(n.code,{children:"tg_secret"})," environment variables. You can use the following command to configure a sample value for the variables and test the embedded typegate."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"export tg_secret=a4lNi0PbEItlFZbus1oeH/+wyIxi9uH6TpL8AIqIaMBNvp7SESmuUBbfUwC0prxhGhZqHw8vMDYZAGMhSZ4fLw== tg_admin_password=password\n"})}),"\n",(0,s.jsx)(n.p,{children:"Run the instance"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"meta typegate\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The typegate instance runs on port ",(0,s.jsx)(n.code,{children:"7890"})," by default. You can check if the typegate node is running by accessing ",(0,s.jsx)(n.a,{href:"http://localhost:7890",children:"http://localhost:7890"})," in your browser."]})]})}function i(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}},49447:(e,n,t)=>{"use strict";t.r(n),t.d(n,{assets:()=>v,contentTitle:()=>b,default:()=>T,frontMatter:()=>j,metadata:()=>w,toc:()=>k});var s=t(86070),a=t(25710),o=t(14344),r=t(96503),i=t(22356),c=t(65480),d=t(27676),l=t(7871),p=t(65671);function h(e){const n={a:"a",code:"code",em:"em",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["To bootstrap a python ",(0,s.jsx)(n.code,{children:"Metatype"})," project, run the following commands on your terminal."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"# create startup files\nmeta new --template python\n\n# install dependencies\npoetry install\n\n# create and activate virtual environment\npoetry shell\n"})}),"\n",(0,s.jsx)(n.p,{children:"This will create the necessary files for development, some of which are:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:".graphqlrc.yaml"}),": configuration file to define settings and options related to GraphQL."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"compose.yml"}),": is where the typegate node and similar services are setup."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"metatype.yaml"}),": is where you configure different variables such as authentication, secrets... used by the backend."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The command also creates a directory called ",(0,s.jsx)(n.code,{children:"api"})," where you will be building much of your applications's business logic. Inside the ",(0,s.jsx)(n.code,{children:"api"})," directory, you will find a single file called ",(0,s.jsx)(n.code,{children:"example.py"})," which defines a simple ",(0,s.jsx)(n.a,{href:"/docs/reference/typegraph",children:"Typegraph"}),"."]}),"\n",(0,s.jsx)(l.A,{language:"python",children:t(25063).content}),"\n",(0,s.jsxs)(n.p,{children:["Let's break down the above code snippet. The ",(0,s.jsx)(n.code,{children:"example"})," function is where most of the logic lives. You need to decorate the function with ",(0,s.jsx)(n.code,{children:"@typegraph()"})," from the typegraph SDK. Inside the function, you have different components of your application."]}),"\n",(0,s.jsxs)(n.p,{children:["Metatype uses Policy Based ",(0,s.jsx)(n.a,{href:"/docs/reference/policies",children:"Access Control"})," for accessing resources in your backend and here you have defined a public access."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:"public = Policy.public()\n"})}),"\n",(0,s.jsxs)(n.p,{children:["There is a runtime defined namely ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes/python",children:"PythonRuntime"}),". You will be using the runtime to perform different data operations along with the other ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes",children:"runtimes"})," Metatype provides."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:"python = PythonRuntime()\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now that you have runtimes to process data and you have specified access control, you need to define endpoints to communicate with your backend. This is where you use the ",(0,s.jsx)(n.code,{children:"g.expose"})," method to enumerate the endpoints you want in your application. From the starter file, you can see that you have defined an endpoint ",(0,s.jsx)(n.code,{children:"hello"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:'# custom functions\nhello = python.from_lambda(\n t.struct({"world": t.string()}),\n t.string(),\n lambda x: f"Hello {x[\'world\']}!",\n)\n\ng.expose(public, hello=hello)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"hello"})," endpoint is mapped with a ",(0,s.jsx)(n.code,{children:"custom function"})," which accepts a ",(0,s.jsx)(n.code,{children:"string"})," and returns ",(0,s.jsx)(n.strong,{children:"hello"})," concatinated with the ",(0,s.jsx)(n.code,{children:"string"}),". The processing of data is done using the ",(0,s.jsx)(n.code,{children:"PythonRuntime"}),". When you are defining the custom function, you pass the input type, output type and then a ",(0,s.jsx)(n.a,{href:"/docs/concepts/mental-model#functions",children:"function"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["That's it! You have created your first ",(0,s.jsx)(n.code,{children:"Metatype"})," app. It's as easy as this. Before you go ahead and test your app, let's add two more endpoints which peform basic ",(0,s.jsx)(n.code,{children:"Create"})," and ",(0,s.jsx)(n.code,{children:"Read"})," database operation."]}),"\n",(0,s.jsxs)(n.p,{children:["In order to exercise database capabilities, you need to build a table schema or a model. The typegraph SDK provides rich ",(0,s.jsx)(n.a,{href:"/docs/reference/types",children:"Types"})," which you can use to create any database table that fits to your usecase. Let's create a simple Message table which has fields ",(0,s.jsx)(n.code,{children:"id"}),", ",(0,s.jsx)(n.code,{children:"title"})," and ",(0,s.jsx)(n.code,{children:"body"}),". This is what it will look like in code."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:'message = t.struct(\n {\n id"": t.integer(as_id=True, config=["auto"]),\n "title": t.string(),\n "body": t.string(),\n },\n name="message",\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Great! Now you need a runtime which processes database requests. You will be using another runtime that comes out of the box with ",(0,s.jsx)(n.code,{children:"Metatype"}),". i.e the ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes/prisma",children:"PrismaRuntime"}),". Let's go ahead and introduce the ",(0,s.jsx)(n.code,{children:"PrismaRuntime"})," to your app. You can add the following code below the ",(0,s.jsx)(n.code,{children:"PythonRuntime"})," that was predefined."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:'...\npython = PythonRuntime()\ndb = PrismaRuntime("database", "POSTGRES_CONN")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Last, you need to expose a ",(0,s.jsx)(n.code,{children:"Create"})," and ",(0,s.jsx)(n.code,{children:"Read"})," endpoints to your database table. Let's add these two lines to ",(0,s.jsx)(n.code,{children:"g.expose"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python3",children:"...\ng.expose(\n public,\n hello=hello,\n create_message=db.create(message),\n list_messages=db.find_many(message),\n)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["With these simple steps, you were able to build a basic backend with database capabilities. Finally, this is what your typegraph looks like in ",(0,s.jsx)(n.code,{children:"example.py"}),"."]}),"\n",(0,s.jsx)(l.A,{language:"python",children:t(12599).content}),"\n",(0,s.jsxs)(n.p,{children:["You are almost there to test your first ",(0,s.jsx)(n.code,{children:"Metatype"})," application. You now need to spin a ",(0,s.jsx)(n.a,{href:"/docs/reference/typegate",children:"Tyepgate"})," and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the ",(0,s.jsx)(n.em,{children:"Meta CLI"}),". To run the ",(0,s.jsx)(n.a,{href:"/docs/reference/meta-cli/embedded-typegate",children:"embedded typegate"}),", execute the following command from your terminal."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"meta dev\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Once you started your typegate instance using one of the available choice, if you open ",(0,s.jsx)(n.a,{href:"http://localhost:7890",children:"localhost:7890"})," in your browser, you will get a webpage similar to this one."]}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/running-typegate.png",alt:"running typegate"}),"\n",(0,s.jsxs)(n.p,{children:["To deploy your typegraph to the typegate engine, there are two approaces you can follow. You can either use ",(0,s.jsx)(n.a,{href:"/docs/guides/programmatic-deployment",children:"self-deploy"})," which comes with the typegraph SDK or the ",(0,s.jsx)(n.a,{href:"/docs/reference/meta-cli",children:"Meta CLI"}),". For now, you will be deploying your typegraph using the ",(0,s.jsx)(n.code,{children:"Meta CLI"}),". Execute the command below on your terminal to deploy the typegraph."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"meta deploy -f api/example.py --allow-dirty --create-migration --target dev --gate http://localhost:7890\n"})}),"\n",(0,s.jsx)(n.p,{children:"Upon successful deployment of the typegraph, you should recieve a response similar like this."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-console",children:'(example-py3.11) user@pc first-project % meta deploy -f api/example.py --allow-dirty --create-migration --target dev --gate http://localhost:7890\n[INFO] Loading module "/Users/user/Documents/metatype-playground/projects/first-project/api/example.py"\n[INFO] Loaded 1 typegraph from "/Users/user/Documents/metatype-playground/projects/first-project/api/example.py": example\n[INFO] All modules have been loaded. Stopping the loader.\n[INFO] Pushing typegraph example (from \'/Users/user/Documents/metatype-playground/projects/first-project/api/example.py\')\n[INFO] \u2713 Successfully pushed typegraph example.\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You have deployed your first typegraph. It's time to run and test your backend which is running on your typegate instance. Click ",(0,s.jsx)(n.a,{href:"http://localhost:7890/example",children:"here"})," to open a ",(0,s.jsx)(n.code,{children:"GraphiQL"})," interface and interact with your backend through ",(0,s.jsx)(n.code,{children:"graphql"})," queries from your browser. You should get a page similar to the one below."]}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/tg-on-typegate.png",alt:"typegraph on typegate"}),"\n",(0,s.jsxs)(n.p,{children:["Now you can play with your app through the interface. You can try this ",(0,s.jsx)(n.code,{children:"graphql"})," query as a start."]}),"\n",(0,s.jsx)(n.p,{children:"Create a message using the following mutation."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-graphql",children:'mutation {\n create_message(\n data: {\n title: "First typegraph"\n body: "Congrats on your first typegraph."\n }\n ) {\n id\n }\n}\n'})}),"\n",(0,s.jsx)(n.p,{children:"Then, fetch the created message using the query below."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-graphql",children:"query {\n list_messages\n}\n"})}),"\n",(0,s.jsx)(n.p,{children:"You should get a response from the typegate similar to then one below."}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/query-result.png",alt:"query result"}),"\n",(0,s.jsx)(n.p,{children:"You can also try out what you have built so far here on this playground."}),"\n",(0,s.jsx)(p.A,{typegraph:"quick-start-project",python:t(12599),query:t(84443)})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}function m(e){const n={a:"a",code:"code",em:"em",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["There are two variations to write your app using Typescript. You can either use ",(0,s.jsx)(n.code,{children:"node"})," or ",(0,s.jsx)(n.code,{children:"deno"})," as the TypeScript runtime. For now, you will be using ",(0,s.jsx)(n.code,{children:"node"}),". To bootstrap a node ",(0,s.jsx)(n.code,{children:"Metatype"})," project, you can run the following commands."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"# create startup files\nmeta new --template node\n\n# install dependencies\nnpm install\n"})}),"\n",(0,s.jsx)(n.p,{children:"This will create the necessary files for development, some of which are:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:".graphqlrc.yaml"}),": configuration file to define settings and options related to GraphQL."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"compose.yml"}),": is where the typegate node and similar services are setup."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"metatype.yaml"}),": is where you configure different variables such as authentication, secrets... used by the backend."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The command also creates a directory called ",(0,s.jsx)(n.code,{children:"api"})," where you will be building much of your applications's business logic. Inside the ",(0,s.jsx)(n.code,{children:"api"})," directory, you will find a single file called ",(0,s.jsx)(n.code,{children:"example.ts"})," which defines a simple ",(0,s.jsx)(n.a,{href:"/docs/reference/typegraph",children:"Typegraph"}),"."]}),"\n",(0,s.jsx)(l.A,{language:"typescript",children:t(1755).content}),"\n",(0,s.jsxs)(n.p,{children:["Let's break down the above code snippet. The ",(0,s.jsx)(n.code,{children:"typegraph"})," function is your building block and it encompasses most of the app logic inside. It takes a name and a callback function as an argument. All the magic is done inside the callback function."]}),"\n",(0,s.jsxs)(n.p,{children:["Metatype uses Policy Based ",(0,s.jsx)(n.a,{href:"/docs/reference/policies",children:"Access Control"})," for accessing resources in your backend and here you have defined a public access."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"const pub = Policy.public();\n"})}),"\n",(0,s.jsxs)(n.p,{children:["There are two runtimes defined namely ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes/python",children:"PythonRuntime"})," and ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes/deno",children:"DenoRuntime"}),". You will be using these two runtimes to perform different data operations along with the other ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes",children:"runtimes"})," Metatype provides."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"const deno = new DenoRuntime();\nconst python = new PythonRuntime();\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now that you have runtimes to process data and you have specified your access control, you need to define endpoints to communicate with your backend. This is where you use the ",(0,s.jsx)(n.code,{children:"g.expose"})," method to enumerate the endpoints you want in your application. From the starter file, you can see that you have defined two endpoints, ",(0,s.jsx)(n.code,{children:"add"})," and ",(0,s.jsx)(n.code,{children:"multiply"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"g.expose({\n add: python\n .fromLambda(t.struct({ first: t.float(), second: t.float() }), t.float(), {\n code: \"lambda x: x['first'] + x['second']\",\n })\n .withPolicy(pub),\n multiply: deno\n .func(t.struct({ first: t.float(), second: t.float() }), t.float(), {\n code: \"({first, second}) => first * second\",\n })\n .withPolicy(pub),\n});\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Let's dive into what the ",(0,s.jsx)(n.code,{children:"add"})," endpoint is doing. The ",(0,s.jsx)(n.code,{children:"add"})," endpoint defines a ",(0,s.jsx)(n.code,{children:"custom function"})," which does data processing using the ",(0,s.jsx)(n.code,{children:"PythonRuntime"}),". When you are defining the custom function, you pass the input type, output type and then a ",(0,s.jsx)(n.a,{href:"/docs/concepts/mental-model#functions",children:"function"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["That's it! You have created your first ",(0,s.jsx)(n.code,{children:"Metatype"})," app. It's as easy as this. Before you go ahead and test your app, let's add two more endpoints which peform basic ",(0,s.jsx)(n.code,{children:"Create"})," and ",(0,s.jsx)(n.code,{children:"Read"})," database operation."]}),"\n",(0,s.jsxs)(n.p,{children:["In order to exercise database capabilities, you need to build a table schema or a model. The typegraph SDK provides rich ",(0,s.jsx)(n.a,{href:"/docs/reference/types",children:"Types"})," which you can use to create any database table that fits to your usecase. Let's create a simple Message table which has fields ",(0,s.jsx)(n.code,{children:"id"}),", ",(0,s.jsx)(n.code,{children:"title"})," and ",(0,s.jsx)(n.code,{children:"body"}),". This is what it will look like in code."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'const message = t.struct(\n {\n id: t.integer({}, { asId: true, config: { auto: true } }), // configuring your primary key\n title: t.string(),\n body: t.string(),\n },\n { name: "message" }, // the name of your type\n);\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Great! Now you need a runtime which processes database requests. You will be using another runtime that comes out of the box with ",(0,s.jsx)(n.code,{children:"Metatype"}),". i.e the ",(0,s.jsx)(n.a,{href:"/docs/reference/runtimes/prisma",children:"PrismaRuntime"}),". Let's go ahead and introduce the ",(0,s.jsx)(n.code,{children:"PrismaRuntime"})," to your app. You can add the following code below the two runtimes that were predefined."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'...\nconst python = new PythonRuntime();\nconst db = new PrismaRuntime("database", "POSTGRES_CONN");\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Last, you need to expose a ",(0,s.jsx)(n.code,{children:"Create"})," and ",(0,s.jsx)(n.code,{children:"Read"})," endpoints to your database table. Let's add these two lines to ",(0,s.jsx)(n.code,{children:"g.expose"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"...\ng.expose({\n ...,\n // add following to your typegraph\n create_message: db.create(message).withPolicy(pub),\n list_messages: db.findMany(message).withPolicy(pub),\n});\n"})}),"\n",(0,s.jsxs)(n.p,{children:["With these three simple steps, you were able to build a basic backend with database capabilities. Finally, this is what your typegraph looks like in ",(0,s.jsx)(n.code,{children:"example.ts"}),"."]}),"\n",(0,s.jsx)(l.A,{language:"typescript",children:t(5641).content}),"\n",(0,s.jsxs)(n.p,{children:["You are almost there to test your first ",(0,s.jsx)(n.code,{children:"Metatype"})," application. You now need to spin a ",(0,s.jsx)(n.a,{href:"/docs/reference/typegate",children:"Tyepgate"})," and deploy your typegraph to the instance. You can leverage the embedded typegate that comes with the ",(0,s.jsx)(n.em,{children:"Meta CLI"}),". To run the ",(0,s.jsx)(n.a,{href:"/docs/reference/meta-cli/embedded-typegate",children:"embedded typegate"}),", execute the following command from your terminal."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"meta dev\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Once you started your typegate instance using one of the available choice, if you open ",(0,s.jsx)(n.a,{href:"http://localhost:7890",children:"localhost:7890"})," in your browser, you will get a webpage similar to this one."]}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/running-typegate.png",alt:"running typegate"}),"\n",(0,s.jsxs)(n.p,{children:["To deploy your typegraph to the typegate engine, there are two approaces you can follow. You can either use ",(0,s.jsx)(n.code,{children:"self-deploy"})," which comes with the typegraph SDK or the ",(0,s.jsx)(n.a,{href:"/docs/reference/meta-cli",children:"Meta CLI"}),". For now, you will be deploying your typegraph using the ",(0,s.jsx)(n.code,{children:"Meta CLI"}),". Execute the command below on your terminal to deploy the typegraph."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"meta deploy -f api/example.ts --allow-dirty --create-migration --target dev --gate http://localhost:7890\n"})}),"\n",(0,s.jsx)(n.p,{children:"Upon successful deployment of the typegraph, you should recieve a response similar like this."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-console",children:'(example-py3.11) user@pc first-project % meta deploy -f api/example.py --allow-dirty --create-migration --target dev --gate http://localhost:7890\n[INFO] Loading module "/Users/user/Documents/metatype-playground/projects/first-project/api/example.ts"\n[INFO] Loaded 1 typegraph from "/Users/user/Documents/metatype-playground/projects/first-project/api/example.ts": example\n[INFO] All modules have been loaded. Stopping the loader.\n[INFO] Pushing typegraph example (from \'/Users/user/Documents/metatype-playground/projects/first-project/api/example.ts\')\n[INFO] \u2713 Successfully pushed typegraph example.\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You have deployed your first typegraph. It's time to run and test your backend which is running on the typegate instance. Click ",(0,s.jsx)(n.a,{href:"http://localhost:7890/example",children:"here"})," to open a ",(0,s.jsx)(n.code,{children:"GraphiQL"})," interface and interact with your backend through ",(0,s.jsx)(n.code,{children:"graphql"})," queries from your browser. You should get a page similar to the one below."]}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/tg-on-typegate.png",alt:"typegraph on typegate"}),"\n",(0,s.jsxs)(n.p,{children:["Now you can play with your app through the interface. You can try this ",(0,s.jsx)(n.code,{children:"graphql"})," query as a start."]}),"\n",(0,s.jsx)(n.p,{children:"Create a message using the following mutation."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-graphql",children:'mutation {\n create_message(\n data: {\n title: "First typegraph"\n body: "Congrats on your first typegraph."\n }\n ) {\n id\n }\n}\n'})}),"\n",(0,s.jsx)(n.p,{children:"Then, fetch the created message using the query below."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-graphql",children:"query {\n list_messages\n}\n"})}),"\n",(0,s.jsx)(n.p,{children:"You should get a response from the typegate similar to then one below."}),"\n",(0,s.jsx)("img",{src:"/images/tutorial/query-result.png",alt:"query result"}),"\n",(0,s.jsx)(n.p,{children:"You can also try out what you have built so far here on this playground."}),"\n",(0,s.jsx)(p.A,{typegraph:"quick-start-project",typescript:t(5641),query:t(84443)})]})}function y(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}const g=[];function x(e){const n={a:"a",code:"code",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["Now you are ready to develop for your first app! You can use ",(0,s.jsx)(n.a,{href:"#4-verify-your-installation",children:"meta doctor"})," to check if neccessary components are installed. Let's start by creating a working directory for the project. Open your terminal and run the following commands."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"mkdir first-project\ncd first-project\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now that you have your workspace and development environment setup, let's start building a simple ",(0,s.jsx)(n.code,{children:"CRUD"})," application."]}),"\n",(0,s.jsxs)(n.p,{children:["The SDK used for developing ",(0,s.jsx)(n.code,{children:"Metatype"})," applications is the ",(0,s.jsx)(n.a,{href:"/docs/reference/typegraph",children:"Typegraph"}),". Currently, it's available through Typescript and Python."]}),"\n",(0,s.jsxs)(c.Ay,{children:[(0,s.jsx)(d.A,{value:"typescript",children:(0,s.jsx)(y,{})}),(0,s.jsx)(d.A,{value:"python",children:(0,s.jsx)(u,{})})]})]})}function f(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}const j={sidebar_position:1},b="Quick-start",w={id:"tutorials/quick-start/index",title:"Quick-start",description:"This page will show you how to install the different components used by Metatype. It will also go over a simple application to get you started.",source:"@site/docs/tutorials/quick-start/index.mdx",sourceDirName:"tutorials/quick-start",slug:"/tutorials/quick-start/",permalink:"/docs/tutorials/quick-start/",draft:!1,unlisted:!1,editUrl:"https://github.com/metatypedev/metatype/tree/main/docs/metatype.dev/docs/tutorials/quick-start/index.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"docs",previous:{title:"Getting started",permalink:"/docs/"},next:{title:"Metatype Basics",permalink:"/docs/tutorials/metatype-basics/"}},v={},k=[{value:"1. Meta CLI",id:"1-meta-cli",level:2},...o.RM,{value:"2. Typegraph SDK",id:"2-typegraph-sdk",level:2},...i.RM,{value:"3. Typegate node",id:"3-typegate-node",level:2},...r.RM,{value:"4. Verify your installation",id:"4-verify-your-installation",level:2},{value:"Writing your First App",id:"writing-your-first-app",level:2},...g];function N(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"quick-start",children:"Quick-start"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"This page will show you how to install the different components used by Metatype. It will also go over a simple application to get you started."})}),"\n",(0,s.jsx)(n.admonition,{title:"You will learn",type:"note",children:(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"how to install the Metatype SDKs and tools."}),"\n",(0,s.jsx)(n.li,{children:"how to create and run a Metatype app."}),"\n"]})}),"\n",(0,s.jsx)(n.h2,{id:"1-meta-cli",children:"1. Meta CLI"}),"\n",(0,s.jsx)(o.Ay,{}),"\n",(0,s.jsx)(n.h2,{id:"2-typegraph-sdk",children:"2. Typegraph SDK"}),"\n",(0,s.jsx)(i.Ay,{}),"\n",(0,s.jsx)(n.h2,{id:"3-typegate-node",children:"3. Typegate node"}),"\n",(0,s.jsx)(r.Ay,{}),"\n",(0,s.jsx)(n.h2,{id:"4-verify-your-installation",children:"4. Verify your installation"}),"\n",(0,s.jsx)(n.p,{children:"The doctor subcommand will attempt to detect all the components and report any potential issue. Please make sure to run it before opening an issue and include the output in your report."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"meta doctor\n"})}),"\n",(0,s.jsx)(n.p,{children:"After Sucessful installation, the above command produces an output somewhat similar to the one below."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-console",children:"user@first-project:~$ meta doctor\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Global \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\ncurr. directory /Users/user/Documents/metatype-playground/projects/first-project\nglobal config /Users/user/Library/Application Support/dev.metatype.meta/config.json\nmeta-cli version 0.3.6\ndocker version Docker version 24.0.7, build afdd53b\ncontainers bitnami/minio:2022 (Up 3 days), postgres:15 (Up 3 days), bitnami/redis:7.0 (Up 3 days), envoyproxy/envoy:v1.26-latest (Up 3 days), redis:7 (Up 3 days), rabbitmq:3-management (Up 45 hours)\n\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Project \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\nmetatype file metatype.yaml\ntargets [2] deploy (remote, 3 secrets), dev (local, 3 secrets)\ntypegraphs [0]\n\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Python SDK \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\npython version Python 3.11.3\npython bin ../../../../../../Library/Caches/pypoetry/virtualenvs/example-paIt3smx-py3.11/bin/python\nvenv folder not found\npyproject file pyproject.toml\npipfile file not found\nrequirements file not found\ntypegraph version 0.3.6\n\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 Typescript SDK \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\ndeno version deno 1.39.4\nnode version v18.16.0\n\n\u250c\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2510\n| In case of issue or question, please raise a ticket on: |\n| https://github.com/metatypedev/metatype/issues |\n| Or browse the documentation: |\n| https://metatype.dev/docs |\n\u2514\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2518\n"})}),"\n",(0,s.jsx)(n.h2,{id:"writing-your-first-app",children:"Writing your First App"}),"\n",(0,s.jsx)(f,{})]})}function T(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(N,{...e})}):N(e)}},25459:(e,n,t)=>{"use strict";t.d(n,{A:()=>r});t(30758);var s=t(54133),a=t(56315),o=t(86070);function r(e){let{children:n}=e;const[t,r]=(0,s.d)();return(0,o.jsx)(a.mS,{choices:{poetry:"poetry",pip:"pip"},choice:t,onChange:r,children:n})}},65480:(e,n,t)=>{"use strict";t.d(n,{Ay:()=>r,gc:()=>i});t(30758);var s=t(3733),a=t(56315),o=t(86070);function r(e){let{children:n}=e;const[t,r]=(0,s.e)();return(0,o.jsx)(a.mS,{choices:{typescript:"Typescript SDK",python:"Python SDK"},choice:t,onChange:r,children:n})}function i(e){let{children:n}=e;const[t]=(0,s.e)();return(0,o.jsx)(a.q9,{choices:{typescript:"Typescript SDK",python:"Python SDK"},choice:t,children:n})}},65671:(e,n,t)=>{"use strict";t.d(n,{A:()=>o});var s=t(98302),a=(t(30758),t(86070));function o(e){let{python:n,typescript:t,rust:o,...r}=e;const i=[n&&{content:n.content,codeLanguage:"python",codeFileUrl:n.path},t&&{content:t.content,codeLanguage:"typescript",codeFileUrl:t.path},o&&{content:o.content,codeLanguage:"rust",codeFileUrl:o.path}].filter((e=>!!e));return(0,a.jsx)(s.A,{code:0==i.length?void 0:i,...r})}},9234:(e,n,t)=>{"use strict";t.d(n,{A:()=>r});t(30758);var s=t(54133),a=t(56315),o=t(86070);function r(e){let{children:n}=e;const[t,r]=(0,s.a)();return(0,o.jsx)(a.mS,{choices:{pnpm:"pnpm",npm:"npm",jsr:"jsr",deno:"deno",yarn:"yarn",bun:"bun"},choice:t,onChange:r,children:n})}},54133:(e,n,t)=>{"use strict";t.d(n,{a:()=>y,d:()=>g});var s=t(62104),a=t(12452),o=t(58346),r=t(40006),i=t(30758);const c="tsPackageManager",d="pythonPackageManager",l=(0,o.N)(),p=(0,s.eU)((e=>e(l).searchParams?.get(c)),((e,n,t)=>{const s=e(l).searchParams??new URLSearchParams;s.set(c,t),n(l,(e=>({...e,searchParams:s})))})),h=(0,s.eU)((e=>e(l).searchParams?.get(d)),((e,n,t)=>{const s=e(l).searchParams??new URLSearchParams;s.set(d,t),n(l,(e=>({...e,searchParams:s})))})),u=(0,r.tG)(c,"npm",(0,r.KU)((()=>sessionStorage))),m=(0,r.tG)(d,"poetry",(0,r.KU)((()=>sessionStorage)));function y(){const[e,n]=(0,a.fp)(p),[t,s]=(0,a.fp)(u);(0,i.useEffect)((()=>{e&&e!==t&&s(e)}),[e,s]);const o=(0,i.useCallback)((e=>{n(e),s(e)}),[n,s]);return[e??t,o]}function g(){const[e,n]=(0,a.fp)(h),[t,s]=(0,a.fp)(m);(0,i.useEffect)((()=>{e&&e!==t&&s(e)}),[e,s]);const o=(0,i.useCallback)((e=>{n(e),s(e)}),[n,s]);return[e??t,o]}},84443:e=>{var n={kind:"Document",definitions:[{kind:"OperationDefinition",operation:"mutation",name:{kind:"Name",value:"CreateMessage"},variableDefinitions:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"create_message"},arguments:[{kind:"Argument",name:{kind:"Name",value:"data"},value:{kind:"ObjectValue",fields:[{kind:"ObjectField",name:{kind:"Name",value:"title"},value:{kind:"StringValue",value:"First typegraph",block:!1}},{kind:"ObjectField",name:{kind:"Name",value:"body"},value:{kind:"StringValue",value:"Congrats on your first typegraph.",block:!1}}]}}],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"id"},arguments:[],directives:[]}]}}]}},{kind:"OperationDefinition",operation:"query",name:{kind:"Name",value:"ListMessages"},variableDefinitions:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"list_messages"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"id"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"title"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"body"},arguments:[],directives:[]}]}}]}}],loc:{start:0,end:231}};n.loc.source={body:'mutation CreateMessage {\n create_message(\n data: {\n title: "First typegraph"\n body: "Congrats on your first typegraph."\n }\n ) {\n id\n }\n}\n\nquery ListMessages {\n list_messages {\n id\n title\n body\n }\n}\n',name:"GraphQL request",locationOffset:{line:1,column:1}};function t(e,n){if("FragmentSpread"===e.kind)n.add(e.name.value);else if("VariableDefinition"===e.kind){var s=e.type;"NamedType"===s.kind&&n.add(s.name.value)}e.selectionSet&&e.selectionSet.selections.forEach((function(e){t(e,n)})),e.variableDefinitions&&e.variableDefinitions.forEach((function(e){t(e,n)})),e.definitions&&e.definitions.forEach((function(e){t(e,n)}))}var s={};function a(e,n){for(var t=0;t\n '.concat(t,'\n
'),document.body.appendChild(r);var o,a=r.querySelector(".gleap-tooltip-arrow"),i=function(e,t,n,r){void 0===r&&(r={});const{ancestorScroll:o=!0,ancestorResize:a=!0,elementResize:i="function"==typeof ResizeObserver,layoutShift:s="function"==typeof IntersectionObserver,animationFrame:l=!1}=r,c=fe(e),u=o||a?[...c?de(c):[],...de(t)]:[];u.forEach((e=>{o&&e.addEventListener("scroll",n,{passive:!0}),a&&e.addEventListener("resize",n)}));const d=c&&s?function(e,t){let n,r=null;const o=X(e);function a(){var e;clearTimeout(n),null==(e=r)||e.disconnect(),r=null}return function i(s,l){void 0===s&&(s=!1),void 0===l&&(l=1),a();const{left:c,top:u,width:d,height:p}=e.getBoundingClientRect();if(s||t(),!d||!p)return;const f={rootMargin:-O(u)+"px "+-O(o.clientWidth-(c+d))+"px "+-O(o.clientHeight-(u+p))+"px "+-O(c)+"px",threshold:I(0,L(1,l))||1};let m=!0;function g(e){const t=e[0].intersectionRatio;if(t!==l){if(!m)return i();t?i(!1,t):n=setTimeout((()=>{i(!1,1e-7)}),100)}m=!1}try{r=new IntersectionObserver(g,{...f,root:o.ownerDocument})}catch(h){r=new IntersectionObserver(g,f)}r.observe(e)}(!0),a}(c,n):null;let p,f=-1,m=null;i&&(m=new ResizeObserver((e=>{let[r]=e;r&&r.target===c&&m&&(m.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame((()=>{var e;null==(e=m)||e.observe(t)}))),n()})),c&&!l&&m.observe(c),m.observe(t));let g=l?ve(e):null;return l&&function t(){const r=ve(e);!g||r.x===g.x&&r.y===g.y&&r.width===g.width&&r.height===g.height||n(),g=r,p=requestAnimationFrame(t)}(),n(),()=>{var e;u.forEach((e=>{o&&e.removeEventListener("scroll",n),a&&e.removeEventListener("resize",n)})),null==d||d(),null==(e=m)||e.disconnect(),m=null,l&&cancelAnimationFrame(p)}}(e,r,(function(){((e,t,n)=>{const r=new Map,o={platform:Te,...n},a={...o.platform,_c:r};return(async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:a=[],platform:i}=n,s=a.filter(Boolean),l=await(null==i.isRTL?void 0:i.isRTL(t));let c=await i.getElementRects({reference:e,floating:t,strategy:o}),{x:u,y:d}=G(c,r,l),p=r,f={},h=0;for(let m=0;m\n \n
\n \n \n
'.concat(u("dismiss"),"
\n ").concat(u("rect"),'
\n \n \n \n
\n "),document.body.appendChild(e),e.setAttribute("dir",Zn.getInstance().isRTLLayout?"rtl":"ltr")}},{key:"unregisterListeners",value:function(){this.escListener&&document.removeEventListener("keydown",this.escListener),this.pageLeaveListener&&window.removeEventListener("beforeunload",this.pageLeaveListener)}},{key:"registerListeners",value:function(){var e=this;this.escListener=function(t){var n=!1,r=!1;"key"in(t=t||window.event)&&(n="Escape"===t.key,r="Enter"===t.key),n&&e.dismiss(),"screenshot"===e.type&&r&&e.showNextStep()},document.addEventListener("keydown",this.escListener),this.pageLeaveListener=function(e){e.preventDefault(),e.returnValue=""},window.addEventListener("beforeunload",this.pageLeaveListener)}},{key:"show",value:function(e){this.callback=e,this.registerListeners(),this.hideWidgetUI(),this.createEditorUI(),this.setupMousePointer(),"screenshot"===this.type?(go.getInstance().setGlobalDataItem("snapshotPosition",{x:window.scrollX,y:window.scrollY}),Bn.disableScroll()):this.setupScreenRecording(),this.screenDrawer=new Rn(this.captureScreenDrawerRerender.bind(this)),this.setupColorPicker(),this.setupToolbar()}},{key:"setupColorPicker",value:function(){for(var t=this,n=document.querySelector(".bb-capture-toolbar-item-selectedcolor"),r=document.querySelectorAll(".bb-capture-toolbar-item-color"),o=document.querySelector(".bb-capture-toolbar-item-colorpicker"),a=function(){var a=r[i],s=a.getAttribute("data-color");a.style.backgroundColor=s,a.onclick=function(){a&&(t.screenDrawer.setColor(s),o&&(o.style.display="none"),n.style.backgroundColor=a.style.backgroundColor,e.setPenColor(s))}},i=0;i\n \n \n
\n \n '.concat(t.data.coverImageUrl&&""!==t.data.coverImageUrl&&!t.data.coverImageUrl.includes("NewsImagePlaceholder")?'
'):"",'\n
")):t.data.checklist?((r=Math.round(t.data.currentStep/t.data.totalSteps*100))<100&&(r+=4),o.className="gleap-notification-item-checklist",o.innerHTML='\n \n
\n ').concat(n,"
\n ").concat(t.data.previewText&&t.data.previewText.length>0?''.concat(t.data.previewText,"
"):"".concat(t.data.sender?'\n \n '.concat(t.data.sender.profileImageUrl&&'
')," ").concat(t.data.sender.name,"
"):""),"\n \n
")):(o.className="gleap-notification-item",o.innerHTML="\n ".concat(t.data.sender&&t.data.sender.profileImageUrl&&'\n
\n '.concat(t.data.text,'
\n \n \n
\n \n \n ').concat(t.data.nextStepTitle,"\n
\n \n ').concat(t.data.sender?'
")),e.notificationContainer.appendChild(o)},a=0;a'.concat(t.data.sender.name,"
"):"",'\n ').concat(n,"
\n ').concat(u("unmute"),"
\n ");else{var d="";e.sender&&e.sender.firstName&&(c=!0,d='\n \n
")),l="".concat(d,'")}var p={disableActiveInteraction:!i&&!s,popover:Qr({description:l,popoverClass:"gleap-tour-popover-".concat(a.type," ").concat(!c&&"gleap-tour-popover-no-sender"," ").concat(e.allowClose&&"gleap-tour-popover-can-close")},i?{showButtons:[]}:{})};a.selector&&a.selector.length>0&&(p.element=a.selector),r.push(p)}var f=["next","close"];e.backButton&&f.push("previous");var h=Yr(to(to(to(to(to(to(to(to({showProgress:!0,steps:r},"showProgress",t.length>1),"allowClose",e.allowClose),"nextBtnText",e.nextText),"doneBtnText",e.doneText),"prevBtnText",e.prevText),"showButtons",f),"onDestroyStarted",(function(){h.hasNextStep()?h.destroy():(h.destroy(),n.onCompletion&&n.onCompletion({tourId:n.productTourId})),document.removeEventListener("click",m)})),"onPopoverRender",(function(e){if(e)for(var t=document.querySelectorAll(".gleap-tour-popover-description img, .gleap-tour-popover-description video"),r=function(){setTimeout((function(){h.refresh()}),500),setTimeout((function(){h.refresh()}),750)},o=0;o').concat(e.sender.firstName,"
\n \n
\n`}(e)).replace(/{let{route:t}=e;return!0===t.exact})))return R.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return R.set(e.pathname,t),{...e,pathname:t}}((0,p.zy)());return(0,b.jsx)(q,{location:e,children:Q})}function te(){return(0,b.jsx)(Y.A,{children:(0,b.jsx)(j.l,{children:(0,b.jsxs)(N.x,{children:[(0,b.jsxs)(w,{children:[(0,b.jsx)(Z,{}),(0,b.jsx)(M,{}),(0,b.jsx)(K,{}),(0,b.jsx)(ee,{})]}),(0,b.jsx)(J,{})]})})})}var ne=n(84054);const re=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var oe=n(7771);const ae=new Set,ie=new Set,se=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,le={prefetch:e=>{if(!(e=>!se()&&!ie.has(e)&&!ae.has(e))(e))return!1;ae.add(e);const t=(0,f.u)(d.A,e).flatMap((e=>{return t=e.route.path,Object.entries(ne).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,oe.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?re(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!se()&&!ie.has(e))(e)&&(ie.add(e),z(e))},ce=Object.freeze(le);function ue(e){let{children:t}=e;return"hash"===l.default.future.experimental_router?(0,b.jsx)(i.I9,{children:t}):(0,b.jsx)(i.Kd,{children:t})}const de=Boolean(!0);if(c.A.canUseDOM){window.docusaurus=ce;const e=document.getElementById("__docusaurus"),t=(0,b.jsx)(a.vd,{children:(0,b.jsx)(ue,{children:(0,b.jsx)(te,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(de)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};z(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},5775:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(30758),o=n(4784);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"docs":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"index","docs":[{"id":"concepts/architecture/index","path":"/docs/concepts/architecture/","sidebar":"docs"},{"id":"concepts/comparisons/index","path":"/docs/concepts/comparisons/","sidebar":"docs"},{"id":"concepts/features-overview/index","path":"/docs/concepts/features-overview/","sidebar":"docs"},{"id":"concepts/mental-model/index","path":"/docs/concepts/mental-model/","sidebar":"docs"},{"id":"concepts/RFCs/index","path":"/docs/concepts/RFCs/","sidebar":"docs"},{"id":"concepts/RFCs/M0-template","path":"/docs/concepts/RFCs/M0-template","sidebar":"docs"},{"id":"guides/contributing","path":"/docs/guides/contributing","sidebar":"docs"},{"id":"guides/external-functions/index","path":"/docs/guides/external-functions/","sidebar":"docs"},{"id":"guides/files-upload/index","path":"/docs/guides/files-upload/","sidebar":"docs"},{"id":"guides/import-external-modules/index","path":"/docs/guides/import-external-modules/","sidebar":"docs"},{"id":"guides/programmatic-deployment/index","path":"/docs/guides/programmatic-deployment/","sidebar":"docs"},{"id":"guides/rest/index","path":"/docs/guides/rest/","sidebar":"docs"},{"id":"guides/securing-requests/index","path":"/docs/guides/securing-requests/","sidebar":"docs"},{"id":"guides/self-hosting","path":"/docs/guides/self-hosting","sidebar":"docs"},{"id":"guides/test-your-typegraph/index","path":"/docs/guides/test-your-typegraph/","sidebar":"docs"},{"id":"guides/wasm-functions/index","path":"/docs/guides/wasm-functions/","sidebar":"docs"},{"id":"index","path":"/docs/","sidebar":"docs"},{"id":"reference/changelog","path":"/docs/reference/changelog","sidebar":"docs"},{"id":"reference/ecosystem/index","path":"/docs/reference/ecosystem/","sidebar":"docs"},{"id":"reference/graphql/index","path":"/docs/reference/graphql/","sidebar":"docs"},{"id":"reference/meta-cli/available-commands","path":"/docs/reference/meta-cli/available-commands","sidebar":"docs"},{"id":"reference/meta-cli/configuration-file","path":"/docs/reference/meta-cli/configuration-file","sidebar":"docs"},{"id":"reference/meta-cli/embedded-typegate/index","path":"/docs/reference/meta-cli/embedded-typegate/","sidebar":"docs"},{"id":"reference/meta-cli/index","path":"/docs/reference/meta-cli/","sidebar":"docs"},{"id":"reference/metagen/index","path":"/docs/reference/metagen/","sidebar":"docs"},{"id":"reference/policies/index","path":"/docs/reference/policies/","sidebar":"docs"},{"id":"reference/rest/index","path":"/docs/reference/rest/","sidebar":"docs"},{"id":"reference/runtimes/deno/index","path":"/docs/reference/runtimes/deno/","sidebar":"docs"},{"id":"reference/runtimes/graphql/index","path":"/docs/reference/runtimes/graphql/","sidebar":"docs"},{"id":"reference/runtimes/grpc/index","path":"/docs/reference/runtimes/grpc/","sidebar":"docs"},{"id":"reference/runtimes/http/index","path":"/docs/reference/runtimes/http/","sidebar":"docs"},{"id":"reference/runtimes/index","path":"/docs/reference/runtimes/","sidebar":"docs"},{"id":"reference/runtimes/kv/index","path":"/docs/reference/runtimes/kv/","sidebar":"docs"},{"id":"reference/runtimes/prisma/index","path":"/docs/reference/runtimes/prisma/","sidebar":"docs"},{"id":"reference/runtimes/python/index","path":"/docs/reference/runtimes/python/","sidebar":"docs"},{"id":"reference/runtimes/random/index","path":"/docs/reference/runtimes/random/","sidebar":"docs"},{"id":"reference/runtimes/s3/index","path":"/docs/reference/runtimes/s3/","sidebar":"docs"},{"id":"reference/runtimes/substantial/index","path":"/docs/reference/runtimes/substantial/","sidebar":"docs"},{"id":"reference/runtimes/temporal/index","path":"/docs/reference/runtimes/temporal/","sidebar":"docs"},{"id":"reference/runtimes/wasm/index","path":"/docs/reference/runtimes/wasm/","sidebar":"docs"},{"id":"reference/typegate/authentication/index","path":"/docs/reference/typegate/authentication/","sidebar":"docs"},{"id":"reference/typegate/cors/index","path":"/docs/reference/typegate/cors/","sidebar":"docs"},{"id":"reference/typegate/index","path":"/docs/reference/typegate/","sidebar":"docs"},{"id":"reference/typegate/rate-limiting/index","path":"/docs/reference/typegate/rate-limiting/","sidebar":"docs"},{"id":"reference/typegate/synchronization/index","path":"/docs/reference/typegate/synchronization/","sidebar":"docs"},{"id":"reference/typegraph/client/index","path":"/docs/reference/typegraph/client/","sidebar":"docs"},{"id":"reference/typegraph/index","path":"/docs/reference/typegraph/","sidebar":"docs"},{"id":"reference/types/comparison","path":"/docs/reference/types/comparison","sidebar":"docs"},{"id":"reference/types/functions","path":"/docs/reference/types/functions","sidebar":"docs"},{"id":"reference/types/index","path":"/docs/reference/types/","sidebar":"docs"},{"id":"reference/types/injections","path":"/docs/reference/types/injections","sidebar":"docs"},{"id":"reference/types/parameter-transformations","path":"/docs/reference/types/parameter-transformations","sidebar":"docs"},{"id":"tutorials/metatype-basics/index","path":"/docs/tutorials/metatype-basics/","sidebar":"docs"},{"id":"tutorials/quick-start/index","path":"/docs/tutorials/quick-start/","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/","label":"index"}}}}],"breadcrumbs":true},"use-cases":{"path":"/use-cases","versions":[{"name":"current","label":"Next","isLast":true,"path":"/use-cases","mainDocId":"automatic-crud-validation/index","docs":[{"id":"automatic-crud-validation/index","path":"/use-cases/automatic-crud-validation/","sidebar":"useCases"},{"id":"backend-for-frontend/index","path":"/use-cases/backend-for-frontend/","sidebar":"useCases"},{"id":"faas-runner/index","path":"/use-cases/faas-runner/","sidebar":"useCases"},{"id":"graphql-server/index","path":"/use-cases/graphql-server/","sidebar":"useCases"},{"id":"iam-provider/index","path":"/use-cases/iam-provider/","sidebar":"useCases"},{"id":"microservice-orchestration/index","path":"/use-cases/microservice-orchestration/","sidebar":"useCases"},{"id":"orm-for-the-edge/index","path":"/use-cases/orm-for-the-edge/","sidebar":"useCases"},{"id":"programmable-api-gateway/index","path":"/use-cases/programmable-api-gateway/","sidebar":"useCases"}],"draftIds":[],"sidebars":{"useCases":{"link":{"path":"/use-cases/automatic-crud-validation/","label":"Instant APIs on your database"}}}}],"breadcrumbs":true}},"docusaurus-lunr-search":{"default":{"fileNames":{"searchDoc":"search-doc-1733070006697.json","lunrIndex":"lunr-index-1733070006697.json"}}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(22654);const l=JSON.parse('{"docusaurusVersion":"3.4.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.4.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.4.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.4.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.4.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.4.0"},"docusaurus-plugin-sass":{"type":"package","name":"docusaurus-plugin-sass","version":"0.2.5"},"tailwindcss":{"type":"local"},"custom-code-loader":{"type":"local"},"posthog-docusaurus":{"type":"package","name":"posthog-docusaurus","version":"2.0.0"},"docusaurus-lunr-search":{"type":"package","name":"docusaurus-lunr-search","version":"3.4.0"},"docusaurus-theme-frontmatter":{"type":"package","name":"docusaurus-theme-frontmatter","version":"1.3.0"}}}');var c=n(86070);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},82017:(e,t,n)=>{"use strict";n.d(t,{A:()=>m});var r=n(30758),o=n(25283),a=n(74650),i=n(78946),s=n(22653),l=n(17832),c=n(86070);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(m,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.A,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const h=e=>(0,c.jsx)(f,{...e});class m extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??h)(e)}return e??null}}},25283:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},74650:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(30758);var r=n(70248),o=n(86070);function a(e){return(0,o.jsx)(r.mg,{...e})}},92076:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(30758),o=n(41742),a=n(78946),i=n(30340),s=n(51716),l=n(25283),c=n(25880),u=n(94887),d=n(86070);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:h,isActive:m,"data-noBrokenLinkCheck":g,autoAddBaseUrl:v=!0,...y}=e;const{siteConfig:b}=(0,i.A)(),{trailingSlash:w,baseUrl:x}=b,k=b.future.experimental_router,{withBaseUrl:S}=(0,u.hH)(),C=(0,c.A)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const T=p||f;const L=(0,s.A)(T),I=T?.replace("pathname://","");let A=void 0!==I?(O=I,v&&(e=>e.startsWith("/"))(O)?S(O):O):void 0;var O;"hash"===k&&A?.startsWith("./")&&(A=A?.slice(1)),A&&L&&(A=(0,a.applyTrailingSlash)(A,{trailingSlash:w,baseUrl:x}));const _=(0,r.useRef)(!1),P=n?o.k2:o.N_,M=l.A.canUseIntersectionObserver,R=(0,r.useRef)(),N=()=>{_.current||null==A||(window.docusaurus.preload(A),_.current=!0)};(0,r.useEffect)((()=>(!M&&L&&null!=A&&window.docusaurus.prefetch(A),()=>{M&&R.current&&R.current.disconnect()})),[R,A,M,L]);const j=A?.startsWith("#")??!1,D=!y.target||"_self"===y.target,F=!A||!L||!D;return g||!j&&F||C.collectLink(A),y.id&&C.collectAnchor(y.id),F?(0,d.jsx)("a",{ref:E,href:A,...T&&!L&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,d.jsx)(P,{...y,onMouseEnter:N,onTouchStart:N,innerRef:e=>{E.current=e,M&&e&&L&&(R.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(R.current.unobserve(e),R.current.disconnect(),null!=A&&window.docusaurus.prefetch(A))}))})),R.current.observe(e))},to:A,...n&&{isActive:m,activeClassName:h}})}const f=r.forwardRef(p)},88237:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var r=n(30758),o=n(86070);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(22654);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal Your Docusaurus site did not load properly.
\nA very common reason is a wrong site baseUrl configuration.
\nCurrent configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\nWe suggest trying baseUrl =
\n'};function o(e,t,n){return e
.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},46532:(e,t,n)=>{const r=n(39227),o=n(29670),a=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(57507).resolve(t)],delete Prism.languages[e],n(57507)(t),a.add(e)}))}i.silent=!1,e.exports=i},1274:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,a){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,s=i.length;-1!==n.code.indexOf(o=t(r,s));)++s;return i[s]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,a=Object.keys(n.tokenStack);!function i(s){for(var l=0;l\n '.concat(t,'\n
'),document.body.appendChild(r);var o,a=r.querySelector(".gleap-tooltip-arrow"),i=function(e,t,n,r){void 0===r&&(r={});const{ancestorScroll:o=!0,ancestorResize:a=!0,elementResize:i="function"==typeof ResizeObserver,layoutShift:s="function"==typeof IntersectionObserver,animationFrame:l=!1}=r,c=fe(e),u=o||a?[...c?de(c):[],...de(t)]:[];u.forEach((e=>{o&&e.addEventListener("scroll",n,{passive:!0}),a&&e.addEventListener("resize",n)}));const d=c&&s?function(e,t){let n,r=null;const o=X(e);function a(){var e;clearTimeout(n),null==(e=r)||e.disconnect(),r=null}return function i(s,l){void 0===s&&(s=!1),void 0===l&&(l=1),a();const{left:c,top:u,width:d,height:p}=e.getBoundingClientRect();if(s||t(),!d||!p)return;const f={rootMargin:-O(u)+"px "+-O(o.clientWidth-(c+d))+"px "+-O(o.clientHeight-(u+p))+"px "+-O(c)+"px",threshold:I(0,L(1,l))||1};let m=!0;function g(e){const t=e[0].intersectionRatio;if(t!==l){if(!m)return i();t?i(!1,t):n=setTimeout((()=>{i(!1,1e-7)}),100)}m=!1}try{r=new IntersectionObserver(g,{...f,root:o.ownerDocument})}catch(h){r=new IntersectionObserver(g,f)}r.observe(e)}(!0),a}(c,n):null;let p,f=-1,m=null;i&&(m=new ResizeObserver((e=>{let[r]=e;r&&r.target===c&&m&&(m.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame((()=>{var e;null==(e=m)||e.observe(t)}))),n()})),c&&!l&&m.observe(c),m.observe(t));let g=l?ve(e):null;return l&&function t(){const r=ve(e);!g||r.x===g.x&&r.y===g.y&&r.width===g.width&&r.height===g.height||n(),g=r,p=requestAnimationFrame(t)}(),n(),()=>{var e;u.forEach((e=>{o&&e.removeEventListener("scroll",n),a&&e.removeEventListener("resize",n)})),null==d||d(),null==(e=m)||e.disconnect(),m=null,l&&cancelAnimationFrame(p)}}(e,r,(function(){((e,t,n)=>{const r=new Map,o={platform:Te,...n},a={...o.platform,_c:r};return(async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:a=[],platform:i}=n,s=a.filter(Boolean),l=await(null==i.isRTL?void 0:i.isRTL(t));let c=await i.getElementRects({reference:e,floating:t,strategy:o}),{x:u,y:d}=G(c,r,l),p=r,f={},h=0;for(let m=0;m\n \n
\n \n \n
'.concat(u("dismiss"),"
\n ").concat(u("rect"),'
\n \n \n \n
\n \n