플러그인 만들기

런타임에 무엇을 더하는 길은 plugin() 하나입니다. 확장도 플러그인이고, 기본으로 제공하는 것도 이 길로 만들어져 있습니다.

확장은 플러그인 함수 하나입니다. 받는 도구로 이름 · 속성 · 컴포넌트 · 내려 줄 값을 올립니다. 아래는 가격을 찍는 도구와 속성을 하나씩 더하는 확장입니다.

받는 도구

플러그인 함수는 아래 도구를 받습니다. 시작 전에 부르면 모아 두었다가 시작할 때, 시작 뒤면 바로 돕니다.

define

모든 스코프의 식에서 쓰는 이름을 올립니다. 상태가 아니라 도구입니다. 런타임의 이름($scope 등)은 덮지 못합니다.

defineScoped

h-scope 마다 만들어지는 이름을 올립니다. 읽을 때 그 스코프의 손잡이(host.el)를 받아 값을 만듭니다. 스코프 요소가 있어야 정해지는 도구에 쓰고, 시작 전에 부릅니다. 스코프마다 만들어지는 이름 →

directive

속성을 새로 만듭니다. directive('focus', …) 는 h-focus 가 됩니다. 돌려준 함수는 정리할 때 불립니다.

component

태그를 새로 만듭니다. props 를 받고 이벤트를 냅니다. style(또는 템플릿 안의 <style>)은 컴포넌트당 한 번 문서 head 에 들어갑니다. 기본은 가두지 않고, scoped 면 @scope (태그) 로 가둡니다 — @scope 를 모르는 브라우저에서는 가두지 않은 채로. <template h-component> 안의 <style> 도 같습니다. 템플릿의 {{ }} 도 h-text-inline 을 붙인 요소에서만 읽고, 컴포넌트 태그에 붙이면 슬롯으로 넘긴 글자를 읽습니다.

provide

문서 전체에 값을 내려 줍니다. 어느 스코프에서든 h-inject · $inject 로 받습니다. 같은 키가 이미 있으면 있는 것을 돌려주므로, 방문을 넘어 남습니다.

reactive · computed

코어의 반응형입니다. 확장이 자기 상태를 만들 때 씁니다. 확장 파일이 반응형 라이브러리를 따로 품으면 화면이 그 값을 따라가지 못하므로, 여기서 받은 것을 씁니다. $v 가 이렇게 만들어져 있습니다.

스코프마다 만들어지는 이름

define 으로 올린 이름은 문서 전체에 하나입니다. 스코프 요소가 있어야 정해지는 도구는 defineScoped 로 올립니다. 식에서 그 이름을 읽을 때마다, 읽은 스코프의 손잡이(host.el 이 스코프 요소)를 받아 값을 만듭니다. $tf 가 이렇게 만들어져 있습니다.

스코프의 수명에 끼어드는 도구

turbo-drive 는 아래 도구로 만들어져 있습니다. 화면을 갈아 끼우는 다른 라이브러리와 맞출 때도 같은 것을 씁니다.

도구	하는 일
`detach(선택자)`	맞는 요소는 감싼 스코프와 수명을 묶지 않습니다. 감싼 스코프가 정리돼도 남고, 문서에서 빠져도 한 박자 기다렸다가 판단합니다
`snapshot()`	살아 있는 스코프마다 살아나기 전 모습을 속성으로 달아 둡니다. 화면은 그대로입니다. 돌려받은 함수가 표시를 걷습니다
`onRevive(함수)`	표시가 붙은 죽은 복제본을 다시 살리기 직전에 불립니다. 죽은 쪽에서 새 쪽으로 옮겨 심을 것이 있으면 여기서 합니다
`onStop(함수)`	런타임이 멈출 때 불립니다. 확장이 건 리스너를 걷습니다

지킬 것

시작 전에 더합니다. defineScoped 로 올린 이름은 이미 살아난 스코프에는 닿지 않습니다. head 에서 싣거나 start() 앞에서 부릅니다.
런타임의 이름은 덮지 못합니다. $scope · $host · $refs 같은 이름을 올리면 콘솔 에러를 내고 무시합니다.
이름 앞에 $ 를 붙입니다. 스코프의 값과 헷갈리지 않고, 사용자가 같은 이름의 상태를 만들어도 부딪히지 않습니다.
코어를 품지 않습니다. 확장 파일이 hyper-scope 를 함께 묶으면 런타임이 둘이 됩니다. 받은 도구만 씁니다.