slime-lang/slime

Minimalistic HTML templates for Elixir, inspired by Slim.

slime's Issues

evaluation with character sequence 'do' in a word

After a lot of head scratching I found the following :

=number_input f, :amount, class: "js-donation-amount"

This blows up with :

== Compilation error on file web/views/investment_view.ex ==
** (EEx.SyntaxError) web/templates/investment/new.html.slim:1: unexpected token ' end '
    (eex) lib/eex/compiler.ex:59: EEx.Compiler.generate_buffer/4
    (phoenix) lib/phoenix/template.ex:320: Phoenix.Template.compile/2
    (phoenix) lib/phoenix/template.ex:154: Phoenix.Template."-MACRO-__before_compile__/2-fun-0-"/3
    (elixir) lib/enum.ex:1261: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix) expanding macro: Phoenix.Template.__before_compile__/1
    web/views/investment_view.ex:1: Sheep.InvestmentView (module)

This happens when I use any character sequence containing "do" in it for the class: attribute
It seems it's not limited to the class attribute though but any for that matter.

Textarea adds blank lines

When I upgrade a project from slim_fast 0.7.0 to 0.9.1, the Slim code

textarea id="code" name="code" = "foo"

that previously on 0.7.0 would output

<textarea id="code" name="code">foo</textarea>

now on 0.9.1 outputs

<textarea id="code" name="code">foo
</textarea>

This leads to extra linebreaks in the received input, that were not intended.

Automatically self-close some tags

With #50 we can explicitly ask for a self-closing tag.

Ruby Slim also automatically closes the usual suspects – see docs:

Note, that this is usually not necessary since the standard html tags (img, br, ...) are closed automatically.

We don't seem to do that currently, but it might be fairly easy to add on top of @vicmargar's work in #50.

List of self-closing tags: http://stackoverflow.com/questions/13915201/what-tags-in-html5-are-acknowledged-of-being-self-closing

How to use Elixir `case` expression

Hello!

How does one use this expression in these templates?

SlimFast v1.0

After reviewing the Slim documentation (here) it appears that we are almost at feature parity with the Ruby implementation. To me reaching feature parity would constitute a v1.0 of SlimFast. With that in mind I attempted to identify the outstanding functionality and created issues where necessary:

