chore: begins next / ui esm transform

packages/next/src/elements/LeaveWithoutSaving/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from '@payloadcms/ui/providers'
 import React, { useCallback, useEffect } from 'react'
 
 import './index.scss'
-import { usePreventLeave } from './usePreventLeave'
+import { usePreventLeave } from './usePreventLeave.js'
 
 const modalSlug = 'leave-without-saving'
 

packages/next/tsconfig.json

@@ -8,9 +8,6 @@
     "rootDir": "./src" /* Specify the root folder within your source files. */,
     "allowImportingTsExtensions": true,
     "sourceMap": true,
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
     "paths": {
       "@payloadcms/ui": ["../ui/src/exports/index.ts"],
       "@payloadcms/ui/*": ["../ui/src/exports/*"],

packages/richtext-slate/src/field/enablePlugins.tsx

@@ -0,0 +1,28 @@
+import elementTypes from './elements/index.js'
+import leafTypes from './leaves/index.js'
+
+const addPluginReducer = (EditorWithPlugins, plugin) => {
+  if (typeof plugin === 'function') return plugin(EditorWithPlugins)
+  return EditorWithPlugins
+}
+
+const enablePlugins = (CreatedEditor, functions) =>
+  functions.reduce((CreatedEditorWithPlugins, func) => {
+    if (typeof func === 'object' && Array.isArray(func.plugins)) {
+      return func.plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
+    }
+
+    if (typeof func === 'string') {
+      if (elementTypes[func] && elementTypes[func].plugins) {
+        return elementTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
+      }
+
+      if (leafTypes[func] && leafTypes[func].plugins) {
+        return leafTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
+      }
+    }
+
+    return CreatedEditorWithPlugins
+  }, CreatedEditor)
+
+export default enablePlugins

packages/richtext-slate/src/field/icons/headings/index.tsx

@@ -0,0 +1,15 @@
+import { H1 } from './H1/index.js'
+import { H2 } from './H2/index.js'
+import { H3 } from './H3/index.js'
+import { H4 } from './H4/index.js'
+import { H5 } from './H5/index.js'
+import { H6 } from './H6/index.js'
+
+export default {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+}

packages/richtext-slate/src/field/leaves/bold/index.tsx

@@ -15,5 +15,3 @@ export const bold: RichTextCustomLeaf = {
   ),
   Leaf: Bold,
 }
-
-export default bold

packages/richtext-slate/src/field/mergeCustomFunctions.tsx

@@ -0,0 +1,25 @@
+export default (enabledFunctions, builtInFunctions) => {
+  const formattedEnabledFunctions = [...enabledFunctions]
+
+  if (enabledFunctions.indexOf('ul') > -1 || enabledFunctions.indexOf('ol') > -1) {
+    formattedEnabledFunctions.push('li')
+  }
+
+  return formattedEnabledFunctions.reduce((resultingFunctions, func) => {
+    if (typeof func === 'object' && func.name) {
+      return {
+        ...resultingFunctions,
+        [func.name]: func,
+      }
+    }
+
+    if (typeof func === 'string' && builtInFunctions[func]) {
+      return {
+        ...resultingFunctions,
+        [func]: builtInFunctions[func],
+      }
+    }
+
+    return resultingFunctions
+  }, {})
+}

packages/ui/src/elements/NavGroup/index.tsx

@@ -1,12 +1,14 @@
 'use client'
 import React, { useEffect, useState } from 'react'
-import AnimateHeightWithDefault from 'react-animate-height'
+import AnimateHeightImport from 'react-animate-height'
 
-import { Chevron } from '../../icons/Chevron'
+import { Chevron } from '../../icons/Chevron/index.js'
-import { usePreferences } from '../../providers/Preferences'
+import { usePreferences } from '../../providers/Preferences/index.js'
-import { useNav } from '../Nav/context'
+import { useNav } from '../Nav/context.js'
 import './index.scss'
 
