NMBL (no more brackets lang) templating example

nmbl-example.nmbl

// single line comment - by default not rendered into html
//! but adding a leading "!" preserves the comment and renders as normal HTML comment

/* block comments work too
   and can be multiple lines */
/*! same exclamation applies to control preserving in html */

// no brackets used to specify a node in the tree, just write tag or component name, ex:
div
CustomComponentName

// indentation is significant and controls nesting
ThingWithChildren
  NestedChild1
  NestedChild2
    GrandchildThing
  NestedChild3

// css id and class(es) can optionally be specified with shorthand
CoolThing#id.class1.class2

// props - treated like html just put within "()" after tag
// single or double quotes are fine
ThingWithProps(staticProp="foo" :boundProp="somevar"  booleanTrueProp v-directive)

// `:prop` alone expands to `:prop="prop"`
// (svelte does this natively but vue does not, so its handy)
ExpandBoundPropExample(:firstName)

// text content example
div nested text content can be written on the same line
p
  | or indented by using a leading "|"
  // comments can be nested too
  | trailing backslash preserves trailing whitespace \
  | text and child nodes can be mixed
  CoolLink(href="https://google.com") click here for more info
  | can still use regular <strong>html</strong> within text

// comments work within node props too
// useful for explanatory comments, or for temporarily disabling props!
CoolThing(
  prop1 // this prop does this thing
  // temporarilyDisabledProp another
  prop3 /* blockCommentedProp
  anotherCommentedProp */ prop4

  //! preserved comments will be moved outside the tag (although probably should be avoided...)
)

CoolThingWithJsonProps(
  // multiline props are fine
  :prop1='{
    foo: "asdf",
    bar: 2,
  }'
)

// using template strings (``) doesnt need extra "" wrapper, ex:
ProfileCard(:fullName=`${firstName} ${lastName}`)
// equivalent to
ProfileCard(:fullName="`${firstName} ${lastName}`")

WIP - demo of NMBL's features and capabilities

please send any feedback to (theozero at gmail)