Merge pull request #391 from Giphy/esm-cleanup

esm cleanup

.changeset/tidy-fishes-sparkle.md

@@ -0,0 +1,14 @@
+---
+'@giphy/svelte-components': minor
+'@giphy/js-analytics': major
+'@giphy/js-fetch-api': major
+'@giphy/js-brand': major
+'@giphy/js-util': major
+'@giphy/react-components': patch
+---
+
+util, analytics, fetch-api and brand are all type: module now. See [here](https://github.com/Giphy/giphy-js/pull/391#issue-1770394467) for more info
+
+## Possible breaking change
+
+The output format has changed. If you are accessing files in dist, your build will fail.

package.json

@@ -54,7 +54,9 @@
         "lint-staged": "^13.2.2",
         "prettier": "^2.8.8",
         "prettier-eslint-cli": "^7.1.0",
+        "publint": "^0.1.12",
         "ts-jest": "^29.1.0",
+        "tsup": "^7.0.0",
         "turbo": "^1.9.3",
         "typescript": "^5.0.4"
     },

packages/analytics/jestconfig.js

@@ -1,9 +1,9 @@
 // Jest configuration for api
-const base = require('../../jestconfig-base.js')
+import base from '../../jestconfig-base.js'
 
-module.exports = {
+export default {
     ...base,
     displayName: 'analytics',
-    automock: false,
+    testEnvironment: 'jsdom',
     setupFiles: ['./set-up-jest.ts'],
 }

packages/analytics/package.json

@@ -1,32 +1,31 @@
 {
     "scripts": {
         "lint": "run -T eslint . --ext .ts,.tsx",
-        "clean": "rm -rf ./dist ./esm",
+        "clean": "rm -rf ./dist",
         "dev": "tsc --watch",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
         "prepublish": "npm run clean && npm run build",
         "test": "run -T jest --config ./jestconfig.js",
         "test:watch": "run -T jest --config ./jestconfig.js --watchAll"
     },
     "name": "@giphy/js-analytics",
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/analytics",
     "version": "4.3.2",
-    "main": "dist/index.js",
+    "main": "dist/index.cjs",
     "types": "dist/index.d.ts",
-    "module": "esm/index.js",
+    "module": "dist/index.js",
+    "type": "module",
     "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
         },
         "./package.json": "./package.json"
     },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "license": "MIT",

packages/analytics/set-up-jest.ts

@@ -1,5 +1,5 @@
-import { GlobalWithFetchMock } from 'jest-fetch-mock'
+import jestFetchMock, { GlobalWithFetchMock } from 'jest-fetch-mock'
 
-const customGlobal: GlobalWithFetchMock = (global as unknown) as GlobalWithFetchMock
-customGlobal.fetch = require('jest-fetch-mock')
+const customGlobal: GlobalWithFetchMock = global as unknown as GlobalWithFetchMock
+customGlobal.fetch = jestFetchMock
 customGlobal.fetchMock = customGlobal.fetch

packages/brand/package.json

@@ -1,10 +1,9 @@
 {
     "scripts": {
         "lint": "run -T eslint . --ext .ts,.tsx",
-        "clean": "rm -rf ./dist ./esm",
+        "clean": "rm -rf ./dist",
         "dev": "parcel public/test.html",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
         "prepublish": "npm run clean && npm run build"
     },
     "devDependencies": {
@@ -16,25 +15,25 @@
     },
     "name": "@giphy/js-brand",
     "version": "2.3.2",
-    "main": "./dist/index.js",
     "description": "colors, fonts, and other shared css",
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/brand",
-    "types": "./dist/index.d.ts",
-    "module": "esm/index.js",
+    "main": "dist/index.cjs",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "type": "module",
     "sideEffects": [
         "./src/typography.ts"
     ],
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
         },
         "./package.json": "./package.json"
     },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "author": "giannif",

packages/fetch-api/CHANGELOG.md

@@ -2,8 +2,6 @@
 
 ## 4.9.3
 
-### Patch Changes
-
 -   8ddfb8c: check for require so esm build doesn't fail
 
 ## 4.9.2

packages/fetch-api/jestconfig.js

@@ -1,7 +1,6 @@
-// Jest configuration for api
-const base = require('../../jestconfig-base.js')
+import base from '../../jestconfig-base.js'
 
