Skip to content

feat(web_core): expose theme from ComponentContext #1027

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

Merged
jacobsimionato merged 3 commits into from
Apr 9, 2026
+19 −0
Merged

feat(web_core): expose theme from ComponentContext #1027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d25fe0
feat(web_core): expose theme from ComponentContext
ppazosp Mar 29, 2026
647b5e3
Merge branch 'main' into feat/expose-theme-component-context
jacobsimionato Apr 8, 2026
3598baa
Merge branch 'main' into feat/expose-theme-component-context
jacobsimionato Apr 9, 2026
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
16 changes: 16 additions & 0 deletions renderers/web_core/src/v0_9/rendering/component-context.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,20 @@ describe('ComponentContext', () => {
const context = new ComponentContext(mockSurface, componentId, '/foo/bar');
assert.strictEqual(context.dataContext.path, '/foo/bar');
});

it('exposes theme from surface', () => {
const theme = {primaryColor: '#FF5733'};
const themedSurface = new SurfaceModel('themed', {} as any, theme);
const comp = new ComponentModel('c1', 'Text', {});
themedSurface.componentsModel.addComponent(comp);

const context = new ComponentContext(themedSurface, 'c1');
assert.deepStrictEqual(context.theme, theme);
assert.strictEqual(context.theme.primaryColor, '#FF5733');
});

it('exposes empty theme when none provided', () => {
const context = new ComponentContext(mockSurface, componentId);
assert.deepStrictEqual(context.theme, {});
});
});
3 changes: 3 additions & 0 deletions renderers/web_core/src/v0_9/rendering/component-context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export class ComponentContext {
readonly dataContext: DataContext;
/** The collection of all component models for the current surface, allowing lookups by ID. */
readonly surfaceComponents: SurfaceComponentsModel;
/** The theme configuration for the surface this component belongs to. */
readonly theme: any;
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

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

medium

Using any for the theme property forfeits TypeScript's type safety benefits. While the source surface.theme is also of type any, we can improve clarity and type safety here by using a more descriptive type. Record<string, any> makes it clear that theme is an object with string keys, which is a good improvement over a plain any and helps with future maintenance.

Suggested change
readonly theme: any;
readonly theme: Record<string, any>;

Copy link
Copy Markdown
Contributor Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

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

I intentionally matched the type from SurfaceModel.theme (any) to keep them consistent. Changing only this side to Record<string, any> would create a mismatch between the source and the consumer. If the team decides to strengthen the type on SurfaceModel, this should follow along with it.


/**
* Creates a new component context.
Expand All @@ -53,6 +55,7 @@ export class ComponentContext {
}
this.componentModel = model;
this.surfaceComponents = surface.componentsModel;
this.theme = surface.theme;

this.dataContext = new DataContext(surface, dataModelBasePath);
this._actionDispatcher = action =>
Expand Down
Loading