편집기를 지원하는 API인 HAXSchema 이해

동료에게 HAX의 작동 방식을 알려 주면서 저는 처음 이 아이디어를 개발하고 설명하기 시작한 지 4년 동안 요소를 강화하기 위한 기본 API가 실제로 변경되지 않았다는 것을 깨달았습니다. A talk from 2018은 거인의 API를 기반으로 구축하는 힘에 다시 초점을 맞췄습니다. 또는 우리의 경우 JSON Schema .

HAXSchema HAX의 "구성"및 "고급"양식 영역에 대한 의 속성 선언은 이 추상화를 기반으로 합니다. 각 튜플에 대해 다음과 같이 가장 간단한 형태로 나뉩니다.

{
  "property": "source",
  "title": "Source",
  "description": "The URL for this video.",
  "inputMethod": "textfield"
}

HAXSchema는 attribute , property 또는 slot라는 단어를 튜플의 속성으로 사용하여 inputMethod가 작동할 소품, 속성 또는 슬롯을 HAX 편집기에 선언할 수 있습니다. 사용할 수 있는 유효한 inputMethod 가 많이 있지만 가장 일반적인 것은 다음과 같습니다.

텍스트 필드(텍스트)

선택(options: {} 공급 필요)

부울(확인란)

코드 편집기(전체 VSCode 인스턴스)

alt(제안이 포함된 대체 텍스트 유효성 검사 입력)

숫자(숫자 입력)

datepicker(날짜 선택기)

colorpicker(간단한 색상 선택기)

fileupload(파일 업로드)

iconpicker(간단한 아이콘을 기반으로 한 아이콘 선택기)

또한 위의 입력을 제공하려는 모든 입력을 지원합니다. DOM을 검사할 때 우리는 단순히 <input type="checkbox">를 렌더링하는 것이 아니라 <simple-fields-field type="checkbox">를 렌더링한다는 점에 유의해야 합니다. 이는 아래의 JSON 스키마를 사용하여 HAXSchema가 inputMethod 응답을 제공하는 한 요소에 value-changed 매핑할 수 있기 때문입니다.

레코드 스크래치 도트 gif

기다리다. 입력뿐만 아니라 ... "요소"? <input> 요소가 다른 웹 요소처럼 작동하여 hax의 모든 항목에 연결할 수 있었습니다. 😮
사실상.. value-changed CustomEvent를 제공하는 모든 것이 JSON 스키마의 이 추상화를 사용하여 HAX와 통신할 수 있습니다.

a11y-gif-플레이어

gif 플레이어가 다른 웹 구성 요소를 사용하여 파일 업로드를 허용하는 입력 양식을 생성하는 방법을 살펴보겠습니다.



이 웹 구성 요소에는 업로드 양식에 대한 다음 스키마가 있습니다.

{
  "property": "src",
  "title": "Animated GIF",
  "description": "The URL to your animated GIF.",
  "inputMethod": "haxupload",
  "icon": "link",
  "validationType": "url",
  "required": true
}

이것은 속성src을 가져온 다음 "haxupload"에 연결합니다. "haxupload"inputMethod는 다음 양식 입력 요소에 매핑하기 위해 JSON 스키마 추상화에 의해 정의됩니다.

DOM 트리는 다음과 같습니다.
hax-upload-field가 value-changed의 이벤트를 출력할 수 있고 기본 표준 JSON 스키마가 있기 때문에 HAX에 효과적으로 연결할 수 있습니다.

평생 동안의 추상화

3년 전 우리가 a11y-gif-player 를 보여주는 강연을 했을 때 태그는 "textfield"에 연결되었습니다. 당시에는 hax-upload-field가 존재하지 않았습니다. 위의 스크린샷은 haxupload inputMethod에 대한 호출을 사용 가능한 양식 입력으로 변환하는 방법을 보여줍니다. 이제 이 변환 계층을 통해 HAXSchema의 추상화에서 hax 또는 기타 모든 형식을 빌드할 수 있습니다. 이것은 실제로 simple-fields이라는 독립 실행형 프로젝트이며 단순하지 않습니다(simple- 네임스페이스의 경우와 같이 최종 사용자가 간단하게 만들 수 있습니다.

요점은 a11y-gif-player의 디자인 자산이 변경되지 않았다는 것입니다. 디자인은 HAX의 반복과 관계없이 4년 동안 동일했습니다. HAXSchema를 사용하여 디자인을 편집기에 느슨하게 결합함으로써 디자인 자산이 수년 동안 생산에 사용되는 동안 편집 경험을 점진적으로 향상시킬 수 있었습니다.

HAX가 살아 있고 지속 가능한 애플리케이션이라고 생각하는 이유 중 하나입니다. 그것이 생산하는 것들은 그것과 함께 또는 그것 없이 작동하는 형식으로 보존됩니다. 양식을 구축하기 위한 API이며 기능은 이를 구현하는 "벽돌"에 구애받지 않고 진화할 수 있습니다.

프로젝트에 사용할 더 많은 hax 유선 블록을 찾고 계십니까? 다음은 tag we ship with our NPM packages 입니다. 행복한 건물!