feat: Require node 14, remove default export (#241)

BREAKING CHANGE: removes the default export. use `import { TinyColor } from '@ctrl/tinycolor'`
BREAKING CHANGE: removes the backwards compatible `tinycolor()` function that called the class
BREAKING CHANGE: requires node 14 minimum, this will be the last major version before releasing as pure ESM

- switch to vitest & vite for the demo
- switch to github actions

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - name: lint
+        run: npm run lint
+      - name: test
+        run: npm run test:ci
+      - name: coverage
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref_name == 'master'
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - name: release
+        run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -1 +1 @@
-16
+20

README.md

@@ -1,7 +1,6 @@
 # tinycolor 
 
 [![npm](https://badgen.net/npm/v/@ctrl/tinycolor)](https://www.npmjs.com/package/@ctrl/tinycolor)
-[![CircleCI](https://badgen.net/circleci/github/scttcper/tinycolor)](https://circleci.com/gh/scttcper/tinycolor)
 [![coverage](https://badgen.net/codecov/c/github/scttcper/tinycolor)](https://codecov.io/gh/scttcper/tinycolor)
 [![bundlesize](https://badgen.net/bundlephobia/min/@ctrl/tinycolor)](https://bundlephobia.com/result?p=@ctrl/tinycolor)
 
@@ -16,6 +15,7 @@ __DEMO__: https://tinycolor.vercel.app
 * reformatted into TypeScript / es2015 and requires node >= 8
   * tree shakeable "module" export and no package `sideEffects`
 * `tinycolor` is now exported as a class called `TinyColor`
+* default export removed, use `import { TinyColor } from '@ctrl/tinycolor'`
 * new `random`, an implementation of [randomColor](https://github.com/davidmerfield/randomColor/) by David Merfield that returns a TinyColor object
 * several functions moved out of the tinycolor class and are no longer `TinyColor.<function>`
   * `readability`, `fromRatio` moved out

build.ts

@@ -1,11 +1,10 @@
 import { rollup, OutputOptions, RollupOptions } from 'rollup';
-import { terser } from 'rollup-plugin-terser';
-import sourceMaps from 'rollup-plugin-sourcemaps';
+import { default as terser } from '@rollup/plugin-terser';
 
 // umd min
 const umdMinInputOptions: RollupOptions = {
   input: 'dist/module/umd_api.js',
-  plugins: [sourceMaps(), terser()],
+  plugins: [terser({sourceMap: true})],
 };
 const umdMinOutputOptions: OutputOptions = {
   file: './dist/bundles/tinycolor.umd.min.js',

demo/public/index.html → demo/index.html

@@ -241,7 +241,7 @@ <h4>Credit</h4>
     </div>
   </div>
 
-  <script src="bundle.js"></script>
+  <script src="/src/main.ts" type="module"></script>
 </body>
 
 </html>

demo/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "demo-app",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "5.1.6",
+    "vite": "4.4.4"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

demo/src/main.ts

@@ -1,8 +1,9 @@
-import tinycolor from '../../src/umd_api';
+import tinycolor from '../../src/umd_api.js';
 
 // make tinycolor available in the console
 (window as any).tinycolor = tinycolor;
-console.log('try "new TinyColor(\'blue\')" or "tinycolor.random()" or tinycolor(\'red\')');
+(window as any).TinyColor = tinycolor.TinyColor;
+console.log('try "new TinyColor(\'blue\')" or "tinycolor.random()"');
 
 const input = document.querySelector<HTMLInputElement>('#color');
 

demo/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "declaration": false,
     "lib": ["es2017", "dom"],
-    "module": "ES2015",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "strict": false,
     "target": "es5",