Vue.jsとViteを活用したフロントエンドアプリケーションの漸進的な改善

import { defineCustomElement } from 'vue'

load({
  "colorme-textbox": {
    // コンポーネントとスタイルはDynamic Importしておくことでロード時に解決しない
    // (バンドル時にこのスクリプトとは分割されたスクリプトが出力されるようになる)
    component: () => import("@colorme/admin-components/ColormeTextbox.vue"),
    style: () => import("@colorme/admin-components/ColormeTextbox.css?inline"),
  },
  ...
});

const load = (componentMap: {[tagName: string]: ComponentMap}) => {
  Object.keys(componentMap).forEach(
    async (key) => {
      // 読み込む必要のあるコンポーネントを検索する
      const el = document.getElementsByTagName(key)

      if (el.length > 0) {
        const componentLoader = componentMap[key].component
        const styleLoader = componentMap[key].style
        // 必要になった時点でコンポーネントを解決する (=ビルド時にチャンク分割されたコンポーネントがここではじめてリクエストされる)
        const [component, css] = await Promise.all([componentLoader(), styleLoader()])

        // defineCustomElementはカスタム要素に注入できる `styles` プロパティを受け入れる
        // `styles` のCSSはカスタム要素内にインラインCSSとして展開される
        const el = defineCustomElement({...component.default, styles: [css.default]})
        customElements.define(key, el)
      }
    }
  )
}

<form action="https://colorme.test/path/to/submit">
  <colorme-textarea value="サンプルテキスト"></colorme-textarea>

  <!-- このボタンを押下しても colorme-textarea のvalueは送信されない -->
  <button type="submit">送信</button>
</form>

<form action="https://colorme.test/path/to/submit">
  <colorme-textarea></colorme-textarea>

  <!-- このボタンを押下しても何も起きない -->
  <colorme-button type="submit">送信</colorme-button>
</form>

import { defineCustomElement } from 'vue'
import ColormeTextarea from './Components/ColormeTextarea.vue'
import ColormeButton from './Components/ColormeButton.vue'

customElements.define(
  'colorme-textarea',
  defineCustomElement(ColormeTextarea, {
    shadowRoot: false  // Shadow DOMを利用しない
  })
)

frontends
├── side-navigation-app (ショートカット機能付きサイドナビゲーション)
│   └── package.json
├── admin-components (管理画面Vueコンポーネントライブラリ)
│   └── package.json
├── inhouse-vue-components (再利用性の高いUIコンポーネントライブラリ)
│   └── package.json
└── vue-custom-elements-proxy (カスタム要素変換層 + (後述する) ページ毎のスクリプト配信パッケージ)
    └── package.json

<script setup lang="ts">
import SideNavigation from './Components/SideNavigation.vue'
import ShortcutToggle from './Components/ShortcutToggle.vue'
import {
  useShortcut,
  shortcutStateKey,
  currentShortcutKey,
  updateShortcutKey
} from './Composables/useShortcut'
import { provide } from 'vue'
</script>

<template>
  <div>
    <SideNavigation :shortcuts="shortcutState" />
    <ShortcutToggle :current-shortcut="currentShortcut" :updator="updateShortcut"/>
  </div>
</template>

import SideNavigation from './Components/SideNavigation.vue'
import ShortcutToggle from './Components/ShortcutToggle.vue'
import {
  useShortcut,
  shortcutStateKey,
  currentShortcutKey,
  updateShortcutKey
} from './Composables/useShortcut'

const currentPage = getCurrentPage()

// ショートカット機能を提供するVueコンポーザブル
const { shortcutState, currentShortcut, updateShortcut } = useShortcut(currentPage)

customElements.define(
  'side-navigation',
  defineCustomElement(SideNavigation, {
    configureApp(app) {
      // ショートカット一覧を描画するためにショートカットの状態を提供
      // Vueのrefオブジェクトを提供することで、一覧はショートカットの登録解除によって再レンダリングされる
      app.provide(shortcutStateKey, shortcutState)
    }
  })
)

