fix(types): complete used interface of JSX fallback (#16)

* ci(types): run type tests without react types as well

* fix(types): fill in detailed fake interfaces for vdom

* Apply suggestions from code review

Co-authored-by: Sarah Dayan <[email protected]>

* alias preact too (but don't run *preact tests)

* fix: element itself shouldn't be generic

* undo change

* build deps too lol

Co-authored-by: Sarah Dayan <[email protected]>

Author: Haroenv

Diff for: .circleci/config.yml

@@ -107,6 +107,37 @@ jobs:
       - run:
           name: Type checking
           command: yarn run test:types
+  test_types_no_jsx_implementation:
+    <<: *defaults
+    steps:
+      - checkout
+      - run: *install_yarn_version
+      - restore_cache: *restore_yarn_cache
+      - run:
+          name: Remove React types
+          command: |
+            # This simulates @types/react and preact not being installed
+            node -e "
+              fs.writeFileSync(
+                './package.json',
+                JSON.stringify(
+                  Object.assign(require('./package.json'), {
+                    resolutions: { 
+                      '@types/react': 'file:./scripts/empty-package',
+                      'preact': 'file:./scripts/empty-package',
+                    },
+                  }),
+                  null,
+                  2
+                )
+              );
+            "
+            # not running the scripts, as they should not run for *-react
+            yarn install --ignore-scripts
+      - run:
+          name: Type checking
+          # Using build:types instead of test:types, as it's easier to run only the VDOM types
+          command: yarn build:types --scope '@algolia/*-{shared,vdom}'
   test_unit:
     <<: *defaults
     steps:
@@ -152,10 +183,11 @@ workflows:
   ci:
     jobs:
       - build
+      - test_types
+      - test_types_no_jsx_implementation
       - test_lint:
           requires:
             - build
-      - test_types
       - test_unit:
           requires:
             - build

Diff for: packages/highlight-vdom/src/Highlight.tsx

@@ -7,6 +7,23 @@ import {
   Renderer,
 } from '@algolia/ui-components-shared';
 
+// Basic types to allow this file to compile without a JSX implementation.
+// This is a minimal subset of the actual types from the `JSX` namespace.
+interface IntrinsicElement extends JSX.IntrinsicAttributes {
+  children?: ComponentChildren;
+  className?: string;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      span: IntrinsicElement;
+      mark: IntrinsicElement;
+    }
+  }
+}
+
 type HighlightPartProps = {
   children: ComponentChildren;
   classNames: Partial<HighlightClassNames>;

Diff for: packages/horizontal-slider-vdom/src/HorizontalSlider.tsx

@@ -1,5 +1,5 @@
 /** @jsx createElement */
-import { cx, Renderer } from '@algolia/ui-components-shared';
+import { ComponentChildren, cx, Renderer } from '@algolia/ui-components-shared';
 
 import {
   FrameworkProps,
@@ -8,6 +8,45 @@ import {
   RecordWithObjectID,
 } from './types';
 
+// basic types to allow this file to compile without @types/react or preact
+// this is a minimal subset of the actual types, coming from the JSX namespace
+interface IntrinsicElement extends JSX.IntrinsicAttributes {
+  children?: ComponentChildren;
+
+  className?: string;
+  id?: string;
+  tabIndex?: string | number;
+  title?: string;
+
+  onClick?: (event: MouseEvent) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
+  onScroll?: (event: MouseEvent) => void;
+}
+
+interface IntrinsicSvgElement extends IntrinsicElement {
+  width?: string;
+  height?: string;
+  viewBox?: string;
+  fill?: string;
+  fillRule?: string;
+  clipRule?: string;
+  d?: string;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      div: IntrinsicElement;
+      button: IntrinsicElement;
+      ol: IntrinsicElement;
+      li: IntrinsicElement;
+      svg: IntrinsicSvgElement;
+      path: IntrinsicSvgElement;
+    }
+  }
+}
+
 let lastHorizontalSliderId = 0;
 
 export function generateHorizontalSliderId() {

Diff for: packages/shared/src/Renderer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
 // Prevents type errors when using without a JSX implementation
 // (e.g., Angular InstantSearch via InstantSearch.js)
 // In the future, this may be fixable by accepting a JSX generic to every type
@@ -7,9 +8,16 @@
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface Element {}
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicAttributes {
+      key?: string | number | null;
+      ref?: unknown;
+    }
+
+    interface ElementChildrenAttribute {
+      children: ComponentChildren;
+    }
+
+    interface Element extends VNode {}
     interface IntrinsicElements {}
   }
 }
@@ -59,7 +67,10 @@ export type ComponentProps<
 
 export type VNode<TProps = any> = {
   type: any;
-  props: TProps & { children: ComponentChildren; key?: any };
+  props: TProps & {
+    children: ComponentChildren;
+    key?: string | number | null;
+  };
 };
 
 export type Renderer = {

Diff for: scripts/empty-package/index.d.ts

@@ -0,0 +1 @@
+// This file allows `empty-package` to be an `@types/` package

Diff for: scripts/empty-package/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "empty-package",
+  "version": "0.0.0",
+  "description": "An empty package used in tests as an alias for @types/"
+}