Svelte를 사용하여 웹 구성 요소를 개발 중입니다.

계속저번 어느 정도의 목적으로 Svelte로 웹 구성 요소를 개발하려고 시도합니다.이렇게 하면 Svelte를 이해할 수 없는 부분이 많이 떠오르기 때문에 눈에 띄는 것들을 적어보고 싶어요.

개발해 본 것

화면 구석에 창을 표시하고 링크와 입력에 따라 응답을 되돌려주는 채팅창입니다.

조회의 종류는 나무 모양으로 체인에 시추된 후 해당하는 QA를 나타낸다.

자유자로 입력하면 연관된 QA가 표시됩니다.

이런 인상이지만 도대체 Svelt를 배우기 위해 UI 부분이 그렇게 움직일 수 있도록 하기 위해서였다고 한다.
또 만든 소스가 여기.에 올라왔다.

뻔한 일

웹 구성 요소에는 Shadow DOM이 사용됩니다.

원래 나는 웹 구성 요소의 일부 규격이 Shadow Dom이라는 것을 몰랐다.우연히 개발자 도구로 봤어요.

Shadow Dom의 존재를 알게 되었습니다.
그러나 조사 결과Stncil, LitElement 등 다른 프레임에서 Shadow DOM을 사용하거나 전환할 수 있습니다. Svelte는 현재 섀도우 돔 사용 방식만 제공하고 있었다.여기.에서 논의가 있었던 것 같다.)
왜 Shadow Dom 방식을 사용하지 않는 것도 필요할까요? 외부에서 웹 구성 요소의 스타일을 조정하고 싶은 경우도 있기 때문입니다.예를 들어 이번엔 챗봇 색깔을 밖으로 바꾸고 싶어요.

파트 속성을 통해 외부에서 스타일 조정을 할 수 있습니다. (그러나 VS 코드에서 오류가 발생하기 때문에 issue를 들었습니다.)

참고로 이 목표를 비슷한 형식으로 실현하는 메커니즘으로서 웹 구성 요소의 경우 라벨에 파트 속성으로 이름을 정의하고 외부에서 CSS의: 파트 위조 요소로 스타일 조정을 한다.아직초안은 아니지만 주요 브라우저가 대응하는 것 같습니다.
svelte 파일 (일부)

<div part="header">
  <div part="title">{title}</div>
  <button on:click={onToggleOpen} part="toggle">
  </button>
</div>

외부 css

chat-frame::part(header) {
  display: flex;
}
chat-frame::part(title) {
  margin: 1px 10px;
  flex: 1 1 auto
}

이렇게 하면 Svelte를 잘 구축할 수 있고 외부의 스타일도 조절할 수 있는데 왜 VS 코드에 있는 걸까요?

Type '{ part: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'part' does not exist on type 'HTMLProps<HTMLDivElement>'.

의 오류입니다.Svelte for VS Code v102.7.0 내부에서 사용하는 svelte2tsx (버전 0.11.151) 에서 HTML 탭 속성을 정의하는 인터페이스에 파트가 존재하지 않기 때문입니다.
어렵게 이유를 알아봤는데 영어 실력은 형편없지만 용기를 내세요issue를 드리면 한 시간 정도 걸려서 수정이 됐어요.!이렇게 활기찬 OSS구나.
마스터 지점에 반응이 있어서 조만간 발매될 것 같아요.
[2012/12업데이트] Svelte for VS Code v102.8.0 발행.

동적 호출 구성 요소의 함수는 약간의 시간이 필요하다.

컨설팅 클래스는 json 파일 외에 이런 느낌을 준다.

