📘

[TEI x JavaScript] Nuxt3で意図しないWhitespaceを削除する

2022/10/25に公開

JavaScript

Nuxt 3

TEI

tech

課題

TEI/XMLファイルを読み込み、JavaScript（Vue.jsなど）で可視化を行う際、意図しないWhitespaceが入ってしまうケースがありました。

具体的には、以下のようなHTMLを書いた場合、

<template>
  <div>
    お問い合わせは
    <a href="#">こちらから</a>
    お願いします
  </div>
</template>

以下のように表示され、「お問い合わせはこちらからお願いします」と意図しないスペースが入ってしまいました。

この課題に対して、以下のリポジトリで解決策を公開してくださっていました。

ただ私の環境ではNuxt3ではうまく動作させることができなかったため、ソースコードを参考に、Nuxt3へ導入してみました。

以下、この備忘録です。

Nuxt3への導入

plugins/removeWhitespace.tsを作成します。

function isText(node: ChildNode) {
    return node.nodeType === Node.TEXT_NODE
}

function trimText(node: NodeListOf<ChildNode>) {
    Array.from(node).forEach((node) => {
        if (isText(node) && node.textContent) {
            node.textContent = node.textContent.trim()
            return
        }
        trimText(node.childNodes)
    })
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive("removeWhitespace", {
    mounted(el: HTMLElement) {
      trimText(el.childNodes)
    },
    updated(el: HTMLElement) {
      trimText(el.childNodes)
    },
  });
});

そして、pages/index.vueなどで、v-remove-whitespaceディレクティブを使用します。

<template>
  <div v-remove-whitespace>
    お問い合わせは
    <a href="#">こちらから</a>
    お願いします
  </div>
</template>

その結果、以下のように、意図しないWhitespaceを削除できました。

まとめ

ディレクティブの理解が不十分で誤っている点もあるかと思いますが、参考になりましたら幸いです。

以下、ソースコードとデモサイト（GitHub Pages）です。

ソースコード

デモサイト

なお、本題と話がそれますが、nuxt.config.tsを以下のように記述することで、baseURLを指定することができました。

export default defineNuxtConfig({
  app: {
    baseURL: "/nuxt3-removeWhitespace", // /<reponame>
  },
});

Nuxt3のSSGをGitHub Pagesで公開する際の参考になりましたら幸いです。

課題

Nuxt3への導入

まとめ

ソースコード

デモサイト

Discussion