sezaru
How to use ColocatedHook in a library?
I have a library that has some components with hooks, I want to change these hooks to be colocated hooks and then, have them added to the project that is using my library as a dependency when the component is used.
Right now, if I add the components of the library to the project, I see this file being created in the _build/dev/phoenix-colocated/my_lib/index.js with the following content:
const js = {}; export default js;
const imp_nbxw623t = {}; export { imp_nbxw623t as hooks };
import js_k72dc4fbyh2kqibc7es6ao6xbm from "./Flashy.Disconnected/42_hvpvgghw6hzexz2j5q2qoftssi.js"; imp_nbxw623t["Flashy.Disconnected.DisconnectedNotificationHook"] = js_k72dc4fbyh2kqibc7es6ao6xbm;
import js_qugzgtloje34qslj6n4tw3qmsm from "./Flashy.Normal/65_anhgko4nhvydveovsmjledbmdi.js"; imp_nbxw623t["Flashy.Normal.FlashHook"] = js_qugzgtloje34qslj6n4tw3qmsm;
I see the hooks imported here, but the hooks export is empty.
What do I need to do so the hooks are correctly added to my project final bundle?
Marked As Solved
steffend
This all looks right to me! The hooks export is not empty. Let’s write this over multiple lines:
const js = {};
export default js;
const imp_nbxw623t = {};
export { imp_nbxw623t as hooks };
import js_k72dc4fbyh2kqibc7es6ao6xbm from "./Flashy.Disconnected/42_hvpvgghw6hzexz2j5q2qoftssi.js";
imp_nbxw623t["Flashy.Disconnected.DisconnectedNotificationHook"] = js_k72dc4fbyh2kqibc7es6ao6xbm;
import js_qugzgtloje34qslj6n4tw3qmsm from "./Flashy.Normal/65_anhgko4nhvydveovsmjledbmdi.js";
imp_nbxw623t["Flashy.Normal.FlashHook"] = js_qugzgtloje34qslj6n4tw3qmsm;
In the end, the hooks export (imp_nbxw623t) contains Flashy.Disconnected.DisconnectedNotificationHook and Flashy.Normal.FlashHook.
So to add the hooks to your final bundle, just do something like
// your lib's main entrypoint
import { hooks } from "phoenix-colocated/my_lib";
export hooks;
and then guide your user’s to
import { hooks } from "my_lib";
Does that make sense?
Also Liked
LostKobrakai
Importing hooks shouldn’t be much different to importing any other dependency, besides being stored in a different folder, which means you need to make whatever tooling you use aware of that folder. It kinda also means you now want to use a bundler, but it sounds like you already are.
Last Post!
sezaru
Ah, ok, that was the missing link, I thought that since the hooks now lived in the component itself, just adding them would automatically bundle their hooks to the main project js file. But I still need to export and expose it from my library and then the user needs to manually import them as you showed, adding that solved the issue, thanks!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
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
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"