How to use ColocatedHook in a library?

Phoenix Forum Questions / Help
, ,
1

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?

1 Like
2

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?

4 Likes
3

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.

1 Like
4

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!