Merge branch 'master' into fix/integration-test-opting-out

PostHog · Jan 20, 2024 · 3e7bc5f · 3e7bc5f
2 parents 92cce91 + 50435d8
commit 3e7bc5f
Show file tree

Hide file tree

Showing 18 changed files with 526 additions and 227 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,12 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+    "presets": ["@babel/env", ["@babel/typescript", { "jsxPragma": "h" }]],
+    "plugins": [
+        [
+            "@babel/transform-react-jsx",
+            {
+                "pragma": "Preact.h",
+                "pragmaFrag": "Preact.Fragment"
+            }
+        ]
+    ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,8 +15,6 @@ const rules = {
 const extend = [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
     'prettier',
     'plugin:compat/recommended',
     'plugin:posthog-js/all',
@@ -72,6 +70,10 @@ module.exports = {
                 'no-restricted-globals': 'off',
             },
         },
+        {
+            files: 'react/src/**/',
+            extends: [...extend, 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+        },
         {
             files: 'eslint-rules/**/*',
             extends: ['eslint:recommended', 'prettier'],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## 1.100.0 - 2024-01-15
+
+- Enable scroll stats by default (#962)
+
+## 1.99.0 - 2024-01-15
+
+- feat: Support custom scroll selector (#961)
+
+## 1.98.2 - 2024-01-11
+
+- fix: Don't allow us.posthog.com to be used (#957)
+
 ## 1.98.1 - 2024-01-11
 
 - fix: set the session id as soon as it changes (#956)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.98.1",
+    "version": "1.100.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "[email protected]",
@@ -31,15 +31,18 @@
         "react/package.json"
     ],
     "dependencies": {
-        "fflate": "^0.4.1"
+        "fflate": "^0.4.1",
+        "preact": "^10.19.3"
     },
     "devDependencies": {
         "@babel/core": "7.18.9",
+        "@babel/plugin-syntax-decorators": "^7.23.3",
+        "@babel/plugin-transform-react-jsx": "^7.23.4",
         "@babel/preset-env": "7.18.9",
         "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-json": "^4.1.0",
-        "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^8.3.3",
         "@rrweb/types": "^2.0.0-alpha.11",
@@ -50,12 +53,12 @@
         "@types/react-dom": "^18.0.10",
         "@types/sinon": "^17.0.1",
         "@types/uuid": "^9.0.1",
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
-        "@typescript-eslint/parser": "^6.4.0",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/parser": "^6.19.0",
         "babel-eslint": "10.1.0",
         "babel-jest": "^26.6.3",
         "cypress": "13.6.3",
-        "eslint": "8.20.0",
+        "eslint": "8.56.0",
         "eslint-config-posthog-js": "link:./eslint-rules",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-compat": "^4.1.4",
@@ -77,7 +80,7 @@
         "node-fetch": "^2.6.1",
         "posthog-js": "link:.",
         "prettier": "^2.7.1",
-        "rollup": "^2.77.0",
+        "rollup": "^2.78.0",
         "rollup-plugin-dts": "^4.2.2",
         "rollup-plugin-visualizer": "^5.9.0",
         "rrweb": "2.0.0-alpha.11",
@@ -87,7 +90,7 @@
         "testcafe": "1.19.0",
         "testcafe-browser-provider-browserstack": "1.14.0",
         "tslib": "^2.4.0",
-        "typescript": "^4.7.4",
+        "typescript": "^4.9.0",
         "yargs": "^17.7.2"
     },
     "lint-staged": {

diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
@@ -15,6 +15,8 @@ if (typeof window !== 'undefined') {
         },
         debug: true,
         __preview_send_client_session_params: true,
+        __preview_measure_pageview_stats: true,
+        scroll_root_selector: ['#scroll_element', 'html'],
     })
     ;(window as any).posthog = posthog
 }

diff --git a/playground/nextjs/pages/_document.tsx b/playground/nextjs/pages/_document.tsx
@@ -1,13 +1,14 @@
 import { Html, Head, Main, NextScript } from 'next/document'
+import React from 'react'
 
 export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
+    return (
+        <Html lang="en">
+            <Head />
+            <body>
+                <Main />
+                <NextScript />
+            </body>
+        </Html>
+    )
 }
diff --git a/playground/nextjs/pages/index.tsx b/playground/nextjs/pages/index.tsx
@@ -59,6 +59,7 @@ export default function Home() {
                     <Link href="/iframe">Iframe</Link>
                     <Link href="/media">Media</Link>
                     <Link href="/long">Long</Link>
+                    <Link href="/longmain">Long Main</Link>
                 </div>
 
                 <p>Feature flag response: {JSON.stringify(result)}</p>

diff --git a/playground/nextjs/pages/longmain.tsx b/playground/nextjs/pages/longmain.tsx
@@ -0,0 +1,70 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import React, { useEffect } from 'react'
+
+export default function Home() {
+    useEffect(() => {
+        const html = document.querySelector('html')
+        const body = document.querySelector('body')
+        const nextRoot = document.querySelector<HTMLDivElement>('div#__next')
+        if (!html || !body || !nextRoot) return
+        html.style.height = '100%'
+        html.style.overflow = 'hidden'
+        body.style.height = '100%'
+        nextRoot.style.height = '100%'
+        return () => {
+            html.style.height = ''
+            html.style.overflow = ''
+            body.style.height = ''
+            nextRoot.style.height = ''
+        }
+    }, [])
+
+    return (
+        <>
+            <Head>
+                <title>PostHog</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
+            <main
+                id="scroll_element"
+                style={{
+                    height: '100%',
+                    overflow: 'scroll',
+                    margin: 0,
+                    padding: 0,
+                }}
+            >
+                <div
+                    style={{
+                        height: '4000px',
+                        overflow: 'hidden',
+                    }}
+                >
+                    <h1>A long page</h1>
+                    <p>
+                        The window itself does not scroll, the <code>main</code> element does. The content is exactly
+                        4000px tall.
+                    </p>
+                    <div className="buttons">
+                        <Link href="/">Home</Link>
+                    </div>
+
+                    {Array.from({ length: 100 }, (_, i) => (
+                        <p key={i}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    ))}
+
+                    <div className="buttons">
+                        <Link href="/">Home</Link>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}
diff --git a/playground/nextjs/styles/globals.css b/playground/nextjs/styles/globals.css
@@ -5,6 +5,10 @@ main {
     font-family: helvetica, arial, sans-serif;
 }
 
+html, body {
+    margin: 0
+}
+
 .buttons {
     display: flex;
     gap: 0.5rem;

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -3575,9 +3575,13 @@ posix-character-classes@^0.1.0:
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
 "posthog-js@link:..":
-  version "1.83.1"
-  dependencies:
-    fflate "^0.4.1"
+  version "0.0.0"
+  uid ""
+
+preact@^10.19.3:
+  version "10.19.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899"
+  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
 
 prelude-ls@~1.1.2:
   version "1.1.2"

diff --git a/rollup.config.js b/rollup.config.js
@@ -7,20 +7,20 @@ import pkg from './package.json'
 import terser from '@rollup/plugin-terser'
 import { visualizer } from 'rollup-plugin-visualizer'
 
-const extensions = ['.js', '.jsx', '.ts', '.tsx']
 const plugins = [
     json(),
-    resolve({ browser: true, modulesOnly: true }),
+    resolve({ browser: true }),
     typescript({ sourceMap: true }),
     babel({
-        extensions,
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
         babelHelpers: 'bundled',
         presets: ['@babel/preset-env'],
     }),
     terser({ toplevel: true }),
     visualizer(),
 ]
 
+/** @type {import('rollup').RollupOptions[]} */
 export default [
     {
         input: 'src/loader-recorder.ts',
@@ -54,6 +54,9 @@ export default [
                 sourcemap: true,
                 format: 'iife',
                 name: 'posthog',
+                globals: {
+                    preact: 'preact',
+                },
             },
         ],
         plugins: [...plugins],

diff --git a/src/__tests__/page-view.test.ts b/src/__tests__/page-view.test.ts
@@ -1,4 +1,5 @@
 import { PageViewManager } from '../page-view'
+import { PostHog } from '../posthog-core'
 
 const mockWindowGetter = jest.fn()
 jest.mock('../utils/globals', () => ({
@@ -10,6 +11,9 @@ jest.mock('../utils/globals', () => ({
 
 describe('PageView ID manager', () => {
     describe('doPageView', () => {
+        const instance: PostHog = {
+            config: {},
+        } as any
         beforeEach(() => {
             mockWindowGetter.mockReturnValue({
                 location: {
@@ -41,7 +45,7 @@ describe('PageView ID manager', () => {
                 },
             })
 
-            const pageViewIdManager = new PageViewManager()
+            const pageViewIdManager = new PageViewManager(instance)
             pageViewIdManager.doPageView()
 
             // force the manager to update the scroll data by calling an internal method
@@ -72,7 +76,7 @@ describe('PageView ID manager', () => {
                 },
             })
 
-            const pageViewIdManager = new PageViewManager()
+            const pageViewIdManager = new PageViewManager(instance)
             pageViewIdManager.doPageView()
 
             // force the manager to update the scroll data by calling an internal method
@@ -90,7 +94,7 @@ describe('PageView ID manager', () => {
         })
 
         it('can handle scroll updates before doPageView is called', () => {
-            const pageViewIdManager = new PageViewManager()
+            const pageViewIdManager = new PageViewManager(instance)
 
             pageViewIdManager._updateScrollData()
             const firstPageView = pageViewIdManager.doPageView()
@@ -101,7 +105,7 @@ describe('PageView ID manager', () => {
         })
 
         it('should include the pathname', () => {
-            const pageViewIdManager = new PageViewManager()
+            const pageViewIdManager = new PageViewManager(instance)
 
             const firstPageView = pageViewIdManager.doPageView()
             expect(firstPageView.$prev_pageview_pathname).toBeUndefined()

diff --git a/src/extensions/surveys.ts → src/extensions/surveys.tsx b/src/extensions/surveys.ts → src/extensions/surveys.tsx