diff --git a/README.md b/README.md index fd2e2ed9a..2fc1f1402 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Add `corex` to your `mix.exs` dependencies: ```elixir def deps do [ - {:corex, "~> 0.1.0-alpha.19"} + {:corex, "~> 0.1.0-alpha.21"} ] end ``` @@ -355,22 +355,43 @@ In order to use the API, you must use an id on the component end ``` -## Components - -Now that Corex is installed, explore the component documentation: - -- [Accordion](https://hexdocs.pm/corex/Corex.Accordion.html) -- [Checkbox](https://hexdocs.pm/corex/Corex.Checkbox.html) -- [Clipboard](https://hexdocs.pm/corex/Corex.Clipboard.html) -- [Collapsible](https://hexdocs.pm/corex/Corex.Collapsible.html) -- [Combobox](https://hexdocs.pm/corex/Corex.Combobox.html) -- [Date Picker](https://hexdocs.pm/corex/Corex.DatePicker.html) -- [Dialog](https://hexdocs.pm/corex/Corex.Dialog.html) -- [Select](https://hexdocs.pm/corex/Corex.Select.html) -- [Switch](https://hexdocs.pm/corex/Corex.Switch.html) -- [Tabs](https://hexdocs.pm/corex/Corex.Tabs.html) -- [Toast](https://hexdocs.pm/corex/Corex.Toast.html) -- [Toggle Group](https://hexdocs.pm/corex/Corex.ToggleGroup.html) +## Performance + +By default Phoenix esbuild is set to bundle all the JS into a single file. + +### 1.Enable splitting + +In order to enable splitting add the following `--format=esm --splitting` to your esbuild config + +```elixir +config :esbuild, + version: "0.25.4", + e2e: [ + args: + ~w(js/app.js --bundle --format=esm --splitting --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.), + cd: Path.expand("../assets", __DIR__), + env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]} + ] +``` + +Run `mix assets.build` and see the magic happening + +### 2.Enable gzip for Plug.Static + +In your `endpoint.ex` enable gzip for developement also + +```elexir + plug Plug.Static, + at: "/", + from: :e2e, + gzip: true, + only: E2eWeb.static_paths(), + raise_on_missing_only: code_reloading? +``` + +See the [Production guide](https://hexdocs.pm/corex/production.html) for the final build in production environnement + +## Documentation Full Hex Documentation is available at [http://hexdocs.pm/corex](http://hexdocs.pm/corex) diff --git a/e2e/.tool-versions b/e2e/.tool-versions new file mode 100644 index 000000000..3d664e3f5 --- /dev/null +++ b/e2e/.tool-versions @@ -0,0 +1,2 @@ +elixir 1.19.5-otp-28 +erlang 28.3.1 diff --git a/e2e/config/dev.exs b/e2e/config/dev.exs index 25a8f445f..00a3e01e9 100644 --- a/e2e/config/dev.exs +++ b/e2e/config/dev.exs @@ -21,7 +21,7 @@ config :e2e, E2eWeb.Endpoint, # Change to `ip: {0, 0, 0, 0}` to allow access from other machines. http: [ip: {127, 0, 0, 1}], check_origin: false, - code_reloader: false, + code_reloader: true, debug_errors: true, secret_key_base: "JQ3bjpj3drUYoLh2G4QBZr8KpmxWvAJGLV6DZzv9mIRqOkQqhpZwtu9np9fwDeSX", watchers: [ diff --git a/e2e/lib/e2e_web/controllers/page_html/home.html.heex b/e2e/lib/e2e_web/controllers/page_html/home.html.heex index 5c13d1569..a71f88ac0 100644 --- a/e2e/lib/e2e_web/controllers/page_html/home.html.heex +++ b/e2e/lib/e2e_web/controllers/page_html/home.html.heex @@ -40,7 +40,7 @@ + <.button + href={~p"/#{@locale}/accordion"} + class="button md:button--lg w-full md:w-auto hidden lg:flex" + > + Examples + + diff --git a/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex index f67b4f01d..775c488b8 100644 --- a/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex +++ b/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex @@ -5,10 +5,10 @@

Client Api

-
- - - - -
+
+
+ + + + +
+

Server Api

-
- - - - - - -
+
+
+ + + + + + +
+

Expanded value: {inspect(@tree_expanded_value)} @@ -101,8 +150,16 @@ defmodule E2eWeb.TreeViewLive do Selected value: {inspect(@tree_selected_value)}

- <.tree_view id="my-tree" class="tree-view" items={@default_items}> - <:label>My Documents + <.tree_view + id="my-tree" + class="tree-view" + redirect + items={@default_items} + > + <:label>Corex Components + <:indicator> + <.icon name="hero-chevron-right" /> + """ diff --git a/e2e/mix.exs b/e2e/mix.exs index 8b7fc4b07..ede3dd916 100644 --- a/e2e/mix.exs +++ b/e2e/mix.exs @@ -67,7 +67,7 @@ defmodule E2e.MixProject do {:jason, "~> 1.2"}, {:dns_cluster, "~> 0.2.0"}, {:bandit, "~> 1.5"}, - {:corex, path: "../"}, + {:corex, "~> 0.1.0-alpha.21"}, {:wallaby, "~> 0.30", only: :test}, {:a11y_audit, "~> 0.3.1", only: :test}, {:flagpack, "~> 0.6.0"} diff --git a/e2e/mix.lock b/e2e/mix.lock index bca006d1e..2f30c7bea 100644 --- a/e2e/mix.lock +++ b/e2e/mix.lock @@ -3,6 +3,7 @@ "bandit": {:hex, :bandit, "1.10.2", "d15ea32eb853b5b42b965b24221eb045462b2ba9aff9a0bda71157c06338cbff", [:mix], [{:hpax, "~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}, {:plug, "~> 1.18", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:thousand_island, "~> 1.0", [hex: :thousand_island, repo: "hexpm", optional: false]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "27b2a61b647914b1726c2ced3601473be5f7aa6bb468564a688646a689b3ee45"}, "cc_precompiler": {:hex, :cc_precompiler, "0.1.11", "8c844d0b9fb98a3edea067f94f616b3f6b29b959b6b3bf25fee94ffe34364768", [:mix], [{:elixir_make, "~> 0.7", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "3427232caf0835f94680e5bcf082408a70b48ad68a5f5c0b02a3bea9f3a075b9"}, "certifi": {:hex, :certifi, "2.15.0", "0e6e882fcdaaa0a5a9f2b3db55b1394dba07e8d6d9bcad08318fb604c6839712", [:rebar3], [], "hexpm", "b147ed22ce71d72eafdad94f055165c1c182f61a2ff49df28bcc71d1d5b94a60"}, + "corex": {:hex, :corex, "0.1.0-alpha.21", "6a5fb25e5d4dd8ba7b9d970870980b02ea9a5819dd5f4d7fccf1ed94a05897f8", [:mix], [{:ecto, "~> 3.10", [hex: :ecto, repo: "hexpm", optional: false]}, {:gettext, "~> 1.0", [hex: :gettext, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.8.1", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "ed5471578d9e389256d798a9f8a941cd38a291b11c2cdc133586485b619d111a"}, "db_connection": {:hex, :db_connection, "2.9.0", "a6a97c5c958a2d7091a58a9be40caf41ab496b0701d21e1d1abff3fa27a7f371", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "17d502eacaf61829db98facf6f20808ed33da6ccf495354a41e64fe42f9c509c"}, "decimal": {:hex, :decimal, "2.3.0", "3ad6255aa77b4a3c4f818171b12d237500e63525c2fd056699967a3e7ea20f62", [:mix], [], "hexpm", "a4d66355cb29cb47c3cf30e71329e58361cfcb37c34235ef3bf1d7bf3773aeac"}, "dns_cluster": {:hex, :dns_cluster, "0.2.0", "aa8eb46e3bd0326bd67b84790c561733b25c5ba2fe3c7e36f28e88f384ebcb33", [:mix], [], "hexpm", "ba6f1893411c69c01b9e8e8f772062535a4cf70f3f35bcc964a324078d8c8240"}, @@ -22,8 +23,8 @@ "httpoison": {:hex, :httpoison, "2.3.0", "10eef046405bc44ba77dc5b48957944df8952cc4966364b3cf6aa71dce6de587", [:mix], [{:hackney, "~> 1.21", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "d388ee70be56d31a901e333dbcdab3682d356f651f93cf492ba9f06056436a2c"}, "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"}, "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"}, - "lazy_html": {:hex, :lazy_html, "0.1.8", "677a8642e644eef8de98f3040e2520d42d0f0f8bd6c5cd49db36504e34dffe91", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "0d8167d930b704feb94b41414ca7f5779dff9bca7fcf619fcef18de138f08736"}, - "live_capture": {:hex, :live_capture, "0.2.5", "3db18b5274fe87c073bbd90185f08edc758b9cb0ec3f6458ab5cefc5ed833c27", [:mix], [{:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "e029ecc3111e7a4338a9fd2198d1a47f4989d0236d72b71f1a018c0b2aebceec"}, + "lazy_html": {:hex, :lazy_html, "0.1.10", "ffe42a0b4e70859cf21a33e12a251e0c76c1dff76391609bd56702a0ef5bc429", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "50f67e5faa09d45a99c1ddf3fac004f051997877dc8974c5797bb5ccd8e27058"}, + "live_capture": {:hex, :live_capture, "0.2.7", "d06d636b468d3579c30dc6be35fea6c2f805b1e9d4dd67d8d96184ec6852ee60", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "e5d176d0b90292683faf5852dbd67a2d331f28430d39624754e209da20378e25"}, "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"}, "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"}, "mimerl": {:hex, :mimerl, "1.4.0", "3882a5ca67fbbe7117ba8947f27643557adec38fa2307490c4c4207624cb213b", [:rebar3], [], "hexpm", "13af15f9f68c65884ecca3a3891d50a7b57d82152792f3e19d88650aa126b144"}, @@ -36,7 +37,7 @@ "phoenix_html": {:hex, :phoenix_html, "4.3.0", "d3577a5df4b6954cd7890c84d955c470b5310bb49647f0a114a6eeecc850f7ad", [:mix], [], "hexpm", "3eaa290a78bab0f075f791a46a981bbe769d94bc776869f4f3063a14f30497ad"}, "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.7", "405880012cb4b706f26dd1c6349125bfc903fb9e44d1ea668adaf4e04d4884b7", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "3a8625cab39ec261d48a13b7468dc619c0ede099601b084e343968309bd4d7d7"}, "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.6.2", "b18b0773a1ba77f28c52decbb0f10fd1ac4d3ae5b8632399bbf6986e3b665f62", [:mix], [{:file_system, "~> 0.2.10 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "d1f89c18114c50d394721365ffb428cce24f1c13de0467ffa773e2ff4a30d5b9"}, - "phoenix_live_view": {:hex, :phoenix_live_view, "1.1.22", "9b3c985bfe38e82668594a8ce90008548f30b9f23b718ebaea4701710ce9006f", [:mix], [{:igniter, ">= 0.6.16 and < 1.0.0-0", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:lazy_html, "~> 0.1.0", [hex: :lazy_html, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0-rc", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e1395d5622d8bf02113cb58183589b3da6f1751af235768816e90cc3ec5f1188"}, + "phoenix_live_view": {:hex, :phoenix_live_view, "1.1.23", "5e41c63377d508dc9b22dcebcefa0a3a243695932f72eac6003831fd4ed96165", [:mix], [{:igniter, ">= 0.6.16 and < 1.0.0-0", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:lazy_html, "~> 0.1.0", [hex: :lazy_html, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0-rc", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f5296ef67b41da7fe345e139ebaa621ceb5e7e84e37c89a12574cc0536a80604"}, "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.2.0", "ff3a5616e1bed6804de7773b92cbccfc0b0f473faf1f63d7daf1206c7aeaaa6f", [:mix], [], "hexpm", "adc313a5bf7136039f63cfd9668fde73bba0765e0614cba80c06ac9460ff3e96"}, "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"}, "plug": {:hex, :plug, "1.19.1", "09bac17ae7a001a68ae393658aa23c7e38782be5c5c00c80be82901262c394c0", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "560a0017a8f6d5d30146916862aaf9300b7280063651dd7e532b8be168511e62"}, diff --git a/guides/installation.md b/guides/installation.md index 2cfdefd39..c9942ac35 100644 --- a/guides/installation.md +++ b/guides/installation.md @@ -37,7 +37,7 @@ Add `corex` to your `mix.exs` dependencies: ```elixir def deps do [ - {:corex, "~> 0.1.0-alpha.19"} + {:corex, "~> 0.1.0-alpha.21"} ] end ``` @@ -346,20 +346,38 @@ In order to use the API, you must use an id on the component end ``` -## Components +## Performance -Now that Corex is installed, explore the component documentation: +By default Phoenix esbuild is set to bundle all the JS into a single file. -- [Accordion](Corex.Accordion.html) -- [Checkbox](Corex.Checkbox.html) -- [Clipboard](Corex.Clipboard.html) -- [Collapsible](Corex.Collapsible.html) -- [Combobox](Corex.Combobox.html) -- [Date Picker](Corex.DatePicker.html) -- [Dialog](Corex.Dialog.html) -- [Select](Corex.Select.html) -- [Switch](Corex.Switch.html) -- [Tabs](Corex.Tabs.html) -- [Toast](Corex.Toast.html) -- [Toggle Group](Corex.ToggleGroup.html) +### 1.Enable splitting +In order to enable splitting add the following `--format=esm --splitting` to your esbuild config + +```elixir +config :esbuild, + version: "0.25.4", + e2e: [ + args: + ~w(js/app.js --bundle --format=esm --splitting --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.), + cd: Path.expand("../assets", __DIR__), + env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]} + ] +``` + +Run `mix assets.build` and see the magic happening + +### 2.Enable gzip for Plug.Static + +In your `endpoint.ex` enable gzip for developement also + +```elexir + plug Plug.Static, + at: "/", + from: :e2e, + gzip: true, + only: E2eWeb.static_paths(), + raise_on_missing_only: code_reloading? +``` + +See the [Production guide](production.html) for the final build in production environnement \ No newline at end of file diff --git a/mix.exs b/mix.exs index 8f80864a1..f6936996e 100644 --- a/mix.exs +++ b/mix.exs @@ -1,7 +1,7 @@ defmodule Corex.MixProject do use Mix.Project - @version "0.1.0-alpha.19" + @version "0.1.0-alpha.21" @elixir_requirement "~> 1.15" def project do diff --git a/package.json b/package.json index c2af08c9c..48992f81d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "corex", - "version": "0.1.0-alpha.19", + "version": "0.1.0-alpha.21", "description": "The official JavaScript client for the Corex Phoenix Hooks.", "license": "MIT", "module": "./priv/static/corex.mjs",