feat: use esm-first approach, use vitest for tests

.gitignore

@@ -46,7 +46,7 @@ jspm_packages
 .cache
 
 # Compiled portable text library + demo
-/dist
+/lib
 /demo/dist
 
 *.iml

package.json

@@ -19,22 +19,22 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "require": "./dist/index.cjs",
+      "require": "./lib/index.cjs",
       "node": {
-        "module": "./dist/index.js",
-        "import": "./dist/index.cjs.js"
+        "module": "./lib/index.js",
+        "import": "./lib/index.cjs.js"
       },
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "source": "./src/index.ts",
-  "types": "./dist/index.d.ts",
+  "types": "./lib/index.d.ts",
   "files": [
     "dist",
     "!dist/stats.html",

src/components/defaults.tsx

@@ -1,14 +1,14 @@
 import type {PortableTextBlockStyle} from '@portabletext/types'
-import type {PortableTextBlockComponent, PortableTextReactComponents} from '../types'
-import {defaultMarks} from './marks'
-import {defaultLists, DefaultListItem} from './list'
+import type {PortableTextBlockComponent, PortableTextReactComponents} from '../types.js'
+import {defaultMarks} from './marks.js'
+import {defaultLists, DefaultListItem} from './list.js'
 import {
   DefaultUnknownType,
   DefaultUnknownMark,
   DefaultUnknownList,
   DefaultUnknownListItem,
   DefaultUnknownBlockStyle,
-} from './unknown'
+} from './unknown.js'
 
 export const DefaultHardBreak = () => <br />
 

src/components/list.tsx

