Cristal Wiki Modular UI Prototype

The is a prototype not ready for usage. It is intended for the developers of the project.

More information about the project is available here: https://design.xwiki.org/xwiki/bin/view/Proposal/Wiki30/

Modular UI build with:

• full typescript
• inversify for dependency Management
• vitejs for build
• pnpm workspaces to modularize
• Vue and Vuetify for the UI
• electron package build

Licence

This code is under the AGPL Licence and Copyright 2023 (c) XWiki SAS. See LICENSE

What's in the Prototype

Coded in Typescript

The code is now fully in Typescript (older version in JS without inversify is now in a branch) and has nice interfaces + default implementation for unique modules. Typescript is also used in the vue templates and is verified at compile time.

Modular Extension design

The goal is to build Cristal Wiki using a modular design allowing to add extensions which can extend the functionnalities of the UI both on the feature side but also for UI customization. The extensions will be able to extend the UI using UI extension points, by providing Vue templates, override the skin and add backend features such as support for different types of servers.

In order to replace an extension this would be done by providing the extension on the HTTP server providing the app in an apps directory. Each extension will be build as standard Javascript module. A configuration will indicate to the core client which modules to load and activate.

Dependency Injection & Component manager

A component manager similar to XWiki's at the Java level will allow to extend and also replace existing code. Everywhere it will be possible to call for other components to provide additional features.

This module is not developped using inversify https://github.com/inversify

Vue3 integration

One type of component will be Vue3 components, which can be provided by extensions. This will allow to provide UI features in extensions and tap in the powerfull Vue3 capacities.

Skin manager

One component will be the Template component, which will search for the right Vue Component using a skin manager. This will allow to find the template either in a customized skin, or in the standard skin but also in a feature extension. This will allow to override the UI in a similar way that XWiki on the server side.

Skins should support Themes but also Extension points to allow to show/hide specific features.

Design system

The design system is based on Vuetify which uses material design principles.

Bundling support

The build uses vitejs to build each submodule.

Development mode

There is now a development build using "pnpm dev" allowing quick development. Changes are reloaded immediately.

Build

Install modules

pnpm install

Build

lerna run build

To build a specific module use lerna run build --scope @cristal/

The build system includes build cache. To force rebuild, use

lerna run build --skip-nx-cache

lerna run start to launch the web server on http://localhost:9000

Development mode

pnpm dev

Go visit http://localhost:5173

Build electron package

To build an local electron build to test locally use

lerna run electron

To build the electron package for linux use

lerna run package

The packages will be build in electron/dist

Performance tests

The prototype includes some performance tests for the component libraries.

These can be viewed with the following URL:

• http://<server/Perf/ to view Vuetify tests
• http://<server/PerfDSFR/ to view DSFR tests
• http://<server/PerfSL/ to view SL tests

Using Cristal Wiki

Visiting page http://<server/XWiki/ or http://<server/XWikiOffline/ will connect to http://localhost:15680. A specific REST API is needed and the wiki should be public.

Visiting page http://<server/Wiki30/ will connect to https://wiki30.demo.xwiki.com. A specific REST API is needed and the wiki should be public.

Visiting page http://<server/GitHub/ will connect to https://github.com/ldubost/test/

Visiting page http://<server/XWikiDSFR/ allows to view Cristal using the DSFR design system.

Visiting page http://<server/XWikiSL/ allows to view Cristal using the Shoelace design system.

The REST API needed is currently experimental and published here: https://git.xwikisas.com/cristal/prototype2023-extension