diff --git a/packages/fonts/package.json b/packages/fonts/package.json index 888fdefa96f9..eba768fcc48f 100644 --- a/packages/fonts/package.json +++ b/packages/fonts/package.json @@ -32,7 +32,7 @@ "default": "./src/fonts.json" }, ".": { - "default": "./src/index.js" + "default": "./src/index.ts" } }, "exports": { @@ -47,7 +47,8 @@ }, "main": "dist/index.js", "module": "dist-module/index.js", - "source": "src/index.js", + "tyoes": "dist-types/index.d.ts", + "source": "src/index.ts", "publishConfig": { "access": "public" }, diff --git a/packages/fonts/src/constants.js b/packages/fonts/src/constants.ts similarity index 96% rename from packages/fonts/src/constants.js rename to packages/fonts/src/constants.ts index 41961950d5b0..cb5ad714d64a 100644 --- a/packages/fonts/src/constants.js +++ b/packages/fonts/src/constants.ts @@ -16,7 +16,7 @@ // Curated Fonts list source: // https://github.com/googleforcreators/web-stories-wp/issues/1989#issuecomment-662253222 -export const CURATED_FONT_NAMES = [ +export const CURATED_FONT_NAMES: string[] = [ 'Karla', 'Lato', 'Lora', diff --git a/packages/fonts/src/index.js b/packages/fonts/src/index.ts similarity index 100% rename from packages/fonts/src/index.js rename to packages/fonts/src/index.ts diff --git a/packages/fonts/src/types.ts b/packages/fonts/src/types.ts new file mode 100644 index 000000000000..d62b2589a198 --- /dev/null +++ b/packages/fonts/src/types.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface Font { + family: string; + variants: Array<[number, number]>; +} diff --git a/packages/fonts/src/utils/getFontCSS.js b/packages/fonts/src/utils/getFontCSS.ts similarity index 74% rename from packages/fonts/src/utils/getFontCSS.js rename to packages/fonts/src/utils/getFontCSS.ts index 209014e3a4eb..c58028b88982 100644 --- a/packages/fonts/src/utils/getFontCSS.js +++ b/packages/fonts/src/utils/getFontCSS.ts @@ -17,11 +17,11 @@ /** * Get the CSS font format for a given font URL. * - * @param {string} src Font URL. - * @return {string|null} Font format string or null if the font is unsupported. + * @param src Font URL. + * @return Font format string or null if the font is unsupported. */ -function getFontFormat(src) { - const fileExtension = src.split(/[#?]/)[0].split('.').pop().trim(); +function getFontFormat(src: string): string | null { + const fileExtension = src.split(/[#?]/)?.[0]?.split('.')?.pop()?.trim(); switch (fileExtension) { case 'woff': @@ -39,11 +39,11 @@ function getFontFormat(src) { /** * Get the inline stylesheet for a specific font family. * - * @param {string} name Font family. - * @param {string} src Font URL. - * @return {string|null} Stylesheet or null if the font has an unsupported format. + * @param name Font family. + * @param src Font URL. + * @return Stylesheet or null if the font has an unsupported format. */ -function getFontCSS(name, src) { +function getFontCSS(name: string, src: string): string | null { const format = getFontFormat(src); if (!format) { diff --git a/packages/fonts/src/utils/getGoogleFontURL.js b/packages/fonts/src/utils/getGoogleFontURL.ts similarity index 87% rename from packages/fonts/src/utils/getGoogleFontURL.js rename to packages/fonts/src/utils/getGoogleFontURL.ts index bf6d39509d69..a4ad8cb1ce45 100644 --- a/packages/fonts/src/utils/getGoogleFontURL.js +++ b/packages/fonts/src/utils/getGoogleFontURL.ts @@ -14,6 +14,11 @@ * limitations under the License. */ +/** + * Internal dependencies + */ +import type { Font } from '../types'; + /** * Given a list of Google fonts, returns a URL to embed them. * @@ -21,17 +26,17 @@ * axis tag list and axis tuple list that Google Fonts expects. * * @see https://developers.google.com/fonts/docs/css2 - * @param {Array}>>} fonts List of font objects. - * @param {string} [display] Valid font-display value, e.g. 'swap' or 'auto'. Default 'swap'. - * @return {string} Google Fonts embed URL. + * @param fonts List of font objects. + * @param [display] Valid font-display value, e.g. 'swap' or 'auto'. Default 'swap'. + * @return Google Fonts embed URL. */ -function getGoogleFontURL(fonts, display = 'swap') { +function getGoogleFontURL(fonts: Font[], display: 'swap' | 'auto' = 'swap') { const url = new URL('https://fonts.googleapis.com/css2'); url.searchParams.append('display', display); for (const { family: familyName, variants = [] } of fonts) { // [ [ 1, 400 ], [ 0, 700 ] ] -> [ ital, wght ] - const axes = variants + const axes: string[] = variants .reduce((acc, [fontStyle, fontWeight]) => { // Uses axis names as listed on https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts. if (fontStyle === 1 && !acc.includes('ital')) { @@ -41,7 +46,7 @@ function getGoogleFontURL(fonts, display = 'swap') { acc.push('wght'); } return acc; - }, []) + }, [] as Array<'ital' | 'wght'>) .sort(); // Need to be sorted alphabetically. let family = familyName; diff --git a/packages/fonts/src/utils/index.js b/packages/fonts/src/utils/index.ts similarity index 100% rename from packages/fonts/src/utils/index.js rename to packages/fonts/src/utils/index.ts diff --git a/packages/fonts/tsconfig.json b/packages/fonts/tsconfig.json new file mode 100644 index 000000000000..409e9ab59df8 --- /dev/null +++ b/packages/fonts/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.shared.json", + "compilerOptions": { + "rootDir": "src", + "declarationDir": "dist-types" + }, + "references": [{ "path": "../react" }], + "include": ["src/**/*"] +} diff --git a/tsconfig.json b/tsconfig.json index d82eef5f0747..7c4a71e8f868 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "references": [ + { "path": "packages/fonts" }, { "path": "packages/i18n" }, { "path": "packages/media" }, { "path": "packages/moveable" },