Questions & Help>Questions

Suggestions? Importing JavaScript objects into .hooks.js files (Surface UI)

/phoenix#surface#code-organization
coen.bakker

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.

3 comments
/phoenix#surface#code-organization
1 1094 3

First Post!

code-shoily

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:

https://github.com/code-shoily/covid19/blob/mafinar/try-out-tailwind/lib/covid19_web/components/crd_pie_chart_component.hooks.js

Notice the location of the hooks.js (colocated) file as opposed to their JS imports (assets/js)

Post #2

Where Next?

View thread on forum (has 3 responses!)
phoenix
surface
code-organization
Home Questions & Help>Questions
/phoenix#surface#code-organization
1 1098 3
Last post

Popular in Questions Top

RisingFromAshes
Questions & Help>Questions

How to get the current URL?
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
/phoenix
20 18753 18
New
joaquinalcerro
Questions & Help>Questions

What is the best approach for fetching large amount of records from postgresql with ecto
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
#ecto
126 24824 27
New
vonH
Questions & Help>Questions

Why would I choose Elixir as a general purpose programming language?
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
#functional-programming#use-cases
65 34961 13
New
skosch
Questions & Help>Questions

Put/update deep inside nested maps (and auto-create intermediate keys)
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
#data-structures#maps#immutability
52 20278 11
New
beno
Questions & Help>Questions

Pattern match with multiple match options
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> somethi...
#pattern-matching#how-to-question
29 15674 6
New
mcarvalho
Questions & Help>Questions

System.get_env vs. Application.get_env
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
#environment
13 17200 6
New
openscript
Questions & Help>Questions

How to set up the Elixir SDK in Intellij IDEA with the intellij-elixir plugin?
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
17 23170 9
New
nsuchy
Questions & Help>Questions

IEX in Windows Powershell?
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
#iex#microsoft-windows#windows#powershell
15 30117 4
New
ycv005
Questions & Help>Questions

BEAM file compliation error after degrading Erlang version from 22 to 21
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
/phoenix#erlang
33 15756 4
New
shijith.k
Questions & Help>Questions

Hex version - ** (Mix) The task "phx.new" could not be found
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
/phoenix#hex
66 25407 15
New

Other popular topics Top

rms.mrcs
Questions & Help>Questions

Transform a list into an map with indexes using Enum module
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
35 32831 9
New
jononomo
Questions & Help>Questions

Where / How does the Mix environment variable get set?
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
#mix
31 23040 9
New
ovidiubadita
Questions & Help>Questions

Elixir for game development
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
#game
30 23559 25
New
stefanchrobot
Questions & Help>Questions

How to decode a JSON into a struct safely?
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
#structs#json
29 21152 26
New
dogweather
Chat & Discussions>Discussions

The complexity of Haskell vs. Elixir's simplicity
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
#language-implementation#haskell
138 29991 35
New
fireproofsocks
Questions & Help>Questions

Ecto delete a record WITHOUT selecting first
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
#ecto#optimization#delete-method
22 16944 8
New
Nvim
Chat & Discussions>Discussions

Django vs Phoenix
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
/phoenix#learning-elixir
184 21696 82
New
msaraiva
News>Announcing

Surface - A component-based library for Phoenix LiveView
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
/phoenix#library#liveview#livecomponents#surface
564 43622 214
New
siddhant3030
Questions & Help>Questions

How can I write a raw sql query?
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
/phoenix#ecto
13 19654 20
New
TunkShif
Chat & Discussions>Wikis

Neovim - Elixir Setup Configuration from Scratch Guide
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
#wiki#code-editors#neovim#language-server-protocol
274 41539 114
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Potions

Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement