From d2d62064df14c9498598a535f9324db13d531b80 Mon Sep 17 00:00:00 2001 From: "karlo.smid" Date: Fri, 5 Jul 2024 14:31:58 +0200 Subject: [PATCH 1/5] live view events from master branch --- config/.env.dev | 2 +- lib/plausible_web/plugs/tracker.ex | 3 ++- tracker/compile.js | 2 +- tracker/src/plausible.js | 34 ++++++++++++++++++++++++++++ tracker/test/fixtures/live-view.html | 20 ++++++++++++++++ tracker/test/live-view.spec.js | 28 +++++++++++++++++++++++ 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 tracker/test/fixtures/live-view.html create mode 100644 tracker/test/live-view.spec.js diff --git a/config/.env.dev b/config/.env.dev index 92b8554569fd..056f3fcb0cf4 100644 --- a/config/.env.dev +++ b/config/.env.dev @@ -29,4 +29,4 @@ S3_ENDPOINT=http://localhost:10000 S3_EXPORTS_BUCKET=dev-exports S3_IMPORTS_BUCKET=dev-imports -VERIFICATION_ENABLED=true +VERIFICATION_ENABLED=false diff --git a/lib/plausible_web/plugs/tracker.ex b/lib/plausible_web/plugs/tracker.ex index cd9a89b4e65e..1f10407c76f9 100644 --- a/lib/plausible_web/plugs/tracker.ex +++ b/lib/plausible_web/plugs/tracker.ex @@ -12,7 +12,8 @@ defmodule PlausibleWeb.Tracker do "file-downloads", "pageview-props", "tagged-events", - "revenue" + "revenue", + "live-view" ] # Generates Power Set of all variants diff --git a/tracker/compile.js b/tracker/compile.js index 5896759cf131..1f2c90dc0ca0 100644 --- a/tracker/compile.js +++ b/tracker/compile.js @@ -26,7 +26,7 @@ function compilefile(input, output, templateVars = {}) { } } -const base_variants = ["hash", "outbound-links", "exclusions", "compat", "local", "manual", "file-downloads", "pageview-props", "tagged-events", "revenue"] +const base_variants = ["hash", "outbound-links", "exclusions", "compat", "local", "manual", "file-downloads", "pageview-props", "tagged-events", "revenue", "live-view"] const variants = [...g.clone.powerSet(base_variants)].filter(a => a.length > 0).map(a => a.sort()); compilefile(relPath('src/plausible.js'), relPath('../priv/tracker/js/plausible.js')) diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js index 7701c5d43d11..e8b67ca97d15 100644 --- a/tracker/src/plausible.js +++ b/tracker/src/plausible.js @@ -167,4 +167,38 @@ {{#if (any outbound_links file_downloads tagged_events)}} {{> customEvents}} {{/if}} + + {{#if live_view}} + window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href})) + + // https://hexdocs.pm/phoenix_live_view/bindings.html + const bindings = ['phx-click', 'phx-click-away', 'phx-change', 'phx-submit', 'phx-feedback-for', 'phx-feedback-group', + 'phx-disable-with', 'phx-trigger-action', 'phx-auto-recover', 'phx-blur', 'phx-focus', 'phx-window-blur', 'phx-window-focus', + 'phx-keydown', 'phx-keyup', 'phx-window-keydown', 'phx-window-keyup', 'phx-key', 'phx-viewport-top', 'phx-viewport-bottom', + 'phx-mounted', 'phx-update', 'phx-remove', 'phx-hook', 'phx-mounted', 'phx-disconnected', 'phx-connected', 'phx-debounce', + 'phx-throttle', 'phx-track-static']; + + const events = ["phx:page-loading-start", + "phx:page-loading-stop", + "track-uploads", + "phx:live-file:updated" + ].concat(bindings) + .concat(bindings.map(name => name.replace('phx-', 'phx:'))) + .concat(bindings.map(name => name.replace('phx-', '')).filter(name => name != 'submit')) + ; + events.map((name) => { + window.addEventListener(name, info => trigger('phx-event', {props: {event: name, detail: new URLSearchParams(info.detail || {}).toString()}})); + }); + + // form submit event + window.addEventListener("submit", e => trigger("js-submit", {props: {dom_id: e.target.id, ...Object.fromEntries(new FormData(e.target).entries())}})); + + //track socket activity + if (window.liveSocket) + window.liveSocket.socket.logger = (kind, msg, data) => { + if(kind === 'push') trigger('phx-event', {props: {msg, ...data}}) + } + else + console && console.error("No liveSocket initialized") + {{/if}} })(); diff --git a/tracker/test/fixtures/live-view.html b/tracker/test/fixtures/live-view.html new file mode 100644 index 000000000000..6e6aaabb5b7b --- /dev/null +++ b/tracker/test/fixtures/live-view.html @@ -0,0 +1,20 @@ + + + + + + + Plausible Playwright LiveView tests + + + + + + LiveView-related tests +
+ + + +
+ + diff --git a/tracker/test/live-view.spec.js b/tracker/test/live-view.spec.js new file mode 100644 index 000000000000..d3dd22940f32 --- /dev/null +++ b/tracker/test/live-view.spec.js @@ -0,0 +1,28 @@ +const { mockRequest, expectCustomEvent } = require('./support/test-utils'); +const { expect, test } = require('@playwright/test'); + +test.describe('script.live-view.js', () => { + let plausibleRequestMock; + + test.beforeEach(async ({ page }) => { + plausibleRequestMock = mockRequest(page, '/api/event') + await page.goto('/live-view.html'); + }); + + test('Sends pageview', async ({ page }) => { + await page.evaluate(() => window.dispatchEvent(new CustomEvent("phx:navigate", { detail: { href: "/navigate" } }))) + const request = await plausibleRequestMock; + expect(request.postDataJSON().u).toEqual("/navigate") + expectCustomEvent(request, 'pageview', {}) + }); + + test('Sends phx-event', async ({ page }) => { + await page.evaluate(() => window.liveSocket.socket.logger('push', '_message', { a: 1 })) + expectCustomEvent(await plausibleRequestMock, 'phx-event', { a: 1 }) + }); + + test('Sends submit event', async ({ page }) => { + await (await page.locator("#main-form-btn")).click() + expectCustomEvent(await plausibleRequestMock, 'js-submit', { 'user[name]': "name", dom_id: "main-form" }) + }); +}); From d0888a6f9a855de1b21e2b233632b90ebd23c8ec Mon Sep 17 00:00:00 2001 From: "karlo.smid" Date: Fri, 5 Jul 2024 15:31:59 +0200 Subject: [PATCH 2/5] Elixir 1.17 --- mix.exs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mix.exs b/mix.exs index 6c69ef7bb46f..19b023a42717 100644 --- a/mix.exs +++ b/mix.exs @@ -8,7 +8,7 @@ defmodule Plausible.MixProject do docs: docs(), app: :plausible, version: System.get_env("APP_VERSION", "0.0.1"), - elixir: "~> 1.15", + elixir: "~> 1.17", elixirc_paths: elixirc_paths(Mix.env()), start_permanent: Mix.env() in [:prod, :ce], aliases: aliases(), From f2fcf1cc4204179a707c93c983efadf1aa6e785b Mon Sep 17 00:00:00 2001 From: Sergey Semenov Date: Wed, 17 Jul 2024 12:37:47 +0200 Subject: [PATCH 3/5] fix: untested fixes for IS-11 --- .../templates/site/snippet.html.heex | 2 +- lib/plausible_web/views/site_view.ex | 8 +++--- tracker/src/plausible.js | 26 +++++-------------- 3 files changed, 12 insertions(+), 24 deletions(-) diff --git a/lib/plausible_web/templates/site/snippet.html.heex b/lib/plausible_web/templates/site/snippet.html.heex index 729962354dc7..834959bd209a 100644 --- a/lib/plausible_web/templates/site/snippet.html.heex +++ b/lib/plausible_web/templates/site/snippet.html.heex @@ -20,7 +20,7 @@ id: "snippet_code", class: "transition overflow-hidden bg-gray-100 dark:bg-gray-900 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 dark:text-gray-300 leading-normal appearance-none focus:outline-none focus:bg-white dark:focus:bg-gray-800 focus:border-gray-400 dark:focus:border-gray-500 text-xs mt-4 resize-none", - value: render_snippet(@site), + value: render_snippet(@site, ["live-view"]), rows: 3, readonly: "readonly" ) %> diff --git a/lib/plausible_web/views/site_view.ex b/lib/plausible_web/views/site_view.ex index a3ae89f77679..2333a0fac19d 100644 --- a/lib/plausible_web/views/site_view.ex +++ b/lib/plausible_web/views/site_view.ex @@ -10,11 +10,11 @@ defmodule PlausibleWeb.SiteView do Plausible.Sites.shared_link_url(site, link) end - def render_snippet(site) do - tracker = "#{plausible_url()}/js/script.js" - + def render_snippet(site, addons \\ []) do + filename = Enum.join(["script"] ++ addons ++ ["js"], ".") + src = "#{plausible_url()}/js/#{filename}" """ - + """ end diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js index e8b67ca97d15..12072dfbc0c2 100644 --- a/tracker/src/plausible.js +++ b/tracker/src/plausible.js @@ -169,24 +169,11 @@ {{/if}} {{#if live_view}} - window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href})) - - // https://hexdocs.pm/phoenix_live_view/bindings.html - const bindings = ['phx-click', 'phx-click-away', 'phx-change', 'phx-submit', 'phx-feedback-for', 'phx-feedback-group', - 'phx-disable-with', 'phx-trigger-action', 'phx-auto-recover', 'phx-blur', 'phx-focus', 'phx-window-blur', 'phx-window-focus', - 'phx-keydown', 'phx-keyup', 'phx-window-keydown', 'phx-window-keyup', 'phx-key', 'phx-viewport-top', 'phx-viewport-bottom', - 'phx-mounted', 'phx-update', 'phx-remove', 'phx-hook', 'phx-mounted', 'phx-disconnected', 'phx-connected', 'phx-debounce', - 'phx-throttle', 'phx-track-static']; - - const events = ["phx:page-loading-start", - "phx:page-loading-stop", - "track-uploads", - "phx:live-file:updated" - ].concat(bindings) - .concat(bindings.map(name => name.replace('phx-', 'phx:'))) - .concat(bindings.map(name => name.replace('phx-', '')).filter(name => name != 'submit')) - ; - events.map((name) => { + {{#unless manual}} + window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href})) + {{/unless}} + + ['phx-click', 'phx-change', 'phx-submit', 'phx-viewport-top', 'phx-viewport-bottom', 'phx-mounted', 'phx-connected', 'phx-disconnected'].map((name) => { window.addEventListener(name, info => trigger('phx-event', {props: {event: name, detail: new URLSearchParams(info.detail || {}).toString()}})); }); @@ -196,7 +183,8 @@ //track socket activity if (window.liveSocket) window.liveSocket.socket.logger = (kind, msg, data) => { - if(kind === 'push') trigger('phx-event', {props: {msg, ...data}}) + console.log("FFFFFFFFFFFFF", kind, msg, data); + if(kind === 'push') trigger('phx-push', {props: {msg, ...data}}) } else console && console.error("No liveSocket initialized") From c1946008a0b73243403f6aaba5c1e10a26166486 Mon Sep 17 00:00:00 2001 From: Sergey Semenov Date: Thu, 18 Jul 2024 09:06:09 +0200 Subject: [PATCH 4/5] filtering --- tracker/src/plausible.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js index 12072dfbc0c2..7617be9c427d 100644 --- a/tracker/src/plausible.js +++ b/tracker/src/plausible.js @@ -170,7 +170,7 @@ {{#if live_view}} {{#unless manual}} - window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href})) + window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href})); {{/unless}} ['phx-click', 'phx-change', 'phx-submit', 'phx-viewport-top', 'phx-viewport-bottom', 'phx-mounted', 'phx-connected', 'phx-disconnected'].map((name) => { @@ -183,8 +183,9 @@ //track socket activity if (window.liveSocket) window.liveSocket.socket.logger = (kind, msg, data) => { - console.log("FFFFFFFFFFFFF", kind, msg, data); - if(kind === 'push') trigger('phx-push', {props: {msg, ...data}}) + if ((kind === 'push') && !msg.includes("phoenix heartbeat")){ + trigger('phx-push', {props: {msg, ...data}}); + } } else console && console.error("No liveSocket initialized") From e4f41138cc410f2cb6145e4b850643f62aea4e7a Mon Sep 17 00:00:00 2001 From: Sergey Semenov Date: Thu, 18 Jul 2024 09:09:45 +0200 Subject: [PATCH 5/5] formattings --- lib/plausible_web/views/site_view.ex | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/plausible_web/views/site_view.ex b/lib/plausible_web/views/site_view.ex index 2333a0fac19d..df5cccc28764 100644 --- a/lib/plausible_web/views/site_view.ex +++ b/lib/plausible_web/views/site_view.ex @@ -13,6 +13,7 @@ defmodule PlausibleWeb.SiteView do def render_snippet(site, addons \\ []) do filename = Enum.join(["script"] ++ addons ++ ["js"], ".") src = "#{plausible_url()}/js/#{filename}" + """ """