-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ideas #23
Comments
Hi zdenko, Sorry I haven't been very responsive on this. I've taking some time to update Jadelet again and welcome any contributions along these lines. I've also got some ideas for an even simpler version that could remove the dependence on CoffeeScript completely by removing code in the templates. In my more recent work I've noticed that I generally avoid logic and iteration in the templates themselves. As the most active member of the Jadelet community I'd love to hear your feedback sometime. Thanks! |
Nice having you back 😄 By removing the code from the templates you mean remove logic completely, or get rid of Coffeescript? <template>
div
button(click=@increment) Increment
label= @count
</template>
self =
count: Observable(0)
increment: -> @count.increment() This is similar approach as in Vue.js, Riot.js, or Svelte But, I feel that such simplicity can increase organizational efforts. By breaking the code into "reusable components," you need to think ahead what to put where, and how to efficiently nest components. Can you share details of some of your ideas if possible? Is observable still in your path? |
I know this is old... but better late than never :P What I've been doing recently is using template strings in JS or multiline strings in CoffeeScript like this: Template = Jadelet.exec """
app
.toolbar
button(click=@save) Save
@content
"""
document.body.appendChild Template
save: -> alert "pretend this saved"
content: contentElement It works pretty well for my use cases and is nice and simple and doesn't require any additional build processes or tools. Good luck! |
This looks cool, but I can't figure out where |
I think in this version it's actually I may have Jadelet v2 ready sometime soon. It's quite a bit smaller and faster. |
Ah, that makes sense. But in that case, you have to set the
😮 Who do I have to bribe to get access to it? 🙏 |
I think I got this. 😄 h1= this.title |
@zdenko that's pretty much it 🎊 I'll see if I can update this repo with a copy of Jadelet v2. I've been doing most of my development in whimsy.space so I don't use GitHub much anymore. |
Just pushed a preview of Jadelet2 to 1st third of the file is It's definitely not "ready" as a package, lots of chores and setup to do but I'm out of time for today. If there's excitement I'll get it finalized sometime soon. |
Oh, there is excitement for sure :) I tried to wrap my head around the new
I tried this object {
list: [1, 2, 3, 4],
itemTpl: Jadelet2.exec("li @item"),
item: function (item) { return this.itemTpl({item}) }
} but, I couldn't get it to work. In the end, I came up with this solution {
items: [1, 2, 3, 4],
itemTpl: Jadelet2.exec("li @item"),
get lineItems() { return this.items.map( item => this.itemTpl({item}) ) }
} Is there a better way? |
@zdenko your I just published the |
@STRd6 I've been playing with the v2, and I love it. Template = Jadelet2.exec """
div
.toolbar
button(click=@save) Save
@content
""" Template = Jadelet2.exec """div
.toolbar
button(click=@save) Save
@content"""``` Template = Jadelet2.exec """
div
.toolbar
button(click=@save) Save
@content
""" will be transpiled into Template = Jadelet2.exec(`div
.toolbar
button(click=@save) Save
@content`); But, when I'm working in JS, I have to be very careful about the indent. (function(self) {
...
function foo() {
...
myTemplate = (props) => {
if (props.value === 42) {
return `div
.toolbar
button(click=@save) Save
@content`;
} else {
return `div
.toolbar
button(click=@cancel) Cancel
@content`;
}
...
};
...
};
...
})(global); To solve this and have nicer formatting of the templates, I came up with the idea to store the first indent level in the parser and then deduct this value from the indentions. function reduceLines(lines) {
var depth = 0;
var stack = [[]];
+ var firstIndent = 0;
lines.forEach( ([indent, line]) => {
+ if (firstIndent === 0 && indent > depth + 1) {
+ firstIndent = indent - 1;
+ }
+ indent = indent > firstIndent ? indent - firstIndent : indent; This change enables me to write more "freely": (function(self) {
...
function foo() {
...
myTemplate = (props) => {
if (props.value === 42) {
return `div
.toolbar
button(click=@save) Save
@content`;
} else {
return `div
.toolbar
button(click=@cancel) Cancel
@content`;
}
...
};
...
};
...
})(global); Of course, I didn't run any proper tests, so I'm not sure if this is bulletproof. And I think I've probably found a minor issue in the o = Jadelet2.observable
foo = o 42
foo()
# Uncaught TypeError: array is undefined I think that in lines Line 155 in ccc73dc
Line 159 in ccc73dc
self should be replaced with global .
After the change, the example above works. |
Thanks @zdenko! I've updated the v2 branch with this fix as well as some more dependency cleanup and updates to CHANGELOG.md and README.md as well. It's published to npm as Let me know if there are any other issues that you encounter. |
@STRd6 I just found a bug in my solution for indent. I'll prepare a fix and make a pull request. |
I have few proposals related to the great news 😄
Jadelet, because of its simplicity and aesthetics, is also my favorite choice whenever possible.
So, I would like to see it moving forward and am ready to help.
I already made some "improvements" (not published yet), i.e., upgrade to CoffeeScript 2, replaced deprecated packages (
wrench
=>through2
). And, last but not least, #21 and #6.I also started playing with adding support for template compiling (similar to #18) to different bundlers. I began with Parcel, which is my preferred choice.
Example:
templates/intro.jadelet
)h1 Hello #{@name}
Plugins for other bundlers (Webpack, Rollup) could be prepared as well.
I think this would make an easier start for new users.
Let me know.
The text was updated successfully, but these errors were encountered: