search

ractivejs / ractive

Next-generation DOM manipulation
http://ractive.js.org
MIT License
5.94k stars 396 forks source link

Typescript poc #3334

Closed marcalexiei closed 4 years ago

marcalexiei commented 4 years ago

Description:

Hi Chris, We (@marcalexiei & @giovannipiller) have been thinking to contribute a bit to the project and had a couple of ideas.

Convert Ractive to Typescript

As suggested in #3172. This could help a lot while refactoring the code or hunting for bugs.

From our initial tests it looks like having a project which mixes JS and TS is possible, which should make things easier for us. We only noticed problems when importing JS from a TS file, but not the other way around.

Automate generation of API documentation

Documentation seems to be kind of an issue. Storing part of it alongside the code should make it easier to maintain, reduce duplication and avoid inconsistencies (ex. changing a type in the code should also update the doc)

We’ve set up this PR to start some progress and gather some discussion.

To generate the documentation:

  1. npm i
  2. npm run doc

As a proof of concept, we added some content forRactive.prototype.toHTML() method and Ractive.prototype.observe, which will be found in the following paths:

Is breaking:

Nothing, but it's a WIP

evs-chris commented 4 years ago

Just wanted to say that I think that a gradual move to ts is a great idea. There are some really chewy parts of ractive that will probably fight typing pretty hard, but it can probably be persuaded. I think it may help to modernize the build system a bit too, since gobble is no longer developed and likely stuck at node 8.

It's great to see a pr open up here! Let me know if you have any questions about the wild and wooly code base. I'd be happy to chat, and I'll try to lend a hand if you'd like when my schedule opens up a bit.

marcalexiei commented 4 years ago

Hi @evs-chris, I have more than 50% of the conversation (I think :D). If you have some spare time could you please take a look and let me know what do you think about it. I left a large amount of any across the code but I think we will can get rid of them in the future.

Thanks in advance!

evs-chris commented 4 years ago

Yes! I should be able to clone this weekend and give you a bit of feedback.

evs-chris commented 4 years ago

I forgot how much code is tucked into the various corners of this code base. I think you're well on track to getting everything converted. It's a tremendous undertaking.

The only thing that jumps out is how very out of date the build system is. I need to spend a little time moving off of gobble, which has been unsupported for a while. I think we can safely drop buble too, since typescript handles all of that and more.

marcalexiei commented 4 years ago

I forgot how much code is tucked into the various corners of this code base. I think you're well on track to getting everything converted. It's a tremendous undertaking.

Now I'm arguing with MustacheContainerwhich is not properly TS friendly :D

The only thing that jumps out is how very out of date the build system is. I need to spend a little time moving off of gobble, which has been unsupported for a while. I think we can safely drop buble too, since typescript handles all of that and more.

Yes, I think we can do all the bundling via Rollup, which is already used, but IMHO I would like to do this after TS refactor is complete.

marcalexiei commented 4 years ago

Hi @evs-chris, 
refactor is nearly complete but there are some points that I would like to bring to your attention:

General information

Improvements To-Do

Do you want to procede with a merge to a 2.x branch or would you like to make some adjustments?

giovannipiller commented 4 years ago

Hi everyone, just as a FYI, next week I'm planning to run a few tests using a build of this branch on a pretty complex web-app. As of now I've been able to build and run everything without any obvious issue.

I'll report back next week!

evs-chris commented 4 years ago

Nice! I think this would be a good opportunity to start a 2.x branch.

I personally think a factory may be a better pattern than a class, but I'm not positive. Going into 2.0, we have the opportunity to adjust some things.

@marcalexiei would you like to be added as a maintainer?

On a somewhat related topic, I cleaned up the rollup-plugin-ractive-bin project a bit last week, and it now integrates much more cleanly with the typescript rollup plugin. What do you usually use to build your projects?

marcalexiei commented 4 years ago

I personally think a factory may be a better pattern than a class, but I'm not positive. Going into 2.0, we have the opportunity to adjust some things.

Yes, I imagine that there is some way to combine factory pattern and types. In my opinion the main goal is to find a way to have automatic definition generation. Any solution that makes this possibile is a good to go.

@marcalexiei would you like to be added as a maintainer?

Yes. Thank you 😊

What do you usually use to build your projects?

I use webpack with a custom HTML loader which parse HTML into a template object (basically a fork from official webpack-html-loader). Basically for each component there are 3 files:

marcalexiei commented 4 years ago

Hi @evs-chris, do you want to make other adjustments before merging into a new branch?

Just re-checking 😀

giovannipiller commented 4 years ago

I'm having a few issues while using the runtime.js bundle of Ractive. I'll check them out with @marcalexiei and report back.

evs-chris commented 4 years ago

No, I think we should probably go ahead and merge this into the new 2.0 branch and carry on from there!

marcalexiei commented 4 years ago

As a next step I will try to remove as many "any" as possible from the source code.