Merge pull request #317 from christianvuerings/fix-ssr-check-node-js-22

Fix SSR check on Node.js v22

Author: fongandrew

.github/workflows/test.yml

@@ -3,18 +3,20 @@ on: [push, pull_request]
 jobs:
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['20.x', '22.x']
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
-    - name: Use Node.js
+    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
-        node-version: '20.x'
+        node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - name: NPM install
       run: npm install
     - name: Verify build works
       run: npm run build
     - name: Jest
       run: npm run test
-

README.md

@@ -168,7 +168,7 @@ require('codemirror/mode/javascript/javascript');
 
 - Is server side rendering supported?
 
-Yes. react-codemirror2 will prevent rendering in absence of `navigator`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global.
+Yes. react-codemirror2 will prevent rendering in absence of `window`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global.
 
 - How can I get the instance?
 

package.json

@@ -20,10 +20,8 @@
       "src/**"
     ],
     "setupFiles": [
-      "@nteract/mockument",
-      "raf/polyfill"
+      "./test/setup.js"
     ],
-    "testRegex": "./test/(index|index.server).spec.tsx",
     "transform": {
       ".(ts|tsx)": "ts-jest"
     },

src/index.tsx

@@ -4,7 +4,7 @@ import * as codemirror from 'codemirror';
 declare let global: any;
 declare let require: any;
 
-const SERVER_RENDERED = (typeof navigator === 'undefined' || (typeof global !== 'undefined' && global['PREVENT_CODEMIRROR_RENDER'] === true));
+const SERVER_RENDERED = (typeof window === 'undefined' || (typeof global !== 'undefined' && global['PREVENT_CODEMIRROR_RENDER'] === true));
 
 let cm;
 if (!SERVER_RENDERED) {

test/index.server.spec.tsx renamed to test/index-prevent-codemirror-render.server.spec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+// @ts-ignore
+import { renderToString } from 'react-dom/server';
+
+import {Controlled, UnControlled} from '../src';
+
+describe('Server Rendering', () => {
+
+  it('should not render', () => {
+    const uWrapper = renderToString(<UnControlled value="nomatter"/>);
+    const cWrapper = renderToString(<Controlled value="nomatter" onBeforeChange={() => {}}/>);
+
+    expect(uWrapper).toBe("");
+    expect(cWrapper).toBe("");
+  });
+});

test/index-server.spec.tsx

@@ -0,0 +1,4 @@
+if (typeof window !== 'undefined') {
+  require('@nteract/mockument');
+  require('raf/polyfill');
+}