Init for React + TS + Rollup

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-component-rollup-typescript-boilerplate",
+  "version": "1.0.1",
+  "description": "A boilerplate to develop react apps and components with TypeScript and Rollup",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "styles": "dist/index.css",
+  "scripts": {
+    "build": "npm run lint && npm run clean:dist && NODE_ENV=production rollup -c",
+    "clean:dist": "rm -rf dist/*",
+    "watch": "rollup -cw",
+    "start": "rollup -cw",
+    "lint": "tslint --project tsconfig.json --project"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Devesh21700Kumar/react-email.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Devesh21700Kumar/react-email/issues"
+  },
+  "homepage": "https://github.com/Devesh21700Kumar/react-email#readme",
+  "devDependencies": {
+    "@types/react": "latest",
+    "autoprefixer": "^8.0.0",
+    "react": "16",
+    "rollup": "latest",
+    "rollup-plugin-babili": "^3.1.1",
+    "rollup-plugin-commonjs": "latest",
+    "rollup-plugin-css-only": "latest",
+    "rollup-plugin-livereload": "latest",
+    "rollup-plugin-node-resolve": "latest",
+    "rollup-plugin-postcss": "latest",
+    "rollup-plugin-replace": "latest",
+    "rollup-plugin-serve": "latest",
+    "rollup-plugin-typescript2": "latest",
+    "rollup-watch": "latest",
+    "tslib": "latest",
+    "tslint": "latest",
+    "typescript": "latest",
+    "postcss-clean": "latest"
+  }
+}

rollup.config.js

@@ -0,0 +1,55 @@
+//import typescript from 'typescript';
+import typescript from 'rollup-plugin-typescript2';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import replace from 'rollup-plugin-replace';
+//import serve from 'rollup-plugin-serve';
+//import livereload from 'rollup-plugin-livereload';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import clean from 'postcss-clean';
+import babili from 'rollup-plugin-babili';
+
+const dev = 'development';
+const prod = 'production';
+const env = (process.env.NODE_ENV === prod || process.env.NODE_ENV === dev) ? process.env.NODE_ENV : dev;
+
+const plugins = [
+  replace({'process.env.NODE_ENV': JSON.stringify(env)}),
+  resolve(),
+  commonjs({
+    // All of our own sources will be ES6 modules, so only node_modules need to be resolved with cjs
+    include: 'node_modules/**',
+    namedExports: {
+      'node_modules/react/index.js': [
+        'Component',
+        'PropTypes',
+        'createElement',
+      ]
+    },
+  }),
+  postcss({
+    extract: true,  // extracts to `${basename(dest)}.css`
+    plugins: [autoprefixer, clean],
+    writeDefinitions: true,
+    // postcssModulesOptions: { ... }
+  }),
+  typescript()
+];
+
+if (env === prod) {
+  plugins.push(babili({ comments: false }));
+}
+
+export default {
+  plugins,
+  external: [
+    'react',
+  ],
+  input: './src/index.js',
+  output: {
+    sourcemap: true,
+    file: './dist/index.js',
+    format: 'cjs'
+  }
+};

src/components/Test.css

@@ -0,0 +1,4 @@
+.test {
+    background: yellow;
+    font-size: large;
+  }

src/components/Test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './Test.css';
+
+class Test extends React.Component {
+  render () {
+    return (
+      <div className="test">Test</div>
+    );
+  }
+}
+
+export default Test;

src/index.js

@@ -0,0 +1,2 @@
+import Test from './components/Test.tsx';
+export default Test;

tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "module": "es2015",
+      "target": "es2017",
+      "moduleResolution": "node",
+      "noImplicitAny": true,
+      "noImplicitReturns": true,
+      "noImplicitThis": true,
+      "noUnusedLocals": true,
+      "strictNullChecks": true,
+      "sourceMap": true
+    },
+    "include": [
+      "src/**/*.tsx"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+  }

tslint.json

@@ -0,0 +1,81 @@
+{
+    "rules": {
+      "no-internal-module": true,
+      "no-reference": true,
+      "no-var-requires": true,
+      "prefer-for-of": true,
+      "ban-types": {
+        "options": [
+            ["Object", "Avoid using the `Object` type. Did you mean `object`?"],
+            ["Function", "Avoid using the `Function` type. Prefer a specific function type, like `() => void`, or use `ts.AnyFunction`."],
+            ["Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?"],
+            ["Number", "Avoid using the `Number` type. Did you mean `number`?"],
+            ["String", "Avoid using the `String` type. Did you mean `string`?"]
+        ]
+      },
+      "typedef-whitespace": [
+        true,
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ],
+      "unified-signatures": true,
+      "curly": true,
+      "no-arg": true,
+      "no-conditional-assignment": true,
+      "no-empty": true,
+      "no-eval": true,
+      "no-for-in-array": true,
+      "no-inferred-empty-object-type": true,
+      "no-null-keyword": true,
+      "no-shadowed-variable": true,
+      "no-string-literal": false,
+      "no-string-throw": true,
+      "no-switch-case-fall-through": true,
+      "no-unsafe-finally": true,
+      "no-unused-expression": true,
+      /*"no-unused-new": true,*/
+      "no-var-keyword": true,
+      "no-void-expression": false,
+      "radix": true,
+      "restrict-plus-operands": true,
+      "triple-equals": true,
+      /*"typeof-compare": true,*/
+      "use-isnan": true,
+      "eofline": true,
+      "indent": [true, "spaces"],
+      "no-default-export": false,
+      "no-mergeable-namespace": true,
+      "no-trailing-whitespace": true,
+      "prefer-const": true,
+      "trailing-comma": [true, { "multiline": "always", "singleline": "never" }],
+      "arrow-parens": false,
+      "callable-types": true,
+      "class-name": true,
+      "interface-over-type-literal": true,
+      "new-parens": true,
+      "no-angle-bracket-type-assertion": true,
+      "no-consecutive-blank-lines": true,
+      "no-parameter-properties": true,
+      "object-literal-key-quotes": [true, "as-needed"],
+      "object-literal-shorthand": true,
+      "one-line": [true, "check-catch", "check-finally", /*"check-else",*/ "check-open-brace", "check-whitespace"],
+      "one-variable-per-declaration": true,
+      "quotemark": [true, "single", "jsx-double"],
+      "semicolon": [true, "always"],
+      "space-before-function-paren": [true, { "anonymous": "allow", "named": "allow", "asyncArrow": "always", "method": "allow", "constructor": "allow" }],
+      "variable-name": [true, "check-format", "allow-pascal-case", "allow-leading-underscore", "ban-keywords"],
+      "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast"]
+    }
+  }