DaAnalyst
Can we get support for colocating shared JS constants with a group of otherwise colocated JS components?
@chrismccord @josevalim @steffend
Been using colocated JS for a while and I keep on stumbling on the same limitation: there is no way (at least known to me) to colocate JS constants with a group of custom elements operating together as a whole (naturally, each defined is in its own file/script module).
I managed to import them (from one script module into another) but they can only be used from connectedCallback on. They don’t exist yet (synchronously) right after the import statement nor can they be used directly or via a function call in the Lit decorators like @provide, @consume and friends, i.e. they cannot be used as constants.
I know it works by simply moving those constants to a .js file and saving it in assets, but that’s no longer a “physical” colocation and those constants are of no concern to the rest of the app.
Is there any chance this could be somehow added to Phoenix/LiveView?
Thanks
Marked As Solved
steffend
I see the problem now (note that it would have been much easier if you posted the exact kind of error you’re seeing). Because of the way the JS files are bundled by esbuild, the individual modules are put before the code that initializes the key variables.
The solution to that is to use a different manifest for constants:
@doc false
def __colocated_constants__(assigns) do
~H"""
<script :type={Phoenix.LiveView.ColocatedJS} name="SharedFoo" manifest="constants.js">
const constants = {
FOO: "foo",
BAR: "bar",
}
export default constants;
</script>
"""
end
def my_component(assigns) do
~H"""
<script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook">
import constants from "phoenix-colocated/my_app/constants";
console.log(constants.SharedFoo.FOO);
export default {
mounted() {
this.el.innerText = JSON.stringify(constants.SharedFoo);
}
}
</script>
<div id="some-id" phx-hook=".MyHook"></div>
"""
end
Also Liked
steffend
You can do something like this:
defmodule MyAppWeb.SomeComponent do
@doc false
def __colocated_constants__(assigns) do
~H"""
<script :type={Phoenix.LiveView.ColocatedJS} name="SharedFoo" key="constants">
const constants = {
FOO: "foo",
BAR: "bar",
}
export default constants;
</script>
"""
end
def my_component(assigns) do
~H"""
<script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook">
import { constants } from "phoenix-colocated/my_app";
export default {
mounted() {
this.el.innerText = JSON.stringify(constants);
}
}
</script>
<div id="some-id" phx-hook=".MyHook"></div>
"""
end
end
In this example, the constants are available as constants.SharedFoo:
// constants
{"SharedFoo":{"FOO":"foo","BAR":"bar"}}
PS: No need to ping us individually, I’m subscribed to the Proposals section.
steffend
Yeah it builds just fine, but I assume you got an exception in the browser like
Uncaught TypeError: can't access property "SharedFoo", imp_mnxw443umfxhi4y is undefined
That would already have put me on the right track ![]()
Anyway, please report back if you find any other issues!
DaAnalyst
Yep, it works! Thank you so much for this one. You’ve got a lunch from me if you ever come visit Pula, Croatia (or any other place in the region of Istria).
Last Post!
DaAnalyst
Yep, it works! Thank you so much for this one. You’ve got a lunch from me if you ever come visit Pula, Croatia (or any other place in the region of Istria).
Popular in Proposals: Ideas
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









