Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the Config context #11742

Merged
merged 7 commits into from
Jul 2, 2024
Merged

Improve the Config context #11742

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8ff1c2b
refactor(config): a single instance on the page
mxdvl Jun 27, 2024
383c2e0
feat: add editionId to Config
mxdvl Jun 27, 2024
2ff2fd2
chore(lint): import order
mxdvl Jun 27, 2024
2aa4076
Merge branch 'main' into mxdvl/config-refactor
mxdvl Jun 27, 2024
d537543
fix: remove testing lines
mxdvl Jun 27, 2024
2975e69
chore: easier on the eyes
mxdvl Jun 27, 2024
423bfa5
chore: merge origin/main locally
mxdvl Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dotcom-rendering/src/client/discussion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const forceHydration = async (): Promise<void> => {

// Read the props and config from where they have been serialised in the dom using an Island
const props = getProps(guElement);
const config = getConfig(guElement);
const config = getConfig();

// Now that we have the props as an object, tell Discussion we want it to expand itself
props.expanded = true;
Expand Down
20 changes: 11 additions & 9 deletions dotcom-rendering/src/client/islands/getConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import type { Config } from '../../types/configContext';

let config: Config | undefined;
/**
* getConfig takes the given html element and returns its config attribute
* Reads the config from a JSON script tag,
* or reuse the memoised value if it exists.
*
* We expect the element to always be a `gu-*` custom element
*
* @param marker : The html element that we want to read the config attribute from;
* @returns
* @returns {Config} an immutable, global config
*/
export const getConfig = (marker: HTMLElement): Config => {
const serialised = marker.getAttribute('config');
export const getConfig = (): Readonly<Config> => {
if (config) return config;

const serialised = document.querySelector('script#config')?.innerHTML;

try {
if (!serialised) {
throw Error('Unable to fetch config attribute from marker element');
throw Error('Unable to fetch config attribute from #config');
} else {
return JSON.parse(serialised) as Config;
config = JSON.parse(serialised) as Config;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the keen beans amongs you: consider using valibot to parse this?

return config;
}
} catch (error: unknown) {
console.error(
Expand Down
2 changes: 1 addition & 1 deletion dotcom-rendering/src/client/islands/initHydration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const initHydration = async (
): Promise<void> => {
const name = getName(element);
const props = getProps(element);
const config = getConfig(element);
const config = getConfig();
const priority = getPriority(element);

if (!name) return;
Expand Down
2 changes: 2 additions & 0 deletions dotcom-rendering/src/components/ArticleMeta.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ describe('ArticleMeta', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<ArticleMeta
Expand Down Expand Up @@ -68,6 +69,7 @@ describe('ArticleMeta', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<ArticleMeta
Expand Down
5 changes: 5 additions & 0 deletions dotcom-rendering/src/components/BylineLink.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ describe('BylineLink', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<BylineLink
Expand Down Expand Up @@ -153,6 +154,7 @@ describe('BylineLink', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<BylineLink
Expand Down Expand Up @@ -198,6 +200,7 @@ describe('BylineLink', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<BylineLink
Expand Down Expand Up @@ -239,6 +242,7 @@ describe('BylineLink', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<BylineLink
Expand Down Expand Up @@ -271,6 +275,7 @@ describe('BylineLink', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<BylineLink
Expand Down
3 changes: 3 additions & 0 deletions dotcom-rendering/src/components/ConfigContext.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,21 @@ describe('ConfigContext', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
},
{
renderingTarget: 'Apps',
darkModeAvailable: true,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
},
{
renderingTarget: 'Apps',
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'INT',
},
] as const satisfies ReadonlyArray<Config>)(
'useConfig hook provides correct config: "%o"',
Expand Down
2 changes: 2 additions & 0 deletions dotcom-rendering/src/components/Contributor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ describe('Contributor', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Contributor
Expand Down Expand Up @@ -56,6 +57,7 @@ describe('Contributor', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Contributor
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/Discussion/Discussion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ describe('App', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Discussion
Expand Down
6 changes: 6 additions & 0 deletions dotcom-rendering/src/components/Dropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand All @@ -69,6 +70,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand All @@ -94,6 +96,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand All @@ -118,6 +121,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand All @@ -144,6 +148,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand Down Expand Up @@ -171,6 +176,7 @@ describe('Dropdown', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<Dropdown
Expand Down
3 changes: 3 additions & 0 deletions dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ describe('GuideAtom', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<GuideAtom {...defaultStory} />
Expand All @@ -39,6 +40,7 @@ describe('GuideAtom', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<GuideAtom {...defaultStory} />
Expand Down Expand Up @@ -66,6 +68,7 @@ describe('GuideAtom', () => {
darkModeAvailable: false,
updateLogoAdPartnerSwitch: false,
assetOrigin: '/',
editionId: 'UK',
}}
>
<GuideAtom {...defaultStory} />
Expand Down
Loading
Loading