From 5a199b8f1a04daac1cbc407fc5791128bc92b6b9 Mon Sep 17 00:00:00 2001 From: Tao Xin Date: Mon, 2 Sep 2024 10:50:42 -0700 Subject: [PATCH] Add links to VanGraph --- index.html | 2 +- sitegen/common.ts | 1 + sitegen/home.ts | 3 ++- sitegen/tutorial.ts | 4 +++- tutorial.html | 2 +- tutorial/index.html | 2 +- 6 files changed, 9 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 8be6c38..38d2b10 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@

} van.add(document.body, Counter()) -

Demo:

Try on jsfiddle

Why VanJS?

Reactive Programming without React/JSX

Declarative DOM tree composition, reusable components, reactive state binding - VanJS offers every good aspect that React does, but without the need of React, JSX, transpiling, virtual DOM, or any hidden logic. Everything is built with simple JavaScript functions and DOM.

Grab 'n Go

No installation, no configuration, no dependencies, no transpiling, no IDE setups. Adding a line to your script or HTML file is all you need to start coding. And any code with VanJS can be pasted and executed directly in your browser's developer console. VanJS allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.

Ultra-Lightweight

VanJS is the smallest reactive UI framework in the world, with just 1.0kB in the gzipped minified bundle. It's 50~100 times smaller than most popular alternatives. Guess what you can get from this 1.0kB framework? All essential features of modern web frameworks - DOM templating, state, state binding, state derivation, effect, SPA, client-side routing and even hydration!

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

-- Antoine de Saint-Exupéry, Airman's Odyssey

Easy to Learn

Simplicity at its core. Only 5 functions (van.tags, van.add, van.state, van.derive, van.hydrate). The entire tutorial plus the API reference is just one single web page, and can be learned within 1 hour for most developers.

Performance

VanJS is among the fastest web frameworks, according to the results by krausest/js-framework-benchmark. For SSR, Mini-Van is 1.75X to 2.25X more efficient compared to React.

TypeScript Support

VanJS provides first-class support for TypeScript. With the .d.ts file in place, you'll be able to take advantage of type-checking, IntelliSense, large-scale refactoring provided by your preferred development environment. Refer to the Download Table to find the right .d.ts file to work with.

Want to Learn More?

Source Code

github.com/vanjs-org/van

See also: A Guide to Reading VanJS Codebase

IDE Plug-ins

VS Code Extension

Community Add-ons

VanJS can be extended via add-ons. Add-ons add more features to VanJS and/or provide an alternative styled API. Below is a curated list of add-ons built by VanJS community:

Add-onDescriptionAuthor
Van ConeAn SPA framework add-on for VanJSb-rad-c
van_elementWeb Components with VanJSAtmos4
VanJS FeatherFeather Icons for VanJSthednp
van_dml.jsA new flavour of composition for VanJSEckehard
van-jsxA JSX wrapper for VanJS, for people who like the JSX syntax morecqh963852
vanjs-routerA router solution for VanJS (README.md in simplified Chinese)欧阳鹏
VanJS RoutingYet another routing solution for VanJSKwame Opare Asiedu
VanJS FormFully typed form state management library (with validation) for VanJSKwame Opare Asiedu
vanjs-bootstrapVanJS Bootstrap ComponentsWilli Commer
vanrxAn ultra-lightweight Redux addon for VanJSMeddah Abdallah
VanFS1:1 bindings from F# to VanJSKen Okabe

Support & Feedback

🙏 VanJS aims to build a better world by reducing the entry barrier of UI programming, with no intention or plan on commercialization whatsoever. If you find VanJS interesting, or could be useful for you some day, please consider starring the project on GitHub. It takes just a few seconds but your support means the world to us and helps spread VanJS to a wider audience.

Star Watch Discuss Issue Follow @vanjs-org

In the name of Vanilla of the House JavaScript, the First of its name, Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library, Scripting Language for GUI, GPT-Empowered Toolkit, by the word of Tao of the House Xin, Founder and Maintainer of VanJS, I do hereby grant you the permission of VanJS under MIT License.

Contact us: X@taoxin / Tao Xin / tao@vanjs.org / LinkedInTao Xin

+

Demo:

Try on jsfiddle

Why VanJS?

Reactive Programming without React/JSX

Declarative DOM tree composition, reusable components, reactive state binding - VanJS offers every good aspect that React does, but without the need of React, JSX, transpiling, virtual DOM, or any hidden logic. Everything is built with simple JavaScript functions and DOM.

Grab 'n Go

