v2.3.0 - Importing!

Importing 8829ce5

You can import other poggies documents by using a template declaration-like syntax.

// component.pog
p "Hello from a component!"

// index.pog
$$component from "./component.pog"

h1 "Hello from the root!"
$component

// →→→ index.html
<h1>Hello from the root!</h1>
<p>Hello from a component!</p>

v2.2.0 - Client-sided JS integration

Styles & Scripts - 410fa59

For child content of styles and scripts, curly braces are now allowed.

style {
  button {
    color: green;
  }
}
script {
  const button = document.querySelector("button")
  button.onclick = () => alert("Hi!")
}

With Scripts - bb84265

You can now use with script to easily attach a script to an element:

button "Click Me!" with script {
  setTimeout(() => {
    button.textContent = "Click Me!!!"
  }, 10_000)
}

With Scripts capture the element as its name (custom elements like my-timer get captured as myTimer), and its data- properties as dataset.

Event Handlers - 3bd2247

You can use on:event as a shortcut to attach event listeners to an element.

button(data-counter=(0) on:click|preventDefault {
  dataset.counter += 1
  button.textContent = `Clicked ${dataset.counter} times!`
}) "Click Me!"

(inspired by svelte's on:event element directives, but without nonpassive)

2.1.1

• fix empty template causing invalid codegen (in 6f13c30)

v2.1.0 - Slots!

Slots

2040c10

You can now make use of slots within templates, which are a way to embed content from the template call site. Maybe an example would help:

$$centered_div {
  div(style="display: grid; place-items: center;") {
    div {
      // embed a slot with `slot!`
      slot!
    }
  }
}

$centered_div {
  h1 "Hi!"
}
// html output
<div style="display: grid; place-items: center;">
  <div>
    <h1>Hi!</h1>
  </div>
</div>

Slots can also have names:

// don't forget to name the slots by the parameters
$$red_and_blue(red blue) {
  div(style="color: red;") {
    // `slot!(name)` for named slots.
    slot!(red)
  }
  div(style="color: blue;") {
    slot!(blue)
  }
}

$red_and_blue(red={
  h1 "Red!"
} blue={
  h1 "Blue!"
})
// html output
<div style="color: red;">
  <h1>Red!</h1>
</div>
<div style="color: blue;">
  <h1>Blue!</h1>
</div>

Fixes

• Improved Dynamic bracket handling (in 2040c10)
• Support DynamicText directly in {} (in 2040c10)
• Allow while as a dynamic (in cc01261)
• Improve reader.jsExpression() (in b355af8)
• use more inclusive JS identifier handling every now and then (in b355af8)
• Get rid of unused __JSONIFY__ parameter (in 6b88556)
• slightly optimize by moving __OUT__ into the with() block (in 6b88556)
• minify escapeHTMLSource (in 6b88556)
• stop using &apos escape. (in 6b88556)

2.0.0 - Candy

Improved syntax

Text nodes

Changed text nodes from [...] to "...", '...', and [>...] to `${...}`. They all still support multiline, of course.

ul {
  li 'Static 
        - single-quoted' 
  li "Static 
        - double-quoted" 
  li `Dynamic 
        - template-quoted 
        - 1 + 2 is ${1 + 2}`
}

Attributes

Changed attributes from value=>"1 + 2" to value=(1 + 2), or for example value=`${1 + 2}`, value=[1, 2]

a(href=`https://${hostname}/homepage`) "Home"
p(data-five=(2 + 3)) "hai :3"

Dynamics

Removed the dynamic <> block and instead allow for, if, and else in child {} blocks

ul {
  for(pet of list) {
    li `${pet}s can have a little salami. as a treat` 
  }
}

Templates

Template definitions are now permitted outside of the toplevel, and are declared with $$name(props){children} instead of $name(props){children}

ul {
  $$fruit(name tasty) {
    li {
      if(tasty) `i like me a bit of ${name}`
      else `not a big fan of ${name} ...`
    }
  }
  $fruit(name=bananas tasty=(true))
  $fruit(name=kiwis tasty=(true))
  $fruit(name="poisoned apples" tasty=(false))
}

Comments!

Add // line comments

body {
  p "welcome to my page :D"
  p "i love salami"
  // heheheheheh. they dont know i dont like salami that much
}

(note: released on npm as 2.0.1, 2.0.0 featured attr={1+2}, which was not meant to make it.)
All Changes: v1.2.0...v2.0.0

v1.2.0 - Templates!

You can now create templates, which practically function as custom elements.

You can declare templates at the top level by defining an element that starts with a $.

$list(items){
    ul<for(item of items){
      li[>item]
    }>
}

Then, at lower levels, you can use them with their corresponding parameters.

html{
  body{
    $list(items=>"['Apples', 'Pears', 'Bananas']")
  }
}

This results in:

<html>
  <body>
    <ul>
      <li>Apples</li>
      <li>Pears</li>
      <li>Bananas</li>
    </ul>
  </body>
</html>

• Apples
• Pears
• Bananas

v1.1.0 - doctype in the document!

• !doctype(html) is now supported in Poggies documents, this deprecates the doctype render option
• Optimizations in the generated render function

v1.0.0 - The Full Rewrite

Fully rewrote poggies to typescript, with a new system that takes poggies input, and compiles it to a function that creates a HTML document.

This new approach to generating the HTML is 13x faster than the old one. Additionally, object deconstruction is now supported in for...of loops.

Poggies now also uses ESLint to have better code quality.

v0.3.1 - For improvements

• Added support for arrays that are children of passed variables (<for(word of test.sentence)[>word]>)
  324eda2
• Allow attributes without quotes.
  2ef899f

v0.3.0 - Children rework

Children rework, 100% backwards-compatible.

• Adds support for span[Line 1]{br}[Line 2]
• Adds support for TextNodes, Elements, and Dynamics ([]{}<>) to dynamics instead of only Elements
  This allows for for(object of array)<if(object.show)[>object.content]>