distribution of types package is 30 kb?

[maapteh]

I noticed the rich-text-react-renderer uses the types package which gets bundles and adds 30kb (10kb zipped). I was wondering if its really needed?

[MarkosKon]

I upgraded dependencies and I got an extra 30kb+ on the bundle.

I import BLOCKS and MARKS from @contentful/rich-text-types to create an options object for renderRichText function (that comes from gatsby-source-contentful/rich-text).

[maapteh]

I know its superbad, but since there is no traction overhere at all i just plucked the typings myself so i have typed options.

type BlocksLevel =
  | BLOCKS.PARAGRAPH
  | BLOCKS.HEADING_1
  | BLOCKS.HEADING_2
  | BLOCKS.HEADING_3
  | BLOCKS.HEADING_4
  | BLOCKS.HEADING_5
  | BLOCKS.HEADING_6
  | BLOCKS.OL_LIST
  | BLOCKS.UL_LIST
  | BLOCKS.HR
  | BLOCKS.QUOTE
  | BLOCKS.EMBEDDED_ENTRY
  | BLOCKS.EMBEDDED_ASSET
  | BLOCKS.TABLE;

export type Document = {
  nodeType: BLOCKS.DOCUMENT;
  content: (Block & { nodeType: BlocksLevel })[];
  // reason: its typed as any in rich-text-types as well
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: Record<string, any>;
};

export type Block = {
  nodeType: BLOCKS;
  content: Array<Block | Inline | Text>;
  // reason: its typed as any in rich-text-types as well
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: Record<string, any>;
};

export type Inline = {
  nodeType: INLINES;
  content: Array<Inline | Text>;
  // reason: its typed as any in rich-text-types as well
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: Record<string, any>;
};

export type Text = {
  nodeType: 'text';
  value: string;
  marks: Mark[];
  // reason: its typed as any in rich-text-types as well
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: Record<string, any>;
};

type Mark = {
  type: string;
};

export enum BLOCKS {
  DOCUMENT = 'document',
  PARAGRAPH = 'paragraph',
  HEADING_1 = 'heading-1',
  HEADING_2 = 'heading-2',
  HEADING_3 = 'heading-3',
  HEADING_4 = 'heading-4',
  HEADING_5 = 'heading-5',
  HEADING_6 = 'heading-6',
  OL_LIST = 'ordered-list',
  UL_LIST = 'unordered-list',
  LIST_ITEM = 'list-item',
  HR = 'hr',
  QUOTE = 'blockquote',
  EMBEDDED_ENTRY = 'embedded-entry-block',
  EMBEDDED_ASSET = 'embedded-asset-block',
  TABLE = 'table',
  TABLE_ROW = 'table-row',
  TABLE_CELL = 'table-cell',
  TABLE_HEADER_CELL = 'table-header-cell',
}

export enum INLINES {
  HYPERLINK = 'hyperlink',
  ENTRY_HYPERLINK = 'entry-hyperlink',
  ASSET_HYPERLINK = 'asset-hyperlink',
  EMBEDDED_ENTRY = 'embedded-entry-inline',
}

export enum MARKS {
  BOLD = 'bold',
  ITALIC = 'italic',
  UNDERLINE = 'underline',
  CODE = 'code',
}

[z0al]

I know its superbad, but since there is no traction overhere at all i just plucked the typings myself so i have typed options.

Sorry about that @maapteh . Though, if you only need TypeScript type definitions you can try the import type syntax.

import type { ... } from '@contentful/rich-text-types`;

[z0al]

I upgraded dependencies and I got an extra 30kb+ on the bundle.

I import BLOCKS and MARKS from @contentful/rich-text-types to create an options object for renderRichText function (that comes from gatsby-source-contentful/rich-text).

That looks off @MarkosKon , sorry about that. Ajv shouldn't be included. I will need to investigate it and see what we can do. But that's probably not going to happen before next year.

[maapteh]

I know its superbad, but since there is no traction overhere at all i just plucked the typings myself so i have typed options.

Sorry about that @maapteh . Though, if you only need TypeScript type definitions you can try the import type syntax.

import type { ... } from '@contentful/rich-text-types`;

Thanks for replying. I needed the BLOCKS enum and Document/Text/Inline typing. I now moved them to a new own file so instead of 30Kb i now have 2Kb.

AJV is set as your main dependency here: https://github.com/contentful/rich-text/blob/master/packages/rich-text-types/package.json#L28 since you are using it overhere https://github.com/contentful/rich-text/blob/master/packages/rich-text-types/src/validation.ts#L1 and more places

In my personal opinion validation things are helpers and should not be in a types package.

[z0al]

AJV is set as your main dependency here:

I'm aware that we depend on AJV, but AFAIK, it should be tree-shakable unless you imported validateRichTextDocument. I will need to check.

[z0al]

@maapteh @MarkosKon FYI we no longer depend on ajv and the recent changes were reverted. Please update to the new version

[batista]

@z0al thanks! can confirm your change has reduced our bundle by 36.7kb gzipped 🙌

In our case was injecting the rich-text-html-renderer.es5.js into the bundle, no longer happening 👍 .

[MarkosKon]

Thanks @z0al. Do you think the issue was that ajv is not available in esm? If that's the case, when this pr gets released, you may be able to add the validation helpers again.

[maapteh]

You export from one file https://github.com/contentful/rich-text/blob/master/packages/rich-text-types/src/index.ts So for bundlers maybe the option sideEffects will help.