No installation, no configuration, no dependencies, no transpiling, no IDE setups. Adding a line to your script or HTML file is all you need to start coding. And any code with VanJS can be pasted and executed directly in your browser's developer console. VanJS allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.

Ultra-Lightweight

VanJS is the smallest reactive UI framework in the world, with just 1.0kB in the gzipped minified bundle. It's 50~100 times smaller than most popular alternatives. Guess what you can get from this 1.0kB framework? All essential features of modern web frameworks - DOM templating, state, state binding, state derivation, effect, SPA, client-side routing and even hydration!

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

-- Antoine de Saint-Exupéry, Airman's Odyssey

Easy to Learn

Simplicity at its core. Only 5 functions (van.tags, van.add, van.state, van.derive, van.hydrate). The entire tutorial plus the API reference is just one single web page, and can be learned within 1 hour for most developers.

Performance

VanJS is among the fastest web frameworks, according to the results by krausest/js-framework-benchmark. For SSR, Mini-Van is 1.75X to 2.25X more efficient compared to React.

TypeScript Support

VanJS provides first-class support for TypeScript. With the .d.ts file in place, you'll be able to take advantage of type-checking, IntelliSense, large-scale refactoring provided by your preferred development environment. Refer to the Download Table to find the right .d.ts file to work with.

Want to Learn More?

Source Code

github.com/vanjs-org/van

See also: A Guide to Reading VanJS Codebase

IDE Plug-ins

VS Code Extension

Community Add-ons

VanJS can be extended via add-ons. Add-ons add more features to VanJS and/or provide an alternative styled API. Below is a curated list of add-ons built by VanJS community:

Add-onDescriptionAuthor
Van ConeAn SPA framework add-on for VanJSb-rad-c
van_elementWeb Components with VanJSAtmos4
VanJS FeatherFeather Icons for VanJSthednp
van_dml.jsA new flavour of composition for VanJSEckehard
van-jsxA JSX wrapper for VanJS, for people who like the JSX syntax morecqh963852
vanjs-routerA router solution for VanJS (README.md in simplified Chinese)欧阳鹏
VanJS RoutingYet another routing solution for VanJSKwame Opare Asiedu
VanJS FormFully typed form state management library (with validation) for VanJSKwame Opare Asiedu
vanjs-bootstrapVanJS Bootstrap ComponentsWilli Commer
vanrxAn ultra-lightweight Redux addon for VanJSMeddah Abdallah
VanFS1:1 bindings from F# to VanJSKen Okabe

Support & Feedback

🙏 VanJS aims to build a better world by reducing the entry barrier of UI programming, with no intention or plan on commercialization whatsoever. If you find VanJS interesting, or could be useful for you some day, please consider starring the project on GitHub. It takes just a few seconds but your support means the world to us and helps spread VanJS to a wider audience.

Star Watch Discuss Issue Follow @vanjs-org

In the name of Vanilla of the House JavaScript, the First of its name, Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library, Scripting Language for GUI, GPT-Empowered Toolkit, by the word of Tao of the House Xin, Founder and Maintainer of VanJS, I do hereby grant you the permission of VanJS under MIT License.

Contact us: X@taoxin / Tao Xin / tao@vanjs.org / LinkedInTao Xin

