presentation.html

<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJtMzIgOTAgNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNNDAgNzBIMjBWNTBtMjAgMEwyMCA3MG00MC00MGgyMHYyMG0tMjAgMCAyMC0yMCIgY2xhc3M9ImEiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNMjAgNTBoMjB2MjBtLTIwIDAgMjAtMjBtNDAgMEg2MFYzMG0yMCAwTDYwIDUwIiBjbGFzcz0iYSIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNODcuOCA0Ny41Qzg5IDUwIDg3LjcgNTIgODUgNTJIMzVhOC43IDguNyAwIDAgMS03LjItNC41bC0xNS42LTMxQzExIDE0IDEyLjIgMTIgMTUgMTJoNTBhOC44IDguOCAwIDAgMSA3LjIgNC41ek02MCA1MnYzNm0tMTAgMGgyME00NSA0MmgyMCIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-bigger{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODBNNTIgOTBWMTAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-smaller{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}@keyframes __bespoke_marp_transition_reduced_outgoing__{0%{opacity:1}to{opacity:0}}@keyframes __bespoke_marp_transition_reduced_incoming__{0%{mix-blend-mode:plus-lighter;opacity:0}to{mix-blend-mode:plus-lighter;opacity:1}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{::view-transition-group(*){animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-timing-function:ease}::view-transition-new(*),::view-transition-old(*){animation-delay:0s;animation-direction:var(--marp-bespoke-transition-animation-direction,normal);animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-fill-mode:both;animation-name:var(--marp-bespoke-transition-animation-name,var(--marp-bespoke-transition-animation-name-fallback,__bespoke_marp_transition_no_animation__));mix-blend-mode:normal}::view-transition-old(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_outgoing__;animation-timing-function:ease}::view-transition-new(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_incoming__;animation-timing-function:ease}::view-transition-new(root),::view-transition-old(root){animation-timing-function:linear}::view-transition-new(__bespoke_marp_transition_osc__),::view-transition-old(__bespoke_marp_transition_osc__){animation-duration:0s!important;animation-name:__bespoke_marp_transition_osc__!important}::view-transition-new(__bespoke_marp_transition_osc__){opacity:0!important}.bespoke-marp-transition-warming-up::view-transition-group(*),.bespoke-marp-transition-warming-up::view-transition-new(*),.bespoke-marp-transition-warming-up::view-transition-old(*){animation-play-state:paused!important}body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{content-visibility:hidden;opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide:not(.bespoke-marp-active) *{view-transition-name:none!important}svg.bespoke-marp-slide.bespoke-marp-active{content-visibility:visible;opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide.bespoke-marp-active.bespoke-marp-active-ready *{animation-name:__bespoke_marp__!important}@supports not (content-visibility:hidden){svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}}}@media screen and (prefers-reduced-motion:reduce){svg.bespoke-marp-slide *{view-transition-name:none!important}}@media screen{[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{inset:0;position:absolute}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{view-transition-name:__bespoke_marp_transition_osc__;background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;contain:paint;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;user-select:none;white-space:nowrap;will-change:transform;z-index:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{background:#0288d1;flex:0 0 0;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{display:grid;font-family:Helvetica,Arial,sans-serif;grid-template:"current dragbar next" minmax(140px,1fr) "current dragbar note" 2fr "info    dragbar note" 3em;grid-template-columns:minmax(3px,var(--bespoke-marp-presenter-split-ratio,66%)) 0 minmax(3px,1fr);height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container{background:#0288d1;cursor:col-resize;grid-area:dragbar;margin-left:-3px;opacity:0;position:relative;transition:opacity .4s linear .1s;width:6px;z-index:10}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container:hover{opacity:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container.active{opacity:1;transition-delay:0s}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#eee;grid-area:note;position:relative;z-index:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper{display:block;inset:0;position:absolute}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons{background:rgba(0,0,0,.65);border-radius:4px;bottom:0;display:flex;gap:4px;margin:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;right:0;transition:opacity .2s linear}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons:focus-within,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper:focus-within+.bespoke-marp-presenter-note-buttons,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container:hover .bespoke-marp-presenter-note-buttons{opacity:1;pointer-events:auto}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{word-wrap:break-word;box-sizing:border-box;font-size:calc(1.1em*var(--bespoke-marp-note-font-scale, 1));height:calc(100% - 40px);margin:20px;overflow:auto;padding-right:3px;scrollbar-color:hsla(0,0%,93%,.5) transparent;scrollbar-width:thin;white-space:pre-wrap;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,93%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#eee;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;overflow:hidden;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{box-sizing:border-box;display:block;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer:hover{cursor:pointer}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>div#\:\$p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#\:\$p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#\:\$p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:2em;margin:0.67em 0}div#\:\$p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#\:\$p>svg>foreignObject>section{page-break-before:always;break-before:page}div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;animation-delay:0s!important;animation-duration:0s!important;color-adjust:exact!important;transition:none!important}div#\:\$p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}
/*!
 * Marp / Marpit Uncover theme
 *
 * @theme uncover
 * @author Yuki Hattori
 *
 * @auto-scaling true
 * @size 16:9 1280px 720px
 * @size 4:3 960px 720px
 */div#\:\$p>svg>foreignObject>section{word-wrap:break-word;--color-background:#fdfcff;--color-background-code:#f2f1f4;--color-background-paginate:rgba(32,34,40,.05);--color-foreground:#202228;--color-highlight:#009dd5;--color-highlight-hover:#087eaa;--color-highlight-heading:#33b1dd;--color-header:rgba(32,34,40,.4);--color-header-shadow:rgba(253,252,255,.8);background:var(--color-background);flex-flow:column nowrap;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:40px;height:720px;justify-content:center;letter-spacing:3px;line-height:1.4;padding:30px 70px;position:relative;text-align:center;width:1280px;z-index:0}div#\:\$p>svg>foreignObject>section{--marpit-root-font-size:40px}div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section:after{color:var(--color-foreground);display:flex}div#\:\$p>svg>foreignObject>section:after{align-items:flex-end;background:linear-gradient(-45deg,var(--color-background-paginate) 50%,transparent 50%);background-size:cover;font-size:.6em;height:80px;justify-content:flex-end;padding:30px;text-align:right;text-shadow:0 0 5px var(--color-background);width:80px}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:.6em}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs{background:#fff;color:#000}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-addition,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-meta,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-string,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-symbol,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-template-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-template-variable{color:#756bb1}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-comment,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-quote{color:#636363}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-bullet,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-link,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-literal,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-number,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-regexp{color:#31a354}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-deletion,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-variable{color:#88f}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-built_in,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-doctag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-keyword,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-name,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-section,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-class,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-id,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-strong,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-title,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-type{color:#3182bd}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-attribute{color:#e6550d}div#\:\$p>svg>foreignObject>section:where(.invert){--color-background:#202228;--color-background-code:#2b2d33;--color-background-paginate:hsla(0,0%,100%,.05);--color-foreground:#fff;--color-highlight:#60d0f0;--color-highlight-hover:#88dcf4;--color-highlight-heading:#80d9f3;--color-header:hsla(0,0%,100%,.4);--color-header-shadow:rgba(32,34,40,.8)}div#\:\$p>svg>foreignObject>section:where(.invert) :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section:where(.invert) code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs{background:#222;color:#fff}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-comment,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-quote{color:#777}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-built_in,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-bullet,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-deletion,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-link,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-literal,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-meta,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-number,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-params,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-regexp,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-symbol,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-tag,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-template-variable,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-variable{color:#ab875d}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-attribute,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-name,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-section,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-class,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-id,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-title,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-type{color:#9b869b}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-addition,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-keyword,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-tag,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-string{color:#8f9c6c}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-strong{font-weight:700}div#\:\$p>svg>foreignObject>section>:first-child,div#\:\$p>svg>foreignObject>section[data-header]>:nth-child(2){margin-top:0}div#\:\$p>svg>foreignObject>section>:last-child,div#\:\$p>svg>foreignObject>section[data-footer]>:nth-last-child(2){margin-bottom:0}div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section p{margin:0 0 15px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){margin:15px 0 30px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{color:var(--color-highlight-heading);font-weight:inherit}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6)::part(auto-scaling){max-height:660px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:2em}div#\:\$p>svg>foreignObject>section :is(h2,marp-h2){font-size:1.7em}div#\:\$p>svg>foreignObject>section :is(h3,marp-h3){font-size:1.4em;letter-spacing:2px}div#\:\$p>svg>foreignObject>section :is(h4,marp-h4){font-size:1.2em;letter-spacing:2px}div#\:\$p>svg>foreignObject>section :is(h5,marp-h5){font-size:1em;letter-spacing:1px}div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){font-size:.8em;letter-spacing:1px}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header{color:var(--color-header);font-size:.45em;left:70px;letter-spacing:1px;position:absolute;right:70px;text-shadow:0 1px 0 var(--color-header-shadow);z-index:1}div#\:\$p>svg>foreignObject>section header{top:30px}div#\:\$p>svg>foreignObject>section footer{bottom:30px}div#\:\$p>svg>foreignObject>section a{color:var(--color-highlight);text-decoration:none}div#\:\$p>svg>foreignObject>section a:hover{color:var(--color-highlight-hover);text-decoration:underline}div#\:\$p>svg>foreignObject>section ol,div#\:\$p>svg>foreignObject>section ul{margin:0 auto;text-align:left}div#\:\$p>svg>foreignObject>section>ol,div#\:\$p>svg>foreignObject>section>ul{margin-bottom:15px}div#\:\$p>svg>foreignObject>section code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;letter-spacing:0}div#\:\$p>svg>foreignObject>section :not(:is(pre,marp-pre))>code,div#\:\$p>svg>foreignObject>section>code{background:var(--color-background-code);color:var(--color-foreground);margin:-.2em .2em .2em;padding:.2em}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){--preserve-aspect-ratio:xMidYMid meet;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));font-size:70%;line-height:1.15;margin:15px 0 30px;text-align:left}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)::part(auto-scaling){max-height:570px}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)>code{background:var(--color-background-code);box-sizing:content-box;color:var(--color-foreground);display:block;margin:0 auto;min-width:456px;padding:.4em .6em}div#\:\$p>svg>foreignObject>section[data-size="4:3"] :is(pre,marp-pre)>code{min-width:328px}div#\:\$p>svg>foreignObject>section table{border-collapse:collapse;margin:0 auto 15px}div#\:\$p>svg>foreignObject>section table>tbody>tr>td,div#\:\$p>svg>foreignObject>section table>tbody>tr>th,div#\:\$p>svg>foreignObject>section table>thead>tr>td,div#\:\$p>svg>foreignObject>section table>thead>tr>th{padding:.15em .5em}div#\:\$p>svg>foreignObject>section table>thead>tr>td,div#\:\$p>svg>foreignObject>section table>thead>tr>th{border-bottom:3px solid}div#\:\$p>svg>foreignObject>section table>tbody>tr:not(:last-child)>td,div#\:\$p>svg>foreignObject>section table>tbody>tr:not(:last-child)>th{border-bottom:1px solid}div#\:\$p>svg>foreignObject>section blockquote{font-size:90%;line-height:1.3;padding:0 2em;position:relative;z-index:0}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNDQgMTkuMyAzOC45NCAwQzguMTQgOS41OSAwIDQwLjA1IDAgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3ptNTYgMEw5NC45NCAwQzY0LjE0IDkuNTkgNTYgNDAuMDUgNTYgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3oiIHN0eWxlPSJmaWxsOiM4ODg7b3BhY2l0eTouMzMiLz48L3N2Zz4=");height:auto;pointer-events:none;position:absolute;width:1em;z-index:-1}div#\:\$p>svg>foreignObject>section blockquote:before{left:0;top:0}div#\:\$p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#\:\$p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#\:\$p>svg>foreignObject>section mark{background:transparent;color:var(--color-highlight)}div#\:\$p>svg>foreignObject>:where(section){container-type:size}div#\:\$p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}

/* @theme zkat */div#\:\$p>svg>foreignObject>section .highlighted-line{background-color:darkslategray;margin:0 -16px;padding:0 16px;div#\:\$p>svg>foreignObject>section &:after{content:"\A";white-space:pre}}

/* @theme 95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="1" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h1 id="oxidising-your-typescript-projects-%F0%9F%A6%80"><strong>Oxidising Your TypeScript Projects <img class="emoji" draggable="false" alt="🦀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f980.svg" data-marp-twemoji=""/></strong></h1>
<h3 id="using-wasm-and-rust-for-fun-and-profit">Using WASM and Rust for fun and profit</h3>
<p><em>Kat Marchán</em></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="2" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h2 id="whoami"><code>whoami</code></h2>
<ul>
<li data-marpit-fragment="1">former NPM CLI architect (JavaScript)</li>
<li data-marpit-fragment="2">former member of NuGet team (C#)</li>
<li data-marpit-fragment="3">TypeScript Developer Tools team at Microsoft (TS)</li>
<li data-marpit-fragment="4">Open Source maintainer (Rust)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="5" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="3" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h2 id="whats-all-this-about"><strong>What's all this about?</strong></h2>
<ul>
<li data-marpit-fragment="1">Exploration of real-world problem</li>
<li data-marpit-fragment="2">What's wasm?</li>
<li data-marpit-fragment="3">Talk about what wasm can and can't do: pros and cons</li>
<li data-marpit-fragment="4">A look at actual code</li>
<li data-marpit-fragment="5">Demo videos</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="4" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h2 id="the-problem"><strong>The Problem</strong></h2>
<h4 id="no-type-acquisition-in-vscodedev">No Type Acquisition in vscode.dev</h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="5" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="without-type-acquisition"><strong>Without Type Acquisition</strong></h4>
<p><video controls width="800" src="img/stargazer-no-ata.mp4"></video></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="6" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="why-this-is-hard"><strong>Why this is hard</strong></h3>
<ul>
<li data-marpit-fragment="1">Type Acquisition on desktop uses <code>node_modules</code> and NPM</li>
<li data-marpit-fragment="2">No NPM on web!</li>
<li data-marpit-fragment="3">Getting the right types packages requires PM logic</li>
<li data-marpit-fragment="4">Running NPM on hosted VMs = expensive!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="7" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="why-this-is-hard-1"><strong>Why this is hard</strong></h3>
<ul>
<li data-marpit-fragment="1">No existing, maintained package manager in JavaScript for web</li>
<li data-marpit-fragment="2">Missing supporting libraries to build one (<code>tar</code> is node-only!)</li>
<li data-marpit-fragment="3">Performance is important</li>
<li data-marpit-fragment="4">Want to (eventually) work with private registries</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="8" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="solution-wasm-to-the-rescue"><strong>Solution: WASM to the Rescue!</strong></h3>
<ul>
<li data-marpit-fragment="1">PM right on the edge: on the browser itself!</li>
<li data-marpit-fragment="2">Use &quot;systems&quot; language with existing supporting libraries/tooling (Rust)</li>
<li data-marpit-fragment="3">Use existing package manager and bundle it up in WASM (Orogene)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="9" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;img/crabrave.gif&quot;);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="9" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="9" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="content">
<h2 id="%F0%9F%A6%80-rewrite-it-in-rust-%F0%9F%A6%80"><img class="emoji" draggable="false" alt="🦀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f980.svg" data-marp-twemoji=""/> <code>Rewrite it in Rust</code> <img class="emoji" draggable="false" alt="🦀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@14.1.2/assets/svg/1f980.svg" data-marp-twemoji=""/></h2>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="9" style="" data-marpit-pagination-total="77" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-marpit-fragments="5" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="10" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="whats-wasm"><strong>What's WASM?</strong></h3>
<ul>
<li data-marpit-fragment="1">WebAssembly</li>
<li data-marpit-fragment="2">Native VM for the web</li>
<li data-marpit-fragment="3">All browsers, major JS runtimes, even dedicated runtimes</li>
<li data-marpit-fragment="4">Compile-once-run-everywhere</li>
<li data-marpit-fragment="5">Secure enough for the web</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="11" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wasm-pros"><strong>WASM Pros</strong></h3>
<ul>
<li data-marpit-fragment="1">Use existing native libraries</li>
<li data-marpit-fragment="2">High perf profile</li>
<li data-marpit-fragment="3">No need for hosted VM</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="12" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wasm-cons"><strong>WASM Cons</strong></h3>
<ul>
<li data-marpit-fragment="1">Not JavaScript/TypeScript</li>
<li data-marpit-fragment="2">Large-ish binary blob (~2mb)</li>
<li data-marpit-fragment="3">BYOGC on the JS API level (Bring your own garbage collection)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-fragments="5" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="13" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="what-we-did"><strong>What we did</strong></h3>
<ul>
<li data-marpit-fragment="1">Bundle Orogene's resolver into a wasm module (<code>node-maintainer</code>) using <code>wasm-bindgen</code></li>
<li data-marpit-fragment="2">Use <code>tsify</code> to extract TypeScript types</li>
<li data-marpit-fragment="3">Publish compiled wasm packages to NPM with <code>wasm-pack</code></li>
<li data-marpit-fragment="4">Wrap everything up in a TypeScript tool</li>
<li data-marpit-fragment="5">Shove it all in VS Code!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="14" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wasm-bindgen"><code>wasm-bindgen</code></h3>
<h5 id="where-the-magic-starts">Where the magic starts</h5>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="15" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="wasm-bindgen-hello-world"><strong><code>wasm-bindgen</code> hello world</strong></h4>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-keyword">use</span> wasm_bindgen::prelude::*;

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">extern</span> <span class="hljs-string">&quot;C&quot;</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">alert</span>(s: &amp;<span class="hljs-type">str</span>);
}

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">greet</span>(name: &amp;<span class="hljs-type">str</span>) {
    <span class="hljs-title function_ invoke__">alert</span>(&amp;<span class="hljs-built_in">format!</span>(<span class="hljs-string">&quot;Hello, {}!&quot;</span>, name));
}
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="16" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="wasm-bindgen-import-from-js"><strong><code>wasm-bindgen</code> import from JS</strong></h4>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">use</span> wasm_bindgen::prelude::*;

<span class="highlighted-line"><span class="hljs-meta">#[wasm_bindgen]</span></span><span class="highlighted-line"><span class="hljs-keyword">extern</span> <span class="hljs-string">&quot;C&quot;</span> {</span><span class="highlighted-line">    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">alert</span>(s: &amp;<span class="hljs-type">str</span>);</span><span class="highlighted-line">}</span>
<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">greet</span>(name: &amp;<span class="hljs-type">str</span>) {
    <span class="hljs-title function_ invoke__">alert</span>(&amp;<span class="hljs-built_in">format!</span>(<span class="hljs-string">&quot;Hello, {}!&quot;</span>, name));
}</code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="17" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="wasm-bindgen-export-to-js"><strong><code>wasm-bindgen</code> export to JS</strong></h4>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">use</span> wasm_bindgen::prelude::*;

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">extern</span> <span class="hljs-string">&quot;C&quot;</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">alert</span>(s: &amp;<span class="hljs-type">str</span>);
}

<span class="highlighted-line"><span class="hljs-meta">#[wasm_bindgen]</span></span><span class="highlighted-line"><span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">greet</span>(name: &amp;<span class="hljs-type">str</span>) {</span><span class="highlighted-line">    <span class="hljs-title function_ invoke__">alert</span>(&amp;<span class="hljs-built_in">format!</span>(<span class="hljs-string">&quot;Hello, {}!&quot;</span>, name));</span><span class="highlighted-line">}</span></code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="18" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="wasm-bindgen-import-wasm-module"><code>wasm-bindgen</code> import wasm module</h4>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-js"><span class="hljs-keyword">import</span> { greet } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./pkg&quot;</span>;

<span class="hljs-comment">// Calls `window.alert(&quot;World&quot;)`</span>
<span class="hljs-title function_">greet</span>(<span class="hljs-string">&quot;World&quot;</span>);
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="19" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="tsify-for-dts-generation"><strong><code>tsify</code> for .d.ts generation</strong></h4>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">use</span> serde::{Deserialize, Serialize};
<span class="hljs-keyword">use</span> tsify::Tsify;
<span class="hljs-keyword">use</span> wasm_bindgen::prelude::*;

<span class="highlighted-line"><span class="hljs-meta">#[derive(Tsify, Serialize, Deserialize)]</span></span><span class="highlighted-line"><span class="hljs-meta">#[tsify(into_wasm_abi, from_wasm_abi)]</span></span><span class="hljs-keyword">pub</span> <span class="hljs-keyword">struct</span> <span class="hljs-title class_">Point</span> {
    x: <span class="hljs-type">i32</span>,
    y: <span class="hljs-type">i32</span>,
}

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">into_js</span>() <span class="hljs-punctuation">-&gt;</span> Point {
    Point { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span> }
}

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">from_js</span>(point: Point) {}</code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="20" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="tsify-for-dts-generation-1"><strong><code>tsify</code> for .d.ts generation</strong></h4>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">use</span> serde::{Deserialize, Serialize};
<span class="hljs-keyword">use</span> tsify::Tsify;
<span class="hljs-keyword">use</span> wasm_bindgen::prelude::*;

<span class="hljs-meta">#[derive(Tsify, Serialize, Deserialize)]</span>
<span class="hljs-meta">#[tsify(into_wasm_abi, from_wasm_abi)]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">struct</span> <span class="hljs-title class_">Point</span> {
    x: <span class="hljs-type">i32</span>,
    y: <span class="hljs-type">i32</span>,
}

<span class="highlighted-line"><span class="hljs-meta">#[wasm_bindgen]</span></span><span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">into_js</span>() <span class="hljs-punctuation">-&gt;</span> Point {
    Point { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span> }
}

<span class="highlighted-line"><span class="hljs-meta">#[wasm_bindgen]</span></span><span class="hljs-keyword">pub</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">from_js</span>(point: Point) {}</code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="21" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="generated-dts-file"><strong>Generated <code>.d.ts</code> file</strong></h4>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-comment">/**
 * <span class="hljs-doctag">@returns</span> {<span class="hljs-type">Point</span>}
 */</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">into_js</span>(<span class="hljs-params"></span>): <span class="hljs-title class_">Point</span>;
<span class="hljs-comment">/**
 * <span class="hljs-doctag">@param</span> {<span class="hljs-type">Point</span>} <span class="hljs-variable">point</span>
 */</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">from_js</span>(<span class="hljs-params">point: Point</span>): <span class="hljs-built_in">void</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">Point</span> {
  <span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>;
  <span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span>;
}
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="22" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wasm-pack"><strong><code>wasm-pack</code></strong></h3>
<h4 id="the-final-piece-of-the-puzzle">The final piece of the puzzle</h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="23" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;img/wasm-pack-demo.gif&quot;);background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="23" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="23" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="23" style="" data-marpit-pagination-total="77" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="24" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wasm-pack-1"><strong><code>wasm-pack</code></strong></h3>
<h4 id="single-command-wasm--npm--publishing">Single-command wasm + NPM + publishing.</h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="25" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="we-can-build-it"><strong>We can build it</strong></h3>
<h5 id="we-have-the-technology">We have the technology</h5>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="26" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="first-step"><strong>First Step</strong></h3>
<ul>
<li data-marpit-fragment="1">Conditionally import it.</li>
<li data-marpit-fragment="2">Put a <code>wasm.rs</code> module in your Rust project.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="27" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;img/wasm.rs.png&quot;);background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="27" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="27" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="27" style="" data-marpit-pagination-total="77" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="28" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="second-step"><strong>Second Step</strong></h3>
<p>Import/export it only in wasm target</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-comment">// lib.rs</span>
<span class="hljs-meta">#[cfg(not(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>))]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> maintainer::*;
<span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> wasm::*;

<span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span>
<span class="hljs-keyword">mod</span> wasm;
<span class="hljs-keyword">mod</span> error;
<span class="hljs-keyword">mod</span> graph;
<span class="hljs-comment">// ...snip...</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="29" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="second-step-1"><strong>Second Step</strong></h3>
<p>Import/export it only in wasm target</p>
<pre class="language-rust"><code class="language-rust"><span class="hljs-comment">// lib.rs</span>
<span class="highlighted-line"><span class="hljs-meta">#[cfg(not(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>))]</span></span><span class="highlighted-line"><span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> maintainer::*;</span><span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> wasm::*;

<span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span>
<span class="hljs-keyword">mod</span> wasm;
<span class="hljs-keyword">mod</span> error;
<span class="hljs-keyword">mod</span> graph;
<span class="hljs-comment">// ...snip...</span></code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="30" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="second-step-2"><strong>Second Step</strong></h3>
<p>Import/export it only in wasm target</p>
<pre class="language-rust"><code class="language-rust"><span class="hljs-comment">// lib.rs</span>
<span class="hljs-meta">#[cfg(not(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>))]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> maintainer::*;
<span class="highlighted-line"><span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span></span><span class="highlighted-line"><span class="hljs-keyword">pub</span> <span class="hljs-keyword">use</span> wasm::*;</span>
<span class="highlighted-line"><span class="hljs-meta">#[cfg(target_arch = <span class="hljs-string">&quot;wasm32&quot;</span>)]</span></span><span class="highlighted-line"><span class="hljs-keyword">mod</span> wasm;</span><span class="hljs-keyword">mod</span> error;
<span class="hljs-keyword">mod</span> graph;
<span class="hljs-comment">// ...snip...</span></code></pre></section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="31" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;img/draw-an-owl.jpg&quot;);background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="31" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="31" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="31" style="" data-marpit-pagination-total="77" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="32" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[derive(Tsify)]</span>
<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">struct</span> <span class="hljs-title class_">NodeMaintainer</span> {
<span class="highlighted-line">    <span class="hljs-meta">#[wasm_bindgen(skip)]</span></span><span class="highlighted-line">    <span class="hljs-keyword">pub</span> inner: crate::maintainer::NodeMaintainer,</span>}

<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">new</span>(inner: crate::maintainer::NodeMaintainer) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-keyword">Self</span> {
        <span class="hljs-keyword">Self</span> { inner }
    }
}</code></pre><ul>
<li>Baseline: Create a foreign type for TypeScript and a private constructor that holds the &quot;internal&quot; version of the type. <strong>Skip the internal field.</strong></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="33" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-meta">#[wasm_bindgen(js_name = <span class="hljs-string">&quot;resolveManifest&quot;</span>)]</span>
<span class="highlighted-line">    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">resolve_manifest</span>(</span>        manifest: PackageJson,
        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,
<span class="highlighted-line">    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;NodeMaintainer&gt; {</span>        console_error_panic_hook::<span class="hljs-title function_ invoke__">set_once</span>();
        <span class="hljs-keyword">let</span> <span class="hljs-variable">manifest</span> = serde_wasm_bindgen::<span class="hljs-title function_ invoke__">from_value</span>(manifest.<span class="hljs-title function_ invoke__">into</span>())?;
        <span class="hljs-keyword">let</span> <span class="hljs-variable">opts_builder</span> = <span class="hljs-keyword">Self</span>::<span class="hljs-title function_ invoke__">opts_from_js_value</span>(opts)?;
        opts_builder
            .<span class="hljs-title function_ invoke__">resolve_manifest</span>(manifest)
            .<span class="hljs-keyword">await</span>
            .<span class="hljs-title function_ invoke__">map</span>(NodeMaintainer::new)
    }
}</code></pre><ul>
<li>Export a static method that will return a <code>NodeMaintainer</code> object to JS.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="34" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-meta">#[wasm_bindgen(js_name = <span class="hljs-string">&quot;resolveManifest&quot;</span>)]</span>
    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">resolve_manifest</span>(
<span class="highlighted-line">        manifest: PackageJson,</span><span class="highlighted-line">        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,</span>    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;NodeMaintainer&gt; {
        console_error_panic_hook::<span class="hljs-title function_ invoke__">set_once</span>();
        <span class="hljs-keyword">let</span> <span class="hljs-variable">manifest</span> = serde_wasm_bindgen::<span class="hljs-title function_ invoke__">from_value</span>(manifest.<span class="hljs-title function_ invoke__">into</span>())?;
        <span class="hljs-keyword">let</span> <span class="hljs-variable">opts_builder</span> = <span class="hljs-keyword">Self</span>::<span class="hljs-title function_ invoke__">opts_from_js_value</span>(opts)?;
        opts_builder
            .<span class="hljs-title function_ invoke__">resolve_manifest</span>(manifest)
            .<span class="hljs-keyword">await</span>
            .<span class="hljs-title function_ invoke__">map</span>(NodeMaintainer::new)
    }
}</code></pre><ul>
<li>Take a regular JS object, which is actually just a <em>representation</em> of an object that lives in JS memory.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="35" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-meta">#[wasm_bindgen(js_name = <span class="hljs-string">&quot;resolveManifest&quot;</span>)]</span>
    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">resolve_manifest</span>(
        manifest: PackageJson,
        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,
    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;NodeMaintainer&gt; {
        console_error_panic_hook::<span class="hljs-title function_ invoke__">set_once</span>();
<span class="highlighted-line">        <span class="hljs-keyword">let</span> <span class="hljs-variable">manifest</span> = serde_wasm_bindgen::<span class="hljs-title function_ invoke__">from_value</span>(manifest.<span class="hljs-title function_ invoke__">into</span>())?;</span><span class="highlighted-line">        <span class="hljs-keyword">let</span> <span class="hljs-variable">opts_builder</span> = <span class="hljs-keyword">Self</span>::<span class="hljs-title function_ invoke__">opts_from_js_value</span>(opts)?;</span>        opts_builder
            .<span class="hljs-title function_ invoke__">resolve_manifest</span>(manifest)
            .<span class="hljs-keyword">await</span>
            .<span class="hljs-title function_ invoke__">map</span>(NodeMaintainer::new)
    }
}</code></pre><ul>
<li>To make things easier, we import the data from the JS side into a Rust memory-hosted object, using <code>serde_wasm_bindgen</code>.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="36" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="using-it-from-javascript"><strong>Using it from JavaScript</strong></h4>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NodeMaintainer</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-maintainer&quot;</span>;
<span class="hljs-keyword">import</span> pkgJson <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./package.json&quot;</span>
    assert { <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;json&quot;</span> };

<span class="hljs-comment">// Throws error if Rust returns `Result::Err`.</span>
<span class="hljs-keyword">const</span> <span class="hljs-attr">resolvedTree</span>: <span class="hljs-title class_">NodeMaintainer</span> =
    <span class="hljs-keyword">await</span> <span class="hljs-title class_">NodeMaintainer</span>(pkgJson);
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-marpit-fragments="6" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="37" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">JavaScript objects exist in JavaScript memory</li>
<li data-marpit-fragment="2">Rust objects stay isolated in flat wasm memory block</li>
<li data-marpit-fragment="3">Interaction is an illusion created by wasm_bindgen etc glue code</li>
<li data-marpit-fragment="4">Everything is literally pointers (the &quot;just a number&quot; kind)</li>
<li data-marpit-fragment="5">You can (de)serialize to move data between the two worlds</li>
<li data-marpit-fragment="6">Using it from JavaScript is transparent and easy.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="38" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen(typescript_custom_section)]</span>
<span class="hljs-keyword">const</span> TS_APPEND_CONTENT: &amp;<span class="hljs-symbol">&#x27;static</span> <span class="hljs-type">str</span> = <span class="hljs-string">r#&quot;
export interface NodeMaintainerOptions {
    registry?: string;
    scopedRegistries?: Record&lt;string, string&gt;;
    concurrency?: number;
    kdlLock?: string;
    npmLock?: string;
    defaultTag?: string;
}
&quot;#</span>;

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">extern</span> <span class="hljs-string">&quot;C&quot;</span> {
    <span class="hljs-meta">#[wasm_bindgen(typescript_type = <span class="hljs-string">&quot;NodeMaintainerOptions&quot;</span>)]</span>
    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">NodeMaintainerOptions</span>;
}
</code></pre>
<ul>
<li>You can define custom TS types.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="39" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="highlighted-line"><span class="hljs-meta">#[wasm_bindgen(typescript_custom_section)]</span></span><span class="hljs-keyword">const</span> TS_APPEND_CONTENT: &amp;<span class="hljs-symbol">&#x27;static</span> <span class="hljs-type">str</span> = <span class="hljs-string">r#&quot;
export interface NodeMaintainerOptions {
    registry?: string;
    scopedRegistries?: Record&lt;string, string&gt;;
    concurrency?: number;
    kdlLock?: string;
    npmLock?: string;
    defaultTag?: string;
}
&quot;#</span>;

