app-experiments: distinct extension points + refs for everything
Co-authored-by: Fredrik Adelöw <freben@gmail.com> Co-authored-by: Johan Haals <johan.haals@gmail.com> Co-authored-by: MT Lewis <mtlewis@users.noreply.github.com> Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
@@ -85,13 +85,15 @@
|
||||
"@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7",
|
||||
"@roadiehq/backstage-plugin-travis-ci": "^2.0.5",
|
||||
"history": "^5.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-use": "^17.2.4",
|
||||
"zen-observable": "^0.10.0"
|
||||
"zen-observable": "^0.10.0",
|
||||
"zod": "^3.21.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@backstage/test-utils": "workspace:^",
|
||||
|
||||
@@ -14,7 +14,10 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ComponentType, createContext } from 'react';
|
||||
import React, { CSSProperties, ComponentType, createContext } from 'react';
|
||||
import { z } from 'zod';
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { Typography } from '@material-ui/core';
|
||||
|
||||
/*
|
||||
|
||||
@@ -29,23 +32,56 @@ App structure:
|
||||
|
||||
// import { redExtensionPointRef } from 'wherever';
|
||||
|
||||
type Extension<TInstanceConfig, TOutput> = {
|
||||
factory(instanceOptions: { id: string; config: TInstanceConfig }): TOutput;
|
||||
type Extension<TInstanceConfig, TSelf> = {
|
||||
factory(instanceOptions: { id: string; config: TInstanceConfig }): TSelf;
|
||||
};
|
||||
|
||||
type ExtensionInstanceConfig<TInstanceConfig, TOutput> = {
|
||||
type ExtensionOptions<
|
||||
TInstanceConfig,
|
||||
TSelf,
|
||||
TPoints extends {
|
||||
[name in string]: {
|
||||
typeRef: ExtensionPointTypeRef<unknown>;
|
||||
configSchema: z.ZodObject<any>;
|
||||
};
|
||||
},
|
||||
> = {
|
||||
mountTypeRef: ExtensionPointTypeRef<TSelf>;
|
||||
points: TPoints;
|
||||
// points: {
|
||||
// [name in keyof TPoints]: {
|
||||
// typeRef: TPoints[name]['typeRef'];
|
||||
// configSchema: z.ZodObject<any>;
|
||||
// };
|
||||
// };
|
||||
factory(instanceOptions: {
|
||||
id: string;
|
||||
config: TInstanceConfig;
|
||||
points: {
|
||||
[name in keyof TPoints]: ExtensionPointRef<TPoints[name]['typeRef']['T']>;
|
||||
};
|
||||
// points: {[name in keyof TPoints]: TPoints[name] extends ExtensionPointTypeRef<infer U> ? ExtensionPointRef<U> : never};
|
||||
}): TSelf;
|
||||
};
|
||||
|
||||
// points: {
|
||||
// top: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) },
|
||||
// bottom: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) },
|
||||
// },
|
||||
|
||||
type ExtensionInstanceConfig<TInstanceConfig, TSelf> = {
|
||||
id: string;
|
||||
config: TInstanceConfig;
|
||||
// what should point be for root
|
||||
point?: string;
|
||||
extension: Extension<TInstanceConfig, TOutput>;
|
||||
mount?: string;
|
||||
extension: Extension<TInstanceConfig, TSelf>;
|
||||
};
|
||||
|
||||
type ExtensionInstance<TOutput> = {
|
||||
type ExtensionInstance<TSelf> = {
|
||||
id: string;
|
||||
// what should point be for root
|
||||
point?: string;
|
||||
output: TOutput;
|
||||
mount?: string;
|
||||
output: TSelf;
|
||||
};
|
||||
|
||||
const BackstageAppContext = createContext<{
|
||||
@@ -53,21 +89,213 @@ const BackstageAppContext = createContext<{
|
||||
}>({ extensionInstances: [] });
|
||||
|
||||
const container = {
|
||||
createExtension<TInstanceConfig, TOutput>(extensionOptions: {
|
||||
render: (options: { id: string; config: TInstanceConfig }) => TOutput;
|
||||
}): Extension<TInstanceConfig, TOutput> {
|
||||
createExtension<
|
||||
TInstanceConfig,
|
||||
TSelf,
|
||||
TPoints extends {
|
||||
[name in string]: {
|
||||
typeRef: ExtensionPointTypeRef<unknown>;
|
||||
configSchema: z.ZodObject<any>;
|
||||
};
|
||||
},
|
||||
>(
|
||||
extensionOptions: ExtensionOptions<TInstanceConfig, TSelf, TPoints>,
|
||||
): Extension<TInstanceConfig, TSelf> {
|
||||
return {
|
||||
factory(instanceOptions) {
|
||||
return extensionOptions.render({
|
||||
return extensionOptions.factory({
|
||||
id: instanceOptions.id,
|
||||
config: instanceOptions.config,
|
||||
points: mapValues(extensionOptions.points, (point, name) =>
|
||||
createExtensionPointRef(name, point.typeRef),
|
||||
),
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const ExtensionInstanceDerp = (props: { id: string }) => {
|
||||
function useExtensionInstanceChildren<T>(
|
||||
id: string,
|
||||
point: ExtensionPointRef<T>,
|
||||
): T[] {
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
return extensionInstances
|
||||
.filter(i => i.mount === `${id}/${point.name}`)
|
||||
.map(extensionInstance => extensionInstance.output as T);
|
||||
}
|
||||
|
||||
const ExtensionInstanceChildren = (props: {
|
||||
id: string;
|
||||
point: ExtensionPointRef<ComponentType>;
|
||||
}) => {
|
||||
const outputs = useExtensionInstanceChildren(props.id, props.point);
|
||||
|
||||
return (
|
||||
<>
|
||||
{outputs.map(Component => (
|
||||
<Component />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const coreExtensionPointTypes = {
|
||||
component: createExtensionPointTypeRef<ComponentType>(),
|
||||
styles: createExtensionPointTypeRef<CSSProperties>(),
|
||||
};
|
||||
|
||||
const Container = container.createExtension({
|
||||
points: {
|
||||
default: {
|
||||
typeRef: coreExtensionPointTypes.component,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory:
|
||||
({ id, points }) =>
|
||||
() =>
|
||||
<ExtensionInstanceChildren id={id} point={points.default} />,
|
||||
});
|
||||
|
||||
interface ExtensionPointTypeRef<T> {
|
||||
T: T;
|
||||
$$type: 'extension-point-type';
|
||||
}
|
||||
|
||||
function createExtensionPointTypeRef<T>(): ExtensionPointTypeRef<T> {
|
||||
return { T: null as T, $$type: 'extension-point-type' };
|
||||
}
|
||||
|
||||
interface ExtensionPointRef<T> {
|
||||
name: string;
|
||||
typeRef: ExtensionPointTypeRef<T>;
|
||||
$$type: 'extension-point';
|
||||
}
|
||||
|
||||
function createExtensionPointRef<T>(
|
||||
name: string,
|
||||
typeRef: ExtensionPointTypeRef<T>,
|
||||
): ExtensionPointRef<T> {
|
||||
return { name, typeRef, $$type: 'extension-point' };
|
||||
}
|
||||
|
||||
// const splitLayoutTopExtensionPointRef = createExtensionPointRef({
|
||||
// type: componentExtensionPointTypeRef,
|
||||
// point: 'top'
|
||||
// })
|
||||
|
||||
// const splitLayoutBottomExtensionPointRef = createExtensionPointRef({
|
||||
// type: componentExtensionPointTypeRef,
|
||||
// point: 'bottom'
|
||||
// })
|
||||
|
||||
const SplitLayout = container.createExtension({
|
||||
points: {
|
||||
top: {
|
||||
typeRef: coreExtensionPointTypes.component,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
bottom: {
|
||||
typeRef: coreExtensionPointTypes.component,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory:
|
||||
({ id, points }) =>
|
||||
() => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexFlow: 'column nowrap',
|
||||
position: 'absolute',
|
||||
top: 120,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: '1 0 0px', border: '1px solid blue' }}>
|
||||
<ExtensionInstanceChildren id={id} point={points.top} />
|
||||
</div>
|
||||
<div style={{ flex: '1 0 0px', border: '1px solid orange' }}>
|
||||
<ExtensionInstanceChildren id={id} point={points.bottom} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// const SnazzySplitLayout = container.replaceExtension(SplitLayout, {
|
||||
// factory: ({ id, points }) => {
|
||||
// ...
|
||||
// }
|
||||
// })
|
||||
|
||||
const Box = container.createExtension({
|
||||
points: {},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory: ({ config }: { config: { color: string } }) => {
|
||||
return () => (
|
||||
/**
|
||||
* If I need stuff, I have to get it from context.
|
||||
*/
|
||||
<div style={{ background: config.color, width: 100, height: 100 }}>
|
||||
{config.color}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StyledBox = container.createExtension({
|
||||
points: {
|
||||
style: {
|
||||
typeRef: coreExtensionPointTypes.styles,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory: ({ id, points }) => {
|
||||
return () => {
|
||||
const [style] = useExtensionInstanceChildren(id, points.style);
|
||||
|
||||
return <div style={style}>Styled box</div>;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const BoxStyle = container.createExtension({
|
||||
points: {},
|
||||
mountTypeRef: coreExtensionPointTypes.styles,
|
||||
factory({ config }: { config: { color: string } }) {
|
||||
return {
|
||||
borderColor: config.color,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '5px',
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
function createExtensionInstances(
|
||||
instanceConfigs: ExtensionInstanceConfig<unknown, unknown>[],
|
||||
): ExtensionInstance<unknown>[] {
|
||||
return instanceConfigs.map(instanceConfig => ({
|
||||
id: instanceConfig.id,
|
||||
mount: instanceConfig.mount,
|
||||
output: instanceConfig.extension.factory({
|
||||
id: instanceConfig.id,
|
||||
config: instanceConfig.config,
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
const ExtensionInstanceRenderer = (props: { id: string }) => {
|
||||
const { id } = props;
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
@@ -83,74 +311,45 @@ const ExtensionInstanceDerp = (props: { id: string }) => {
|
||||
return <ComponentInstance />;
|
||||
};
|
||||
|
||||
const ExtensionPointInstance = (props: { id: string }) => {
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
return (
|
||||
<>
|
||||
{extensionInstances
|
||||
.filter(i => i.point === props.id)
|
||||
.map(extensionInstance => (
|
||||
<ExtensionInstanceDerp
|
||||
key={extensionInstance.id}
|
||||
id={extensionInstance.id}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Container = container.createExtension({
|
||||
render: ({ id }) => <ExtensionPointInstance id={id} />,
|
||||
});
|
||||
|
||||
const Box = container.createExtension({
|
||||
render: ({ config }: { config: { color: string } }) => {
|
||||
return (
|
||||
<div style={{ background: config.color, width: 100, height: 100 }}>
|
||||
{config.color}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
function createExtensionInstances(
|
||||
instanceConfigs: ExtensionInstanceConfig<unknown, unknown>[],
|
||||
): ExtensionInstance<unknown>[] {
|
||||
return instanceConfigs.map(instanceConfig => ({
|
||||
id: instanceConfig.id,
|
||||
point: instanceConfig.point,
|
||||
output: instanceConfig.extension.factory({
|
||||
id: instanceConfig.id,
|
||||
config: instanceConfig.config,
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
export function Experiment1() {
|
||||
// const element = useExtension("red");
|
||||
|
||||
const extensionInstances = createExtensionInstances([
|
||||
{ id: 'root', config: {}, extension: Container },
|
||||
{ id: 'nestedRoot', point: 'root', config: {}, extension: Container },
|
||||
{
|
||||
id: 'layout',
|
||||
mount: 'root/default', // Maybe can omit /default here?
|
||||
config: {},
|
||||
extension: SplitLayout,
|
||||
},
|
||||
{
|
||||
id: 'red',
|
||||
point: 'nestedRoot',
|
||||
mount: 'layout/top',
|
||||
config: { color: 'red' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'green',
|
||||
point: 'nestedRoot',
|
||||
mount: 'layout/top',
|
||||
config: { color: 'green' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'blue',
|
||||
point: 'nestedRoot',
|
||||
mount: 'layout/bottom',
|
||||
config: { color: 'blue' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'styled-box',
|
||||
mount: 'layout/bottom',
|
||||
config: {},
|
||||
extension: StyledBox,
|
||||
},
|
||||
{
|
||||
id: 'styled-box.style',
|
||||
mount: 'styled-box/style',
|
||||
config: { color: 'purple' },
|
||||
extension: BoxStyle,
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
@@ -161,8 +360,10 @@ export function Experiment1() {
|
||||
}}
|
||||
>
|
||||
<h1>Experiment 1</h1>
|
||||
<p>This is an experiment to see how the app-experiments package works.</p>
|
||||
<ExtensionInstanceDerp id="root" />
|
||||
<Typography>
|
||||
This is an experiment to see how the app-experiments package works.
|
||||
</Typography>
|
||||
<ExtensionInstanceRenderer id="root" />
|
||||
</BackstageAppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user