SolidJS•6mo ago

Using script tag with custom parameter

<script async src="https://umami.domain.org/script.js" data-website-id="ba170e55-8r926-4fc2-a36f-a4ggrbbcd2ebd83"></script>

<script async src="https://umami.domain.org/script.js" data-website-id="ba170e55-8r926-4fc2-a36f-a4ggrbbcd2ebd83"></script>

and this is my solid code root.tsx

  createScriptLoader({
    src: "https://umami.domain.org/script.js",
    "data-website-id": "ba170e55-8926-4fc2-a36f-a4bbcdeffeefedfed2ebd83",
    async: true,    

  });

  createScriptLoader({
    src: "https://umami.domain.org/script.js",
    "data-website-id": "ba170e55-8926-4fc2-a36f-a4bbcdeffeefedfed2ebd83",
    async: true,    

  });

Problem is that data-website-id doesn't work.

14 Replies

bigmistqke•6mo ago

@Alex Lohr mb u know?

Alex Lohr•6mo ago

We use solid's spread, so we should receive the same things as solid props. Let me look what solid does to data attributes The data attribute should be set on the script. Can you tell me what is expected by the script? https://umami.is/docs/tracker-configuration <- this one?

Massukka•6mo ago

Yes, that is correct

Alex Lohr•6mo ago

Could you please elaborate a bit more on what "doesn't work" mean exactly?

Massukka•6mo ago

https://umami.is/docs/sending-stats The website parameter is empty when sending the request. I will try make simple plain js website tomorrow to see if umami script fills it correctly. Docs also say it should be on head section of the site, but i am not sure if that makes a difference in solid start context. Edit. Script loader appends to head Script that is @Alex Lohr Okay I solved it, createScriptLoader works well on plain solidjs project, but for some reason at least on my solid start project, only src attribute was set on head script tag for umami. I tried testing plain solid start project, but it had already moved to vinxi. Here is the code I used to workaround:

  if (!isServer) {
    const script = document.createElement("script");
    script.src = "https://umami.redacted.org/script.js";
    script.async = true;
    script.setAttribute(
      "data-website-id",
      "ba170e55-8926-4fc2-a36f-a4bbcdgs2ebd83"
    );
    createRenderEffect(() => {
      document.head.appendChild(script);
    });
    onCleanup(
      () => document.head.contains(script) && document.head.removeChild(script)
    );
  }

  if (!isServer) {
    const script = document.createElement("script");
    script.src = "https://umami.redacted.org/script.js";
    script.async = true;
    script.setAttribute(
      "data-website-id",
      "ba170e55-8926-4fc2-a36f-a4bbcdgs2ebd83"
    );
    createRenderEffect(() => {
      document.head.appendChild(script);
    });
    onCleanup(
      () => document.head.contains(script) && document.head.removeChild(script)
    );
  }

Alex Lohr•6mo ago

Can you create a minimum reproduction of the issue?

Massukka•6mo ago

https://github.com/illispi/ScriptStartIssue Here you go. Not sure what the issue is since its only start specific, plain solidjs works fine

GitHub

GitHub - illispi/ScriptStartIssue

Contribute to illispi/ScriptStartIssue development by creating an account on GitHub.

Alex Lohr•6mo ago

Thanks, I'll have a look Solid start does something to spread so it does not work like it should. This is indeed an error in the older solid-start.

Massukka•6mo ago

That repo has the latest vinxi 0.4 build. Do you think i should file issue on solid start?

Alex Lohr•6mo ago

I'll have to check deeper later. I have had a deeper look. This is due to setAttribute not setting any attributes through spread if there is a shared context. We can solve this if we call spread outside of the reactive context, e.g. using setTimeout() I'm not sure if that is a good solution, so I'll discuss this with my colleagues. There is a workaround. The script node is returned from the createScriptLoader call, so you can use createScriptLoader(...).setAttribute('...', '...') as a workaround.

Massukka•6mo ago

Okay, thanks

Alex Lohr•6mo ago

A solution will be published within the next days. Sorry it took a bit longer. I just rebased the PR, so it should be merged and released soon-ish.

Massukka•6mo ago

Alex Lohr•6mo ago

Just merged the branch. It should be up before next year.

Gaming

Programming

Using script tag with custom parameter