<span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">extern</span> <span class="hljs-string">&quot;C&quot;</span> {
<span class="highlighted-line">    <span class="hljs-meta">#[wasm_bindgen(typescript_type = <span class="hljs-string">&quot;NodeMaintainerOptions&quot;</span>)]</span></span>    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">NodeMaintainerOptions</span>;
}</code></pre><ul>
<li>...and then import them into Rust.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="40" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="40" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">opts_from_js_value</span>(
        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,
    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;crate::maintainer::NodeMaintainerOptions&gt; {
        <span class="hljs-comment">// ...snip...</span>
<span class="highlighted-line">        <span class="hljs-keyword">let</span> <span class="hljs-keyword">mut </span><span class="hljs-variable">opts_builder</span> = crate::maintainer::NodeMaintainer::<span class="hljs-title function_ invoke__">builder</span>();</span>        <span class="hljs-keyword">let</span> <span class="hljs-variable">opts</span>: <span class="hljs-type">Option</span>&lt;ParsedNodeMaintainerOptions&gt; =
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> <span class="hljs-variable">Some</span>(opts) = opts {
                serde_wasm_bindgen::<span class="hljs-title function_ invoke__">from_value</span>(opts.<span class="hljs-title function_ invoke__">into</span>())?
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-literal">None</span>
            };
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-literal">None</span>
        };
        <span class="hljs-comment">// ...snip...</span>
        }
        <span class="hljs-title function_ invoke__">Ok</span>(opts_builder)
    }</code></pre><ul>
