Flamekit

Build websites faster with Flamekit Phoenix Framework Development extension for VSCode.

---

Flamekit is a VSCode extension that provides PETAL stack setup with Phoenix aware code and file generation.

Developed from scratch and tested on Linux.

• Install
• Demonstration
• Tutorial
• Fragments
  • AlpineJS
  • TailwindCSS
• Commands
  • Phoenix Setup Petal
  • Phoenix Create CSS

Install

Using VSCode Marketplace or Github. (project status: work-in-progress)

Demonstration

Play Demo Video

Tutorial

Create a Phoenix project:

$ mix phx.new example --live --no-ecto --no-dashboard

Open in VSCode / VSCodium:

$ code ./example/

Create a new file:

Workspace Filepath:lib/example_web/live/helloworld.html.leex

Add a Fragment to new file

File Content:

<divclass="p-2 m-2">=ll{[Hello,MyExample]}</div>

Save

Files are created and the active document contents are changed after the document has been saved.

Files Created:

 new file: assets/css/example_web/live/hellworld.html.leex.css
new file: assets/css/flamekit.index.css
new file: lib/example_web/live/hello.ex
new file: lib/example_web/live/my_example.ex

File Contents:

<divclass="p-2 m-2"><%=live_component(@socket,Hello) %></div><divclass="p-2 m-2"><%=live_component(@socket,MyExample) %></div>

Save the document again to keep the changes.

Edit

You may now edit your components.

Default Generated Component Contents:

# my_example.exdefmoduleMyExampledousePhoenix.LiveComponentdefrender(assigns)do~L""" MyExmaple"""endend

---

Fragments

Fragments are text patterns that trigger file or project altering events after a document has been saved. Limitations being that only one Fragment per-line may exist.

Provided names, convert into EEXrender or LEEXlive_component strings, and create files to match the tag. The files produced will match the names provided, and result in new files being placed in assets/css/ and the parent document directory with their relative associated paths.

• Creates Files
• Creates Code

Example Document:

example_web/hello/hello_world.html.eex

Example Document content:

Without tags
=f{[hello, world]}
With tags
<aabc="123">=l{[hello, world]}</a>
Live
<divclass="number">=ll{[OneComponent]}</div>

Example Document content after save:

Without tags
<!-- Phoenix Create CSS Command: created assets/css/example_web/hello/_hello.html.eex.css --><!-- created example_web/hello/_hello.html.eex --><%= render "_hello.html" %><!-- Phoenix Create CSS Command: created assets/css/example_web/hello/_world.html.eex.css --><!-- created example_web/hello/_world.html.eex --><%= render "_world.html" %>
With tags
<!-- Phoenix Create CSS Command: created assets/css/example_web/hello/_hello.html.eex.css --><!-- created example_web/hello/_hello.html.eex --><aabc="123"><%= render "_hello.html" %></a><!-- Phoenix Create CSS Command: created assets/css/example_web/hello/_world.html.eex.css --><!-- created example_web/hello/_world.html.eex --><aabc="123"><%= render "_world.html" %></a>
Live
<!-- Phoenix Craete CSS Command: created assets/css/example_web/live/one_component.ex.css --><!-- created example_web/live/one_component.ex --><divclass="number"><%= live_component(@socket, OneComponent) %></div>

Usage Patterns:

# Fragment
=f{hello}
=f{[red, yello, blue]}
# Fragment Live =lf{world}
=lf{[bird, dog, duck, cat]}
# Fragment List
<tagx="x" y="y" z="z">=l{[hello, world, one, two]}</tag>
# Fragment List Don't Do : Will expand `div` instead of `span`
<div><spanclass="dont-do-this">=l{[will, be, div]}</span></div>
# Fragment List Okay:
<div><spanclass="do-this">=l{[will, be, span]}</span></div>
# Fragment Live List
<tagliveExample="true">=ll{[a, b]}</tag>

Fragment: =f{}

Fragment Array: =f{[]}

Fragment List: =l{[]}

Fragment Live: =lf{}

Fragment Live Array: =lf{[]}

Fragment Live List: =ll{[]}

---

AlpineJS

AlpineJS triggers are applied within JS and TS documents.

