tsrex
Typescript + React + ExRedux
Last updated 14 days ago by deberson.paula .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tsrex 
SYNC missed versions from official npm registry.

TSREX

Version Downloads/week Azure DevOps builds

TypeScript React EXRedux

This package contains the following modules:

  • Typescript 3
  • React 16
  • ExRedux (Redux abstraction with Decorators)
  • Jest 24 + Enzyme 3 (for tests)

The builder has the following module bundlers:

  • Webpack 4
  • Babel 7
  • babel-jest (for tests)

Install

# install TSREX
npm i -S tsrex

Setup tsconfig and tslint

Extend base tsconfig.json from TSREX folder:

{
  "extends": "./node_modules/tsrex/tsconfig.json",
  "compilerOptions": {

  }
}

Same for tslint.json:

{
  "extends": "./node_modules/tsrex/tslint.json",

}

Setup the script configuration

Create a js file as example below to setup the scrips command:

Ex.: react.config.js

{
  module.exports = {
    // source of files
    source: 'src',
    // output path
    outputPath: 'dist',
    // port to be used in development
    // will be set in webpack-dev-server
    port: 8080,
    // hostname to be used in development
    // will be set in webpack-dev-server
    host: 'localhost',
    // all enviroments to be set in process.env
    nodeEnv: {
      commentsExample: 'Comment from Node Enviroments',
      booleanValueExample: true,
      numericValueExample: 37,
    },
    // all enviroments to be set in HTMLWebpackPlugin
    // available in HTML thru <%= htmlWebpackPlugin.options.propertyName %>
    htmlEnv: {
      htmlComments: 'Comment from HTML Enviroment',
    },
  };
}

Using scripts

TSREX have four methods to be used in scripts of the package.json.

Is better to set unique config file for each method:

{
  "scripts": {
    "start": "tsrex start ./react.config.js",
    "build": "tsrex build ./react.config.prod.js",
    "test": "tsrex test ./react.config.test.js",
    "lib": "tsrex library ./react.config.lib.js"
  }
}

Jest customization

In case, if your tests require specific Jest configuration, include jest property in your react.config.test.js:

module.exports = {
  source: 'application',
  outputPath: '',
  nodeEnv: {},
  htmlEnv: {},
  port: 0,
  hostname: '',
  jest: {
    coverageThreshold: {
      global: {
        branches: 50,
        functions: 50,
        lines: 50,
      },
    },
    moduleNameMapper: {
      '@components/(.*)': '<rootDir>/src/components/$1',
      '@containers/(.*)': '<rootDir>/src/containers/$1',
      '@interfaces/(.*)': '<rootDir>/src/interfaces/$1',
      '@services/(.*)': '<rootDir>/src/services/$1',
    },
    updateSnapshot: true,
  },
};

DevServer customization

In case if is necessary to customize webpack-dev-server options, just include "devServer" in your react.config.test.js:

module.exports = {
  devServer: {
    hot: true,
    publicPath: '/',
    contentBase: path.join(__dirname, 'dist'),
  },
  ...
};

Webpack plugin customization

In case if is necessary to customize webpack plugins, include plugins property in your config file:

module.exports = {
  plugins: [
    // insert your webpack plugins here
  ]
};

Enable React Hot Loader

This utility, enables the plugin react-hot-loader, that increments your application without losing the current state.

To use this utility, just enable it in your react.config.test.js:

module.exports = {
  reactHotLoader: true,
  ...
};

And wrap the main app with the reactHot function:

import * as React from 'react';
import { reactHot } from 'tsrex/utils';

class App extends React.Component {
  render() {
    return (
      <div>Component Hot Reload Test</div>
    );
  }
}

export default reactHot(module, App);

Sample Project

tsrex-sample

Current Tags

  • 0.1.0                                ...           latest (14 days ago)
  • 0.1.0-beta.6                                ...           next (14 days ago)

45 Versions

  • 0.1.0                                ...           14 days ago
  • 0.1.0-beta.6                                ...           14 days ago
  • 0.1.0-beta.5                                ...           14 days ago
  • 0.1.0-beta.4                                ...           15 days ago
  • 0.1.0-beta.3                                ...           15 days ago
  • 0.1.0-beta.2                                ...           15 days ago
  • 0.1.0-beta.1                                ...           15 days ago
  • 0.0.20                                ...           22 days ago
  • 0.0.19                                ...           a month ago
  • 0.0.18                                ...           a month ago
  • 0.0.17                                ...           a month ago
  • 0.0.16                                ...           a month ago
  • 0.0.15                                ...           a month ago
  • 0.0.14                                ...           2 months ago
  • 0.0.13                                ...           2 months ago
  • 0.0.13-rc.1                                ...           2 months ago
  • 0.0.12                                ...           2 months ago
  • 0.0.11                                ...           2 months ago
  • 0.0.10                                ...           2 months ago
  • 0.0.10-rc.1                                ...           2 months ago
  • 0.0.9                                ...           2 months ago
  • 0.0.7                                ...           2 months ago
  • 0.0.6                                ...           2 months ago
  • 0.0.5                                ...           3 months ago
  • 0.0.4                                ...           3 months ago
  • 0.0.3                                ...           3 months ago
  • 0.0.1                                ...           3 months ago
  • 0.0.0-beta.16 [deprecated]           ...           3 months ago
  • 0.0.0-beta.15 [deprecated]           ...           3 months ago
  • 0.0.0-beta.14 [deprecated]           ...           3 months ago
  • 0.0.0-beta.13 [deprecated]           ...           3 months ago
  • 0.0.0-beta.12 [deprecated]           ...           3 months ago
  • 0.0.0-beta.11 [deprecated]           ...           3 months ago
  • 0.0.0-beta.10 [deprecated]           ...           3 months ago
  • 0.0.0-beta.9 [deprecated]           ...           3 months ago
  • 0.0.0-beta.8 [deprecated]           ...           3 months ago
  • 0.0.0-beta.7 [deprecated]           ...           3 months ago
  • 0.0.0-beta.6 [deprecated]           ...           3 months ago
  • 0.0.0-beta.5 [deprecated]           ...           3 months ago
  • 0.0.0-beta.4 [deprecated]           ...           3 months ago
  • 0.0.0-beta.3 [deprecated]           ...           3 months ago
  • 0.0.0-beta.2 [deprecated]           ...           3 months ago
  • 0.0.0-beta.1 [deprecated]           ...           3 months ago
  • 0.0.0-alpha.1 [deprecated]           ...           3 months ago
  • 0.0.0-alpha.0 [deprecated]           ...           3 months ago

Copyright 2014 - 2017 © taobao.org |