TLDR; The title of this post.

Feel free to reach out for clarity instead of reading the code/docs.

I was working on a “react-like syntax for webcomponents”, I wanted to create something robust and flexible for secure data storage and management.

I started off with an approach for asynchronous state management so that components outside the shadow-root could receive updates. (The events are also encrypted to secure against things like browser extensions.)

https://positive-intentions.com/docs/projects/dim/async-state-management

It then made sense to be able to persist that data so it can work between page releoads.

https://positive-intentions.com/docs/projects/dim/bottom-up-storage

The result looks and works like the following when used in a project.

https://positive-intentions.com/docs/projects/dim/encrypted-store

The Dim framework seems like a dead-end. I wanted to try it out on my existing React projects. So I created the equivalent React hooks.

https://positive-intentions.com/docs/projects/dim/use-dim-store-react

I find it to be performant and I want to push the scale of the approach, so I am in the process of testing it out on my projects. A notable use-case there is storing encrypted files at rest.

IMPORTANT: Im not trying to promote “yet another ui framework”, this is an investigation to see what is possible. You should not use this in your own code. It is not reviewed, audited or production-ready. It is not on npm. Shared for testing, feedback and demo purposes only.

Im investigating an idea i had about React-like syntax for webcomponents after some experience with Lit.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

• How its built
• Checkout the code
• Storybook demo

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Dont be misled by it being open-source. Im not trying to push “yet another ui framework”, this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is intended for myself on my own projects. This project is far from finished. I am sharing because it might be interesting/educational for someone. Feel free to reach out for clarity if you have any questions.

TLDR; I’ve been experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace React in one of my projects. It is not ready for production use, but rather an exploration into CustomElements and modern browser capabilities.

https://github.com/positive-intentions/dim

The goal was to build functional Web Components that handle state management and DOM updates without the overhead of a massive JavaScript framework. By leveraging standard Web APIs and Proxy objects, I’ve managed to create a reactive programming model that feels familiar—using JSX—but stays much closer to the browser platform.

I wanted to see how far i could take web components before the architecture broke down. If you’re interested in frontend software engineering or web standards, you might find the logic behind the updates (which avoid a traditional virtual DOM) interesting.

Full technical tutorial and deep dive: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

Disclaimer: This project is not ready for production use. In fact, this project may be getting deprecated soon, but I’m sharing it because the unique details into custom elements and modern JavaScript performance might be interesting or educational for others exploring the web platform.

https://positive-intentions.com/docs/technical/architecture

i cooked a bit too hard on this. i don’t advise you use this approach. its something I wanted to investigate for myself.

https://webpack.js.org/concepts/module-federation/#promise-based-dynamic-remotes

i was already using microfrontends for my project. when i came across dynamic remotes, i figured i could use it for statics redundency management. (tbh… a problem that doesnt exist.)

my project is far from finished and it would make sense to add additional safety nets for static-resource-integrity, but the basic concept seems to work and i wanted to share some details ive put together.

https://positive-intentions.com/blog/quantum-resistant-encryption

demo: https://cryptography.positive-intentions.com/iframe.html?args=&globals=&id=cascading-cipher-ml-kem-demo--mlkem-standalone&viewMode=story

code: https://github.com/positive-intentions/cryptography/blob/staging/src/crypto/CascadingCipher/layers/MLKEMCipherLayer.ts

TLDR; for my project i wanted the signal protocol that would work in a browser. following a previous post i made about looking for the signal protocol in javascript, i couldnt find something suitable… so empowered by AI, i tried to create something myself. i dont want to inspire undue confidence.

IMPORTANT: this project is not professionally audited or production ready.

for my p2p messaging project (a webapp) i wanted to explore an usage of the Signal protocol… the investigation is still in progress and far from finished. its clear that the Signal protocol is not intended for a p2p architecture with it needing things like pre-keys stored on servers. so it seems nessesary to adapt it.

