Data mapping

[hylickipiotr]

Hello, I saw your example and I wanted to simplify the code by using data maping, but I think is something wrong in your script. I based my code on the JSX language. I think, you will need to considere this to integrate it to your project.

Before:

nav {
  --data:(
    links: ['one', 'two', 'three'],
  );
  --html:(
    <div class="item">${data.links[0]}</div>
    <div class="item">${data.links[1]}</div>
    <div class="item">${data.links[2]}</div>
  );
}

After:

nav {
  --data:(
    links: ['one', 'two', 'three'],
  );
  --html:(
  ${data.links.map(link => <div>${link}</div>}
  );
}

[MikeAliG]

Well, this is not using JSX, it is using string literals in to bring in the data into the html so JSX is not supported yet (fingers crossed it will be soon).

(PS. I'm not the author but I wanted to help to this amazing project. and hopefully I can contribute to this project for JSX and lots more.)

So just for playing around you may use javascript to map through array and add it to the document node: like:

--html: (
<ul id="demo"></ul>
)

--js: (
var links = ["one", "two", "three"];

function getListItems(item) {
  return (item = `<li>${item}</li>`);
}

document.getElementById("demo").innerHTML = links.map(getListItems);

)

Edit: --html tag

[scottkellum]

Thanks @ALITHEALI !

I think I want a language plugin system first. I’m not personally a fan of JSX but would like to support it and other languages like pug as plugins. So you would use --jsx, --scss, --pug, --sql or whatever you want to parse and if it should be parsed as markup, script, data, or style.

[scottkellum]

See issue #14

[MikeAliG]

No worries @scottkellum !

Sure, I just read your issue, well I think your idea about the plugin system is much much better since if somebody doesn't like --jsx, they can use --html and so on so they are obligated to use one or the other, we are currently working on an example project to see the places which we can make a plugin for and for the time being I will send a PR for this example project to the examples directory for further showcase.