<li>We're gonna create a Rust-side Builder that we'll pass our options to. This is how options are usually passed in Rust.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="41" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="41" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">opts_from_js_value</span>(
        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,
    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;crate::maintainer::NodeMaintainerOptions&gt; {
        <span class="hljs-comment">// ...snip...</span>
        <span class="hljs-keyword">let</span> <span class="hljs-keyword">mut </span><span class="hljs-variable">opts_builder</span> = crate::maintainer::NodeMaintainer::<span class="hljs-title function_ invoke__">builder</span>();
<span class="highlighted-line">        <span class="hljs-keyword">let</span> <span class="hljs-variable">opts</span>: <span class="hljs-type">Option</span>&lt;ParsedNodeMaintainerOptions&gt; =</span><span class="highlighted-line">            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> <span class="hljs-variable">Some</span>(opts) = opts {</span><span class="highlighted-line">                serde_wasm_bindgen::<span class="hljs-title function_ invoke__">from_value</span>(opts.<span class="hljs-title function_ invoke__">into</span>())?</span>            } <span class="hljs-keyword">else</span> {
                <span class="hljs-literal">None</span>
            };
        <span class="hljs-comment">// ...snip...</span>
        }
        <span class="hljs-title function_ invoke__">Ok</span>(opts_builder)
    }</code></pre><ul>
