slide-27.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="description" content="Houdini talk about the power of web components for Enterprise frontend"/>
    <meta name="theme-color" content="#ffffff">
    <title>Houdini talk</title>
    <script type="module" src="./src/scri-pt.js"></script>
    <script type="module">let e={},t=[(e,t)=>e[t],(e,t)=>e.hasAttribute(t),(e,t)=>e.getAttribute(t),e=>1];class s extends WeakMap{use=(e,t={})=>this.get(e)||this.set(e,t).get(e)}let i={},n=new s,a=new s,l=new s,r=(e,t)=>"number"===t?0|e:e;class h{#e;#t=[];#s=0;constructor(e){this.#e=e}#i=()=>1==++this.#s&&queueMicrotask((()=>{this.#t.map((e=>e())),this.#s=0}));get value(){return this.#e}set value(e){this.#e=e,this.#i()}onChange(e,t){t&&e(this.#e),this.#t.push((()=>e(this.#e)))}when(e,t=[]){let s=new h(e(this.#e));return this.onChange((t=>s.value=e(t))),t.map((e=>e.onChange(this.#i))),s}}let o={},u={};class c extends HTMLElement{#n=(e,t=this)=>t.getAttribute(e);#a=(e,s)=>{let i=e[0],n=e.slice(1),l=this.#n(e,s),r=".?!@".indexOf(i);if(r>=0){let i=t[r](s,n);a.use(s)[e]={init:i,name:l},queueMicrotask((()=>s.removeAttribute(e)))}};static Signal=h;static hydrate=(t,s,r)=>{let h="string"==typeof t?i[t]:t.map((e=>document.querySelector(e).shadowRoot));for(let t of h)if(!t.h){t.h=1;let i=l.get(t)||e;for(let l in s){let h=n.get(t)[l],u=a.get(h);if(u){let t=s[l];for(let s in t){let n=t[s];s in o&&(n=o[s](n));let{name:a,init:l}=u[s.toLowerCase()]||e,{signal:c,type:d,id:g}=a&&i[a]||e;r instanceof Object&&g&&c&&(r[g]=c);let m=s.slice(1),f=e=>n({type:d,name:m,signal:c,signals:i,init:l,domNode:h,e:e});a&&(s.startsWith("@")?h.addEventListener(m,f):queueMicrotask(f))}}}}};static plugin=(e,t)=>(o[e]=t)&&u[e]&&u[e]();static usable=(e,t=[])=>{for(let s of e)o[s]||t.push(new Promise((e=>u[s]=e)));return Promise.all(t)};static render=e=>({domNode:t,name:s})=>t[s]="function"==typeof e?e():e;static rerender=(e,t=!0)=>e.signal.onChange((t=>c.render(t)(e)),t);connectedCallback(){let e=this[this.#n("for")||"parentNode"],t=this.getRootNode(),s=this.#n("new"),a=s||this.#n("ref")||crypto.randomUUID(),o=this.#n("type"),{id:u,textContent:c}=this;(i[a]=i[a]||[]).push(t),n.use(t)[a]=e,s&&(l.use(t)[a]={signal:new h(r(c,o)),type:o,id:u});for(let t of e.getAttributeNames())this.#a(t,e);null!==this.#n("hydrate")&&(new Function(`let{hydrate,render,rerender}=customElements.get('sig-nal');hydrate('${a}',${c})`)(),c=""),this.className||this.replaceWith(c)}}customElements.define("sig-nal",c);
</script>
    <style>
      :root {
      --bg-color: #615946;
      --fg-color: #ffdcb4;
      }
      
      body {
      margin: 0;
      padding: 0;
      background-image: url(houdini.webp);
      background-size: cover;
      background-repeat: no-repeat;
      background-blend-mode: color-burn;
      background-color: var(--bg-color);
      width: 100%;
      height: 100vh;
      overflow: hidden;
      color: var(--fg-color);
      font-family: monospace;
      font-size: 24px;
      }
      
      select#language {
      position: fixed;
      top: 1em;
      right: 1em;
      outline: none;
      background: transparent;
      color: var(--fg-color);
      border-color: var(--fg-color);
      }

      h1 {
      width: 80%;
      margin: .5em auto 0 auto;
      text-align: center;
      font-size: 3em;
      }

      h5 {
      margin: 5em auto 0 auto;
      text-align: center;
      font-size: .5em;
      }

      img {
      height: 80%;
      display: block;
      margin: 1em auto;
      }

      ul, ol {
      display: flex;
      flex-direction: column;
      margin-left: 3em;
      font-size: 2em;
      }

      li {
      color: #b571f4;
      margin-bottom: 1em
      }

      li:first-child {
      margin-top: 1em
      }

      blockquote p {
      margin: 1em auto;
      width: fit-content;
      font-size: 1.5em
      }

      pre {
      font-size: .5em;
      margin: 0;
      width: fit-content;
      transform: translateY(-3em);
      }

      em {
      color: var(--fg-color);
      font-style: normal;
      hyphens: auto
      }

      .tag {
      color: #f08d49
      }
      
      :root {
      --li-color: #b571f4;
      }
      
      li {
      color: var(--li-color)
      }

    </style>
  </head>
  <body onkeydown="let offset=(event.keyCode===32||event.keyCode===39)?1:event.keyCode===37?-1:0;if(!offset)return;let p=location.pathname;let prefix=p.slice(0,p.lastIndexOf('/')+1);let nr=(p.replace(/\D/g,'')|0)+offset;if(nr<0||nr>35)return;location.pathname=`${prefix}slide-${nr}.html`">
    <script>if(location.search)document.body.style.fontSize=location.search.replace(/\D/g,'')+'px';if(location.hash)document.documentElement.style.setProperty('--li-color',location.hash.slice(1).replace(/\+/g,' '));</script>
