Update to support react 19 (#20)

* deps: update to react 19

* package: move react and grapes to peers + add clean script

* refactor: move example app to 19

* feat: add react app 18 example

* further changes to support react 18 + 19

* refactor: use create root for react 19 demo

* package: updates *

* yarn lock *

* ci: init

* ci: add core build

* ci: *

* ci: *

* ci: *

* ci: *

* feat: add docker files

* *

* docker *

* apply react codemod

* *

* ci: *

* *

* *

* fix build errors?

* fix errors 2?

* fix 3

* *

* *

* *

* *

* feat: add two simple examples in 18 & 19

* fix: use import type newline vs same

* fix: build cjs main

* fix: cjs and exclude react jsx runtime from build

* refactor: remove simple example

* pkg fix

* ci *

Author: danstarns

.github/actions/setup-project/action.yml

@@ -0,0 +1,20 @@
+name: Setup Project
+description: Sets up the project by installing dependencies
+
+inputs:
+  node-version:
+    required: false
+    default: 22.4.1
+    description: "The version of Node.js to use."
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        registry-url: "https://registry.npmjs.org"
+        cache: "yarn"
+    - name: Install dependencies
+      run: yarn
+      shell: bash

.github/workflows/pr.yml

@@ -0,0 +1,46 @@
+name: PR Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        react-version: [19, 18]
+        include:
+          - react-version: 19
+            app-name: react-app-19
+            react-dom-version: ^19.0.0
+            react-types-version: ^19.0.0
+          - react-version: 18
+            app-name: react-app-18
+            react-dom-version: ^18.2.0
+            react-types-version: ^18.2.0
+
+    name: Build with React ${{ matrix.react-version }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Project Base
+        uses: ./.github/actions/setup-project
+
+      ## We specify the version of react and react-dom we want to run vite build with
+      - name: Install React Dependencies in Root
+        run: |
+          cd ./packages/grapesjs-react && yarn add \
+          react@^19.0.0 \
+          react-dom@^19.0.0 \
+          @types/react@^19.0.0 \
+          @types/react-dom@^19.0.0
+
+      - name: Build Core
+        run: yarn workspace @grapesjs/react run build
+
+      - name: Build Full Example App
+        run: yarn workspace @grapesjs/${{ matrix.app-name }} run build

DOCKER.md

@@ -0,0 +1,26 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN apk add --no-cache python3 make g++ wget
+
+COPY package.json yarn.lock ./
+COPY packages/grapesjs-react/package.json ./packages/grapesjs-react/package.json
+COPY packages/grapesjs-react-app-18/package.json ./packages/grapesjs-react-app-18/package.json
+COPY packages/grapesjs-react-app-19/package.json ./packages/grapesjs-react-app-19/package.json
+
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react
+
+RUN yarn add \
+    react@^19.0.0 \
+    react-dom@^19.0.0 \
+    @types/react@^19.0.0 \
+    @types/react-dom@^19.0.0
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn workspace @grapesjs/react run build

Dockerfile.base

@@ -0,0 +1,22 @@
+FROM grapesjs-base:latest
+
+RUN yarn add -W \
+    react@^18.2.0 \
+    react-dom@^18.2.0 \
+    @types/react@^18.2.0 \
+    @types/react-dom@^18.2.0
+
+WORKDIR /app/packages/grapesjs-react
+RUN yarn link
+
+WORKDIR /app/packages/grapesjs-react-app-18
+RUN yarn link @grapesjs/react
+
+WORKDIR /app
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react-app-18
+
+EXPOSE 5173
+
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

Dockerfile.react18

@@ -0,0 +1,22 @@
+FROM grapesjs-base:latest
+
+RUN yarn add -W \
+    react@^19.0.0 \
+    react-dom@^19.0.0 \
+    @types/react@^19.0.0 \
+    @types/react-dom@^19.0.0
+
+WORKDIR /app/packages/grapesjs-react
+RUN yarn link
+
+WORKDIR /app/packages/grapesjs-react-app-19
+RUN yarn link @grapesjs/react
+
+WORKDIR /app
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react-app-19
+
+EXPOSE 5173
+
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

Dockerfile.react19

@@ -0,0 +1,44 @@
+version: "3.8"
+
+services:
+  base:
+    build:
+      context: .
+      dockerfile: Dockerfile.base
+    image: grapesjs-base:latest
+
+  react18:
+    build:
+      context: .
+      dockerfile: Dockerfile.react18
+    ports:
+      - "5173:5173"
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:5173"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    environment:
+      - VITE_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_PORT=5173
+    volumes:
+      - ./packages/grapesjs-react-app-18:/app/packages/grapesjs-react-app-18
+      - /app/packages/grapesjs-react-app-18/node_modules
+
+  react19:
+    build:
+      context: .
+      dockerfile: Dockerfile.react19
+    ports:
+      - "5173:5173"
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:5173"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    environment:
+      - VITE_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_PORT=5173
+    volumes:
+      - ./packages/grapesjs-react-app-19:/app/packages/grapesjs-react-app-19
+      - /app/packages/grapesjs-react-app-19/node_modules

docker-compose.yaml

@@ -3,11 +3,40 @@
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {
-    "start": "yarn workspace @grapesjs/react run dev & yarn workspace @grapesjs/react-app run dev"
+    "build": "yarn build:core && yarn build:app-18 && yarn build:app-19",
+    "start": "yarn workspace @grapesjs/react run dev & yarn workspace @grapesjs/react-app run dev",
+    "clean": "find . -type d \\( -name \"node_modules\" -o -name \"build\" -o -name \"dist\" \\) -exec rm -rf {} + && rm ./yarn.lock",
+    "build:core": "yarn workspace @grapesjs/react run build",
+    "build:app-18": "yarn workspace @grapesjs/react-app-18 run build",
+    "build:app-19": "yarn workspace @grapesjs/react-app-19 run build"
   },
   "workspaces": {
     "packages": [
       "packages/*"
+    ],
+    "nohoist": [
+      "**/react",
+      "**/react-dom",
+      "**/react/**",
+      "**/react-dom/**",
+      "**/@types/react",
+      "**/@types/react-dom"
     ]
+  },
+  "dependencies": {
+    "@types/node": "^20.3.3",
+    "grapesjs": "^0.22.5",
+    "vite-plugin-dts": "^4.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
   }
 }

package.json

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+nmMode: hardlinks-local

packages/grapesjs-react-app/.eslintrc.cjs renamed to packages/grapesjs-react-app-18/.eslintrc.cjs

@@ -0,0 +1,30 @@
+{
+  "name": "@grapesjs/react-app-18",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --force",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
+    "@mui/material": "^5.13.5",
+    "@grapesjs/react": "1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/grapesjs-react-app/.gitignore renamed to packages/grapesjs-react-app-18/.gitignore

@@ -0,0 +1,41 @@
+import GrapesJsEditor, { AssetsProvider, Canvas, EditorProps, ModalProvider } from '@grapesjs/react';
+import { ThemeProvider } from '@mui/material/styles';
+import { MAIN_BORDER_COLOR, customTheme, defaultEditorProps } from './common';
+import CustomAssetManager from './components/CustomAssetManager';
+import CustomModal from './components/CustomModal';
+import RightSidebar from './components/RightSidebar';
+import Topbar from './components/Topbar';
+
+export default function CustomEditor(props: Partial<EditorProps>) {
+    return (
+        <ThemeProvider theme={customTheme}>
+            <GrapesJsEditor
+                className="gjs-custom-editor"
+                {...defaultEditorProps}
+                {...props}
+            >
+                <div className={`flex h-full border-t ${MAIN_BORDER_COLOR}`}>
+                    <div className="gjs-column-m flex flex-col flex-grow">
+                        <Topbar className="min-h-[48px]"/>
+                        <Canvas className="flex-grow gjs-custom-editor-canvas"/>
+                    </div>
+                    <RightSidebar className={`gjs-column-r w-[300px] border-l ${MAIN_BORDER_COLOR}`}/>
+                </div>
+                <ModalProvider>
+                    {({ open, title, content, close }) => (
+                        <CustomModal open={open} title={<>{title}</>} close={close}>
+                           <>{content}</>
+                        </CustomModal>
+                    )}
+                </ModalProvider>
+                <AssetsProvider>
+                    {({ assets, select, close, Container }) => (
+                        <Container>
+                            <CustomAssetManager assets={assets} select={select} close={close}/>
+                        </Container>
+                    )}
+                </AssetsProvider>
+            </GrapesJsEditor>
+        </ThemeProvider>
+    )
+}

packages/grapesjs-react-app-18/.yarnrc.yml

@@ -62,7 +62,7 @@ export default function DefaultCustomEditor(props: Partial<EditorProps>) {
                 </AssetsProvider>
                 <ModalProvider>
                     {({ open, title, content, close }) => (
-                        <CustomModal open={open} title={title} children={content} close={close}/>
+                        <CustomModal open={open} title={<>{title}</>} children={<>{content}</>} close={close}/>
                     )}
                 </ModalProvider>
             </GrapesJsEditor>

packages/grapesjs-react-app/README.md renamed to packages/grapesjs-react-app-18/README.md

@@ -1,4 +1,5 @@
 import { mdiClose } from '@mdi/js';
+import type { ReactNode } from 'react';
 import Icon from '@mdi/react';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
@@ -21,9 +22,9 @@ const style = {
 };
 
 interface CustomModalProps extends Omit<ModalProps, 'title'> {
-    title: React.ReactNode,
+    title: ReactNode,
     close: () => void,
-}
+  }
 
 export default function CustomModal({ children, title, close, ...props }: CustomModalProps) {
     return (