refactor(surveys): Use Preact instead of vanilla JS (#963)

* set up preact wip * Fix Preact bundling * Fix imports * add preset env types back in * remove preact testing code --------- Co-authored-by: Li Yi <[email protected]>
PostHog · Jan 17, 2024 · 50435d8 · 50435d8
1 parent 7eb05e9
commit 50435d8
Show file tree

Hide file tree

Showing 8 changed files with 366 additions and 201 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/package.json b/package.json
@@ -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.5.1",
-        "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/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/extensions/surveys.ts → src/extensions/surveys.tsx b/src/extensions/surveys.ts → src/extensions/surveys.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,7 +20,10 @@
         "inlineSources": true,
         "resolveJsonModule": true,
         "downlevelIteration": true,
-        "declaration": true
+        "declaration": true,
+        "jsx": "preserve",
+        "jsxFactory": "h",
+        "jsxFragmentFactory": "Fragment"
     },
-    "include": ["src/*.ts"]
+    "include": ["src/*.ts*"]
 }