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

sen
Questions & Help>Questions

How to set environment variables in dev.exs?
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
/phoenix
31 21927 15
New
Tee
Questions & Help>Questions

Enumerables - how does Enum.reduce work with maps
can someone please explain to me how Enum.reduce works with maps
#erlang
18 14791 13
New
qwerescape
Questions & Help>Questions

How to get the call stack/stack trace at any point in code?
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
53 16124 4
New
greenz1
Questions & Help>Questions

Best way to send multiple files as HTTP response
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
/phoenix#api
3 18924 3
New
Patoshizzle
Questions & Help>Questions

(Postgrex.Error) FATAL 28P01 (invalid_password) password authentication failed for user “postgres”
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
#ecto#postgres#troubleshooting
10 29754 20
New
myronmarston
Questions & Help>Questions

Typespecs - best way to spec keyword lists?
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
#dialyzer
52 14431 3
New
nobody
Questions & Help>Questions

How to bind phoenix app to specific ip address?
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
/phoenix
17 19893 18
New
alice
Questions & Help>Questions

What are the main benefits of Elixir compared to Clojure?
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
#clojure
229 33752 47
New
vonH
Questions & Help>Questions

How do I kill a process ` #PID<0.186.0` in iex?
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
#iex#processes#how-to-question
37 21444 8
New
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

Other popular topics Top

marius95
Questions & Help>Questions

Javascript Event Handler is firing twice
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
/phoenix
0 15200 6
New
chrismccord
News>Phoenix News

Phoenix v1.3.0-rc.0 released
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
/phoenix#phoenix-release
434 29893 96
New
gshaw
Questions & Help>Questions

Idiomatic guard clause for checking not nil
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
#guard-clauses
13 43527 3
New
Patoshizzle
Questions & Help>Questions

(Postgrex.Error) FATAL 28P01 (invalid_password) password authentication failed for user “postgres”
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
#ecto#postgres#troubleshooting
10 29754 20
New
jerry
Questions & Help>Questions

Ecto query using like/ilike in query
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
#ecto
17 16876 10
New
pmjoe
Questions & Help>Questions

What do you think of Gleam compared to Elixir?
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
#programminguages#gleam
24 17513 10
New
fayddelight
Questions & Help>Questions

Installing elixir via asdf shows zsh: command not found: iex
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
#erlang#asdf
44 16948 17
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
Brian
Questions & Help>Questions

Import a module from a file into IEX
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
#iex
35 32626 16
New
hariharasudhan94
Questions & Help>Questions

How to get struct from map - elixir?
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
/phoenix#ecto#maps#structs
38 34876 34
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Pragmatic Studio

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

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.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

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.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

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