🍦 VanFS: 1:1 bindings from F# to 🍦VanJS (A tiny Reactive UI Framework without React/JSX) , based on Fable #3814
Replies: 2 comments
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@MangelMaxime 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,
1. The internal mechanism of VanFShttps://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 This is under the 2. For style and Web Componentshttps://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 ComponentsInstall the Fluent UI Web Components with NPM or Alternativeshttps://www.npmjs.com/package/@fluentui/web-components npm install @fluentui/web-componentsImport and Register the web componentsLet'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.tsimport {
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/Iconshttps://m3.material.io/styles/icons/overview Install Google Fonts/IconsObtain required CSS URLs from the Google Fonts page. Add the CSS URL to /web-imports/css-urls.tsexport let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
];The point is VanJS does not handle the installation of CSS or Web Components., so Again, I probably should explain clearer in the document. Feel free to provide any further questions or suggestions you might have please. Thanks. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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
Beta Was this translation helpful? Give feedback.
All reactions