<li>For the incoming options, we transfer them over to Rust memory by deserializing them.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="42" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="42" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">NodeMaintainer</span> {
    <span class="hljs-keyword">fn</span> <span class="hljs-title function_">opts_from_js_value</span>(
        opts: <span class="hljs-type">Option</span>&lt;NodeMaintainerOptions&gt;,
    ) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;crate::maintainer::NodeMaintainerOptions&gt; {
        <span class="hljs-comment">// ...snip...</span>
        <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> <span class="hljs-variable">Some</span>(opts) = opts {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> <span class="hljs-variable">Some</span>(registry) = opts.registry {
<span class="highlighted-line">                opts_builder = opts_builder.<span class="hljs-title function_ invoke__">registry</span>(</span><span class="highlighted-line">                    registry</span><span class="highlighted-line">                        .<span class="hljs-title function_ invoke__">parse</span>()</span><span class="highlighted-line">                        .<span class="hljs-title function_ invoke__">map_err</span>(|e| NodeMaintainerError::<span class="hljs-title function_ invoke__">UrlParseError</span>(registry, e))?,</span>                );
            }
        <span class="hljs-comment">// ...snip...</span>
        }
        <span class="hljs-title function_ invoke__">Ok</span>(opts_builder)
    }</code></pre><ul>
<li>Now we can pass/parse/validate values as we pass them to the Builder.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="43" data-marpit-fragments="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="43" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways-1"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">Sometimes, you want to define custom TS types for your interface.</li>
<li data-marpit-fragment="2">Not strictly necessary, but improves TS experience.</li>
<li data-marpit-fragment="3">Then import them as if you were doing regular FFI in Rust</li>
<li data-marpit-fragment="4">It may make sense to do more manual parsing and validation of values/options, because JS and Rust patterns are different.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="44" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="but-wait"><strong>But Wait!</strong></h3>
<ul>
<li data-marpit-fragment="1">JS&lt;-&gt;Rust interactions can be even more complex!</li>
<li data-marpit-fragment="2">Let's look at the contents of the resolved tree: <code>Package</code>s</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="45" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="45" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">struct</span> <span class="hljs-title class_">Package</span> {
    <span class="hljs-comment">// All actually internal.</span>
    <span class="hljs-meta">#[wasm_bindgen(skip)]</span>
    <span class="hljs-keyword">pub</span> from: JsString,
    <span class="hljs-meta">#[wasm_bindgen(skip)]</span>
    <span class="hljs-keyword">pub</span> name: JsString,
    <span class="hljs-meta">#[wasm_bindgen(skip)]</span>
    <span class="hljs-keyword">pub</span> resolved: JsString,
    package: crate::package::Package,
    serializer: serde_wasm_bindgen::Serializer,
}
</code></pre>
<ul>
<li>Again, we wrap an opaque Rust type in something that JS can see.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="46" data-marpit-fragments="1" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="46" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">struct</span> <span class="hljs-title class_">Package</span> {
    <span class="hljs-comment">// All actually internal.</span>
