1import{j as e,r as j}from"./index-Cy4eGKU4.js";import{a as y,A as N,c}from"./MarketingPage-BdNh-Pd-.js";const w={primary:"primary-link","primary-spaced":"primary-link mt40",secondary:"secondary-link","secondary-docs":"secondary-link docs-link"},R=({label:s,href:i,target:a,variant:n="primary",labelAsParagraph:o=!1,className:h})=>{const p=n==="secondary"||n==="secondary-docs";return e.jsxs(y,{href:i,...a===void 0?{}:{target:a,rel:"noopener noreferrer"},className:c(w[n],h,"w-inline-block"),children:[o?e.jsx("p",{className:"primary-link-text",children:s}):e.jsx("div",{children:s}),p?e.jsx(N,{tone:"white",width:7,height:13}):e.jsx(N,{tone:"orange",size:13})]})},k={NextJS:{body:e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Add to your _document.js <Head> or /app/layout.tsx <head>:"}),` 2`,e.jsx("span",{}),` 3`,e.jsxs("span",{children:["{",e.jsx("label",{className:"hl-purple",children:"process"}),".env.",e.jsx("label",{className:"hl-purple",children:"NODE_ENV"}),' === "',e.jsx("label",{className:"hl-orange",children:"development"}),`" && ( 4`,e.jsxs("span",{children:[` <script 5`,e.jsx("label",{className:"hl-purple",children:" data-project-id"}),'="',e.jsx("label",{className:"hl-recording-token",children:"..."}),`" 6`,e.jsx("label",{className:"hl-purple",children:" src"}),'="',e.jsx("label",{className:"hl-orange",children:"https://snippet.meticulous.ai/v1/meticulous.js"}),`" 7 ><\/script>`]}),` 8`,e.jsx("span",{children:")}"}),` 9`]})]}),text:`Add to your _document.js <Head> or /app/layout.tsx <head>: 10 11{process.env.NODE_ENV === "development" && ( 12 <script data-project-id="..." src="https://snippet.meticulous.ai/v1/meticulous.js"><\/script> 13)} 14`},React:{body:e.jsxs(e.Fragment,{children:[e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," { tryLoadAndStartRecorder } ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:"'@alwaysmeticulous/recorder-loader'"})]}),` 15`,e.jsx("span",{}),` 16`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"async function"})," ",e.jsx("label",{className:"hl-method-definition",children:"startApp"}),"() {"]}),` 17 `,e.jsx("span",{children:e.jsx("label",{className:"hl-green",children:"// Record all sessions on localhost, staging stacks and preview URLs"})}),` 18 `,e.jsx("span",{children:"if (!isProduction()) {"}),`
19 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"await"})," ",e.jsx("label",{className:"hl-method-call",children:"tryLoadAndStartRecorder"}),"({"]}),` 20 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"projectId"}),": '",e.jsx("label",{className:"hl-recording-token",children:"..."}),"',"]}),` 21 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"isProduction"}),": false,"]}),` 22 `,e.jsx("span",{children:"});"}),` 23 `,e.jsx("span",{children:"}"}),` 24 `,e.jsx("span",{}),` 25 `,e.jsxs("span",{children:["ReactDOM.",e.jsx("label",{className:"hl-method-call",children:"render"}),"(component, document.",e.jsx("label",{className:"hl-method-call",children:"getElementById"}),"(",e.jsx("label",{className:"hl-green",children:"'root'"}),"));"]}),` 26`,e.jsx("span",{children:"}"}),` 27`,e.jsx("span",{}),` 28`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"function"})," ",e.jsx("label",{className:"hl-method-definition",children:"isProduction"}),"() {"]}),` 29 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"return"})," window.location.hostname.",e.jsx("label",{className:"hl-method-call",children:"indexOf"}),'("your-production-site.com") > -1;']}),` 30`,e.jsx("span",{children:"}"}),` 31`,e.jsx("span",{}),` 32`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-method-call",children:"startApp"}),"();"]})]}),text:`import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader' 33 34async function startApp() { 35 // Record all sessions on localhost, staging stacks and preview URLs 36 if (!isProduction()) { 37 await tryLoadAndStartRecorder({ 38 projectId: '...', 39 isProduction: false, 40 }); 41 } 42 43 ReactDOM.render(component, document.getElementById('root')); 44} 45 46function isProduction() { 47 return window.location.hostname.indexOf("your-production-site.com") > -1; 48} 49 50startApp();`},Vue:{body:e.jsxs(e.Fragment,{children:[e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," Vue ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:'"vue"'}),";"]}),` 51`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," App ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:'"./App.vue"'}),";"]}),` 52`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," router ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:'"./router"'}),";"]}),` 53`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," store ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:'"./store"'}),";"]}),` 54`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," { tryLoadAndStartRecorder } ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:"'@alwaysmeticulous/recorder-loader'"}),";"]}),` 55`,e.jsx("span",{}),` 56`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"async function"})," ",e.jsx("label",{className:"hl-method-definition",children:"startApp"}),"() {"]}),` 57 `,e.jsx("span",{children:"if (!isProduction()) {"}),`
58 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"await"})," ",e.jsx("label",{className:"hl-purple",children:"tryLoadAndStartRecorder"}),"({"]}),` 59 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"projectId:"})," '",e.jsx("label",{className:"hl-recording-token",children:"..."}),"',"]}),` 60 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"isProduction"}),": false,"]}),` 61 `,e.jsx("span",{children:"});"}),` 62 `,e.jsx("span",{children:"}"}),` 63 `,e.jsx("span",{}),` 64 `,e.jsx("span",{children:"new Vue({"})," ",e.jsxs("span",{children:[e.jsx("label",{className:"hl-green",children:"router"}),","]})," ",e.jsxs("span",{children:[e.jsx("label",{className:"hl-green",children:"store"}),","]})," ",e.jsxs("span",{children:[e.jsx("label",{className:"hl-green",children:"render"}),": h => ",e.jsx("label",{className:"hl-method-call",children:"h"}),"(App)"]}),e.jsxs("span",{children:["}).",e.jsx("label",{className:"hl-method-call",children:"$mount"}),'("',e.jsx("label",{className:"hl-orange",children:'#app"'}),");"]}),` 65`,e.jsx("span",{children:"}"}),` 66`,e.jsx("span",{}),` 67`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"function"})," ",e.jsx("label",{className:"hl-method-definition",children:"isProduction"}),"() {"]}),` 68 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"return"})," window.location.hostname.",e.jsx("label",{className:"hl-method-call",children:"indexOf"}),'("your-production-site.com") > -1;']}),` 69`,e.jsx("span",{children:"}"}),` 70`,e.jsx("span",{}),` 71`,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"startApp"}),"();"]})]}),text:`import Vue from "vue"; 72import App from "./App.vue"; 73import router from "./router"; 74import store from "./store"; 75import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'; 76 77async function startApp() { 78 if (!isProduction()) { 79 await tryLoadAndStartRecorder({ 80 projectId: '...', 81 isProduction: false, 82 }); 83 } 84 85 new Vue({ router, store, render: h => h(App)}).$mount("#app"); 86} 87 88function isProduction() { 89 return window.location.hostname.indexOf("your-production-site.com") > -1; 90} 91 92startApp();`},Angular:{body:e.jsxs(e.Fragment,{children:[e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," { platformBrowserDynamic } ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:"'@angular/platform-browser-dynamic'"}),";"]}),`
93 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," { AppModule } ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:"'./app/app.module'"}),";"]}),` 94 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"import"})," { tryLoadAndStartRecorder } ",e.jsx("label",{className:"hl-purple",children:"from"})," ",e.jsx("label",{className:"hl-green",children:"'@alwaysmeticulous/recorder-loader'"})]}),` 95 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"async function"})," ",e.jsx("label",{className:"hl-method-definition",children:"startApp"}),"() {"]}),` 96 `,e.jsx("span",{children:"if (!isProduction()) {"}),` 97 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"await"})," ",e.jsx("label",{className:"hl-method-call",children:"tryLoadAndStartRecorder"}),"({"]}),` 98 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"projectId:"})," '",e.jsx("label",{className:"hl-recording-token",children:"..."}),"',"]}),` 99 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"isProduction"}),": false,"]}),` 100 `,e.jsx("span",{children:"});"}),` 101 `,e.jsx("span",{children:"}"}),` 102 `,e.jsx("span",{}),` 103 `,e.jsx("span",{children:e.jsx("label",{className:"hl-green",children:"// Initalise app after the Meticulous recorder is ready, for example:"})}),` 104 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-method-call",children:"platformBrowserDynamic"}),"().",e.jsx("label",{className:"hl-method-call",children:"bootstrapModule"}),"(AppModule)"]}),` 105 `,e.jsxs("span",{children:[".",e.jsx("label",{className:"hl-method-call",children:"catch"}),"(err => console.",e.jsx("label",{className:"hl-method-call",children:"error"}),"(err));"]}),`
106 `,e.jsx("span",{children:"}"}),` 107 `,e.jsx("span",{}),` 108 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"function"})," ",e.jsx("label",{className:"hl-method-definition",children:"isProduction"}),"() {"]}),` 109 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-orange",children:"return"})," window.location.hostname.",e.jsx("label",{className:"hl-purple",children:"indexOf"}),'("your-production-site.com") > -1;']}),` 110 `,e.jsx("span",{children:"}"}),` 111 `,e.jsx("span",{}),` 112 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-method-call",children:"startApp"}),"();"]})]}),text:`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 113 import { AppModule } from './app/app.module'; 114 import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader' 115 async function startApp() { 116 if (!isProduction()) { 117 await tryLoadAndStartRecorder({ 118 projectId: '...', 119 isProduction: false, 120 }); 121 } 122 123 // Initalise app after the Meticulous recorder is ready, for example: 124 platformBrowserDynamic().bootstrapModule(AppModule) 125 .catch(err => console.error(err)); 126 } 127 128 function isProduction() { 129 return window.location.hostname.indexOf("your-production-site.com") > -1; 130 } 131 132 startApp();`},Nuxt:{body:e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"{"}),` 133 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-green",children:"head"}),": {"]}),` 134 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-green",children:"script"}),": ",e.jsx("label",{className:"hl-purple",children:"process.env.NODE_ENV"})," === ",e.jsx("label",{className:"hl-orange",children:'"production"'})," ? [] : ["]}),` 135 `,e.jsx("span",{children:"{"}),`
136 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"src"}),": ",e.jsx("label",{className:"hl-orange",children:"'https://snippet.meticulous.ai/v1/meticulous.js'"}),","]}),` 137 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:'["data-project-id"]'}),": '",e.jsx("label",{className:"hl-recording-token",children:"..."}),"',"]}),` 138 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:'["data-is-production-environment"]'})," false,"]}),` 139 `,e.jsx("span",{children:"}"}),` 140 `,e.jsx("span",{children:"],"}),` 141 `,e.jsx("span",{children:"}"}),` 142`,e.jsx("span",{children:"}"})]}),text:`{ 143 head: { 144 script: process.env.NODE_ENV === "production" ? [] : [ 145 { 146 src: 'https://snippet.meticulous.ai/v1/meticulous.js', 147 ["data-project-id"]: '...', 148 ["data-is-production-environment"] false, 149 } 150 ], 151 } 152}`},SvelteKit:{body:e.jsxs(e.Fragment,{children:[e.jsxs("span",{children:["<svelte",e.jsx("label",{className:"hl-green",children:":head"}),">"]}),` 153`,e.jsxs("span",{children:["{",e.jsx("label",{className:"hl-green",children:"#if "}),"!import.meta.env.PROD}"]}),` 154 `,e.jsxs("span",{children:["<",e.jsx("label",{className:"hl-green",children:"script"})]}),` 155 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"data-project-id"}),'="',e.jsx("label",{className:"hl-recording-token",children:"..."}),'"']}),` 156 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"data-is-production-environment"}),"=",e.jsx("label",{className:"hl-orange",children:'"false"'})]}),` 157 `,e.jsxs("span",{children:[e.jsx("label",{className:"hl-purple",children:"src"}),"=",e.jsx("label",{className:"hl-orange",children:'"https://snippet.meticulous.ai/v1/meticulous.js"'})]}),` 158 `,e.jsxs("span",{children:["></",e.jsx("label",{className:"hl-green",children:"script"}),">"]}),` 159 `,e.jsxs("span",{children:["{",e.jsx("label",{className:"hl-green",children:"/if"}),"}"]}),` 160`,e.jsxs("span",{children:["<svelte",e.jsx("label",{className:"hl-green",children:":head"}),">"]})]}),text:`<svelte:head> 161{#if !import.meta.env.PROD} 162 <script 163 data-project-id="..." 164 data-is-production-environment="false" 165 src="https://snippet.meticulous.ai/v1/meticulous.js" 166 ><\/script> 167 {/if} 168<svelte:head>`}},S=["NextJS","React","Vue","Angular","Nuxt","SvelteKit"],P=({children:s,copyText:i})=>{const[a,n]=j.useState(!1);return j.useEffect(()=>{if(!a)return;const o=window.setTimeout(()=>n(!1),2e3);return()=>window.clearTimeout(o)},[a]),e.jsxs("pre",{className:"codeblock",children:[e.jsx("code",{children:s}),e.jsx("button",{type:"button",className:"copycode-icon","aria-label":a?"Copied":"Copy code",onClick:()=>{navigator.clipboard.writeText(i).then(()=>n(!0)).catch(()=>{})},children:e.jsx("img",{src:"/images/copy.svg",width:19,height:21,loading:"eager",alt:"Copy"})})]})},E=({tabs:s,defaultTab:i,wrapperClassName:a,menuClassName:n,linkClassName:o,contentClassName:h,paneClassName:p,durationIn:b=300,durationOut:f=100,arrows:t})=>{const[d,m]=j.useState(i??s[0]?.name??""),g=Math.max(0,s.findIndex(l=>l.name===d)),u=l=>{const r=s[(g+l+s.length)%s.length];r!==void 0&&m(r.name)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-current":d,"data-easing":"ease","data-duration-in":b,"data-duration-out":f,className:c(a,"w-tabs"),children:[e.jsx("div",{className:c(n,"w-tab-menu"),role:"tablist",children:s.map(l=>{const r=l.name===d;return e.jsxs("a",{"data-w-tab":l.name,role:"tab","aria-selected":r,tabIndex:0,className:c(o,"w-inline-block w-tab-link",r&&"w--current"),onClick:()=>m(l.name),onKeyDown:x=>{(x.key==="Enter"||x.key===" ")&&(x.preventDefault(),m(l.name))},children:[l.icon,e.jsx("div",{children:l.name})]},l.name)})}),e.jsx("div",{className:c(h,"w-tab-content"),children:s.map(l=>{const r=l.name===d;return e.jsx("div",{"data-w-tab":l.name,role:"tabpanel",className:c(p,"w-tab-pane",r&&"w--tab-active"),children:l.content},l.name)})})]}),t===void 0?null:e.jsxs("div",{className:t.className,children:[e.jsx("a",{href:"#",className:"tab-arrow w-inline-block","aria-label":"Previous tab",onClick:l=>{l.preventDefault(),u(-1)},children:t.previousIcon}),e.jsx("a",{href:"#",className:"tab-arrow tab-arrowright w-inline-block","aria-label":"Next tab",onClick:l=>{l.preventDefault(),u(1)},children:t.nextIcon})]})]})};export{R as A,P as C,S as R,E as T,k as a};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.