coen.bakker
Suggestions? Importing JavaScript objects into .hooks.js files (Surface UI)
Recently I have started using Surface UI. The ability to colocate my view/component and its hooks has helped me organize my project better.
AppWeb/Live
|_________ aardvark.ex
|_________ aardvark.sface
|_________ aardvark.hooks.js
|_________ baboon.ex
|_________ baboon.sface
|_________ baboon.hooks.js
I like to keep my .hooks.js files nice and tidy, though. So I would like to be able to import objects from other .js files. For example, by providing the relative path of the .js file (relative to the .hooks.js file). Or by colocation. In the latter case you’d get:
AppWeb/Live
|_________ aardvark.ex
|_________ aardvark.sface
|_________ aardvark.hooks.js
|_________ aardvark.js
|_________ baboon.ex
|_________ baboon.sface
|_________ baboon.hooks.js
|_________ baboon.js
Any advice how to go about implementing this? I will also dive into the code base of Surface to see if I can borrow any solutions from there, but I could use some help looking for a solution in the right direction.
Thank you.
First Post!
code-shoily
I kept my JS files inside assets/js folder and imported them from my hooks components as if that existed inside hooks folder.
Here is an example:
Notice the location of the hooks.js (colocated) file as opposed to their JS imports (assets/js)
Last Post!
coen.bakker
I think it would work nicely if I can organize my code as follows, if there is a large amount of lines of code:
AppWeb/Live
|_________ helpers (folder)
|_________ aardvark.ex
|_________ aardvark.sface
|_________ aardvark.css
|_________ aardvark.hooks.js
|_________ aardvark.js
But also being able to use fewer files, if there aren’t as many lines of code.
AppWeb/Live
|_________ helpers (folder)
|_________ aardvark.ex
|_________ aardvark.hooks.js
I’m anticipating the maintenance of large projects. That’s why I’m interested in this topic atm.
By the way, I’m not trying to imply putting all files at the top level of AppWeb/Live, that’s also for argument’s sake only.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
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.
Develop your skills with books, videos, and courses.
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!"