refactor: convert image package to TS

Author: diegomura

packages/image/babel.config.js

@@ -0,0 +1,5 @@
+import 'vitest-fetch-mock';
+
+declare global {
+  const BROWSER: boolean;
+}

packages/image/globals.d.ts

@@ -21,7 +21,6 @@
     "watch": "rimraf ./lib && rollup -c -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
     "@react-pdf/png-js": "^3.0.0",
     "jay-peg": "^1.1.1"
   },

packages/image/package.json

@@ -1,37 +1,27 @@
-import babel from '@rollup/plugin-babel';
+import { dts } from 'rollup-plugin-dts';
+import del from 'rollup-plugin-delete';
+import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import ignore from 'rollup-plugin-ignore';
 import nodePolyfills from 'rollup-plugin-polyfill-node';
 
 import pkg from './package.json' with { type: 'json' };
 
-const input = './src/index.js';
-
-const babelConfig = () => ({
-  babelrc: true,
-  exclude: 'node_modules/**',
-  babelHelpers: 'runtime',
-});
+const input = './src/index.ts';
 
 const getExternal = ({ browser }) => [
-  /@babel\/runtime/,
   ...Object.keys(pkg.dependencies),
   ...(browser ? [] : ['fs', 'path', 'url']),
 ];
 
 const getPlugins = ({ browser }) => [
-  babel(babelConfig()),
+  typescript(),
   replace({
     preventAssignment: true,
     values: { BROWSER: JSON.stringify(browser) },
   }),
   ...(browser
-    ? [
-        ignore(['fs', 'path', 'url']),
-        nodePolyfills({
-          include: [/node_modules\/.+\.js/, /\/image\/src\/.*\.js/],
-        }),
-      ]
+    ? [ignore(['fs', 'path', 'url']), nodePolyfills({ include: null })]
     : []),
 ];
 
@@ -49,4 +39,10 @@ const browserConfig = {
   plugins: getPlugins({ browser: true }),
 };
 
-export default [serverConfig, browserConfig];
+const dtsConfig = {
+  input: './lib/types/index.d.ts',
+  output: [{ file: 'lib/index.d.ts', format: 'es' }],
+  plugins: [dts(), del({ targets: 'lib/types', hook: 'buildEnd' })],
+};
+
+export default [serverConfig, browserConfig, dtsConfig];

packages/image/rollup.config.js

@@ -1,10 +1,10 @@
-const createCache = ({ limit = 100 } = {}) => {
-  let cache = {};
+const createCache = <T>({ limit = 100 } = {}) => {
+  let cache: Record<string, T> = {};
   let keys = [];
 
   return {
-    get: (key) => cache[key],
-    set: (key, value) => {
+    get: (key: string): T | undefined => cache[key],
+    set: (key: string, value: T) => {
       keys.push(key);
       if (keys.length > limit) {
         delete cache[keys.shift()];

packages/image/src/cache.js packages/image/src/cache.tspackages/image/src/cache.js renamed to packages/image/src/cache.ts

@@ -1,3 +1,5 @@
 import resolveImage from './resolve';
 
+export type { ImageSrc } from './types';
+
 export default resolveImage;

packages/image/src/index.js packages/image/src/index.tspackages/image/src/index.js renamed to packages/image/src/index.ts

@@ -1,26 +1,29 @@
 import _JPEG from 'jay-peg';
+import { Image } from './types';
 
-class JPEG {
-  data = null;
-
-  width = null;
-
-  height = null;
+class JPEG implements Image {
+  data: Buffer;
+  width: number;
+  height: number;
+  format: 'jpeg';
 
   constructor(data) {
     this.data = data;
+    this.format = 'jpeg';
 
     if (data.readUInt16BE(0) !== 0xffd8) {
       throw new Error('SOI not found in JPEG');
     }
 
     const markers = _JPEG.decode(this.data);
 
+    let orientation;
+
     for (let i = 0; i < markers.length; i += 1) {
       const marker = markers[i];
 
       if (marker.name === 'EXIF' && marker.entries.orientation) {
-        this.orientation = marker.entries.orientation;
+        orientation = marker.entries.orientation;
       }
 
       if (marker.name === 'SOF') {
@@ -29,14 +32,14 @@ class JPEG {
       }
     }
 
-    if (this.orientation > 4) {
+    if (orientation > 4) {
       [this.width, this.height] = [this.height, this.width];
     }
   }
-}
 
-JPEG.isValid = (data) => {
-  return data && Buffer.isBuffer(data) && data.readUInt16BE(0) === 0xffd8;
-};
+  static isValid(data) {
+    return data && Buffer.isBuffer(data) && data.readUInt16BE(0) === 0xffd8;
+  }
+}
 
 export default JPEG;

packages/image/src/jpeg.js packages/image/src/jpeg.tspackages/image/src/jpeg.js renamed to packages/image/src/jpeg.ts

@@ -0,0 +1,29 @@
+import _PNG from '@react-pdf/png-js';
+
+import { Image } from './types';
+
+class PNG implements Image {
+  data: Buffer;
+  width: number;
+  height: number;
+  format: 'png';
+
+  constructor(data: Buffer) {
+    const png = new _PNG(data);
+
+    this.data = data;
+    this.width = png.width;
+    this.height = png.height;
+    this.format = 'png';
+  }
+
+  static isValid(data: Buffer): boolean {
+    try {
+      return !!new PNG(data);
+    } catch {
+      return false;
+    }
+  }
+}
+
+export default PNG;