Awesome

Paw

A low-code, vdom-free hyperscript framework.

❤️ Features

Theme builder optimized for SEO
Built-in SPA router.
No build steps, no vDom, no need to rewrite any JS library!
JSON Schema based forms
HTML to Hyperscript converter
Table data with great flexibility
Graph
Chart
Barcode
Maps

💻 Usage

Copy the boilerplate folder to your machine and run the command inside it.

python3 -m http.server

This is what you will get!

The folder contains 3 files

favicon.ico: Replace with your app icon.
app.js: These are your app's routes, modify as you like.
index.html: All navigation was automatically generated using this page. You must import the file and edit it using the graphical interface and then modify the main tag manually which will be the home page of your app.

The demo app uses index.html as the home page and app.js as the router.

All routes were distributed across several modules within the views folder.

It can be an excellent practical reference on how to use Paw and how to organize the code.

🎯 Goals

Bring maximum customization via graphical interface.
Build a solid, well-tested library of hyperscript components.
Simplify the use of third-party libraries with components with sane defaults.
Document all code completely and at the same time concisely.
Many examples synchronized with the tests.

📢 Motivation

Why are JS frameworks bad?

Frameworks like:

suffer from the same problem.

We can argue that vDom is slow so svelte solves the problem by compiling javascript in the build steps.

We can argue that the frameworks are heavy and svelte solves the problem again, qwik only loads js on demand, and hyperapp is too minimalistic.

We can argue that build steps are unecessary complication and hyperapp is the clear winner here.

But this is getting away from the central problem with these approaches, which they ALL suffer from.

The problem is that frameworks need to control JavaScript centrally in the elements and/or components that are used.

This implies that the code of a library external to the framework must be rewritten.

See for example the number of existing Bootstrap javascript implementations:

These projects exist for the reason that vDom and the implementation of a component library conflict.

If you need a less popular external library and/or use a framework with a smaller community, you will have to reimplement javascript or wait for someone to do it with all the difficulties and bugs involved.

Why web components are bad?

Libraries like Shoelace allow you to use reactive components within these frameworks without having to be reimplemented.

The problem is data exchange, two way data binding needs to be implemented individually for each framework.

Components written in HTML do not have the good parts of these vDom frameworks that allow you to easily pass objects, arrays and functions to them, greatly limiting their capacity and making the API difficult.

Why I build this project?

I wanted to have components with all the capabilities of javascript frameworks (passing objects, arrays and functions).

And have a simplified interface to access work done in libraries like Bootstrap without having to reimplement javascript.

The fact that using hyperscript allows you to encapsulate the logic of the components in small modules that make the weight of the vDom unnecessary.

I didn't want to have to deal with the complications of build steps.

And I wanted the libraries I used to only be loaded when called (using es6 modules or dynamically adding the script to the page).

And to achieve good SEO, produce an SSR home page with the customization options that exist in the open source world.

I didn't find anything on github or google that went this route, so I created it.

🔧 TODO

dashboard presentation
add body edit functions
table engine based on api
completely remove functions assign to DOM, fieldset.setProp with resolver
highlightjs as a component (js/html)
tests as a route and qunit as a component
docs as component
examples as component
formatter should be a component?
normalize schema component and used to apply all defaults everywhere.
output raw referenced in input, how to solve that?
allow icon with input to avoid unicode and translation
separate input and output options
allow to see other tests variants
dynamic validation with functions
input wrapper review
remove or minimize lang support
remove non bootstrap options support, minimize options and review settings
separate outputs
better array ctrl support (minimize, up, down, remove, add)
finish documentation
finish static tests
finish dynamic tests

🤝 Contributing

It's a very simple project. Any contribution, any feedback is greatly appreciated.

⭐ Support

If this project was useful to you, consider giving it a star on github, it's a way to increase evidence and attract more contributors.

🙏 Acknowledgment

This work would not be possible if it were not for these related projects:

A huge thank you to all the people who contributed to these projects.