Theme Middleware #392
Theme Middleware #392
Conversation
src/core/middleware/theme.ts
Outdated
| import { SupportedClassName } from '../interfaces'; | ||
| import Injector from '../Injector'; | ||
|
|
||
| export interface ClassNames { |
There was a problem hiding this comment.
These interfaces should be reused from the existing Themed class
src/core/middleware/theme.ts
Outdated
| cache.set(css, theme); | ||
| return theme; | ||
| }, | ||
| set(css?: Theme) { |
There was a problem hiding this comment.
This API is confusing as it's not the opposite of get, it actually sets the current theme - also need an API to register a theme, registering a theme would make it available and only set it if no theme is currently set.
agubler
force-pushed
the
theme-middleware
branch
from
4d3d876
to
d7c61d9
Compare
| @@ -34,6 +34,10 @@ export class RegistryHandler extends Evented<RegistryHandlerEventMap> { | |||
| this.baseRegistry = baseRegistry; | |||
| } | |||
|
|
|||
| public get base(): Registry { | |||
There was a problem hiding this comment.
Exposes the base registry - this is the app level repository.
| @@ -813,7 +813,7 @@ export function renderer(renderer: () => RenderResult): Renderer { | |||
| merge: true, | |||
| transition: transitionStrategy, | |||
| domNode: global.document.body, | |||
| registry: null | |||
| registry: new Registry() | |||
There was a problem hiding this comment.
Add a Registry by default to the application if one is not passed by the user - this means things like the theme middleware will work without passing a registry to the mount
| @@ -26,7 +26,7 @@ export function reference(previousProperty: any, newProperty: any): PropertyChan | |||
| }; | |||
| } | |||
|
|
|||
| export function shallow(previousProperty: any, newProperty: any): PropertyChangeRecord { | |||
| export function shallow(previousProperty: any, newProperty: any, depth = 0): PropertyChangeRecord { | |||
There was a problem hiding this comment.
Adds support to choose the depth of the diff... defaults to 0 which is the equivalent of the current behaviour
| const keys = [...themeKeys.values()]; | ||
| for (let i = 0; i < keys.length; i++) { | ||
| let key = keys[i]; | ||
| result = shallow(current.classes[key], next.classes[key], 1).changed; |
There was a problem hiding this comment.
Diffs the classes for every key that has been registered by the widget, the classes object is nested three levels so requires a slightly deeper diff than the standard shallow diff. To support this shallow accepts a depth param to control the level of the diff.
agubler
force-pushed
the
theme-middleware
branch
from
2a5c3ae
to
f90a24e
Compare
Type: feature
The following has been addressed in the PR:
prettieras per the readme code style guidelinesDescription:
Theme middleware to work to determine the correct classes based on the current theme & set themes.
Resolves #371