DEV Community

Discussion on: Using CSS Modules by simply using HTML. What do you think?

Collapse
 
chrisczopp profile image
chris-czopp

Thanks John. There is much details behind the project but I can give it a go.

What is it? - an online IDE built around a simple framework which uses simple unidirectional app state management. We didn't use e.g. React because it would be an overkill - all we need is reactivity provided by Virtual DOM . More can be found here: github.com/gluecodes/gluecodes-fra...

Why? - probably the frustration that in order to start working on UI I need a boilerplate, preferably Docker, Webpack etc. Also , by using the unidirectional state management the app becomes very generic so writing all the glue code for actions, action creators and all other magical words seems unnecessary. We should write features. I don't want to oversell but can't resist to mention this - Imagine you can quickly prototype UI with HTML, add few attribute directives and boom! You didn't touch JS yet but you already have a working app. Actions are generated and they use data you wrote in HTML. E.g. what you have in your LI tags becomes and action which returns an array of objects. When you done coding, you can download stand-alone code run docker-compose up and you can keep changing it as you wish. It uses Webpack, Babel and all other open source goodies.

Implementation - HTML gets parsed to function calls which construct virtual DOM. There is many transformations happening based on attribute directives. This includes turning CSS classes which exist in stylesheets into references to styles[className] where styles is CSS file imported in the given page layout, slot or reusable slot. In live preview it's emulated but in the generated code it uses CSS Modules. Soon I'm going to deploy the "downloading"...

Hopefully what I wrote is useful for you 😉