<span class="highlighted-line">    <span class="hljs-meta">#[wasm_bindgen(skip)]</span></span><span class="highlighted-line">    <span class="hljs-keyword">pub</span> from: JsString,</span><span class="highlighted-line">    <span class="hljs-meta">#[wasm_bindgen(skip)]</span></span><span class="highlighted-line">    <span class="hljs-keyword">pub</span> name: JsString,</span><span class="highlighted-line">    <span class="hljs-meta">#[wasm_bindgen(skip)]</span></span><span class="highlighted-line">    <span class="hljs-keyword">pub</span> resolved: JsString,</span>    package: crate::package::Package,
    serializer: serde_wasm_bindgen::Serializer,
}</code></pre><ul>
<li data-marpit-fragment="1">These are actually JS values, but we're only going to expose them through getters, so they're read-only, hence the <code>skip</code>.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="47" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen]</span>
<span class="hljs-keyword">impl</span> <span class="hljs-title class_">Package</span> {
    <span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">entries</span>(&amp;<span class="hljs-keyword">self</span>) <span class="hljs-punctuation">-&gt;</span> <span class="hljs-type">Result</span>&lt;EntryReadableStream&gt; {
</code></pre>
<ul>
<li data-marpit-fragment="1">We define a method for extracting package contents.</li>
<li data-marpit-fragment="2">This will do a lot of juggling between JavaScript and Rust types to stream data.</li>
<li data-marpit-fragment="3">Everything looks like native JavaScript types on the other end.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="48" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="48" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-keyword">let</span> <span class="hljs-variable">entries</span> = <span class="hljs-keyword">self</span>.package.<span class="hljs-title function_ invoke__">entries</span>()
    .<span class="hljs-keyword">await</span>?.<span class="hljs-title function_ invoke__">then</span>(|entry| <span class="hljs-keyword">async</span> <span class="hljs-keyword">move</span> {
        entry.<span class="hljs-title function_ invoke__">map_err</span>(|e| e.<span class="hljs-title function_ invoke__">into</span>()).<span class="hljs-title function_ invoke__">and_then</span>(
            |entry: crate::entries::Entry| <span class="hljs-punctuation">-&gt;</span>
                std::result::<span class="hljs-type">Result</span>&lt;JsValue, JsValue&gt; {
</code></pre>
<ul>
<li data-marpit-fragment="1">Some incantation for creating and iterating over the async Rust Stream.</li>
<li data-marpit-fragment="2">Internals of this method are actually executing async <strong>Rust</strong> logic, not JS logic!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="49" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="49" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">let</span> <span class="hljs-variable">entries</span> = <span class="hljs-keyword">self</span>.package.<span class="hljs-title function_ invoke__">entries</span>()
    .<span class="hljs-keyword">await</span>?.<span class="hljs-title function_ invoke__">then</span>(|entry| <span class="hljs-keyword">async</span> <span class="hljs-keyword">move</span> {
        entry.<span class="hljs-title function_ invoke__">map_err</span>(|e| e.<span class="hljs-title function_ invoke__">into</span>()).<span class="hljs-title function_ invoke__">and_then</span>(
            |entry: crate::entries::Entry| <span class="hljs-punctuation">-&gt;</span>
<span class="highlighted-line">                std::result::<span class="hljs-type">Result</span>&lt;JsValue, JsValue&gt; {</span></code></pre><ul>
<li>We're gonna turn (Rust) <code>Entry</code>s into (JS) <code>JsValue</code>s in our handler.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="50" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="50" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-rust"><span class="hljs-comment">// Top of the file</span>
<span class="hljs-keyword">use</span> wasm_streams::ReadableStream;

<span class="hljs-comment">// ...snip...</span>
<span class="hljs-keyword">let</span> <span class="hljs-variable">obj</span> = js_sys::Object::<span class="hljs-title function_ invoke__">new</span>();
<span class="hljs-comment">//...snip...</span>
js_sys::Reflect::<span class="hljs-title function_ invoke__">set</span>(
    <span class="hljs-comment">// ...snip...</span>
)?;
js_sys::Reflect::<span class="hljs-title function_ invoke__">set</span>(
    <span class="hljs-comment">// ...snip...</span>
)?;
<span class="hljs-title function_ invoke__">Ok</span>(obj.<span class="hljs-title function_ invoke__">into</span>())
</code></pre>
<ul>
<li>We're going to create the JS-side <code>Entry</code> object and use reflection to assign values directly to it.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="51" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="51" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust">js_sys::Reflect::<span class="hljs-title function_ invoke__">set</span>(
    &amp;obj,
    &amp;<span class="hljs-string">&quot;path&quot;</span>.<span class="hljs-title function_ invoke__">into</span>(),
<span class="highlighted-line">    &amp;entry.<span class="hljs-title function_ invoke__">path</span>()?.<span class="hljs-title function_ invoke__">to_string_lossy</span>().<span class="hljs-title function_ invoke__">into_owned</span>().<span class="hljs-title function_ invoke__">into</span>(),</span>)?;
js_sys::Reflect::<span class="hljs-title function_ invoke__">set</span>(
    &amp;obj,
    &amp;<span class="hljs-string">&quot;contents&quot;</span>.<span class="hljs-title function_ invoke__">into</span>(),
<span class="highlighted-line">    &amp;ReadableStream::<span class="hljs-title function_ invoke__">from_async_read</span>(entry, <span class="hljs-number">1024</span>)</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into_raw</span>()</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into</span>(),</span>)?;</code></pre><ul>
<li>We convert our values into JS values (such as JS' <code>ReadableStream</code>) and assign <em>those</em> through reflection.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="52" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="52" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust">js_sys::Reflect::<span class="hljs-title function_ invoke__">set</span>(
    &amp;obj,
    &amp;<span class="hljs-string">&quot;contents&quot;</span>.<span class="hljs-title function_ invoke__">into</span>(),
<span class="highlighted-line">    &amp;ReadableStream::<span class="hljs-title function_ invoke__">from_async_read</span>(entry, <span class="hljs-number">1024</span>)</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into_raw</span>()</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into</span>(),</span>)?;</code></pre><ul>
<li data-marpit-fragment="1">JS will end up iterating over a package stream of <code>Entry</code>s, and those entries will have streamable data themselves (<code>content</code>).</li>
<li data-marpit-fragment="2">Data will be converted between Rust and JS memory in the background as needed, on the fly.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="53" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="53" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wrapping-up"><strong>Wrapping up</strong></h3>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">let</span> <span class="hljs-variable">entries</span> = <span class="hljs-keyword">self</span>.package.<span class="hljs-title function_ invoke__">entries</span>()
    <span class="hljs-comment">//... snip...</span>
<span class="highlighted-line">    <span class="hljs-keyword">let</span> <span class="hljs-variable">jsval</span>: JsValue = ReadableStream::<span class="hljs-title function_ invoke__">from_stream</span>(entries)</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into_raw</span>()</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">into</span>();</span>    <span class="hljs-title function_ invoke__">Ok</span>(jsval.<span class="hljs-title function_ invoke__">into</span>())
}</code></pre><ul>
<li>Wrap the Rust-native <code>Stream</code> with a JS-side <code>ReadableStream</code> as a <code>JsValue</code>.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="54" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="54" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="wrapping-up-1"><strong>Wrapping up</strong></h3>
<pre class="language-rust"><code class="language-rust"><span class="hljs-keyword">let</span> <span class="hljs-variable">entries</span> = <span class="hljs-keyword">self</span>.package.<span class="hljs-title function_ invoke__">entries</span>()
    <span class="hljs-comment">//... snip...</span>
    <span class="hljs-keyword">let</span> <span class="hljs-variable">jsval</span>: JsValue = ReadableStream::<span class="hljs-title function_ invoke__">from_stream</span>(entries)
        .<span class="hljs-title function_ invoke__">into_raw</span>()
        .<span class="hljs-title function_ invoke__">into</span>();
<span class="highlighted-line">    <span class="hljs-title function_ invoke__">Ok</span>(jsval.<span class="hljs-title function_ invoke__">into</span>())</span>}</code></pre><ul>
<li>And turn the generic JsValue into a concrete TypeScript <code>ReadableStream&lt;Entry&gt;</code>.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="55" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="55" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways-2"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">You can wrap very complex and rich Rust and TypeScript data structures</li>
<li data-marpit-fragment="2">There's Reflection capabilities that let you create and modify TypeScript<br />
objects directly in Rust code (even call JS functions!)</li>
<li data-marpit-fragment="3">All of this results in well-typed interfaces</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="56" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="56" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">import</span> {
  resolveManifest,
  initSync,
  <span class="hljs-title class_">Nassun</span>,
  <span class="hljs-title class_">NodeMaintainer</span>,
  <span class="hljs-title class_">Package</span>,
  <span class="hljs-title class_">Entry</span>,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-maintainer&quot;</span>;
<span class="hljs-keyword">import</span> nmWasm <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-maintainer/node_maintainer_bg.wasm&quot;</span>;

<span class="hljs-title function_">initSync</span>(<span class="hljs-title function_">dataURItoUint8Array</span>(nmWasm <span class="hljs-keyword">as</span> <span class="hljs-built_in">unknown</span> <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>));
</code></pre>
<ul>
<li>Now we can consume it in TypeScript!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="57" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="57" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-typescript"><code class="language-typescript"><span class="hljs-keyword">import</span> {
  resolveManifest,
<span class="highlighted-line">  initSync,</span>  <span class="hljs-title class_">Nassun</span>,
  <span class="hljs-title class_">NodeMaintainer</span>,
  <span class="hljs-title class_">Package</span>,
  <span class="hljs-title class_">Entry</span>,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-maintainer&quot;</span>;
<span class="highlighted-line"><span class="hljs-keyword">import</span> nmWasm <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;node-maintainer/node_maintainer_bg.wasm&quot;</span>;</span>
<span class="highlighted-line"><span class="hljs-title function_">initSync</span>(<span class="hljs-title function_">dataURItoUint8Array</span>(nmWasm <span class="hljs-keyword">as</span> <span class="hljs-built_in">unknown</span> <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>));</span></code></pre><ul>
<li>There's a bit of juggling that needs to happen on import, which varies depending on the bundling strategy you're using.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="58" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="58" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">PackageManager</span> {
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">async</span> <span class="hljs-title function_">resolveProject</span>(<span class="hljs-params">root: <span class="hljs-built_in">string</span>, opts: InstallProjectOpts = {}</span>) {
    <span class="hljs-keyword">const</span> maintainer = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">resolveMaintainer</span>(root, opts);
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ResolvedProject</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>, maintainer, root);
  }
  <span class="hljs-keyword">private</span> <span class="hljs-keyword">async</span> <span class="hljs-title function_">resolveMaintainer</span>(
    <span class="hljs-attr">root</span>: <span class="hljs-built_in">string</span>,
    <span class="hljs-attr">opts</span>: <span class="hljs-title class_">InstallProjectOpts</span>
  ): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-title class_">NodeMaintainer</span>&gt; {
    <span class="hljs-keyword">return</span> <span class="hljs-title function_">resolveManifest</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(opts.<span class="hljs-property">pkgJson</span>.<span class="hljs-title function_">trim</span>()), {
      <span class="hljs-attr">npmLock</span>: opts.<span class="hljs-property">npmPkgLock</span>,
    });
  }
  <span class="hljs-comment">// ...snip...</span>
}
</code></pre>
<ul>
<li>Instead of exposing the <code>NodeMaintainer</code> directly, we use it as a library to create a wrapper that works against a virtual filesystem.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="59" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="59" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways-3"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">wasm module consumers don't usually have to care that something is wasm.</li>
<li data-marpit-fragment="2">while you <em>usually</em> just need to import a wasm package, you sometimes need to do some backflips depending on your specific JS bundler.</li>
<li data-marpit-fragment="3">wrapping the imported wasm stuff in another API layer is a good idea.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="60" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="60" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">FileSystem</span> {
  <span class="hljs-title function_">readDirectory</span>(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">string</span>[];
  deleteFile?(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">void</span>;
  <span class="hljs-title function_">createDirectory</span>(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">void</span>;
  <span class="hljs-title function_">writeFile</span>(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>, <span class="hljs-attr">data</span>: <span class="hljs-built_in">string</span>, writeByteOrderMark?: <span class="hljs-built_in">boolean</span>): <span class="hljs-built_in">void</span>;
  <span class="hljs-title function_">directoryExists</span>(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">boolean</span>;
}
</code></pre>
<ul>
<li>We define a (limited) virtual filesystem interface, which we will implement ourselves.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="61" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="61" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">declare</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ResolvedProject</span> {
  <span class="hljs-title function_">restore</span>(): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-built_in">void</span>&gt;;
  <span class="hljs-title function_">restorePackageAt</span>(<span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-built_in">number</span> | <span class="hljs-literal">undefined</span>&gt;;
  <span class="hljs-title function_">pruneExtraneous</span>(): <span class="hljs-built_in">number</span>;
}
</code></pre>
<ul>
<li>Using the typestate pattern, we keep <code>PackageManager</code> and <code>ResolvedProject</code> separate.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="62" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="62" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways-4"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">The rest is regular TypeScript code, with any wrapped Rust types hidden deep<br />
in implementation.</li>
<li data-marpit-fragment="2">Aside: typestate pattern is great!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="63" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="63" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="installing-the-resolvedproject"><strong>Installing the <code>ResolvedProject</code></strong></h3>
<ul>
<li data-marpit-fragment="1">We have a virtual filesystem.</li>
<li data-marpit-fragment="2">We have a <code>ResolvedProject</code> instance, created by our <code>PackageManager</code>.</li>
<li data-marpit-fragment="3">Time to extract all that data into our &quot;filesystem&quot;!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="64" data-marpit-fragments="4" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="64" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ResolvedProject</span> {
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">async</span> <span class="hljs-title function_">restore</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">pruneExtraneous</span>();
    <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">extractMissing</span>();
    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">writeLockfile</span>();
  }
  <span class="hljs-comment">// ...snip</span>
}
</code></pre>
<ul>
<li data-marpit-fragment="1">&quot;restore&quot; is what this package manager calls its &quot;install&quot; operation. It's just three steps:
<ul>
<li data-marpit-fragment="2">pruning existing packages that don't need to be there anymore</li>
<li data-marpit-fragment="3">extracting missing packages</li>
<li data-marpit-fragment="4">and writing a lockfile. That's it!</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="65" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="65" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-typescript"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ResolvedProject</span> {
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">async</span> <span class="hljs-title function_">restore</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">pruneExtraneous</span>();
<span class="highlighted-line">    <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">extractMissing</span>();</span>    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">writeLockfile</span>();
  }
  <span class="hljs-comment">// ...snip</span>
}</code></pre><ul>
<li>We're just going to focus on this step, which is the most interesting one.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="66" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="66" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ResolvedProject</span> {
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">private</span> <span class="hljs-keyword">async</span> <span class="hljs-title function_">extractMissing</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">const</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">MetaFile</span> = { <span class="hljs-attr">packages</span>: {} };
    <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">maintainer</span>.<span class="hljs-title function_">forEachPackage</span>(<span class="hljs-keyword">async</span> (<span class="hljs-attr">pkg</span>: <span class="hljs-title class_">Package</span>, <span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>) =&gt; {
      <span class="hljs-keyword">const</span> fullPath = <span class="hljs-title function_">join</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">prefix</span>, path);
      meta.<span class="hljs-property">packages</span>![path] = {
        <span class="hljs-attr">name</span>: pkg.<span class="hljs-property">name</span>,
        <span class="hljs-attr">resolved</span>: pkg.<span class="hljs-property">resolved</span>,
      };
      <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>.<span class="hljs-title function_">directoryExists</span>(fullPath)) {
          <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">extractPackageTo</span>(pkg, fullPath);
        }
      } <span class="hljs-keyword">finally</span> {
        pkg.<span class="hljs-title function_">free</span>();
      }
    });
    <span class="hljs-title function_">rimraf</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">metaPath</span>);
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>.<span class="hljs-title function_">writeFile</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">metaPath</span>, <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(meta, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
  }
  <span class="hljs-comment">// ...snip</span>
}
</code></pre>
<ul>
<li>This is the whole definition! Let's break it down.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="67" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="67" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-typescript"><code class="language-typescript"><span class="hljs-keyword">private</span> <span class="hljs-keyword">async</span> <span class="hljs-title function_">extractMissing</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">MetaFile</span> = { <span class="hljs-attr">packages</span>: {} };
<span class="highlighted-line">  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">maintainer</span>.<span class="hljs-title function_">forEachPackage</span>(<span class="hljs-keyword">async</span> (<span class="hljs-attr">pkg</span>: <span class="hljs-title class_">Package</span>, <span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>) =&gt; {</span><span class="highlighted-line">    <span class="hljs-comment">// ...snip...</span></span><span class="highlighted-line">  });</span>  <span class="hljs-title function_">rimraf</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">metaPath</span>);
  <span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>.<span class="hljs-title function_">writeFile</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">metaPath</span>, <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(meta, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
}</code></pre><ul>
<li data-marpit-fragment="1">We're going to iterate over all the packages in the <code>NodeMaintainer</code> instance.</li>
<li data-marpit-fragment="2">Iteration is going to happen <em>concurrently</em>, with multiple packages extracted at once.</li>
<li data-marpit-fragment="3"><code>forEachPackage</code> is a method defined on the <em>Rust</em> side of things.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="68" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="68" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-typescript"><code class="language-typescript"><span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">maintainer</span>.<span class="hljs-title function_">forEachPackage</span>(<span class="hljs-keyword">async</span> (<span class="hljs-attr">pkg</span>: <span class="hljs-title class_">Package</span>, <span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>) =&gt; {
  <span class="hljs-keyword">const</span> fullPath = <span class="hljs-title function_">join</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">prefix</span>, path);
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>.<span class="hljs-title function_">directoryExists</span>(fullPath)) {
<span class="highlighted-line">      <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">extractPackageTo</span>(pkg, fullPath);</span>    }
  } <span class="hljs-keyword">finally</span> {
    pkg.<span class="hljs-title function_">free</span>();
  }
});</code></pre><ul>
<li>For each package, get the full path, and if it doesn't exist, extract it.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="69" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="69" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-typescript"><code class="language-typescript"><span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">maintainer</span>.<span class="hljs-title function_">forEachPackage</span>(<span class="hljs-keyword">async</span> (<span class="hljs-attr">pkg</span>: <span class="hljs-title class_">Package</span>, <span class="hljs-attr">path</span>: <span class="hljs-built_in">string</span>) =&gt; {
  <span class="hljs-keyword">const</span> fullPath = <span class="hljs-title function_">join</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">prefix</span>, path);
  <span class="hljs-comment">// ...snip...</span>
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">fs</span>.<span class="hljs-title function_">directoryExists</span>(fullPath)) {
      <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">extractPackageTo</span>(pkg, fullPath);
    }
  } <span class="hljs-keyword">finally</span> {
<span class="highlighted-line">    pkg.<span class="hljs-title function_">free</span>();</span>  }
});</code></pre><ul>
<li>Remember the whole &quot;garbage collection&quot; thing? Well, we have to deallocate our Rust objects by hand. This is important!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="70" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="70" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen(js_name = <span class="hljs-string">&quot;forEachPackage&quot;</span>)]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">for_each_package</span>(&amp;<span class="hljs-keyword">self</span>, f: &amp;js_sys::Function) <span class="hljs-punctuation">-&gt;</span> std::result::<span class="hljs-type">Result</span>&lt;(), JsValue&gt; {
<span class="highlighted-line">    futures::stream::<span class="hljs-title function_ invoke__">iter</span>(<span class="hljs-keyword">self</span>.inner.graph.inner.<span class="hljs-title function_ invoke__">node_indices</span>())</span>        .<span class="hljs-title function_ invoke__">map</span>(<span class="hljs-literal">Ok</span>)
        .<span class="hljs-title function_ invoke__">try_for_each_concurrent</span>(<span class="hljs-number">10</span>, <span class="hljs-keyword">move</span> |idx| <span class="hljs-keyword">async</span> <span class="hljs-keyword">move</span> {
            <span class="hljs-comment">// ...snip...</span>
        }).<span class="hljs-keyword">await</span>
}</code></pre><ul>
<li>Coming back to the Rust side, we see the definition of <code>forEachPackage</code>, using native Rust Stream functions.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="71" data-marpit-fragments="2" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="71" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust"><span class="hljs-meta">#[wasm_bindgen(js_name = <span class="hljs-string">&quot;forEachPackage&quot;</span>)]</span>
<span class="hljs-keyword">pub</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">fn</span> <span class="hljs-title function_">for_each_package</span>(&amp;<span class="hljs-keyword">self</span>, f: &amp;js_sys::Function) <span class="hljs-punctuation">-&gt;</span> std::result::<span class="hljs-type">Result</span>&lt;(), JsValue&gt; {
    futures::stream::<span class="hljs-title function_ invoke__">iter</span>(<span class="hljs-keyword">self</span>.inner.graph.inner.<span class="hljs-title function_ invoke__">node_indices</span>())
        .<span class="hljs-title function_ invoke__">map</span>(<span class="hljs-literal">Ok</span>)
