From 62683ea32de93a777b879a924910b6c636e8cf81 Mon Sep 17 00:00:00 2001 From: Arjun Choudhary Date: Sat, 19 Nov 2022 11:38:54 +0530 Subject: [PATCH 1/2] chore: Updated & cleaned build dependencies --- .babelrc | 20 ++++----- package.json | 114 ++++++++++++++++++++++----------------------------- 2 files changed, 57 insertions(+), 77 deletions(-) diff --git a/.babelrc b/.babelrc index ead898b..be3758c 100644 --- a/.babelrc +++ b/.babelrc @@ -1,14 +1,10 @@ { - "presets": [ - ["latest", { - "es2015": { - "modules": false - } - }] - ], - "env": { - "test": { - "presets": ["env"] - } - } + "presets": [ + ["@babel/preset-env", { + "targets": { + "browsers": ["last 2 versions", "safari >= 7"] + }, + "modules": false + }] + ] } diff --git a/package.json b/package.json index 647135a..cd51d53 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,51 @@ { - "name": "frappe-charts", - "version": "1.6.3", - "description": "https://frappe.github.io/charts", - "main": "dist/frappe-charts.min.cjs.js", - "module": "dist/frappe-charts.min.esm.js", - "src": "dist/frappe-charts.esm.js", - "browser": "dist/frappe-charts.min.umd.js", - "directories": { - "doc": "docs" - }, - "files": [ - "src", - "dist" - ], - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "watch": "rollup -c --watch", - "dev": "npm-run-all --parallel watch", - "build": "rollup -c" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/frappe/charts.git" - }, - "keywords": [ - "js", - "charts" - ], - "author": "Prateeksha Singh", - "license": "MIT", - "bugs": { - "url": "https://github.com/frappe/charts/issues" - }, - "homepage": "https://github.com/frappe/charts#readme", - "devDependencies": { - "autoprefixer": "^8.1.0", - "babel-core": "^6.26.3", - "babel-plugin-external-helpers": "^6.22.0", - "babel-plugin-istanbul": "^5.1.4", - "babel-preset-env": "^1.7.0", - "babel-preset-latest": "^6.24.1", - "babel-register": "^6.26.0", - "clean-css": "^4.1.11", - "coveralls": "^3.0.0", - "cross-env": "^5.1.4", - "cssnano": "^4.1.10", - "eslint": "^8.9.0", - "mocha": "^9.2.0", - "node-sass": "^7.0.1", - "npm-run-all": "^4.1.2", - "nyc": "^15.1.0", - "postcss": "^6.0.21", - "postcss-cssnext": "^3.1.0", - "postcss-nested": "^3.0.0", - "precss": "^3.1.2", - "rollup": "^0.56.5", - "rollup-plugin-babel": "^3.0.3", - "rollup-plugin-eslint": "^6.0.0", - "rollup-plugin-node-resolve": "^3.3.0", - "rollup-plugin-postcss": "^2.0.3", - "rollup-plugin-replace": "^2.0.0", - "rollup-plugin-uglify": "^2.0.1", - "rollup-plugin-uglify-es": "0.0.1", - "rollup-watch": "^4.3.1" - } + "name": "frappe-charts", + "version": "v1.6.3", + "type": "module", + "main": "dist/frappe-charts.esm.js", + "module": "dist/frappe-charts.esm.js", + "browser": "dist/frappe-charts.umd.js", + "common": "dist/frappe-charts.cjs.js", + "unnpkg": "dist/frappe-charts.umd.js", + "description": "https://frappe.github.io/charts", + "directories": { + "doc": "docs" + }, + "files": [ + "src", + "dist" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "watch": "rollup -c --watch", + "dev": "npm-run-all --parallel watch", + "build": "rollup -c" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/frappe/charts.git" + }, + "keywords": [ + "js", + "charts" + ], + "author": "Prateeksha Singh", + "license": "MIT", + "bugs": { + "url": "https://github.com/frappe/charts/issues" + }, + "homepage": "https://github.com/frappe/charts#readme", + "devDependencies": { + "@babel/core": "^7.10.5", + "@babel/preset-env": "^7.10.4", + "node-sass": "^8.0.0", + "rollup": "^2.21.0", + "rollup-plugin-babel": "^4.4.0", + "rollup-plugin-bundle-size": "^1.0.3", + "rollup-plugin-commonjs": "^10.1.0", + "rollup-plugin-eslint": "^7.0.0", + "rollup-plugin-postcss": "^3.1.3", + "rollup-plugin-scss": "^2.5.0", + "rollup-plugin-terser": "^6.1.0" + } } From bf068ec6eaf6440e84de14cb580ba6d9bc23c61d Mon Sep 17 00:00:00 2001 From: Arjun Choudhary Date: Sat, 19 Nov 2022 11:41:05 +0530 Subject: [PATCH 2/2] chore: fixed build rewrite (frontported) The fix is naming the umd module frappe instead of frappe charts --- rollup.config.js | 231 +++++++++-------------------------------------- 1 file changed, 41 insertions(+), 190 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 057adb4..0b26d91 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,196 +1,47 @@ import pkg from "./package.json"; -// Rollup plugins +import commonjs from "rollup-plugin-commonjs"; import babel from "rollup-plugin-babel"; -import { eslint } from "rollup-plugin-eslint"; -import replace from "rollup-plugin-replace"; -import uglify from "rollup-plugin-uglify-es"; -import sass from "node-sass"; - -// PostCSS plugins -import postcssPlugin from "rollup-plugin-postcss"; -import nested from "postcss-nested"; -import cssnext from "postcss-cssnext"; -import cssnano from "cssnano"; - -import postcss from "postcss"; -import precss from "precss"; -import CleanCSS from "clean-css"; -import autoprefixer from "autoprefixer"; -import fs from "fs"; - -fs.readFile("src/css/charts.scss", (err, css) => { - postcss([precss, autoprefixer]) - .process(css, { from: "src/css/charts.scss", to: "src/css/charts.css" }) - .then((result) => { - let options = { - level: { - 1: { - removeQuotes: false, - }, - }, - }; - let output = new CleanCSS(options).minify(result.css); - let res = JSON.stringify(output.styles).replace(/"/g, "'"); - let js = `export const CSSTEXT = "${res.slice(1, -1)}";`; - fs.writeFile("src/css/chartsCss.js", js, (err) => { - if (err) console.log(err); - else { - console.log("File written successfully\n"); - } - }); - }); -}); +import postcss from "rollup-plugin-postcss"; +import scss from "rollup-plugin-scss"; +import bundleSize from "rollup-plugin-bundle-size"; +import { terser } from "rollup-plugin-terser"; export default [ - { - input: "src/js/index.js", - sourcemap: true, - output: [ - { - file: "docs/assets/js/frappe-charts.min.js", - format: "iife", - }, - { - file: pkg.browser, - format: "umd", - }, - ], - name: "frappe", - plugins: [ - postcssPlugin({ - preprocessor: (content, id) => - new Promise((resolve, reject) => { - const result = sass.renderSync({ file: id }); - resolve({ code: result.css.toString() }); - }), - extensions: [".scss"], - plugins: [ - nested(), - cssnext({ warnForDuplicates: false }), - cssnano(), - ], - }), - eslint({ - exclude: ["src/css/**"], - }), - babel({ - exclude: "node_modules/**", - plugins: ["external-helpers"], - }), - replace({ - exclude: "node_modules/**", - ENV: JSON.stringify(process.env.NODE_ENV || "development"), - }), - uglify(), - ], - }, - { - input: "docs/assets/js/index.js", - sourcemap: true, - output: [ - { - file: "docs/assets/js/index.min.js", - format: "iife", - }, - ], - name: "frappe", - plugins: [ - postcssPlugin({ - preprocessor: (content, id) => - new Promise((resolve, reject) => { - const result = sass.renderSync({ file: id }); - resolve({ code: result.css.toString() }); - }), - extensions: [".scss"], - plugins: [ - nested(), - cssnext({ warnForDuplicates: false }), - cssnano(), - ], - }), - eslint({ - exclude: ["src/css/**"], - }), - babel({ - exclude: "node_modules/**", - }), - replace({ - exclude: "node_modules/**", - ENV: JSON.stringify(process.env.NODE_ENV || "development"), - }), - ], - }, - { - input: "src/js/chart.js", - sourcemap: true, - output: [ - { - file: pkg.main, - format: "cjs", - }, - { - file: pkg.module, - format: "es", - }, - ], - plugins: [ - postcssPlugin({ - preprocessor: (content, id) => - new Promise((resolve, reject) => { - const result = sass.renderSync({ file: id }); - resolve({ code: result.css.toString() }); - }), - extensions: [".scss"], - plugins: [ - nested(), - cssnext({ warnForDuplicates: false }), - cssnano(), - ], - }), - eslint({ - exclude: ["src/css/**"], - }), - babel({ - exclude: "node_modules/**", - }), - replace({ - exclude: "node_modules/**", - ENV: JSON.stringify(process.env.NODE_ENV || "development"), - }), - uglify(), - ], - }, - { - input: "src/js/chart.js", - output: [ - { - file: pkg.src, - format: "es", - }, - ], - plugins: [ - postcssPlugin({ - preprocessor: (content, id) => - new Promise((resolve, reject) => { - const result = sass.renderSync({ file: id }); - resolve({ code: result.css.toString() }); - }), - extensions: [".scss"], - extract: "dist/frappe-charts.min.css", - plugins: [ - nested(), - cssnext({ warnForDuplicates: false }), - cssnano(), - ], - }), - eslint({ - exclude: ["src/css/**"], - }), - replace({ - exclude: "node_modules/**", - ENV: JSON.stringify(process.env.NODE_ENV || "development"), - }), - ], - }, + // browser-friendly UMD build + { + input: "src/js/index.js", + output: { + sourcemap: true, + name: "frappe", + file: pkg.browser, + format: "umd", + }, + plugins: [ + commonjs(), + babel({ + exclude: ["node_modules/**"], + }), + terser(), + scss({ output: "dist/frappe-charts.min.css" }), + bundleSize(), + ], + }, + + // CommonJS (for Node) and ES module (for bundlers) build. + { + input: "src/js/chart.js", + output: [ + { file: pkg.common, format: "cjs", sourcemap: true }, + { file: pkg.module, format: "es", sourcemap: true }, + ], + plugins: [ + babel({ + exclude: ["node_modules/**"], + }), + terser(), + postcss(), + bundleSize(), + ], + }, ];