Install: =setupAlpine

An import for AlpineJS is added to the document, along with LiveView compatability code. A terminal is then opened, and the alpinejsnpm package is installed.

NOTE: Places imports at top of active document, and deletes the input of =setupAlpine. Place at bottom.

• Creates Files
• Creates Code

Example Document:

app.js

Example Document content:

// We need to import the CSS so that webpack will load it.// The MiniCssExtractPlugin is used to separate it out into// its own CSS file.import"../css/app.scss";// webpack automatically bundles all modules in your// entry points. Those entry points can be configured// in "webpack.config.js".//// Import deps with the dep name or local files with a relative path, for example://// import {Socket} from "phoenix"// import socket from "./socket"//import"phoenix_html";importtopbarfrom"topbar";// Show progress bar on live navigation and form submitstopbar.config({barColors: {0: "#29d"},shadowColor: "rgba(0, 0, 0, .3)"});window.addEventListener("phx:page-loading-start",info=>topbar.show());window.addEventListener("phx:page-loading-stop",info=>topbar.hide());=setupAlpine

Example Document content after save:

importAlpinefrom'alpinejs';import{Socket}from"phoenix";import{LiveSocket}from"phoenix_live_view";// We need to import the CSS so that webpack will load it.// The MiniCssExtractPlugin is used to separate it out into// its own CSS file.import"../css/app.scss";// webpack automatically bundles all modules in your// entry points. Those entry points can be configured// in "webpack.config.js".//// Import deps with the dep name or local files with a relative path, for example://// import {Socket} from "phoenix"// import socket from "./socket"//import"phoenix_html";importtopbarfrom"topbar";// Show progress bar on live navigation and form submitstopbar.config({barColors: {0: "#29d"},shadowColor: "rgba(0, 0, 0, .3)"});window.addEventListener("phx:page-loading-start",info=>topbar.show());window.addEventListener("phx:page-loading-stop",info=>topbar.hide());constcsrf_token=document.querySelector("meta[name='csrf-token']").getAttribute("content"),live_socket=newlive_socket("/live",Socket,{params: {_csrf_token: csrf_token},dom: {onBeforeElUpdated(from,to){if(from.__x){Alpine.clone(from.__x,to);}},},});// expose live_socket on window for web console debug logs and latency simulation:// >> live_socket.enableDebug()// >> live_socket.enableLatencySim(1000) // enabled for duration of browser session// >> live_socket.disableLatencySim()live_socket.connect()&&(window.live_socket=live_socket);

---

TailwindCSS

TailwindCSS triggers are applied within CSS and SCSS documents.

Install: =setupTW

An import for TailwindCSS is added to the document, and a terminal is then opened. The terminal will execute commands to create (~ WARNING: overwrites ~) configurations for postcss.config.js, and tailwind.config.js. The Webpack configuration is updated, not overwritten, at webpack.config.js. The terminal will then execute npm install for all required packages.

NOTE: Places imports at top of active document, and deletes the input of =setupTW

• Creates Files
• Creates Code

Example Document:

app.css

Example Document content:

=setupTW

Example Document content after save:

@import"tailwindcss/base";
@import"tailwindcss/components";
@import"tailwindcss/utilities";

---

TypeScript

TypeScript triggers are applied within JS and TS documents.

Install: =setupTS

Adds TypeScript to assets/webpack.config.js, installs via npm, changes Webpack to app.ts, and finally adds ts-loader for .ts files.

• Creates Code

---

Commands

Command: Phoenix Setup PETAL

Automatically installs and configures PETAL stack. Will either update existing files after making a backup (ie. /\.(js|ts|css|scss)\.bak$/), or create new ones.

Command: Phoenix Create CSS

Automatically creates and imports CSS files for standard and LiveView Phoenix projects. If this command is called while working on a file ending with .html.eex or .html.leex, a corresponding css file will be created in assets/css/. All imports are automatically deduplicated and stored in assets/css/flamekit.css.

Example Document:

/tmp/project/lib/mysite_web/live/page_live.html.leex

Run Command Results:

New file: /tmp/project/assets/css/mysite_web/live/page_live.html.leex.css
New/Updated file: /tmp/project/assets/css/flamekit.css