fix(type-check): add type check and fix strictNullChecks error (#503)

Author: zhoushaw

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  test:
+  unit-test:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
@@ -49,7 +49,6 @@ jobs:
       uses: codecov/codecov-action@v2
       with:
         directory: ./coverage
-
   e2e-test:
     runs-on: ubuntu-20.04
     strategy:
@@ -90,3 +89,24 @@ jobs:
         # Recommended: pass the GitHub token lets this action correctly
         # determine the unique run id necessary to re-run the checks
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  type-check:
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node-version: [16.14.0]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - uses: pnpm/[email protected]
+      name: Install pnpm
+      id: pnpm-install
+      with:
+        version: 6.32.17
+        run_install: false
+    - name: install dependency
+      run: pnpm install --filter=\!garfish-docs
+    - name: check type
+      run:  pnpm type:check

package.json

@@ -15,6 +15,7 @@
     "test:coverage": "jest --collect-coverage",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
+    "type:check": "tsc -noEmit",
     "changeset": "npx changeset",
     "reset": "pnpm -r exec -- rm -rf node_modules && pnpm -r exec -- rm -rf dist && rm -rf node_modules",
     "setup": "cross-env DISABLE_GARFISH_CHECK_INTERNAL=true pnpm install",

packages/bridge-react-v18/__tests__/reactBridge.spec.ts

@@ -4,6 +4,7 @@
 
 import { reactBridge } from '../src/reactBridge';
 import '@testing-library/jest-dom';
+import assert from 'assert';
 
 const domElId = '#sub-app-container';
 const cssSelector = '#app';
@@ -242,7 +243,10 @@ describe('react-bridge', () => {
       expect(React.createElement).toHaveBeenCalled();
       expect(document.getElementById('test_el')).toBeInTheDocument();
       expect(document.getElementById('test_el')).not.toBeNull;
-      expect(document.getElementById('test_el').children).not.toBeNull;
+
+      assert(document.getElementById('test_el'));
+      expect(document.getElementById('test_el')).not.toBeNull;
+      expect(document.getElementById('test_el')?.children).not.toBeNull;
       expect(document.getElementById('app')).toBeNull;
     });
 
@@ -258,8 +262,10 @@ describe('react-bridge', () => {
 
       lifeCycles.render({ ...appInfo, props });
       expect(React.createElement).toHaveBeenCalled();
+
+      assert(document.getElementById('app'));
       expect(document.getElementById('app')).not.toBeNull;
-      expect(document.getElementById('app').children).not.toBeNull;
+      expect(document.getElementById('app')?.children).not.toBeNull;
     });
   });
 });

packages/bridge-react-v18/src/reactBridge.ts

@@ -20,13 +20,13 @@ type Options = UserOptions<
 
 const defaultOpts = {
   // required - one or the other or both
-  rootComponent: null,
-  loadRootComponent: null,
+  rootComponent: undefined,
+  loadRootComponent: undefined,
 
   // optional opts
-  renderType: null,
-  errorBoundary: null,
-  el: null,
+  renderType: undefined,
+  errorBoundary: undefined,
+  el: undefined,
   canUpdate: true, // by default, allow parcels created with garfish-react-bridge to be updated
   suppressComponentDidCatchWarning: false,
   domElements: {},
@@ -139,15 +139,21 @@ function mount(opts: Options, appInfo: PropsInfo) {
     opts,
   });
 
-  opts.domElements[appInfo.appName] = domElement;
-  opts.renderResults[appInfo.appName] = renderResult;
+  if (opts.domElements) {
+    opts.domElements[appInfo.appName] = domElement;
+  }
+  if (opts.renderResults) {
+    opts.renderResults[appInfo.appName] = renderResult;
+  }
 }
 
 function unmount(opts: Options, appInfo: PropsInfo) {
-  const root = opts.renderResults[appInfo.appName];
-  root.unmount();
-  delete opts.domElements[appInfo.appName];
-  delete opts.renderResults[appInfo.appName];
+  if (opts.renderResults) {
+    const root = opts.renderResults[appInfo.appName];
+    root.unmount();
+    opts.domElements && delete opts.domElements[appInfo.appName];
+    delete opts.renderResults[appInfo.appName];
+  }
 }
 
 // function update(opts: Options, appInfo: PropsInfo) {
