From eb32347990066aaf8273ae791877bbb197cb0648 Mon Sep 17 00:00:00 2001 From: Alexandre Tuleu Date: Mon, 14 Aug 2023 12:37:45 +0200 Subject: [PATCH] Switches to a global variable for client/serverConfig --- src/lib/config.ts | 4 +- src/lib/server/config.test.ts | 24 ++++++----- src/lib/server/config.ts | 76 +++++++++++++++++++++++++---------- src/routes/+page.server.ts | 5 +-- 4 files changed, 73 insertions(+), 36 deletions(-) diff --git a/src/lib/config.ts b/src/lib/config.ts index 4ee1f5f..8f267e8 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -23,9 +23,7 @@ export interface ServiceGroupConfig extends SectionConfig { [x: string]: unknown; } -export interface ColorConfig { - test: string; -} +export type ColorConfig = Record; export interface Config extends SectionConfig { services: Array; diff --git a/src/lib/server/config.test.ts b/src/lib/server/config.test.ts index 503dc82..3595b50 100644 --- a/src/lib/server/config.test.ts +++ b/src/lib/server/config.test.ts @@ -4,17 +4,15 @@ import type { Config } from '$lib/config'; describe('Config', () => { it('should be export a build time server and client config store', () => { - expect(serverConfig).toBeTruthy(); - expect(clientConfig).toBeTruthy(); + expect(serverConfig()).toBeTruthy(); + expect(clientConfig()).toBeTruthy(); }); it('should be able to merge with POJO', () => { const merged: Config = merge(defaultConfig, { subtitle: "Homer's favorite neighboor", colors: { - light: { - test: 'red' - } + light: { notInDefault: 'foo' } }, services: [ { @@ -27,12 +25,16 @@ describe('Config', () => { ] } ] - }) as Config; + }); expect(merged.title).toEqual('Flanders'); expect(merged.services).toHaveLength(1); - expect(merged.colors.light).toEqual({ test: 'red' }); - expect(merged.colors.dark).toEqual({}); + expect(Object.entries(merged.colors.light)).toHaveLength( + Object.entries(merged.colors.dark).length + 1 + ); + expect(Object.entries(defaultConfig.colors.light)).toHaveLength( + Object.entries(merged.colors.light).length - 1 + ); expect(merged.services[0].title).toEqual('favorite occupations'); expect(merged.services[0].items).toHaveLength(1); expect(merged.services[0].items[0].title).toEqual('anoy homer'); @@ -44,7 +46,9 @@ describe('Config', () => { title: 'custom', secret: { secret: 'some secret' }, colors: { - light: {}, + light: { + test: 'foo' + }, dark: {} }, services: [ @@ -66,6 +70,8 @@ describe('Config', () => { const stripped: Config = stripPrivateFields(custom); expect(stripped.secret).toBeUndefined(); + expect(stripped.colors.light).toEqual({ test: 'foo' }); + expect(stripped.colors.dark).toEqual({}); expect(custom.secret).toEqual({ secret: 'some secret' }); expect(stripped.services[0].secret).toBeUndefined(); expect(custom.services[0].secret).toEqual('secret'); diff --git a/src/lib/server/config.ts b/src/lib/server/config.ts index 806ecb6..3e1410a 100644 --- a/src/lib/server/config.ts +++ b/src/lib/server/config.ts @@ -1,8 +1,7 @@ -import { writable, type Readable, type Writable, derived } from 'svelte/store'; import configData from '../../config.yml'; import { readFile, watch } from 'fs/promises'; import * as yml from 'js-yaml'; -import type { Config, ServiceConfig, ServiceGroupConfig } from '$lib/config'; +import type { ColorConfig, Config, ServiceConfig, ServiceGroupConfig } from '$lib/config'; const requiredService: Required = { title: '', @@ -31,12 +30,8 @@ export const requiredConfig: Required = { icon: '', asmask: false, colors: { - light: { - test: '' - }, - dark: { - test: '' - } + light: {}, + dark: {} }, services: [requiredServiceGroup] }; @@ -46,7 +41,6 @@ type SPOJO = Record; export function merge(a: Type, b: SPOJO): Type { const res: Type = { ...a }; for (const [key, value] of Object.entries(b)) { - console.log(key, value, typeof value, typeof res[key]); if ( typeof value != 'object' || res[key] == undefined || @@ -69,15 +63,41 @@ export function merge(a: Type, b: SPOJO): Type { return res; } +const defaultLightConfig: ColorConfig = {}; +defaultLightConfig['highlight-primary'] = '#3367d6'; +defaultLightConfig['highlight-secondary'] = '#4285f4'; +defaultLightConfig['highlight-hover'] = '#5a95f5'; +defaultLightConfig['background'] = '#f5f5f5'; +defaultLightConfig['card-background'] = '#ffffff'; +defaultLightConfig['text'] = '#363636'; +defaultLightConfig['text-header'] = '#ffffff'; +defaultLightConfig['text-title'] = '#303030'; +defaultLightConfig['text-subtitle'] = '#424242'; +defaultLightConfig['card-shadow'] = 'rgba(0, 0, 0, 0.1)'; +defaultLightConfig['link'] = '#3273dc'; +defaultLightConfig['link-hover'] = '#363636'; +defaultLightConfig['background-image'] = ''; + +const defaultDarkConfig: ColorConfig = {}; +defaultDarkConfig['highlight-primary'] = '#3367d6'; +defaultDarkConfig['highlight-secondary'] = '#4285f4'; +defaultDarkConfig['highlight-hover'] = '#5a95f5'; +defaultDarkConfig['background'] = '#131313'; +defaultDarkConfig['card-background'] = '#2b2b2b'; +defaultDarkConfig['text'] = '#eaeaea'; +defaultDarkConfig['text-header'] = '#ffffff'; +defaultDarkConfig['text-title'] = '#fafafa'; +defaultDarkConfig['text-subtitle'] = '#f5f5f5'; +defaultDarkConfig['card-shadow'] = 'rgba(0, 0, 0, 0.4)'; +defaultDarkConfig['link'] = '#3273dc'; +defaultDarkConfig['link-hover'] = '#ffdd57'; +defaultDarkConfig['background-image'] = ''; + export const defaultConfig: Config = { title: 'Flanders', colors: { - light: { - test: '' - }, - dark: { - test: '' - } + light: defaultLightConfig, + dark: defaultDarkConfig }, services: [] @@ -115,14 +135,27 @@ function strip(toStrip: Type, reference: Type): Type { } export function stripPrivateFields(config: Config): Config { - return strip(config, requiredConfig); + const res = strip(config, requiredConfig); + if (config?.colors?.dark != undefined) { + res.colors.dark = config.colors.dark; + } + if (config?.colors?.light != undefined) { + res.colors.light = config.colors.light; + } + return res; } -export const serverConfig: Writable = writable(merge(defaultConfig, configData)); +export function serverConfig(): Config { + return _serverConfig; +} -export const clientConfig: Readable = derived(serverConfig, ($config) => - stripPrivateFields($config) -); +export function clientConfig(): Config { + return _clientConfig; +} + +let _serverConfig = merge(defaultConfig, configData); + +let _clientConfig = stripPrivateFields(_serverConfig); export function watchDymamicConfig() { const __filepath = '/dynamic/config.yml'; @@ -130,7 +163,8 @@ export function watchDymamicConfig() { const reloadConfig = async () => { try { const dynamicConfig = yml.load(await readFile(__filepath, 'utf8')); - serverConfig.set(merge(defaultConfig, dynamicConfig)); + _serverConfig = merge(defaultConfig, dynamicConfig); + _clientConfig = stripPrivateFields(_serverConfig); } catch (err) { console.error('could not read or parse config: ' + err); } diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 115ff9d..7a15a3a 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,13 +1,12 @@ import { clientConfig, serverConfig } from '$lib/server/config'; -import { get } from 'svelte/store'; import type { PageServerLoad } from './$types'; import { getServiceHandler } from '$lib/services/services'; export const load: PageServerLoad = ({ fetch }) => { - const config = get(clientConfig); const serviceData: Array> = []; + const config = clientConfig(); - for (const [i, group] of get(serverConfig).services.entries()) { + for (const [i, group] of serverConfig().services.entries()) { const groupData: Array = []; serviceData.push(groupData); for (const [j, service] of group.items.entries()) {