P382:[{"_396":35,"_397":39,"_398":399},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),k=(l,a)=>{for(var s in a)t(l,s,{get:a[s],enumerable:!0})},d=(l,a,s,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let n of u(a))!v.call(l,n)&&n!==s&&t(l,n,{get:()=>a[n],enumerable:!(r=h(a,n))||r.enumerable});return l};var N=(l,a,s)=>(s=l!=null?m(y(l)):{},d(a||!l||!l.__esModule?t(s,\"default\",{value:l,enumerable:!0}):s,l)),x=l=>d(t({},\"__esModule\",{value:!0}),l);var i=f((D,c)=>{c.exports=_jsx_runtime});var w={};k(w,{default:()=>p,frontmatter:()=>g});var e=N(i()),g=void 0;function b(l){let a={code:\"code\",pre:\"pre\",span:\"span\",...l.components},{Accordion:s,Icon:r,LaunchEditor:n}=a;return s||o(\"Accordion\",!0),r||o(\"Icon\",!0),n||o(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(s,{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-add\":\"11,12\",\"data-line-numbers\":\"true\",\"data-lang\":\"javascript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",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\":\"10\",\"data-diff-line-number\":\"10\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} remove this in favor of a /count API endpoint that returns the count as JSON\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} most of this HTML was moved to the public/index.html file\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"13\",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\":\"14\",\"data-diff-line-number\":\"14\",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\":\"15\",\"data-diff-line-number\":\"15\",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)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",line:8,children:(0,e.jsx)(\"span\",{title:\"01.early-web/02.solution.pempa/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)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",line:8,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/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\":\"21\",\"data-remove\":\"24,25,26,27\",\"data-add\":\"28,29\",\"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\":\"21\",\"data-diff-line-number\":\"21\",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\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"count\"}),'\"',\">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\":\"23\",\"data-diff-line-number\":\"23\",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:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"counter-form\"}),'\"',\" \",(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\"}),'\"',\" \",(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\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"counter-buttons\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\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\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\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\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"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\"}),'\"',\">Decrement\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"25\",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\":\"30\",\"data-diff-line-number\":\"26\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-diff-line-number\":\"27\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/ui/index.js\"}),'\"',\" \",(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:\"module\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-diff-line-number\":\"28\",children:[\"\t\t\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",line:21,children:(0,e.jsx)(\"span\",{title:\"01.early-web/02.solution.pempa/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)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",line:23,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/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\":\"34\",\"data-add\":\"37,42\",\"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\":\"34\",\"data-diff-line-number\":\"34\",children:[\"})\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-diff-line-number\":\"35\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-diff-line-number\":\"36\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"app\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"post\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/update-count\"}),\"'\",\", \",(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\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} change this to use JSON body parsing\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-diff-line-number\":\"38\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\" \",(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:\"c\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"req\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"formData\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-diff-line-number\":\"39\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"change\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Number\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"change\"}),\"'\",\"))\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-diff-line-number\":\"40\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"updatedCount\"}),\" \",(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:\"changeCount\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"change\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-diff-line-number\":\"41\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} this is now a JSON-only API so you can remove the progressive enhancement \\u{1F631}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-diff-line-number\":\"43\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"req\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"header\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Accept\"}),\"'\",\")?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"includes\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text/html\"}),\"'\",\")) {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"redirect\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-diff-line-number\":\"45\",children:[\"\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",line:34,children:(0,e.jsx)(\"span\",{title:\"01.early-web/02.solution.pempa/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)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",line:34,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/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\":\"53\",\"data-add\":\"56,57,58,59,60,61,62,63,64,65,66,67,68,69\",\"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\":\"53\",\"data-diff-line-number\":\"53\",children:[\"\t}),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-diff-line-number\":\"54\",children:[\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-diff-line-number\":\"55\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"56\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we need to serve the public/index.html file for all requests\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-add\":!0,\"data-diff-line-number\":\"57\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// app.use(\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-add\":!0,\"data-diff-line-number\":\"58\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \t'/*',\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-add\":!0,\"data-diff-line-number\":\"59\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \tserveStatic({\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \t\troot: './public',\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \t\tindex: 'index.html',\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \t}),\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-add\":!0,\"data-diff-line-number\":\"63\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// )\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"64\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"65\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// app.get('*', async (c) => {\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"66\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \tconst html = await fs.readFile('./public/index.html', 'utf8')\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"67\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \treturn c.html(html, 200)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-add\":!0,\"data-diff-line-number\":\"68\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// })\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-add\":!0,\"data-diff-line-number\":\"69\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"70\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"serve\"}),\"({ fetch: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"app\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetch\"}),\", port: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"PORT\"}),\" }, (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"info\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"71\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",\"`\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Server is running on http://localhost:\"}),\"${\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"info\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"port\"}),\"}`\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-diff-line-number\":\"72\",children:[\"})\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",line:53,children:(0,e.jsx)(\"span\",{title:\"01.early-web/02.solution.pempa/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)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/index.js\",line:55,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/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\"})})]})]})]}),`\n`,(0,e.jsx)(s,{title:\"public/index.html\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"public/index.html\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20\",\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[\"\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"html\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"lang\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"en\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"charset\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"UTF-8\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"name\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"viewport\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"content\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"width=device-width, initial-scale=1.0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">SPA Counter\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"importmap\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:['\t\t\t\t\"imports\": {',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:['\t\t\t\t\t\"react\": \"https://esm.sh/react@19.0.0-beta-94eed63c49-20240425?pin=v126&dev\",',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:['\t\t\t\t\t\"react-dom\": \"https://esm.sh/react-dom@19.0.0-beta-94eed63c49-20240425?pin=v126&dev\",',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:['\t\t\t\t\t\"react-dom/client\": \"https://esm.sh/react-dom@19.0.0-beta-94eed63c49-20240425/client?pin=v126&dev\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"module\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"src\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/ui/index.js\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/public/index.html\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/public/index.html\"},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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/public/index.html\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/public/index.html\"},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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/public/index.html\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/public/index.html\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(s,{title:\"ui/counter.js\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"ui/counter.js\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40\",\"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\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"createElement\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useReducer\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useEffect\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"countReducer\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"action\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} handle action types for \"FETCH_START\"/\"UPDATE_START\", \"FETCH_SUCCESS\"/\"UPDATE_SUCCESS\", and \"FETCH_ERROR\"/\"UPDATE_ERROR\"'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F989} don't forget to throw an error on an incorrect action type!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"dispatch\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useReducer\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"countReducer\"}),\", {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\tcount: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\tloading: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\terror: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t})\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} use useEffect to fetch the count on component mount\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} create and call an async fetchCount function to fetch the count from the server\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F989} just ignore all the issues with race conditions etc. \\u{1F644}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t}, [])\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} create an updateCount function that accepts a change to update the count on the server\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F989} make certain to send the change as a JSON body with a content-type of application/json\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} the JSON response includes the new count, which we should update the state with\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} if the state is loading and the count is null, return a loading message\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} if the state has an error, return an error message\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"div\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"h1\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\", \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Count: \"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\"),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F989} notice we've deleted the form \\u{1F62D}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"div\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t{ style: { opacity: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loading\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0.6\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\" } },\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\", { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),\": () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"updateCount\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"-\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\") }, \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Decrement\"}),\"'\",\"),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\", { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),\": () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"updateCount\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\") }, \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Increment\"}),\"'\",\"),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/ui/counter.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/counter.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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/counter.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/ui/counter.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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/counter.js\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/ui/counter.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(s,{title:\"ui/index.js\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"ui/index.js\",\"data-start\":\"1\",\"data-remove\":\"1,2,3,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34\",\"data-add\":\"4,5,6,35,36\",\"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\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"addEventListener\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"DOMContentLoaded\"}),\"'\",\", () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"counter-form\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"counterButtons\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"counter-buttons\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"createElement\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"createRoot\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/client\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Counter\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./counter.js\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"addEventListener\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"submit\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"preventDefault\"}),\"()\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\" \",(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:\"FormData\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"submitter\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"append\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"submitter\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"submitter\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"counterButtons\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"opacity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"0.6\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"try\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\" \",(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(--base0D)\"},children:\"fetch\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"action\"}),\", {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\tmethod: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"method\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\tbody: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ok\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\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:\"response\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"json\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"count\"}),\"'\",\").\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"innerText\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"`\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Count: \"}),\"${\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\"}`\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"error\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Failed to update the count\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"finally\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"counterButtons\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"opacity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"1\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),\"'\",\"))\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"h\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Counter\"}),\"))\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/ui/index.js\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.early-web/02.solution.pempa/ui/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)(n,{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/ui/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/index.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.early-web/02.solution.pempa/ui/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/02.early-react/01.problem.spa/ui/index.js\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.early-react/01.problem.spa/ui/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(l={}){let{wrapper:a}=l.components||{};return a?(0,e.jsx)(a,{...l,children:(0,e.jsx)(b,{...l})}):b(l)}function o(l,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(w);})();\n;return Component;"]