vorth is a client-side javascipt library for handling element lifecycle and data to dom reactivity, which have:

• 🐤 lightweight core;

• less then 10KB gzipped

• 🎯 declarative;

• dom reactivity follows this pattern:[attributeName="attributeOrPropertySelector1;attributeOrPropertySelector2;...;attributeOrPropertySelectorN"], to reflect and bind the input to the signal value realtime;

• v0.12.x 🗜 prebundled-first approach;

- core are already prebuild in this npm or github ./vorthInitiator.mjs;

• we drop this feature, in order to achieve full typehint support;

• 📃 comprehensive typehint;

• vorth functionality are fully typehinted,
• v0.12.xYES, even if you chose to develop DIRECTLY at the static endpoints you still got limited yet powerfull enough typehint;
• purely for supporting full typehint across all files;

• 📊 data layer;

• vorth provide synchronized data layer out of the box via virst signal and domReflector;

• 💪 strong integration support with npm client-side 📚 packages;

• vorth have prepared npx vorth that functions as a directory watcher for developement (in .mjs, .ts, or .mts ) to bundle and minify 1 to 1 .mjs endpoints, for which you can bundle and minify additional client side npm packages as libs;

• YES, you can put typescript and javascipt on the same source folder;

• ⌛ on demand dom update via virst Lifecycle;

• with the possibility of offloading the templating responsibility to server, your premade static html stack, or even on demand update by HATEOAS apporach, vorth can handle the client side logicat ⚡O(1)⚡ starts, without compromising the ability of html templating when it's neccessary;

• ⚡ blazingly responsive ⚡;

• supports webWorker out of the box for more expensive computation, without blocking client interactivity;

• 🔌 embeddable;

• by adding vorth="lifecycle/name" to your element, you can easily embed your vorth code into any templating library/framework, even those that are purely run on the browser runtime;
• the only rule is vorth="lifecycle/name" is to exist at the same time when element is connected to the dom;

documentation for signal

refer to virst:

• let_;
• derived;
• $;

!!!avoid importing on the endpoint!!!

• there are cases that browser would autocache the imported library;
• we already profided importDatas, importLets, importLib, and importWorker that will optimize the cache with the browser session;
• if you use __vorthApp and find generated endpoint contains static import statement, please report as bug, along with the source and the produced endpoint;

!!!avoid importing on the endpoint!!!

how to install starter project

• install by running this script:

npm i vorth

• then for empty starter:

npx vorth-starter

• or for starter with examples:

npx vorth-example

• you'll then have this folder structure like this:

• .vscode: snippets collection.
• jsconfig.json: typehint helper for .mts and .ts files.
• vorth.config.mjs: builder config
• vorth-src: source folder.

• vorthInitiator.mjs: vorth entry point.
• data
• libs
• lifecycles
• workers

• node_modules

• modify vorth.config.mjs to suit your setting;
• to start develop your vorth code, run:

npx vorth

• vorth detects .mjs, .ts, and .mts extentions inside sourcePath directory, and bundles them to targetPath 1 to 1 (it have to be in esm style);
• all static imports will be bundled;
• due to vorth extensively generate types on the fly while also uses custom string generation and only generate jsdoc(no .d.ts), vorth need to put jsconfig.json on your project, so if you have any settings for this compilerOptions settings will be overwritten

{
...
	"compilerOptions": {
		...
		"baseUrl": ".",
		"allowJs": true,
		"module": "esnext",
		"target": "esnext",
		"moduleResolution": "node",
		"esModuleInterop": true,
		"skipLibCheck": true,
		"skipDefaultLibCheck": true,
		"allowSyntheticDefaultImports": true
	}
}

• check at Vorth for property control;

versions

• v0.11.x:

• fixed onViewPort bugs;
• beta for full release;
• need to be checked for edge cases;

• v0.12.x:

• drop direct writing on endpoint support, to achieve full typehint on all files;
• streamlined install method and builder script;
• beta for full release;
• need to be checked for edge cases;

• v0.12.9+:

• updated virst version for security;
• example with html file;
• for_.of also returns parentData;

• v0.13.x:

• main modules(lifecycles, derivedData, and libs) options are no longer passed to arg0 but are binded to this for each modules;

• reasoning by doing this, you need no longer to scroll to function declaration and destructure/unwrap arg0, all you need to do is refer this.${optionName} directly on the line you need to call that option, while ofcourse destructure/unwrap this is also an option;

• v0.14.x:

• added indexedDB for data;
• move options.importData to importDatas, mainly for concise imports on single command instead of multiple calls;
• added options.importLets, essentially the same as importDatas but only for pure non derived signal;
• added helper using options.promises, it is just syntatic sugar for Promise.all;
• added vivth to dependency for workerThread, use vivth.NewPingUnique to optimize rapid calls, although it will slightly increase the file size, however the optimized calls should be worth the size;

importable-classes

• Vorth
• __vorthConfig

how to:

• load {targetPath}/vorthInitiator.mjs to your html;

<script type="module" src="{targetPath}/vorthInitiator.mjs"></script>

• add neccessary attribute to vorthInitiator.mjs like defer or async(if you put it in the head tag);
• structure of your static end point path should be like this:

• {targetPath}

• vorthInitiator.mjs
• data
• libs
• lifecycles
• workers

• use this snippets for quick typehinting(prefixed by >> symbol):

• >>dataSignal;
• >>dataDerived;
• >>lib;
• >>lifecycle;
• >>workerThread;

• ⚠⚠⚠ do NOT put the types outside the snippets recomended place ⚠⚠⚠;
• vorth doesn't use custom type detection which made vorth:

• able to natively support both js and ts on the same directory, without converting ts to js first, just directly to the generated endpoint;
• strictly need dev to follow the snippets, as it is made to be detected by vorth regex based typeGenerator;

• as of version 0.13.0, only vscode snippets are supported;

• add property controls (content attribute) for vorth in the head tag if neccessary;

<meta property="vorth-batch" content="10" />

• [property="vorth-batch"]: content used to tell vorth maximum element to be loaded at batch when crossing the viewPort;
• you can add ;pre like this [vorth="lifecycle/name;pre"] to directly process the element without waiting for it to cross the viewPort;
• "lifecycle/name" means you are pointing to "{targetPath}/lifecycles/lifecycle/name.mjs", this patterns also applied to importData, lifecycleAttr, importWorker, importLib, to their respective folder;

<meta property="vorth-versionMin" content="1738851920151" />

• [property="vorth-versionMin"]: content used to tell vorth minimum cachedDate in unix date ms is allowed;
• you can dynamically provide this tag from the server, and that will refresh the cachedDate of vorth code (managed internally), while keeping client's session and local storage;

• both property controls are monitored, so when it's changed dynamically in the runtime, vorth will reactively apply the new value to it's logic;

how to add the lifecycle handler to html:

<div vorth="path/fileName"></div>

• this will target {targetPath}/lifecycles/path/fileName.mjs;

further documentation and examples

• will be posted in html-first documentation website

*) go to exported list

• this class is to be used as helper to setup vorth.config.mjs on your project root.

*) go to exported list