Convert generated config objects to TS

.gitignore

@@ -17,10 +17,10 @@ static/illustrations
 static/icons
 static/manifest*.json
 static/assets
+static/collections
 static/contents
 src/lib/data/catalog.js
 src/lib/data/firebase-config.js
-src/lib/data/config.js
 src/lib/data/contents.js
 src/gen-assets
 vite.config.js.timestamp*

.prettierignore

@@ -7,7 +7,7 @@ node_modules
 .env.*
 !.env.example
 /data
-src/lib/data/config.js
+src/gen-assets
 src/lib/data/catalog.js
 src/lib/data/firebase-config.js
 static

config/index.d.ts

@@ -62,8 +62,8 @@ export type BookConfig = {
     file: string;
     hashedFileName?: string; // currently just for HTML books
     audio: BookCollectionAudioConfig[];
-    features: any;
-    quizFeatures?: Record<string, string | boolean | number>;
+    features: FeatureConfig;
+    quizFeatures?: FeatureConfig;
     footer?: HTML;
     style?: StyleConfig;
     styles?: {
@@ -157,13 +157,17 @@ export type MenuItemConfig = {
         file: string;
     }[];
 };
+
+export type FeatureValue = string | boolean | number;
+export type FeatureConfig = Record<string, FeatureValue>;
+
 export type AppConfig = {
     name?: string;
     package?: string;
     version?: string;
-    programVersion?: string;
-    programType?: string;
-    mainFeatures?: any;
+    programVersion: string;
+    programType: string;
+    mainFeatures: FeatureConfig;
     audio?: AudioConfig;
     fonts?: {
         name?: string;

convert/convertConfig.ts

@@ -1613,7 +1613,7 @@ export interface ConfigTaskOutput extends TaskOutput {
 
 /**
  * Converts appdef.xml into a config object which is passed to other conversion functions
- * and is also written to src/config.js.
+ * and is also written to src/gen-assets/config.ts.
  */
 export class ConvertConfig extends Task {
     public triggerFiles: string[] = ['appdef.xml'];
@@ -1624,8 +1624,14 @@ export class ConvertConfig extends Task {
             data,
             files: [
                 {
-                    path: 'src/lib/data/config.js',
-                    content: `export default ${JSON.stringify(data, null, 2)};`
+                    path: 'src/gen-assets/config.ts',
+                    content: [
+                        `import type { AppConfig, DictionaryConfig, ScriptureConfig } from '$config';`,
+                        `export const config = ${JSON.stringify(data, null, 2)} as Readonly<AppConfig>;`,
+                        `export const dictionaryConfig = config as Readonly<DictionaryConfig>;`,
+                        `export const scriptureConfig = config as Readonly<ScriptureConfig>;`,
+                        `export default config;\n`
+                    ].join('\n')
                 }
             ]
         };

convert/tests/dab/convertConfigDAB.test.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from 'fs';
 import path from 'path';
-import type { DictionaryConfig, DictionaryWritingSystemConfig } from '$config';
+import type { DictionaryWritingSystemConfig } from '$config';
 import jsdom from 'jsdom';
 import { expect, test } from 'vitest';
 import { parseDictionaryWritingSystem, parseFeatures } from '../../convertConfig';

package.json

@@ -17,7 +17,7 @@
         "convert": "ts-node convert/index.ts",
         "convert:watch": "ts-node convert/index.ts --watch",
         "sandbox": "ts-node data-sandbox/index.ts",
-        "clean": "rimraf .svelte-kit build src/gen-assets src/lib/data/config.js src/lib/data/catalog.js src/lib/data/firebase-config.js src/lib/data/contents.js static/illustrations static/icons static/contents static/manifest*.json && echo 🔔 Reminder: The project cannot be built until the conversion scripts are run again.",
+        "clean": "rimraf .svelte-kit build src/gen-assets src/lib/data/catalog.js src/lib/data/firebase-config.js src/lib/data/contents.js static/illustrations static/icons static/collections static/contents static/manifest*.json && echo 🔔 Reminder: The project cannot be built until the conversion scripts are run again.",
         "clean:data": "rimraf --glob data/*",
         "clean:all": "npm run clean && npm run clean:data",
         "test": "vitest",

src/app.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference types="svelte-gestures" />
+/// <reference types="$config" />
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
@@ -64,11 +65,11 @@ declare namespace App {
 
     interface CollectionEntry {
         id: string;
-        name: string;
+        name?: string;
         // boolean value for if a collection is allowed
         // to be shown in single pane view
         singlePane: boolean;
-        description: string;
+        description?: string;
         image?: string;
     }
 
@@ -86,8 +87,8 @@ declare namespace App {
         key: string;
         entries?: string[];
         values?: string[];
-        value?: string | boolean;
-        defaultValue?: string | boolean;
+        value?: FeatureValue;
+        defaultValue?: FeatureValue;
     }
 }
 

src/lib/components/AudioBar.svelte

@@ -6,6 +6,7 @@ TODO:
 - display audio not found message in UI when audio is not found
 -->
 <script lang="ts">
+    import config from '$assets/config';
     import {
         changeVerse,
         format,
@@ -15,7 +16,6 @@ TODO:
         skip,
         updatePlaybackSpeed
     } from '$lib/data/audio';
-    import config from '$lib/data/config';
     import {
         audioPlayer,
         convertStyle,

src/lib/components/BookSelector.svelte

@@ -3,7 +3,7 @@
 The navbar component.
 -->
 <script>
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import { convertStyle, nextRef, refs, s, t, userSettingsOrDefault } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import { getRoute, navigateToText, navigateToUrl } from '$lib/navigate';

src/lib/components/BookTabs.svelte

@@ -4,7 +4,7 @@ A component that displays the book tabs and allows the user to switch between th
 -->
 <script>
     import { base } from '$app/paths';
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import {
         convertStyle,
         language,

src/lib/components/BottomNavigationBar.svelte

@@ -3,7 +3,7 @@
 -->
 <script>
     import { base } from '$app/paths';
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import contents from '$lib/data/contents';
     import { language, languageDefault, refs, s, theme } from '$lib/data/stores';
     import { gotoRoute } from '$lib/navigate';

src/lib/components/ChapterSelector.svelte

@@ -3,7 +3,7 @@
 The navbar component.
 -->
 <script>
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import { convertStyle, nextRef, refs, s, t, userSettingsOrDefault } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import { navigateToText } from '$lib/navigate';

src/lib/components/CollectionSelector.svelte

@@ -3,7 +3,7 @@
 Book Collection Selector component.
 -->
 <script>
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import {
         convertStyle,
         layout,

src/lib/components/FontList.svelte

@@ -5,7 +5,7 @@ Font list component.
 <svelte:options accessors />
 
 <script>
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import { fontChoices, monoIconColor, themeColors } from '$lib/data/stores';
     import { createEventDispatcher } from 'svelte';
 

src/lib/components/HistoryCard.svelte

@@ -6,24 +6,24 @@ TODO:
 -->
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import config from '$lib/data/config';
+    import config, { scriptureConfig } from '$assets/config';
     import type { HistoryItem } from '$lib/data/history';
     import { refs } from '$lib/data/stores';
     import { gotoRoute } from '$lib/navigate';
     import { formatDateAndTime } from '$lib/scripts/dateUtils';
 
     export let history: HistoryItem;
 
-    $: bc = config.bookCollections.find((x) => x.id === history.collection);
-    $: docSet = bc.languageCode + '_' + bc.id;
-    $: bcName = config.bookCollections.length == 1 ? null : bc.collectionName;
-    $: bookName = bc.books.find((x) => x.id === history.book)?.name;
-    $: chapterVerseSeparator = bc.features['ref-chapter-verse-separator'];
+    $: bc = scriptureConfig.bookCollections?.find((x) => x.id === history.collection);
+    $: docSet = bc && bc.languageCode + '_' + bc.id;
+    $: bcName = scriptureConfig.bookCollections?.length == 1 ? null : bc?.collectionName;
+    $: bookName = bc?.books.find((x) => x.id === history.book)?.name;
+    $: chapterVerseSeparator = bc?.features['ref-chapter-verse-separator'];
     $: reference = history.verse
         ? history.chapter + chapterVerseSeparator + history.verse
         : history.chapter;
     $: dateFormat = formatDateAndTime(new Date(history.date));
-    $: textDirection = bc.style.textDirection;
+    $: textDirection = bc?.style?.textDirection;
 
     function onHistoryClick() {
         if (history.url) {
@@ -56,7 +56,7 @@ TODO:
             {/if}
             <div
                 class="history-item-reference justify-self-start"
-                class:justify-self-end={textDirection.toLowerCase() === 'rtl'}
+                class:justify-self-end={textDirection?.toLowerCase() === 'rtl'}
             >
                 {bookName}
                 {reference}

src/lib/components/HtmlBookView.svelte

@@ -4,7 +4,7 @@ Display an HTML Book.
 -->
 <script lang="ts">
     import { base } from '$app/paths';
-    import config from '$lib/data/config';
+    import { scriptureConfig } from '$assets/config';
 
     interface Props {
         references: {
@@ -27,8 +27,8 @@ Display an HTML Book.
     });
 
     async function loadHtml(collectionId: string, bookId: string) {
-        const book = config.bookCollections
-            .find((x) => x.id === collectionId)
+        const book = scriptureConfig.bookCollections
+            ?.find((x) => x.id === collectionId)
             ?.books.find((x) => x.id === bookId);
 
         if (book) {

src/lib/components/IconCard.svelte

@@ -6,7 +6,7 @@ TODO:
 -->
 <script lang="ts">
     import { base } from '$app/paths';
-    import config from '$lib/data/config';
+    import config, { scriptureConfig } from '$assets/config';
     import { direction, refs } from '$lib/data/stores';
     import CardMenu from './CardMenu.svelte';
 
@@ -27,9 +27,9 @@ TODO:
         href = `${base}/#/text`
     } = $props();
 
-    const bc = config.bookCollections.find((x) => x.id === collection);
-    const textDirection = bc.style.textDirection;
-    const justifyEnd = $derived(textDirection.toLowerCase() === 'rtl' && $direction === 'ltr');
+    const bc = scriptureConfig.bookCollections?.find((x) => x.id === collection);
+    const textDirection = bc?.style?.textDirection;
+    const justifyEnd = $derived(textDirection?.toLowerCase() === 'rtl' && $direction === 'ltr');
 </script>
 
 <div class="annotation-item-block dy-card">

src/lib/components/LayoutOptions.svelte

@@ -3,7 +3,7 @@
 Displays the three different layout option menus.  
 -->
 <script lang="ts">
-    import config from '$lib/data/config';
+    import config, { scriptureConfig } from '$assets/config';
     import {
         convertStyle,
         LAYOUT_SINGLE,
@@ -27,14 +27,15 @@ Displays the three different layout option menus.
         description: ''
     };
 
-    const allDocSets = config.bookCollections.map((ds) => ({
-        id: ds.languageCode + '_' + ds.id,
-        name: ds.collectionName,
-        singlePane:
-            ds?.features['bc-allow-single-pane'] ?? ds?.features['bc-layout-allow-single-pane'],
-        description: ds?.collectionDescription,
-        image: ds?.collectionImage
-    }));
+    const allDocSets =
+        scriptureConfig.bookCollections?.map((ds) => ({
+            id: ds.languageCode + '_' + ds.id,
+            name: ds.collectionName,
+            singlePane:
+                ds?.features['bc-allow-single-pane'] ?? ds?.features['bc-layout-allow-single-pane'],
+            description: ds?.collectionDescription,
+            image: ds?.collectionImage
+        })) ?? [];
 
     function handleClick(opt: any, index: number) {
         const docSet = opt.collection;

src/lib/components/PlayButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import config from '$lib/data/config';
+    import config from '$assets/config';
     import { AudioIcon } from '$lib/icons';
 
     const icons = {
@@ -22,7 +22,7 @@
     let { color = 'black', state, onclick }: Props = $props();
 
     const size = config.mainFeatures['audio-play-button-size'] === 'normal' ? 24 : 48;
-    const style = config.mainFeatures['audio-play-button-style'];
+    const style = config.mainFeatures['audio-play-button-style'] as keyof typeof icons;
     const icon_style = icons[style];
     const Icon = $derived(icon_style[state]);
 </script>