Merge pull request #405 from grid-js/rollup-commonjs

chore: rollup commonjs

Author: afshinm

package-lock.json

@@ -33,11 +33,13 @@
     "test:watch": "jest --watch"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^28.1.7",
     "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
     "eslint": "^8.22.0",

package.json

@@ -1,4 +1,5 @@
 import typescript from 'rollup-plugin-typescript2';
+import commonjs from "@rollup/plugin-commonjs";
 import { terser } from 'rollup-plugin-terser'
 import size from 'rollup-plugin-sizes'
 import resolve from '@rollup/plugin-node-resolve';
@@ -14,6 +15,7 @@ export default [
       { file: path('development', 'es'), format: 'es', sourcemap: true },
     ],
     plugins: [
+      commonjs(),
       resolve(),
       typescript({
         tsconfig: "tsconfig.json",
@@ -33,6 +35,7 @@ export default [
       { file: path('production', 'es.min'), format: 'es', sourcemap: true },
     ],
     plugins: [
+      commonjs(),
       resolve(),
       typescript({
         tsconfig: "tsconfig.release.json",

rollup.config.js

@@ -1,5 +1,5 @@
 import { h, createRef as gCreateRef, Component as gComponent } from "gridjs";
-import * as ReactDOMClient from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 
 
 export class ReactWrapper extends gComponent<{
@@ -13,7 +13,7 @@ export class ReactWrapper extends gComponent<{
   ref = gCreateRef();
 
   componentDidMount(): void {
-    const root = ReactDOMClient.createRoot(this.ref.current);
+    const root = createRoot(this.ref.current);
     root.render(this.props.element);
   }