customElements.define(
  'shortcut-toggle',
  defineCustomElement(ShortcutToggle, {
    configureApp(app) {
      // ショートカット登録解除ボタンは、いま表示しているページが登録済かどうかを注入する
      app.provide(currentShortcutKey, currentShortcut)
      app.provide(updateShortcutKey, updateShortcut)
    }
  })
)

<!-- カスタム要素の配置 -->
<navigation-app-context>
  <side-navigation></side-navigation>
  <shortcut-toggle></shortcut-toggle>
</navigation-app-context>

<template>
  <div>
    <slot />
  </div>
</template>

<script setup lang="ts">
import { provide } from 'vue'
const currentPage = getCurrentPage()

// ショートカット機能を提供するVueコンポーザブル
const { shortcutState, currentShortcut, updateShortcut } = useShortcut(currentPage)

// side-navigation, shortcut-toggle が依存する状態を注入
provide(currentShortcutKey, currentShortcut)
provide(updateShortcutKey, updateShortcut)
</script>

frontends
├── side-navigation-app
├── colrome-admin-components
├── inhouse-vue-components
└── vue-custom-elements-proxy (カスタム要素変換層 + ページ毎のスクリプト配信パッケージ)
    ├── package.json
    └── src
        ├── pages
        │   └── path
        │       ├── orders (パスに対応したディレクトリ名)
        │       │   └── index.ts (ex. https://example.test/orders に対するスクリプト)
        │       ├── customers
        │       │   └── index.ts (ex. https://example.test/customers に対するスクリプト)
        │       └── shoppages
        │           └── index.ts (ex. https://example.test/shoppages に対するスクリプト)

import { readFileSync, writeFileSync } from 'fs'
import { glob } from 'glob'
import { join } from 'path'
import { build, type InlineConfig, type Manifest } from 'vite'
import vue from '@vitejs/plugin-vue'

const baseConfig = (entry: string, name: string): InlineConfig => ({
  configFile: false,
  mode: 'production',
  build: {
    outDir: `./dist/pages/paths/${name}`,
    manifest: true,
    lib: {
      entry,
      name: 'page',
      formats: ['umd']
    },
    rollupOptions: {
      output: {
        entryFileNames: '[name]-[hash].js'
      },
    }
  }
})

async function main() {
  const getEntries = async (): Promise<Record<string, string>> => {
    // (簡略化のためにパスの深さは1と仮定する)
    const files = await glob('src/pages/paths/*/index.ts')
    return files.reduce((acc: Record<string, string>, file) => {
      const name = file.split('/').slice(-2)[0]
      acc[name] = file
      return acc
    }, {})
  }

  const entries = await getEntries()
  
  for (const [name, entry] of Object.entries(entries)) {
    // ViteのJavaScript APIを用いてビルドする
    await build(baseConfig(entry, name))
  }

  // バンドルされた結果のファイル名とページのパスの対応関係を示すkey-valueを作成
  const fileMap = Object
    .keys(entries)
    .map(name => [name, `dist/pages/paths/${name}/.vite/manifest.json`])
    .reduce((acc, [name, manifestPath]) => {
      const content = JSON.parse(readFileSync(manifestPath, 'utf-8')) as Manifest

      const entry = Object.values(content).filter(c => c.name === 'index')[0]

      acc[name] = {
        file: join(name, entry.file)
      }

      return acc
    }, {})

  writeFileSync('dist/files.json', JSON.stringify(fileMap))
}

main()

frontends
├── side-navigation-app
├── colrome-admin-components
├── inhouse-vue-components
└── vue-custom-elements-proxy (カスタム要素変換層 + ページ毎のスクリプト配信パッケージ)
    └── dist 
        ├── files.json
        ├── pages
        │   └── path
        │       ├── orders
        │       │   └── index-a0b1c2.js
        │       ├── customers
        │       │   └── index-d3e4f5.js
        │       └── shoppages
        │           └── index-1f2d3a.js

<!-- /orders にアクセスしたときに埋め込まれるスクリプトタグ -->
<script src="/path/to/dist/pages/path/orders/index-a0b1c2.js"></script>

{
  "orders": {
      "file":"orders/index-a0b1c2.js"
  },
  "customers": {
      "file":"customers/index-d3e4f5.js"
  },
  "shoppages": {
      "file":"shoppages/index-1f2d3a.js"
  }
}