Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@samuelmeuli/font-manager
Advanced tools
@samuelmeuli/font-manager - npm Package Compare versions
Comparing version 1.2.0 to 1.3.0
@@ -65,7 +65,9 @@ /*! ***************************************************************************** | ||
| const LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1"; | ||
| const LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts"; | ||
| function getFontList(apiKey) { | ||
| return __awaiter(this, void 0, void 0, function* () { | ||
| const url = `${LIST_BASE_URL}/webfonts?sort=popularity&key=${apiKey}`; | ||
| const response = yield get(url); | ||
| const url = new URL(LIST_BASE_URL); | ||
| url.searchParams.append("sort", "popularity"); | ||
| url.searchParams.append("key", apiKey); | ||
| const response = yield get(url.href); | ||
| const json = JSON.parse(response); | ||
@@ -75,3 +77,3 @@ const fontsOriginal = json.items; | ||
| const { family, subsets } = fontOriginal, others = __rest(fontOriginal, ["family", "subsets"]); | ||
| return Object.assign({}, others, { family, id: getFontId(family), scripts: subsets }); | ||
| return Object.assign(Object.assign({}, others), { family, id: getFontId(family), scripts: subsets }); | ||
| }); | ||
@@ -182,6 +184,7 @@ }); | ||
| return __awaiter(this, void 0, void 0, function* () { | ||
| const variantsEnc = variants.join(","); | ||
| const familiesEnc = fonts.map((font) => `${encodeURIComponent(font.family)}:${variantsEnc}`); | ||
| let query = `?family=${familiesEnc.join("|")}`; | ||
| query += `&subset=${scripts.join(",")}`; | ||
| const url = new URL(FONT_BASE_URL); | ||
| const variantsStr = variants.join(","); | ||
| const familiesStr = fonts.map((font) => `${font.family}:${variantsStr}`); | ||
| url.searchParams.append("family", familiesStr.join("|")); | ||
| url.searchParams.append("subset", scripts.join(",")); | ||
| if (previewsOnly) { | ||
@@ -193,6 +196,6 @@ const familyNamesConcat = fonts.map((font) => font.family).join(""); | ||
| .join(""); | ||
| query += `&text=${downloadChars}`; | ||
| url.searchParams.append("text", downloadChars); | ||
| } | ||
| const url = `${FONT_BASE_URL}${query}`; | ||
| return get(url); | ||
| url.searchParams.append("font-display", "swap"); | ||
| return get(url.href); | ||
| }); | ||
@@ -268,3 +271,3 @@ } | ||
| var css = "@charset \"UTF-8\";\ndiv[id^=\"font-picker\"] {\n position: relative;\n display: inline-block;\n width: 200px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }\n div[id^=\"font-picker\"] * {\n box-sizing: border-box; }\n div[id^=\"font-picker\"] p {\n margin: 0;\n padding: 0; }\n div[id^=\"font-picker\"] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer; }\n div[id^=\"font-picker\"] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 35px;\n padding: 0 10px;\n background: #cbcbcb; }\n div[id^=\"font-picker\"] .dropdown-button:hover, div[id^=\"font-picker\"] .dropdown-button:focus {\n background: #bebebe; }\n div[id^=\"font-picker\"] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap; }\n div[id^=\"font-picker\"] .dropdown-icon {\n margin-left: 10px; }\n\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg); } }\n\n@keyframes spinner {\n to {\n transform: rotate(360deg); } }\n div[id^=\"font-picker\"] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\"; }\n div[id^=\"font-picker\"] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\"; }\n div[id^=\"font-picker\"] .dropdown-icon.error::before {\n content: \"⚠\"; }\n div[id^=\"font-picker\"].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg); }\n div[id^=\"font-picker\"].expanded ul {\n max-height: 200px; }\n div[id^=\"font-picker\"] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch; }\n div[id^=\"font-picker\"] ul li {\n height: 35px;\n list-style: none; }\n div[id^=\"font-picker\"] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap; }\n div[id^=\"font-picker\"] ul li button:hover, div[id^=\"font-picker\"] ul li button:focus {\n background: #dddddd; }\n div[id^=\"font-picker\"] ul li button.active-font {\n background: #d1d1d1; }\n"; | ||
| var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n position: relative;\n display: inline-block;\n width: 200px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n margin: 0;\n padding: 0;\n}\ndiv[id^=font-picker] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 35px;\n padding: 0 10px;\n background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n height: 35px;\n list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n background: #d1d1d1;\n}"; | ||
| styleInject(css); | ||
@@ -271,0 +274,0 @@ |
@@ -71,7 +71,9 @@ (function (global, factory) { | ||
| const LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1"; | ||
| const LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts"; | ||
| function getFontList(apiKey) { | ||
| return __awaiter(this, void 0, void 0, function* () { | ||
| const url = `${LIST_BASE_URL}/webfonts?sort=popularity&key=${apiKey}`; | ||
| const response = yield get(url); | ||
| const url = new URL(LIST_BASE_URL); | ||
| url.searchParams.append("sort", "popularity"); | ||
| url.searchParams.append("key", apiKey); | ||
| const response = yield get(url.href); | ||
| const json = JSON.parse(response); | ||
@@ -81,3 +83,3 @@ const fontsOriginal = json.items; | ||
| const { family, subsets } = fontOriginal, others = __rest(fontOriginal, ["family", "subsets"]); | ||
| return Object.assign({}, others, { family, id: getFontId(family), scripts: subsets }); | ||
| return Object.assign(Object.assign({}, others), { family, id: getFontId(family), scripts: subsets }); | ||
| }); | ||
@@ -188,6 +190,7 @@ }); | ||
| return __awaiter(this, void 0, void 0, function* () { | ||
| const variantsEnc = variants.join(","); | ||
| const familiesEnc = fonts.map((font) => `${encodeURIComponent(font.family)}:${variantsEnc}`); | ||
| let query = `?family=${familiesEnc.join("|")}`; | ||
| query += `&subset=${scripts.join(",")}`; | ||
| const url = new URL(FONT_BASE_URL); | ||
| const variantsStr = variants.join(","); | ||
| const familiesStr = fonts.map((font) => `${font.family}:${variantsStr}`); | ||
| url.searchParams.append("family", familiesStr.join("|")); | ||
| url.searchParams.append("subset", scripts.join(",")); | ||
| if (previewsOnly) { | ||
@@ -199,6 +202,6 @@ const familyNamesConcat = fonts.map((font) => font.family).join(""); | ||
| .join(""); | ||
| query += `&text=${downloadChars}`; | ||
| url.searchParams.append("text", downloadChars); | ||
| } | ||
| const url = `${FONT_BASE_URL}${query}`; | ||
| return get(url); | ||
| url.searchParams.append("font-display", "swap"); | ||
| return get(url.href); | ||
| }); | ||
@@ -274,3 +277,3 @@ } | ||
| var css = "@charset \"UTF-8\";\ndiv[id^=\"font-picker\"] {\n position: relative;\n display: inline-block;\n width: 200px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }\n div[id^=\"font-picker\"] * {\n box-sizing: border-box; }\n div[id^=\"font-picker\"] p {\n margin: 0;\n padding: 0; }\n div[id^=\"font-picker\"] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer; }\n div[id^=\"font-picker\"] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 35px;\n padding: 0 10px;\n background: #cbcbcb; }\n div[id^=\"font-picker\"] .dropdown-button:hover, div[id^=\"font-picker\"] .dropdown-button:focus {\n background: #bebebe; }\n div[id^=\"font-picker\"] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap; }\n div[id^=\"font-picker\"] .dropdown-icon {\n margin-left: 10px; }\n\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg); } }\n\n@keyframes spinner {\n to {\n transform: rotate(360deg); } }\n div[id^=\"font-picker\"] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\"; }\n div[id^=\"font-picker\"] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\"; }\n div[id^=\"font-picker\"] .dropdown-icon.error::before {\n content: \"⚠\"; }\n div[id^=\"font-picker\"].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg); }\n div[id^=\"font-picker\"].expanded ul {\n max-height: 200px; }\n div[id^=\"font-picker\"] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch; }\n div[id^=\"font-picker\"] ul li {\n height: 35px;\n list-style: none; }\n div[id^=\"font-picker\"] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap; }\n div[id^=\"font-picker\"] ul li button:hover, div[id^=\"font-picker\"] ul li button:focus {\n background: #dddddd; }\n div[id^=\"font-picker\"] ul li button.active-font {\n background: #d1d1d1; }\n"; | ||
| var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n position: relative;\n display: inline-block;\n width: 200px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n margin: 0;\n padding: 0;\n}\ndiv[id^=font-picker] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 35px;\n padding: 0 10px;\n background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n height: 35px;\n list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n background: #d1d1d1;\n}"; | ||
| styleInject(css); | ||
@@ -277,0 +280,0 @@ |
| { | ||
| "name": "@samuelmeuli/font-manager", | ||
| "version": "1.2.0", | ||
| "version": "1.3.0", | ||
| "description": "Manages, downloads and applies Google Fonts for picker components", | ||
@@ -41,18 +41,17 @@ "author": { | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.5.5" | ||
| "@babel/runtime": "^7.6.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@samuelmeuli/eslint-config": "^3.0.1", | ||
| "@samuelmeuli/eslint-config": "^3.0.2", | ||
| "@samuelmeuli/stylelint-config": "^1.0.2", | ||
| "@samuelmeuli/tsconfig": "^0.1.1", | ||
| "@typescript-eslint/eslint-plugin": "^2.0.0", | ||
| "@typescript-eslint/parser": "^2.0.0", | ||
| "eslint": "6.1.0", | ||
| "@typescript-eslint/eslint-plugin": "^2.2.0", | ||
| "@typescript-eslint/parser": "^2.2.0", | ||
| "eslint": "6.3.0", | ||
| "eslint-config-airbnb-base": "14.0.0", | ||
| "eslint-config-prettier": "^6.1.0", | ||
| "eslint-config-prettier": "^6.3.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-simple-import-sort": "^4.0.0", | ||
| "husky": "^3.0.4", | ||
| "lint-staged": "^9.2.3", | ||
| "node-sass": "^4.12.0", | ||
| "husky": "^3.0.5", | ||
| "lint-staged": "^9.2.5", | ||
| "np": "^5.0.2", | ||
@@ -62,7 +61,8 @@ "npm-run-all": "^4.1.3", | ||
| "prettier": "^1.16.4", | ||
| "rollup": "^1.19.4", | ||
| "rollup": "^1.21.2", | ||
| "rollup-plugin-postcss": "^2.0.3", | ||
| "rollup-plugin-typescript2": "^0.22.1", | ||
| "rollup-plugin-typescript2": "^0.24.1", | ||
| "sass": "^1.22.12", | ||
| "stylelint": "^10.1.0", | ||
| "typescript": "^3.5.3" | ||
| "typescript": "^3.6.3" | ||
| }, | ||
@@ -69,0 +69,0 @@ "eslintConfig": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.77%
788
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.64%
48726
Dependency changes
Updated@babel/runtime@^7.6.0