From d38a1b36b3b02e30d476bbbc6d9411fe48d1fb1a Mon Sep 17 00:00:00 2001 From: Fabian Haas <29468630+hfxbse@users.noreply.github.com> Date: Tue, 25 Jun 2024 00:33:20 +0200 Subject: [PATCH] build NPM package via Vite Also declares React as a peer dependency, addressing Issue #3 --- .gitignore | 3 +++ .npmignore | 11 ----------- CONTRIBUTING.md | 2 -- package-lock.json | 11 +++++------ package.json | 24 ++++++++++++++++++------ src/index.jsx | 1 - vite.config.js | 39 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 65 insertions(+), 26 deletions(-) delete mode 100644 .npmignore create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore index 4ea8241..f50323a 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ npm-debug.log* /dist *storybook.log /storybook-static + +# NPM tar balls +*.tgz diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 4110465..0000000 --- a/.npmignore +++ /dev/null @@ -1,11 +0,0 @@ -/coverage -/demo/dist -/node_modules -npm-debug.log* -.editorconfig -src -demo -.gitattributes -/.idea -*storybook.log -/storybook-static diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a6577ba..8921504 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,5 +16,3 @@ - `npm run build` creates a production build by default. To create a development build, set the `NODE_ENV` environment variable to `development` while running this command. - -- `npm run clean` will delete built resources. diff --git a/package-lock.json b/package-lock.json index 8cce850..c3a61be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,15 @@ { "name": "super-react-gist", - "version": "1.1.2", + "version": "1.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "super-react-gist", - "version": "1.1.2", + "version": "1.1.1", "license": "MIT", "dependencies": { - "dompurify": "^2.3.6", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" + "dompurify": "^2.3.6" }, "devDependencies": { "@storybook/addon-essentials": "^8.1.10", @@ -23,7 +21,8 @@ "vite": "^5.3.1" }, "peerDependencies": { - "react": ">=16.14.0" + "react": ">=16.14.0", + "react-dom": ">=16.14.0" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index bf4a64e..0c9221c 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,21 @@ { "name": "super-react-gist", - "version": "1.1.1", + "version": "1.1.2", "description": "Simple and flexible component that allows you to embed GitHub Gists in React projects.", "main": "lib/index.js", "module": "es/index.js", + "files": [ + "es", + "lib", + "umd", + "src/index.jsx" + ], + "exports": { + ".": { + "import": "./es/index.js", + "require": "./lib/index.js" + } + }, "repository": { "type": "git", "url": "https://github.com/georgegkas/super-react-gist.git" @@ -35,12 +47,11 @@ ], "license": "MIT", "dependencies": { - "dompurify": "^2.3.6", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" + "dompurify": "^2.3.6" }, "peerDependencies": { - "react": ">=16.14.0" + "react": ">=16.14.0", + "react-dom": ">=16.14.0" }, "devDependencies": { "@storybook/addon-essentials": "^8.1.10", @@ -52,6 +63,7 @@ "vite": "^5.3.1" }, "scripts": { - "start": "storybook dev -p 3000" + "start": "storybook dev -p 3000", + "build": "vite build" } } diff --git a/src/index.jsx b/src/index.jsx index 9d45846..ae24ff4 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -67,7 +67,6 @@ const Gist = ({ setGistError(true) setGistIsFetching(false) onError?.() - return } React.useEffect(() => { diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..a586ac0 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,39 @@ +import packageDefinition from './package.json' assert {type: 'json'} +import * as fs from "node:fs"; +import {resolve} from "path"; +import {defineConfig} from "vite"; + +export default defineConfig({ + build: { + outDir: '.', + sourcemap: true, + lib: { + entry: resolve(__dirname, 'src/index.jsx'), + name: 'super-react-gist', + formats: ['cjs', 'umd', 'umd', 'es'], + fileName: (moduleFormat) => { + const directory = { + cjs: 'lib', + umd: 'umd', + es: 'es' + }[moduleFormat] + + const fileName = moduleFormat === 'umd' ? packageDefinition.name : 'index' + const filePath = `${directory}/${fileName}.js` + + return !fs.existsSync(filePath) ? filePath : `${directory}/${fileName}.min.js` + } + }, + rollupOptions: { + external: ['react', 'react-dom'], + output: { + globals: { + gist: 'Gist' + } + }, + } + }, + resolve: { + dedupe: ['react', 'react-dom'], + }, +})