Webix-jet views in separate folders

#1

Hi,

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?

Thanks

#2

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"},

Thanks.

#3

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

views/
  - start.js
  - top.js
views_custom/
  - 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.

#4

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"
	views,
});

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);
};