Merge pull request #37 from transitive-bullshit/feature/typescript-support-v2

add typescript support v2

packages/create-freesewing-pattern/lib/create-library.js

@@ -14,6 +14,7 @@ const pkg = require('../package')
 module.exports = async (info) => {
   const {
     manager,
+    template,
     name
   } = info
 
@@ -25,7 +26,7 @@ module.exports = async (info) => {
   info.dest = dest
   await mkdirp(dest)
 
-  const source = path.join(__dirname, '../template')
+  const source = path.join(__dirname, '..', 'template', template)
   const files = await globby(source, {
     dot: true
   })
@@ -39,7 +40,7 @@ module.exports = async (info) => {
         info
       })
     })
-    ora.promise(promise, `Copying template to ${dest}`)
+    ora.promise(promise, `Copying ${template} template to ${dest}`)
     await promise
   }
 
@@ -98,14 +99,12 @@ module.exports.initPackageManager = async (opts) => {
     {
       cmd: `${info.manager} link`,
       cwd: dest
-    }
+    },
-  ].concat(info.manager === 'yarn' ? [
     {
-      cmd: `${info.manager}`,
+      cmd: `${info.manager} install`,
       cwd: example
     }
-  ] : [ ]
+  ]
-  )
 
   return pEachSeries(commands, async ({ cmd, cwd }) => {
     return execa.shell(cmd, { cwd })

packages/create-freesewing-pattern/lib/create-library.test.js

@@ -14,7 +14,17 @@ const tests = [
     description: 'this is a auto-generated test module. please ignore.',
     repo: 'nala/my-test-library',
     license: 'MIT',
-    manager: 'yarn'
+    manager: 'yarn',
+    template: 'default'
+  },
+  {
+    name: 'my-test-typescript-library',
+    author: 'nala',
+    description: 'this is a auto-generated test module. please ignore.',
+    repo: 'nala/my-test-library',
+    license: 'MIT',
+    manager: 'yarn',
+    template: 'typescript'
   },
   {
     name: 'my-test-library',
@@ -22,7 +32,17 @@ const tests = [
     description: 'this is a auto-generated test module. please ignore.',
     repo: 'nala/my-test-library',
     license: 'MIT',
-    manager: 'npm'
+    manager: 'npm',
+    template: 'default'
+  },
+  {
+    name: 'my-test-library',
+    author: 'nala',
+    description: 'this is a auto-generated test module. please ignore.',
+    repo: 'nala/my-test-typescript-library',
+    license: 'MIT',
+    manager: 'npm',
+    template: 'typescript'
   },
   {
     name: '@automagical/nala',
@@ -30,32 +50,36 @@ const tests = [
     description: 'this is a auto-generated test module. please ignore.',
     repo: 'superstar-cats/nala',
     license: 'GPL',
-    manager: 'yarn'
+    manager: 'yarn',
+    template: 'default'
   }
 ]
 
-tests.forEach((info) => {
+tests.forEach((opts) => {
-  test.serial(`creating "${info.name}" using ${info.manager}`, async (t) => {
+  test.serial(`creating "${opts.name}" using ${opts.manager}`, async (t) => {
-    console.log(`creating "${info.name}" using ${info.manager}...`)
+    console.log(`creating "${opts.name}" using ${opts.manager}...`)
     let ret
 
     // ensure library is created successfully
-    const root = await createLibrary(info)
+    const root = await createLibrary(opts)
-    t.truthy(root.indexOf(info.shortName) >= 0)
+    const example = path.join(root, 'example')
+    t.truthy(root.indexOf(opts.shortName) >= 0)
 
-    // ensure yarn runs successfully in src/
+    // ensure deps install successfully in root
-    ret = await execa.shell('yarn', { cwd: root })
+    ret = await execa.shell(`${opts.manager} install`, { cwd: root })
     t.is(ret.code, 0)
 
-    // ensure jest tests pass
+    // ensure root tests pass
-    ret = await execa.shell('yarn test', { cwd: root })
+    ret = await execa.shell(`${opts.manager} test`, { cwd: root })
     t.is(ret.code, 0)
 
-    if (info.manager === 'yarn') {
+    // ensure deps install successfully in example
-      // ensure yarn runs successfully in example/
+    ret = await execa.shell(`${opts.manager} install`, { cwd: example })
-      ret = await execa.shell('yarn install', { cwd: path.join(root, 'example') })
+    t.is(ret.code, 0)
-      t.is(ret.code, 0)
+
-    }
+    // ensure bundle builds successfully in example
+    ret = await execa.shell(`${opts.manager} build`, { cwd: example })
+    t.is(ret.code, 0)
 
     // ensure git is initialized properly
     ret = await execa.shell('git status', { cwd: root })

packages/create-freesewing-pattern/lib/get-default-library-params.js

@@ -14,7 +14,8 @@ module.exports = async () => {
     author: config.get('author'),
     repo: (info) => `${info.author}/${info.name}`,
     license: config.get('license', 'MIT'),
-    manager: config.get('manager', 'npm')
+    manager: config.get('manager', 'npm'),
+    template: config.get('template', 'default')
   }
 
   try {
@@ -41,7 +42,11 @@ module.exports = async () => {
         defaults.manager = 'yarn'
       }
 
-      config.set('manager', defaults.manager || 'npm')
+      config.set('manager', defaults.manager)
+    }
+
+    if (!config.get('template')) {
+      config.set('template', defaults.template)
     }
   } catch (err) { }
 

packages/create-freesewing-pattern/lib/index.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 'use strict'
 
+const path = require('path')
 const program = require('commander')
 const { version } = require('../package')
 
@@ -20,6 +21,7 @@ module.exports = async () => {
     .option('-l, --license <string>', 'package license', defaults.license)
     .option('-r, --repo <string>', 'package repo path')
     .option('-m, --manager <npm|yarn>', 'package manager to use', /^(npm|yarn)$/, defaults.manager)
+    .option('-t, --template <default|typescript>', 'package template to use', /^(default|typescript)$/, defaults.template)
     .option('-s, --skip-prompts', 'skip all prompts (must provide package-name via cli)')
     .parse(process.argv)
 
@@ -29,6 +31,7 @@ module.exports = async () => {
     license: program.license,
     repo: program.repo,
     manager: program.manager,
+    template: program.template,
     skipPrompts: program.skipPrompts
   }
 
@@ -47,20 +50,20 @@ module.exports = async () => {
   }
 
   const params = await promptLibraryParams(opts)
-  const lib = await createLibrary(params)
+  const dest = await createLibrary(params)
 
   console.log(`
 
 Your module has been created at ${opts.dest}.
 
 To get started, in one tab, run:
-$ cd ${opts.name} && ${opts.manager} start
+$ cd ${params.shortName} && ${params.manager} start
 
 And in another tab, run the create-react-app devserver:
-$ cd ${opts.name}/example && ${opts.manager} start
+$ cd ${path.join(params.shortName, 'example')} && ${params.manager} start
 `)
 
-  return lib
+  return dest
 }
 
 module.exports()

packages/create-freesewing-pattern/lib/prompt-library-params.js

@@ -64,12 +64,20 @@ module.exports = async (opts) => {
         message: 'Package Manager',
         choices: [ 'npm', 'yarn' ],
         default: opts.manager
+      },
+      {
+        type: 'list',
+        name: 'template',
+        message: 'Template',
+        choices: [ 'default', 'typescript' ],
+        default: opts.template
       }
     ])
 
     config.set('author', info.author)
     config.set('license', info.license)
     config.set('manager', info.manager)
+    config.set('template', info.template)
 
     return info
   }

packages/create-freesewing-pattern/package.json

@@ -39,7 +39,7 @@
     "handlebars": "^4.0.11",
     "inquirer": "^6.0.0",
     "make-dir": "^1.3.0",
-    "node-compat-require": "^1.0.4",
+    "node-compat-require": "^1.0.5",
     "ora": "^2.1.0",
     "p-each-series": "^1.0.0",
     "parse-git-config": "^2.0.2",

packages/create-freesewing-pattern/readme.md

@@ -13,8 +13,6 @@
   <img width="600" src="https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/demo.svg">
 </p>
 
-The CLI is based on this [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate), which you can optionally read about [here](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7).
-
 
 ## Features
 
@@ -27,6 +25,7 @@ The CLI is based on this [boilerplate](https://github.com/transitive-bullshit/re
 - [Jest](https://facebook.github.io/jest/) for testing
 - Supports complicated peer-dependencies
 - Supports CSS modules
+- Optional support for TypeScript
 - Sourcemap creation
 - Hundreds of public modules created
 - Thorough documentation :heart_eyes:
@@ -76,7 +75,6 @@ The second part will be running the `example/` create-react-app that's linked to
 ```bash
 # (in another tab)
 cd example
-npm link <your-module-name> # you can skip this step if using yarn
 npm start # runs create-react-app dev server
 ```
 
@@ -116,6 +114,10 @@ Here is a [branch](https://github.com/transitive-bullshit/react-modern-library-b
 
 Here is a [branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui) which demonstrates how to make use of a relatively complicated peer dependency, [material-ui](https://github.com/mui-org/material-ui). It shows the power of [rollup-plugin-peer-deps-external](https://www.npmjs.com/package/rollup-plugin-peer-deps-external) which makes it a breeze to create reusable modules that include complicated material-ui subcomponents without having them bundled as a part of your module.
 
+### Boilerplate
+
+The CLI is based on this [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate), which you can optionally read about [here](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7).
+
 ### Libraries
 
 Here are some example libraries that have been bootstrapped with `create-react-library`.
@@ -133,7 +135,6 @@ Here are some example libraries that have been bootstrapped with `create-react-l
 
 Want to add yours to the list? Submit an [issue](https://github.com/transitive-bullshit/create-react-library/issues/new)!
 
-
 ## License
 
 MIT © [Travis Fischer](https://github.com/transitive-bullshit)

packages/create-freesewing-pattern/template/default/example/package.json

@@ -2,14 +2,14 @@
   "name": "{{name}}-example",
   "homepage": "https://{{author}}.github.io/{{name}}",
   "version": "0.0.0",
-  "private": true,
   "license": "MIT",
+  "private": true,
   "dependencies": {
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "{{name}}": "{{#if yarn}}link:..{{else}}*{{/if}}",
+    "react-scripts": "^1.1.4",
-    "react-scripts": "^1.1.4"
+    "{{name}}": "file:.."
   },
   "scripts": {
     "start": "react-scripts start",

packages/create-freesewing-pattern/template/default/src/index.js

@@ -1,7 +1,3 @@
-/**
- * @class ExampleComponent
- */
-
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 

packages/create-freesewing-pattern/template/typescript/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

packages/create-freesewing-pattern/template/typescript/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/create-freesewing-pattern/template/typescript/README.md

@@ -0,0 +1,31 @@
+# {{name}}
+
+> {{description}}
+
+[![NPM](https://img.shields.io/npm/v/{{name}}.svg)](https://www.npmjs.com/package/{{name}}) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save {{name}}
+```
+
+## Usage
+
+```tsx
+import * as React from 'react'
+
+import MyComponent from '{{name}}'
+
+class Example extends React.Component {
+  render () {
+    return (
+      <MyComponent />
+    )
+  }
+}
+```
+
+## License
+
+{{license}} © [{{author}}](https://github.com/{{author}})

packages/create-freesewing-pattern/template/typescript/example/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{name}}-example",
+  "homepage": "https://{{author}}.github.io/{{name}}",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-scripts": "^1.1.4",
+    "{{name}}": "file:.."
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

packages/create-freesewing-pattern/template/typescript/example/public/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <title>{{name}}</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+  </body>
+</html>

packages/create-freesewing-pattern/template/typescript/example/public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "{{name}}",
+  "name": "{{name}}",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/create-freesewing-pattern/template/typescript/example/src/App.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+import ExampleComponent from '{{name}}'
+
+export default class App extends Component {
+  render () {
+    return (
+      <div>
+        <ExampleComponent text='Modern React component module' />
+      </div>
+    )
+  }
+}

packages/create-freesewing-pattern/template/typescript/example/src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

packages/create-freesewing-pattern/template/typescript/example/src/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import './index.css'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))

packages/create-freesewing-pattern/template/typescript/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "author": "{{author}}",
+  "license": "{{license}}",
+  "repository": "{{repo}}",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "scripts": {
+    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
+    "test:watch": "react-scripts-ts test --env=jsdom",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "prepare": "{{manager}} run build",
+    "predeploy": "cd example && {{manager}} install && {{manager}} run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "prop-types": "^15.5.4",
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.1.5",
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "^16.0.5",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0",
+    "cross-env": "^5.1.4",
+    "gh-pages": "^1.2.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts-ts": "^2.16.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-scripts-ts": "2.15.1",
+    "rollup": "^0.62.0",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss-modules": "^1.0.8",
+    "rollup-plugin-typescript2": "^0.13.0",
+    "rollup-plugin-url": "^1.4.0",
+    "typescript": "^2.8.3"
+  },
+  "files": [
+    "dist"
+  ]
+}

packages/create-freesewing-pattern/template/typescript/rollup.config.js

@@ -0,0 +1,37 @@
+import typescript from 'rollup-plugin-typescript2'
+import commonjs from 'rollup-plugin-commonjs'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss-modules'
+import resolve from 'rollup-plugin-node-resolve'
+import url from 'rollup-plugin-url'
+
+import pkg from './package.json'
+
+export default {
+  input: 'src/index.tsx',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true
+    }
+  ],
+  plugins: [
+    external(),
+    postcss({
+      modules: true,
+      writeDefinitions: true
+    }),
+    url(),
+    resolve(),
+    typescript({
+      rollupCommonJSResolveHack: true
+    }),
+    commonjs()
+  ]
+}

packages/create-freesewing-pattern/template/typescript/src/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * @class ExampleComponent
+ */
+
+import * as React from 'react'
+
+import styles from './styles.css'
+
+export type Props = { text: string }
+
+export default class ExampleComponent extends React.Component<Props> {
+  render() {
+    const {
+      text
+    } = this.props
+
+    return (
+      <div className={styles.test}>
+        Example Component: {text}
+      </div>
+    )
+  }
+}

packages/create-freesewing-pattern/template/typescript/src/styles.css

@@ -0,0 +1,8 @@
+/* add css styles here (optional) */
+
+.test {
+  display: inline-block;
+  margin: 2em auto;
+  border: 2px solid #000;
+  font-size: 2em;
+}

packages/create-freesewing-pattern/template/typescript/src/test.ts

@@ -0,0 +1,7 @@
+import ExampleComponent from './'
+
+describe('ExampleComponent', () => {
+  it('is truthy', () => {
+    expect(ExampleComponent).toBeTruthy()
+  })
+})

packages/create-freesewing-pattern/template/typescript/src/typings.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Default CSS definition for typescript,
+ * will be overridden with file-specific definitions by rollup
+ */
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}

packages/create-freesewing-pattern/template/typescript/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "declaration": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
+}

packages/create-freesewing-pattern/template/typescript/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

packages/create-freesewing-pattern/yarn.lock

@@ -3595,9 +3595,9 @@ nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
 
-node-compat-require@^1.0.4:
+node-compat-require@^1.0.5:
-  version "1.0.4"
+  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/node-compat-require/-/node-compat-require-1.0.4.tgz#f7df99a2ddca0892c1a1a285395255d03ac5253b"
+  resolved "https://registry.yarnpkg.com/node-compat-require/-/node-compat-require-1.0.5.tgz#600802c65964be6282e29dbc56ce12d1b382d548"
   dependencies:
     execa "^0.10.0"
     npx "^10.2.0"