How to use ColocatedHook in a library?

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?

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.

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!