@@ -1,4 +1,4 @@
-import type {PortableTextListComponent, PortableTextListItemComponent} from '../types'
+import type {PortableTextListComponent, PortableTextListItemComponent} from '../types.js'
 
 export const defaultLists: Record<'number' | 'bullet', PortableTextListComponent> = {
   number: ({children}) => <ol>{children}</ol>,

src/components/marks.tsx

@@ -1,5 +1,5 @@
 import type {TypedObject} from '@portabletext/types'
-import type {PortableTextMarkComponent} from '../types'
+import type {PortableTextMarkComponent} from '../types.js'
 
 interface DefaultLink extends TypedObject {
   _type: 'link'

src/components/merge.ts

@@ -1,4 +1,4 @@
-import type {PortableTextReactComponents, PortableTextComponents} from '../types'
+import type {PortableTextReactComponents, PortableTextComponents} from '../types.js'
 
 export function mergeComponents(
   parent: PortableTextReactComponents,

src/components/unknown.tsx

@@ -1,5 +1,6 @@
-import type {PortableTextReactComponents} from '../types'
-import {unknownTypeWarning} from '../warnings'
+import React from 'react'
+import type {PortableTextReactComponents} from '../types.js'
+import {unknownTypeWarning} from '../warnings.js'
 
 const hidden = {display: 'none'}
 

src/index.ts

@@ -1,6 +1,6 @@
-export * from './types'
+export type * from './types.js'
 export type {ToolkitListNestMode as ListNestMode} from '@portabletext/toolkit'
 export {toPlainText} from '@portabletext/toolkit'
-export {PortableText} from './react-portable-text'
-export {mergeComponents} from './components/merge'
-export {defaultComponents} from './components/defaults'
+export {PortableText} from './react-portable-text.js'
+export {mergeComponents} from './components/merge.js'
+export {defaultComponents} from './components/defaults.js'

src/react-portable-text.tsx

@@ -8,7 +8,7 @@ import type {
   ReactPortableTextList,
   Serializable,
   SerializedBlock,
-} from './types'
+} from './types.js'
 import {
   LIST_NEST_MODE_HTML,
   isPortableTextBlock,
@@ -27,16 +27,16 @@ import type {
   PortableTextSpan,
   TypedObject,
 } from '@portabletext/types'
-import {mergeComponents} from './components/merge'
-import {defaultComponents} from './components/defaults'
+import {mergeComponents} from './components/merge.js'
+import {defaultComponents} from './components/defaults.js'
 import {
   printWarning,
   unknownBlockStyleWarning,
   unknownListItemStyleWarning,
   unknownListStyleWarning,
   unknownMarkWarning,
   unknownTypeWarning,
-} from './warnings'
+} from './warnings.js'
 
 export function PortableText<B extends TypedObject = PortableTextBlock>({
   value: input,

test/components.test.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/server'
 import {test} from 'vitest'
-import {PortableTextProps} from '../src'
-import {PortableText} from '../src/react-portable-text'
+import type {PortableTextProps} from '../src/types.js'
+import {PortableText} from '../src/react-portable-text.js'
 
 const render = (props: PortableTextProps) =>
   ReactDOM.renderToStaticMarkup(<PortableText {...props} onMissingComponent={false} />)

test/fixtures/index.ts

@@ -1,34 +1,34 @@
-import emptyBlock from './001-empty-block'
-import singleSpan from './002-single-span'
-import multipleSpans from './003-multiple-spans'
-import basicMarkSingleSpan from './004-basic-mark-single-span'
-import basicMarkMultipleAdjacentSpans from './005-basic-mark-multiple-adjacent-spans'
-import basicMarkNestedMarks from './006-basic-mark-nested-marks'
-import linkMarkDef from './007-link-mark-def'
-import plainHeaderBlock from './008-plain-header-block'
-import messyLinkText from './009-messy-link-text'
-import basicBulletList from './010-basic-bullet-list'
-import basicNumberedList from './011-basic-numbered-list'
-import nestedLists from './014-nested-lists'
-import allBasicMarks from './015-all-basic-marks'
-import deepWeirdLists from './016-deep-weird-lists'
-import allDefaultBlockStyles from './017-all-default-block-styles'
-import marksAllTheWayDown from './018-marks-all-the-way-down'
-import keyless from './019-keyless'
-import emptyArray from './020-empty-array'
-import listWithoutLevel from './021-list-without-level'
-import inlineNodes from './022-inline-nodes'
-import hardBreaks from './023-hard-breaks'
-import inlineObjects from './024-inline-objects'
-import inlineBlockWithText from './026-inline-block-with-text'
-import styledListItems from './027-styled-list-items'
-import customListItemType from './028-custom-list-item-type'
-import customBlockType from './050-custom-block-type'
-import customMarks from './052-custom-marks'
-import overrideDefaultMarks from './053-override-default-marks'
-import listIssue from './060-list-issue'
-import missingMarkComponent from './061-missing-mark-component'
-import customBlockTypeWithChildren from './062-custom-block-type-with-children'
+import emptyBlock from './001-empty-block.js'
+import singleSpan from './002-single-span.js'
+import multipleSpans from './003-multiple-spans.js'
+import basicMarkSingleSpan from './004-basic-mark-single-span.js'
+import basicMarkMultipleAdjacentSpans from './005-basic-mark-multiple-adjacent-spans.js'
+import basicMarkNestedMarks from './006-basic-mark-nested-marks.js'
+import linkMarkDef from './007-link-mark-def.js'
+import plainHeaderBlock from './008-plain-header-block.js'
+import messyLinkText from './009-messy-link-text.js'
+import basicBulletList from './010-basic-bullet-list.js'
+import basicNumberedList from './011-basic-numbered-list.js'
+import nestedLists from './014-nested-lists.js'
+import allBasicMarks from './015-all-basic-marks.js'
+import deepWeirdLists from './016-deep-weird-lists.js'
+import allDefaultBlockStyles from './017-all-default-block-styles.js'
+import marksAllTheWayDown from './018-marks-all-the-way-down.js'
+import keyless from './019-keyless.js'
+import emptyArray from './020-empty-array.js'
+import listWithoutLevel from './021-list-without-level.js'
+import inlineNodes from './022-inline-nodes.js'
+import hardBreaks from './023-hard-breaks.js'
+import inlineObjects from './024-inline-objects.js'
+import inlineBlockWithText from './026-inline-block-with-text.js'
+import styledListItems from './027-styled-list-items.js'
+import customListItemType from './028-custom-list-item-type.js'
+import customBlockType from './050-custom-block-type.js'
+import customMarks from './052-custom-marks.js'
+import overrideDefaultMarks from './053-override-default-marks.js'
+import listIssue from './060-list-issue.js'
+import missingMarkComponent from './061-missing-mark-component.js'
+import customBlockTypeWithChildren from './062-custom-block-type-with-children.js'
 
 export {
   emptyBlock,

test/mutations.test.tsx

@@ -1,8 +1,8 @@
 import ReactDOM from 'react-dom/server'
 import {test} from 'vitest'
-import {PortableText} from '../src/react-portable-text'
-import type {PortableTextReactComponents, PortableTextProps} from '../src/types'
-import * as fixtures from './fixtures'
+import {PortableText} from '../src/react-portable-text.js'
+import type {PortableTextReactComponents, PortableTextProps} from '../src/types.js'
+import * as fixtures from './fixtures/index.js'
 
 const render = (props: PortableTextProps) =>
   ReactDOM.renderToStaticMarkup(<PortableText {...props} onMissingComponent={false} />)

test/portable-text.test.tsx

@@ -1,14 +1,14 @@
 import {Fragment} from 'react'
 import ReactDOM from 'react-dom/server'
 import {test} from 'vitest'
-import {PortableText} from '../src/react-portable-text'
-import {
+import {PortableText} from '../src/react-portable-text.js'
+import type {
   PortableTextReactComponents,
   PortableTextMarkComponent,
   PortableTextProps,
   MissingComponentHandler,
-} from '../src/types'
-import * as fixtures from './fixtures'
+} from '../src/types.js'
+import * as fixtures from './fixtures/index.js'
 
 const render = (props: PortableTextProps) =>
   ReactDOM.renderToStaticMarkup(<PortableText onMissingComponent={false} {...props} />)

test/toPlainText.test.ts

@@ -1,6 +1,6 @@
 import {test} from 'vitest'
-import {toPlainText} from '../src'
-import * as fixtures from './fixtures'
+import {toPlainText} from '../src/index.js'
+import * as fixtures from './fixtures/index.js'
 
 test('can extract text from all fixtures without crashing', ({expect}) => {
   for (const [key, fixture] of Object.entries(fixtures)) {