Constela: 내장된 a11y 검사, 플러그인 시스템 & CSS 전환

Source: Dev.to

위 링크에 있는 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)

Source: …

Constela의 새로운 기능

Constela는 JSON 기반 선언형 UI 프레임워크입니다 — UI 전체를 JSON으로 작성하면 컴파일러 + 런타임이 나머지를 처리합니다. 우리는 Constela 앱을 더 접근성 높고, 확장 가능하며, 다듬어진 형태로 만들 세 가지 기능을 제공하고 있습니다.

1. 컴파일‑타임 접근성 검사

접근성은 사후에 고려해서는 안 됩니다. Constela는 이제 JSON 프로그램에서 흔히 발생하는 a11y 문제를 컴파일 시점에 검사하고 경고로 보고합니다.

내장 규칙

이들은 경고이며 오류가 아니므로 코드는 계속 컴파일됩니다. 따라서 점진적으로 적용할 수 있습니다.

const result = compile(myProgram);
if (result.ok && result.warnings?.length) {
  result.warnings.forEach(w => console.warn(`[${w.code}] ${w.message}`));
}

2. 플러그인 시스템

JSON DSL에서 사용자 정의 함수를 사용하고 싶나요? 이제 가능합니다.

플러그인 정의

import type { ConstelaPlugin } from '@constela/core';

const myPlugin: ConstelaPlugin = {
  name: 'my-analytics',
  version: '1.0.0',
  globalFunctions: {
    trackEvent: (category: string, action: string) => { /* ... */ },
    formatCurrency: (amount: number) => `$${amount.toFixed(2)}`,
  },
};

export default myPlugin;

플러그인 등록

constela.config.json에 추가합니다:

{
  "plugins": ["my-analytics", "./src/plugins/local-plugin"]
}

이것으로 끝 — 이제 DSL에서 함수들을 사용할 수 있습니다.

안전 기능

• 원자적 등록 (전부 혹은 전무)
• 프로토타입 오염 방지 (__proto__, constructor, prototype 차단)
• 클라이언트와 서버 렌더링 모두에서 동작

3. CSS 클래스 기반 전환 효과

조건부 렌더링(if 노드)이 이제 부드러운 입·출력 애니메이션을 지원합니다.

예시 JSON

{
  "kind": "if",
  "condition": { "expr": "state", "name": "showToast" },
  "then": {
    "kind": "element",
    "tag": "div",
    "children": [
      { "kind": "text", "value": { "expr": "lit", "value": "Saved!" } }
    ]
  },
  "transition": {
    "enter": "slide-in",
    "enterActive": "slide-in-active",
    "exit": "slide-out",
    "exitActive": "slide-out-active",
    "duration": 250
  }
}

대응 CSS

.slide-in { transform: translateY(-20px); opacity: 0; }
.slide-in-active { transition: all 250ms ease; transform: translateY(0); opacity: 1; }
.slide-out { transform: translateY(0); opacity: 1; }
.slide-out-active { transition: all 250ms ease; transform: translateY(-20px); opacity: 0; }

런타임이 처리하는 흐름:

• 입력 흐름: 요소 생성 → enter 적용 → 다음 프레임: enterActive 로 교체 → 정리
• 출력 흐름: exit 적용 → 다음 프레임: exitActive 로 교체 → 요소 제거
• 빠른 토글링: 진행 중인 애니메이션을 우아하게 취소
• SSR: 서버 측에서는 전환 효과를 무시 (별도 변경 필요 없음)

사용해 보기

npm install @constela/core @constela/compiler @constela/runtime @constela/start
npx constela dev

전체 DSL 레퍼런스를 보려면 Language Specification을 확인하고, 이 기능들을 실제로 확인하려면 Examples를 살펴보세요.

링크

• GitHub
• Documentation
• Examples