Demo here. Check console logs for further details.
Example repo
Intro for dual packages here
PlumeJs is a very light weight typescript framework to build spa's. It is build on more accessable web components, typescript. It comes with features like change detection during async operations, data-sharing via services and props, dependency injection.
PlumeJs is a conceptual combination of angularjs and react. Just like angular one can register Services, Components and life-cycle hooks. It has setProps and onbindprops for passing data from one component to another and like react update function to update the view after modal updations and a render function to render the component.
PlumeJs has very few syntaxes enabling faster learning curve.
To start with PlumeJs
Plumejs has yeoman generator which provides the entire scaffolding for your project. To start with:
- Require Nodejs version 11.0.0 or above
- Run
npm install -g yo generator-plumejs - After completing installation run
yo plumejsin your destination folder. This will ask you about your project name, description and type of bundler for your project. After that it will install all the required dependencies. - After all the dependencies were installed, you can run application using command
npm start.
If you don't want to start with yo plumejs and need to use either with webpack or vite specifically then please check
For documentation please visit wiki
- dom-diffing: https://gomakethings.com/dom-diffing-with-vanilla-js/
- template literals: https://medium.com/@trukrs/tagged-template-literal-for-html-templates-4820cf5538f9
- dom traversal: https://www.programmersought.com/article/9331587598/
- uhtml: https://github.com/WebReflection/uhtml
- template.js: https://github.com/Mevrael/html-template/blob/master/template.js
- proposals for tag: whatwg/html#2254
- styling shadow dom using parts: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
- setting jest with esm: https://gist.github.com/rstacruz/511f43265de4939f6ca729a3df7b001c