Convert generated config objects to TS

.gitignore

@@ -17,10 +17,8 @@ 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;
@@ -379,3 +383,50 @@ export type Quiz = {
     }[];
     passScore?: number; //\pm
 };
+
+export type LangContainer = { [lang: string]: string };
+
+export type LinkMeta = {
+    // intended to pass between functions so that there is one object passed
+    linkType?: string;
+    linkTarget?: string;
+    linkLocation?: string;
+};
+
+export type ContentItem = {
+    id: number;
+    heading?: boolean;
+    features?: any;
+    title: LangContainer;
+    subtitle?: LangContainer;
+    audioFilename?: LangContainer;
+    imageFilename?: string;
+    itemType?: string;
+    contentItemContainer: boolean;
+    linkType?: string;
+    linkTarget?: string;
+    linkLocation?: string;
+    layoutMode?: string;
+    layoutCollection?: string[];
+    children?: ContentItem[];
+};
+
+export type ContentScreen = {
+    id: number;
+    title?: {
+        [lang: string]: string;
+    };
+    items?: {
+        id: number;
+    }[];
+};
+
+export type ContentsData = {
+    title?: {
+        [lang: string]: string;
+    };
+    features?: any;
+    items?: ContentItem[];
+    nestedItems?: boolean;
+    screens?: ContentScreen[];
+};

convert/convertConfig.ts

