SumitBando/AlpineToSvelte.md

## AlpineToSvelte.md

      
    Raw
  

              AlpineToSvelte.md
            
          
      Original AlpineJS
      Svelte Translation
      Explanation
    
  
<div x-data="{ open: false }"

      
<script> let open = false </script>

      
      x-data marks the HTML element as a component and introduces a new reactive data for this element and children.
Svelte only supports file level reactive data, which must be declared in the <script/> block

    
x-text="username"

      
        {username}
        
      
        @click="open = !open"
 
       
      on:click={() => open = !open}
      
    
      <div x-show="open"
      {#if open} <div … {/if}
      
    
      :class="{'flex': open, 'hidden': !open}"
      class="{open ? 'flex': 'hidden'}
      
    
       <svg ..>
 <path x-show="!open" … />
 <path x-show="open" … />
</svg>


        <svg ..>
        {#if open}
        <path … />
        {:else}
        <path … />
        {/if}
        </svg>
      
      
        This could also be done by adding class hidden to the path which is to be suppressed class:open={} etc
      
    
      @click.away="open = false"

      In v3, renamed to
      @click.outside 
      
      
        <script>
function clickOutside(node) {  
  const handleClick = event => {
  if (node && !node.contains(event.target) && !event.defaultPrevented) {
    node.dispatchEvent(
    new CustomEvent('click_outside', node))
    }
  }
  document.addEventListener('click', handleClick, true);
  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
    }
  }
}
</script>
use:clickOutside on:click_outside={()=>open = false}
        
      
      Svelte does not provide a way to check for clicks outside the component. This code to check for click outside the component is from the REPL at https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7
Original AlpineJS	Svelte Translation	Explanation
<div x-data="{ open: false }"	<script> let open = false </script>	x-data marks the HTML element as a component and introduces a new reactive data for this element and children. Svelte only supports file level reactive data, which must be declared in the <script/> block
x-text="username"	{username}
@click="open = !open"	on:click={() => open = !open}
<div x-show="open"	{#if open} <div … {/if}
:class="{'flex': open, 'hidden': !open}"	class="{open ? 'flex': 'hidden'}
<svg ..> <path x-show="!open" … /> <path x-show="open" … /> </svg>	<svg ..> {#if open} <path … /> {:else} <path … /> {/if} </svg>	This could also be done by adding class hidden to the path which is to be suppressed class:open={} etc
@click.away="open = false" In v3, renamed to @click.outside	<script> function clickOutside(node) { const handleClick = event => { if (node && !node.contains(event.target) && !event.defaultPrevented) { node.dispatchEvent( new CustomEvent('click_outside', node)) } } document.addEventListener('click', handleClick, true); return { destroy() { document.removeEventListener('click', handleClick, true); } } } </script> use:clickOutside on:click_outside={()=>open = false}	Svelte does not provide a way to check for clicks outside the component. This code to check for click outside the component is from the REPL at https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7