svelte note

프론트엔드 서버를 운용하기위한 도구

https://kit.svelte.dev/docs/adapters

호스트, 포트번호같은 서버환경에 대한 도구에 관한 문서다.
노드서버를 확장시킬 수 있어 보인다. (그냥 sveltekit에서는 소스속에서 사용하는것 같아 보이지만..)

비동기 다이나믹 컴포넌트 구현하기

간단히 해시 라우트를 통하여 탭을 만들고, 주소를 이동하면 자식 컴포넌트를 바꿔주는 부분이 필요하여 만들게 되었다.
이동하는 주소 목록은 다음과 같다.

• /#/guide
• /#/guide/buttons
• /#/guide/form-elements
• /#/guide/icon

<!-- guide.svelte -->

<article>
  <h1><a href="/#">HOME</a> / Guide page</h1>
  <Tabs/>
  {#await component}
    <p>...waiting</p>
  {:then comp}
    <svelte:component this={comp}/>
  {:catch err}
    <p>Error page</p>
  {/await}
</article>

<script lang="ts">
import Tabs from './tabs/index.svelte'

let hashArray: string[]
let component: any
const subPages = [
  { type: 'home', component: () => import('./home.svelte') },
  { type: 'icons', component: () => import('./icons.svelte') },
  { type: 'buttons', component: () => import('./buttons.svelte') },
  { type: 'form-elements', component: () => import('./form-elements.svelte') },
]

async function render(route: string)
{
  const selectedRoute = subPages.find(o => o.type === route)
  return (await selectedRoute.component() as any).default
}

hashArray = location.hash ? location.hash.replace(/^#\//, '').split('/') : [ 'guide', 'home' ]
component = render(hashArray[1] || 'home')
</script>

이렇게 기초적인 구성정도만 작성해둔다. 출처는 이곳저곳..

import를 함수 형식으로 사용하기

다이나믹 컴포넌트를 사용하는 방법중에 하나

<svelte:component this="{Chatbox}" />

<script>
let Chatbox;

function loadChatbox() {
  import('./ChatBox.svelte').then(res => Chatbox = res.default)
}
</script>

스타일시트 :global 사용하기

svelte 기본은 scoped를 기본으로 사용하고 있다. 글로벌로 사용하려면 :global(body) {}같은 모습으로 선택자를 만들어야 한다.
요즘은 일반 css에서 nesting을 사용할때 글로벌에서 같이 사용하려면 다음과 같이 사용할 수 있다.

:global(:root) {
  & :global(body) {
    background: white;
  }
}
:global(:root[data-theme=dark]) {
  & :global(body) {
    background: black;
  }
}
@media (prefers-color-scheme: dark) {
  :global(:root:not([data-theme=light])) {
    & :global(body) {
      background: black;
    }
  }
}

다크모드에 관한 셀렉터의 구조다.

특정 변수가 업데이트될때마다 함수실행하기

$: c, console.log('yes')

이런 모습으로 사용할 수 있다. 마치 vue의 watch같이..

출처: https://stackoverflow.com/a/56987526

slot을 빈 엘리먼트로 사용하고 싶을때..

vue에서 <template #name><span>text</span><em>123</em></template> 와 같이 특정 엘리먼트로 감싸지 않고 내용물만 사용하고 싶을때가 많다.
이전까지 찾아보고 안되는줄 알았는데 잘 찾아보니 <svelte:fragment/>를 사용하는 방법이 있었다.

<Comp>
  <h1 slot="header">Hello</h1>
  <svelte:fragment slot="footer">
    <p>text line</p>
    <p>text line</p>
  </svelte:fragment>
</Comp>

출처: https://svelte.dev/docs/special-elements#svelte-fragment