Changelog

January, 2023

Coming soon - Petal Pro with Pheonix 1.7

We are putting the final touches on Petal Pro with Phoenix 1.7. Petal Enhance will also be significantly improved and will work with ordinary Phoenix projects as well as Petal Pro.

November, 2022

Petal Enhance

The major bit of news this month is that we soft-launched Petal Enhance!

We’ll have some recipes available for free for both Petal Boilerplate and Petal Pro users so that everyone can benefit from this incredible tool. We know some of you have been checking it out already and we really think this is going to be a game-changer as it gives us the opportunity to build out a market place of functionality that can be pulled into any project without polluting the Petal Pro codebase. You can read more in depth about Petal Enhance and how it works on our blog.

Initially, four recipes will be available for free:

  • NPM package manager - app.js can import NPM packages. They will be stored in assets/node_modules.
  • UUID - Use UUIDs instead of sequential integers for IDs (all tables). Modifies migration files.
  • User first name & last name - Change user.name to user.first_name and user.last_name. Modifies migration files.
  • User first name & last name - Change user.name to user.first_name and user.last_name. Modifies migration files.
  • Remove orgs - Petal Pro 1.4 comes with orgs functionality. Sometimes you may not need this.

Petal Enhance Preview

October, 2022

Petal Pro

We’re excited to announce that we’ve upgraded Petal Pro to the new Declarative Assigns and boy does it look pretty! 🚀

New Declarative Assigns

We’ve also upgraded Heroicons to v2, however you can still use the old Heroicons by appending “V1”.

<HeroiconsV1.Solid.clock />

September, 2022

Petal Pro

We’ve implemented LiveView 0.18, which is a pretty huge and exciting update!! 🚀

LiveView 0.18

You can read all about the update here

Essentially the main features are:

  • Declarative Assigns and Slots
  • HEEx HTML Formatter
  • Accessibility
  • JS commands and hooks in dead views

We’re super excited to have implemented LiveView 0.18 into Petal Pro and can’t wait to see what this enables once Phoenix 1.7 is released.

August, 2022

Petal Pro

Some handly little updates this month! 🎉

Local time hook

Allows UTC dates and times to be shown in the user’s local timezone (using Javascript). Supports “time_ago” formatting (eg. “in 1 month”).

Local time hook

Use Docker for a local Postgres 🐳

If your system doesn’t have Postgres you can use docker-compose to run it in a container (saves you having to install it).

New recipe: NPM 👨‍🍳

We understand that some people need to use third-party Javascript libraries and prefer to use NPM to manage them over CDNs. This recipe will get you up and running with NPM quickly.

July, 2022

Petal Pro

You can watch the video of all updates here.

New components: Data Table & Route Tree 🧪

The route tree shows all of your routes in a simple format. You can also copy the route helper by clicking a row.

Route tree

The data table gives you a table view with sorting, filtering and pagination built in. The state is stored in the URL params.

Data table

Streamlined router

The router was a bit overwhelming so I’ve cut it down to just 92 lines. I split out some of the routes that don’t change as much into their own files (eg. auth, dev, auth routes).

Streamlined Router

Improved quality standards

I’ve added a new command mix quality. This runs three tasks:

  • mix coveralls to report your test coverage
  • mix credo to analyse your code and look for common problems
  • mix sobelow to look for potential security issues in your code

Ideally before you push your code you should run this command (along with mix format).

Content Security Policy

mix sobelow revealed to me that no Content Security Policy was being set by Phoenix. It is generally favourable to have these set to prevent XSS attacks.

Content Security Policy

You will see this in the router:

plug(:put_secure_browser_headers, %{
"content-security-policy" =>
ContentSecurityPolicy.serialize(
struct(ContentSecurityPolicy.Policy, PetalPro.config(:content_security_policy))
)
})

Basically, in your config you need to whitelist any website you download assets from.

config :petal_pro, :content_security_policy, %{
default_src: [
"'unsafe-inline'",
"'unsafe-eval'",
"'self'",
"https://cdnjs.cloudflare.com",
"https://cdn.skypack.dev",
"https://rsms.me",
"https://res.cloudinary.com/"
]
}

Unfortunately Alpine JS needs “unsafe-eval” to work. Because of this I have a goal to eventually remove Alpine JS altogether. The A in PETAL will have to represent “and”. Or maybe “Ash” if we end up implementing their framework.

New JS hook helpers

  • Dead view compatible hooks

Sometimes you want hooks to run in dead views. For example, I may want to run my tooltip library “tippy” on the landing page, which is dead (not a live view). Normally hooks can only run in a live environment, however I made a small change in app.js to run dead view compatible hooks when the page loads. This is great for small hooks that don’t communicate with a live view and just do some DOM manipulations.

import loadExternalFile from "../lib/load-external-file";

const TippyHook = {
deadViewCompatible: true,
mounted() {
this.run(this.el);
},
updated() {
this.run(this.el);
},
run(el) {
loadExternalFile([
"https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.min.js",
]).then(() => {
tippy(el);
});
},
};

export default TippyHook;
  • Dynamically load external libraries

As you can see in the “tippy” hook code above, I run a function loadExternalFile that takes an array of URLs. This will fetch the files, but cache them so they only get fetched once. Even if you have 100 tooltips on one page, these external files will only get loaded once.

This is great because we can now easily plug in any NPM library and start using it without a build system.

Using a build system (ESBuild) and creating a package.js file to host 3rd party libraries to me is less favourable. I like not having Node as a dependency - your web app is easier to install and just feels lighter.

  • Oban jobs table

Next up we have an Oban jobs table. This simply is a simple version of Oban Pro. You can see your jobs and retry or cancel jobs.

Oban Jobs

May, 2022

Petal Pro

Petal Pro v1.2.0 is now available to download for our subscribed members 👏

Social logins (Oauth2 SSO)

Social logins (Oauth2 SSO)

We’ve included Google & Github to get you started and make it super easy for you to enable login with any other OAuth provider you might want add to your app.

We’ve also included our very first Petal Pro component <.social_button> that produces beautiful social login buttons in two variants (“solid” and “outline”). Social button currently supports:

  • Google
  • Github
  • Facebook
  • Twitter
  • Apple
  • Linkedin

Passwordless auth

Petal Pro guide

Users of your app can now register/sign in via a pin code sent to their email. It’s simple to enable or disable at any time.

Multi-tenancy

CRUD interfaces

You can now optionally create an organization, invite & manage members, and more.

User lifecycle actions Run code after actions like register, sign_in, sign_out, password_reset, etc

New generator mix petal.gen.html (same args as phx.gen.html)

New component <.markdown content=””> & <.pretty_markdown content=””> (uses Tailwind Typography plugin)

Added License and Privacy pages Includes some content from a template to get you started

New layout <.layout type=”public”> For public marketing related pages like landing, about us, privacy, etc

Hooks can now be run in dead views if compatible (see color-scheme-hook.js as an example)

For a quick overview on upgrading from v1.1.0, please refer to this guide.