From e54b894256751afb82cd47f7cccc1bf1745a7757 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sat, 8 May 2021 15:20:23 +0200
Subject: [PATCH] vite2

---
 zero.Web.UI/App/components/forms/rte.vue      |  2 +-
 .../components/overlays/select-overlay.vue    |  1 -
 zero.Web.UI/app/core/editor-field.ts          | 40 +++++------
 zero.Web.UI/app/core/editor.ts                | 22 +++---
 zero.Web.UI/app/core/list-column.ts           | 68 +++++++++---------
 zero.Web.UI/app/core/list.ts                  | 18 ++---
 zero.Web.UI/app/core/plugin.ts                | 12 ++--
 zero.Web.UI/app/core/zero.ts                  | 46 ++++++------
 zero.Web.UI/package.json                      |  4 +-
 zero.Web.UI/vite.config.js                    | 71 ++++++++-----------
 10 files changed, 137 insertions(+), 147 deletions(-)

diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue
index f08d276e..02c533b6 100644
--- a/zero.Web.UI/App/components/forms/rte.vue
+++ b/zero.Web.UI/App/components/forms/rte.vue
@@ -24,7 +24,7 @@
                 <ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
               </button>
             </template>
-            <ui-dropdown-button v-for="child in cmd.children" :label="child.title" @click="child.onClick($event, commands)" />
+            <ui-dropdown-button v-for="child in cmd.children" :key="child.id" :label="child.title" @click="child.onClick($event, commands)" />
           </ui-dropdown>
         </div>
       </div>
diff --git a/zero.Web.UI/App/components/overlays/select-overlay.vue b/zero.Web.UI/App/components/overlays/select-overlay.vue
index 093bf84a..90ce8a19 100644
--- a/zero.Web.UI/App/components/overlays/select-overlay.vue
+++ b/zero.Web.UI/App/components/overlays/select-overlay.vue
@@ -25,7 +25,6 @@
 
 
 <script>
-  import ChannelsApi from 'shop/api/channels.js';
   import Overlay from 'zero/helpers/overlay.js';
 
   const defaultConfig = {
diff --git a/zero.Web.UI/app/core/editor-field.ts b/zero.Web.UI/app/core/editor-field.ts
index b6a4cff6..5d00e466 100644
--- a/zero.Web.UI/app/core/editor-field.ts
+++ b/zero.Web.UI/app/core/editor-field.ts
@@ -16,16 +16,16 @@ class EditorField
     class: ''
   };
 
-  #preview = {
+  _preview = {
     icon: 'fth-filter',
     preview: x => x,
     hasValue: x => !!x
   };
 
-  #component = null;
-  #componentOptions = {};
-  #required = false;
-  #isReadOnly = false;
+  _component = null;
+  _componentOptions = {};
+  _required = false;
+  _isReadOnly = false;
 
   constructor(path, options)
   {
@@ -36,22 +36,22 @@ class EditorField
 
   get component()
   {
-    return this.#component;
+    return this._component;
   }
 
   get componentOptions()
   {
-    return this.#componentOptions;
+    return this._componentOptions;
   }
 
   get isRequired()
   {
-    return this.#required;
+    return this._required;
   }
 
   get previewOptions()
   {
-    return this.#preview;
+    return this._preview;
   }
 
 
@@ -64,10 +64,10 @@ class EditorField
   {
     this.path = field.path;
     this.options = { ...field.options };
-    this.#preview = { ...field.previewOptions };
-    this.#component = field.component;
-    this.#componentOptions = field.componentOptions;
-    this.#required = field.isRequired;
+    this._preview = { ...field.previewOptions };
+    this._component = field.component;
+    this._componentOptions = field.componentOptions;
+    this._required = field.isRequired;
     return this;
   }
 
@@ -77,8 +77,8 @@ class EditorField
    */
   _setComponent(component, options?)
   {
-    this.#component = component;
-    this.#componentOptions = options || {};
+    this._component = component;
+    this._componentOptions = options || {};
     return this;
   }
 
@@ -101,15 +101,15 @@ class EditorField
   {
     if (typeof condition === 'function')
     {
-      this.#required = condition;
+      this._required = condition;
     }
     else if (typeof condition === 'boolean')
     {
-      this.#required = condition;
+      this._required = condition;
     }
     else
     {
-      this.#required = true;
+      this._required = true;
     }
     return this;
   }
@@ -243,7 +243,7 @@ class EditorField
    */
   output(render)
   {
-    this.#isReadOnly = true;
+    this._isReadOnly = true;
     return this._setComponent(() => import('../editor/fields/text.vue'), { render });
   }
 
@@ -522,7 +522,7 @@ class EditorField
    */
   preview(options)
   {
-    this.#preview = { ...this.preview, ...options };
+    this._preview = { ...this.preview, ...options };
     return this;
   }
 }
