🍦 VanFS: 1:1 bindings from F# to 🍦VanJS (A tiny Reactive UI Framework without React/JSX) , based on Fable

[ken-okabe]

Based on Fable, I have developed:
🍦 VanFS: 1:1 bindings from F# to
🍦 VanJS (an ultra-lightweight , zero-dependency , and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM without React/JSX) + WebComponents + FRP

https://github.com/ken-okabe/vanfs

I appreciate the dedication and effort of all the Fable contributors, which have made my work possible.

I'd be grateful if you could take a look at my project whenever you have a chance. I'd really appreciate your feedback 😊

---

VanJS is a rising star among front-end frameworks.

https://risingstars.js.org/2023/en#section-framework

[MangelMaxime]

Hello looks like there is a lot of content in your project great work.

You say that VanFS is a 1:1 binding however, I am seeing TypeScript code in the repository. Am I missing something or is the project more like a template / showcase of how VanJS can be consumed/loaded in a mixed solution?

[ken-okabe]

@MangelMaxime
Hi, thanks for your feedback and sorry for the confusion, so probably, I should make things clearer in the document.

As https://github.com/ken-okabe/vanfs?tab=readme-ov-file#vanfs

VanFS is a project template for 1:1 bindings from F# to VanJS,
and the reason to use TypeScript is:

1. The internal mechanism of VanFS
2. For style and Web Components

1. The internal mechanism of VanFS

https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts

import van from 'vanjs-core'

import '../../web-imports/components'
import { cssURLs } from '../../web-imports/css-urls';

// css imports
cssURLs.forEach(url => {
    let stylesheet = document.createElement("link");
    stylesheet.rel = "stylesheet";
    stylesheet.href = url;
    document.head.appendChild(stylesheet);
});


// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJS
let n =
    f => array =>
        f(...array);

export let tags =
    new Proxy(van.tags, {
        get: (target, property) => {
            return n(target[String(property)]);
        }
    });

export let add = n(van.add);

CSS imports
+
The conversion for
// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJS

This is under the van-api directory which is essential and we would not want to modify it to keep things working.

---

2. For style and Web Components

https://github.com/ken-okabe/vanfs/tree/main?tab=readme-ov-file#getting-started

---

https://github.com/ken-okabe/vanfs/tree/main?tab=readme-ov-file#web-components

🌐 Web Components

Install the Fluent UI Web Components with NPM or Alternatives

https://www.npmjs.com/package/@fluentui/web-components

npm install @fluentui/web-components

Import and Register the web components

Let's use Fruent Web Card and Checkbox.

https://learn.microsoft.com/en-us/fluent-ui/web-components/components/card?pivots=typescript

https://learn.microsoft.com/en-us/fluent-ui/web-components/components/checkbox?pivots=typescript

/web-imports/components.ts

import {
    provideFluentDesignSystem,
    fluentCard,
    fluentCheckbox
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentCard()
    );

provideFluentDesignSystem()
    .register(
        fluentCheckbox()
    );

---

Like https://learn.microsoft.com/en-us/fluent-ui/web-components/components/checkbox?pivots=typescript

Using Web Components requires adding some TypeScript code, and we simply can copy-paste the code to

or

---

Material Web Components use Google Fonts/Icons

https://m3.material.io/styles/icons/overview

Install Google Fonts/Icons

Obtain required CSS URLs from the Google Fonts page.

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:star:FILL@0;wght@400;GRAD@0;opsz@24

Add the CSS URL to

/web-imports/css-urls.ts

export let cssURLs = [
 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
];

---

---

The point is VanJS does not handle the installation of CSS or Web Components., so
🍦 VanFS: 1:1 bindings from F# to
🍦 VanJS (an ultra-lightweight , zero-dependency , and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM without React/JSX) + WebComponents + FRP

Again, I probably should explain clearer in the document.

Feel free to provide any further questions or suggestions you might have please. Thanks.