i looked around for a suitable implementation i could use. compiling the implementation in lib-signal-go to a wasm seemed like an option that worked… but given AI is everywhere, i decided to see if it could put something better together. i started off creating something using browser-based cryptograpy primitives. i would have like to keep it that way, but an ealier AI audit disagreed to using those primitives and so here is an attempt in rust that compiles to wasm.

https://github.com/positive-intentions/cryptography/tree/staging/src/rust

i added several unit tests and and got AI to try create better securty audits, and i think its working well. (or at least well enough). AI’s security audit points me to many things i can improve throughout (so i will when i can).

this is fairly complicated stuff and i know better than to ask people to spend their own time to review my experimental project… im not sharing for you to review my code; im sharing this here if this is interesting for anyone to take a look.

(note: the repo is getting a bit too “full” and i will be splitting it into a separate repo for just the signal implementation.)

Decentralized Architecture: https://positive-intentions.com/blog/decentralised-architecture

While my approach here could be considered overly complicated (because, well, it is), I’m trying something new, and it’s entirely possible this strategy won’t be viable long-term. My philosophy is “there’s only one way to find out.” I’m not necessarily recommending this approach, just sharing my journey and what I’m doing.

Potential Benefits

I’ve identified some interesting benefits to this approach:

• Statics as Chat App Infrastructure: https://positive-intentions.com/blog/statics-as-a-chat-app-infrastructure

While I often see module federation and microfrontends discouraged in online discussions, I believe they’re a good fit for my specific approach. I’m optimistic about the benefits and wanted to share the details.

When serving the federated modules, I can also host the Storybook statics. I think this could be an excellent way to document the modules in isolation.

Modules and Applications

Here are some examples of the modules and how they’re being used:

• Cryptography Modules: https://cryptography.positive-intentions.com/?path=%2Fdocs%2Fcryptography-introduction–docs
• P2P Framework: https://p2p.positive-intentions.com/?path=%2Fdocs%2Fe2e-tests-connectionstatus–docs

This setup allows me to create microfrontends that consume these modules, enabling me to share functionality between different applications. The following applications, which have distinct codebases (and a distinction between open and closed source), would be able to leverage this:

• P2P Chat: https://chat.positive-intentions.com/
• P2P File Transfer: https://file.positive-intentions.com/

Sharing these dependencies should make it easier to roll out updates to core mechanics across these diverse applications.

Furthermore, this functionality also works when I create an Android build with Tauri. This could streamline the process of creating new applications that utilize these established modules.

Considerations and Future

I’m sure there will be some distinct testing and maintenance overhead with this architecture. However, depending on how it’s implemented, I believe it could work and make it easier to improve upon the current functionality.

It’s important to note that everything about this project is far from finished. Some might view this as an overly complicated way to achieve what npm already does. However, I think this approach offers greater flexibility by allowing for the separation of open and closed-source code for the web. Of course, being JavaScript, the “source code” will always be accessible, especially in the age of AI where reverse-engineering is more possible than ever before.

Introducing Dim – a new framework that brings React-like functional JSX-syntax with JS. Check it out here:

🔗 Project: https://github.com/positive-intentions/dim

🔗 Website: https://dim.positive-intentions.com/

My journey with web components started with Lit, and while I appreciated its native browser support (less tooling!), coming from ReactJS, the class components felt like a step backward. The functional approach in React significantly improved my developer experience and debugging flow.

So, I set out to build a thin, functional wrapper around Lit, and Dim is the result! It’s a proof-of-concept right now, with “main” hooks similar to React, plus some custom ones like useStore for encryption-at-rest. (Note: state management for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore passwordless options like WebAuthn/Passkeys).

You can dive deeper into the documentation and see how it works here:

📚 Dim Docs: https://positive-intentions.com/docs/category/dim

This project is still in its early stages and very unstable, so expect breaking changes. I’ve already received valuable feedback on some functions regarding security, and I’m actively investigating those. I’m genuinely open to all feedback as I continue to develop it!

I made something to try out for “funtional webcomponents” with vanillaJs. I’m working towards a UI framework for my personal projects. It’s far from finished but i thought it might be an interesting concept to share.