vfunc.js

확장, 플러그인, IE

확장 규칙

vfunc 소스를 고치지 않고 공개 API로 확장합니다. 그래야 vfunc를 올려도 확장이 계속 동작합니다.

수준방법
설정vf.config({ strict: true }), 메시지, 토큰
스타일토큰 파일 뒤에서 --vf-* 덮어쓰기
조합컴포넌트를 만들어 주는 함수, childs, 공식 컴포넌트를 감싼 내 컴포넌트(아래)
서드파티onMount + data-vf-keep + onDestroy, 수준 L0·L1·L2는 서드파티 통합
플러그인vf.use(plugin) → vf.ext.<이름>

내 컴포넌트

공식 컴포넌트로 내 컴포넌트를 만들 때도 layer2 규칙을 따르면 나머지 코드와 같은 모양이 됩니다. 샘플은 layer2/examples/custom-component입니다.

// shop-ui.js — vf 루트가 아닌 내 모듈
export function vsPriceTag({ amount, was, currency = 'USD' }) {
  const off = was > amount ? Math.round((1 - amount / was) * 100) : 0;
  return vf.html`<span class="price-tag">${vf.fmt.currency(amount, currency)}${
    off ? vf.vsBadge({ label: '-' + off + '%', variant: 'danger' }) : ''}</span>`;
}

플러그인 — vf.use

vf.use({
  name: 'company', version: '1.0.0', requires: '^1.0.0',
  install(vf, options) { return { toast: (message) => { /* … */ } }; }
}, { duration: 3000 });
vf.ext.company.toast('saved');

공식 플러그인 — vf.ext.update

새로고침 버튼이 없는 환경(앱 웹뷰, 키오스크, PWA, 인앱 브라우저)에서 새 배포를 반영합니다.

import vfUpdate from 'vfunc/plugins/update';     // <script>는 dist/plugins/update.min.js → 전역 vfUpdate
vf.use(vfUpdate, { url: './version.json', current: APP_VERSION, policy: 'next-navigation' });
정책동작
next-navigation(기본)다음 화면 이동 때 교체. 작업 중인 내용을 잃지 않습니다
promptonAvailable(info, apply)로 앱이 안내를 그리고, 사용자가 누르면 교체
immediate즉시 교체(보안 패치)

자세한 배포 방법은 배포와 캐시에 있습니다.

공식 플러그인 — vf.ext.shortcut

페이지 전체의 키보드 단축키입니다. 입력칸에서 누른 키는 허용하지 않으면 무시하고, IME 조합 중인 키도 무시합니다. 그래서 한글·일본어·중국어를 입력하는 동안에는 단축키가 실행되지 않습니다.

import vfShortcut from 'vfunc/plugins/shortcut';   // <script>는 dist/plugins/shortcut.min.js → 전역 vfShortcut
const keys = vf.use(vfShortcut);
const off = keys.add('mod+k', () => search.focus(), { label: '검색' });   // mod는 Apple 기기에서 ⌘, 그 밖에서는 Ctrl
keys.add('escape', closeDialog, { allowInInput: true });
keys.list();   // [{ combo: 'ctrl+k', label: '검색' }, …] 도움말 화면은 앱이 그립니다
off();         // 단축키 하나 해제. keys.destroy()는 모두 해제

같은 조합은 가장 나중에 등록한 단축키가 실행됩니다. 대화상자가 열려 있는 동안 escape를 가져갔다가 off()로 돌려줄 수 있습니다. 플러그인은 화면을 그리지 않습니다.

공식 플러그인 — vf.ext.list

키가 있는 목록입니다. 컴포넌트의 render는 안쪽을 통째로 다시 그리므로 행이 많고 몇 행만 자주 바뀌는 목록(갱신, 교환, 삭제)에서는 느립니다. 이 플러그인은 항목마다 요소 하나를 유지하고 바뀐 행만 다시 그리며, 순서가 바뀌면 요소를 옮기기만 합니다. 수치는 FAQ에 있습니다.

import vfList from 'vfunc/plugins/list';   // <script>는 dist/plugins/list.min.js → 전역 vfList
const list = vf.use(vfList);
const rows = list.create('#tbody', {       // 행의 직접 부모(tbody, ul, div…). 다른 요소를 넣지 않습니다
  key: (item) => item.id,
  render: (item) => vf.html`<tr><td>${item.name}</td><td><button type="button" data-action="remove">삭제</button></td></tr>`
});
rows.set(items);                            // 같은 키·같은 객체는 그대로, 새 객체는 그 행만 다시 그림
rows.set(rows.items().filter((x) => x.id !== id));   // 삭제: 그 행만 제거

IE11·Edge IE 모드

엔진은 하나이고 배포 파일만 다릅니다. vfunc.legacy.min.js는 ES5로 변환되고 Promise 폴리필 하나를 담습니다(gzip 약 10KB).