ui: code formatting with wastyle

packages/ui-default/build/config/webpack.js

@@ -103,6 +103,11 @@ export default function (env = {}) {
           test: /\.css$/,
           use: [extractCssLoader(), cssLoader(), postcssLoader()],
         },
+        {
+          test: /\.wasm$/,
+          use: [fileLoader()],
+          type: 'javascript/auto',
+        },
       ],
     },
     optimization: {

packages/ui-default/components/highlighter/highlighter.page.js

@@ -1,14 +1,18 @@
 import { AutoloadPage } from 'vj/misc/Page';
+import load from 'vj/components/wastyle/index';
+import Notification from 'vj/components/notification/index';
 
-const highlighterPage = new AutoloadPage('highlighterPage', () => {
-  import('./prismjs').then((module) => {
-    const prismjs = module.default;
-    function runHighlight($container) {
-      prismjs.highlightBlocks($container);
-    }
-    runHighlight($('body'));
-    $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
-  });
+const highlighterPage = new AutoloadPage('highlighterPage', async () => {
+  const [{ default: prismjs }, [success, format]] = await Promise.all([
+    import('./prismjs'),
+    load(),
+  ]);
+  if (!success) Notification.error(`Astyle load fail: ${format}`);
+  function runHighlight($container) {
+    prismjs.highlightBlocks($container, success ? format : null);
+  }
+  runHighlight($('body'));
+  $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
 });
 
 export default highlighterPage;

packages/ui-default/components/highlighter/prismjs.js

@@ -11,7 +11,7 @@ To add a new language to highlight:
 import Prism from 'prismjs';
 
 import Clipboard from 'clipboard';
-import Notification from 'vj/components/notification';
+import Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
 
 import languageMeta from './meta';
@@ -95,16 +95,24 @@ Prism.hooks.add('before-highlight', (env) => {
 });
 
 const prismjsApiWrap = {
-  highlightBlocks: ($dom) => {
+  highlightBlocks: ($dom, format) => {
     $dom.find('pre code').get().forEach((code) => {
-      const $pre = $(code).parent();
+      const $code = $(code);
+      const $pre = $code.parent();
       $pre.addClass('syntax-hl');
       if ($pre.closest('[data-syntax-hl-show-line-number]')) {
         $pre.addClass('line-numbers');
       }
+      const language = ($(code).attr('class') || '').trim();
+      const astyle = language.match(/astyle-([a-z]+)/);
+      if (format && astyle && astyle[1]) {
+        const [success, result] = format($code.text(), `${UserContext.astyleOptions.trim()} mode=${astyle[1]}`);
+        console.log(success.result);
+        if (!success) Notification.error('Code format fail');
+        else $code.text(result.replace(/^#(include|import)[\t ]*(<|")/gm, (match, p1, p2) => `#${p1} ${p2}`));
+      }
       // try to map the language name
-      const language = $(code).attr('class');
-      const m = (language || '').trim().match(/^language-(.+)$/);
+      const m = language.match(/language-([a-z]+)/);
       if (m && m[1]) {
         const languageName = m[1].toLowerCase();
         if (languageExtMap[languageName]) {

packages/ui-default/components/wastyle/index.js

@@ -0,0 +1,12 @@
+import astyleBinaryUrl from 'wastyle/dist/astyle-optimize-size.wasm';
+
+export default async function load() {
+    const { init, format } = await import('wastyle');
+    try {
+        await init(astyleBinaryUrl);
+        console.log('WAstyle is ready!');
+        return [true, format];
+    } catch (e) {
+        return [false, e.message];
+    }
+}

packages/ui-default/package.json

@@ -97,6 +97,7 @@
     "uuid": "^8.3.2",
     "vinyl-buffer": "^1.0.1",
     "vj-simplemde": "0.0.8",
+    "wastyle": "^0.0.5",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-dev-server": "^3.11.2"

packages/ui-default/setting.yaml

@@ -48,11 +48,11 @@ lang_highlight_id:
   name: lang_highlight_id
   desc: Language Highlight ID
   default:
-    c: c
-    cc: cpp
-    cs: csharp
+    c: c astyle-c
+    cc: cpp astyle-c
+    cs: csharp astyle-cs
     pas: pascal
-    java: java
+    java: java astyle-java
     py: python
     py3: python
     php: php
@@ -85,3 +85,12 @@ showInvisibleChar:
   type: boolean
   desc: show invisible characters when formatting code
   category: preference
+astyleOptions:
+  type: text
+  desc: astyle formatting options
+  category: preference
+  value: >
+    style=java attach-namespaces attach-classes attach-inlines attach-extern-c attach-closing-while 
+    indent-col1-comments break-blocks pad-oper pad-comma pad-header unpad-paren align-pointer=name 
+    break-one-line-headers attach-return-type attach-return-type-decl convert-tabs close-templates 
+    max-code-length=110 break-after-logical