# Brainstorming on `$`

import {component$} from '@builder.io/qwik';


function componentQRL(onMount: QRL<()=>JSX>);
function component$(onMount: ()=>JSX);


componentQRL($(()=>{
    
}))

componentWithQRL($(()=>{
    
}))

componentWith($(()=>{
    
}))

component$(()=>{})
component($(()=>{}) // Wrong ordering in IDE completion
componentFromQRL($(()=>{})
component_($(()=>{})
componentQRL($(()=>{})
componentWithQRL($(()=>{})

onRender$(--inline--)
onRenderFromQRL()

useEffect$(() => null)
useEffectFromQRL($(() => null)

                 
// Nobody should write this, a linter will complain
component($(()=>{})

// It will be more than that
componentFromQRL(stuff)



const MyComp = component$(() => {
  const useMySomething($(() => ))
  return onRender$(() => {
      const handler = $(() => console.log('click'));
      return (
          <button
              on:keyup={handler}
              on:click={handler}
              on:keydown={handler}

          >
            click me
         </button>
       )
  ));
});

function useMySomethingQRL(fn: QRL<() => void>) {
  return useEffect(fn);
}

const a = $(() => {
  return onRender($(() => <button on:click={$(() => console.log('click'))}>
    click me
  </button>));
}
const MyComp = component(a);

`$` means:
- Async loading boundry => Lazy loading.
- Optimizer Magic happens here
- Argument must be either `import` or inlined.