vfunc.js

Getting started

Start with one file

Create an HTML file and load vfunc. There is no build step.

<!-- Production: exact version + 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');

As an ES module

import vf from 'vfunc';                       // npm i vfunc
import { vfunc, html, router } from 'vfunc';  // named imports work too

The ES modules never create a global window.vf. Bundlers pick the minified file without warnings for production builds (the production condition in exports).

Start from the starter

A copyable app with a router, shared state, Korean/English, themes and release tools.

npx degit vidkid-indy/vfunc/layer1/starter my-app
cd my-app
python -m http.server 8080
PathWhat
app.jsmessages, layout, router, update plugin — one route per new screen
pages/*.jsone (ctx, router) => component function per screen
store.js · api.jsshared state and the functions that change it · every server call
locales/{en,ko}.jsonmessages
styles/tokens.cssdesign tokens (derived from design/DESIGN.md)
AGENTS.mdrules read by AI tools (fill in section 0)
tools/release.mjs, deploy/version-folder releases and server cache settings