diff --git a/zero.Web.UI/app/core/editor.ts b/zero.Web.UI/app/core/editor.ts
index 2277e4a5..03e286aa 100644
--- a/zero.Web.UI/app/core/editor.ts
+++ b/zero.Web.UI/app/core/editor.ts
@@ -3,10 +3,10 @@ import EditorField from './editor-field.ts';
 
 class Editor
 {
-  #alias;
-  #prefix;
+  _alias;
+  _prefix;
 
-  #preview = {
+  _preview = {
     icon: null,
     template: null,
     hideLabel: false
@@ -15,11 +15,11 @@ class Editor
   /**
    * Overrides the string generation for the label
    */
-  templateLabel = field => this.#prefix + field;
+  templateLabel = field => this._prefix + field;
   /**
    * Overrides the string generation for the description
    */
-  templateDescription = field => this.#prefix + field + '_text';
+  templateDescription = field => this._prefix + field + '_text';
 
   tabs = [];
   fields = [];
@@ -33,19 +33,19 @@ class Editor
 
   constructor(alias, prefix)
   {
-    this.#alias = alias;
-    this.#prefix = prefix || '';
+    this._alias = alias;
+    this._prefix = prefix || '';
   }
 
 
   get alias()
   {
-    return this.#alias;
+    return this._alias;
   }
 
   get previewOptions()
   {
-    return this.#preview;
+    return this._preview;
   }
 
 
@@ -223,7 +223,7 @@ class Editor
   {
     this.fields = editor.fields.map(x => new EditorField(x.path).setBase(x));
     this.tabs = editor.tabs.map(x => this._createTab(x.alias, x.name, x.disabled, x.count, x.component));
-    this.#preview = { ...editor.previewOptions };
+    this._preview = { ...editor.previewOptions };
     return this;
   }
 
@@ -239,7 +239,7 @@ class Editor
    */
   preview(template, options)
   {
-    this.#preview = { ...this.#preview, template, ...options };
+    this._preview = { ...this._preview, template, ...options };
     return this;
   }
 
diff --git a/zero.Web.UI/app/core/list-column.ts b/zero.Web.UI/app/core/list-column.ts
index 77ce975d..26489a18 100644
--- a/zero.Web.UI/app/core/list-column.ts
+++ b/zero.Web.UI/app/core/list-column.ts
@@ -14,10 +14,10 @@ class ListColumn
     class: ''
   };
 
-  #type = null;
-  #func = () => { };
-  #funcOptions = {};
-  #asHtml = false;
+  _type = null;
+  _func = () => { };
+  _funcOptions = {};
+  _asHtml = false;
 
   constructor(path, options)
   {
@@ -28,12 +28,12 @@ class ListColumn
 
   get isHtml()
   {
-    return this.#asHtml;
+    return this._asHtml;
   }
 
   get type()
   {
-    return this.#type;
+    return this._type;
   }
 
 
@@ -45,7 +45,7 @@ class ListColumn
    */
   render(value, model)
   {
-    return this.#func(value, this.#funcOptions, model);
+    return this._func(value, this._funcOptions, model);
   }
 
 
@@ -58,9 +58,9 @@ class ListColumn
    */
   custom(renderFunc, asHtml, type)
   {
-    this.#type = type || 'custom';
-    this.#asHtml = asHtml || false;
-    this.#func = (value, opts, model) =>
+    this._type = type || 'custom';
+    this._asHtml = asHtml || false;
+    this._func = (value, opts, model) =>
     {
       return renderFunc(value, model, opts);
     };
@@ -78,9 +78,9 @@ class ListColumn
    */
   text(options)
   {
-    this.#type = 'text';
-    this.#funcOptions = { localize: false, tokens: {}, wrap: false, ...options };
-    this.#func = (value, opts) =>
+    this._type = 'text';
+    this._funcOptions = { localize: false, tokens: {}, wrap: false, ...options };
+    this._func = (value, opts) =>
     {
       let result = value;
       if (opts.localize)
@@ -103,8 +103,8 @@ class ListColumn
    */
   html(options)
   {
-    this.#type = 'html';
-    this.#asHtml = true;
+    this._type = 'html';
+    this._asHtml = true;
     return this.text(options);
   }
 
@@ -117,9 +117,9 @@ class ListColumn
    */
   date(options)
   {
-    this.#type = 'date';
-    this.#funcOptions = { format: 'short', ...options };
-    this.#func = (value, opts) => Strings.date(value, opts.format);
+    this._type = 'date';
+    this._funcOptions = { format: 'short', ...options };
+    this._func = (value, opts) => Strings.date(value, opts.format);
     return this;
   }
 
@@ -130,9 +130,9 @@ class ListColumn
    */
   currency()
   {
-    this.#type = 'currency';
-    this.#asHtml = true;
-    this.#func = (value, opts) =>
+    this._type = 'currency';
+    this._asHtml = true;
+    this._func = (value, opts) =>
     {
       let price = isNaN(value) ? 0 : value;
       let hasDecimals = ~~price !== price;
@@ -152,10 +152,10 @@ class ListColumn
    */
   boolean(options)
   {
-    this.#type = 'boolean';
-    this.#asHtml = true;
-    this.#funcOptions = { ...options };
-    this.#func = (value, opts) => `<svg class="ui-icon ui-table-field-bool" width="16" height="16" stroke-width="${!!value ? '2.5' : '2'}" data-symbol="${!!value ? 'fth-check' : 'fth-x'}">
+    this._type = 'boolean';
+    this._asHtml = true;
+    this._funcOptions = { ...options };
+    this._func = (value, opts) => `<svg class="ui-icon ui-table-field-bool" width="16" height="16" stroke-width="${!!value ? '2.5' : '2'}" data-symbol="${!!value ? 'fth-check' : 'fth-x'}">
       <use xlink:href="#${!!value ? 'fth-check' : 'fth-x'}" />
     </svg>`;
     return this;
@@ -168,9 +168,9 @@ class ListColumn
    */
   image()
   {
-    this.#type = 'image';
-    this.#asHtml = true;
-    this.#func = (value, opts) => value ? `<img src="${MediaApi.getImageSource(value)}" class="ui-table-field-image">` : '';
+    this._type = 'image';
+    this._asHtml = true;
+    this._func = (value, opts) => value ? `<img src="${MediaApi.getImageSource(value)}" class="ui-table-field-image">` : '';
     return this;
   }
 
@@ -184,9 +184,9 @@ class ListColumn
   icon(icon, size)
   {
     size = size || 17;
-    this.#type = 'icon';
-    this.#asHtml = true;
-    this.#func = (value, opts) =>
+    this._type = 'icon';
+    this._asHtml = true;
+    this._func = (value, opts) =>
     {
       let ico = (icon || value).trim();
       let html = `<svg class="ui-icon ui-table-field-image" width="${size}" height="${size}" stroke-width="2" :data-symbol="${ico}">`;
@@ -208,9 +208,9 @@ class ListColumn
   {
     this.options.label = '@ui.name';
     this.options.class = 'is-name';
-    this.#type = 'text';
-    this.#asHtml = true;
-    this.#func = (value, opts, model) =>
+    this._type = 'text';
+    this._asHtml = true;
+    this._func = (value, opts, model) =>
     {
       let html = '<b>' + value + '</b>';
 
diff --git a/zero.Web.UI/app/core/list.ts b/zero.Web.UI/app/core/list.ts
index 58d3a1e7..894aa530 100644
--- a/zero.Web.UI/app/core/list.ts
+++ b/zero.Web.UI/app/core/list.ts
@@ -4,9 +4,9 @@ import ListAction from './list-action.ts';
 
 class List
 {
-  #alias;
-  #fetch;
-  #filterOptions;
+  _alias;
+  _fetch;
+  _filterOptions;
 
   /**
    * Set the default query options which are passed to the fetch function.
@@ -110,18 +110,18 @@ class List
 
   constructor(alias)
   {
-    this.#alias = alias;
+    this._alias = alias;
   }
 
 
   get alias()
   {
-    return this.#alias;
+    return this._alias;
   }
 
   get filterOptions()
   {
-    return this.#filterOptions;
+    return this._filterOptions;
   }
 
 
@@ -193,7 +193,7 @@ class List
    */
   onFetch(callback)
   {
-    this.#fetch = callback;
+    this._fetch = callback;
   }
 
 
@@ -202,7 +202,7 @@ class List
    */
   fetch(filter)
   {
-    return this.#fetch(filter);
+    return this._fetch(filter);
   }
 
 
@@ -214,7 +214,7 @@ class List
    */
   useFilter(editor, template)
   {
-    this.#filterOptions = { editor, template };
+    this._filterOptions = { editor, template };
   }
 };
 
diff --git a/zero.Web.UI/app/core/plugin.ts b/zero.Web.UI/app/core/plugin.ts
index 94313dc2..bb773f38 100644
--- a/zero.Web.UI/app/core/plugin.ts
+++ b/zero.Web.UI/app/core/plugin.ts
@@ -1,8 +1,8 @@
 
 class Plugin
 {
-  #name;
-  #onInstall;
+  _name;
+  _onInstall;
 
   routes = [];
   editors = [];
@@ -11,23 +11,23 @@ class Plugin
 
   constructor(name)
   {
-    this.#name = name;
+    this._name = name;
   }
 
 
   get name()
   {
-    return this.#name;
+    return this._name;
   }
 
   get install()
   {
-    return this.#onInstall;
+    return this._onInstall;
   }
 
   set install(callback)
   {
-    this.#onInstall = callback;
+    this._onInstall = callback;
   }
 
 
diff --git a/zero.Web.UI/app/core/zero.ts b/zero.Web.UI/app/core/zero.ts
index 708bb42c..f10a87b7 100644
--- a/zero.Web.UI/app/core/zero.ts
+++ b/zero.Web.UI/app/core/zero.ts
@@ -17,13 +17,13 @@ class Zero
 
   config = { };
 
-  #vue = null;
-  #plugins = [];
-  #editors = [];
-  #lists = [];
-  #routes = [];
-  #router = null;
-  #setupDone = false;
+  _vue = null;
+  _plugins = [];
+  _editors = [];
+  _lists = [];
+  _routes = [];
+  _router = null;
+  _setupDone = false;
 
 
   constructor(vue, opts)
@@ -38,7 +38,7 @@ class Zero
 
     console.info(this.config);
 
-    this.#vue = vue;
+    this._vue = vue;
 
     this.use(ZeroPlugin);
     //this.use(CommercePlugin);
@@ -59,7 +59,7 @@ class Zero
    */
   get plugins()
   {
-    return this.#plugins;
+    return this._plugins;
   }
 
 
@@ -68,7 +68,7 @@ class Zero
    */
   get router()
   {
-    return this.#router;
+    return this._router;
   }
 
 
@@ -94,17 +94,17 @@ class Zero
    */
   setup()
   {
-    this.#router = new VueRouter({
+    this._router = new VueRouter({
       ...routerConfig,
-      routes: this.#routes
+      routes: this._routes
     });
 
-    this.#router.beforeEach(routerConfig.beforeEach);
+    this._router.beforeEach(routerConfig.beforeEach);
 
     //const result = await Axios.get('zerovue/config');
     //this.config = { ...this.config, ...result.data };
 
-    this.#setupDone = true;
+    this._setupDone = true;
     //EventHub.$emit('zero.setup');
   }
 
@@ -130,26 +130,26 @@ class Zero
   {
     if (typeof plugin.install === 'function')
     {
-      plugin.install(this.#vue, this);
+      plugin.install(this._vue, this);
     }
 
-    this.#plugins.push(plugin);
+    this._plugins.push(plugin);
 
     // append routes
-    if (this.#setupDone)
+    if (this._setupDone)
     {
-      this.#router.addRoutes(plugin.routes);
+      this._router.addRoutes(plugin.routes);
     }
     else
     {
-      plugin.routes.forEach(x => this.#routes.push(x));
+      plugin.routes.forEach(x => this._routes.push(x));
     }
 
     // append editors
-    plugin.editors.forEach(x => this.addOrReplace(this.#editors, x, 'alias'));
+    plugin.editors.forEach(x => this.addOrReplace(this._editors, x, 'alias'));
 
     // append lists
-    plugin.lists.forEach(x => this.addOrReplace(this.#lists, x, 'alias'));
+    plugin.lists.forEach(x => this.addOrReplace(this._lists, x, 'alias'));
 
     // append 
 
@@ -162,7 +162,7 @@ class Zero
    */
   getEditor(alias)
   {
-    const renderer = this.#editors.find(x => x.alias === alias);
+    const renderer = this._editors.find(x => x.alias === alias);
 
     if (!renderer)
     {
@@ -178,7 +178,7 @@ class Zero
   */
   getList(alias)
   {
-    const renderer = this.#lists.find(x => x.alias === alias);
+    const renderer = this._lists.find(x => x.alias === alias);
 
     if (!renderer)
     {
diff --git a/zero.Web.UI/package.json b/zero.Web.UI/package.json
index ffdf4269..d8de732b 100644
--- a/zero.Web.UI/package.json
+++ b/zero.Web.UI/package.json
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "sass": "1.32.4",
-    "vite": "1.0.0-rc.13",
-    "vite-plugin-vue2": "0.2.2",
+    "vite": "^2.2.4",
+    "vite-plugin-vue2": "^1.5.1",
     "vue-template-compiler": "^2.6.12"
   }
 }
diff --git a/zero.Web.UI/vite.config.js b/zero.Web.UI/vite.config.js
index 3880f0ce..289d61d2 100644
--- a/zero.Web.UI/vite.config.js
+++ b/zero.Web.UI/vite.config.js
@@ -14,13 +14,23 @@ loadedPlugins.forEach(pluginPath =>
 {
   const viteConfigPath = pluginPath + "/vite.plugin.js"; 
   const pluginConfig = require(viteConfigPath);
-  zeroPlugins.push(pluginConfig());
+  const resolvedPluginConfig = pluginConfig();
+  zeroPlugins.push(resolvedPluginConfig);
 
   const name = 'zeroPlugin' + idx;
-  const alias = '/@zeroplugin' + (idx++) + '/';
+  const alias = '@zeroplugin' + (idx++);
   pluginAliases[alias] = path.resolve(__dirname, pluginPath);
+
+  if (typeof resolvedPluginConfig.alias === 'object')
+  {
+    for (const key in resolvedPluginConfig.alias)
+    {
+      pluginAliases[key] = resolvedPluginConfig.alias[key];
+    }
+  }
+
   pluginNames.push(name);
-  pluginFileContent += "import " + name + " from '" + alias + "plugin.js';\n";
+  pluginFileContent += "import " + name + " from '" + alias + "/plugin.js';\n";
 });
 
 pluginFileContent += "export default [ " + pluginNames.join(', ') + " ];";
@@ -35,48 +45,29 @@ fs.writeFile(path.resolve(__dirname, 'app/core/plugins.js'), pluginFileContent,
   //file written successfully
 })
 
-const aliasResolver = {
-  alias(id)
-  {
-    if (id.indexOf('zero/') === 0)
-    {
-      return '/@' + id;
-    }
-    if (id.indexOf('zerolib') === 0)
-    {
-      return '/@zero/zerox.js';
-    }
-  }
-  //requestToFile(publicPath, root)
-  //{
-  //  if (publicPath.indexOf('/@zero/') === 0)
-  //  {
-  //    return path.join(root, publicPath.replace('/@zero/', ''));
-  //  }
-  //  if (publicPath.indexOf('/@shop/') === 0)
-  //  {
-  //    return path.join(root, publicPath.replace('/@shop/', '../zero.Commerce/Plugins/zero.Commerce/'));
-  //  }
-  //}
-};
-
 const config = {
-  port: process.env.PORT,
-  cors: true,
-  emitManifest: true,
+  server: {
+    port: process.env.PORT,
+    cors: true
+  },
   plugins: [createVuePlugin(), ...zeroPlugins],
   alias: {
-    '/@zero/': path.resolve(__dirname, 'app/'),
+    '@zero': path.resolve(__dirname, 'app/'),
+    'zero': path.resolve(__dirname, 'app/'),
     ...pluginAliases,
-    'vue': 'vue/dist/vue.esm.js'
-  },
-  resolvers: [aliasResolver],
-  rollupOutputOptions: {
-    format: 'cjs',
-    entryFileNames: `[name].js`,
-    chunkFileNames: `[name].js`,
-    assetFileNames: `[name].[ext]`
+    'vue': 'vue/dist/vue.esm.js',
+    'tiptap': 'tiptap/dist/tiptap.esm.js'
   },
+  build: {
+    manifest: false,
+    rollupOptions: {
+      format: 'cjs',
+      entryFileNames: `[name].js`,
+      chunkFileNames: `[name].js`,
+      assetFileNames: `[name].[ext]`
+    },
+
+  }
 };
 
 export default config;
\ No newline at end of file