For me one of the best courses and book that made me switch my brain from Object Orientated Programming to Functional Programming.
I spent a few years learning erlang before elixir.
I’ve already read it.
7stud
1
7stud
I purchased “Elixir in Action” using a discount code on this forum. I’ve read part of it. It is very good. At the same time, I purchased “Phoenix in Action”, and I’m revisiting it now.
1
codeanpeace
Does your umbrella project happen to be created using an older version of the Phoenix generators?
0
7stud
% elixir --version
Erlang/OTP 24 [erts-12.3.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]
Elixir 1.14.4 (compiled with Erlang/OTP 24)
I’m using Phoenix 1.7.2, which I installed a few days ago with the command:
$ mix archive.install hex phx_new
mix.exs:
defmodule MyWeb.MixProject do
use Mix.Project
def project do
[
app: :my_web,
version: "0.1.0",
build_path: "../../_build",
config_path: "../../config/config.exs",
deps_path: "../../deps",
lockfile: "../../mix.lock",
elixir: "~> 1.14",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
deps: deps()
]
end
# Configuration for the OTP application.
#
# Type `mix help compile.app` for more information.
def application do
[
mod: {MyWeb.Application, []},
extra_applications: [:logger, :runtime_tools]
]
end
# Specifies which paths to compile per environment.
defp elixirc_paths(:test), do: ["lib", "test/support"]
defp elixirc_paths(_), do: ["lib"]
# Specifies your project dependencies.
#
# Type `mix help deps` for examples and options.
defp deps do
[
{:phoenix, "~> 1.7.2"},
{:phoenix_html, "~> 3.3"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_live_view, "~> 0.18.16"},
{:floki, ">= 0.30.0", only: :test},
{:phoenix_live_dashboard, "~> 0.7.2"},
{:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
{:telemetry_metrics, "~> 0.6"},
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.20"},
{:jason, "~> 1.2"},
{:plug_cowboy, "~> 2.5"}
]
end
# Aliases are shortcuts or tasks specific to the current project.
#
# See the documentation for `Mix` for more info on aliases.
defp aliases do
[
setup: ["deps.get", "assets.setup", "assets.build"],
"assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
"assets.build": ["tailwind default", "esbuild default"],
"assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
]
end
end
I’ll try adding my js file to a non umbrella project and see if I get different results.
0
03juan
This will import hello into the scope of app.js, but will not make it available to the HTML document automatically unless you assign the function to the global window element.
// file: assets/js/app.js
import {hello} from "../vendor/my_functions.js"
window.hello = hello
A good next step would be to namespace your exported functions, then assign that to the global element:
// file: assets/vendor/my_functions.js
export function hello () {...}
export function etc () {...}
// file: assets/js/app.js
import * as MyFunctions from "../vendor/my_functions.js"
window.MyFunctions = MyFunctions
// in HTML <script>
window.onload = function () {
MyFunctions.hello()
MyFunctions.etc()
}
This can start to get unwieldy when you have a lot of functionality in multiple HTML scripts.
I would instead move them to app.js and set up your code from there:
// file: assets/js/app.js
import * as MyFunctions from "../vendor/my_functions.js"
window.onload = function () {
MyFunctions.hello()
}
// now this is only necessary if you also want to access them directly from the dev console
window.MyFunctions = MyFunctions
Lastly, if app.js also gets too large for your liking, or you only want to have certain features running in specific pages, you can move the relevant code to its own module, have esbuild compile it separately, then load it into your page.
// file: assets/js/my_feature.js
import { hello } from "../vendor/my_functions.js"
button = document.querySelector("#someButton")
button.addEventListener("click", () => { hello() }
add js/my_feature.js to the esbuild args string (and restart the server to apply changes to config files)
# file: config/config.exs
config :esbuild,
version: "0.17.11",
default: [
args:
~w(js/app.js js/my_feature.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
<!--- my_page.html.heex or inside render/function component ~H template -->
<script defer phx-track-static type="text/javascript" src={~p"/assets/my_feature.js"}>
</script>
<button id="someButton" type="button">Run hello()</button>
7
7stud
Hurray! Clap, clap! I got all the methods you suggested to work. Somebody understands scope in javascript!
Out of curiosity, why didn’t my attempts with JQuery work? I clicked the link:
Download the uncompressed, development jQuery 3.6.4
and I copied the code and put it in ..assets/vendor/jquery.js.
In ../assets/js/jquery_setup.js, I have:
import jQuery from "../vendor/jquery"
window.jQuery = jQuery
window.$ = jQuery
And, in app.js I have:
import "./jquery_setup.js"
But, in my browser I get an error in the js console that says $ isn’t recognized. I looked through the jQuery code, and I don’t think it exports “jQuery” or “$”. If it would take too much time to figure out, don’t bother.
1
03juan
That’s a very good question. This style is a side effect only type of import that should run the script’s global code. 
Maybe try to compile it separately in the esbuild args string and import it as a separate asset in the HTML head, and skip the extra step through app.js?
Or just straight-up inline the jquery_setup.js code in app.js?
1