Skip to content

Commit e5fa4f3

Browse files
committed
[dev] removed the fancy code block tags to try and fix the missing code
1 parent 74cb5b8 commit e5fa4f3

File tree

1 file changed

+11
-28
lines changed

1 file changed

+11
-28
lines changed

part-iv-toolchain/using-with-vite.md

+11-28
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
# Using with Vite
22

3-
You can use Jet with other app bundlers instead of WebPack. For example, [Vite](https://vitejs.dev/). There are some differences from usage with WebPack:
3+
Starting with Webix Jet 3.0, the toolchain has been migrated to Vite. Read more about it [here](https://webix.gitbook.io/webix-jet/part-iv-toolchain/big-app-development). There are some differences from usage with WebPack:
44

55
- the `.env` file is added, it stores global constants:
66

7-
{% code-tabs %}
8-
{% code-tabs-item title=".env" %}
9-
```
7+
```bash
108
APPNAME=Demo
119
VERSION=1.0.0
1210
BUILD_AS_MODULE=false
1311
```
14-
{% endcode-tabs-item %}
15-
{% endcode-tabs %}
1612

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

19-
{% code-tabs %}
20-
{% code-tabs-item title="app.js" %}
2115
```javascript
16+
// app.js
2217
const defaults = {
2318
id : import.meta.env.APPNAME,
2419
version : import.meta.env.VERSION,
@@ -33,14 +28,11 @@ if (!import.meta.env.BUILD_AS_MODULE){
3328
webix.ready(() => new MyApp().render() );
3429
}
3530
```
36-
{% endcode-tabs-item %}
37-
{% endcode-tabs %}
3831
3932
- the `app.js` contains section that imports all files from the "views" folder and assigns custom view resolver to the app class:
4033
41-
{% code-tabs %}
42-
{% code-tabs-item title="app.js" %}
4334
```javascript
35+
// app.js
4436
// dynamic import of views
4537
const modules = import.meta.glob("./views/**/*.js");
4638
const views = name => modules[`./views/${name}.js`]().then(x => x.default);
@@ -54,14 +46,11 @@ export default class MyApp extends JetApp{
5446
}
5547
}
5648
```
57-
{% endcode-tabs-item %}
58-
{% endcode-tabs %}
5949
6050
- optional, app.js contains custom locale loader:
6151
62-
{% code-tabs %}
63-
{% code-tabs-item title="app.js" %}
6452
```javascript
53+
// app.js
6554
const locales = import.meta.glob("./locales/*.js");
6655
const words = name => locales[`./locales/${name}.js`]().then(x => x.default);
6756

@@ -72,30 +61,24 @@ export default class MyApp extends JetApp{
7261
//...
7362

7463
// patch locales loader, optional
75-
this.use(plugins.Locale, { path: false, storage: this.webix.storage.session });
76-
const ls = this.getService("locale");
77-
ls.setLang = (lang, silent) =>
78-
words(lang).then(w => ls.setLangData(lang, w, silent));
79-
ls.setLang(ls.getLang(), true);
64+
this.use(plugins.Locale, {
65+
path: words,
66+
storage: this.webix.storage.session
67+
});
8068
}
8169
}
8270
```
83-
{% endcode-tabs-item %}
84-
{% endcode-tabs %}
8571
8672
- replace old scripts:
8773
88-
{% code-tabs %}
89-
{% code-tabs-item title="package.json" %}
9074
```json
75+
// package.json
9176
"scripts": {
9277
"build": "vite build",
9378
"start": "vite"
9479
}
9580
```
96-
{% endcode-tabs-item %}
97-
{% endcode-tabs %}
9881
9982
- the dev server is at ```http://localhost:5173```.
10083

101-
You can see the full code of the demo in the [vite branch of jet-start](https://github.com/webix-hub/jet-start/tree/vite).
84+
You can see the full code of the demo [here](https://github.com/webix-hub/jet-start/tree/master).

0 commit comments

Comments
 (0)