+const { default: AnimateHeight } = AnimateHeightImport
+
 const baseClass = 'nav-group'
 
 type Props = {
@@ -14,9 +16,6 @@ type Props = {
   label: string
 }
 
-// @ts-expect-error trust me it works
-const AnimateHeight = AnimateHeightWithDefault || AnimateHeightWithDefault.default
-
 const NavGroup: React.FC<Props> = ({ children, label }) => {
   const [collapsed, setCollapsed] = useState(true)
   const [animate, setAnimate] = useState(false)

packages/ui/src/forms/Form/index.tsx

@@ -3,26 +3,26 @@ import type { Field, FormState } from 'payload/types'
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import isDeepEqual from 'deep-equal'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import { serialize } from 'object-to-formdata'
 import { wait } from 'payload/utilities'
 import QueryString from 'qs'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Context as FormContextType, GetDataByPath, Props, SubmitOptions } from './types'
+import type { Context as FormContextType, GetDataByPath, Props, SubmitOptions } from './types.d.ts'
 
-import { useFormQueryParams } from '../..'
+import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
-import { useDebouncedEffect } from '../../hooks/useDebouncedEffect'
+import { useDebouncedEffect } from '../../hooks/useDebouncedEffect.js'
-import useThrottledEffect from '../../hooks/useThrottledEffect'
+import useThrottledEffect from '../../hooks/useThrottledEffect.js'
-import { useAuth } from '../../providers/Auth'
+import { useAuth } from '../../providers/Auth/index.js'
-import { useConfig } from '../../providers/Config'
+import { useConfig } from '../../providers/Config/index.js'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
-import { useLocale } from '../../providers/Locale'
+import { useLocale } from '../../providers/Locale/index.js'
-import { useOperation } from '../../providers/OperationProvider'
+import { useOperation } from '../../providers/OperationProvider/index.js'
-import { useTranslation } from '../../providers/Translation'
+import { useTranslation } from '../../providers/Translation/index.js'
-import { requests } from '../../utilities/api'
+import { requests } from '../../utilities/api.js'
-import { getFormState } from '../../utilities/getFormState'
+import { getFormState } from '../../utilities/getFormState.js'
 import {
   FormContext,
   FormFieldsContext,
@@ -30,14 +30,14 @@ import {
   ModifiedContext,
   ProcessingContext,
   SubmittedContext,
-} from './context'
+} from './context.js'
-import errorMessages from './errorMessages'
+import errorMessages from './errorMessages.js'
-import { fieldReducer } from './fieldReducer'
+import { fieldReducer } from './fieldReducer.js'
-import getDataByPathFunc from './getDataByPath'
+import getDataByPathFunc from './getDataByPath.js'
-import getSiblingDataFunc from './getSiblingData'
+import getSiblingDataFunc from './getSiblingData.js'
-import initContextState from './initContextState'
+import initContextState from './initContextState.js'
-import { mergeServerFormState } from './mergeServerFormState'
+import { mergeServerFormState } from './mergeServerFormState.js'
-import reduceFieldsToValues from './reduceFieldsToValues'
+import reduceFieldsToValues from './reduceFieldsToValues.js'
 
 const baseClass = 'form'
 

packages/ui/tsconfig.json

@@ -4,9 +4,6 @@
     "composite": true, // Make sure typescript knows that this module depends on their references
     "noEmit": false /* Do not emit outputs. */,
     "emitDeclarationOnly": true,
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
     "esModuleInterop": true,
     "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     "rootDir": "./src" /* Specify the root folder within your source files. */

test/buildConfigWithDefaults.ts

@@ -6,30 +6,30 @@ import type { Config, SanitizedConfig } from '../packages/payload/src/config/typ
 import { mongooseAdapter } from '../packages/db-mongodb/src'
 import { postgresAdapter } from '../packages/db-postgres/src'
 import { buildConfig as buildPayloadConfig } from '../packages/payload/src/config/build'
-import {
+// import {
-  AlignFeature,
+//   AlignFeature,
-  BlockQuoteFeature,
+//   BlockQuoteFeature,
-  BlocksFeature,
+//   BlocksFeature,
-  BoldFeature,
+//   BoldFeature,
-  CheckListFeature,
+//   CheckListFeature,
-  HeadingFeature,
+//   HeadingFeature,
-  IndentFeature,
+//   IndentFeature,
-  InlineCodeFeature,
+//   InlineCodeFeature,
-  ItalicFeature,
+//   ItalicFeature,
-  LinkFeature,
+//   LinkFeature,
-  OrderedListFeature,
+//   OrderedListFeature,
-  ParagraphFeature,
+//   ParagraphFeature,
-  RelationshipFeature,
+//   RelationshipFeature,
-  StrikethroughFeature,
+//   StrikethroughFeature,
-  SubscriptFeature,
+//   SubscriptFeature,
-  SuperscriptFeature,
+//   SuperscriptFeature,
-  TreeViewFeature,
+//   TreeViewFeature,
-  UnderlineFeature,
+//   UnderlineFeature,
-  UnorderedListFeature,
+//   UnorderedListFeature,
-  UploadFeature,
+//   UploadFeature,
-  lexicalEditor,
+//   lexicalEditor,
-} from '../packages/richtext-lexical/src'
+// } from '../packages/richtext-lexical/src'
-// import { slateEditor } from '../packages/richtext-slate/src'
+import { slateEditor } from '../packages/richtext-slate/src'
 
 // process.env.PAYLOAD_DATABASE = 'postgres'
 
@@ -66,42 +66,9 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
   const config: Config = {
     db: databaseAdapters[process.env.PAYLOAD_DATABASE || 'mongoose'],
     secret: 'TEST_SECRET',
-    // editor: slateEditor({
+    editor: slateEditor({
-    //   admin: {
+      admin: {
-    //     upload: {
+        upload: {
-    //       collections: {
-    //         media: {
-    //           fields: [
-    //             {
-    //               name: 'alt',
-    //               type: 'text',
-    //             },
-    //           ],
-    //         },
-    //       },
-    //     },
-    //   },
-    // }),
-    editor: lexicalEditor({
-      features: [
-        ParagraphFeature(),
-        RelationshipFeature(),
-        LinkFeature({
-          fields: [
-            {
-              name: 'description',
-              type: 'text',
-            },
-          ],
-        }),
-        CheckListFeature(),
-        UnorderedListFeature(),
-        OrderedListFeature(),
-        AlignFeature(),
-        BlockQuoteFeature(),
-        BoldFeature(),
-        ItalicFeature(),
-        UploadFeature({
           collections: {
             media: {
               fields: [
@@ -112,56 +79,89 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
               ],
             },
           },
-        }),
+        },
-        UnderlineFeature(),
+      },
-        StrikethroughFeature(),
-        SubscriptFeature(),
-        SuperscriptFeature(),
-        InlineCodeFeature(),
-        TreeViewFeature(),
-        HeadingFeature(),
-        IndentFeature(),
-        BlocksFeature({
-          blocks: [
-            {
-              slug: 'myBlock',
-              fields: [
-                {
-                  name: 'someText',
-                  type: 'text',
-                },
-                {
-                  name: 'someTextRequired',
-                  type: 'text',
-                  required: true,
-                },
-                {
-                  name: 'radios',
-                  type: 'radio',
-                  options: [
-                    {
-                      label: 'Option 1',
-                      value: 'option1',
-                    },
-                    {
-                      label: 'Option 2',
-                      value: 'option2',
-                    },
-                    {
-                      label: 'Option 3',
-                      value: 'option3',
-                    },
-                  ],
-                  validate: (value) => {
-                    return value !== 'option2' ? true : 'Cannot be option2'
-                  },
-                },
-              ],
-            },
-          ],
-        }),
-      ],
     }),
+    // editor: lexicalEditor({
+    //   features: [
+    //     ParagraphFeature(),
+    //     RelationshipFeature(),
+    //     LinkFeature({
+    //       fields: [
+    //         {
+    //           name: 'description',
+    //           type: 'text',
+    //         },
+    //       ],
+    //     }),
+    //     CheckListFeature(),
+    //     UnorderedListFeature(),
+    //     OrderedListFeature(),
+    //     AlignFeature(),
+    //     BlockQuoteFeature(),
+    //     BoldFeature(),
+    //     ItalicFeature(),
+    //     UploadFeature({
+    //       collections: {
+    //         media: {
+    //           fields: [
+    //             {
+    //               name: 'alt',
+    //               type: 'text',
+    //             },
+    //           ],
+    //         },
+    //       },
+    //     }),
+    //     UnderlineFeature(),
+    //     StrikethroughFeature(),
+    //     SubscriptFeature(),
+    //     SuperscriptFeature(),
+    //     InlineCodeFeature(),
+    //     TreeViewFeature(),
+    //     HeadingFeature(),
+    //     IndentFeature(),
+    //     BlocksFeature({
+    //       blocks: [
+    //         {
+    //           slug: 'myBlock',
+    //           fields: [
+    //             {
+    //               name: 'someText',
+    //               type: 'text',
+    //             },
+    //             {
+    //               name: 'someTextRequired',
+    //               type: 'text',
+    //               required: true,
+    //             },
+    //             {
+    //               name: 'radios',
+    //               type: 'radio',
+    //               options: [
+    //                 {
+    //                   label: 'Option 1',
+    //                   value: 'option1',
+    //                 },
+    //                 {
+    //                   label: 'Option 2',
+    //                   value: 'option2',
+    //                 },
+    //                 {
+    //                   label: 'Option 3',
+    //                   value: 'option3',
+    //                 },
+    //               ],
+    //               validate: (value) => {
+    //                 return value !== 'option2' ? true : 'Cannot be option2'
+    //               },
+    //             },
+    //           ],
+    //         },
+    //       ],
+    //     }),
+    //   ],
+    // }),
     sharp,
     telemetry: false,
     ...testConfig,

tsconfig.json

@@ -10,7 +10,11 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "noEmit": true,
     "outDir": "./dist",
     "resolveJsonModule": true,
@@ -18,7 +22,11 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": false,
-    "types": ["jest", "node", "@types/jest"],
+    "types": [
+      "jest",
+      "node",
+      "@types/jest"
+    ],
     "incremental": true,
     "isolatedModules": true,
     "plugins": [
@@ -27,28 +35,65 @@
       }
     ],
     "paths": {
-      "payload": ["./packages/payload/src"],
+      "payload": [
-      "payload/*": ["./packages/payload/src/exports/*"],
+        "./packages/payload/src"
-      "@payloadcms/db-mongodb": ["./packages/db-mongodb/src"],
+      ],
-      "@payloadcms/richtext-lexical": ["./packages/richtext-lexical/src"],
+      "payload/*": [
-      "@payloadcms/plugin-cloud": ["./packages/plugin-cloud/src"],
+        "./packages/payload/src/exports/*"
-      "@payloadcms/plugin-cloud-storage": ["./packages/plugin-cloud-storage/src"],
+      ],
-      "@payloadcms/ui": ["./packages/ui/src/exports/index.ts"],
+      "@payloadcms/db-mongodb": [
-      "@payloadcms/ui/*": ["./packages/ui/src/exports/*"],
+        "./packages/db-mongodb/src"
-      "@payloadcms/ui/scss": ["./packages/ui/src/scss/styles.scss"],
+      ],
-      "@payloadcms/ui/scss/app.scss": ["./packages/ui/src/scss/app.scss"],
+      "@payloadcms/richtext-lexical": [
-      "@payloadcms/translations": ["./packages/translations/src/exports/index.ts"],
+        "./packages/richtext-lexical/src"
+      ],
+      "@payloadcms/plugin-cloud": [
+        "./packages/plugin-cloud/src"
+      ],
+      "@payloadcms/plugin-cloud-storage": [
+        "./packages/plugin-cloud-storage/src"
+      ],
+      "@payloadcms/ui": [
+        "./packages/ui/src/exports/index.ts"
+      ],
+      "@payloadcms/ui/*": [
+        "./packages/ui/src/exports/*"
+      ],
+      "@payloadcms/ui/scss": [
+        "./packages/ui/src/scss/styles.scss"
+      ],
+      "@payloadcms/ui/scss/app.scss": [
+        "./packages/ui/src/scss/app.scss"
+      ],
+      "@payloadcms/translations": [
+        "./packages/translations/src/exports/index.ts"
+      ],
       "@payloadcms/translations/client": [
         "./packages/translations/src/_generatedFiles_/client/index.ts"
       ],
-      "@payloadcms/translations/api": ["./packages/translations/src/_generatedFiles_/api/index.ts"],
+      "@payloadcms/translations/api": [
-      "@payloadcms/next/*": ["./packages/next/src/*"],
+        "./packages/translations/src/_generatedFiles_/api/index.ts"
-      "@payloadcms/next": ["./packages/next/src/exports/*"],
+      ],
-      "@payloadcms/graphql": ["./packages/graphql/src"],
+      "@payloadcms/next/*": [
-      "@payload-config": ["./test/_community/config.ts"]
+        "./packages/next/src/*"
+      ],
+      "@payloadcms/next": [
+        "./packages/next/src/exports/*"
+      ],
+      "@payloadcms/graphql": [
+        "./packages/graphql/src"
+      ],
+      "@payload-config": [
+        "./test/_community/config.ts"
+      ]
     }
   },
-  "exclude": ["dist", "build", "temp", "node_modules"],
+  "exclude": [
+    "dist",
+    "build",
+    "temp",
+    "node_modules"
+  ],
   "composite": true,
   "references": [
     {
@@ -116,4 +161,4 @@
     "app/**/*.tsx",
     "scripts/**/*.ts"
   ]
-}
+}