@@ -1,4 +1,4 @@
-import { existsSync, readdirSync, readFileSync, type PathLike } from 'fs';
+import { existsSync, mkdirSync, readdirSync, readFileSync, type PathLike } from 'fs';
 import path, { basename, extname, join } from 'path';
 import type {
     AppConfig,
@@ -219,6 +219,10 @@ function isDictionaryConfig(data: ScriptureConfig | DictionaryConfig): data is D
 }
 
 function convertConfig(dataDir: string, verbose: number) {
+    const genAssets = path.join('src/gen-assets');
+    if (!existsSync(genAssets)) {
+        mkdirSync(genAssets, { recursive: true });
+    }
     const dom = new jsdom.JSDOM(readFileSync(path.join(dataDir, 'appdef.xml')).toString(), {
         contentType: 'text/xml'
     });
@@ -1613,7 +1617,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 +1628,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/convertContents.ts

@@ -1,60 +1,11 @@
 import { existsSync, readFileSync } from 'fs';
 import path from 'path';
-import { ScriptureConfig } from '$config';
+import { ContentItem, ContentsData, LangContainer, LinkMeta, ScriptureConfig } from '$config';
 import jsdom from 'jsdom';
 import { ConfigTaskOutput, parseLangAttribute } from './convertConfig';
 import { createHashedFile, createOutputDir, deleteOutputDir, joinUrlPath } from './fileUtils';
 import { Task, TaskOutput } from './Task';
 
-export type LangContainer = { [lang: string]: string };
-
-export type LinkMeta = {
-    // intended to pass between functions so that there is one object passed
-    linkType?: string;
-    linkTarget?: string;
-    linkLocation?: string;
-};
-
-type ContentItem = {
-    id: number;
-    heading?: boolean;
-    features?: any;
-    title: LangContainer;
-    subtitle?: LangContainer;
-    audioFilename?: LangContainer;
-    imageFilename?: string;
-    itemType?: string;
-    contentItemContainer: boolean;
-    linkType?: string;
-    linkTarget?: string;
-    linkLocation?: string;
-    layoutMode?: string;
-    layoutCollection?: string[];
-    children?: ContentItem[];
-};
-
-type ContentScreen = {
-    id: number;
-    title?: {
-        [lang: string]: string;
-    };
-    items?: {
-        id: number;
-    }[];
-};
-
-export type ContentsData = {
-    title?: {
-        [lang: string]: string;
-    };
-    features?: any;
-    items?: ContentItem[];
-    nestedItems?: boolean;
-    screens?: ContentScreen[];
-};
-
-const data: ContentsData = {};
-
 export interface ContentsTaskOutput extends TaskOutput {
     taskName: 'ConvertContents';
 }
@@ -367,6 +318,8 @@ export function convertContents(
         deleteOutputDir(destDir);
     }
 
+    const data: ContentsData = {};
+
     const contentsFile = path.join(dataDir, 'contents.xml');
     if (!existsSync(contentsFile)) {
         return data;
@@ -602,8 +555,12 @@ export class ConvertContents extends Task {
             data,
             files: [
                 {
-                    path: 'src/lib/data/contents.js',
-                    content: `export default ${JSON.stringify(data, null, 2)}`
+                    path: 'src/gen-assets/contents.ts',
+                    content: [
+                        `import type { ContentsData } from '$config';`,
+                        `export const contents = ${JSON.stringify(data, null, 2)} as Readonly<ContentsData>;`,
+                        `export default contents;\n`
+                    ].join('\n')
                 }
             ]
         };

convert/convertFirebase.ts

@@ -11,16 +11,17 @@ export interface FirebaseTaskOutput extends TaskOutput {
 export function convertFirebase(dataDir: string, verbose: number) {
     const srcFile = path.join(dataDir, 'firebase-config.js');
     const srcExists = existsSync(srcFile);
-    const dstFile = path.join('src', 'lib', 'data', 'firebase-config.js');
+    const dstFile = path.join('src', 'gen-assets', 'firebase-config.ts');
     if (verbose) {
         console.log(`FirebaseConfig: path=${srcFile}, exists=${srcExists}`);
     }
+    const prefix = `import type { FirebaseOptions } from 'firebase/app';\nexport const firebaseConfig: Readonly<FirebaseOptions> | null`;
     if (srcExists) {
         let content = readFileSync(srcFile, 'utf-8');
-        content = content.replace('const firebaseConfig', 'export const firebaseConfig');
+        content = content.replace('const firebaseConfig', prefix);
         writeFileSync(dstFile, content, 'utf-8');
     } else {
-        const firebaseConfig = 'export const firebaseConfig = null;';
+        const firebaseConfig = `${prefix} = null`;
         writeFileSync(dstFile, firebaseConfig);
     }
 }

convert/index.ts

@@ -1,4 +1,4 @@
-import { writeFile } from 'fs';
+import { writeFile } from 'fs/promises';
 import path from 'path';
 import { watch } from 'chokidar';
 import { ConvertAbout } from './convertAbout';
@@ -87,14 +87,7 @@ async function fullConvert(printDetails: boolean): Promise<boolean> {
             // step may be async, in which case it should be awaited
             const out = await step.run(verbose, outputs, step.triggerFiles);
             outputs.set(step.constructor.name, out);
-            await Promise.all(
-                out.files.map(
-                    (f) =>
-                        new Promise((r) => {
-                            writeFile(f.path, f.content, r);
-                        })
-                )
-            );
+            await Promise.all(out.files.map((f) => writeFile(f.path, f.content)));
         } catch (e) {
             oldConsoleLog(lastStepOutput);
             oldConsoleLog(e);
@@ -157,11 +150,7 @@ if (process.argv.includes('--watch')) {
                                 outputs.set(step.constructor.name, out);
                                 // Write all files to disk
                                 /*await*/ // We don't need to await the file writes; next steps can continue running while writes occur
-                                Promise.all(
-                                    out.files.map((f) => {
-                                        new Promise((r) => writeFile(f.path, f.content, r));
-                                    })
-                                );
+                                Promise.all(out.files.map((f) => writeFile(f.path, f.content)));
                             } catch (e) {
                                 oldConsoleLog(lastStepOutput);
                                 oldConsoleLog(e);

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';

eslint.config.js

@@ -73,7 +73,6 @@ export default ts.config(
             '.env.*',
             '!env.example',
             'data',
-            'src/config.js',
             'static',
             'example_data',
             'test_data',

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 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,8 +3,8 @@
 -->
 <script>
     import { base } from '$app/paths';
-    import config from '$lib/data/config';
-    import contents from '$lib/data/contents';
+    import config from '$assets/config';
+    import contents from '$assets/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';