diff --git a/package.json b/package.json
index 503c7d1..a284b60 100644
--- a/package.json
+++ b/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"
diff --git a/src/admin.js b/src/admin.js
index 66fb71d..d4b9bab 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -15,6 +15,8 @@
* along with this program. If not, see .
*/
+import 'regenerator-runtime/runtime'
+import './css/admin.scss'
import AdminCategoriesCustom from './AdminCategoriesCustom.vue'
import Vue from 'vue'
diff --git a/src/SideMenu.js b/src/menu.js
similarity index 87%
rename from src/SideMenu.js
rename to src/menu.js
index e7b3675..4267bbe 100644
--- a/src/SideMenu.js
+++ b/src/menu.js
@@ -15,6 +15,8 @@
* along with this program. If not, see .
*/
+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')
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..36fbaf5
--- /dev/null
+++ b/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();
diff --git a/webpack.js b/webpack.js
deleted file mode 100644
index 6e3eac8..0000000
--- a/webpack.js
+++ /dev/null
@@ -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,
- },
-}