Skip to content

Conversation

@danstarns
Copy link
Contributor

@danstarns danstarns commented Jan 31, 2025

Progress Checklist

React Version Peer Changes

Updated the React version in the @grapesjs/react public-facing package to be floating:

{
  "name": "@grapesjs/react",
  "version": "1.0.0",
  "devDependencies": {},
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0",
    "grapesjs": "^0.22.5"
  }
}

Code Changes Made

Removed direct references to React in the codebase

- import { React } from "react";
+ import { type ReactNode } from "react";

- const Component = (): React.ReactNode => (<></>)
+ const Component = (): ReactNode => (<></>)

Allows better tree-shaking of types to rely on the users peer react.

Ensured React nodes are always returned instead of null

- const Component = (): ReactNode => ivSomething ? <Other/> : null;
+ const Component = (): ReactNode => ivSomething ? <Other/>  : <></>;

This stops common errors like cannot read property .A of undefined also related to (ref: vercel/next.js#64753).

Manually cast providers with proper types

- export default SelectorsProvider;
+ export default SelectorsProvider as unknown as (props: SelectorsProviderProps) => JSX.Element;

This stops type errors when using the editor with children:

src/examples/EditorWaitReady.tsx:17:10 - error TS2786: 'GrapesJsEditor' cannot be used as a JSX component.
  Its type 'NamedExoticComponent<EditorProps>' is not a valid JSX element type.
    Type 'NamedExoticComponent<EditorProps>' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'ReactNode' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode | Promise<ReactNode>'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

17         <GrapesJsEditor
            ~~~~~~~~~~~~~~

Fixed portal children creation

- return createPortal(children, el);
+ return createPortal(createElement('div', null, children), el);

Build changes

react/jsx-runtime has been excluded from the build of @grapesjs/react, and changed to cjs format from umd for the main entry:

vite.config.ts

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "MyLib",
-      formats: ["es", "umd"],
+      formats: ["es", "cjs"],

      fileName: (format) => `index${format === "es" ? "" : `.${format}`}.js`,
    },
    rollupOptions: {
-      external: ["react", "react-dom" ],
+      external: ["react", "react-dom", "react/jsx-runtime"],
      output: {
        exports: "named",
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
+        "react/jsx-runtime": "react/jsx-runtime",
        },
      },
    },
  },
});

package.json

{
  "name": "@grapesjs/react",
  "version": "1.0.0",
  "type": "module",
  "files": [
    "dist"
  ],
-  "main": "./dist/index.umd.js",
+ "main": "./dist/index.cjs.js",

Monorepo Setup

  • Shared dependencies (typescript & vite) are hoisted to the root
  • React dependencies are scoped per example for testing
  • Docker setup provides isolated environments for testing different React versions

@danstarns danstarns marked this pull request as draft January 31, 2025 05:24
@danstarns danstarns changed the title react 19 Update to support react 19 Feb 3, 2025
@danstarns
Copy link
Contributor Author

danstarns commented Feb 6, 2025

Linting and formatting, adding the new example we now have 3 separate eslint configs, not working well in the editor and manually running the fix would make the diff of this even harder to follow.

Let's focus on this after getting this in:

@danstarns danstarns mentioned this pull request Feb 8, 2025
@danstarns
Copy link
Contributor Author

We should probably add a release runner for this, another followup:

@danstarns
Copy link
Contributor Author

I added two build runners that run Typescript and Vite build in each example, that should be enough for now, but maybe we should consider adding a lightweight runner to assert any runtime errors.

Screenshot 2025-02-07 at 19 24 38

@danstarns danstarns marked this pull request as ready for review February 8, 2025 03:33
@danstarns danstarns mentioned this pull request Feb 11, 2025
Copy link
Member

@artf artf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome 🚀

@danstarns danstarns merged commit 9bd4b73 into main Feb 11, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants