Neoanthropic Preternatural Murmurings

    jss-theme-angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.10 • Public • Published

    JSS Theme Angular

    npm version GitHub license Size Downloads

    Angular bindings for jss-theme package.

    Deprecated

    This package is deprecated for Angular version starting from 9. with Ivy enabled. Please refer to this section for new usage.

    Demo & docs

    Demo and docs could be found here.

    Example in sandbox could be found here.

    Notes

    Include necessary typescript typings.

    Update

    As stated below both @NgStyled decorator and NgStyledComponent works bad w/ Ivy and aot mode.

    To overcome this since version v1.1.1 it is intoduced ThemeProvide, UseStyles and createJssStyledComponent section.

    Steps to easily migrate old projects:

    // NgStyledComponent.ts
    import { createJssStyledComponent, ThemeProvide } from 'jss-theme'
    import { theme } from './path/to/your/app/theme';
    
    const themeProvider = new ThemeProvide(theme);
    
    const NgStyledComponent = createJssStyledComponent(themeProvider);

    Then in your app just replace old NgStyledComponent with new:

    // import { NgStyledComponent } from 'jss-theme-angular';
    import { NgStyledComponent } from './path/to/your/app/NgStyledComponent';
    
    @Component({ ... })
    class SomeComponent extends NgStyledComponent {
      constructor() { super(styles); }
    }

    !!! NOTE is is also necessary to change invocations of updateTheme() from jss-theme package with themeProvider.updateTheme() in order for themeProvider track theme changes.

    Another way is to use UseStyles decorator.

    Important

    This bindings correctly works w/ Angular 8 and 9 without Ivy.

    In Ivy there were introduced breaking changes so that it is impossible to use as earlier custom decorators / extend classes. Here is an Issue.

    Still it is possible to use this JSS Theming solution w/ Angular with Ivy, just doing manually that work, which is done under @NgStyled and NgStyledComponent.

    Usage

    @NgStyled(styles, options?, theme?)

    Decorator for usage with Angular components. Internally creates property 'classes' and puts classNames for compiled styles into it and watches for theme updates.

    NOTE! Because of --aot Angular compiler, it is necessary to at least implement those methods, which are used in custom decorator in Component. So for styles w/ theme ( aka: makeStyles((theme) => ({ ... })) ) in is necessary implement both ngOnInit and ngDoCheck. For styles which do not depend on theme -> only ngOnInit.

    If one of necessary methods won't be provided -> it will throw an Error to prevent bugs in future.

    OR! use NgStyledComponent.

    Second optional argument provides default options for creating new stylesheets.

    Third optional argument could be used to call this method on specific Theme instance:

    import { Component, OnInit, DoCheck } from '@angular/core';
    import { makeStyles, NgStyled, Theme, Classes } from 'jss-theme';
    
    const SomeTheme = new Theme({ spacing: 1 });
    
    const styles = makeStyles({
    	className1: {
    		display: 'flex',
    		marginTop: 10,
    	},
    });
    
    @Component({
    	template: `<div [class]="classes.className1">Jss styled div</div>`,
    	...
    })
    // @NgStyled(styles, null, Theme) // Specific Theme
    @NgStyled(styles) // Default Theme
    export class SomeComponent implements OnInit, DoCheck {
      public classes: Classes = { };
    
      public ngOnInit(): void {}
    
      public ngDoCheck(): void {}
    }

    NgStyledComponent

    Class for usage with Angular components. Internally creates property 'classes' and puts classNames for compiled styles into it and watches for theme updates.

    NOTE! Please be sure to set target: 'es2015' in your tsconfig.json in order to use NgStyledComponent because of Angular CLI changes.

    Second optional argument provides default options for creating new stylesheets.

    Third optional argument could be used to call this method on specific Theme instance:

    import { Component } from '@angular/core';
    import { makeStyles, NgStyledComponent, Theme } from 'jss-theme';
    
    const SomeTheme = new Theme({ spacing: 1 });
    
    const styles = makeStyles({
    	className1: {
    		display: 'flex',
    		marginTop: 10,
    	},
    });
    
    @Component({
    	template: `<div [class]="classes.className1">Jss styled div</div>`,
    	...
    })
    export class SomeComponent extends NgStyledComponent {
      public classes: Classes = { };
    
      constructor() {
        // super(styles, { ... }, Theme); // Specific Theme
        super(styles); // Default Theme
      }
    }

    Install

    npm i jss-theme-angular

    DownloadsWeekly Downloads

    21

    Version

    0.1.10

    License

    MIT

    Unpacked Size

    36.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • mopc