<span class="highlighted-line">        .<span class="hljs-title function_ invoke__">try_for_each_concurrent</span>(<span class="hljs-number">10</span>, <span class="hljs-keyword">move</span> |idx| <span class="hljs-keyword">async</span> <span class="hljs-keyword">move</span> {</span>            <span class="hljs-comment">// ...snip...</span>
        }).<span class="hljs-keyword">await</span>
}</code></pre><ul>
<li data-marpit-fragment="1">We're even using <code>try_for_each_concurrent</code> to iterate over the packages concurrently, in batches of 10 at a time.</li>
<li data-marpit-fragment="2">Side note: Packages themselves are fetched through reflection against the JS <code>fetch</code> Web API, all under the hood.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="72" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="72" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<pre class="language-rust"><code class="language-rust">.<span class="hljs-title function_ invoke__">try_for_each_concurrent</span>(<span class="hljs-number">10</span>, <span class="hljs-keyword">move</span> |idx| <span class="hljs-keyword">async</span> <span class="hljs-keyword">move</span> {
    <span class="hljs-comment">// ..snip...</span>
<span class="highlighted-line">    <span class="hljs-keyword">let</span> <span class="hljs-variable">promise</span>: <span class="hljs-type">Option</span>&lt;Promise&gt; = f</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">call2</span>(</span><span class="highlighted-line">            &amp;JsValue::NULL,</span><span class="highlighted-line">            &amp;Package::<span class="hljs-title function_ invoke__">from_core_package</span>(pkg.<span class="hljs-title function_ invoke__">clone</span>()).<span class="hljs-title function_ invoke__">into</span>(),</span><span class="highlighted-line">            &amp;(&amp;path).<span class="hljs-title function_ invoke__">into</span>(),</span><span class="highlighted-line">        )?</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">dyn_into</span>()</span><span class="highlighted-line">        .<span class="hljs-title function_ invoke__">ok</span>();</span>    <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> <span class="hljs-variable">Some</span>(promise) = promise {
        JsFuture::<span class="hljs-title function_ invoke__">from</span>(promise).<span class="hljs-keyword">await</span>?;
    }
    Ok::&lt;_, JsValue&gt;(())
    <span class="hljs-comment">// ...snip...</span>
}</code></pre><ul>
<li>We can even call that <code>async</code> JS callback and send back our own promise, from a Rust Future!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="73" data-marpit-fragments="3" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="73" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="takeaways-5"><strong>Takeaways</strong></h3>
<ul>
<li data-marpit-fragment="1">You have to remember to <code>.free()</code> your Rust objects in <code>finally</code> blocks!</li>
<li data-marpit-fragment="2">Rust can call JS async functions, deal with them as Futures, and send back JS Promises, all transparently.</li>
<li data-marpit-fragment="3">You can use all the nice Rust concurrency features in the background.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="74" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="74" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="thats-it"><strong>That's it!</strong></h3>
<h4 id="we-have-a-package-manager-in-one-talks-worth-of-time">We have a package manager in one talk's worth of time! ;)</h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="75" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="75" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h3 id="the-package-manager-but-with-wasm"><strong>The Package Manager</strong>, but with <strong>WASM</strong></h3>
<ul>
<li>Final wrapper was turned into an NPM package:
<ul>
<li><a href="https://npm.im/@vscode/ts-package-manager">https://npm.im/@vscode/ts-package-manager</a></li>
</ul>
</li>
<li>WASM code pulled in as a regular dependency, invisible to user</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="76" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="76" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h4 id="type-acquisition-enabled"><strong>Type Acquisition Enabled</strong></h4>
<p><video controls width="800" src="img/stargazer-with-ata.mp4"></video></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="77" data-class="invert" data-paginate="true" data-theme="95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co" data-style=".container {
    display: flex;
}
.col {
    flex: 1;
}
" lang="en-US" class="invert" data-marpit-pagination="77" style="--class:invert;--paginate:true;--theme:95xdih5p5ye1ys4p01rqkagcuevdrp1g64wpicud5co;--style:.container {
    display: flex;
}
.col {
    flex: 1;
}
;" data-marpit-pagination-total="77">
<h1 id="thanks"><strong>Thanks!</strong></h1>
<ul>
<li><a href="https://github.com/zkat">https://github.com/zkat</a></li>
<li><a href="https://toot.cat/@zkat">https://toot.cat/@zkat</a></li>
<li><a href="https://orogene.dev">https://orogene.dev</a></li>
<li><a href="https://github.com/microsoft/vscode-ts-package-manager">https://github.com/microsoft/vscode-ts-package-manager</a></li>
<li><a href="https://vscode.dev">https://vscode.dev</a></li>
</ul>
</section>
<script>!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class s extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(((...e)=>{t("wrapperSize")(...e),this.flushSvgDisplay()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,s,o,r,a;this.shadowRoot.innerHTML=`\n<style>\n  svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n  span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n  <svg part="svg" ${i}>\n    <foreignObject><span ${n}><slot></slot></span></foreignObject>\n  </svg>\n</div>\n    `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(o=null===(s=this.wrapper)||void 0===s?void 0:s.querySelector(`svg[${i}]`))&&void 0!==o?o:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,s,o,r;let a=Math.ceil(null!==(e=null===(t=this.containerSize)||void 0===t?void 0:t.width)&&void 0!==e?e:0);const l=Math.ceil(null!==(n=null===(i=this.containerSize)||void 0===i?void 0:i.height)&&void 0!==n?n:0);void 0!==this.dataset.downscaleOnly&&(a=Math.max(a,null!==(o=null===(s=this.wrapperSize)||void 0===s?void 0:s.width)&&void 0!==o?o:0));const c=null===(r=this.svg)||void 0===r?void 0:r.querySelector(":scope > foreignObject");if(null==c||c.setAttribute("width",`${a}`),null==c||c.setAttribute("height",`${l}`),this.svg&&(this.svg.setAttribute("viewBox",`0 0 ${a} ${l}`),this.svg.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.svg.style.height=a<=0||l<=0?"0":""),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const o=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let r;const a=Symbol();let l;const c="marpitSVGPolyfill:setZoomFactor,",d=Symbol(),g=Symbol();const h=()=>{const t="Apple Computer, Inc."===navigator.vendor,e=t?[u]:[],i={then:e=>(t?(async()=>{if(void 0===l){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d"),i=new Image(10,10),n=new Promise((t=>{i.addEventListener("load",(()=>t()))}));i.crossOrigin="anonymous",i.src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%201%201%22%3E%3CforeignObject%20width%3D%221%22%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22width%3A%201px%3B%20height%3A%201px%3B%20background%3A%20red%3B%20position%3A%20relative%22%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E",await n,e.drawImage(i,0,0),l=e.getImageData(5,5,1,1).data[3]<128}return l})().then((t=>{null==e||e(t?[u]:[])})):null==e||e([]),i)};return Object.assign(e,i)};let p,m;function u(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[g]||(Object.defineProperty(window,g,{configurable:!0,value:!0}),document.body.style.zoom=1.0001,document.body.offsetHeight,document.body.style.zoom=1,window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(c)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(m=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,s,o,r;t.style.transform||(t.style.transform="translateZ(0)");const a=i||m||t.currentScale||1;p!==a&&(p=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i<c;i+=1){const n=t.children[i];if(n.getScreenCTM){const t=n.getScreenCTM();if(t){const i=null!==(s=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==s?s:0,c=null!==(r=null===(o=n.y)||void 0===o?void 0:o.baseVal.value)&&void 0!==r?r:0,d=n.children.length;for(let e=0;e<d;e+=1){const s=n.children[e];if("SECTION"===s.tagName){const{style:e}=s;e.transformOrigin||(e.transformOrigin=`${-i}px ${-c}px`),e.transform=`scale(${a}) matrix(${t.a}, ${t.b}, ${t.c}, ${t.d}, ${t.e-l.left}, ${t.f-l.top}) translateZ(0.0001px)`;break}}}}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${c}${n}`,"null"===window.origin?"*":window.origin)}))}function v({once:t=!1,target:e=document}={}){const i=function(t=document){if(t[d])return t[d];let e=!0;const i=()=>{e=!1,delete t[d]};Object.defineProperty(t,d,{configurable:!0,value:i});let n=[],s=!1;(async()=>{try{n=await h()}finally{s=!0}})();const o=()=>{for(const e of n)e({target:t});s&&0===n.length||e&&window.requestAnimationFrame(o)};return o(),i}(e);return t?(i(),()=>{}):i}p=1,m=void 0;const b=Symbol(),w=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",s);for(const n of Object.keys(t)){const s=`marp-${n}`,a=t[n].proto();null!=r||(r=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),r&&a!==HTMLElement?i||customElements.define(s,o(a,{style:t[n].style}),{extends:n}):(i||customElements.define(s,o(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${s}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${s}`).replace(new RegExp(`</${n}>$`,"i"),`</${s}>`)})))}window[a]=!0})(e),e[b])return e[b];const i=v({target:e}),n=()=>{i(),delete e[b]},l=Object.assign(n,{cleanup:n,update:()=>w(e)});return Object.defineProperty(e,b,{configurable:!0,value:l}),l},y=document.currentScript;w(y?y.getRootNode():document)}();
</script></foreignObject></svg></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@3.4.0/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){o[e]&&(n&&l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))&&c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)&&void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t<r||t===r&&n<=o;e.setAttribute(`${c}fragment`,(i?"":"in")+"active");const a=`${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),e.fragmentIndex=o;const i={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:i=!0})=>{if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]&&o(i,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const i=e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})=>{if(r(-1)&&i)return o(t,n-1),!1;const a=t-1;e.fragments[a]&&o(a,e.fragments[a].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},x=document,k=()=>!(!x.fullscreenEnabled&&!x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement&&!x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()&&(async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let i;const a=()=>{i&&clearTimeout(i),i=setTimeout((()=>{r.add(L),o()}),e),r.contains(L)&&(r.remove(L),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,a);setTimeout(a,0)},P=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],_=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(P.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},T=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("marp-auto-scaling, [data-auto-scaling], [data-marp-fitting]");t.setAttribute(`${c}load`,e?"":"hideable")}}))},I=({interval:e=250}={})=>t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else if(" "!==e.key||e.shiftKey)if("ArrowRight"===e.key||"ArrowDown"===e.key||"PageDown"===e.key)t.next({fragment:!e.shiftKey});else if("End"===e.key)t.slide(t.slides.length-1,{fragment:-1});else{if("Home"!==e.key)return;t.slide(0)}else t.next();e.preventDefault()}));let n,r,o=0;t.parent.addEventListener("wheel",(i=>{let a=!1;const s=(e,t)=>{e&&(a=a||((e,t)=>((e,t)=>{const n="X"===t?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]})(e,t)&&((e,t)=>{const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r})(getComputedStyle(e),t))(e,t)),(null==e?void 0:e.parentElement)&&s(e.parentElement,t)};if(0!==i.deltaX&&s(i.target,"X"),0!==i.deltaY&&s(i.target,"Y"),a)return;i.preventDefault();const l=Math.sqrt(i.deltaX**2+i.deltaY**2);if(void 0!==i.wheelDelta){if(void 0===i.webkitForce&&Math.abs(i.wheelDelta)<40)return;if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<4)return}else if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const c=Date.now()-o<e,d=l<=n;if(n=l,c||d)return;let u;(i.deltaX>0||i.deltaY>0)&&(u="next"),(i.deltaX<0||i.deltaY<0)&&(u="prev"),u&&(t[u](),o=Date.now())}))},M=(e=`.${l}osc`)=>{const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[${c}osc=${JSON.stringify(e)}]`).forEach(n)};return k()||n("fullscreen",(e=>e.style.display="none")),g||n("presenter",(e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."})),e=>{t.addEventListener("click",(t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;n&&t.target.blur();const r={fragment:!t.shiftKey};"next"===n?e.next(r):"prev"===n?e.prev(r):"fullscreen"===n?null==e||e.fullscreen():"presenter"===n&&e.openPresenterView()}})),e.parent.appendChild(t),e.on("activate",(({index:t})=>{n("page",(n=>n.textContent=`Page ${t+1} of ${e.slides.length}`))})),e.on("fragment",(({index:t,fragments:r,fragmentIndex:o})=>{n("prev",(e=>e.disabled=0===t&&0===o)),n("next",(n=>n.disabled=t===e.slides.length-1&&o===r.length-1))})),e.on("marp-active",(()=>y(t,!1))),e.on("marp-inactive",(()=>y(t,!0))),k()&&(e=>{for(const t of["","webkit"])x.addEventListener(t+"fullscreenchange",e)})((()=>n("fullscreen",(e=>e.classList.toggle("exit",k()&&$())))))}},O=e=>{window.addEventListener("message",(t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");let o=Number.parseInt(t,10),i=Number.parseInt(n,10)+1;i>=e.fragments[o].length&&(o+=1,i=0),e.slide(o,{fragment:i})}}))};var A=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let C=e=>String(e).replace(/[&<>"']/g,(e=>`&${D[e]};`)),D={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},N="dangerouslySetInnerHTML",B={className:"class",htmlFor:"for"},q={};function K(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==N&&(r+=` ${B[e]?B[e]:C(e)}="${C(t[e])}"`);r+=">"}if(-1===A.indexOf(e)){if(t[N])r+=t[N].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===q[e]?e:C(e)}r+=e?`</${e}>`:""}return q[r]=!0,r}const j=({children:e})=>K(null,null,...e),F=`${l}presenter-`,V={container:`${F}container`,dragbar:`${F}dragbar-container`,next:`${F}next`,nextContainer:`${F}next-container`,noteContainer:`${F}note-container`,noteWrapper:`${F}note-wrapper`,noteButtons:`${F}note-buttons`,infoContainer:`${F}info-container`,infoPage:`${F}info-page`,infoPageText:`${F}info-page-text`,infoPagePrev:`${F}info-page-prev`,infoPageNext:`${F}info-page-next`,noteButtonsBigger:`${F}note-bigger`,noteButtonsSmaller:`${F}note-smaller`,infoTime:`${F}info-time`,infoTimer:`${F}info-timer`},U=e=>{const{title:t}=document;document.title="[Presenter view]"+(t?` - ${t}`:"");const n={},r=e=>(n[e]=n[e]||document.querySelector(`.${e}`),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=V.container,t.appendChild(e),t.insertAdjacentHTML("beforeend",K(j,null,K("div",{class:V.nextContainer},K("iframe",{class:V.next,src:"?view=next"})),K("div",{class:V.dragbar}),K("div",{class:V.noteContainer},K("div",{class:V.noteWrapper}),K("div",{class:V.noteButtons},K("button",{class:V.noteButtonsSmaller,tabindex:"-1",title:"Smaller notes font size"},"Smaller notes font size"),K("button",{class:V.noteButtonsBigger,tabindex:"-1",title:"Bigger notes font size"},"Bigger notes font size"))),K("div",{class:V.infoContainer},K("div",{class:V.infoPage},K("button",{class:V.infoPagePrev,tabindex:"-1",title:"Previous"},"Previous"),K("span",{class:V.infoPageText}),K("button",{class:V.infoPageNext,tabindex:"-1",title:"Next"},"Next")),K("time",{class:V.infoTime,title:"Current time"}),K("time",{class:V.infoTimer,title:"Timer"})))),t})(e.parent)),(e=>{let t=!1;r(V.dragbar).addEventListener("mousedown",(()=>{t=!0,r(V.dragbar).classList.add("active")})),window.addEventListener("mouseup",(()=>{t=!1,r(V.dragbar).classList.remove("active")})),window.addEventListener("mousemove",(e=>{if(!t)return;const n=e.clientX/document.documentElement.clientWidth*100;r(V.container).style.setProperty("--bespoke-marp-presenter-split-ratio",`${Math.max(0,Math.min(100,n))}%`)})),r(V.nextContainer).addEventListener("click",(()=>e.next()));const n=r(V.next),o=(i=n,(e,t)=>{var n;return null===(n=i.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var i;n.addEventListener("load",(()=>{r(V.nextContainer).classList.add("active"),o(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>o(e,t)))}));const a=document.querySelectorAll(".bespoke-marp-note");a.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(V.noteWrapper).appendChild(e)})),e.on("activate",(()=>a.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide())))));let s=0;const l=e=>{s=Math.max(-5,s+e),r(V.noteContainer).style.setProperty("--bespoke-marp-note-font-scale",(1.2**s).toFixed(4))},c=()=>l(1),d=()=>l(-1),u=r(V.noteButtonsBigger),f=r(V.noteButtonsSmaller);u.addEventListener("click",(()=>{u.blur(),c()})),f.addEventListener("click",(()=>{f.blur(),d()})),document.addEventListener("keydown",(e=>{"+"===e.key&&c(),"-"===e.key&&d()}),!0),e.on("activate",(({index:t})=>{r(V.infoPageText).textContent=`${t+1} / ${e.slides.length}`}));const m=r(V.infoPagePrev),g=r(V.infoPageNext);m.addEventListener("click",(t=>{m.blur(),e.prev({fragment:!t.shiftKey})})),g.addEventListener("click",(t=>{g.blur(),e.next({fragment:!t.shiftKey})})),e.on("fragment",(({index:t,fragments:n,fragmentIndex:r})=>{m.disabled=0===t&&0===r,g.disabled=t===e.slides.length-1&&r===n.length-1}));let p=new Date;const v=()=>{const e=new Date,t=e=>`${Math.floor(e)}`.padStart(2,"0"),n=e.getTime()-p.getTime(),o=t(n/1e3%60),i=t(n/1e3/60%60),a=t(n/36e5%24);r(V.infoTime).textContent=e.toLocaleTimeString(),r(V.infoTimer).textContent=`${a}:${i}:${o}`};v(),setInterval(v,250),r(V.infoTimer).addEventListener("click",(()=>{p=new Date}))})(e)},X=e=>{if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:H},presenterUrl:{enumerable:!0,get:R}}),g&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))};function H(){const{max:e,floor:t}=Math,n=e(t(.85*window.innerWidth),640),r=e(t(.85*window.innerHeight),360);return window.open(this.presenterUrl,F+this.syncKey,`width=${n},height=${r},menubar=no,toolbar=no`)}function R(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),d(e)}const W=e=>{const t=u();return t===a&&e.appendChild(document.createElement("span")),{"":X,[i]:U,[a]:O}[t]},J=e=>{e.on("activate",(t=>{document.querySelectorAll(".bespoke-progress-parent > .bespoke-progress-bar").forEach((n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"}))}))},Y=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t},z=(e={})=>{const t={history:!0,...e};return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},o=(t={fragment:!0})=>{let n=t.fragment?Y(f("f")||""):null;((t,n)=>{const{min:r,max:o}=Math,{fragments:i,slides:a}=e,s=o(0,r(t,a.length-1)),l=o(0,r(n||0,i[s].length-1));s===e.slide()&&l===e.fragmentIndex||e.slide(s,{fragment:l})})((()=>{var t,r;if(location.hash){const[o]=location.hash.slice(1).split(":~:");if(/^\d+$/.test(o))return(null!==(t=Y(o))&&void 0!==t?t:1)-1;const i=document.getElementById(o)||document.querySelector(`a[name="${CSS.escape(o)}"]`);if(i){const{length:t}=e.slides;for(let o=0;o<t;o+=1)if(e.slides[o].contains(i)){const t=null===(r=e.fragments)||void 0===r?void 0:r[o],a=i.closest("[data-marpit-fragment]");if(t&&a){const e=t.indexOf(a);e>=0&&(n=e)}return o}}}return 0})(),n)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||m({f:0===r||r.toString()},{location:{...location,hash:`#${e+1}`},setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})})),setTimeout((()=>{o(),window.addEventListener("hashchange",(()=>r((()=>{o({fragment:!1}),m({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>o()))})),n=!1}),0)}},G=(e={})=>{var t;const n=e.key||(null===(t=window.history.state)||void 0===t?void 0:t.marpBespokeSyncKey)||Math.random().toString(36).slice(2),r=`bespoke-marp-sync-${n}`;var i;i={marpBespokeSyncKey:n},m({},{setter:(e,...t)=>o({...e,...i},...t)});const a=()=>{const e=p(r);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=a(),n={...t,...e(t)};return v(r,JSON.stringify(n)),n},l=()=>{window.removeEventListener("pageshow",l),s((e=>({reference:(e.reference||0)+1})))};return e=>{l(),Object.defineProperty(e,"syncKey",{value:n,enumerable:!0});let t=!0;setTimeout((()=>{e.on("fragment",(e=>{t&&s((()=>({index:e.index,fragmentIndex:e.fragmentIndex})))}))}),0),window.addEventListener("storage",(n=>{if(n.key===r&&n.oldValue&&n.newValue){const r=JSON.parse(n.oldValue),o=JSON.parse(n.newValue);if(r.index!==o.index||r.fragmentIndex!==o.fragmentIndex)try{t=!1,e.slide(o.index,{fragment:o.fragmentIndex,forSync:!0})}finally{t=!0}}}));const o=()=>{const{reference:e}=a();void 0===e||e<=1?h(r):s((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",l),o()})),e.on("destroy",o)}},{PI:Q,abs:Z,sqrt:ee,atan2:te}=Math,ne={passive:!0},re=({slope:e=-.7,swipeThreshold:t=30}={})=>n=>{let r;const o=n.parent,i=e=>{const t=o.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};o.addEventListener("touchstart",(({touches:e})=>{r=1===e.length?i(e[0]):void 0}),ne),o.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=i(e.touches[0]),n=t.x-r.x,o=t.y-r.y;r.delta=ee(Z(n)**2+Z(o)**2),r.radian=te(n,o)}else r=void 0})),o.addEventListener("touchend",(o=>{if(r){if(r.delta&&r.delta>=t&&r.radian){const t=(r.radian-e+Q)%(2*Q)-Q;n[t<0?"next":"prev"](),o.stopPropagation()}r=void 0}}),ne)},oe=new Map;oe.clear(),oe.set("none",{backward:{both:void 0,incoming:void 0,outgoing:void 0},forward:{both:void 0,incoming:void 0,outgoing:void 0}});const ie={both:"",outgoing:"outgoing-",incoming:"incoming-"},ae={forward:"",backward:"-backward"},se=e=>`--marp-bespoke-transition-animation-${e}`,le=e=>`--marp-transition-${e}`,ce=se("name"),de=se("duration"),ue=e=>new Promise((t=>{const n={},r=document.createElement("div"),o=e=>{r.remove(),t(e)};r.addEventListener("animationstart",(()=>o(n))),Object.assign(r.style,{animationName:e,animationDuration:"1s",animationFillMode:"both",animationPlayState:"paused",position:"absolute",pointerEvents:"none"}),document.body.appendChild(r);const i=getComputedStyle(r).getPropertyValue(le("duration"));i&&(n.defaultDuration=i),((e,t)=>{requestAnimationFrame((()=>{e.style.animationPlayState="running",requestAnimationFrame((()=>t(void 0)))}))})(r,o)})),fe=async e=>oe.has(e)?oe.get(e):(e=>{const t={},n=[];for(const[r,o]of Object.entries(ie))for(const[i,a]of Object.entries(ae)){const s=`marp-${o}transition${a}-${e}`;n.push(ue(s).then((e=>{t[i]=t[i]||{},t[i][r]=e?{...e,name:s}:void 0})))}return Promise.all(n).then((()=>t))})(e).then((t=>(oe.set(e,t),t))),me=e=>Object.values(e).flatMap(Object.values).every((e=>!e)),ge=(e,{type:t,backward:n})=>{const r=e[n?"backward":"forward"],o=(()=>{const e=r[t],n=e=>({[ce]:e.name});if(e)return n(e);if(r.both){const e=n(r.both);return"incoming"===t&&(e[se("direction")]="reverse"),e}})();return!o&&n?ge(e,{type:t,backward:!1}):o||{[ce]:"__bespoke_marp_transition_no_animation__"}},pe=e=>{if(e)try{const t=JSON.parse(e);if((e=>{if("object"!=typeof e)return!1;const t=e;return"string"==typeof t.name&&(void 0===t.duration||"string"==typeof t.duration)})(t))return t}catch(e){}},ve="_tSId",he="_tA",ye="bespoke-marp-transition-warming-up",be=window.matchMedia("(prefers-reduced-motion: reduce)"),we="__bespoke_marp_transition_reduced_outgoing__",xe="__bespoke_marp_transition_reduced_incoming__",ke={forward:{both:void 0,incoming:{name:xe},outgoing:{name:we}},backward:{both:void 0,incoming:{name:xe},outgoing:{name:we}}},$e=e=>{if(!document.startViewTransition)return;const t=t=>(void 0!==t&&(e._tD=t),e._tD);let n;t(!1),((...e)=>{const t=[...new Set(e).values()];return Promise.all(t.map((e=>fe(e)))).then()})(...Array.from(document.querySelectorAll("section[data-transition], section[data-transition-back]")).flatMap((e=>[e.dataset.transition,e.dataset.transitionBack].flatMap((e=>{const t=pe(e);return[null==t?void 0:t.name,(null==t?void 0:t.builtinFallback)?`__builtin__${t.name}`:void 0]})).filter((e=>!!e))))).then((()=>{document.querySelectorAll("style").forEach((e=>{e.innerHTML=e.innerHTML.replace(/--marp-transition-duration:[^;}]*[;}]/g,(e=>e.slice(0,-1)+"!important"+e.slice(-1)))}))}));const r=(n,{back:r,cond:o})=>i=>{var a;const s=t();if(s)return!!i[he]||!("object"!=typeof s||(s.skipTransition(),!i.forSync));if(!o(i))return!0;const l=e.slides[e.slide()],c=()=>{var e;return null!==(e=i.back)&&void 0!==e?e:r},d="data-transition"+(c()?"-back":""),u=l.querySelector(`section[${d}]`);if(!u)return!0;const f=pe(null!==(a=u.getAttribute(d))&&void 0!==a?a:void 0);return!f||((async(e,{builtinFallback:t=!0}={})=>{let n=await fe(e);if(me(n)){if(!t)return;return n=await fe(`__builtin__${e}`),me(n)?void 0:n}return n})(f.name,{builtinFallback:f.builtinFallback}).then((e=>{if(!e){t(!0);try{n(i)}finally{t(!1)}return}let r=e;be.matches&&(console.warn("Use a constant animation to transition because preferring reduced motion by viewer has detected."),r=ke);const o=document.getElementById(ve);o&&o.remove();const a=document.createElement("style");a.id=ve,document.head.appendChild(a),((e,t)=>{const n=[`:root{${le("direction")}:${t.backward?-1:1};}`,":root:has(.bespoke-marp-inactive){cursor:none;}"],r=t=>{var n,o,i;const a=(null===(n=e[t].both)||void 0===n?void 0:n.defaultDuration)||(null===(o=e[t].outgoing)||void 0===o?void 0:o.defaultDuration)||(null===(i=e[t].incoming)||void 0===i?void 0:i.defaultDuration);return"forward"===t?a:a||r("forward")},o=t.duration||r(t.backward?"backward":"forward");void 0!==o&&n.push(`::view-transition-group(*){${de}:${o};}`);const i=e=>Object.entries(e).map((([e,t])=>`${e}:${t};`)).join("");return n.push(`::view-transition-old(root){${i(ge(e,{...t,type:"outgoing"}))}}`,`::view-transition-new(root){${i(ge(e,{...t,type:"incoming"}))}}`),n})(r,{backward:c(),duration:f.duration}).forEach((e=>{var t;return null===(t=a.sheet)||void 0===t?void 0:t.insertRule(e)}));const s=document.documentElement.classList;s.add(ye);let l=!1;const d=()=>{l||(n(i),l=!0,s.remove(ye))},u=()=>{t(!1),a.remove(),s.remove(ye)};try{t(!0);const e=document.startViewTransition(d);t(e),e.finished.finally(u)}catch(e){console.error(e),d(),u()}})),!1)};e.on("prev",r((t=>e.prev({...t,[he]:!0})),{back:!0,cond:e=>{var t;return e.index>0&&!((null===(t=e.fragment)||void 0===t||t)&&n.fragmentIndex>0)}})),e.on("next",r((t=>e.next({...t,[he]:!0})),{cond:t=>t.index+1<e.slides.length&&!(n.fragmentIndex+1<n.fragments.length)})),setTimeout((()=>{e.on("slide",r((t=>e.slide(t.index,{...t,[he]:!0})),{cond:t=>{const n=e.slide();return t.index!==n&&(t.back=t.index<n,!0)}}))}),0),e.on("fragment",(e=>{n=e}))};let Ee;const Le=()=>(void 0===Ee&&(Ee="wakeLock"in navigator&&navigator.wakeLock),Ee),Se=async()=>{const e=Le();if(e)try{return await e.request("screen")}catch(e){console.warn(e)}return null},Pe=async()=>{if(!Le())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&Se()};for(const e of["visibilitychange","fullscreenchange"])document.addEventListener(e,t);return e=await Se(),e};((e=document.getElementById(":$p"))=>{(()=>{const e=f("view");r.dataset.bespokeView=e===a||e===i?e:""})();const t=(e=>{const t=f(e);return m({[e]:void 0}),t})("sync")||void 0;n.from(e,((...e)=>{const t=s.findIndex((e=>u()===e));return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[1,1,0],G({key:t})],[[1,1,1],W(e)],[[1,1,0],_],[[1,1,1],b],[[1,0,0],S()],[[1,1,1],T],[[1,1,1],z({history:!1})],[[1,1,0],I()],[[1,1,0],E],[[1,0,0],J],[[1,1,0],re()],[[1,0,0],M()],[[1,0,0],$e],[[1,1,1],w],[[1,1,0],Pe]))})()}();</script><script>window.__marpCliWatchWS="ws://localhost:37717/f31bd070f3c8a8b0b47bad71bd5b277a1c6aad73cc32e243981843a912181e3a";!function(){"use strict";const e=(n,o=!1)=>{const t=new WebSocket(n);return t.addEventListener("open",(()=>{console.info("[Marp CLI] Observing the change of file..."),o&&location.reload()})),t.addEventListener("close",(()=>{console.warn("[Marp CLI] WebSocket for file watcher was disconnected. Try re-connecting in 5000ms..."),setTimeout((()=>e(n,!0)),5e3)})),t.addEventListener("message",(e=>{"reload"===e.data&&location.reload()})),t};(()=>{const n=window.__marpCliWatchWS;n&&e(n)})()}();</script></body></html>