dromara / newcar

🪢A modern animation engine for JavaScript ecosystem based on Skia (canvaskit-wasm)
https://newcarjs.org
Apache License 2.0
686 stars 34 forks source link

HTML-like template function #36

Open wgxh-cli opened 4 months ago

wgxh-cli commented 4 months ago

Hey there! Imagine the such a situation: You want to make a video about math or something else, with a progress bar, a sidebar, a navbar, and, for example, something always visible while playing video.

Imagine another similar situation: You want to animate your website, but, of course, there will be complex hierarchy in your document. To do so, you need travel through them with your head hurt badly to solve this.

I'd prefer this:

// just for example here
// let's suppose we have a string decorator `skeleton` which create a template from a HTML-ish string.
// Context are nothing special but a obtainable object around, it may be, for example, stored in some widget.
skeleton`
  <div class="root">
    <ProgressBar value=${ctx.progress} />
    <style>
      ProgressBar { position: bottom; /* just a example */ width: 100%; height: 40px;  }
    </style>
    <div class="content">${/* Maybe filled in with parameters or context */}</div>
  </div>
`

Animation could be also implemented this way but need further discussion.

The example above threw the following problems immediately:

  1. The performance of this so-called skeleton function. That's what we actually cares in most situations. I'd like this function to perform at compile time, but this implies more complex works
  2. The features of this functions. We'd like this function to help us animate and construct our document's structure, but can this be simple to code? that is, what does this function actually do for us to simplify our programming?
  3. The difficulty of maintaining this feature.

Maybe we shall have further discussion on this issue. And BTW, I'm glad to help you develop, no matter we made the agreement on this issue!

sheepbox8646 commented 4 months ago

You can use the WebComponent to implement, I am happy to receive this idea

sheepbox8646 commented 4 months ago

btw do you have any social media account? Better in with conversation function, we can discuss.

wgxh-cli commented 4 months ago

I'm a former BugDuck member, exiting due to some personal reasons

My email address: wgxh-cli@qq.com

wgxh-cli commented 4 months ago

And for discussion, I think it's needed to express our ideas here to record our developing :)

wgxh-cli commented 4 months ago

And pardon for my digression. You may misunderstood what I mean here. This is a general way on all platform. Maybe it can be adapted for web through web component but for the usual cases, we'd better implement this ourselves.

wgxh-cli commented 4 months ago

If you permit, I'll open a PR then.

sheepbox8646 commented 4 months ago

Yes, I am delighted for your contribution, thanks!

sheepbox8646 commented 4 months ago

but pardon me, I am still understand your meaning, please peovide more description, thanks