amcdnl

Example Structure

/
    /scripts
    /src
        /assets
            /css
            /font
            /img

amcdnl

FILENAME=$1
react-js-to-ts $FILENAME
TS_FILENAME=${FILENAME/\.js/\.tsx}
perl -0777 -p -i -e 's/(?<=[^\n]\n)((type|let|var|const|class|function|interface|export( default)?) \w+|  (static )?\w+( =|\((\w+|\))))/\n$1/g' $TS_FILENAME
perl -0777 -p -i -e 's/(\n  \w+) = (?:(?<args>\w+)|\((?<args>\w+(?:, \w+)*)\)|\(\)) => {/$1($+{args}) {/g' $TS_FILENAME
perl -0777 -p -i -e "s/import React, { (Pure)?Component(, Fragment)? } from 'react';/import * as React from 'react';/g" $TS_FILENAME
perl -0777 -p -i -e 's/extends ((Pure)?Component)/extends React.$1/g' $TS_FILENAME
perl -0777 -p -i -e 's/<(\/)?Fragment/<$1React.Fragment/g' $TS_FILENAME

amcdnl

{
  "rules": {
    "block-no-empty": null,
    "color-hex-case": "lower",
    "color-no-invalid-hex": true,
    "declaration-colon-space-after": "always",
    "max-empty-lines": 2,
    "unit-case": "lower",
    "unit-no-unknown": true,
    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmin", "s"],

amcdnl

import { Directive, OnInit, OnDestroy, ElementRef, Inject, Input } from '@angular/core';
import { ThemeService } from './theme.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Theme } from './symbols';
import { DOCUMENT } from '@angular/common';

@Directive({
  selector: '[my-theme]'
})

amcdnl

import { Injectable, Inject, EventEmitter } from '@angular/core';
import { THEMES, ACTIVE_THEME, Theme } from '.';

@Injectable()
export class ThemeService {

  themeChange = new EventEmitter<Theme>();

  constructor(
    @Inject(THEMES) public themes: Theme[],

amcdnl

@NgModule({
  imports: [
    ThemeModule.forRoot({
      themes: [lightTheme],
      active: 'light'
    })
  ]
})
export class AppModule {}

amcdnl

import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ThemeService } from './theme.service';
import { ThemeDirective } from './theme.directive';

export const THEMES = new InjectionToken('THEMES');
export const ACTIVE_THEME = new InjectionToken('ACTIVE_THEME');

export interface ThemeOptions {

amcdnl

export const lightTheme: Theme = {
  name: 'light',
  properties: {
    '--background': '#EFF0F4',
    '--on-background': '#0F0F0F',
    '--primary': '#389BFF',
    '--on-primary': '#fff',
    '--secondary': '#B2B4B7',
    '--on-secondary': '#fff',
    '--surface': '#fff',

amcdnl

@Component({
  selector: 'foo',
  template: `<h1>Hi</h1>`,
  styles: [
    `h1 { color: var(--my-color); }`
  ]
})
export class Foo {}

amcdnl

const avgSize = 20;
const scrollOffset = 225;

function measureRangeSize({ start, end }) {
  const size = 15;
  return (start + end) * size;
}

function getOffset(range, index) {
  const isInView = index > range.start && index < range.end;