@@ -163,7 +169,7 @@ function unmount(opts: Options, appInfo: PropsInfo) {
 //   });
 // }
 
-function atLeastReact18(React: typeReact) {
+function atLeastReact18(React?: typeReact) {
   if (
     React &&
     typeof React.version === 'string' &&
@@ -198,15 +204,15 @@ function callCreateRoot({ opts, elementToRender, domElement }) {
 }
 
 function getElementToRender(opts: Options, appInfo: PropsInfo) {
-  const rootComponentElement = opts.React.createElement(
+  const rootComponentElement = opts.React?.createElement(
     opts.rootComponent as any,
     appInfo,
   );
 
   let elementToRender = rootComponentElement;
 
   if (opts.errorBoundary) {
-    elementToRender = opts.React.createElement(
+    elementToRender = opts.React?.createElement(
       createErrorBoundary(opts) as any,
       appInfo,
       elementToRender,
@@ -220,7 +226,7 @@ function createErrorBoundary(opts: Options) {
   // to avoid bloat
   function GarfishSubAppReactErrorBoundary(this: any, appInfo: PropsInfo) {
     // super
-    opts.React.Component.apply(this, arguments);
+    opts.React?.Component.apply(this, arguments);
 
     this.state = {
       caughtError: null,
@@ -232,15 +238,14 @@ function createErrorBoundary(opts: Options) {
     ).displayName = `ReactBridgeReactErrorBoundary(${appInfo.appName})`;
   }
 
-  GarfishSubAppReactErrorBoundary.prototype = Object.create(
-    opts.React.Component.prototype,
-  );
+  GarfishSubAppReactErrorBoundary.prototype =
+    opts.React && Object.create(opts.React.Component.prototype);
 
   GarfishSubAppReactErrorBoundary.prototype.render = function () {
     if (this.state.caughtError) {
       const errorBoundary = opts.errorBoundary;
 
-      return errorBoundary(this.state.caughtError, this.props);
+      return errorBoundary && errorBoundary(this.state.caughtError, this.props);
     } else {
       return this.props.children;
     }

packages/bridge-react-v18/tsconfig.json

@@ -27,4 +27,7 @@ export type OptionalType<T extends new (...args: any) => any> = {
   handleInstance: (vueInstance: InstanceType<T>, opts: PropsInfo) => void;
 };
 
-export type UserOptions<T, U> = TypeComponent<U> & Partial<OptionalType<T>>;
+export type UserOptions<
+  T extends new (...args: any) => any,
+  U,
+> = TypeComponent<U> & Partial<OptionalType<T>>;

packages/bridge-vue-v2/src/types.d.ts

@@ -4,12 +4,12 @@ describe('test sandbox ', () => {
   it('dom sandbox', () => {
     const event = new Event('flag-event');
     const evn = new PatchEvent();
-    let flag1 = null;
+    let flag1: string | null = null;
     window.addEventListener('flag-event', () => (flag1 = 'flag1'));
 
     evn.activate();
 
-    let flag2 = null;
+    let flag2: string | null = null;
     window.addEventListener('flag-event', () => (flag2 = 'flag2'));
 
     evn.deactivate();

packages/browser-snapshot/__tests__/event.spec.ts

@@ -6,7 +6,11 @@ describe('test sandbox ', () => {
       <style>body{color: 'yellow';}</style>
     `;
 
-    const obj = {
+    const obj: {
+      name: string;
+      age: string;
+      some?: string;
+    } = {
       name: 'zhoushaw',
       age: '24',
       some: 'test delete',

packages/browser-snapshot/__tests__/sandbox.spec.ts

@@ -1,4 +1,5 @@
 import { PatchStyle } from '../src/patchers/style';
+import assert from 'assert';
 
 const createStyleComponentElementWithRecord = () => {
   const styleComponentElement = document.createElement('style');
@@ -45,6 +46,7 @@ describe('test sandbox ', () => {
     sty.activate();
     const styleComponentElement = createStyleComponentElementWithRecord();
 
+    assert(styleComponentElement.sheet);
     expectIncludeCssRules(styleComponentElement.sheet.cssRules);
 
     sty.deactivate();

packages/browser-snapshot/__tests__/style.spec.ts

@@ -82,7 +82,7 @@ export class Interceptor {
           for (let i = 0; i < cssRules.length; i++) {
             const cssRule = cssRules[i];
             // re-insert rules for styled-components element
-            val.sheet.insertRule(cssRule.cssText, val.sheet.cssRules.length);
+            val.sheet?.insertRule(cssRule.cssText, val.sheet?.cssRules.length);
           }
         }
       }
@@ -106,7 +106,11 @@ export class Interceptor {
       created = createdOrSnapshot;
     }
     created.arrDoms.reduce((prev, val) => {
-      if (val instanceof HTMLStyleElement && isStyledComponentsLike(val)) {
+      if (
+        val instanceof HTMLStyleElement &&
+        isStyledComponentsLike(val) &&
+        val?.sheet?.cssRules
+      ) {
         this.styledComponentCSSRulesMap.set(val, val.sheet.cssRules);
       }
       prev.removeChild(val);