From 70bf0db1b4f105f803fd83def418d5baba91a0db Mon Sep 17 00:00:00 2001 From: Haibo Date: Wed, 15 Nov 2023 19:03:05 +0800 Subject: [PATCH 1/6] feat: pure version of separating js and css (#204) --- package.json | 2 +- rollup.config.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0d921ce..3d9e299 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "dev": "rollup --config --watch", "prebuild": "yarn run clean", "build": "rollup --config", - "postbuild": "cp ./src/medium-zoom.d.ts ./dist", + "postbuild": "cp ./src/medium-zoom.d.ts ./dist && cp ./src/medium-zoom.d.ts ./dist/pure/index.d.ts", "prepublishOnly": "npm run build", "lint": "eslint .", "format": "prettier --write *.{js,json,css,md} && yarn run lint --fix", diff --git a/rollup.config.js b/rollup.config.js index d77fc27..ef16297 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -67,4 +67,27 @@ export default [ }, plugins: [...sharedPlugins, terser(), license({ banner })], }, + // pure + { + input: 'src/medium-zoom.js', + output: { + file: 'dist/pure/index.js', + format: 'es', + }, + plugins: [...sharedPlugins, license({ banner })], + }, + { + input: 'src/medium-zoom.css', + output: { + file: 'dist/pure/style.css', + format: 'es', + }, + plugins: [ + postcss({ + extract: true, + minimize: true, + }), + license({ banner }), + ], + }, ] From a373c58b1b4bb82be7c8f8259979a8fb934912ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 15 Nov 2023 11:52:17 +0100 Subject: [PATCH 2/6] Move CSS dist file top level --- rollup.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index ef16297..87f6741 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -79,7 +79,7 @@ export default [ { input: 'src/medium-zoom.css', output: { - file: 'dist/pure/style.css', + file: 'dist/style.css', format: 'es', }, plugins: [ From 05149b745cc2d95e28476c66e085b15118273090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 15 Nov 2023 11:54:31 +0100 Subject: [PATCH 3/6] Add pure UMD bundles --- rollup.config.js | 41 +++++++++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 87f6741..51af297 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -28,6 +28,15 @@ const sharedPlugins = [ showGzippedSize: true, }), ] +const prettifyPlugin = uglify({ + compress: false, + mangle: false, + output: { + beautify: true, + indent_level: 2, + preamble: banner, + }, +}) export default [ { @@ -45,18 +54,7 @@ export default [ file: pkg.main.replace('.min', ''), format: 'umd', }, - plugins: [ - ...sharedPlugins, - uglify({ - compress: false, - mangle: false, - output: { - beautify: true, - indent_level: 2, - preamble: banner, - }, - }), - ], + plugins: [...sharedPlugins, prettifyPlugin], }, { input: 'src/index.js', @@ -76,6 +74,25 @@ export default [ }, plugins: [...sharedPlugins, license({ banner })], }, + { + input: 'src/medium-zoom.js', + output: { + name: 'mediumZoom', + file: 'dist/pure/medium-zoom.umd.js', + format: 'umd', + }, + plugins: [...sharedPlugins, prettifyPlugin], + }, + { + input: 'src/medium-zoom.js', + output: { + name: 'mediumZoom', + file: 'dist/pure/medium-zoom.min.umd.js', + format: 'umd', + }, + plugins: [...sharedPlugins, terser(), license({ banner })], + }, + // style { input: 'src/medium-zoom.css', output: { From f194ce88beea3bab6b6da283fbb55f8bce023188 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 15 Nov 2023 11:54:50 +0100 Subject: [PATCH 4/6] Add new bundles to bundlesize config --- bundlesize.config.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/bundlesize.config.json b/bundlesize.config.json index 25b012e..2c4ffff 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -1,5 +1,9 @@ { "files": [ + { + "path": "dist/style.css", + "maxSize": "250 B" + }, { "path": "dist/medium-zoom.esm.js", "maxSize": "5 kB" @@ -7,6 +11,14 @@ { "path": "dist/medium-zoom.min.js", "maxSize": "3.25 kB" + }, + { + "path": "dist/pure/index.js", + "maxSize": "4.75 kB" + }, + { + "path": "dist/pure/medium-zoom.min.umd.js", + "maxSize": "2.75 kB" } ] } From 9762731de5976d9ebb5e6d3ef020f62b942eb293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 15 Nov 2023 11:55:09 +0100 Subject: [PATCH 5/6] Add documentation for pure bundle --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 0b62e53..7d74eab 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,14 @@ Assuming you add the `data-zoomable` attribute to your images: mediumZoom('[data-zoomable]') ``` +> [!TIP] +> If you want to control when to inject the Medium Zoom CSS styles, you can use the pure JavaScript bundle: +> +> ```js +> import mediumZoom from 'medium-zoom/pure' +> import 'medium-zoom/style.css' +> ``` + ## API ```ts From 371836bda0849586435dbe8f9cee693c04286952 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 16 Nov 2023 10:36:55 +0100 Subject: [PATCH 6/6] Add `dist` path in documentation --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7d74eab..5d6fd60 100644 --- a/README.md +++ b/README.md @@ -134,8 +134,8 @@ mediumZoom('[data-zoomable]') > If you want to control when to inject the Medium Zoom CSS styles, you can use the pure JavaScript bundle: > > ```js -> import mediumZoom from 'medium-zoom/pure' -> import 'medium-zoom/style.css' +> import mediumZoom from 'medium-zoom/dist/pure' +> import 'medium-zoom/dist/style.css' > ``` ## API