feat: add default export tinycolor()

.travis.yml

@@ -1,6 +1,7 @@
 sudo: false
 language: node_js
-node_js: 10
+node_js:
+  - 10
 script:
   - npm run lint
   - npm run test:prod
@@ -9,7 +10,7 @@ after_success:
   - bash <(curl -s https://codecov.io/bash)
   - npm run travis-deploy-once "npm run semantic-release"
   - npm run build:demo
-  - cp -r demo/public docs
+  - cp -r demo/public/* docs
   - npm run build:docs
 deploy:
   provider: pages

build.ts

@@ -2,32 +2,33 @@ import { join } from 'path';
 
 import { copySync } from 'fs-extra';
 import { rollup, OutputOptions, RollupFileOptions } from 'rollup';
+const terser = require('rollup-plugin-terser').terser;
 const sourceMaps = require('rollup-plugin-sourcemaps');
 
-// es2015 module
-const moduleInputOptions: RollupFileOptions = {
-  input: `dist/esm5/public_api.js`,
-  plugins: [sourceMaps()],
-  // TODO: remove when new rollup released
-  inlineDynamicImports: false,
+// umd min
+const umdMinInputOptions: RollupFileOptions = {
+  input: `dist/es/public_api.js`,
+  plugins: [sourceMaps(), terser()],
 };
-const moduleOutputOptions: OutputOptions = {
-  file: './dist/package-dist/bundles/tinycolor.es2015.js',
-  format: 'es',
+const umdMinOutputOptions: OutputOptions = {
+  file: './dist/bundles/tinycolor.umd.min.js',
+  format: 'umd',
   sourcemap: true,
+  name: 'tinycolor',
+  exports: 'named',
 };
 
 async function build() {
-  // create bundles
-  const mod = await rollup(moduleInputOptions);
-  await mod.write(moduleOutputOptions);
+  // create browser bundle
+  const umdMin = await rollup(umdMinInputOptions);
+  await umdMin.write(umdMinOutputOptions);
 
   // copy git folder to dist folder for semantic-release
-  copySync('.git', join(process.cwd(), 'dist/package-dist/.git'));
+  copySync('.git', join(process.cwd(), 'dist/.git'));
   // copy files to distribution folder
-  copySync('package.json', join(process.cwd(), 'dist/package-dist/package.json'));
-  copySync('README.md', join(process.cwd(), 'dist/package-dist/README.md'));
-  copySync('LICENSE', join(process.cwd(), 'dist/package-dist/LICENSE'));
+  copySync('package.json', join(process.cwd(), 'dist/package.json'));
+  copySync('README.md', join(process.cwd(), 'dist/README.md'));
+  copySync('LICENSE', join(process.cwd(), 'dist/LICENSE'));
 }
 
 build()

demo/public/index.html

@@ -107,9 +107,6 @@ <h1>
         <p class="lead">Fast, small color manipulation and conversion for JavaScript</p>
 
         <h4>About</h4>
-        <p>
-          @ctrl/tinycolor is a fork of <a href="https://github.com/bgrins/TinyColor">tinycolor2</a> by <a href="https://github.com/bgrins">Brian Grinstead</a>
-        </p>
         <p>
           <a href="https://github.com/typectrl/tinycolor">TinyColor</a> is a library for parsing color input and outputting colors as different formats. Input is meant to be as permissive as possible.
         </p>

demo/src/main.ts

@@ -1,10 +1,10 @@
-import { mostReadable, names, random, TinyColor } from '../../src/public_api';
+import { mostReadable, names, random, tinycolor, TinyColor } from '../../src/public_api';
 
 // make tinycolor available in the console
-(window as any).tinycolor = TinyColor;
+(window as any).tinycolor = tinycolor;
 (window as any).TinyColor = TinyColor;
 (window as any).random = random;
-console.log(`try "new TinyColor('blue')" or "random()"`);
+console.log(`try "new TinyColor('blue')" or "random()" or tinycolor('red')`);
 
 const input = document.querySelector<HTMLInputElement>('#color');
 

package.json

@@ -28,16 +28,17 @@
     "lint": "tslint -p tsconfig.json -t stylish 'src/**/*.ts' 'test/**/*.ts'",
     "lint:fix": "tslint -p tsconfig.json -t stylish --fix 'src/**/*.ts' 'test/**/*.ts'",
     "prebuild": "rimraf dist",
-    "build": "tsc -p tsconfig.json && tsc -p tsconfig.esm.json && ts-node ./build.ts",
+    "build": "npm run build-es6; npm run build-cmjs; ts-node build",
+    "build-es6": "tsc -P ./tsconfig-build.json --outDir 'dist/es' --module es2015 -d false --moduleResolution node",
+    "build-cmjs": "tsc -P ./tsconfig-build.json",
     "build:docs": "typedoc src && touch docs/.nojekyll",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:prod": "npm run test -- --coverage --no-cache",
     "commit": "git-cz",
     "travis-deploy-once": "travis-deploy-once",
-    "semantic-release": "cd dist/package-dist && semantic-release"
+    "semantic-release": "cd dist && semantic-release"
   },
