Skip to content

CONNECT-platform/connective-jss-theme

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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) {
  ...
}

About

Static themes for CONNECTIVE HTML-based frontends using JSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published