.gitignore

@@ -1,4 +1,5 @@
 /js
+/assets
 /node_modules
 /l10n/*
 /releases

lib/AppInfo/Application.php

@@ -8,13 +8,13 @@ use OC\User\User;
 use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
+use OCA\SideMenu\Util\AssetUtil;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
 use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\IUserSession;
 use OCP\Util;
-use Psr\Container\ContainerInterface;
 
 /**
  * class Application.
@@ -72,21 +72,27 @@ class Application extends App implements IBootstrap
 
     protected function addAssets()
     {
-        Util::addScript(self::APP_ID, 'sideMenu');
-        Util::addStyle(self::APP_ID, 'sideMenu');
+        AssetUtil::getInstance()
+            // Add runtime.js
+            ->addEntrypointAsset('menu', 'js', 0)
+            // Add menu.js
+            ->addEntrypointAsset('menu', 'js', 1)
+            // Add menu.css
+            ->addEntrypointAsset('menu', 'css', 0)
+        ;
 
         $assets = [
-            'stylesheet' => [
-                'route' => 'side_menu.Css.stylesheet',
+            [
                 'type' => 'link',
+                'route' => 'side_menu.Css.stylesheet',
                 'route_attr' => 'href',
                 'attr' => [
                     'rel' => 'stylesheet',
                 ],
             ],
-            'script' => [
-                'route' => 'side_menu.Js.script',
+            [
                 'type' => 'script',
+                'route' => 'side_menu.Js.script',
                 'route_attr' => 'src',
                 'attr' => [
                     'nonce' => $this->cspnm->getNonce(),
@@ -99,7 +105,6 @@ class Application extends App implements IBootstrap
         foreach ($assets as $value) {
             $route = OC::$server->getURLGenerator()->linkToRoute($value['route'], ['v' => $cache]);
             $value['attr'][$value['route_attr']] = $route;
-
             Util::addHeader($value['type'], $value['attr'], '');
         }
     }

lib/Util/AssetUtil.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace OCA\SideMenu\Util;
+
+use OC_Util;
+use OCA\SideMenu\AppInfo\Application;
+
+/**
+ * class AssetUtil.
+ *
+ * @author Simon Vieille <simon@deblan.fr>
+ */
+class AssetUtil
+{
+    protected array $entrypoints;
+    protected static ?AssetUtil $instance = null;
+
+    public function __construct()
+    {
+        $this->entrypoints = json_decode(
+            file_get_contents(__DIR__.'/../../assets/entrypoints.json'),
+            true
+        )['entrypoints'];
+    }
+
+    public static function getInstance(): self
+    {
+        if (null === self::$instance) {
+            self::$instance = new self();
+        }
+
+        return self::$instance;
+    }
+
+    public function addEntrypointAsset($entry, $type, $key): self
+    {
+        $file = basename($this->entrypoints[$entry][$type][$key]);
+        $path = $this->generatePath('assets', $file);
+
+        return $this->addAsset($type, $path);
+    }
+
+    public function addAsset($type, $path): self
+    {
+        $path = preg_replace('/\.(css|js)$/', '', $path);
+
+        if ('css' === $type) {
+            OC_Util::$styles[] = $path;
+        } elseif ('js' === $type) {
+            OC_Util::$scripts[] = $path;
+        }
+
+        return $this;
+    }
+
+    public function generatePath($directory, $file): string
+    {
+        return implode('/', [
+            Application::APP_ID,
+            $directory,
+            $file,
+        ]);
+    }
+}

package.json

@@ -2,9 +2,9 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"build": "NODE_ENV=production ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"dev": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"watch": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --watch --config webpack.js",
+		"build": "./node_modules/.bin/encore prod",
+		"dev": "./node_modules/.bin/encore dev",
+		"watch": "./node_modules/.bin/encore dev --watch",
 		"lint": "./node_modules/.bin/eslint --ext .js,.vue src",
 		"lint:fix": "./node_modules/.bin/eslint --ext .js,.vue src --fix",
 		"stylelint": "./node_modules/.bin/stylelint src",
