refactor: improve benchmark randomly between v5 and v6 order

Author: danielbarion

benchmarks/run-benchmark.mjs

@@ -27,7 +27,7 @@ const counts = `${args.counts ?? '50,100,500,2000,5000,10000,25000'}`
 const timeoutMs = Number(args.timeoutMs ?? 1200)
 const repeats = Number(args.repeats ?? 5)
 const warmups = Number(args.warmups ?? 1)
-const executablePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+const executablePath = args.executablePath ?? null
 const workerId = args.worker ? String(args.worker) : null
 const runLabel = args.label ? String(args.label) : null
 const cacheDir = path.resolve(args.cacheDir ?? path.join(__dirname, '.cache'))
@@ -160,11 +160,15 @@ async function main() {
   await ensureFixtureBundle()
   logProgress('Launching headless Chrome')
 
-  const browser = await chromium.launch({
-    executablePath,
+  const launchOptions = {
     headless: true,
     args: ['--enable-precise-memory-info', '--js-flags=--expose-gc'],
-  })
+  }
+  if (executablePath) {
+    launchOptions.executablePath = executablePath
+  }
+
+  const browser = await chromium.launch(launchOptions)
 
   try {
     const page = await browser.newPage()
@@ -224,10 +228,21 @@ async function main() {
       )
     }
 
-    const v5 = await runVersion('v5')
-    logProgress('Completed V5 run')
-    const v6 = await runVersion('v6')
-    logProgress('Completed V6 run')
+    const versions = ['v5', 'v6']
+    // Randomize execution order to avoid first-run bias
+    if (Math.random() < 0.5) {
+      versions.reverse()
+    }
+    logProgress(`Execution order: ${versions.join(' → ')}`)
+
+    const results = {}
+    for (const version of versions) {
+      results[version] = await runVersion(version)
+      logProgress(`Completed ${version.toUpperCase()} run`)
+    }
+
+    const v5 = results.v5
+    const v6 = results.v6
 
     const summary = counts.map((count) => {
       const v5Samples = v5.samplesByCount.filter((sample) => sample.count === count)

benchmarks/run-scaling-series.mjs

@@ -161,22 +161,26 @@ async function runTasksInParallel(tasks, totalWorkers) {
         `${workerLabel} starting pass ${task.runNumber}/${tasks.length} (${completedTasks}/${tasks.length} completed)`,
       )
 
-      await runCommand(
-        'node',
-        [
-          './benchmarks/run-benchmark.mjs',
-          '--worker',
-          String(workerNumber),
-          '--label',
-          task.label,
-          '--cacheDir',
-          cacheDir,
-          ...passthroughArgs,
-        ],
-        {
-          label: `${workerLabel} ${task.label}`,
-        },
-      )
+      try {
+        await runCommand(
+          'node',
+          [
+            './benchmarks/run-benchmark.mjs',
+            '--worker',
+            String(workerNumber),
+            '--label',
+            task.label,
+            '--cacheDir',
+            cacheDir,
+            ...passthroughArgs,
+          ],
+          {
+            label: `${workerLabel} ${task.label}`,
+          },
+        )
+      } catch (error) {
+        logSeries(`${workerLabel} pass ${task.runNumber} FAILED: ${error.message}`)
+      }
 
       completedTasks += 1
       const elapsedMs = Date.now() - taskStartedAt
@@ -201,9 +205,7 @@ async function main() {
   logSeries('Building Rollup production bundle')
   await runCommand('yarn', ['build'], { label: 'build' })
 
-  logSeries(
-    `Starting scaling series with ${runCount} run(s) across ${workerCount} worker(s)`,
-  )
+  logSeries(`Starting scaling series with ${runCount} run(s) across ${workerCount} worker(s)`)
 
   const tasks = buildRunTasks(runCount)
   await runTasksInParallel(tasks, workerCount)

docs/docs/examples/events.mdx

@@ -41,11 +41,11 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
   )
 }
 
-### Using `hover`
+### Hover (default)
 
 :::info
 
-This is the default event option, so it doesn't have to be manually set.
+Hover is the default behavior. No extra props are needed.
 
 :::
 
@@ -56,14 +56,13 @@ import { Tooltip } from 'react-tooltip';
 <Tooltip
   id="my-tooltip"
   content="Hello world!"
-  events={['hover']}
 />
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip">◕‿‿◕</TooltipAnchor>
-<Tooltip id="my-tooltip" content="Hello world!" events={['hover']} />
+<Tooltip id="my-tooltip" content="Hello world!" />
 
-### Using `click`
+### Click to open
 
 :::info
 
@@ -78,9 +77,9 @@ import { Tooltip } from 'react-tooltip';
 <Tooltip
   id="my-tooltip-click"
   content="Hello world!"
-  events={['click']}
+  openOnClick
 />
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip-click">◕‿‿◕</TooltipAnchor>
-<Tooltip id="my-tooltip-click" content="Hello world!" events={['click']} />
+<Tooltip id="my-tooltip-click" content="Hello world!" openOnClick />

docs/docs/examples/render.mdx

@@ -39,12 +39,11 @@ The `render` prop can be used to render the tooltip content dynamically based on
 The function signature is as follows:
 
 ```ts
-(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+(render: { content: ReactNode | null; activeAnchor: HTMLElement | null }) => ReactNode
 ```
 
-- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element
+- `content` is the tooltip content (from the `content` prop or the `data-tooltip-content` attribute on the anchor element)
 - `activeAnchor` is a ref to the anchor element currently active (or `null` if no element is active)
-- `ChildrenType` is essentially the same as `React.ReactNode`
 
 ```jsx
 import { Tooltip } from 'react-tooltip';

docs/docs/examples/styling.mdx

@@ -479,35 +479,18 @@ Check out more details about the [base](#base-styles) and [core](#core-styles) s
 
 :::danger
 
-This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead.
+Removed in v6. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead.
 
-:::
-
-You can prevent ReactTooltip from injecting styles into the page by using environment variables.
-
-| name                                | type      | required | default | values         | description                                                                                                                                                                                                                                   |
-| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no       | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.<br /><br /> We strongly recommend to keep the core styles being injected into the project unless you know what you are doing.              |
-| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no       | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.<br /><br /> Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. |
+The `REACT_TOOLTIP_DISABLE_CORE_STYLES` and `REACT_TOOLTIP_DISABLE_BASE_STYLES` environment variables are no longer supported.
 
+:::
 
 #### `removeStyle()` function
 
 :::danger
 
-This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead.
-
-:::
+Removed in v6. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead.
 
-You can also use the `removeStyle()` function to remove injected styles from the page. It accepts the following parameters:
+The `removeStyle()` function is no longer exported.
 
-| name | type   | required | default | values        | description                                                                                                                                |
-| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| type | string | no       | `base`  | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value |
-
-```jsx
-import { removeStyle } from 'react-tooltip'
-
-removeStyle() // removes the injected base style of ReactTooltip
-removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip
-```
+:::