@mogland-dev/vite-plugin-mog-themes-dev

A Vite Plugin for developing mog themes

🧪 Working in Progress

Features

• File listening and reload (full reload). When the theme file changes, the page will be reloaded automatically.
• Multi-theme support. You can develop multiple themes at the same time.
• Simulation data. You can configure the simulation data in the mock folder.
• Friendly error page. When an error occurs, the error page will be displayed. No JSON display.
• GUI configuration. You can configure the theme like in the console, or modify the mock data.
• Theme extension support. You can develop themes based on custom extensions.
• Full development support. You can experience the good development of the theme without the need for a mog server.
• Full reload -> Hot reload. When the theme file changes, only the changed part will be reloaded. It will be implemented in the future.
• Create To Publish CLI. You can create a theme and publish it to the Mog Community with one cli.
• Connect to the Mog Server. You can connect to the Mog Server to develop themes to experience the production environment.
• ...

Usage

• Themes Storage: ./themes
• Server config: ./vite.config.js
• Data simulation: ./mock

const createMogThemeDevServerPlugin = require('./plugin.js');

module.exports = {
  plugins: [
    createMogThemeDevServerPlugin({
      themeId: "theme.test-theme.wibus"
    })
  ],
};

1. According to the directions on the https://mog.js.org/development/theme store in the theme folder to create a theme.
2. The theme id that needs to be applied in vite.config.js. (If not, the access path needs to be changed to {THEME_ID}/{PAGE})
3. Configure the data simulation you need.
4. Run npm run dev to start the development server.

Simulation Data

Simulation data is automatically generated by facker.js, you can configure the data you need in mock/mock.ts. But please follow the type definition (in @types).

Currently, mock data is cached, and mock data is not regenerated every time you refresh. You must kill the process and restart it to regenerate mock data.

Theme

The theme is stored in the themes folder, it's a folder, the folder name is the theme id, and the folder contains the theme files.

themes
└── theme.test-theme.wibus
    ├── post.ejs
    ├── index.ejs
    └── ... # other files

Author

@mogland-dev/vite-plugin-mog-themes-dev © Wibus, Released under MIT. Created on Jun 22, 2023

Personal Website · Blog · GitHub @wibus-wee · Telegram @wibus✪