• Closed tags (#43)
• Splat attributes (#44)
• Dynamic tags (#45)

Are there any features missing or any we should not consider to be part of a v1.0 release?

Thoughts, concerns, feedback?

cc @Rakoth @henrik

Leading and trailing whitespace

Support leading and trailing whitespace with < and >: https://github.com/slim-template/slim#trailing-and-leading-whitespace--

id attributes are not merged

  test "shorthand and literal id attributes are merged" do
    template = ~s(#id-one id="id-two")
    assert render(template) == ~s(<div id="id-one id-two"></div>)
  end

This fails.

Over-escaped quotes in attributes

Seems like with 0.7.1, this:

link rel="stylesheet" href="#{static_path(@conn, "/css/app.css")}"

Started producing this output:

<link rel="stylesheet" href=&quot;/css/app.css?vsn=625AD8D&quot;>

Which breaks styling because the quotes are over-escaped.

Same result if I try

link rel="stylesheet" href=static_path(@conn,"/css/app.css")

(without a space after the comma, due to #32)

"__v" warnings

Warnings when booting Phoenix:

web/views/layout_view.ex:2: warning: the underscored variable "__v" is used after being set. A leading underscore indicates that the value of the variable should be ignored. If this is intended please rename the variable to remove the underscore

This looks a likely culprit: https://github.com/doomspork/slim_fast/blob/c1b581fc0e222d54eeef98761f72c3fa874b28dd/lib/slim_fast/compiler.ex#L18

Support boolean attributes

input(type="password" required)

should become

Support single quoted attributes

head
  meta name='keywords' description='one two three'

Relevant code: https://github.com/doomspork/slim_fast/blob/master/lib/slim_fast/parser.ex#L76

Add support for comments

Slim docs: https://github.com/slim-template/slim#code-comment-

Add support for code comments, html comments, and IE conditions.

Doesn't support "p: b hello" syntax

Slim: p: b hello

Expected HTML: <p><b>hello</b></p>

Actual HTML: <p>b hello</p>

http://www.rubydoc.info/gems/slim/frames#Inline_tags

Use a struct to represent a parsed line in Slime.Parser

A large unlabelled tuple is much less clear and harder to modify than a struct.

Why do we sometimes render void tags with a redundant slash?

<br />
<br>

Shouldn't we always use the latter?

Inline HTML

Add support for inline HTML, relevant docs: https://github.com/slim-template/slim#inline-html-

How to install

Hi Sean,

tried to put slim_fast to work.
Created a blank Phoenix app.
Added package as dependency in mix.exs like all others.
Ran mix deps.get.

Then I tried a few things, ranging from simply changing my template’s suffix to .slim to adding SlimFast.evaluate(slim, site_title: "Website Title") to different files, none of which worked :)

Can you give us some pointers on how to put it to work?

Once I understand it, I’ll be happy to add it to the README if that’s helpful.

Thanks

Should we be converting all tags and some attribute values to atoms?

slime/lib/slime/parser.ex

Line 94 in 9f9ce38

defp attribute_key(key), do: key |> String.strip |> String.to_atom

slime/lib/slime/parser.ex

Line 203 in 9f9ce38

key = String.to_atom(type)

slime/lib/slime/parser.ex

Line 238 in 9f9ce38

tag -> String.to_atom(tag)

These are not garbage collected, so it seems like something we might want to move away from.

Use the yecc parser generator instead of lots of regexes

Pygments has a BNF we might be able to use.

https://bitbucket.org/birkenfeld/pygments-main/src/cb583a0e37c776b77e3c49200c1658c920e9845a/pygments/lexers/webmisc.py?at=default&fileviewer=file-view-default#webmisc.py-885

This isn't something I know anything about, so should be fun!

https://en.wikipedia.org/wiki/Backus%E2%80%93Naur_Form

Come up with a catchy tag line / description

Slim:

A lightweight templating engine.
Slim is a template language whose goal is reduce the syntax to the essential parts without becoming cryptic.

Jade:

Jade - robust, elegant, feature rich template engine for Node.js

HAML:

Beautiful, DRY, well-indented, clear markup: templating haiku.

Add support for CLI

It would be great to have slim_fast accessible on the command line. Additionally, it might be fun to benchmark the original Ruby implementation of slim against slim_fast.

setting additional class (via variable)

using

.foo class="bar" baz

results in

<div class="foo">baz</div>

and should be

<div class="foo bar">baz</div>

Should we allow "- if" (not just "= if")?

In Ruby Slim, you can do

- if foo
  p hello
- else
  p bye

In slim_fast, you must do

= if foo do
  p hello
- else
  p bye

Are there strong reasons to deviate?

Support multi-line verbatim text

SlimFast supports verbatim and verbatim w/ whitespace but only on one line. Per the slim documentation, any subsequent lines with a deeper indentation are included.

Reference website hosted on github pages

Much like http://jade-lang.com/reference/

Support splat attributes

Splat converts a hash into attribute key/value pairs.

Slim:

.card*{'data-url'=>place_path(place), 'data-id'=>place.id} = place.name

HTML:

<div class="card" data-id="1234" data-url="/place/1234">Slim's house</div>

See slim docs: Splat Attributes.

No way to conditionally add attribute?

I want to either set the "checked" attribute of a checkbox, or to have no such attribute at all. Because if the attribute is present but the value is e.g. an empty string, the box is still considered to be checked.

Not sure how to do this with slim_fast. Tried things like:

# Compilation error
input type="checkbox" name="meta" value="true" checked=(if @meta, do: "true")

# Not rendered correctly at all
input*[ type: "checkbox", name: "Meta", value: "true", checked: @meta ]

Ended up working around it by rendering the entire element in two different logic branches:

      = if @meta do
        input type="checkbox" name="meta" value="true" checked="checked"

      = unless @meta do
        input type="checkbox" name="meta" value="true"

Language reference/guide

It would be great to have a language guide somewhere, something like http://jade-lang.com/reference/ or http://www.rubydoc.info/gems/slim/frames. It could go through all the syntax we support, with examples. Especially seeing as we don't map exactly to Ruby Slim.

We could also mention any current limitations with stuff we have yet to implement, gotchas and such.

https://github.com/elixir-lang/ex_doc supports "extras" so maybe that would make sense. Or could we get a usable guide out of the moduledocs (#18) without writing "extras"?

support for dashed-classes

.my-css-class test

should become

test

currently :

-thing test

Attribute order matters ?

Hi there, I've recently imported some slim template from a Ruby project, at first everything was fine. Then something happens !

I write a test in test/rendering/attributes_test.exs to make this more understable:

test "attributes order doesn't matter" do
  assert render("a#bar.foo") == ~s(<a class="foo" id="bar"></a>) # => true
  assert render("a.foo#bar") == ~s(<a class="foo" id="bar"></a>) # => false
end

Support dynamic tags

Allow for the creation of tags using attribute splats. Attributes should include a :tag key.

See Slim docs: Dynamic Tags

Benchmarks against eex, calliope, etc.

It'd be great if we can see how this library performs.

support for attributes values containing an equal sign in them

example :

meta content="width=device-width, initial-scale=1", name="viewport"

Replace the Branch struct with various different structs, one for each type of Slime node

Structs will then only have properties relevant to them, and we can dispatch to the render function using a protocol if we please.

unescaped attributes

Hi. Is there a way to avoid escaping of an attribute? Slim has '==' for that but looks like it doesn't work in Slime

Support closed tags

This:

img src="image.png"/

Should produce this:

<img src="image.png"/>

ExUnit sample (test/renderer_test.exs):

test "render closed tag" do
  assert render(~s(img src="image.png"/)) == ~s(<img src="image.png"/>)
end

Slim docs: Closed tags

setting style via variable

A case i found :

-style = get_flash(@conn, :email_error) && "" || "display: none"
.alert-box.warning.js-news-letter-error.text-center style=style data-alert="data-alert"
  .js-error-message= get_flash(@conn, :email_error)

renders to :

<div class="alert-box warning js-news-letter-error text-center" data-alert="data-alert" style="display:" none=""><div class="js-error-message"></div></div>

where the problems is style="display:" none="" which should be style="display: none"

Benchmark SlimFast and Ruby Slim

I think it would be interesting to compare SlimFast and the original Slim implementation. Putting together a simple benchmark could be fun.

Sample Projects

It might be helpful to put together sample projects for integrating slim_fast into a Plug and Phoenix app.

Rename project?

Should we rename the project? It's similar but not identical to Ruby Slim.

Earlier discussion: #54 (comment)

Remove unqualified import statements

Unqualified import statements make it unclear where functions are defined, and offer no advantage over full qualified names, or aliased names.

Add moduledocs to project

Document the project modules with moduledoc where appropriate.

Refactor Slime.Parser

I'm finding this module very difficult to read and to modify, and I think it would be a good candidate for refactoring.

Use of module attributes over string literals makes it difficult to understand which function definition is going to match without scrolling to the top of the module to read their assignments.

Lots of the functions are complex and difficult to understand the intent of.

Any plans to support embedded engines?

As in, the ability to embed markdown, javascript, coffeescript, etc, etc?

http://www.rubydoc.info/gems/slim/frames#Embedded_engines__Markdown______

I can understand if that's a far-futures goal, but if so, it might be a good idea to update the README to explicitly state that it's not supported.

Better syntax error messages

** (SyntaxError) web/templates/page/index.html.slim:1: syntax error before: '|'
** (SyntaxError) web/templates/layout/app.html.slim:1: unexpected token: "}". "(" starting at line 1 is missing terminator ")"
I've been trying to convert from ruby slim to slim fast. It's annoying to only get "line 1 syntax errors".
Have I missed some configuration setting?
Is this planned on making it better in the future?

Doesn't support else (?)

Had no luck with this:

      = if @meta do
        input type="checkbox" name="meta" value="true" checked="checked"
      = else  # also tried "- else"
        input type="checkbox" name="meta" value="true"

So I ended up working around it like this:

      = if @meta do
        input type="checkbox" name="meta" value="true" checked="checked"

      = unless @meta do
        input type="checkbox" name="meta" value="true"

Code-as-attributes doesn't work, e.g. src=static_path(@conn, "x.css")

This gives a "missing terminator" error:

link rel="stylesheet" href=static_path(@conn, "/css/app.css")

This works, though:

link rel="stylesheet" href="#{static_path(@conn, "/css/app.css")}"

The equivalent of the first example works in the Ruby version of Slim.

Maybe it could make sense to include a valid example of a dynamic attribute value in the README docs?

Support `element= expression` syntax

I think that the two expressions below should be equivalent, but they are not.

p= 1 + 1
p = 1 + 1

<p>1 + 1</p>
<p>2</p>

Document public API in README

• Slime.render/1
• Slime.render/2
• Slime.function_from_string/5
• Slime.function_from_file/5

Blank lines in the template generate empty divs

When writing a template, leaving a blank line between two elements generates an empty <div> in the resulting HTML code. This only seems to happen if the blank line contains a certain number of whitespace characters, a common scenario when using editors that auto-indent. This doesn't seem to be the desired behavior (it does not happen in the Ruby implementation of Slim).

Example:

  p First Paragraph

  p Second Paragraph

(note: GitHub is stripping white spaces, but that blank line between the two p elements includes 2 white spaces, preserving indentation of said elements)

Generates:

<p>First Paragraph</p>
<div></div>
<p>Second Paragraph</p>