-module.exports = {
+export default {
     ...base,
     displayName: 'fetch-api',
     automock: false,

packages/fetch-api/package.json

@@ -4,31 +4,30 @@
         "clean": "rm -rf ./dist",
         "dev": "parcel public/test.html",
         "docs": "typedoc src/index.ts",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
         "prepublish": "npm run clean && npm run build",
         "test": "run -T jest --config ./jestconfig.js",
         "test:watch": "run -T jest --config ./jestconfig.js --watchAll"
     },
     "name": "@giphy/js-fetch-api",
     "version": "4.9.3",
-    "main": "dist/index.js",
     "description": "Javascript API to fetch gifs and stickers from the GIPHY API.",
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/fetch-api",
+    "main": "dist/index.cjs",
     "types": "dist/index.d.ts",
-    "module": "esm/index.js",
+    "module": "dist/index.js",
+    "type": "module",
     "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
         },
         "./package.json": "./package.json"
     },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "license": "MIT",

packages/react-components/CHANGELOG.md

@@ -1,4 +1,4 @@
-## @giphy/react-components@6.0.0 (2022-08-03)
+## @giphy/react-components
 
 ## 7.0.0
 

packages/react-components/package.json

@@ -1,11 +1,10 @@
 {
     "scripts": {
         "lint": "run -T eslint . --ext .ts,.tsx",
-        "clean": "rm -rf ./dist ./esm",
+        "clean": "rm -rf ./dist",
         "types": "tsc ./src/index.tsx -d --emitDeclarationOnly -declarationDir ./dist",
         "dev": "start-storybook -p 5001",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts --legacyOutput",
         "prepublish": "npm run clean && npm run build",
         "deploy-storybook": "storybook-to-ghpages",
         "snapshot": "NODE_ENV=PERCY build-storybook && percy storybook ./storybook-static",
@@ -50,21 +49,12 @@
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/react-components",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "module": "esm/index.js",
+    "module": "dist/esm/index.js",
     "sideEffects": [
         "intersection-observer"
     ],
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
-    },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "author": "giannif",

packages/react-components/src/index.tsx → packages/react-components/src/index.ts

@@ -18,8 +18,5 @@ export * from './components/video/controls/play-pause'
 export * from './components/video/controls/volume'
 export { default as VideoOverlay } from './components/video/video-overlay'
 
-const { version } = require('../package.json')
-
 // send headers with library type and version
 appendGiphySDKRequestHeader(`X-GIPHY-SDK-NAME`, 'ReactSDK')
-appendGiphySDKRequestHeader(`X-GIPHY-SDK-VERSION`, version)

packages/react-components/tsconfig.json

@@ -5,5 +5,5 @@
         "resolveJsonModule": true,
         "outDir": "./dist"
     },
-    "files": ["src/index.tsx", "src/emotion.d.ts"]
+    "files": ["src/index.ts", "src/emotion.d.ts"]
 }

packages/svelte-components/package.json

@@ -37,18 +37,18 @@
         "throttle-debounce": "5.0.0"
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^2.0.0",
-        "@sveltejs/kit": "^1.5.0",
-        "@sveltejs/package": "^2.0.0",
+        "@sveltejs/adapter-auto": "^2.1.0",
+        "@sveltejs/kit": "^1.20.4",
+        "@sveltejs/package": "^2.0.2",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte": "^2.30.0",
         "prettier-plugin-svelte": "^2.8.1",
         "publint": "^0.1.9",
         "svelte": "^3.59.1",
-        "svelte-check": "^3.0.1",
+        "svelte-check": "^3.4.3",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
-        "vite": "^4.3.0",
+        "vite": "^4.3.9",
         "vitest": "^0.25.3"
     },
     "license": "MIT",

packages/util/CHANGELOG.md

@@ -1,5 +1,3 @@
-## 4.0.0 (2021-08-09)
-
 ## 4.4.2
 
 ### Patch Changes

packages/util/jestconfig.js

@@ -1,7 +1,7 @@
 // Jest configuration for api
-const base = require('../../jestconfig-base.js')
+import base from '../../jestconfig-base.js'
 
-module.exports = {
+export default {
     ...base,
     displayName: 'util',
     testEnvironment: 'jsdom',

packages/util/package.json

@@ -1,33 +1,32 @@
 {
     "scripts": {
         "lint": "run -T eslint . --ext .ts,.tsx",
-        "clean": "rm -rf ./dist ./esm",
+        "clean": "rm -rf ./dist",
         "dev": "tsc --watch",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
         "prepublish": "npm run clean && npm run build",
         "test": "run -T jest --config ./jestconfig.js",
         "test:watch": "run -T jest --config ./jestconfig.js --watchAll"
     },
     "name": "@giphy/js-util",
     "version": "4.4.2",
-    "main": "dist/index.js",
     "description": "Shared giphy js utils",
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/util",
+    "main": "dist/index.cjs",
     "types": "dist/index.d.ts",
-    "module": "esm/index.js",
+    "module": "dist/index.js",
+    "type": "module",
     "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
         },
         "./package.json": "./package.json"
     },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "license": "MIT",