Upgrading to v0.11

View Source

Bump Your Deps

Update Backpex to the latest version:

  defp deps do
    [
      {:backpex, "~> 0.11.0"}
    ]
  end

Removed Alpine.js in favor of Backpex JS hooks

We removed the Alpine.js dependency and replaced it with custom hooks. In order to make them work, you now need to import these Backpex hooks into your JS bundle. If you are not using Alpine.js, you can now remove it so that the app.js looks something like this:

import { Hooks as BackpexHooks } from 'backpex';

const Hooks = [] // your application hooks (optional)

const liveSocket = new LiveSocket('/live', Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {...Hooks, ...BackpexHooks }
})

Some hooks come with Tailwind classes, so make sure you add the paths to your content section in your tailwind.config.js.

..,
content: [
  ...,
  // add this line
  '../deps/backpex/assets/js/**/*.*js'
]

In case you are using the theme selector, you do not need to add the JS hook for that. It is in included in BackpexHooks now. But make sure to add this line your app.js to reduce flickering:

BackpexHooks.BackpexThemeSelector.setStoredTheme()

See demo setup for more information.

Parameter changes in core modules

In case you are using Backpex.Resource or one of the Backpex.Adapter modules (Backpex.Adapters.Ecto or Backpex.Adapters.Ash) directly check out the updated function definitions. This will also apply in case you built your own adapter.

Make sure to cover all cases with the item_query/3 function

We have removed code that ensures that a fallback item query function is always added to your LiveResource.

Make sure to always cover all possible cases or add a fallback item_query/3 function that just returns the query.

For example:

# in your resource configuration file (live resource)
use Backpex.LiveResource,
  # ...other options
  adapter_config: [
    # ...other adapter options
    item_query: &__MODULE__.item_query/3
  ]

  def item_query(query, :index, _assigns) do
    query
    |> where([post], post.published)
  end

  # make sure to add this fallback function
  def item_query(query, _live_action, _assigns) do
    query
  end

We removed Ecto.Query import from LiveResource

Previously, we automatically imported Ecto.Query into LiveResources. We removed this behavior, so you need to import it yourself if you need it, e.g. for the item_query/3 callback.

Component changes