Migrate to TypeScript and Node 18 (#152)

.codebeatsettings

@@ -0,0 +1,28 @@
+{
+	"TYPESCRIPT": {
+		"ABC": [
+			20,
+			40,
+			80,
+			120
+		],
+		"LOC": [
+			50,
+			80,
+			120,
+			160
+		],
+		"TOTAL_LOC": [
+			400,
+			500,
+			640,
+			900
+		],
+		"BLOCK_NESTING": [
+			6,
+			8,
+			10,
+			12
+		]
+	}
+}

.github/workflows/build.yml

@@ -8,7 +8,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [14.x, 16.x]
+                node-version: [18.x]
 
         steps:
             - uses: actions/checkout@v3

.npmignore

@@ -21,6 +21,7 @@ Thumbs.db
 .github
 _config.yml
 _.config.yml
+.codebeatsettings
 .editorconfig
 .gitattributes
 .gitignore

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -55,23 +55,25 @@ or unclude it from unpkg.com
 
 ## Usage
 
-### In a browser:
+### In a browser
 
 ```javascript
+import svg64 from 'svg64'; // or use window.svg64.default
+
 // This is your SVG DOM element
 const svg = document.getElementById('svg');
 
 // This is your DOM element that needs SVG background image
 const demo = document.getElementById('demo');
 
 // This is your SVG in base64 representation
-const base64fromSVG = window.svg64(svg);
+const base64fromSVG = svg64(svg);
 
 // Add the base64 image as a background to your element
 demo.style.backgroundImage = `url(${base64fromSVG})`;
 ```
 
-### In Node:
+### In Node
 
 ```javascript
 // Require svg64

demo/index.html

@@ -146,8 +146,10 @@ <h4>Usage in browser</h4>
 					<!-- prettier-ignore -->
 					<code>
 <pre>
+import svg64 from 'svg64'; // or use window.svg64.default
+
 const svg = document.getElementById('svg');
-const b64 = window.svg64(svg);
+const b64 = svg64(svg);
 const demo = document.getElementById('demo');
 
 demo.style.backgroundImage = `url(${b64})`;
@@ -212,11 +214,11 @@ <h4 style="text-align: center">This is the base64 encoded SVG used as a backgrou
 
 		<social-links></social-links>
 
-		<script src="../dist/svg64.js"></script>
+		<script src="./dist/svg64.umd.js"></script>
 
 		<script>
 			const svg = document.getElementById('svg');
-			const b64 = window.svg64(svg);
+			const b64 = window.svg64.default(svg);
 			const demo = document.getElementById('demo');
 
 			demo.style.backgroundImage = `url(${b64})`;

demo/scripts/node.mjs

@@ -0,0 +1,13 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { resolve, dirname } from 'node:path';
+
+import svg64 from '../dist/svg64.module.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const svg = readFileSync(resolve(__dirname, '..', 'assets', 'loader.svg'), 'utf-8');
+const result = svg64(svg);
+
+console.log(result);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svg64",
-	"version": "1.2.0",
+	"version": "2.0.0",
 	"description": "Convert SVG to base64 anywhere",
 	"keywords": [
 		"SVG convert",
@@ -15,20 +15,28 @@
 	"license": "MIT",
 	"author": "Atanas Atanasov <[email protected]> (https://atanas.info)",
 	"funding": "https://github.com/sponsors/scriptex",
-	"main": "dist/svg64.js",
+	"type": "module",
+	"source": "src/svg64.ts",
+	"exports": {
+		"require": "./dist/svg64.cjs",
+		"default": "./dist/svg64.modern.js"
+	},
+	"main": "./dist/svg64.cjs",
+	"types": "./dist/svg64.d.ts",
+	"module": "./dist/svg64.module.js",
+	"unpkg": "./dist/svg64.umd.js",
 	"repository": {
 		"type": "git",
 		"url": "github:scriptex/svg64"
 	},
 	"scripts": {
-		"js": "mkdir dist && uglifyjs src/svg64.js -o dist/svg64.js",
-		"clean": "rm -rf dist && rm -rf demo/dist",
 		"copy": "cp -r dist demo",
-		"demo": "node ./demo/scripts/node.js",
-		"build": "yarn clean && yarn js && yarn copy"
+		"demo": "node ./demo/scripts/node.mjs",
+		"build": "microbundle && yarn copy",
+		"start": "microbundle watch"
 	},
 	"dependencies": {},
 	"devDependencies": {
-		"uglify-js": "3.17.4"
+		"microbundle": "0.15.1"
 	}
 }