omohokcoj

omohokcoj

X_component - component-based HTML templates for Elixir/Phoenix, inspired by Vue

x_component is a component-based HTML template library for Elixir. It uses template syntax and component-based approach similar to Vuejs. This library can replace Phoenix views/templates and phoenix_html in a Phoenix project (details).

  • Declarative HTML template syntax close to Vue.
  • Compile time errors and warnings.
  • Type checks with dialyzer specs.
  • Template code formatter.
  • Inline, context-aware components.
  • Smart attributes merge.
  • Decorator components.
  • Fast compilation and rendering.
  • Optimized for Gettext/Phoenix/ElixirLS.
  • Components generator task.

X components HTML rendering shows slightly better results than EEx with Phoenix.HTML.Engine . It was achieved due to safe/unsafe interpolation syntax (instead of {:safe, ...} tuples) and due to more compact HTML output with trimmed whitespaces (example). However, it shows a significantly faster rendering of nested components (templates in case of EEx) due to the inline components compilation:

Comparison:
X inline (iodata)          20.38 K
X inline (string)          14.48 K - 1.41x slower +19.99 μs
Phoenix EEx (iodata)        7.52 K - 2.71x slower +83.99 μs
Phoenix EEx (string)        6.43 K - 3.17x slower +106.39 μs

First Post!

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Cool! I’m curious how complicated the extensions added to the live view engine are, and whether they translate easily to other templating mechanisms. Is this something you’ve looked at at all?

Where Next?

Popular in Libraries Top

josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
zoltanszogyenyi
Hey everyone :wave: Excited to join this forum - I am one of the founders and current project maintainers of a popular and open-source U...
New
tompave
Hello there, I would like to share a feature toggles library (AKA feature flags) I’ve been working on. The main package is FunWithFlags...
New
seancribbs
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
New
kelvinst
Hey everyone! Well, we made this lib a while ago and now we decided to finally go out and public with it! It’s a tool for creating and m...
New
cjen07
parameterized pipe in elixir: |n> edit: negative index in |n> and mixed usage with |> are supported example: use ParamP...
New
tmbb
I’ve published the first version of my Makeup library. It’s a syntax highlighter for Elixir in the spirit of Pygments, Currently it highl...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
josevalim
Yes, yet another parser combinator library! Most of the parser combinators in the ecosystem are either compile-time, often using AST tra...
159 18262 141
New
bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
381 12391 119
New

Other popular topics Top

axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
Jim
As a follow up to my earlier question: I have the code compiling and running but not getting a successful login from the rest server. ...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
qwerescape
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...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Sub Categories:

We're in Beta

About us Mission Statement