io-tsを導入してTCXの型を厳密にする

Author: Gurrium

package-lock.json

@@ -20,6 +20,8 @@
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.26.0",
+    "fp-ts": "^2.15.0",
+    "io-ts": "^2.2.20",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.57.0",

package.json

@@ -1,79 +1,82 @@
 <script lang="ts">
-  import { parser } from './lib/parser'
+  import { isLeft } from 'fp-ts/Either'
+  import { PathReporter } from 'io-ts/PathReporter'
+  import CoursePointRow from './components/CoursePointRow.svelte'
+  import CoursePointTypeOptions from './components/CoursePointTypeOptions.svelte'
+  import { findNearestTrackPoint, findTimeEquivalentTrackPoint } from './lib/TrackPoint+find'
   import { builder } from './lib/builder'
-  import { findTimeEquivalentTrackPoint, findNearestTrackPoint } from './lib/TrackPoint+find'
-  import { CoursePointType } from './types/TCX.type'
-  import type { TCX, Course } from './types/TCX.type'
-  import CoursePoint from './components/CoursePoint.svelte'
-  import Emoji from './components/Emoji.svelte'
-
-  let tcx: TCX | null = null
-  let course: Course | null
-
-  $: if (!tcx?.TrainingCenterDatabase.Courses || !tcx.TrainingCenterDatabase.Courses.Course[0]) {
-    course = null
-  } else {
-    course = tcx.TrainingCenterDatabase.Courses.Course[0]
-  }
+  import { parser } from './lib/parser'
+  import type { CoursePointT, CoursePointTypeT, TCXT } from './types/TCX.type'
+  import { TCX } from './types/TCX.type'
+
+  let tcx: TCXT | null = null
 
   let files: FileList | null
