Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add custom pageview property support #16

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

dgrebb
Copy link
Collaborator

@dgrebb dgrebb commented Jan 7, 2024

Summary

This adds support for custom properties in pageview events. Plausible sets limits on number and length, and this includes type guards and warnings in dev mode.

The history was a bit messy, so I've recreated it from current upstream develop. Downstream develop is up to date, if you want to pull that in.

Details

The guards feel a bit too much — I'm curious if there is a more efficient, concise, Typescriptier way to do this.

  • isCustomPropsLimit: warns if passing more than 30 properties
  • isCustomPropEntryLimit: warns if a custom prop entry is more than limit characters (300 and 2000 for key/value respectively)
  • handleEntry: warns if a property value is a DOM interface

Added some documentation for the component prop:

Pasted image 20240106193253

I'd be happy to dial the guards back and use some nested ternaries instead, but I think there may be some value in handleEntry, a helper in src/lib/guards.ts.

It checks if any DOM instances have been passed as a property value, like a DOMTokenList, HTMLInputElement, etc.

I can also add a new route and tests for coverage. Let me know what you think!

- adds `pageview-props` script src segment
- adds various types and guards for Plausible-enforced property limits
- defends against `svelte-preprocess` [issue with shorthand `{src}` attribute](sveltejs/svelte-preprocess#604) (accuser#12)
- updates README
- updates configuration/npm scripts for prettier@3
@dgrebb dgrebb requested a review from accuser January 7, 2024 02:14
@dgrebb dgrebb added the enhancement New feature or request label Jan 7, 2024
$: api = `${apiHost}/api/event`;
$: src = [
$: plausibleSrc = [
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data-api={api}
data-domain={domain.toString()}
defer
src={plausibleSrc}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@till
Copy link

till commented Aug 20, 2024

@dgrebb any chance you will continue on this?

@dgrebb
Copy link
Collaborator Author

dgrebb commented Aug 21, 2024

@till absolutely - did you have any feedback on he guards I added? I have a few more moths of TS under my belt and will take a gander.

With Svelte 5 on the way, I may change approach as well. I'll take a look this week.

src/lib/guards.ts Show resolved Hide resolved
src/lib/PlausibleAnalytics.svelte Outdated Show resolved Hide resolved
.prettierrc Show resolved Hide resolved
package.json Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants