P334:[{"_346":21,"_347":27,"_348":349},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),x=(n,a)=>{for(var r in a)o(n,r,{get:a[r],enumerable:!0})},c=(n,a,r,s)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let l of u(a))!y.call(n,l)&&l!==r&&o(n,l,{get:()=>a[l],enumerable:!(s=h(a,l))||s.enumerable});return n};var k=(n,a,r)=>(r=n!=null?m(f(n)):{},c(a||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),N=n=>c(o({},\"__esModule\",{value:!0}),n);var i=v((j,d)=>{d.exports=_jsx_runtime});var w={};x(w,{default:()=>p,frontmatter:()=>g});var e=k(i()),g=void 0;function b(n){let a={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:r,Icon:s,LaunchEditor:l}=a;return r||t(\"Accordion\",!0),s||t(\"Icon\",!0),l||t(\"LaunchEditor\",!0),(0,e.jsxs)(r,{title:\"index.js\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"index.js\",\"data-start\":\"8\",\"data-remove\":\"11\",\"data-add\":\"12\",\"data-line-numbers\":\"true\",\"data-lang\":\"javascript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"app\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Hono\"}),\"({ strict: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" })\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"app\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} get the count from the database with db.getCount()\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"db\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getCount\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"12\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"html\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"`\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"13\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:'\t\t'}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\",line:8,children:(0,e.jsx)(\"span\",{title:\"01.early-web/01.problem.mpa/index.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\",line:8,children:(0,e.jsx)(\"span\",{title:\"01.early-web/01.solution.mpa/index.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"index.js\",\"data-start\":\"18\",\"data-remove\":\"21,22,23,35,36,37,38,39\",\"data-add\":\"24,25,26,27,28,40,41,42,43,44,45\",\"data-line-numbers\":\"true\",\"data-lang\":\"javascript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"18\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">MPA Counter\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"19\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:['\t\t\t',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">Count: $\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"action\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/update-count\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"POST\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"submit\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"change\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"-1\"}),'\"',\">Decrement\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"submit\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"change\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"1\"}),'\"',\">Increment\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"26\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-diff-line-number\":\"27\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-diff-line-number\":\"28\",children:[\"\t\",\"`\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-diff-line-number\":\"29\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\treturn c.html(html)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"30\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"})\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-diff-line-number\":\"31\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"// \\u{1F428} add a POST route for /update-count\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-remove\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"// \\u{1F428} get the form data from the request\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-remove\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"// \\u{1F428} get the change value from the form data (and convert it to a number)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-remove\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"// \\u{1F428} change the count with db.changeCount(change)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-remove\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"// \\u{1F428} redirect to '/' (POST -> REDIRECT -> GET)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"app.post('/update-count', async (c) => {\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\tconst formData = await c.req.formData()\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\tconst change = Number(formData.get('change'))\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\tawait db.changeCount(change)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\treturn c.redirect('/')\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"})\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-diff-line-number\":\"38\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-diff-line-number\":\"39\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"const server = serve({ fetch: app.fetch, port: PORT }, (info) => {\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-diff-line-number\":\"40\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\tconsole.log(\"}),\"`\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Server\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"is\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"running\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"on\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"http\"}),\":\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//localhost:${info.port}`)\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\",line:18,children:(0,e.jsx)(\"span\",{title:\"01.early-web/01.problem.mpa/index.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/01.problem.mpa/index.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.early-web/01.solution.mpa/index.js\",line:18,children:(0,e.jsx)(\"span\",{title:\"01.early-web/01.solution.mpa/index.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]})}function p(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(b,{...n})}):b(n)}function t(n,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(w);})();\n;return Component;"]