vfunc.js

시작하기

파일 하나로 시작하기

HTML 파일을 하나 만들고 vfunc를 불러옵니다. 빌드 단계는 없습니다.

<!-- 운영: 정확한 버전 + SRI -->
<script src="https://cdn.jsdelivr.net/npm/vfunc@1.2.0/dist/vfunc.min.js"
        integrity="sha384-yTR0o8US3nk+D1XIBAsv1O/lMFA5tV3V021xPo8yxyqnBNSxi1rqINVvBOykAEkK"
        crossorigin="anonymous"></script>

<!-- IE11 / Edge IE mode -->
<script nomodule src="https://cdn.jsdelivr.net/npm/vfunc@1.2.0/dist/vfunc.legacy.min.js"
        integrity="sha384-C9OzCaS/HB5/07dcKyjjbr4IKr2mYTp7X2yaKG5cc9GL3H+fbU7BI6Kdu9Q/U90O"
        crossorigin="anonymous"></script>
npm i vfunc@1.2.0

import vf from 'vfunc';
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vfunc@1.2.0/dist/vfunc.js"></script>
<script src="./app.js"></script>
// app.js
const hello = vf.vfunc({
  state: { name: 'vfunc' },
  render: (s) => vf.html`
    <p>Hello, <strong>${s.name}</strong>!</p>
    <input id="name" value="${s.name}" data-action="rename">`,
  delegates: [{ selector: '[data-action="rename"]', eventType: 'input',
                onEvent: (e) => { e.sender.name = e.target.value; } }]
});
hello.mount('#app');

ES 모듈로 쓰기

import vf from 'vfunc';                       // npm i vfunc
import { vfunc, html, router } from 'vfunc';  // 이름으로도 가져올 수 있습니다

ES 모듈은 전역 window.vf를 만들지 않습니다. 번들러의 운영 빌드는 경고가 없는 min 파일을 자동으로 고릅니다(exports의 production 조건).

스타터로 시작하기

라우터, 공용 상태, 한국어/영어, 테마, 배포 도구까지 갖춘 앱 골격입니다.

npx degit vidkid-indy/vfunc/layer1/starter my-app
cd my-app
python -m http.server 8080
경로내용
app.js메시지, 레이아웃, 라우터, update 플러그인. 새 화면은 여기에 라우트 한 줄
pages/*.js화면마다 (ctx, router) => component 함수 하나
store.js · api.js공용 상태와 변경 함수 · 모든 서버 호출
locales/{en,ko}.json메시지
styles/tokens.css디자인 토큰(design/DESIGN.md에서 파생)
AGENTS.mdAI 도구가 읽는 규칙(0절을 채우세요)
tools/release.mjs, deploy/버전 폴더 배포와 서버 캐시 설정

다음으로 읽을 것