@@ -12,7 +12,6 @@
 	},
 	"dependencies": {
 		"axios": "^0.24.0",
-		"trim": "^1.0.1",
 		"vue": "^2.6.11"
 	},
 	"browserslist": [
@@ -24,13 +23,16 @@
 	"devDependencies": {
 		"@babel/core": "^7.9.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+		"@babel/plugin-transform-runtime": "^7.19.6",
 		"@babel/preset-env": "^7.9.0",
+		"@babel/runtime": "^7.20.0",
 		"@nextcloud/axios": "^1.8.0",
 		"@nextcloud/browserslist-config": "^1.0.0",
 		"@nextcloud/eslint-config": "^8.1.2",
 		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/l10n": "^1.6.0",
 		"@nextcloud/vue": "^7.0.0",
+		"@symfony/webpack-encore": "^4.1.1",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"css-loader": "^3.4.2",
@@ -45,8 +47,8 @@
 		"eslint-plugin-vue": "^9.0.0",
 		"eslint-webpack-plugin": "^3.0.0",
 		"file-loader": "^6.0.0",
-		"sass": "^1.49.9",
-		"sass-loader": "^13.0.2",
+		"sass": "^1.55.0",
+		"sass-loader": "^13.1.0",
 		"stylelint": "^14.0.0",
 		"stylelint-config-recommended-scss": "^7.0.0",
 		"stylelint-scss": "^4.0.0",
@@ -55,7 +57,7 @@
 		"vue-loader": "^15",
 		"vue-style-loader": "^4.1.3",
 		"vue-template-compiler": "^2.7.13",
-		"webpack": "^5.0.0",
+		"webpack": "^5.74.0",
 		"webpack-cli": "^4.0.0",
 		"webpack-merge": "^4.2.2",
 		"webpack-node-externals": "^1.7.2"

src/SideMenu.vue

@@ -53,7 +53,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import trim from 'trim'
 import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'

src/admin.js

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import 'regenerator-runtime/runtime'
+import './css/admin.scss'
 import AdminCategoriesCustom from './AdminCategoriesCustom.vue'
 import Vue from 'vue'
 

src/css/menu.scss

@@ -73,7 +73,7 @@
 }
 
 .side-menu-opener {
-  background: var(--side-menu-opener, url('../img/side-menu-opener.svg'));
+  background: var(--side-menu-opener, url('../../img/side-menu-opener.svg'));
   background-color: transparent !important;
   height: 40px !important;
   width: 40px !important;
@@ -90,7 +90,7 @@
 }
 
 .side-menu-closer {
-  background: url('../img/side-menu-opener-closer.svg');
+  background: url('../../img/side-menu-opener-closer.svg');
   display: none;
 }
 
@@ -113,7 +113,7 @@
   vertical-align: middle;
   margin-top: -4px;
   margin-right: 10px;
-  filter: invert(var(--side-menu-icon-invert-filter, 0%));
+  /*filter: invert(var(--side-menu-icon-invert-filter, 0%));*/
   opacity: var(--side-menu-icon-opacity, 1);
 }
 

src/menu.js

@@ -15,6 +15,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import 'regenerator-runtime/runtime'
+import './css/menu.scss'
 import Vue from 'vue'
 import AppMenu from './AppMenu.vue'
 import SideMenu from './SideMenu.vue'
@@ -23,11 +25,15 @@ import SideMenuWithCategories from './SideMenuWithCategories.vue'
 import PageLoader from './PageLoader'
 import SMcreateElement from './lib/createElement'
 
-Vue.prototype.OC = OC
-Vue.prototype.t = OC.L10N.translate
+setInterval(() => {
+  console.log(window.OC)
+}, 100)
 
-window.SMcreateElement = SMcreateElement
-window.PageLoader = PageLoader
+// Vue.prototype.OC = window.OC
+// Vue.prototype.t = OC.L10N.translate
+//
+// window.SMcreateElement = SMcreateElement
+// window.PageLoader = PageLoader
 
 const mountSideMenuComponent = () => {
   const container = document.querySelector('#side-menu')

webpack.config.js

@@ -0,0 +1,34 @@
+const Encore = require('@symfony/webpack-encore');
+
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+    .setOutputPath('assets/')
+    .setPublicPath('./')
+    .addEntry('admin', './src/admin.js')
+    .addEntry('menu', './src/menu.js')
+    .setManifestKeyPrefix('./')
+    .enableSingleRuntimeChunk()
+    .cleanupOutputBeforeBuild()
+    .enableVueLoader()
+    .enableSourceMaps(!Encore.isProduction())
+    .enableVersioning(Encore.isProduction())
+    .configureBabel((config) => {
+        config.plugins.push('@babel/plugin-proposal-class-properties');
+    })
+    .configureBabelPresetEnv((config) => {
+        config.useBuiltIns = 'usage';
+        config.corejs = 3;
+    })
+    .copyFiles({
+        from: './img',
+        to: 'images/[path][name].[hash:8].[ext]'
+    })
+    .enableSassLoader()
+;
+
+module.exports = Encore.getWebpackConfig();

webpack.js

@@ -1,54 +0,0 @@
-const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
-
-module.exports = {
-    devtool: "source-map",
-    entry: {
-        'admin': path.join(__dirname, 'src', 'admin.js'),
-        'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
-    },
-    output: {
-        path: path.resolve(__dirname, './js'),
-        publicPath: '/js',
-        filename: '[name].js?v=[hash]',
-        chunkFilename: 'chunks/[name]-[hash].js',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader'],
-            },
-            {
-                test: /\.scss$/,
-                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-            },
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader',
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.(png|jpg|gif|svg)$/,
-                loader: 'url-loader',
-                options: {
-                    name: '[name].[ext]?[hash]',
-                    limit: 8192,
-                },
-            },
-        ],
-    },
-    plugins: [
-        new VueLoaderPlugin(),
-        new StyleLintPlugin(),
-    ],
-    resolve: {
-        extensions: ['*', '.js', '.vue'],
-        symlinks: false,
-    },
-}