make element='body' viable in solidjs

KingSora · Mar 27, 2024 · 074a27e · 074a27e
1 parent 4ade793
commit 074a27e
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 78 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -2,7 +2,7 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
 	"name": "Node.js & TypeScript",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:16-bullseye"
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:20-bullseye"
 	// "postCreateCommand": "npm i && npm run build:os"
 
 	// Features to add to the dev container. More info: https://containers.dev/features.

diff --git a/local/config/package.json b/local/config/package.json
@@ -8,7 +8,8 @@
     "./jest": "./src/jest.js",
     "./jest-babel": "./src/jest.babel.js",
     "./full-coverage": "./src/full-coverage.js",
-    "./vitest": "./src/vitest.mjs"
+    "./vitest": "./src/vitest.mjs",
+    "./vitest.new-jsdom.env": "./src/vitest.new-jsdom.env.mjs"
   },
   "version": "0.0.0"
 }
diff --git a/local/config/src/vitest.mjs b/local/config/src/vitest.mjs
@@ -13,6 +13,7 @@ export default defineConfig({
     include,
     coverage: {
       reportsDirectory: './.coverage/unit',
+      exclude: ['**/*.env.*'],
     },
     poolOptions: {
       threads: {

diff --git a/local/config/src/vitest.new-jsdom.env.mjs b/local/config/src/vitest.new-jsdom.env.mjs
@@ -0,0 +1,5 @@
+import { builtinEnvironments } from 'vitest/environments';
+export default {
+  name: String(performance.now()),
+  ...builtinEnvironments.jsdom,
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/overlayscrollbars-react/coverage/.tmp/coverage-0.json b/packages/overlayscrollbars-react/coverage/.tmp/coverage-0.json
diff --git a/packages/overlayscrollbars-react/coverage/.tmp/coverage-1.json b/packages/overlayscrollbars-react/coverage/.tmp/coverage-1.json
diff --git a/packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx
@@ -7,26 +7,6 @@ import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
 import type { RefObject } from 'react';
 import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 
-const getComputedStyleOriginal = window.getComputedStyle;
-vi.stubGlobal(
-  'getComputedStyle',
-  vi.fn(function (...args: Parameters<typeof getComputedStyleOriginal>) {
-    const result: CSSStyleDeclaration = getComputedStyleOriginal.apply(
-      // @ts-ignore
-      this,
-      args
-    );
-    const getPropertyValueOriginal = result.getPropertyValue;
-    result.getPropertyValue = function (prop: string) {
-      if (prop === 'scrollbar-width' || prop === 'scrollbarWidth') {
-        return 'none';
-      }
-      return getPropertyValueOriginal.call(this, prop);
-    };
-    return result;
-  })
-);
-
 vi.useFakeTimers({
   toFake: [
     'requestAnimationFrame',
@@ -329,34 +309,4 @@ describe('OverlayScrollbarsComponent', () => {
     expect(osInstance()).toBeDefined();
     expect(OverlayScrollbars.valid(osInstance())).toBe(false);
   });
-
-  test('body', () => {
-    const htmlElement = document.documentElement;
-    const html = htmlElement.innerHTML;
-    const body = document.body;
-
-    const { container, unmount } = render(
-      <OverlayScrollbarsComponent element="body">
-        <section id="body" />
-      </OverlayScrollbarsComponent>,
-      {
-        baseElement: htmlElement,
-        container: htmlElement,
-      }
-    );
-
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveAttribute('data-overlayscrollbars');
-    expect(container.tagName).toBe('HTML');
-    expect(container.firstElementChild!.tagName).toBe('BODY');
-    expect(container.firstElementChild).toHaveAttribute('data-overlayscrollbars-initialize');
-    expect(container.firstElementChild).not.toBeEmptyDOMElement();
-    expect(container.firstElementChild!.firstElementChild!.tagName).toBe('SECTION');
-    expect(container.firstElementChild!.firstElementChild).toHaveAttribute('id', 'body');
-
-    unmount();
-
-    htmlElement.innerHTML = html;
-    window.document.body = body;
-  });
 });
diff --git a/packages/overlayscrollbars-react/test/body/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-react/test/body/OverlayScrollbarsComponent.test.tsx
@@ -0,0 +1,61 @@
+import { describe, test, afterEach, expect, vi } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
+
+const getComputedStyleOriginal = window.getComputedStyle;
+vi.stubGlobal(
+  'getComputedStyle',
+  vi.fn(function (...args: Parameters<typeof getComputedStyleOriginal>) {
+    const result: CSSStyleDeclaration = getComputedStyleOriginal.apply(
+      // @ts-ignore
+      this,
+      args
+    );
+    const getPropertyValueOriginal = result.getPropertyValue;
+    result.getPropertyValue = function (prop: string) {
+      if (prop === 'scrollbar-width' || prop === 'scrollbarWidth') {
+        return 'none';
+      }
+      return getPropertyValueOriginal.call(this, prop);
+    };
+    return result;
+  })
+);
+
+vi.useFakeTimers({
+  toFake: [
+    'requestAnimationFrame',
+    'cancelAnimationFrame',
+    'requestIdleCallback',
+    'cancelIdleCallback',
+  ],
+});
+
+describe('OverlayScrollbarsComponent', () => {
+  afterEach(() => cleanup());
+
+  test('body', () => {
+    const htmlElement = document.documentElement;
+    const { unmount } = render(
+      <OverlayScrollbarsComponent element="body">
+        <section id="body" />
+      </OverlayScrollbarsComponent>,
+      {
+        baseElement: htmlElement,
+        container: htmlElement,
+        wrapper: ({ children }) => {
+          document.body.remove();
+          return children;
+        },
+      }
+    );
+
+    expect(htmlElement).toHaveAttribute('data-overlayscrollbars');
+    expect(htmlElement.querySelector('body')).toHaveAttribute('data-overlayscrollbars-initialize');
+    expect(htmlElement.querySelector('body')).not.toBeEmptyDOMElement();
+    expect(htmlElement.querySelector('body')?.firstElementChild!.tagName).toBe('SECTION');
+    expect(htmlElement.querySelector('body')?.firstElementChild).toHaveAttribute('id', 'body');
+
+    unmount();
+  });
+});
diff --git a/packages/overlayscrollbars-react/vitest.config.mjs b/packages/overlayscrollbars-react/vitest.config.mjs
@@ -1,5 +1,14 @@
+import { fileURLToPath } from 'url';
 import { mergeConfig } from 'vite';
 import vitestConfig from '@~local/config/vitest';
 import viteConfig from './vite.config.mjs';
 
-export default mergeConfig(viteConfig, vitestConfig);
+export default mergeConfig(viteConfig, {
+  ...vitestConfig,
+  test: {
+    ...vitestConfig.test,
+    environmentMatchGlobs: [
+      ['test/body/*', fileURLToPath(import.meta.resolve('@~local/config/vitest.new-jsdom.env'))],
+    ],
+  },
+});
diff --git a/packages/overlayscrollbars-solid/src/OverlayScrollbarsComponent.tsx b/packages/overlayscrollbars-solid/src/OverlayScrollbarsComponent.tsx
@@ -50,22 +50,37 @@ export const OverlayScrollbarsComponent = <T extends ValidComponent = 'div'>(
   const [initialize, instance] = createOverlayScrollbars(finalProps);
 
   createEffect(() => {
-    const currElement = elementRef();
-    const currChildrenElement = childrenRef();
+    const target = elementRef();
 
-    if (currElement && currChildrenElement) {
+    /* c8 ignore start */
+    if (!target) {
+      return;
+    }
+    /* c8 ignore end */
+
+    if (finalProps.element === 'body') {
       initialize({
-        target: currElement,
-        elements: {
-          viewport: currChildrenElement,
-          content: currChildrenElement,
+        target,
+        cancel: {
+          body: null,
         },
       });
-
-      onCleanup(() => {
-        instance()?.destroy();
-      });
+    } else {
+      const contentsElement = childrenRef();
+      if (contentsElement) {
+        initialize({
+          target,
+          elements: {
+            viewport: contentsElement,
+            content: contentsElement,
+          },
+        });
+      }
     }
+
+    onCleanup(() => {
+      instance()?.destroy();
+    });
   });
 
   createRenderEffect(() => {
@@ -90,9 +105,13 @@ export const OverlayScrollbarsComponent = <T extends ValidComponent = 'div'>(
       ref={setElementRef}
       {...other}
     >
-      <div data-overlayscrollbars-contents="" ref={setChildrenRef}>
-        {children(() => finalProps.children)()}
-      </div>
+      {finalProps.element === 'body' ? (
+        children(() => finalProps.children)()
+      ) : (
+        <div data-overlayscrollbars-contents="" ref={setChildrenRef}>
+          {children(() => finalProps.children)()}
+        </div>
+      )}
     </Dynamic>
   );
 };
diff --git a/packages/overlayscrollbars-solid/test/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-solid/test/OverlayScrollbarsComponent.test.tsx
@@ -70,9 +70,6 @@ const createTestComponent =
     );
   };
 
-/**
- * rerender doesn't exist... so I am faking it with custom event...
- */
 describe('OverlayScrollbarsComponent', () => {
   afterEach(() => cleanup());
 

diff --git a/packages/overlayscrollbars-solid/test/body/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-solid/test/body/OverlayScrollbarsComponent.test.tsx
@@ -0,0 +1,55 @@
+import { describe, test, afterEach, expect, vi } from 'vitest';
+import { render, cleanup } from 'solid-testing-library';
+import { OverlayScrollbarsComponent } from '~/overlayscrollbars-solid';
+
+const getComputedStyleOriginal = window.getComputedStyle;
+vi.stubGlobal(
+  'getComputedStyle',
+  vi.fn(function (...args: Parameters<typeof getComputedStyleOriginal>) {
+    const result: CSSStyleDeclaration = getComputedStyleOriginal.apply(
+      // @ts-ignore
+      this,
+      args
+    );
+    const getPropertyValueOriginal = result.getPropertyValue;
+    result.getPropertyValue = function (prop: string) {
+      if (prop === 'scrollbar-width' || prop === 'scrollbarWidth') {
+        return 'none';
+      }
+      return getPropertyValueOriginal.call(this, prop);
+    };
+    return result;
+  })
+);
+
+describe('OverlayScrollbarsComponent', () => {
+  afterEach(() => cleanup());
+
+  test('body', async () => {
+    const htmlElement = document.documentElement;
+
+    const { unmount } = render(
+      () => (
+        <OverlayScrollbarsComponent element="body">
+          <section id="body" />
+        </OverlayScrollbarsComponent>
+      ),
+      {
+        baseElement: htmlElement,
+        container: htmlElement,
+        wrapper: ({ children }) => {
+          document.body.remove();
+          return children;
+        },
+      }
+    );
+
+    expect(htmlElement).toHaveAttribute('data-overlayscrollbars');
+    expect(htmlElement.querySelector('body')).toHaveAttribute('data-overlayscrollbars-initialize');
+    expect(htmlElement.querySelector('body')).not.toBeEmptyDOMElement();
+    expect(htmlElement.querySelector('body')?.firstElementChild!.tagName).toBe('SECTION');
+    expect(htmlElement.querySelector('body')?.firstElementChild).toHaveAttribute('id', 'body');
+
+    unmount();
+  });
+});
diff --git a/packages/overlayscrollbars-solid/vitest.config.mjs b/packages/overlayscrollbars-solid/vitest.config.mjs
@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'url';
 import { mergeConfig } from 'vite';
 import vitestConfig from '@~local/config/vitest';
 import viteConfig from './vite.config.mjs';
@@ -17,6 +18,9 @@ export default mergeConfig(
           inline: [/solid-testing-library/],
         },
       },
+      environmentMatchGlobs: [
+        ['test/body/*', fileURLToPath(import.meta.resolve('@~local/config/vitest.new-jsdom.env'))],
+      ],
     },
   }
 );