Refactor build scripts and npm package process (facebook#5876)

etrepum · Apr 25, 2024 · 881258b · 881258b
1 parent db7b242
commit 881258b
Show file tree

Hide file tree

Showing 142 changed files with 19,349 additions and 1,783 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,9 +1,10 @@
-# NOTE: In general this should be kept in sync with .eslintignore
+# NOTE: In general this should be kept in sync with .prettierignore
 
 **/dist/**
-**/config/**
 **/build/**
 **/npm/**
+**/__tests__/integration/fixtures/**
+!scripts/npm/**
 **/*.js.flow
 **/*.d.ts
 **/playwright*/**

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,6 +51,8 @@ module.exports = {
       // node scripts should be console logging so don't lint against that
       files: ['scripts/**/*.js'],
       rules: {
+        // https://github.com/Stuk/eslint-plugin-header/issues/39
+        'header/header': OFF,
         'no-console': OFF,
       },
     },
@@ -213,7 +215,8 @@ module.exports = {
 
     'react/jsx-tag-spacing': ERROR,
 
-    'react/jsx-uses-react': ERROR,
+    // This hasn't been necessary since React 17
+    'react/jsx-uses-react': OFF,
 
     // We don't care to do this
     'react/jsx-wrap-multilines': [
@@ -223,8 +226,8 @@ module.exports = {
 
     'react/no-is-mounted': OFF,
 
-    // This isn't useful in our test code
-    'react/react-in-jsx-scope': ERROR,
+    // This hasn't been necessary since React 17
+    'react/react-in-jsx-scope': OFF,
 
     'react/self-closing-comp': ERROR,
 

diff --git a/.flowconfig b/.flowconfig
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -73,6 +73,33 @@ jobs:
         run: npm ci
       - run: npm run test-unit
 
+  integration:
+    if: github.repository_owner == 'facebook'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.18.0]
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm i -g npm@8
+      - uses: actions/cache@v3
+        id: cache
+        with:
+          path: |
+            node_modules
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+      - run: npm run test-integration
+
   e2e-mac:
     if: github.repository_owner == 'facebook'
     runs-on: macos-latest

diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,6 @@ node_modules
 
 base-build
 build
-build
 coverage
 dist
 npm

diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
 legacy-peer-deps=true
+init-module=./scripts/npm/npm-init.js
diff --git a/.prettierignore b/.prettierignore
@@ -1,14 +1,15 @@
 # NOTE: In general this should be kept in sync with .eslintignore
 
-packages/**/dist/**
-packages/**/build/**
-packages/**/npm/**
-packages/**/config/**
+**/dist/**
+**/build/**
+**/npm/**
+**/__tests__/integration/fixtures/**
 packages/**/.wxt/**
 packages/playwright
 packages/playwright-core
 packages/**/vite.config.js
 packages/**/vite.prod.config.js
+packages/lexical-website/docs/api
 **/*.md
 **/*.js.flow
 **/node_modules

diff --git a/.size-limit.js b/.size-limit.js
@@ -32,24 +32,15 @@ const fs = require('fs-extra');
  * Currently this alias map points at the cjs version of the build product,
  * as that is what was measured previously in #3600.
  */
+const {packagesManager} = require('./scripts/shared/packagesManager');
 const alias = Object.fromEntries(
-  glob('./packages/*/package.json', {sync: true}).flatMap((fn) => {
-    const pkg = fs.readJsonSync(fn);
-    if (!pkg.private) {
-      return Object.entries(pkg.exports).flatMap(([k, v]) => {
-        if (k.endsWith('.js')) {
-          return [];
-        }
-        return [
-          [
-            `${pkg.name}${k.replace(/^\.(\/$)?/, '')}`,
-            path.resolve(path.dirname(fn), 'dist', v.require.default),
-          ],
-        ];
-      });
-    }
-    return [];
-  }),
+  packagesManager
+    .getPublicPackages()
+    .flatMap((pkg) =>
+      pkg
+        .getNormalizedNpmModuleExportEntries()
+        .map(([k, v]) => [k, pkg.resolve('dist', v.require.default)]),
+    ),
 );
 
 const extendConfig = {resolve: {alias}};

diff --git a/README.md b/README.md
@@ -367,6 +367,7 @@ editor.registerUpdateListener(({editorState}) => {
 - [Concepts](https://lexical.dev/docs/concepts/editor-state)
 - [How Lexical was designed](https://lexical.dev/docs/design)
 - [Testing](https://lexical.dev/docs/testing)
+- [Maintainers' Guide](https://lexical.dev/docs/maintainers-guide)
 
 ## Browser Support
 

diff --git a/examples/react-rich/package.json b/examples/react-rich/package.json
@@ -15,10 +15,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4",
-    "@vitejs/plugin-react": "^4.2.1",
     "@types/react": "^18.2.59",
-    "@types/react-dom": "^18.2.19"
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
   }
 }
diff --git a/examples/react-rich/src/App.tsx b/examples/react-rich/src/App.tsx
@@ -11,7 +11,6 @@ import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import * as React from 'react';
 
 import ExampleTheme from './ExampleTheme';
 import ToolbarPlugin from './plugins/ToolbarPlugin';

diff --git a/examples/react-rich/src/plugins/ToolbarPlugin.tsx b/examples/react-rich/src/plugins/ToolbarPlugin.tsx
@@ -19,7 +19,6 @@ import {
   UNDO_COMMAND,
 } from 'lexical';
 import {useCallback, useEffect, useRef, useState} from 'react';
-import * as React from 'react';
 
 const LowPriority = 1;
 
@@ -57,7 +56,7 @@ export default function ToolbarPlugin() {
       }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
-        (_payload, newEditor) => {
+        (_payload, _newEditor) => {
           $updateToolbar();
           return false;
         },

diff --git a/examples/react-rich/src/plugins/TreeViewPlugin.tsx b/examples/react-rich/src/plugins/TreeViewPlugin.tsx
@@ -8,7 +8,6 @@
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TreeView} from '@lexical/react/LexicalTreeView';
-import * as React from 'react';
 
 export default function TreeViewPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext();

diff --git a/jest.config.js b/jest.config.js
@@ -8,10 +8,20 @@
 
 'use strict';
 
+const tsconfig = require('./tsconfig.json');
+
 const common = {
   modulePathIgnorePatterns: ['/npm'],
 };
 
+// Use tsconfig's paths to configure jest's module name mapper
+const moduleNameMapper = Object.fromEntries(
+  Object.entries(tsconfig.compilerOptions.paths).map(([name, [firstPath]]) => [
+    `^${name}$`,
+    firstPath.replace(/^\./, '<rootDir>'),
+  ]),
+);
+
 module.exports = {
   projects: [
     {
@@ -20,121 +30,27 @@ module.exports = {
       globals: {
         IS_REACT_ACT_ENVIRONMENT: true,
         __DEV__: true,
-        'ts-jest': {
-          tsconfig: 'tsconfig.test.json',
-        },
-      },
-      moduleNameMapper: {
-        '^./dist/(.+)': './src/$1',
-        '^@lexical/clipboard$':
-          '<rootDir>/packages/lexical-clipboard/src/index.ts',
-        '^@lexical/code$': '<rootDir>/packages/lexical-code/src/index.ts',
-        '^@lexical/devtools-core$':
-          '<rootDir>/packages/lexical-devools-core/src/index.ts',
-        '^@lexical/dragon$': '<rootDir>/packages/lexical-dragon/src/index.ts',
-        '^@lexical/file$': '<rootDir>/packages/lexical-file/src/index.ts',
-        '^@lexical/hashtag$': '<rootDir>/packages/lexical-hashtag/src/index.ts',
-        '^@lexical/headless$':
-          '<rootDir>/packages/lexical-headless/src/index.ts',
-        '^@lexical/history$': '<rootDir>/packages/lexical-history/src/index.ts',
-        '^@lexical/html$': '<rootDir>/packages/lexical-html/src/index.ts',
-        '^@lexical/link$': '<rootDir>/packages/lexical-link/src/index.ts',
-        '^@lexical/list$': '<rootDir>/packages/lexical-list/src/index.ts',
-        '^@lexical/mark$': '<rootDir>/packages/lexical-mark/src/index.ts',
-        '^@lexical/markdown$':
-          '<rootDir>/packages/lexical-markdown/src/index.ts',
-        '^@lexical/offset$': '<rootDir>/packages/lexical-offset/src/index.ts',
-        '^@lexical/overflow$':
-          '<rootDir>/packages/lexical-overflow/src/index.ts',
-        '^@lexical/plain-text$':
-          '<rootDir>/packages/lexical-plain-text/src/index.ts',
-
-        '^@lexical/react/LexicalAutoEmbedPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx',
-        '^@lexical/react/LexicalAutoFocusPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalAutoFocusPlugin.ts',
-        '^@lexical/react/LexicalAutoLinkPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalAutoLinkPlugin.ts',
-        '^@lexical/react/LexicalCheckListPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalCheckListPlugin.ts',
-        '^@lexical/react/LexicalCollaborationContext$':
-          '<rootDir>/packages/lexical-react/src/LexicalCollaborationContext.ts',
-        '^@lexical/react/LexicalCollaborationPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalCollaborationPlugin.ts',
-        '^@lexical/react/LexicalComposer$':
-          '<rootDir>/packages/lexical-react/src/LexicalComposer.tsx',
-        '^@lexical/react/LexicalComposerContext$':
-          '<rootDir>/packages/lexical-react/src/LexicalComposerContext.ts',
-        '^@lexical/react/LexicalContentEditable$':
-          '<rootDir>/packages/lexical-react/src/LexicalContentEditable.tsx',
-        '^@lexical/react/LexicalErrorBoundary$':
-          '<rootDir>/packages/lexical-react/src/LexicalErrorBoundary.tsx',
-        '^@lexical/react/LexicalHistoryPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalHistoryPlugin.ts',
-        '^@lexical/react/LexicalLinkPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalLinkPlugin.ts',
-        '^@lexical/react/LexicalListPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalListPlugin.ts',
-        '^@lexical/react/LexicalPlainTextPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalPlainTextPlugin.ts',
-        '^@lexical/react/LexicalRichTextPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalRichTextPlugin.tsx',
-        '^@lexical/react/LexicalTabIndentationPlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalTabIndentationPlugin.tsx',
-        '^@lexical/react/LexicalTablePlugin$':
-          '<rootDir>/packages/lexical-react/src/LexicalTablePlugin.ts',
-        '^@lexical/react/useLexicalCanShowPlaceholder$':
-          '<rootDir>/packages/lexical-react/src/useLexicalCanShowPlaceholder.ts',
-        '^@lexical/react/useLexicalDecorators$':
-          '<rootDir>/packages/lexical-react/src/useLexicalDecorators.ts',
-        '^@lexical/react/useLexicalEditable$':
-          '<rootDir>/packages/lexical-react/src/useLexicalEditable.ts',
-        '^@lexical/react/useLexicalEditor$':
-          '<rootDir>/packages/lexical-react/src/useLexicalEditor.ts',
-        '^@lexical/react/useLexicalSubscription$':
-          '<rootDir>/packages/lexical-react/src/useLexicalSubscription.ts',
-        '^@lexical/rich-text$':
-          '<rootDir>/packages/lexical-rich-text/src/index.ts',
-        '^@lexical/selection$':
-          '<rootDir>/packages/lexical-selection/src/index.ts',
-        '^@lexical/selection/src/__tests__/utils$':
-          '<rootDir>/packages/lexical-selection/src/__tests__/utils/index.ts',
-        '^@lexical/table$': '<rootDir>/packages/lexical-table/src/index.ts',
-        '^@lexical/text$': '<rootDir>/packages/lexical-text/src/index.ts',
-        '^@lexical/utils$': '<rootDir>/packages/lexical-utils/src/index.ts',
-        '^@lexical/yjs$': '<rootDir>/packages/lexical-yjs/src/index.ts',
-        '^@lexical/yjs/src/index$':
-          '<rootDir>/packages/lexical-yjs/src/index.ts',
-        '^lexical$': '<rootDir>/packages/lexical/src/index.ts',
-        '^lexical/src/([^/]+)$': '<rootDir>/packages/lexical/src/$1.ts',
-        '^lexical/src/__tests__/utils$':
-          '<rootDir>/packages/lexical/src/__tests__/utils/index.tsx',
-        '^lexical/src/nodes/([^/]+)$':
-          '<rootDir>/packages/lexical/src/nodes/$1.ts',
-        '^shared/canUseDOM$': '<rootDir>/packages/shared/src/canUseDOM.ts',
-        '^shared/caretFromPoint$':
-          '<rootDir>/packages/shared/src/caretFromPoint.ts',
-        '^shared/environment$': '<rootDir>/packages/shared/src/environment.ts',
-        '^shared/invariant$': '<rootDir>/packages/shared/src/invariant.ts',
-        '^shared/normalizeClassNames$':
-          '<rootDir>/packages/shared/src/normalizeClassNames.ts',
-        '^shared/simpleDiffWithCursor$':
-          '<rootDir>/packages/shared/src/simpleDiffWithCursor.ts',
-        '^shared/useLayoutEffect$':
-          '<rootDir>/packages/shared/src/useLayoutEffect.ts',
-        '^shared/warnOnlyOnce$':
-          '<rootDir>/packages/shared/src/warnOnlyOnce.ts',
-        formatProdErrorMessage:
-          '<rootDir>/scripts/error-codes/formatProdErrorMessage.js',
       },
+      moduleNameMapper,
       preset: 'ts-jest',
       testEnvironment: 'jsdom',
       testMatch: ['**/__tests__/unit/**/*.test{.ts,.tsx,.js,.jsx}'],
       transform: {
         '^.+\\.jsx?$': 'babel-jest',
-        '^.+\\.tsx$': 'ts-jest',
+        '^.+\\.tsx?$': [
+          'ts-jest',
+          {
+            tsconfig: 'tsconfig.test.json',
+          },
+        ],
       },
     },
+    {
+      ...common,
+      displayName: 'integration',
+      globalSetup: './scripts/__tests__/integration/setup.js',
+      testMatch: ['**/scripts/__tests__/integration/**/*.test.js'],
+    },
     {
       ...common,
       displayName: 'e2e',