-  "dependencies": {},
   "devDependencies": {
     "@types/fs-extra": "5.0.4",
     "@types/jest": "23.3.1",
@@ -48,8 +49,9 @@
     "jest": "23.4.2",
     "npm-run-all": "4.1.3",
     "rimraf": "2.6.2",
-    "rollup": "0.63.4",
+    "rollup": "0.63.5",
     "rollup-plugin-sourcemaps": "0.4.2",
+    "rollup-plugin-terser": "^1.0.1",
     "rollup-plugin-typescript2": "0.16.1",
     "rollup-plugin-uglify": "4.0.0",
     "semantic-release": "15.9.3",

rollup.demo.js

@@ -1,4 +1,4 @@
-import * as uglify from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
 
 // `npm run build` -> `production` is true
@@ -16,6 +16,6 @@ export default {
     typescript({
       tsconfig: './demo/tsconfig.json',
     }),
-		production && uglify.uglify() // minify, but only in production
+		production && terser() // minify, but only in production
 	]
 };

src/index.ts

@@ -479,3 +479,8 @@ export class TinyColor {
     return this.toRgbString() === new TinyColor(color).toRgbString();
   }
 }
+
+// kept for backwards compatability with v1
+export function tinycolor(color: ColorInput = '', opts: Partial<TinyColorOptions> = {}) {
+  return new TinyColor(color, opts);
+}

src/public_api.ts

@@ -1,7 +1,11 @@
+import { tinycolor } from './index';
 export * from './index';
 export * from './css-color-names';
 export * from './readability';
 export * from './to-ms-filter';
 export * from './from-ratio';
 export * from './format-input';
 export * from './random';
+
+// kept for backwards compatability with v1
+export default tinycolor;

test/index.spec.ts

@@ -1,10 +1,12 @@
 import {
+  default as defaultTiny,
   fromRatio,
   isReadable,
   legacyRandom,
   mostReadable,
   names,
   readability,
+  tinycolor,
   toMsFilter,
   TinyColor,
 } from '../src/public_api';
@@ -25,6 +27,16 @@ describe('TinyColor', () => {
     expect(r.toName()).toBe('red');
     expect(r).toBeTruthy();
   });
+  it('should init as function', () => {
+    const r = tinycolor('red');
+    expect(r.toName()).toBe('red');
+    expect(r).toBeTruthy();
+  });
+  it('should have function as default export', () => {
+    const r = defaultTiny('red');
+    expect(r.toName()).toBe('red');
+    expect(r).toBeTruthy();
+  });
   it('should clone', () => {
     const color1 = new TinyColor('red');
     const color2 = new TinyColor('red').clone();

tsconfig-build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "sourceMap": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "removeComments": true,
+    "skipLibCheck": true
+  },
+  "files": [
+    "./src/public_api"
+  ]
+}

tsconfig.json

@@ -1,30 +1,25 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
-    "declaration": true,
+    "target": "es2015",
     "lib": ["es2017"],
     "module": "commonjs",
-    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./dist",
     "strict": true,
-    "pretty": true,
     "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
-    "outDir": "dist/package-dist",
-    "paths": {
-      "@ctrl/tinycolor": ["./src/public_api"]
-    }
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "strictPropertyInitialization": false
   },
-  "files": ["./src/public_api"],
+  "files": ["./src/index"],
   "typedocOptions": {
     "out": "docs/docs",
     "mode": "file",
     "target": "ES6",
     "module": "commonjs",
     "moduleResolution": "node",
+    "exclude": "source/test",
     "ignoreCompilerErrors": true,
     "excludePrivate": true,
     "excludeNotExported": true,