{
  "message": "お問い合わせありがとう！<br/>今日はどんなご用件ですか？<br/>以下から選択するか、直接入力してね。<br/>1. {{ガンダム}}<br/>2. {{イデオン}}<br/>3. {{ザブングル}}",
  "nodes": [
    {
      "id": "ガンダム",
      "message": "ガンダムだね？<br/>1. {{地球連邦}}<br/>2. {{ジオン公国}}"
    },
    {
      "id": "イデオン",
      "message": "イデオンだね？<br/>1. {{地球}}<br/>2. {{バッフクラン}}"
    },

상위 객체의 메시지 중 {...}하위 대상의 ID를 가리키며 클릭한 후 웹 구성 요소를 호출하는 onSelectScennarioNode 함수로 변환하는 링크

// scenarioは変換対象のjsonオブジェクト
function convertScenario(scenario: ScenarioNode, parentPath: string = '') {
  let currentPath: string = // parentPathとscenario.id結合してパスを生成
  [...scenario.message.matchAll(/\{\{(.+?)\}\}/g)]
    .forEach(match => {
      let childId = match[1];
      let childNodePath = `${currentPath}/${childId}`;
      scenario.message = scenario.message.replace(`{{${childId}}}`, `<a href="javascript:void(0);" onClick="onSelectScenarioNode('${childNodePath}')">${childId}</a>`)
    })
  // 変換後の文字列を格納
  scenarioMap[currentPath] = scenario.message;
  // 子オブジェクトを再帰処理
  scenario.nodes?.forEach(node => convertScenario(node, currentPath))
}

function onSelectScenarioNode(nodePath: string) {
  // 指定パスの文字列を、messages配列に追加。
  messages = [...messages, { text: scenarioMap[nodePath]}]
}

이 문자열 {@html...}에 나열됩니다.

<script lang="ts">
  let  messages: ChatMessage[];
  $: messages = [];
  let scenarioMap: {[key: string]: string} = {};

  onMount(async () => {
    const res = await fetch(scenariourl);
    let scenario = await res.json();
    // jsonオブジェクトの変換
    convertScenario(scenario);
    // ルートのカテゴリ選択肢を表示
    messages = [ { text: scenarioMap['']} ]
  });

  // 中略
</script>

<div part="body">
  {#each messages as msg}
    <div>
      {@html msg.text}
    </div>
  {/each}
</div>

실제로 클릭하면 함수를 찾을 수 없습니다.그렇죠.

해결 방안을 조사하는 과정에서 신속창 객체에 함수 등록 해결 방법이 있는데 실제 조작은 좋지만 웹 구성 요소가 전 세계 공간을 오염시켰기 때문에 망설인다.
최종적으로 데이터를 문자와 링크로 나누어 Svelte의 세계로 들어간다를 참고하십시오.

<div part="body">
  {#each messages as msg}
    <div>
      {#each msg.nodes as msgNode}
        {#if msgNode.link}
          <!-- svelte-ignore a11y-invalid-attribute -->
          <a href="javascript:void(0)" on:click={() => onSelectScenarioNode(msgNode.link)}>{@html msgNode.text}</a>
        {:else}
          {@html msgNode.text}
        {/if}
      {/each}
    </div>
  {/each}
</div>

<a href="javascript:void(0)" ... 그래서'A11y:'javascript:void(0)'is not a valid href attribute'가 됐어요.

대책<a href={'#'} ...에 대한 보도도 있지만, URL의 끝에 #이 붙어 있는 웹 구성 요소는 어떻습니까?이렇게 생각하면↑도 있지만 a라벨 앞에서는쓰기 및 억제

Type Script는 HTML 코드 섹션에서 할당할 수 없습니다.

<a ... on:click={() => onSelectScenarioNode(msgNode.link)}> 섹션, 처음에는 msgNode 유형

interface MessageNode {
  type: string = 'text' | 'link';
  text: string;
}

interface LinkMessageNode extends MessageNode {
  link?: string;
}

이렇게 type을 계승하면 링크라면 <a ... on:click={() => onSelectScenarioNode(msgNode.link)}> 논리가 생성됩니다

있는 그대로Property 'link' does not exist on type 'MessageNode'.ts(2339).

<a ... on:click={() => onSelectScenarioNode((msgNode as LinkMessageNode).link)}>는 Svelte의 빌딩ParseError: Unexpected token이다.

나는 msgNode를MessageNode에서LinkMessageNode까지 어떻게 해야 할지 모르겠다.
어쨌든 성우는 포기하고 인터페이스를 수정했다.

interface MessageNode {
  text: string;
  link?: string;
}

브라우저에서 디버깅하고 싶은데 줄 번호가 이상해요.

알려진 문제.

총결산

좋지 않은 곳을 열거한 전형적인 일본인의 내용이지만 스벨트에 대한 기대감이 높아지고 있는데, 이런 사례를 공유함으로써 스벨트에 도전하는 데 도움이 됐으면 좋겠다고 생각한다.