From 82c5e6f6f4291aa9ef73286ad71c0c1d674fa978 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 13:29:26 +1100 Subject: [PATCH 01/13] Add basic tsconfig.json validation for edit-site package --- packages/components/src/index.ts | 1 + packages/edit-site/lib/unbrotli.js | 45 ++++++++++++------ packages/edit-site/package.json | 1 + .../src/components/style-book/categories.ts | 19 +++++--- .../components/style-book/color-examples.tsx | 12 ++--- .../style-book/duotone-examples.tsx | 6 ++- .../src/components/style-book/examples.tsx | 32 ++++++++----- .../src/components/style-book/types.ts | 18 ++++++++ packages/edit-site/tsconfig.json | 46 +++++++++++++++++++ tsconfig.json | 1 + 10 files changed, 139 insertions(+), 42 deletions(-) create mode 100644 packages/edit-site/tsconfig.json diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 2acd609992d6a..95c27d9fd0d81 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -104,6 +104,7 @@ export { Heading as __experimentalHeading } from './heading'; export { HStack as __experimentalHStack } from './h-stack'; export { default as Icon } from './icon'; export type { IconType } from './icon'; +export type { WPCompleter } from './autocomplete/types.ts'; export { default as IconButton } from './button/deprecated'; export { ItemGroup as __experimentalItemGroup, diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js index 63293e6cc473c..9cb4eb63e0d61 100644 --- a/packages/edit-site/lib/unbrotli.js +++ b/packages/edit-site/lib/unbrotli.js @@ -30,6 +30,7 @@ /* eslint eslint-comments/no-unlimited-disable: 0 */ /* eslint-disable */ +// @ts-nocheck (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.unbrotli = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i { + const categories: StyleBookCategory[] = + categoryDefinition?.subcategories ?? []; + if ( categories.length ) { + return categories.reduce( + ( acc, subcategoryDefinition ): CategoryExamples => { const subcategoryExamples = getExamplesByCategory( subcategoryDefinition, examples ); if ( subcategoryExamples ) { + if ( ! acc.subcategories ) { + acc.subcategories = []; + } acc.subcategories = [ ...acc.subcategories, subcategoryExamples, @@ -48,7 +53,6 @@ export function getExamplesByCategory( { title: categoryDefinition.title, slug: categoryDefinition.slug, - subcategories: [], } ); } @@ -84,8 +88,9 @@ export function getTopLevelStyleBookCategories(): StyleBookCategory[] { ...STYLE_BOOK_THEME_SUBCATEGORIES, ...STYLE_BOOK_CATEGORIES, ].map( ( { slug } ) => slug ); - const extraCategories = getCategories().filter( + const extraCategories: StyleBookCategory[] = getCategories(); + const extraCategoriesFiltered = extraCategories.filter( ( { slug } ) => ! reservedCategories.includes( slug ) ); - return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ]; + return [ ...STYLE_BOOK_CATEGORIES, ...extraCategoriesFiltered ]; } diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx index bdc7bc7936bc1..b2ece4c3b0c82 100644 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -11,26 +11,20 @@ import { View } from '@wordpress/primitives'; import { getColorClassName, __experimentalGetGradientClass, + // @ts-ignore } from '@wordpress/block-editor'; /** * Internal dependencies */ -import type { Color, Gradient } from './types'; - -type Props = { - colors: Color[] | Gradient[]; - type: 'colors' | 'gradients'; - templateColumns?: string | number; - itemHeight?: string; -}; +import type { Color, Gradient, ColorExampleProps } from './types'; const ColorExamples = ( { colors, type, templateColumns = '1fr 1fr', itemHeight = '52px', -}: Props ): JSX.Element | null => { +}: ColorExampleProps ): JSX.Element | null => { if ( ! colors ) { return null; } diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx index 7ee90e61f1c6a..babba4328bcc2 100644 --- a/packages/edit-site/src/components/style-book/duotone-examples.tsx +++ b/packages/edit-site/src/components/style-book/duotone-examples.tsx @@ -9,7 +9,11 @@ import { View } from '@wordpress/primitives'; */ import type { Duotone } from './types'; -const DuotoneExamples = ( { duotones } ): JSX.Element | null => { +const DuotoneExamples = ( { + duotones, +}: { + duotones: Duotone[]; +} ): JSX.Element | null => { if ( ! duotones ) { return null; } diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index 81ae2d8089fa5..fd9b06637f97e 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -7,16 +7,17 @@ import { getBlockTypes, getBlockFromExample, createBlock, + // @ts-ignore } from '@wordpress/blocks'; /** * Internal dependencies */ import type { - Block, BlockExample, ColorOrigin, MultiOriginPalettes, + BlockType, } from './types'; import ColorExamples from './color-examples'; import DuotoneExamples from './duotone-examples'; @@ -37,11 +38,14 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { const examples: BlockExample[] = []; STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => { - const palette = colors[ group.type ].find( - ( origin: ColorOrigin ) => origin.slug === group.origin - ); + const palette = colors[ group.type as keyof MultiOriginPalettes ]; + const paletteFiltered = Array.isArray( palette ) + ? palette.find( + ( origin: ColorOrigin ) => origin.slug === group.origin + ) + : undefined; - if ( palette?.[ group.type ] ) { + if ( paletteFiltered?.[ group.type ] ) { const example: BlockExample = { name: group.slug, title: group.title, @@ -49,13 +53,15 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { }; if ( group.type === 'duotones' ) { example.content = ( - + ); examples.push( example ); } else { example.content = ( ); @@ -79,9 +85,11 @@ function getOverviewBlockExamples( const examples: BlockExample[] = []; // Get theme palette from colors if they exist. - const themePalette = colors?.colors.find( - ( origin: ColorOrigin ) => origin.slug === 'theme' - ); + const themePalette = Array.isArray( colors?.colors ) + ? colors.colors.find( + ( origin: ColorOrigin ) => origin.slug === 'theme' + ) + : undefined; if ( themePalette ) { const themeColorexample: BlockExample = { @@ -202,7 +210,7 @@ function getOverviewBlockExamples( */ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { const nonHeadingBlockExamples = getBlockTypes() - .filter( ( blockType ) => { + .filter( ( blockType: BlockType ) => { const { name, example, supports } = blockType; return ( name !== 'core/heading' && @@ -210,7 +218,7 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { supports?.inserter !== false ); } ) - .map( ( blockType ) => ( { + .map( ( blockType: BlockType ) => ( { name: blockType.name, title: blockType.title, category: blockType.category, diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index 9f65039121856..aafba8d31ba4e 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -42,6 +42,11 @@ export type Duotone = { slug: string; }; +export type ColorExampleProps = { + colors: Color[] | Gradient[]; + type: string; +}; + export type ColorOrigin = { name: string; slug: string; @@ -58,3 +63,16 @@ export type MultiOriginPalettes = { duotones: Omit< ColorOrigin, 'colors' | 'gradients' >; gradients: Omit< ColorOrigin, 'colors' | 'duotones' >; }; + +/* + * Typing the items from getBlockTypes from '@wordpress/blocks' + * to appease the TS linter. + */ +export type BlockType = { + name: string; + title: string; + category: string; + example: BlockType; + attributes: Record< string, unknown >; + supports: Record< string, unknown >; +}; diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json new file mode 100644 index 0000000000000..e40f4cb91f9ea --- /dev/null +++ b/packages/edit-site/tsconfig.json @@ -0,0 +1,46 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig.json", + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "declarationDir": "build-types", + "checkJs": false + }, + "references": [ + { "path": "../a11y" }, + { "path": "../api-fetch" }, + { "path": "../autop" }, + { "path": "../blob" }, + { "path": "../block-library" }, + { "path": "../block-editor" }, + { "path": "../components" }, + { "path": "../compose" }, + { "path": "../core-data" }, + { "path": "../data" }, + { "path": "../dataviews" }, + { "path": "../date" }, + { "path": "../deprecated" }, + { "path": "../dom" }, + { "path": "../editor" }, + { "path": "../element" }, + { "path": "../escape-html" }, + { "path": "../fields" }, + { "path": "../hooks" }, + { "path": "../html-entities" }, + { "path": "../i18n" }, + { "path": "../icons" }, + { "path": "../interactivity" }, + { "path": "../interactivity-router" }, + { "path": "../notices" }, + { "path": "../keycodes" }, + { "path": "../plugins" }, + { "path": "../primitives" }, + { "path": "../private-apis" }, + { "path": "../rich-text" }, + { "path": "../router" }, + { "path": "../style-engine" }, + { "path": "../url" }, + { "path": "../wordcount" } + ], + "include": [ "src/**/*" ] +} diff --git a/tsconfig.json b/tsconfig.json index 93d0bd976dd00..ebf6af4156547 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,7 @@ { "path": "packages/dom" }, { "path": "packages/dom-ready" }, { "path": "packages/e2e-test-utils-playwright" }, + { "path": "packages/edit-site" }, { "path": "packages/editor" }, { "path": "packages/element" }, { "path": "packages/escape-html" }, From a11bb5584b5d0af68710a764a73fc0069349c024 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 13:36:17 +1100 Subject: [PATCH 02/13] @ts-nocheck not required --- packages/edit-site/lib/unbrotli.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js index 9cb4eb63e0d61..0560b35622c20 100644 --- a/packages/edit-site/lib/unbrotli.js +++ b/packages/edit-site/lib/unbrotli.js @@ -30,7 +30,6 @@ /* eslint eslint-comments/no-unlimited-disable: 0 */ /* eslint-disable */ -// @ts-nocheck (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.unbrotli = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i Date: Fri, 29 Nov 2024 13:54:28 +1100 Subject: [PATCH 03/13] Prevent definition files from being generated --- packages/edit-site/tsconfig.json | 3 ++- tsconfig.base.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json index e40f4cb91f9ea..074588dfb8ee8 100644 --- a/packages/edit-site/tsconfig.json +++ b/packages/edit-site/tsconfig.json @@ -42,5 +42,6 @@ { "path": "../url" }, { "path": "../wordcount" } ], - "include": [ "src/**/*" ] + "include": [ "src/**/*" ], + "exclude": [ "lib" ] } diff --git a/tsconfig.base.json b/tsconfig.base.json index a766eedaeddca..75d6e85baac90 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -40,6 +40,7 @@ "**/benchmark", "packages/*/build-*/**", "packages/*/build/**", + "packages/edit-site/lib", "**/test/**", "packages/**/react-native-*/**" ] From 012211b970000963ab93057d2600af6bdc459e48 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 14:02:21 +1100 Subject: [PATCH 04/13] See if this works --- packages/edit-site/lib/unbrotli.js | 44 +++++++++--------------------- 1 file changed, 13 insertions(+), 31 deletions(-) diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js index 0560b35622c20..63293e6cc473c 100644 --- a/packages/edit-site/lib/unbrotli.js +++ b/packages/edit-site/lib/unbrotli.js @@ -1703,19 +1703,11 @@ function fromByteArray (uint8) { decoding of the block lengths, literal insertion lengths and copy lengths. */ -/** - * Represents the range of values belonging to a prefix code. - * [offset, offset + 2^nbits) - * - * @param {number} offset The starting offset of the range. - * @param {number} nbits The number of bits defining the range. - * @constructor - */ -class PrefixCodeRange { - constructor( offset, nbits ) { - this.offset = offset; - this.nbits = nbits; - } +/* Represents the range of values belonging to a prefix code: */ +/* [offset, offset + 2^nbits) */ +function PrefixCodeRange(offset, nbits) { + this.offset = offset; + this.nbits = nbits; } exports.kBlockLengthPrefixCode = [ @@ -1832,26 +1824,16 @@ var kOmitFirst7 = 18; var kOmitFirst8 = 19; var kOmitFirst9 = 20; -/** - * Represents a transformation with a prefix, a transform type, and a suffix. - * - * @param {string} prefix - The prefix string. - * @param {number} transform - The transform type. - * @param {string} suffix - The suffix string. - * @constructor - */ -class Transform { - constructor( prefix, transform, suffix ) { - this.prefix = new Uint8Array( prefix.length ); - this.transform = transform; - this.suffix = new Uint8Array(suffix.length); +function Transform(prefix, transform, suffix) { + this.prefix = new Uint8Array(prefix.length); + this.transform = transform; + this.suffix = new Uint8Array(suffix.length); - for ( var i = 0; i < prefix.length; i++ ) - this.prefix[i] = prefix.charCodeAt( i ); + for (var i = 0; i < prefix.length; i++) + this.prefix[i] = prefix.charCodeAt(i); - for ( var i = 0; i < suffix.length; i++ ) - this.suffix[i] = suffix.charCodeAt( i ); - } + for (var i = 0; i < suffix.length; i++) + this.suffix[i] = suffix.charCodeAt(i); } var kTransforms = [ From 66c301a8f90f5d7fd6c26115d2f94c91445707a4 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 14:18:33 +1100 Subject: [PATCH 05/13] Added to components changelog --- .eslintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintignore b/.eslintignore index caadb256c28dd..049ad49811e7a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,5 +5,6 @@ build-types node_modules packages/block-serialization-spec-parser/parser.js packages/react-native-editor/bundle +packages/edit-site/lib vendor !.*.js From eb54b09d8c2df4770e031cd065597542cc28e3af Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 14:32:33 +1100 Subject: [PATCH 06/13] Es6 for unbrotli.js methods --- .eslintignore | 1 - packages/edit-site/lib/unbrotli.js | 44 +++++++++++++++++++++--------- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/.eslintignore b/.eslintignore index 049ad49811e7a..caadb256c28dd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,6 +5,5 @@ build-types node_modules packages/block-serialization-spec-parser/parser.js packages/react-native-editor/bundle -packages/edit-site/lib vendor !.*.js diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js index 63293e6cc473c..0560b35622c20 100644 --- a/packages/edit-site/lib/unbrotli.js +++ b/packages/edit-site/lib/unbrotli.js @@ -1703,11 +1703,19 @@ function fromByteArray (uint8) { decoding of the block lengths, literal insertion lengths and copy lengths. */ -/* Represents the range of values belonging to a prefix code: */ -/* [offset, offset + 2^nbits) */ -function PrefixCodeRange(offset, nbits) { - this.offset = offset; - this.nbits = nbits; +/** + * Represents the range of values belonging to a prefix code. + * [offset, offset + 2^nbits) + * + * @param {number} offset The starting offset of the range. + * @param {number} nbits The number of bits defining the range. + * @constructor + */ +class PrefixCodeRange { + constructor( offset, nbits ) { + this.offset = offset; + this.nbits = nbits; + } } exports.kBlockLengthPrefixCode = [ @@ -1824,16 +1832,26 @@ var kOmitFirst7 = 18; var kOmitFirst8 = 19; var kOmitFirst9 = 20; -function Transform(prefix, transform, suffix) { - this.prefix = new Uint8Array(prefix.length); - this.transform = transform; - this.suffix = new Uint8Array(suffix.length); +/** + * Represents a transformation with a prefix, a transform type, and a suffix. + * + * @param {string} prefix - The prefix string. + * @param {number} transform - The transform type. + * @param {string} suffix - The suffix string. + * @constructor + */ +class Transform { + constructor( prefix, transform, suffix ) { + this.prefix = new Uint8Array( prefix.length ); + this.transform = transform; + this.suffix = new Uint8Array(suffix.length); - for (var i = 0; i < prefix.length; i++) - this.prefix[i] = prefix.charCodeAt(i); + for ( var i = 0; i < prefix.length; i++ ) + this.prefix[i] = prefix.charCodeAt( i ); - for (var i = 0; i < suffix.length; i++) - this.suffix[i] = suffix.charCodeAt(i); + for ( var i = 0; i < suffix.length; i++ ) + this.suffix[i] = suffix.charCodeAt( i ); + } } var kTransforms = [ From 475c20bcf9e26dfabe094117506629446856c4a8 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 14:39:24 +1100 Subject: [PATCH 07/13] Removing useless excludes. The font lib files are imported in the project and so tsc will try to build them. --- packages/edit-site/tsconfig.json | 3 +-- tsconfig.base.json | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json index 074588dfb8ee8..e40f4cb91f9ea 100644 --- a/packages/edit-site/tsconfig.json +++ b/packages/edit-site/tsconfig.json @@ -42,6 +42,5 @@ { "path": "../url" }, { "path": "../wordcount" } ], - "include": [ "src/**/*" ], - "exclude": [ "lib" ] + "include": [ "src/**/*" ] } diff --git a/tsconfig.base.json b/tsconfig.base.json index 75d6e85baac90..a766eedaeddca 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -40,7 +40,6 @@ "**/benchmark", "packages/*/build-*/**", "packages/*/build/**", - "packages/edit-site/lib", "**/test/**", "packages/**/react-native-*/**" ] From 26ae4de48e10cae042df8ed2530a3c4c5b2cfd37 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 15:24:03 +1100 Subject: [PATCH 08/13] Roll back unbrotil changes. Limiting to files and ignoring import TS errors --- packages/edit-site/lib/unbrotli.js | 44 ++++++------------- .../components/style-book/color-examples.tsx | 2 + .../src/components/style-book/examples.tsx | 4 ++ packages/edit-site/tsconfig.json | 15 +++++-- 4 files changed, 31 insertions(+), 34 deletions(-) diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js index 0560b35622c20..63293e6cc473c 100644 --- a/packages/edit-site/lib/unbrotli.js +++ b/packages/edit-site/lib/unbrotli.js @@ -1703,19 +1703,11 @@ function fromByteArray (uint8) { decoding of the block lengths, literal insertion lengths and copy lengths. */ -/** - * Represents the range of values belonging to a prefix code. - * [offset, offset + 2^nbits) - * - * @param {number} offset The starting offset of the range. - * @param {number} nbits The number of bits defining the range. - * @constructor - */ -class PrefixCodeRange { - constructor( offset, nbits ) { - this.offset = offset; - this.nbits = nbits; - } +/* Represents the range of values belonging to a prefix code: */ +/* [offset, offset + 2^nbits) */ +function PrefixCodeRange(offset, nbits) { + this.offset = offset; + this.nbits = nbits; } exports.kBlockLengthPrefixCode = [ @@ -1832,26 +1824,16 @@ var kOmitFirst7 = 18; var kOmitFirst8 = 19; var kOmitFirst9 = 20; -/** - * Represents a transformation with a prefix, a transform type, and a suffix. - * - * @param {string} prefix - The prefix string. - * @param {number} transform - The transform type. - * @param {string} suffix - The suffix string. - * @constructor - */ -class Transform { - constructor( prefix, transform, suffix ) { - this.prefix = new Uint8Array( prefix.length ); - this.transform = transform; - this.suffix = new Uint8Array(suffix.length); +function Transform(prefix, transform, suffix) { + this.prefix = new Uint8Array(prefix.length); + this.transform = transform; + this.suffix = new Uint8Array(suffix.length); - for ( var i = 0; i < prefix.length; i++ ) - this.prefix[i] = prefix.charCodeAt( i ); + for (var i = 0; i < prefix.length; i++) + this.prefix[i] = prefix.charCodeAt(i); - for ( var i = 0; i < suffix.length; i++ ) - this.suffix[i] = suffix.charCodeAt( i ); - } + for (var i = 0; i < suffix.length; i++) + this.suffix[i] = suffix.charCodeAt(i); } var kTransforms = [ diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx index b2ece4c3b0c82..fb943e49e0365 100644 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -9,7 +9,9 @@ import clsx from 'clsx'; import { __experimentalGrid as Grid } from '@wordpress/components'; import { View } from '@wordpress/primitives'; import { + // @ts-ignore getColorClassName, + // @ts-ignore __experimentalGetGradientClass, // @ts-ignore } from '@wordpress/block-editor'; diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index fd9b06637f97e..015c7d68c8666 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -3,9 +3,13 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { + // @ts-ignore getBlockType, + // @ts-ignore getBlockTypes, + // @ts-ignore getBlockFromExample, + // @ts-ignore createBlock, // @ts-ignore } from '@wordpress/blocks'; diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json index e40f4cb91f9ea..fb9e3acee5e8d 100644 --- a/packages/edit-site/tsconfig.json +++ b/packages/edit-site/tsconfig.json @@ -3,8 +3,7 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "rootDir": "src", - "declarationDir": "build-types", - "checkJs": false + "declarationDir": "build-types" }, "references": [ { "path": "../a11y" }, @@ -42,5 +41,15 @@ { "path": "../url" }, { "path": "../wordcount" } ], - "include": [ "src/**/*" ] + // NOTE: This package is being progressively typed. You are encouraged to + // expand this array with files which can be type-checked. At some point in + // the future, this can be simplified to an `includes` of `src/**/*`. + "files": [ + "src/components/style-book/categories.ts", + "src/components/style-book/constants.ts", + "src/components/style-book/types.ts", + "src/components/style-book/color-examples.tsx", + "src/components/style-book/duotone-examples.tsx", + "src/components/style-book/examples.tsx" + ] } From 1890f716638a1f83292bb7384442ce6a7c4f4c9c Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 29 Nov 2024 15:30:49 +1100 Subject: [PATCH 09/13] Roll back changes to external files. I'll update these later in another PR. --- packages/components/src/index.ts | 1 - packages/editor/src/components/post-url/index.js | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 95c27d9fd0d81..2acd609992d6a 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -104,7 +104,6 @@ export { Heading as __experimentalHeading } from './heading'; export { HStack as __experimentalHStack } from './h-stack'; export { default as Icon } from './icon'; export type { IconType } from './icon'; -export type { WPCompleter } from './autocomplete/types.ts'; export { default as IconButton } from './button/deprecated'; export { ItemGroup as __experimentalItemGroup, diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index f55ac973be50e..c72ca5825f6fe 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -32,8 +32,7 @@ import { store as editorStore } from '../../store'; * * ``` * - * @param {{ onClose: () => void }} props The props for the component. - * @param {() => void} props.onClose Callback function to be executed when the popover is closed. + * @param {Function} onClose Callback function to be executed when the popover is closed. * * @return {React.ReactNode} The rendered PostURL component. */ From a28e41f8a7c4bbd8b3ca920a51b8cbbc3e8bef66 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 5 Dec 2024 05:59:57 +1100 Subject: [PATCH 10/13] Implementing feedback. Using `@ts-expect-error` instead of ignore, and fixing type assignment --- packages/edit-site/src/components/style-book/categories.ts | 7 ++++--- .../edit-site/src/components/style-book/color-examples.tsx | 5 ++--- packages/edit-site/src/components/style-book/examples.tsx | 7 ++----- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts index 821ed418583e9..b36c211eaa546 100644 --- a/packages/edit-site/src/components/style-book/categories.ts +++ b/packages/edit-site/src/components/style-book/categories.ts @@ -1,7 +1,8 @@ /** * WordPress dependencies */ -// @ts-ignore +// @wordpress/blocks imports are not typed. +// @ts-expect-error import { getCategories } from '@wordpress/blocks'; /** @@ -30,11 +31,11 @@ export function getExamplesByCategory( if ( ! categoryDefinition?.slug || ! examples?.length ) { return; } - const categories: StyleBookCategory[] = + const categories: CategoryExamples[] = categoryDefinition?.subcategories ?? []; if ( categories.length ) { return categories.reduce( - ( acc, subcategoryDefinition ): CategoryExamples => { + ( acc, subcategoryDefinition ) => { const subcategoryExamples = getExamplesByCategory( subcategoryDefinition, examples diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx index fb943e49e0365..032a3d92faa2b 100644 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -9,11 +9,10 @@ import clsx from 'clsx'; import { __experimentalGrid as Grid } from '@wordpress/components'; import { View } from '@wordpress/primitives'; import { - // @ts-ignore getColorClassName, - // @ts-ignore __experimentalGetGradientClass, - // @ts-ignore + // @wordpress/block-editor imports are not typed. + // @ts-expect-error } from '@wordpress/block-editor'; /** diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index 015c7d68c8666..f6855e81219df 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -3,15 +3,12 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { - // @ts-ignore getBlockType, - // @ts-ignore getBlockTypes, - // @ts-ignore getBlockFromExample, - // @ts-ignore createBlock, - // @ts-ignore + // @wordpress/blocks imports are not typed. + // @ts-expect-error } from '@wordpress/blocks'; /** From ae3615103c59698f7b6d6afb8f257be725e49ce4 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 10 Dec 2024 13:49:00 +1100 Subject: [PATCH 11/13] Rebase and update types --- packages/edit-site/src/components/style-book/examples.tsx | 4 ++-- packages/edit-site/src/components/style-book/types.ts | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index f6855e81219df..046f08524851e 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -100,7 +100,7 @@ function getOverviewBlockExamples( content: ( @@ -111,7 +111,7 @@ function getOverviewBlockExamples( } // Get examples for typography blocks. - const typographyBlockExamples: Block[] = []; + const typographyBlockExamples: BlockType[] = []; if ( getBlockType( 'core/heading' ) ) { const headingBlock = createBlock( 'core/heading', { diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index aafba8d31ba4e..9a97c3aad7f79 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -32,7 +32,7 @@ export type StyleBookColorGroup = { origin: string; slug: string; title: string; - type: string; + type: 'colors' | 'gradients' | 'duotones'; }; export type Color = { slug: string }; @@ -44,7 +44,9 @@ export type Duotone = { export type ColorExampleProps = { colors: Color[] | Gradient[]; - type: string; + type: StyleBookColorGroup[ 'type' ]; + templateColumns?: string | number; + itemHeight?: string; }; export type ColorOrigin = { From 1b8c418395d14b69be2d9b99fe8360387b086822 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 10 Dec 2024 14:07:16 +1100 Subject: [PATCH 12/13] bad rebase --- packages/editor/src/components/post-url/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index c72ca5825f6fe..f55ac973be50e 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -32,7 +32,8 @@ import { store as editorStore } from '../../store'; * * ``` * - * @param {Function} onClose Callback function to be executed when the popover is closed. + * @param {{ onClose: () => void }} props The props for the component. + * @param {() => void} props.onClose Callback function to be executed when the popover is closed. * * @return {React.ReactNode} The rendered PostURL component. */ From a8c931cdc9aeb1a91ebfc6fbb55aabe84839bd71 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 27 Dec 2024 13:39:54 +1100 Subject: [PATCH 13/13] Add missing path --- packages/edit-site/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json index fb9e3acee5e8d..9bcd49f336915 100644 --- a/packages/edit-site/tsconfig.json +++ b/packages/edit-site/tsconfig.json @@ -30,6 +30,7 @@ { "path": "../icons" }, { "path": "../interactivity" }, { "path": "../interactivity-router" }, + { "path": "../media-utils" }, { "path": "../notices" }, { "path": "../keycodes" }, { "path": "../plugins" },