-  $: if (files) {
+  $: if (files != null) {
     parse(files[0])
   }
   function parse(file: File) {
     file.text().then((text) => {
-      tcx = parser.parse(text) as TCX
-      console.log('parsed')
+      const parsed = parser.parse(text)
+      const decoded = TCX.decode(parsed)
+
+      if (isLeft(decoded)) {
+        console.error(`Could not validate data: ${PathReporter.report(decoded).join('\n')}`)
+        return
+      }
+
+      tcx = decoded.right
     })
   }
 
   let newCoursePointInput: {
     name: string | null
-    type: CoursePointType | null
+    type: CoursePointTypeT | null
     distanceKiloMeters: number | null
   } = { name: null, type: null, distanceKiloMeters: null }
   function handleAddingCoursePoint() {
     if (
-      !(
-        newCoursePointInput.name &&
-        newCoursePointInput.type &&
-        newCoursePointInput.distanceKiloMeters !== null
-      )
+      newCoursePointInput.name == null ||
+      newCoursePointInput.type == null ||
+      newCoursePointInput.distanceKiloMeters == null
     ) {
       return
     }
 
-    if (!course || !course.Track || !course.Track[0]) {
+    if (tcx?.TrainingCenterDatabase.Courses.Course[0] == null) {
       return
     }
 
+    const course = tcx.TrainingCenterDatabase.Courses.Course[0]
+
     const trackPoint = findNearestTrackPoint(
       course.Track[0].Trackpoint,
       newCoursePointInput.distanceKiloMeters * 1000
     )
 
-    if (!course.CoursePoint) {
+    if (course.CoursePoint == null) {
       return
     }
 
-    course.CoursePoint = [
-      ...course.CoursePoint,
-      {
-        Name: newCoursePointInput.name,
-        Time: trackPoint.Time,
-        Position: trackPoint.Position,
-        PointType: newCoursePointInput.type,
-      },
-    ].sort((lhs, rhs) => {
+    const newCoursePoint: CoursePointT = {
+      Name: newCoursePointInput.name,
+      Time: trackPoint.Time,
+      Position: trackPoint.Position,
+      PointType: newCoursePointInput.type,
+    }
+
+    course.CoursePoint = [...course.CoursePoint, newCoursePoint].sort((lhs, rhs) => {
       return lhs.Time.getTime() - rhs.Time.getTime()
     })
 
+    tcx.TrainingCenterDatabase.Courses.Course[0] = course
+
     newCoursePointInput = { name: null, type: null, distanceKiloMeters: null }
   }
 
   let downloadButton: HTMLAnchorElement
   function download() {
-    if (!tcx?.TrainingCenterDatabase.Folders?.Courses?.CourseFolder.CourseNameRef) {
+    if (tcx?.TrainingCenterDatabase.Folders.Courses.CourseFolder.CourseNameRef == null) {
       return
     }
 
@@ -97,21 +100,28 @@
   }
 
   function removeCoursePointAt(index: number, name: string): void {
-    if (!(course?.CoursePoint && tcx?.TrainingCenterDatabase.Courses?.Course)) {
+    if (tcx?.TrainingCenterDatabase.Courses.Course[0] == null) {
+      return
+    }
+
+    const course = tcx.TrainingCenterDatabase.Courses.Course[0]
+
+    if (course.CoursePoint == null) {
       return
     }
 
     if (confirm(`"${name}"を本当に削除しますか？`)) {
-      course?.CoursePoint?.splice(index, 1)
+      course.CoursePoint.splice(index, 1)
       tcx.TrainingCenterDatabase.Courses.Course[0] = course
     }
   }
 </script>
 
 <main>
   <div id="file-operations">
-    {#if tcx}
+    {#if tcx != null}
       <div>
+        <!-- TODO: 日本語にする -->
         <button on:click|preventDefault={download}>Download</button>
         <a bind:this={downloadButton} hidden aria-hidden="true" />
 
@@ -125,17 +135,14 @@
     {/if}
   </div>
 
-  {#if course?.CoursePoint}
+  {#if tcx?.TrainingCenterDatabase.Courses.Course[0].CoursePoint != null}
     <div id="tcx-content">
       <form on:submit|preventDefault={handleAddingCoursePoint}>
         <div>
           <label>
             種別
             <select bind:value={newCoursePointInput.type} required>
-              <option value="" hidden disabled selected />
-              {#each Object.values(CoursePointType) as pointType}
-                <option value={pointType}><Emoji coursePointType={pointType} /></option>
-              {/each}
+              <CoursePointTypeOptions />
             </select>
           </label>
         </div>
@@ -171,15 +178,15 @@
 
       <table id="course-point-table">
         <tbody>
-          {#if course?.Track}
-            {#each course?.CoursePoint as coursePoint, index}
+          {#if tcx?.TrainingCenterDatabase.Courses.Course[0].Track != null}
+            {#each tcx.TrainingCenterDatabase.Courses.Course[0].CoursePoint as coursePoint, index}
               {@const trackPoint = findTimeEquivalentTrackPoint(
-                course?.Track[0].Trackpoint,
+                tcx.TrainingCenterDatabase.Courses.Course[0].Track[0].Trackpoint,
                 coursePoint.Time
               )}
 
-              {#if trackPoint?.DistanceMeters}
-                <CoursePoint
+              {#if trackPoint?.DistanceMeters != null}
+                <CoursePointRow
                   {coursePoint}
                   {trackPoint}
                   on:remove={() => removeCoursePointAt(index, coursePoint.Name)}
@@ -205,13 +212,4 @@
   table#course-point-table {
     margin-top: 20px;
   }
-
-  @keyframes course-point-type-animation {
-    from {
-      background-color: unset;
-    }
-    to {
-      background-color: #dadadaee;
-    }
-  }
 </style>

src/App.svelte

@@ -1,35 +1,30 @@
 <script lang="ts">
-  import type { CoursePoint, TrackPoint } from '../types/TCX.type'
-  import { CoursePointType } from '../types/TCX.type'
-  import Emoji from './Emoji.svelte'
   import { createEventDispatcher } from 'svelte'
+  import type { CoursePointT, TrackPointT } from '../types/TCX.type'
+  import CoursePointTypeOptions from './CoursePointTypeOptions.svelte'
 
-  export let coursePoint: CoursePoint
-  export let trackPoint: TrackPoint
+  export let coursePoint: CoursePointT
+  export let trackPoint: TrackPointT
 
   const dispatch = createEventDispatcher()
 </script>
 
 <tr id="course-point">
   <td>
     <select id="course-point-type" bind:value={coursePoint.PointType}>
-      {#each Object.values(CoursePointType) as pointType}
-        <option value={pointType}><Emoji coursePointType={pointType} /></option>
-      {/each}
+      <CoursePointTypeOptions />
     </select>
   </td>
   <td>
     <input id="course-point-name" bind:value={coursePoint.Name} type="string" maxlength="10" />
   </td>
   <td>
-    {#if trackPoint.DistanceMeters}
-      {Intl.NumberFormat(undefined, {
-        style: 'unit',
-        unit: 'kilometer',
-        maximumFractionDigits: 1,
-        minimumFractionDigits: 1,
-      }).format(trackPoint.DistanceMeters / 1000)}
-    {/if}
+    {Intl.NumberFormat(undefined, {
+      style: 'unit',
+      unit: 'kilometer',
+      maximumFractionDigits: 1,
+      minimumFractionDigits: 1,
+    }).format(trackPoint.DistanceMeters / 1000)}
   </td>
   <td>
     <a
@@ -54,6 +49,15 @@
     animation: course-point-type-animation 0.5s 1 normal forwards;
   }
 
+  @keyframes course-point-type-animation {
+    from {
+      background-color: unset;
+    }
+    to {
+      background-color: #dadadaee;
+    }
+  }
+
   tr#course-point select#course-point-type:focus-visible {
     background-color: #dadadaee;
     outline: unset;
@@ -73,11 +77,6 @@
   }
 
   tr#course-point button {
-    background: unset;
-    border: unset;
-  }
-
-  tr#course-point button:hover {
-    cursor: pointer;
+    margin-left: 12px;
   }
 </style>

src/components/CoursePoint.svelte src/components/CoursePointRow.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { isLeft } from 'fp-ts/Either'
+  import type { CoursePointTypeT } from '../types/TCX.type'
+  import { CoursePointType, coursePointTypes } from '../types/TCX.type'
+
+  function decode(u: string): CoursePointTypeT | null {
+    const decoded = CoursePointType.decode(u)
+
+    if (isLeft(decoded)) {
+      return null
+    }
+
+    return decoded.right
+  }
+
+  function emoji(
+    type: CoursePointTypeT | null
+  ):
+    | '📍'
+    | '🏔'
+    | '⾕'
+    | '🧃'
+    | '🍱'
+    | '⚠️'
+    | '⬅'
+    | '➡'
+    | '⬆'
+    | '🍙'
+    | '4️⃣'
+    | '🥉'
+    | '🥈'
+    | '🥇'
+    | '🏆'
+    | '🚴'
+    | null {
+    if (type === null) {
+      return null
+    }
+    switch (type) {
+      case 'Generic':
+        return '📍'
+      case 'Summit':
+        return '🏔'
+      case 'Valley':
+        return '⾕'
+      case 'Water':
+        return '🧃'
+      case 'Food':
+        return '🍱'
+      case 'Danger':
+        return '⚠️'
+      case 'Left':
+        return '⬅'
+      case 'Right':
+        return '➡'
+      case 'Straight':
+        return '⬆'
+      case 'First Aid':
+        return '🍙'
+      case '4th Category':
+        return '4️⃣'
+      case '3rd Category':
+        return '🥉'
+      case '2nd Category':
+        return '🥈'
+      case '1st Category':
+        return '🥇'
+      case 'Hors Category':
+        return '🏆'
+      case 'Sprint':
+        return '🚴'
+    }
+  }
+</script>
+
+{#each coursePointTypes as pointType}
+  {@const type = decode(pointType)}
+  {#if type}
+    <option value={type}>{emoji(type)}</option>
+  {/if}
+{/each}

src/components/CoursePointTypeOptions.svelte

@@ -1,15 +1,11 @@
-import type { TrackPoint } from '../types/TCX.type'
+import type { TrackPointT } from '../types/TCX.type'
 
 export function findNearestTrackPoint(
-  trackPoints: TrackPoint[],
+  trackPoints: TrackPointT[],
   distanceMeters: number
-): TrackPoint {
+): TrackPointT {
   const minIndexOverDistanceMeters = trackPoints.findIndex((trackPoint) => {
-    if (trackPoint.DistanceMeters) {
-      return trackPoint.DistanceMeters > distanceMeters
-    } else {
-      return false
-    }
+    return trackPoint.DistanceMeters > distanceMeters
   })
 
   if (minIndexOverDistanceMeters == -1) {
@@ -20,9 +16,9 @@ export function findNearestTrackPoint(
 }
 
 export function findTimeEquivalentTrackPoint(
-  trackPoints: TrackPoint[],
+  trackPoints: TrackPointT[],
   time: Date
-): TrackPoint | null {
+): TrackPointT | null {
   let minIndexEquivalentTime = trackPoints.findIndex((trackPoint) => {
     return trackPoint.Time.getTime() === time.getTime()
   })

src/components/Emoji.svelte

@@ -4,15 +4,22 @@ export const parser = new XMLParser({
   ignoreAttributes: false,
   isArray: (name, jpath) => {
     return (
-      ['CourseNameRef', 'Course', 'Track', 'CoursePoint'].includes(name) ||
+      ['CourseNameRef', 'Course', 'Track', 'Trackpoint', 'CoursePoint'].includes(name) ||
       ['Course.Lap'].some((candidate: string) => jpath.endsWith(candidate))
     )
   },
+  numberParseOptions: {
+    leadingZeros: true,
+    hex: false,
+    eNotation: true,
+  },
   tagValueProcessor: (tagName, tagValue) => {
-    if (tagName == 'Time') {
-      return new Date(tagValue)
-    } else {
+    if (tagName === 'Name') {
       return null
+    } else {
+      return tagValue
     }
   },
+  parseTagValue: true,
+  parseAttributeValue: true,
 })

src/lib/TrackPoint+find.ts

@@ -1,55 +1,117 @@
-export type TCX = {
-  '?xml': string
-  TrainingCenterDatabase: TrainingCenterDatabase
-}
+import { Chain } from 'fp-ts/Either'
+import * as t from 'io-ts'
 
-export type TrainingCenterDatabase = { Folders?: Folders; Courses?: CourseList }
+const DateFromString = new t.Type<Date, string, unknown>(
+  'DateFromString',
+  (u): u is Date => u instanceof Date,
+  (u, c) =>
+    Chain.chain(t.string.validate(u, c), (s) => {
+      const d = new Date(s)
+      return isNaN(d.getTime()) ? t.failure(u, c) : t.success(d)
+    }),
+  (a) => a.toISOString()
+)
 
-type Folders = { Courses?: Courses }
+export const coursePointTypes = [
+  'Generic',
+  'Summit',
+  'Valley',
+  'Water',
+  'Food',
+  'Danger',
+  'Left',
+  'Right',
+  'Straight',
+  'First Aid',
+  '4th Category',
+  '3rd Category',
+  '2nd Category',
+  '1st Category',
+  'Hors Category',
+  'Sprint',
+]
 
-type Courses = { CourseFolder: CourseFolder }
+export const CoursePointType = t.union([
+  t.literal('Generic'),
+  t.literal('Summit'),
+  t.literal('Valley'),
+  t.literal('Water'),
+  t.literal('Food'),
+  t.literal('Danger'),
+  t.literal('Left'),
+  t.literal('Right'),
+  t.literal('Straight'),
+  t.literal('First Aid'),
+  t.literal('4th Category'),
+  t.literal('3rd Category'),
+  t.literal('2nd Category'),
+  t.literal('1st Category'),
+  t.literal('Hors Category'),
+  t.literal('Sprint'),
+])
 
-type CourseFolder = { CourseNameRef?: [NameKeyReference] }
+export type CoursePointTypeT = t.TypeOf<typeof CoursePointType>
 
-type NameKeyReference = { Id: string }
+const Position = t.type({
+  LatitudeDegrees: t.number,
+  LongitudeDegrees: t.number,
+})
 
-type CourseList = { Course: Course[] }
+const TrackPoint = t.type({
+  Time: DateFromString,
+  Position: Position,
+  AltitudeMeters: t.number,
+  DistanceMeters: t.number,
+})
 
-export type Course = { Name: string; Lap?: Lap[]; Track?: Track[]; CoursePoint?: CoursePoint[] }
+export type TrackPointT = t.TypeOf<typeof TrackPoint>
 
-type Lap = {
-  TotalTimeSeconds: number
-  DistanceMeters: number
-  BeginPosition?: Position
-  EndPosition?: Position
-}
+const Track = t.type({ Trackpoint: t.array(TrackPoint) })
 
-type Position = {
-  LatitudeDegrees: number
-  LongitudeDegrees: number
-}
+const Lap = t.type({
+  TotalTimeSeconds: t.number,
+  DistanceMeters: t.number,
+  BeginPosition: Position,
+  EndPosition: Position,
+})
 
-type Track = { Trackpoint: TrackPoint[] }
+const CoursePoint = t.type({
+  Name: t.string,
+  Time: DateFromString,
+  Position: Position,
+  PointType: CoursePointType,
+})
 
-export type TrackPoint = {
-  Time: Date
-  Position: Position
-  AltitudeMeters?: number
-  DistanceMeters?: number
-}
+export type CoursePointT = t.TypeOf<typeof CoursePoint>
 
-export type CoursePoint = {
-  Name: string
-  Time: Date
-  Position: Position
-  PointType: CoursePointType
-}
+const Course = t.type({
+  Name: t.string,
+  Lap: t.array(Lap),
+  Track: t.array(Track),
+  CoursePoint: t.union([t.array(CoursePoint), t.undefined]),
+})
 
-export enum CoursePointType {
-  Generic = 'Generic',
-  FirstAid = 'First Aid',
-  Left = 'Left',
-  Right = 'Right',
-  Straight = 'Straight',
-  // TODO: 他のも追加する
-}
+const NameKeyReference = t.type({ Id: t.string })
+
+const CourseFolder = t.type({ CourseNameRef: t.array(NameKeyReference) })
+
+const Courses = t.type({ CourseFolder: CourseFolder })
+
+const Folders = t.type({ Courses: Courses })
+
+const CourseList = t.type({ Course: t.array(Course) })
+
+const TrainingCenterDatabase = t.type({
+  Folders: Folders,
+  Courses: CourseList,
+})
+
+export const TCX = t.type({
+  '?xml': t.type({
+    '@_version': t.number,
+    '@_encoding': t.string,
+  }),
+  TrainingCenterDatabase: TrainingCenterDatabase,
+})
+
+export type TCXT = t.TypeOf<typeof TCX>

src/lib/parser.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({