JSS Themes for CONNECTIVE HTML

Static themes for CONNECTIVE HTML-based frontends using JSS.

Installation

npm i @connectv/jss-theme

Usage

Client Side

// index.tsx
import { theme } from '@connectv/jss-theme';
import { Renderer } from '@connectv/html';

import { MyComp, MyCompStyle } from './component';


const DarkTheme = theme({                          // --> define your theme
  bgcolor: 'black',
  textcolor: 'red'
});

const renderer = new Renderer().plug(DarkTheme);   // --> plug the theme into your renderer
renderer.render(<MyComp/>).on(document.body);      // --> render your content

In your component code:

// component.tsx
import { themedStyle } from '@connectv/jss-theme';

export const MyCompStyle = themedStyle(theme => ({ // --> define your theme-based style
  div: {
    background: theme.bgcolor,
    color: theme.textcolor,
    padding: '8px',
    'border-radius': '3px'
  }
}));

export function MyComp(_, renderer) {
  const classes = this.theme.classes(MyCompStyle); // --> get the css classes for your style from the theme
  return <div class={classes.div}>Halo!</div>      // --> use those classes
}

► TRY IT!

In your component, you can also use this.theme.styled() rendering plugin to automatically style any rendered element with css classes with the same tag name:

...

export function MyComp(_, renderer) {
  renderer = renderer.plug(this.theme.styled(MyCompStyle)); // --> plug the auto-style plugin
  return <div>Halo!</div>                                   // --> class 'div' applied to <div>s automatically!
}

Server Side

// index.tsx
import { theme } from '@connectv/jss-theme';
import { compile } from '@connectv/sdh';

import { MyComp } from './component';


const DarkTheme = theme({                          // --> define your theme
  bgcolor: 'black',
  textcolor: 'red'
});

compile(renderer => <MyComp/>, DarkTheme)          // --> tell `compile()` to plug your theme
.save('dist/index.html');

► TRY IT!

Prefetching Component Styles

In the client-side example, a particular style is attached to the document the first time it is requested by a component. This can have performance implications since in the middle of your app running a never-rendered-before component might cause a large stylesheet to be attached to the document. To avoid this situation, you can simply fetch all your styles and add them to your theme before hand so when the component requests the styles, the stylesheet is already attached to the document:

// index.tsx
import { theme } from '@connectv/jss-theme';
import { MyCompStyle } from './component';

...

DarkTheme.add(MyCompStyle);   // --> ensure that the stylesheet is attached

...

Strict Typing

You can also specify the type of the theme object that is to be passed around and/or to be expected by components:

// theme.type.ts

export interface Theme {
  bgcolor: string;
  textcolor: string;
}

// index.tsx
import { theme } from '@connectv/jss-theme';
import { Theme } from './theme.type';

const DarkTheme = theme<Theme>({
  bgcolor: 'black',
  textcolor: 'red',
});

...

// component.tsx
import { Theme } from './theme.type';
import { themedStyle, ThemedComponentThis } from '@connectv/jss-theme';

export const MyCompStyle = themedStyle<Theme>(theme => ({
  ...
}));

export function MyComp(this: ThemedComponentThis<Theme>, _, renderer) {
  ...
}