Frontend tech debt

[mariusandra]

Just making a list...

• [ ] remove Provider tags
• [ ] upgrade to react 18
• [X] upgrade to node 18 (done via https://github.com/PostHog/posthog/pull/12650).
• [x] upgrade all logic to kea 3 format via the codemod
• [x] upgrade to pnpm (maybe? looks promising to me) or yarn 3
• [ ] start using workspaces
• [ ] upgrade Storybook
• [ ] use ESBuild for Storybook
• [ ] stop using Webpack completely
• [x] fix videos in cypress
• [ ] move lemon ui to their own package folder
• [x] refactor .LemonLinkButton class out in favor of Lemon UI components

Longer term goals

• [ ] get rid of custom css and move to components and util classes
• [ ] get rid of antd from the project, abstract via lemon components
• [ ] get rid of antd from lemon-ui's dependency tree

Feel free to add things

• [ ] upgrade to webpack v5 (until fully removing webpack)
• [ ] update monaco-editor - at least 0.25 is required to satisfy peer requirements for @monaco-editor/react
• [x] fix Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
• [ ] migrate to Chart.js v4
• [ ] typescript to v4.9.4

[kappa90]

@mariusandra I can help with the migration to Vite, would make everything insanely faster.

It is now also supported in Storybook: https://storybook.js.org/blog/storybook-for-vite/

[mariusandra]

@kappa90 feel free if you feel like storybook is slowing you down. However know that you'll be in for a few annoyances due to our setup:

• there might be issues regarding antd, import paths, less
• the way the toolbar shares styles and renders itself inside a shadow root is very bespoke
• not every tool is happy with the way we alias paths

We (well, mostly me) built a dev server and wrapper around esbuild (see frontend/*.mjs), which was kind of straightforward, but our custom setup required some workarounds. Feel free to poke around with that.

I wouldn't mind if we'd eventually be on one platform and one config system, be it vite or something else. As long as development reloads stay about as fast as they are, I'm happy to change anything here :).

[mariusandra]

Basically, go for it if you want, but know it won't likely be a quick thing 😅

[thmsobrmlr]

• [x] upgrade to webpack v5 (until fully removing webpack)
• [x] update monaco-editor - at least 0.25 is required to satisfy peer requirements for @monaco-editor/react
• [x] fix Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

[mariusandra]

Regarding monaco:

• I've noticed that we load it from a CDN, even though it should also be bundled in. We should make sure that's not happening
• On some pages we use a white Monaco editor (all new query stuff), on some we use a dark skin (app/plugin source editor). What would happen if we used both? What if you go from one to the other?
• Do we fully reset code completion when using a different editor? Should we? E.g. does the "plugin json" editor expect the data exploration query schema after you loaded the data exploration editor first?

[guidoiaquinti]

Adding a note related to the Node.js 18 upgrade: we had to add the openssl-legacy-provider option in order to make things working. Once some dependency tech debt will be paid, we should remove that flag.

[thmsobrmlr]

Adding migration to Chart.js v4: https://www.chartjs.org/docs/latest/migration/v4-migration.html

[Arun-chaitanya]

@thmsobrmlr @mariusandra @Twixes I was trying to convert the front end to Vite. I was able to convert many things compatible with Vite. But I am facing one issue one it comes to userLogic even though I haven't kept it the same as in the current repo. I am getting the following error. I would be grateful if some body could take a look at this. Vite Repo Link: https://github.com/Arun-chaitanya/posthog-vite To start the vite server: npm run dev

[mariusandra]

Hey, a hunch tells me that if you change these lines:

    connect({
        values: [preflightLogic, ['preflight']],
    }),

to these:

    connect(() => ({
        values: [preflightLogic, ['preflight']],
    })),

It'll work. Something about the load order of the files in vite vs esbuild being different likely means userLogic and preflightLogic end up imported in a different order. Moving the connect call's props to a inline function makes kea evaluate the reference to preflightLogic at runtime, not at script load time. It'll likely be resolved by then.

[Arun-chaitanya]

@mariusandra got it. I will try this and keep you guys in the loop about the progress. Thanks :)

[Arun-chaitanya]

@mariusandra @thmsobrmlr I am successfully able to replace esbuild with vite Successfully achieved tasks are:

1. No typescript errors
2. Hot reload in the dev environment with Vite
3. Prod build with Vite.

However, I can see in webpack.config.js that we are building index.html as well as layout.html. As per my understanding, index.html is the entry file for the app.posthog.com, But I am not able to understand what is layout.html about. Can you please explain a brief about layout.html, what is its role and functionality?

That being said you can track my progress at https://github.com/Arun-chaitanya/posthog-vite

[mariusandra]

Hey @Arun-chaitanya , that file is used for most regular python/django templates.

[daibhin]

I didn't realise we had an issue tracking our frontend improvements. I've been doing a lot in the background to get React 18 over the line:

• [x] Upgrade Weback to v5 - https://github.com/PostHog/posthog/pull/16648
• [x] Upgrade Webpack plugins to support v5 - https://github.com/PostHog/posthog/pull/16892
• [x] Upgrade react-virtualized to support React 18 - https://github.com/PostHog/posthog/pull/16890
• [x] Upgrade react-resizeable to support React 18 - https://github.com/PostHog/posthog/pull/16891
• [x] Remove react-input-autosize because it does not support React 18 - https://github.com/PostHog/posthog/pull/16894
• [x] Replace react-json-view with a fork that supports React 18 - https://github.com/PostHog/posthog/pull/17713
• [x] Replace unmaintained package react-textfit because it does not support React 18 with an in house implementation - https://github.com/PostHog/posthog/pull/17720
• [x] Remove react-sortable-hoc with dnd-sortable - https://github.com/PostHog/posthog/pull/17711

[daibhin]

Also big props to @mariusandra for the massive help upgrading Storybook to v7 in https://github.com/PostHog/posthog/pull/17078 which was required by React 18

[thmsobrmlr]

Hey @Arun-chaitanya, might be best to move this to a separate issue, as it's a bit off topic here. Nevertheless, how are you running Docker on the M1? Do you use Docker Desktop / OrbStack / something else? What do the logs for the container say= I could imagine that this is caused by a separate Postgres instance running via Postgres.app, Homebrew, or something else.

Edit: Maybe check the output of lsof -i tcp:5432.

[arunfancraze]

@thmsobrmlr deleted here and mentioned it in https://github.com/PostHog/posthog/issues/18561

[Twixes]

I think we've done enough of this, that we probably will only the rest when the need becomes strong it. (There are also some edge cases, e.g. Storybook requires as to use either Webpack or Vite for builds anyway, so we won't be moving to 100% ESBuild. And Ant removal is progressing in between other things.)