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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
The deployment platform built for Elixir: PaaS ease, VPS control.
Categories:
Sub Categories:
Forums
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"