Using with Vite

Starting with Webix Jet 3.0, the toolchain has been migrated to Vite. Read more about it here. There are some differences from usage with WebPack:

• the .env file is added, it stores global constants:

APPNAME=Demo
VERSION=1.0.0
BUILD_AS_MODULE=false

To refer to the constants, use import.meta.env.{name}:

// app.js
const defaults = {
    id 		: import.meta.env.APPNAME,
    version : import.meta.env.VERSION,
    router 	: import.meta.env.BUILD_AS_MODULE ? EmptyRouter : HashRouter,
    debug 	: !import.meta.env.PROD,
    // ...
};

...

if (!import.meta.env.BUILD_AS_MODULE){
	webix.ready(() => new MyApp().render() );
}

• the app.js contains section that imports all files from the "views" folder and assigns custom view resolver to the app class:

// app.js
// dynamic import of views
const modules = import.meta.glob("./views/**/*.js");
const views = name => modules[`./views/${name}.js`]().then(x => x.default);

export default class MyApp extends JetApp{
	constructor(config){
        const defaults = {
            // ...
            views,
        }
    }
}

• optional, app.js contains custom locale loader:

// app.js
const locales = import.meta.glob("./locales/*.js");
const words = name => locales[`./locales/${name}.js`]().then(x => x.default);

...

export default class MyApp extends JetApp{
	constructor(config){
        //...

        // patch locales loader, optional
        this.use(plugins.Locale, {
			path: words,
			storage: this.webix.storage.session
		});
    }
}

• replace old scripts:

// package.json
"scripts": {
    "build": "vite build",
    "start": "vite"
}

• the dev server is at http://localhost:5173.

You can see the full code of the demo here.