fix: remove type assertions from logger (#384)

fix(log): remove type assertions

extract common team styles out of team ones
extract `getTeamSubscriptions`, which is type-safe

scripts/generateSvg.logger.teams.ts

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { teamStyles } from '../src/logger/teamStyles';
+import { commonStyle, teamStyles } from '../src/logger/teamStyles';
 
 fs.writeFileSync(__dirname + '/../static/logger.svg', generateSvg());
 
@@ -72,8 +72,8 @@ function generateSvg(): string {
 		}
 
 		.common {
-			background-color: ${teamStyles.common.background};
-			color: ${teamStyles.common.font};
+			background-color: ${commonStyle.common.background};
+			color: ${commonStyle.common.font};
 		}
 	</style>
 	<foreignObject x="0" y="0" width="${width}" height="${height}">

src/logger/@types/logger.ts

@@ -1,7 +1,7 @@
-import type { teamStyles } from '../teamStyles';
+import type { commonStyle, teamStyles } from '../teamStyles';
 
 export type Teams<K extends string> = Record<K, Record<string, string>>;
 export type LogCall = (team: TeamName, ...args: unknown[]) => void;
 export type TeamSubscription = (arg: TeamName) => void;
-export type TeamStyle = keyof typeof teamStyles;
-export type TeamName = Exclude<TeamStyle, 'common'>;
+export type TeamStyle = TeamName | keyof typeof commonStyle;
+export type TeamName = keyof typeof teamStyles;

src/logger/log.ts

@@ -1,21 +1,33 @@
+import { isString } from '../isString/isString';
 import { storage } from '../storage/storage';
-import type { LogCall, TeamStyle, TeamSubscription } from './@types/logger';
+import type {
+	LogCall,
+	TeamName,
+	TeamStyle,
+	TeamSubscription,
+} from './@types/logger';
 import { STORAGE_KEY } from './storage-key';
-import { teamStyles } from './teamStyles';
+import { commonStyle, isTeam, teamStyles } from './teamStyles';
+
+const allStyles = { ...teamStyles, ...commonStyle };
 
 const messageStyle = (teamStyle: TeamStyle): string => {
-	const { background, font } = teamStyles[teamStyle];
+	const { background, font } = allStyles[teamStyle];
 	return `background: ${background}; color: ${font}; padding: 2px 3px; border-radius:3px`;
 };
 
+const getTeamSubscriptions = (): TeamName[] => {
+	const teams: unknown = storage.local.get(STORAGE_KEY);
+	if (!isString(teams)) return [];
+	return teams.split(',').filter(isTeam);
+};
+
 /**
  * Subscribe to a team’s log
  * @param team the team’s unique ID
  */
 const subscribeTo: TeamSubscription = (team) => {
-	const teamSubscriptions: string[] = storage.local.get(STORAGE_KEY)
-		? (storage.local.get(STORAGE_KEY) as string).split(',')
-		: [];
+	const teamSubscriptions: string[] = getTeamSubscriptions();
 	if (!teamSubscriptions.includes(team)) teamSubscriptions.push(team);
 	storage.local.set(STORAGE_KEY, teamSubscriptions.join(','));
 	log(team, '🔔 Subscribed, hello!');
@@ -27,11 +39,9 @@ const subscribeTo: TeamSubscription = (team) => {
  */
 const unsubscribeFrom: TeamSubscription = (team) => {
 	log(team, '🔕 Unsubscribed, good-bye!');
-	const teamSubscriptions: string[] = (
-		storage.local.get(STORAGE_KEY) as string
-	)
-		.split(',')
-		.filter((t) => t !== team);
+	const teamSubscriptions: string[] = getTeamSubscriptions().filter(
+		(t) => t !== team,
+	);
 	storage.local.set(STORAGE_KEY, teamSubscriptions.join(','));
 };
 
@@ -48,12 +58,8 @@ if (typeof window !== 'undefined') {
 /**
  * Runs in all environments, if local storage values are set.
  */
-
 export const log: LogCall = (team, ...args) => {
-	// TODO add check for localStorage
-	if (!((storage.local.get(STORAGE_KEY) || '') as string).includes(team)) {
-		return;
-	}
+	if (!getTeamSubscriptions().includes(team)) return;
 
 	const styles = [messageStyle('common'), '', messageStyle(team), ''];
 

src/logger/logger.test.ts

@@ -102,9 +102,7 @@ describe('Add and remove teams', () => {
 	});
 
 	it('should return the list of registered teams', () => {
-		let teams: string[] = [];
-		if (window.guardian?.logger) teams = window.guardian.logger.teams();
-		console.log(teams);
+		const teams = window.guardian?.logger?.teams();
 		expect(Array.isArray(teams)).toBe(true);
 		expect(teams).toContain('cmp');
 	});

src/logger/teamStyles.ts

@@ -1,14 +1,20 @@
+import type { TeamName } from './@types/logger';
+
+/** Common Guardian blue label. Do not edit */
+const commonStyle = {
+	common: {
+		background: '#052962',
+		font: '#ffffff',
+	},
+} as const;
+
 /**
  * You can only subscribe to teams from this list.
  * Add your team name below to start logging.
  *
  * Make sure your label has a contrast ratio of 4.5 or more.
  * */
-export const teamStyles = {
-	common: {
-		background: '#052962',
-		font: '#ffffff',
-	},
+const teamStyles = {
 	commercial: {
 		background: '#77EEAA',
 		font: '#004400',
@@ -38,3 +44,8 @@ export const teamStyles = {
 		font: '#ffffff',
 	},
 } as const;
+
+const isTeam = (team: string): team is TeamName =>
+	Object.keys(teamStyles).includes(team);
+
+export { commonStyle, teamStyles, isTeam };