Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ccouzens/bookish-funicular

An experimental syntax for HTML components that compiles to multiple languages and frameworks
https://github.com/ccouzens/bookish-funicular

Last synced: 4 days ago
JSON representation

An experimental syntax for HTML components that compiles to multiple languages and frameworks

Awesome Lists containing this project

README 

        
# bookish-funicular



An experimental syntax for HTML components that supports being compiled to

multiple languages and frameworks.



HTML components refers to HTML snippets that are reused within a given website

to produce a consistent look and feel and for the purpose of code reuse. HTML

components are often the code version of a UI component in a tool like Figma.

Components may be small like a button. Components can contain other components,

and may therefore be large such as an entire page. Components are usually a

function over a collection of data, or "props".



Modern websites often need the HTML components to work on the client. This may

be to add interactivity to the page, or to show new content that wasn't in the

original HTML such as a dialog. Javascript is the programming lanaguage of the

client side web, which necessitates HTML components needing to be useable with

Javascript. Usually a higher level Javascript framework is used such as React or

Lit.



Websites should also render on the server, as it is a faster experience for the

user and better for search engines. Reusing HTML components in the client code

and the server traditionally meant sharing programming languages and frameworks

between the client and the server. As Javascript is the language of the client,

this meant the server needs to run Javascript. The term for this is "Isomorphic

Javascript" or "Universal Javascript".



Javascript is not a bad choice for writing web servers. But depending on the

circumstances of each project, it may not be the best choice. But the better

choice comes with the downside of not reusing HTML components.



I propose to create tooling that allows writing code that can be compiled to

code for various Javascript frameworks (React, Vue, Angular, Lit, etc) and code

in various server side languages (Rust, Go, Swift, Ruby ERB, etc) that in all

cases output the same HTML component.



## Prior Art



### Mitosis



[Mitosis](https://mitosis.builder.io/) has fairly similar goals, but there are

differences.



> Mitosis is an open-source tool that transforms JSX components into fully

> functional components for frameworks like Angular, React, Qwik, Vue, Svelte,

> Solid, and React Native.



Mitosis has some level of support for non-Javascript outputs such as Swift and

HTML. These largely do not feature in the documentation and didn't work for me

when I tried them. I believe aspects of the design make non-Javascript output

second-tier in Mitosis. I however want non-Javascript output to be a primary

goal.



Mitosis supports interactive components, with state, and lifecycle hooks. This

necessitates the components support scripting. I however will be focussed closer

on templates, that transform props to HTML or DOM. Interactivity will be

available to the developer by wrapping the output component with an outer

component that controls the props; as interactivity is a client side concern

this does not need sharing with the server.



### Mustache



https://mustache.github.io/



> Logic-less templates



Mustache is intersting as it has acheived many of my goals. It was once very

popular. It is important that I understand why it is no longer popular so I

don't fall for the same mistakes.



Mustache is rarely used as a building block for design systems. In examples I've

seen, mustache templates don't concern themselves with styling, which may be the

reason for this.



Mustache templates can contain conditional expressions and loops, but are

limited beyond the basic. I am unsure how limiting this is for components- the

initial release of my project will not support advanced transformations. I will

need to see if there any any existing solutions that can compile simple scripts

into a range of different languages.



The typical implementation of Mustache is to write interpreters for various

different programming languages. I have not seen generators, which are currently

my favoured solution.



## Open Questions



What does the source syntax look like?



How will the CSS associated with an HTML component be attached? Assuming we give

options, what options do we give?



How well does writing a website using this tooling work? Are there other things

that are duplicated, and how costly is the duplication?