refactor: a few 'metadata' and the 'annotation' components to Typescript

src/components/annotations/AnnotationIcon.vue

@@ -6,12 +6,14 @@
  />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
- name: String,
-});
+interface Props {
+ name: string
+}
+const props = defineProps<Props>()
+
 </script>
 
 <style scoped>

src/components/annotations/AnnotationsList.vue

@@ -21,40 +21,42 @@
  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, watch } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
 
-const props = defineProps({
- activeAnnotation: {
- type: Object,
- default: () => {},
- },
- configuredAnnotations: {
- type: Array,
- default: () => [],
- },
- toggle: {
- type: Function,
- default: () => null,
- },
- types: Array,
-});
+interface AnnotationTypesMapping {
+ [key: string]: string | 'annotation'
+ }
 
-const annotationTypesMapping = computed(() => (
+export interface Props {
+ activeAnnotation: ActiveAnnotation
+ configuredAnnotations: Annotation[],
+ toggle: Function,
+ types: any[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+ activeAnnotation: () => <ActiveAnnotation>{},
+ configuredAnnotations: () => <Annotation[]> [],
+ toggle: () => null,
+})
+
+const annotationTypesMapping = computed<AnnotationTypesMapping>(() => (
+ // it returns an object with a varying number of 'key', 'value' pairs
  props.types.reduce((prev, curr) => {
  prev[curr.name] = curr.annotationType || 'annotation';
  return prev;
  }, {})
 ));
 
-function isActive(annotation) {
+function isActive(annotation: Annotation): boolean {
  return !!props.activeAnnotation[annotation.id];
 }
-function isText(annotation) {
+function isText(annotation: Annotation): boolean {
  return annotationTypesMapping.value[annotation.body['x-content-type']] === 'text';
 }
-function getIconName(typeName) {
+function getIconName(typeName: string): string {
  return props.types.find(({ name }) => name === typeName)?.icon || 'biPencilSquare';
 }
 </script>

src/components/annotations/AnnotationsView.vue

@@ -19,7 +19,7 @@
  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
  computed, onBeforeUnmount, ref, watch,
 } from 'vue';
@@ -37,10 +37,10 @@ const store = useStore();
 const message = ref('no_annotations_in_view');
 
 const config = computed(() => store.getters['config/config']);
-const annotations = computed(() => store.getters['annotations/annotations']);
-const activeAnnotations = computed(() => store.getters['annotations/activeAnnotations']);
-const filteredAnnotations = computed(() => store.getters['annotations/filteredAnnotations']);
-const activeContentUrl = computed(() => store.getters['contents/activeContentUrl']);
+const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
+const activeAnnotations = computed<ActiveAnnotation>(() => store.getters['annotations/activeAnnotations']);
+const filteredAnnotations = computed<Annotation[]>(() => store.getters['annotations/filteredAnnotations']);
+const activeContentUrl = computed<string>(() => store.getters['contents/activeContentUrl']);
 const updateTextHighlighting = computed(() =>
  // We need to make sure that annotations are loaded (this.annotations),
  // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
@@ -59,11 +59,11 @@ watch(
  { immediate: true },
 );
 
-function addAnnotation(id) {
+function addAnnotation(id: string) {
  store.dispatch('annotations/addActiveAnnotation', id);
 }
 
-function removeAnnotation(id) {
+function removeAnnotation(id: string) {
  store.dispatch('annotations/removeActiveAnnotation', id);
 }
 

src/components/metadata/MetadataLink.vue

@@ -15,18 +15,17 @@
  </a>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
- url: {
- type: String,
- default: () => '',
- },
- text: {
- type: String,
- default: () => '',
- },
-});
+export interface Props {
+ url: string,
+ text: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+ url: '',
+ text: ''
+})
 
 </script>

src/components/metadata/MetadataValue.vue

@@ -4,13 +4,15 @@
  </div>
 </template>
 
-<script setup>
-const props = defineProps({
- value: {
- type: String,
- default: () => '',
- },
-});
+<script setup lang="ts">
+
+export interface Props {
+ value?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+ value: ''
+})
 </script>
 
 <style lang="scss" scoped>

src/types.d.ts

@@ -1,14 +1,42 @@
 declare global {
 
+ interface Annotation {
+ body: AnnotationContent[],
+ target: AnnotationTarget[],
+ type: string,
+ id: string
+ }
+
+ interface ActiveAnnotation {
+ [key: string]: Annotation
+ }
+
  interface Actor {
  '@context': string,
- role: string[]
+ role: string[],
  name: string,
  id?: string,
  idref?: Idref[]
 
  }
 
+ interface AnnotationContent {
+ type: 'TextualBody',
+ value: string,
+ format: AnnotationContentFormat,
+ 'x-content-type': AnnotationContentType
+ }
+
+ type AnnotationContentFormat = 'text/plain' | 'text/html'
+ type AnnotationContentType = 'Person' | 'Place'
+
+ interface AnnotationTarget {
+ selector: CssSelector | RangeSelector,
+ format: string,
+ language: string,
+ source: string
+ }
+
  interface Collection {
  '@context': string,
  textapi: string,
@@ -30,6 +58,12 @@ declare global {
  integrity?: DataIntegrity
  }
 
+
+ type CssSelector = {
+ type: 'CssSelector',
+ value: string
+ }
+
  interface DataIntegrity {
  type: string,
  value: string
@@ -107,6 +141,11 @@ declare global {
  editionPrints?: boolean
  }
 
+ type RangeSelector = {
+ type: 'RangeSelector',
+ startSelector: CssSelector,
+ endSelector: CssSelector
+ }
  interface Repository {
  '@context': string,
  label?: string,