<select aria-label="select language" id="language" onchange="document.documentElement.setAttribute('lang', this.value)">
      <option selected value="en">EN</option>
      <option value="de">DE</option>
    </select>

    <scri-pt when="idle">
      <template>
	<script type="module" src="./src/trans-late.js"></script>
	<link rel="stylesheet" href="./styles.css"/>
      </template>
    </scri-pt>

    <h1>5. Server-Side Rendering</h1>
    <blockquote>
      <p>&bdquo;interactivity + signals needed!&rdquo;</p>
    </blockquote>
    <ul>
      <li>sprinkle bits of <em>interactivity</em> on components</li>
      <li><em>signals</em>: fine-grained reactive DOM updates</li>
      <li><div>
	  <template shadowrootmode="open">
	    <style>
	      .btn {
	      display: inline-block;
	      box-shadow: 0px 0px 3px 3px var(--fg-color);
	      padding: 2px;
	      cursor: pointer;
	      }

	      .btn:hover {
	      transform: scale(1.1)
	      }
	      
	      .table {
	      display: table;
	      margin-top: 1em;
	      }

	      .table p {
	      display: table-row
	      }
	      .table span {
	      display: table-cell;
	      padding: .1em;
	      text-align: center;
	      border: 1px solid #ddd;
	      }

	    </style>

	    signal value <i class="val"><sig-nal new="counter">3</sig-nal></i> &rarr; <i class="val btn" @click="counter"><sig-nal ref="four">4</sig-nal></i> &rarr; <i class="val btn" @click="counter"><sig-nal ref="five">5</sig-nal></i>: subscribers update
	    <div class="table">
	      <p>
		<span>subscriber 1</span><span>subscriber 2</span>
	      </p>
	      <p>
		<span .textContent="counter" style="color:green"><sig-nal ref="subscriber1">3</sig-nal></span><span .textContent="counter"  style="color:red"><sig-nal ref="subscriber2">3</sig-nal></span>
	      </p>
	      <sig-nal hydrate>
		{ subscriber1: {".textContent": rerender},
		  subscriber2: {".textContent": rerender},
		  four: {"@click": ({signal}) => (signal.value = '4')},
		  five: {"@click": ({signal}) => (signal.value = '5')}
		}
	      </sig-nal>
	    </div>
	  </template>
	</div>
      </li>
    </ul>
  </body>
</html>