revert * as react imports; clean test setup;

apps/demo/src/lib/ViewSettings.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export interface IViewSettingsContext {
     lang?: string

apps/demo/tests/PageHome.test.tsx

@@ -8,6 +8,8 @@ import { render } from '@testing-library/react'
 import { contentUIMapping } from '../src/components/ContentUI'
 import { PageHome } from '../src/pages/PageHome'
 
+// rm -rf node_modules/.cache && npm run test -- --testPathPattern=PageHome --no-cache
+
 describe('PageHome', () => {
     // it('DummyText', async() => {
     //     const {queryByText} = render(

jest.config.ts

@@ -14,31 +14,31 @@ const toPackageFolder = (pkg: [name: string, folder?: string]) => {
     return pkg[1] || pkg[0]
 }
 
-// todo: something in TS/babel, no matter which preset, causes `export default Comp` to not work,
-//       e.g. for `import Box from '@mui/material/Box'` is `console.log(Box)` logs: `Box { boxClasses: [Getter], default: [Getter] }`
-//       but expects to be more like: `Object { "$$typeof": Symbol("react.forward_ref"), render: Box(inProps, ref), propTypes: {…}, … }`
-// todo: maybe use babel-plugin-transform-imports to configure that? but looks like it is for ESM>CJS, but allows throwing for full lib imports
+// todo: For tests in ESM sometimes `React` is undefined, yet somehow could not make it reproducible.
+//       It is the `import React from 'react'` vs `import * as React from 'react'` thing.
+//       - somehow it first failed, then worked with `"jsx": "react-jsxdev"`, afterwards some kind of caching?!
+//       - not depending on disabling transform of packages
 const base: Config.InitialProjectOptions = {
-    // note: presets are deprecated
-    // preset: 'ts-jest/presets/default', // ts/tsx to CJS, js/jsx as-is
-    // preset: 'ts-jest/presets/default-esm-legacy', // ts/tsx to ESM, js/jsx as-is
-    // preset: 'ts-jest/presets/js-with-ts',// all to CJS
-    // preset: 'ts-jest/presets/js-with-ts-esm',// all to ESM
-    // preset: 'ts-jest/presets/js-with-babel',// TS with ts-jest to CJS, other with babel-jest
-    // preset: 'ts-jest/presets/js-with-babel-esm',// TS with ts-jest to ESM, other with babel-jest
+    cacheDirectory: '<rootDir>/node_modules/.cache/jest-tmp',
     transformIgnorePatterns: [
-        // `node_modules/?!(${[
-        //     ...packages,
-        //     // ['@mui'] as [name: string, folder?: string], ['@ui-schema'] as [name: string, folder?: string],
-        // ].map(toPackageFolder).join('|')})`,
-        'node_modules/(?!(@mui)/)',
+        `node_modules/?!(${[
+            ...packages,
+            ['@mui'] as [name: string, folder?: string],
+            // ['@ui-schema'] as [name: string, folder?: string],
+        ].map(toPackageFolder).join('|')})/`,
+        // `node_modules/?!(@mui)/`,
     ],
     transform: {
         ...createDefaultEsmPreset({
             babelConfig: {
                 plugins: [
                     './babelImportDefaultPlugin.js',
-                    // 'babel-plugin-transform-require-default',
+                    // ['transform-imports', { // not validated/checked
+                    //     'react': {
+                    //         // 'transform': 'import * as React from 'react'',
+                    //         // 'preventFullImport': true,
+                    //     },
+                    // }],
                 ],
             },
         }).transform,// ts/tsx to ESM, js/jsx as-is
@@ -64,6 +64,9 @@ const base: Config.InitialProjectOptions = {
     coveragePathIgnorePatterns: [
         '(tests/.*.mock).(jsx?|tsx?|ts?|js?)$',
         '.*.(test|spec).(js|ts|tsx)$',
+        '<rootDir>/apps/demo',
+        '<rootDir>/apps/sandbox',
+        '<rootDir>/server/sandbox',
     ],
     extensionsToTreatAsEsm: ['.ts', '.tsx'],
 }

package.json

@@ -11,14 +11,15 @@
         "clean": "rimraf dist && rimraf coverage && rimraf apps/demo/build && rimraf apps/sandbox/dist && rimraf server/feed/build",
         "predev": "npm run clean",
         "lint": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192 --no-deprecation --experimental-vm-modules --unhandled-rejections=strict\" eslint -c=.eslintrc --ext=.tsx,.ts --max-warnings=0 'apps/demo/src' 'packages'",
-        "test": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192 --no-warnings --no-deprecation --experimental-vm-modules --unhandled-rejections=strict\" jest -c=\"jest.config.ts\" --passWithNoTests",
-        "test-cjs": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192 --no-warnings --no-deprecation --experimental-vm-modules --unhandled-rejections=strict\" jest -c=\"jest.config-cjs.ts\" --passWithNoTests",
+        "test": "npm run jest -- -c=\"jest.config.ts\" --passWithNoTests",
+        "jest": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=8192 --no-warnings --no-deprecation --experimental-vm-modules --unhandled-rejections=strict\" jest",
         "tdd": "cross-env NODE_ENV=development npm test -- --watch --coverage=false",
         "dev": "concurrently --kill-others \"npm run app:demo:start\" \"npm run server:feed:start\"",
         "prebuild": "npm run clean && npm run lint && npm run test && npm run tsc",
         "tsc": "tsc --project tsconfig.json --noEmit",
         "tsgen": "tsc --project tsconfig.packages.json --emitDeclarationOnly --pretty",
         "build": "npm run app:demo:build && npm run server:feed:build && npm run build-packages && npm run build -w content-ui-sandbox",
+        "postbuild": "rimraf --glob dist/**/tests",
         "webpack": "cross-env NODE_ENV=production webpack --mode=production",
         "webpack-dev-server": "cross-env NODE_ENV=development webpack-dev-server --mode=development --hot",
         "build-packages": "npm run tsgen && npm run babel-packages",
@@ -86,7 +87,6 @@
         "@babel/cli": "^7.25.6",
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
         "@babel/preset-env": "^7.25.4",
         "@babel/preset-react": "^7.24.7",
         "@babel/preset-typescript": "^7.24.7",
@@ -102,7 +102,6 @@
         "@typescript-eslint/parser": "^8.7.0",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.2.1",
-        "babel-plugin-add-module-exports": "^1.0.4",
         "concurrently": "^9.0.1",
         "copy-webpack-plugin": "^12.0.2",
         "cross-env": "^7.0.3",

packages/md-mui/Leafs/LeafToc.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Heading, ListItem, Root } from 'mdast'
 import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
 import Typography from '@mui/material/Typography'

packages/md-mui/MuiComponents/MuiLink.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Link as LinkBase } from 'react-router-dom'
 import MuiLinkBase, { LinkProps } from '@mui/material/Link'
 

packages/md-mui/MuiComponents/MuiNavLink.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { useMatch } from 'react-router-dom'
 import MuiLink, { LinkProps } from '@mui/material/Link'
 import { NavLinkProps, RouterLink } from '@content-ui/md-mui/MuiComponents/MuiLink'

packages/md-mui/Renderer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, memo, ReactNode } from 'react'
 import { useContentContext, EditorSelection } from '@content-ui/react/useContent'
 import Typography from '@mui/material/Typography'
 import { defaultTocIds, LeafToc, LeafTocContextType, useLeafToc } from '@content-ui/md-mui/Leafs/LeafToc'
@@ -11,7 +11,7 @@ export interface RendererProps {
     handleTocClick?: LeafTocContextType['onClick']
 }
 
-export const Renderer = ({handleTocClick, editorSelection}: RendererProps): React.ReactNode => {
+export const Renderer = ({handleTocClick, editorSelection}: RendererProps): ReactNode => {
     const {root} = useContentContext()
     const {headlines, tocInject} = useLeafToc(root, defaultTocIds)
     const bodyNodes = root?.children?.filter(c => c.type !== 'footnoteDefinition')
@@ -34,7 +34,7 @@ export const Renderer = ({handleTocClick, editorSelection}: RendererProps): Reac
                         (typeof tocInject?.next?.rootIndex === 'number' && tocInject?.next?.rootIndex === i + 1) ||
                         (typeof tocInject?.next?.rootIndex === 'undefined' && tocInject?.start?.rootIndex === i)
                     ) ?
-                        <React.Fragment key={i}>
+                        <Fragment key={i}>
                             {/* todo: slice the whole toc area and render separately, not only injecting but "container wrapping" */}
                             <ContentLeaf
                                 elem={child.type}
@@ -50,7 +50,7 @@ export const Renderer = ({handleTocClick, editorSelection}: RendererProps): Reac
                                     tocInject={tocInject}
                                     onClick={handleTocClick}
                                 /> : null}
-                        </React.Fragment> :
+                        </Fragment> :
                         <ContentLeaf
                             key={i}
                             elem={child.type}
@@ -69,4 +69,4 @@ export const Renderer = ({handleTocClick, editorSelection}: RendererProps): Reac
     </>
 }
 
-export const RendererMemo = React.memo(Renderer)
+export const RendererMemo = memo(Renderer)

packages/md-mui/Viewer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
 import { ContentProcessor, EditorSelection, useContent, useContentContext, WithContent } from '@content-ui/react/useContent'
 import Typography from '@mui/material/Typography'

packages/md-mui/tests/ViewerFromText.test.tsx

@@ -12,6 +12,7 @@ import { BrowserRouter } from 'react-router-dom'
 
 // npm run test -- --testPathPattern=ViewerFrom --no-cache
 // rm -rf node_modules/.cache && npm run test -- --testPathPattern=ViewerFrom --no-cache
+// rm -rf node_modules && npm i && npm run test -- --testPathPattern=ViewerFrom --no-cache
 
 describe('ViewerFromText', () => {
     it('Headline', async() => {

packages/react/ContentFileProvider.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Root } from 'mdast'
 import { ContentFileContextType, ContentContext, ContentSelectionContext, EditorSelection } from '@content-ui/react/useContent'
 import { VFile } from 'vfile'

packages/react/ContentLeaf.tsx

@@ -1,11 +1,9 @@
 import { RootContent } from 'mdast'
-import * as React from 'react'
+import React, { useMemo, memo, createContext, useContext } from 'react'
 import { EditorSelection } from '@content-ui/react/useContent'
 import { useSettings } from '@content-ui/react/LeafSettings'
 import { DecoratorProps, DecoratorPropsNext, ReactBaseDecorator, ReactDeco } from '@content-ui/react/EngineDecorator'
 
-const {useMemo, memo, createContext, useContext} = React
-
 export type GenericLeafsDataSpec<D extends {} = {}> = {
     [k: string]: D
 }

packages/react/LeafSettings.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export type LeafsSettings = {
     followEditor?: boolean

packages/react/useContent.ts

@@ -1,10 +1,8 @@
-import * as React from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { Processor } from 'unified'
 import { VFile } from 'vfile'
 import { Root } from 'mdast'
 
-const {useCallback, useRef, useState} = React
-
 export interface EditorSelectionPosition {
     start: number
     startLine: number

packages/react/useLeafFollower.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { useSettings } from '@content-ui/react/LeafSettings'
 
 export const useLeafFollower = <E extends HTMLElement = HTMLElement>(selected: boolean | undefined) => {

tsconfig.json

@@ -19,7 +19,7 @@
         "resolveJsonModule": true,
         "isolatedModules": false,
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "preserve"
     },
     "paths": {
         "@content-ui/input": [