Svelte рекурсивно создает древовидную структуру из неизвестного объекта

Я кодирую какую-то примитивную CMS только для редактирования, обновления и добавления новых строк приложения. все строки хранятся в базе данных, и каждая из них имеет специальный ключ (представляющий структуру папок проекта "shared.atoms.copie...") для ссылки из исходного кода в базу данных. материал для редактирования и т. д. уже закодирован, но теперь мне нужно предоставить пользователю какую-то навигацию и возможность увидеть предварительный просмотр редактируемой страницы, щелкнув (например) узел навигации

для этого я хочу построить древовидное представление уже созданного из всех ключей объекта, который выглядит следующим образом:

tree: {
  common: {
    date: [{
      lang: "en", 
      key: "common.date", 
      version: 1, 
      value: "Date"
    },
    block: {
      lang: "en", 
      key: "common.block", 
      version: 3, 
      value: "Block"
    }]
  },
  shared: {
    atoms: {
      copyClipboard: {
        copiedToClipboard: [{
           lang: "en", 
           key: "shared.atoms.copyClipboard.copiedToClipboad", 
           version: 3, 
           value: "Copied to Clipboard!"
        }]
      }
    }
  }
}

в javascript я получил это решение, которое дает мне дерево, когда я использую {@html htmlTree}:

function buildHtmlTree(treeNode) {
  let objKeys = Object.keys(treeNode);
  if (objKeys.length == 0) {
    return;
  }
  for (let key of objKeys) {
    let currentNode = treeNode[key];
    htmlTree += `
      <ul class = "ml-2 mb-4">
        <span>
          ${key}
        </span>
      `;
    if (Array.isArray(currentNode)) {
      // is leaf
      for (let currentLanguage of currentNode) {
        htmlTree += `
          <li class = "ml-2">
            ${currentLanguage.lang}: ${currentLanguage.value}
          </li>
          `;
      }
    } else {
      // is branch
      buildHtmlTree(currentNode);
    }
    htmlTree += `</ul>`;
  }
}

buildHtmlTree(tree);

теперь я пытаюсь сделать это стройным, но я застрял на этом... я думаю, что только что сделал бесконечный цикл.

<script>
  let svelteTree = Object.keys(tree);
</script>

<section>
  {#each svelteTree as key}
    <ul class = "ml-2 mb-4">
      <span>{key}</span>
      {#if Array.isArray(svelteTree[key])}
        {#each svelteTree[key] as currentLanguageSvelte}
          {currentLanguageSvelte.lang}: {currentLanguageSvelte.value}
        {/each}
      {:else}
        <svelte:self svelteTree = {svelteTree[key]} />
      {/if}
    </ul>
  {/each}
</section>