Convert contents config to TS

Author: FyreByrd

.gitignore

@@ -20,6 +20,5 @@ static/assets
 static/collections
 static/contents
 src/lib/data/catalog.js
-src/lib/data/contents.js
 src/gen-assets
 vite.config.js.timestamp*

config/index.d.ts

@@ -383,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/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')
                 }
             ]
         };

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/catalog.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": "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/lib/components/BottomNavigationBar.svelte

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

src/lib/components/Sidebar.svelte

@@ -5,9 +5,9 @@ The sidebar/drawer.
 <script>
     import { resolve } from '$app/paths';
     import config from '$assets/config';
+    import contents from '$assets/contents';
     import nav_drawer_image from '$assets/images/nav_drawer.png';
     import nav_drawer_2x from '$assets/images/nav_drawer@2x.png';
-    import contents from '$lib/data/contents';
     import {
         direction,
         fontChoices,

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import { page } from '$app/stores';
     import config from '$assets/config';
-    import contents from '$lib/data/contents';
+    import contents from '$assets/contents';
     import { audioActive, isDAB, isFirstLaunch } from '$lib/data/stores';
     import { gotoRoute, navigateToTextReference } from '$lib/navigate';
     import { onMount } from 'svelte';

src/routes/contents/[id]/+page.js

@@ -1,15 +1,15 @@
-import contents from '$lib/data/contents';
+import contents from '$assets/contents';
 
 export async function load({ params }) {
     const id = Number(params.id);
-    const menu = contents.screens.find((x) => x.id === id);
+    const menu = contents.screens?.find((x) => x.id === id);
     const nestedItems = contents.nestedItems;
     const features = contents.features;
     const title = contents.title;
 
     const items = [];
-    for (const item of menu.items) {
-        const found = contents.items.find((x) => x.id === item.id);
+    for (const item of menu?.items ?? []) {
+        const found = contents.items?.find((x) => x.id === item.id);
         if (found && Object.keys(found).length !== 0) {
             items.push(found);
         } else {

src/routes/text/+page.svelte

@@ -1,6 +1,7 @@
 <script>
     import { page } from '$app/state';
     import config from '$assets/config';
+    import contents from '$assets/contents';
     import AudioBar from '$lib/components/AudioBar.svelte';
     import BookSelector from '$lib/components/BookSelector.svelte';
     import BookTabs from '$lib/components/BookTabs.svelte';
@@ -13,7 +14,6 @@
     import { showTextAppearance } from '$lib/components/TextAppearanceSelector.svelte';
     import TextSelectionToolbar from '$lib/components/TextSelectionToolbar.svelte';
     import { playStop, seekToVerse, updateAudioPlayer } from '$lib/data/audio';
-    import contents from '$lib/data/contents';
     import {
         analytics,
         audioActive,