diff --git a/sitegen/common.ts b/sitegen/common.ts index 3175ca4..efb0561 100644 --- a/sitegen/common.ts +++ b/sitegen/common.ts @@ -110,6 +110,7 @@ export default (doc: HTMLDocument) => { VanJS: () => b("VanJS"), VanUI: () => b("VanUI"), VanX: () => b("VanX"), + VanGraph: () => b("VanGraph"), MiniVan: () => b("Mini-Van"), Demo: () => b("Demo:"), Caveat: () => ["⚠️ ", b("Caveat"), ": "], diff --git a/sitegen/home.ts b/sitegen/home.ts index 9ebe183..f95b554 100644 --- a/sitegen/home.ts +++ b/sitegen/home.ts @@ -4,7 +4,7 @@ import { HTMLDocument } from "https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm export default (doc: HTMLDocument) => { const {tags: {a, b, blockquote, clipPath, defs, div, g, i, img, input, label, li, p, path, rect, span, svg, table, tbody, td, th, thead, title, tr, ul}} = van.vanWithDoc(doc) - const {BI, Demo, H1, H2, H3, Js, Link, MiniVan, Quote, Symbol, VanJS, VanUI, VanX} = common(doc) + const {BI, Demo, H1, H2, H3, Js, Link, MiniVan, Quote, Symbol, VanGraph, VanJS, VanUI, VanX} = common(doc) const mailIcon = svg({viewBox: "0 0 16 16", version: "1.1", width: 16, height: 16, "aria-hidden": true}, path({"d": "M1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5C0 2.784.784 2 1.75 2ZM1.5 12.251c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.809L8.38 9.397a.75.75 0 0 1-.76 0L1.5 5.809v6.442Zm13-8.181v-.32a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25v.32L8 7.88Z"}), @@ -116,6 +116,7 @@ van.add(document.body, Counter()) li("Convert HTML or MD snippet to ", VanJS(), " code with our online ", Link("HTML/MD to ", VanJS(), " Converter", "/convert")), li("Check out ", Link(VanUI(), "/vanui"), " - A collection of grab 'n go reusable utility and UI components for ", VanJS()), li("Want reactive list, global app state, server-driven UI, serialization and more? Check out ", Link(VanX(), "/x"), " - The 1.2kB official ", VanJS(), " extension"), + li("Debugging complex dependencies in your app? checkout ", Link(VanGraph(), "https://github.com/vanjs-org/van/tree/main/graph")), li("Want server-side rendering? Check out ", Link(MiniVan(), "/minivan"), " and ", Link("Hydration", "/ssr"), " (the entire vanjs.org site is built on top of ", MiniVan(), ")"), li("For questions, feedback or general discussions, visit our ", Link("Discussions", "https://github.com/vanjs-org/van/discussions"), " page"), ), diff --git a/sitegen/tutorial.ts b/sitegen/tutorial.ts index 6f58bb7..75ec2f6 100644 --- a/sitegen/tutorial.ts +++ b/sitegen/tutorial.ts @@ -4,7 +4,7 @@ import { HTMLDocument } from "https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm export default (doc: HTMLDocument) => { const {tags: {b, br, div, i, li, p, span, ul}} = van.vanWithDoc(doc) - const {ApiTable, Demo, H1, H2, H3, InlineHtml, InlineJs, Js, JsFile, Link, Quote, Symbol, SymLink, VanJS} = common(doc) + const {ApiTable, Demo, H1, H2, H3, InlineHtml, InlineJs, Js, JsFile, Link, Quote, SymLink, Symbol, VanGraph, VanJS, VanX} = common(doc) return div({id: "content"}, H1(VanJS(), ": Tutorial and API Reference"), @@ -335,6 +335,8 @@ const val = v => { li("check out a list of ", Link("sample applications", "/demo"), " built with ", VanJS(), "."), li("read the in-depth discussion of a few ", Link("advanced topics", "/advanced"), "."), li("check out how to build a ", Link("fullstack app", "/ssr"), " with SSR, CSR and hydration."), + li("check out ", Link(VanX(), "/x"), " for more features: reactive list, global app state, server-driven UI, serialization, etc."), + li("debug complex dependencies in your app via ", Link(VanGraph(), "https://github.com/vanjs-org/van/tree/main/graph"), ".") ), H2("API Index"), p("Below is the list of all top-level APIs in ", VanJS(), ":"), diff --git a/tutorial.html b/tutorial.html index d6051cb..6d76f1e 100644 --- a/tutorial.html +++ b/tutorial.html @@ -331,7 +331,7 @@

} van.add(document.body, App()) -

Demo:

Try on jsfiddle

The End

🎉 Congratulations! You have completed the entire tutorial of VanJS. Now you can start your journey of building feature-rich applications!

To learn more, you can:

API Index

Below is the list of all top-level APIs in VanJS:

+

Demo:

Try on jsfiddle

The End

🎉 Congratulations! You have completed the entire tutorial of VanJS. Now you can start your journey of building feature-rich applications!

To learn more, you can:

API Index

Below is the list of all top-level APIs in VanJS:

diff --git a/tutorial/index.html b/tutorial/index.html index d6051cb..6d76f1e 100644 --- a/tutorial/index.html +++ b/tutorial/index.html @@ -331,7 +331,7 @@

} van.add(document.body, App()) -

Demo:

Try on jsfiddle

The End

🎉 Congratulations! You have completed the entire tutorial of VanJS. Now you can start your journey of building feature-rich applications!

To learn more, you can:

API Index

Below is the list of all top-level APIs in VanJS:

+

Demo:

Try on jsfiddle

The End

🎉 Congratulations! You have completed the entire tutorial of VanJS. Now you can start your journey of building feature-rich applications!

To learn more, you can:

API Index

Below is the list of all top-level APIs in VanJS: