Webix-jet views in separate folders


I am trying to use the jet-start-master sample but want to place views in separate folders.
I think I need to adjust

const views = name => modules[`./views/${name}.js`]().then(x => x.default);

and maybe adjust the menu-plugin.

Do you have samples for that?


Hi again,
actually I am trying to get the “Resolving Files” demo to work. The url “http://localhost:5174/viewresolve/#!/top/start” returns “404: Page not found”. Shouldn’t the url point to “areae.list” view?

views: {"start" : "area.list"},


Hi @bertwilli

If views is a function, it allows to define pattern of a request for each module.
Here’s a related part of the Jet docs

If you use Webix Jet 3.0+, which is build with Vite, yuo can use its dynamic import, similar to our jet-start demo.

For example, let’s say you have two folders in your project, “views” and “views_custom”, with the following file destribution

  - start.js
  - top.js
  - data.js

Then you can use multiple patterns in vite’s import.meta.glob and provide the correct path to each module in views:

const modules = import.meta.glob(["./views/**/*.js", "./views_custom/**/*.js"]);

const views = name => {
	let target = "views";
	if (name === "data") target = "views_custom";

	const path = `./${target}/${name}.js`; 
	return modules[path]().then(x => x.default);

No changes are required in the menu plugin.

I’m afraid there’s an issue in our example, thank you for pointing this out!
We will fix is as soon as possible.

The definition views: {"start" : "area.list"} is not applicable to a newer version of Jet.
After switching to Vite (Jet 3.0+), the app configuration requires a custom view loader, similar to the function mentioned above or a direct assignment of an imported module

With that said, the correct code for this demo will be

Click to expand code for sources/viewresolve.js
// sources/viewresolve.js
import {JetApp} from "webix-jet";
import { views } from "./views/index";

const app = new JetApp({
	start:		"/top/start",	// "start" should represent module from "views/area/list.js"

export default app;
Click to expand code for sources/views/index.js
// sources/views/index.js, dynamic import of views

// note: because of the placement of this file in the project, 
// this relative path points to all files in "views" folder and all its subfolders
const modules = import.meta.glob("./**/*.js"); 

// custom aliases
const aliases = {
    start: "area.list"

export const views = (name) => {
  if (aliases[name]) name = aliases[name];

  const mod = modules[`./${name.replace(/\./g, "/")}.js`];
  if (!mod) return modules["./404.js"]().then((x) => x.default);
  return mod().then((x) => x.default);