DevinimJS Docs — AI-first API ve sözleşmeler

01 · Kurulum

Tek bir pinned import

Sunum için CKCSS, etkileşim için DevinimJS yüklenir. Runtime kullanıcının npm veya Node.js kurmasını gerektirmez.

<script type="module" src="https://cdn.jsdelivr.net/gh/kayacuneyd/devinimjs@v0.5.1/dist/modules/dv-tabs.js"></script>
<dv-tabs data-label="Hesap ayarları">...</dv-tabs>

02 · Sözleşme

Build-free uyumluluk

Runtime

Runtime dependency yoktur. Native ES modules modern browser’da doğrudan çalışır.

Distribution

dist/ optimizasyondur; source modüller de browser giriş noktasıdır.

Yeni özellik önce build-free source runtime’da çalışır. Compile-time template analizi, zorunlu bundler veya server runtime yoktur.

03 · Varsayılan yazım yolu

Bir component nesnesi. Compiler yok.

component ve html import edilir; typed props, local state, gerekirse canlı sync, actions ve tek view tanımlanır. .dv.js sıradan browser JavaScript’idir.

Aynı API’yi çalıştırmak için butona tıkla.

Shared hosting uyumlu

authoring.min.js ve .dv.js dosyanı static hosta kopyalaman yeterli. Node process, compilation veya server runtime yoktur.

import { component, html } from '/assets/authoring.min.js';

component('acme-counter', {
  props: { start: 0, step: 1 },
  state() { return { count: this.props.start }; },
  sync: { start(value) { this.state.count = value; } },
  actions: { increment() { this.state.count += this.props.step; } },
  view() { return html`<button on:click="increment">${this.state.count}</button>`; },
});

Pratik kural: Normal componentlerde bu yolu kullan. BaseComponent sadece ileri child capture, lifecycle orkestrasyonu veya özel store ihtiyacında escape hatch’tir.

04 · İleri

Core API

Public core primitives
API	Amaç	Agent kuralı
`component`	Kısa component factory.	Yeni componentte önce bunu kullan.
`BaseComponent`	Proxy-reactive custom-element tabanı.	Yalnızca ileri escape hatch.
`html`	Escaping template tag.	`view()` veya `template()` içinden döndür.
`createStore`	Paylaşılan state/subscription.	Sahipliği page/application’da tut.
`unsafe`	Açık raw HTML sınırı.	Sadece bağımsız sanitize edilmiş HTML.

05 · Application runtime

Zengin sayfalar için opt-in araçlar

Async data, JSON request, form veya hash route gereken sayfalarda app.min.js import edilir. Request ve persistence page/application kodunda kalır; componentler attribute alır ve anlamlı dv:* event yayınlar.

06 · Components

Component sözleşmesi

Yapılandırma data-*, dış iletişim bubbling dv:* CustomEvent’tir. Foundation, forms, discovery, data, commerce, feedback ve state componentlerinin tamamı canlı katalogda ve manifestte yer alır.

07 · Erişilebilirlik

Native davranış tabandır

Native control’leri tercih et. Interactive componentler keyboard, focus, label, role ve live-region davranışlarını tanımlamalıdır. Yayın öncesi npm run verify çalıştır.

08 · Güvenlik

Varsayılan olarak escaped

Template interpolation değerleri escape eder. unsafe() yalnızca bağımsız biçimde sanitize edilmiş HTML ile kullanılmalıdır.

09 · AI agents

Ajanlara güvenilir bir yol ver

Önce llms.txt, sonra llms-full.txt ve component manifest okunmalıdır.

Golden path

npm run create:component -- acme-card --format=dv ile başla. Dış değerleri props içine koy, on:event kullan, unit test ve manifest kaydını ekle; sonra npm run validate:component -- acme-card çalıştır.

Küçük API’ler. Açık sözleşmeler.