Skip to content

Commit dd9d028

Browse files
jonathannorrisjonathannorris
authored
feat: update how react technology selection is handled (#982)
Signed-off-by: Jonathan Norris <[email protected]>
1 parent d258423 commit dd9d028

File tree

13 files changed

+128
-36
lines changed

13 files changed

+128
-36
lines changed

‎src/datasets/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Controls the number of items shown on the ecosystem page.
2-
export const SEARCH_ITEMS_PER_PAGE = 16;
2+
export const SEARCH_ITEMS_PER_PAGE = 20;
33

44
/**
55
* Features map to the anchors found in the features column on the SDK README template.

‎src/datasets/hooks/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const ECOSYSTEM_HOOKS: EcosystemElement[] = [OpenTelemetry, Validation, D
1313
type: 'Hook',
1414
logo: hook.logo,
1515
href,
16+
allTechnologies: [technology],
1617
technology,
1718
vendorOfficial,
1819
category,

‎src/datasets/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const ECOSYSTEM: EcosystemElement[] = [...ECOSYSTEM_SDKS, ...ECOSYSTEM_PR
88
// Creates a unique id per item for the search index
99
id: `${s.type}/${s.category}/${s.technology}/${s.vendor}/${s.href}`,
1010
...s,
11-
})
11+
}),
1212
);
1313

1414
export const TECHNOLOGY_COLOR_MAP: Record<Technology, string> = {
@@ -22,6 +22,9 @@ export const TECHNOLOGY_COLOR_MAP: Record<Technology, string> = {
2222
Swift: 'bg-orange-50 text-orange-600 ring-orange-500/10',
2323
Rust: 'bg-pink-50 text-pink-600 ring-pink-500/10',
2424
Ruby: 'bg-red-50 text-red-600 ring-red-500/10',
25+
React: 'bg-teal-50 text-teal-600 ring-teal-500/10',
26+
Angular: 'bg-red-50 text-red-600 ring-red-500/10',
27+
NestJS: 'bg-pink-50 text-pink-600 ring-pink-500/10',
2528
};
2629

2730
export const TYPE_COLOR_MAP: Record<Type, string> = {

‎src/datasets/providers/devcycle.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,18 @@ export const DevCycle: Provider = {
3737
},
3838
{
3939
technology: 'React',
40+
parentTechnology: 'JavaScript',
4041
vendorOfficial: true,
4142
href: 'https://docs.devcycle.com/sdk/client-side-sdks/react/react-openfeature',
4243
category: ['Client'],
4344
},
45+
{
46+
technology: 'Angular',
47+
parentTechnology: 'JavaScript',
48+
vendorOfficial: true,
49+
href: 'https://docs.devcycle.com/sdk/client-side-sdks/angular/angular-install',
50+
category: ['Client'],
51+
},
4452
{
4553
technology: 'PHP',
4654
vendorOfficial: true,

‎src/datasets/providers/index.ts‎

Lines changed: 82 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ComponentType, SVGProps } from 'react';
2-
2+
import { Category, EcosystemElement, Technology } from '../types';
33
import { Bucket } from './bucket';
44
import { CloudBees } from './cloudbees';
55
import { ConfigCat } from './configcat';
@@ -19,13 +19,27 @@ import { Statsig } from './statsig';
1919
import { FeatBit } from './featbit';
2020
import { UserDefaults } from './user-defaults';
2121
import { GrowthBook } from './growthbook';
22-
import { Category, EcosystemElement, Technology } from '../types';
2322
import { MultiProvider } from './multi-provider';
2423
import { Hypertune } from './hypertune';
2524
import { Confidence } from './confidence';
2625
import { ConfigBee } from './configbee';
2726
import { Tggl } from './tggl';
2827
import { OFREP } from './ofrep';
28+
import { SDKS } from '../sdks';
29+
30+
const childTechnologyMap = SDKS.reduce(
31+
(acc, sdk) => {
32+
if (sdk.parentTechnology) {
33+
const key = `${sdk.category}:${sdk.parentTechnology}`;
34+
if (!acc[key]) {
35+
acc[key] = [];
36+
}
37+
acc[key].push(sdk.technology);
38+
}
39+
return acc;
40+
},
41+
{} as Record<string, Technology[]>,
42+
);
2943

3044
export const PROVIDERS: Provider[] = [
3145
Bucket,
@@ -55,27 +69,66 @@ export const PROVIDERS: Provider[] = [
5569
OFREP,
5670
];
5771

72+
// Map of provider name to technology to child technologies
73+
const PROVIDER_TECHNOLOGY_MAP = PROVIDERS.reduce(
74+
(acc, provider) => {
75+
const techMap: Record<string, string[]> = {};
76+
77+
provider.technologies.forEach(({ technology, parentTechnology }) => {
78+
if (parentTechnology) {
79+
if (!techMap[parentTechnology]) {
80+
techMap[parentTechnology] = [];
81+
}
82+
techMap[parentTechnology].push(technology);
83+
}
84+
});
85+
86+
if (Object.keys(techMap).length > 0) {
87+
acc[provider.name] = techMap;
88+
}
89+
90+
return acc;
91+
},
92+
{} as Record<string, Record<string, string[]>>,
93+
);
94+
5895
export const ECOSYSTEM_PROVIDERS: EcosystemElement[] = PROVIDERS.map((provider) => {
59-
return provider.technologies.map(({ category, href, technology, vendorOfficial }): EcosystemElement => {
60-
return {
61-
vendor: provider.name,
62-
title:
63-
technology === 'JavaScript'
64-
? `${provider.name} ${technology} ${category[0] === 'Client' ? 'Web' : 'Node.js'} Provider`
65-
: `${provider.name} ${technology} ${category} Provider`,
66-
description: !provider.description
67-
? createDefaultDescription(provider.name, vendorOfficial)
68-
: typeof provider.description === 'string'
69-
? provider.description
70-
: provider.description(vendorOfficial),
71-
type: 'Provider',
72-
logo: provider.logo,
73-
href,
74-
technology,
75-
vendorOfficial,
76-
category,
77-
};
78-
});
96+
return provider.technologies.map(
97+
({ category, href, technology, parentTechnology, vendorOfficial }): EcosystemElement => {
98+
// Create a list of supported technologies for a provider, for example: a base Web Provider will power React / Angular SDKs.
99+
// Filter out creating multiple entries for if a provider has a child provider for the base web provider.
100+
const allTechnologies = [technology, parentTechnology].filter(Boolean);
101+
const key = `${category[0]}:${technology}`;
102+
if (childTechnologyMap[key]) {
103+
allTechnologies.push(
104+
...childTechnologyMap[key].filter((t) => {
105+
return !PROVIDER_TECHNOLOGY_MAP[provider.name]?.[technology]?.includes(t);
106+
}),
107+
);
108+
}
109+
110+
return {
111+
vendor: provider.name,
112+
title:
113+
technology === 'JavaScript' || parentTechnology === 'JavaScript'
114+
? `${provider.name} ${technology} ${category[0] === 'Client' ? 'Web' : 'Node.js'} Provider`
115+
: `${provider.name} ${technology} ${category} Provider`,
116+
description: !provider.description
117+
? createDefaultDescription(provider.name, vendorOfficial)
118+
: typeof provider.description === 'string'
119+
? provider.description
120+
: provider.description(vendorOfficial),
121+
type: 'Provider',
122+
logo: provider.logo,
123+
href,
124+
allTechnologies,
125+
technology,
126+
parentTechnology,
127+
vendorOfficial,
128+
category,
129+
};
130+
},
131+
);
79132
}).flat();
80133

81134
function createDefaultDescription(vendor: string, official: boolean): string {
@@ -87,7 +140,13 @@ function createDefaultDescription(vendor: string, official: boolean): string {
87140
export type Provider = {
88141
name: string;
89142
logo: ComponentType<SVGProps<SVGSVGElement>>;
90-
technologies: Array<{ technology: Technology; vendorOfficial: boolean; href: string; category: Category[] }>;
143+
technologies: Array<{
144+
technology: Technology;
145+
parentTechnology?: Technology;
146+
vendorOfficial: boolean;
147+
href: string;
148+
category: Category[];
149+
}>;
91150
description?: string | ((vendorSupported: boolean) => string);
92151
excludeFromLandingPage?: boolean;
93152
};

‎src/datasets/sdks/angular.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export const Angular: SDK = {
99
branch: 'main',
1010
folder: '/packages/angular/projects/angular-sdk',
1111
logoKey: 'angular-no-fill.svg',
12-
technology: 'JavaScript',
12+
technology: 'Angular',
13+
parentTechnology: 'JavaScript',
1314
href: '/docs/reference/technologies/client/web/angular',
1415
includeInSupportMatrix: false,
1516
};

‎src/datasets/sdks/ecosystem.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ export const ECOSYSTEM_SDKS: EcosystemElement[] = SDKS.map((sdk) => {
4444
category: [sdk.category],
4545
href: sdk.href,
4646
logo: logo,
47+
allTechnologies: [sdk.technology, sdk.parentTechnology].filter(Boolean),
4748
technology: sdk.technology,
49+
parentTechnology: sdk.parentTechnology,
4850
type: 'SDK',
4951
vendorOfficial: false,
5052
};

‎src/datasets/sdks/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ export type SDK = {
6969
* Friendly name of the technology of the SDK.
7070
*/
7171
technology: Technology;
72+
/**
73+
* The parent technology of the SDK. For example, JavaScript is the parent technology of React and Angular.
74+
*/
75+
parentTechnology?: Technology;
7276
/**
7377
* Link to the SDK documentation
7478
*/

‎src/datasets/sdks/nestjs.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export const Nestjs: SDK = {
99
branch: 'main',
1010
folder: '/packages/nest',
1111
logoKey: 'nestjs-no-fill.svg',
12-
technology: 'JavaScript',
12+
technology: 'NestJS',
13+
parentTechnology: 'JavaScript',
1314
href: '/docs/reference/technologies/server/javascript/nestjs',
1415
includeInSupportMatrix: false,
1516
};

‎src/datasets/sdks/react.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const React: SDK = {
1010
folder: '/packages/react',
1111
logoKey: 'react-no-fill.svg',
1212
technology: 'React',
13+
parentTechnology: 'JavaScript',
1314
href: '/docs/reference/technologies/client/web/react',
1415
includeInSupportMatrix: false,
1516
};

0 commit comments

Comments
 (0)