experimental: adapt for using rollupjs bundler

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "fhc-core",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup --watch -c"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^7.2.0",
+    "axios": "^1.6.8",
+    "primevue": "^3.29.1",
+    "tabulator-tables": "^5.5.2",
+    "vue": "^3.3.8",
+    "vue-router": "^4.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "glob": "^10.3.10",
+    "node-sass": "^9.0.0",
+    "rollup": "^4.13.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-vue": "^6.0.0"
+  }
+}

public/js/apps/TestSearch.js

@@ -1,5 +1,5 @@
-import {CoreFilterCmpt} from '../components/Filter.js';
+import {CoreFilterCmpt} from '../components/filter/Filter.js';
-import {CoreNavigationCmpt} from '../components/Navigation.js';
+import {CoreNavigationCmpt} from '../components/navigation/Navigation.js';
 import verticalsplit from "../components/verticalsplit/verticalsplit.js";
 import searchbar from "../components/searchbar/searchbar.js";
 import fhcapifactory from "./api/fhcapifactory.js";

public/js/components/Tabs.js

@@ -1,3 +1,4 @@
+import { markRaw, defineAsyncComponent } from 'vue';
 import {CoreRESTClient} from '../RESTClient.js';
 import accessibility from "../directives/accessibility.js";
 
@@ -70,7 +71,7 @@ export default {
 						return console.error('Component missing for ' + key);
 
 					tabs[key] = {
-						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						component: markRaw(defineAsyncComponent(() => import(item.component))),
 						title: item.title || key,
 						config: item.config,
 						key
@@ -82,7 +83,7 @@ export default {
 						return console.error('Component missing for ' + key);
 
 					tabs[key] = {
-						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						component: markRaw(defineAsyncComponent(() => import(item.component))),
 						title: item.title || key,
 						config: item.config,
 						key

public/js/components/filter/Filter.js

@@ -15,6 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import {CoreFilterAPIs} from './API.js';
 import {CoreRESTClient} from '../../RESTClient.js';
 import {CoreFetchCmpt} from '../../components/Fetch.js';

public/js/mixins/Phrasen.js

@@ -1,3 +1,5 @@
+import { ref, unref, triggerRef } from 'vue';
+
 const categories = {};
 const loadingModules = {};
 
@@ -12,8 +14,8 @@ function reloadRefs(category) {
 	while (loadingModules[category].length) {
 		var v = loadingModules[category].pop();
 		v[0].value = getValueForLoadedPhrase(category, v[1], v[2]);
-		Vue.triggerRef(v[0]);
+		triggerRef(v[0]);
-		/*Vue.unref(v);*/
+		/*unref(v);*/
 	}
 }
 function loadLazy(category, val, phrase, params) {
@@ -70,16 +72,16 @@ const phrasen = {
 			
 			if (!categories[category] || Object.keys(categories[category]).length === 0) {
 				categories[category] = undefined;
-				let val = Vue.ref(initialval);
+				let val = ref(initialval);
 				loadLazy(category, val, phrase, params);
 				return val;
 			}
 		}
 		var result = getValueForLoadedPhrase(category, phrase, params);
-		return Vue.ref(result);
+		return ref(result);
 	},
 	t(category, phrase, params) {
-		return Vue.unref(this.t_ref(category, phrase, params));
+		return unref(this.t_ref(category, phrase, params));
 	}
 };
 

public/js/plugin/FhcAlert.js

@@ -92,16 +92,24 @@
  * @param mixed		message
  * @return void
  */
+/*
 import PvConfig from "../../../index.ci.php/public/js/components/primevue/config/config.esm.min.js";
 import PvToast from "../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";
 import PvConfirm from "../../../index.ci.php/public/js/components/primevue/confirmdialog/confirmdialog.esm.min.js";
 import PvConfirmationService from "../../../index.ci.php/public/js/components/primevue/confirmationservice/confirmationservice.esm.min.js";
+*/
+
+import { createApp } from 'vue';
+import PvConfig from 'primevue/config';
+import PvToast from 'primevue/toast';
+import PvConfirm from 'primevue/confirmdialog';
+import PvConfirmationService from 'primevue/confirmationservice';
 
 import {CoreRESTClient} from '../RESTClient.js';
 
 const helperAppContainer = document.createElement('div');
 
-const helperApp = Vue.createApp({
+const helperApp = createApp({
 	components: {
 		PvToast,
 		PvConfirm

public/js/plugin/Phrasen.js

@@ -1,4 +1,6 @@
-const categories = Vue.reactive({});
+import { reactive, computed } from 'vue';
+
+const categories = reactive({});
 const loadingModules = {};
 
 function extractCategory(obj, category) {
@@ -35,7 +37,7 @@ const phrasen = {
 	},
 	t_ref(category, phrase, params) {
 		console.warn('depricated');
-		return Vue.computed(() => this.t(category, phrase, params));
+		return computed(() => this.t(category, phrase, params));
 	},
 	t(category, phrase, params) {
 		if (params === undefined && (
@@ -49,7 +51,7 @@ const phrasen = {
 			console.error('invalid input', category, phrase, params);
 			return '';
 		}
-		let val = Vue.computed(() => {
+		let val = computed(() => {
 			if (!categories[category])
 				return '';
 			return getValueForLoadedPhrase(category, phrase, params);

rollup.README.md

@@ -0,0 +1,25 @@
+***NVM installieren***
+
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+
+oder
+
+wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+
+***Node.js installieren***
+
+nvm install --lts
+
+***package.json***
+
+npm install
+
+***Rollup build***
+
+einmalig:
+
+npm run build
+
+als watch bei Änderungen:
+
+npm run watch

rollup.chunks.config.js

@@ -0,0 +1,99 @@
+import babel from '@rollup/plugin-babel';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import vue from "rollup-plugin-vue";
+import { globSync } from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import postcss from 'rollup-plugin-postcss';
+import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
+import { existsSync } from 'node:fs';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+
+function FhcResolver () {
+  return {
+    name: 'fhc-resolver', // this name will show up in logs and errors
+    resolveId ( source, importer, options ) {
+      if( source.includes('.php') ) {
+	return false;
+      }
+      //console.log('source: ' + source + ' options.isEntry: ' + options.isEntry + ' importer: ' + importer);
+      if(importer !== undefined && !options.isEntry && !path.isAbsolute(source)) {
+        let tmp = path.dirname(importer);
+	if( importer.includes('/application/') ) {
+	  tmp = tmp.replace(/public\/js\//, 'js/').replace(/\/application\//, '/public/');
+	}
+      	const resolved = path.resolve(tmp, source);
+	//console.log(resolved);
+	if( existsSync(resolved) ) {
+	  return resolved
+	}
+      }
+      return null; // other ids should be handled as usually
+    }
+  };
+}
+
+export default {
+	input: Object.fromEntries(
+		globSync('public/**/js/apps/**/*.js', {follow: true, realpath: true}).map(file => {
+			if( path.dirname(file).includes('/dist/') || path.dirname(file).includes('/apps/vbform') ) {
+				return null;
+			}
+			// This remove `src/` as well as the file extension from each
+			// file, so e.g. src/nested/foo.js becomes nested/foo
+			return [path.relative(
+				'',
+				file.slice(0, file.length - path.extname(file).length)
+			).replace(/public\//, 'public/dist/'),
+			// This expands the relative paths to absolute paths, so e.g.
+			// src/nested/foo becomes /project/src/nested/foo.js
+			fileURLToPath(new URL(file, import.meta.url))]
+		}).filter(Boolean)
+	),
+	plugins: [
+            	alias({
+			entries: {
+				vue: 'vue/dist/vue.esm-bundler.js'
+			}
+		}),
+		nodeResolve({
+			preferBuiltins: true,
+			moduleDirectories: ['node_modules'],
+			modulePaths: globSync('application/extensions/*/node_modules', {follow: true, realpath: true}).map(file => 
+				fileURLToPath(new URL(file, import.meta.url))
+			),
+		}),
+		FhcResolver(),
+		replace({
+			preventAssignment: true,
+			'process.env.NODE_ENV': JSON.stringify( 'production' ),
+    		}),
+		commonjs(),
+		vue(),
+		json(),
+		babel({
+			babelHelpers: 'bundled',
+      			plugins: ['transform-class-properties']
+		}),
+    		postcss({
+      			extract: false,
+      			modules: true,
+      			use: ['sass'],
+    		}),
+		terser()
+	],
+	watch: {
+		buildDelay: 500
+	},
+	output: {
+		preserveModules: false,
+		sourcemap: true,
+		format: 'es',
+		dir: './',
+		//manualChunks: {}
+		chunkFileNames: 'public/dist/js/includes/[name]-[hash].js'
+	}
+};

rollup.config.js

@@ -0,0 +1,106 @@
+import babel from '@rollup/plugin-babel';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import vue from "rollup-plugin-vue";
+import { globSync } from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import postcss from 'rollup-plugin-postcss';
+import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
+import { existsSync } from 'node:fs';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+
+function FhcResolver () {
+  return {
+    name: 'fhc-resolver', // this name will show up in logs and errors
+    resolveId ( source, importer, options ) {
+      if( source.includes('.php') ) {
+	return false;
+      }
+      //console.log('source: ' + source + ' options.isEntry: ' + options.isEntry + ' importer: ' + importer);
+      if(importer !== undefined && !options.isEntry && !path.isAbsolute(source)) {
+        let tmp = path.dirname(importer);
+	if( importer.includes('/application/') ) {
+	  tmp = tmp.replace(/public\/js\//, 'js/').replace(/\/application\//, '/public/');
+	}
+      	const resolved = path.resolve(tmp, source);
+	//console.log(resolved);
+	if( existsSync(resolved) ) {
+	  return resolved
+	}
+      }
+      return null; // other ids should be handled as usually
+    }
+  };
+}
+
+const useplugins = [
+    	alias({
+		entries: {
+			vue: 'vue/dist/vue.esm-bundler.js',
+		}
+	}),
+	commonjs(),
+	nodeResolve({
+		module: true,
+		jsnext: true,
+		preferBuiltins: true,
+		browser: true,
+		moduleDirectories: ['node_modules'],
+		modulePaths: globSync('application/extensions/*/node_modules', {follow: true, realpath: true}).map(file => 
+			fileURLToPath(new URL(file, import.meta.url))
+		),
+	}),
+	json({
+		compact: true
+	}),
+	FhcResolver(),
+	replace({
+		preventAssignment: true,
+		'process.env.NODE_ENV': JSON.stringify( 'production' ),
+	}),
+	vue(),
+	babel({
+		babelHelpers: 'bundled',
+		plugins: ['transform-class-properties'],
+	}),
+/*
+	postcss({
+		extract: false,
+		modules: true,
+		use: ['sass'],
+	}),
+*/
+	terser()
+];
+
+export default globSync('public/**/js/apps/**/*.js', {follow: true, realpath: true}).map(file => { 
+			if( path.dirname(file).includes('/dist/') || path.dirname(file).includes('/apps/vbform') ) {
+				return null;
+			}
+			let tmp = fileURLToPath(new URL(file, import.meta.url));
+			let cssfile = path.basename(tmp.replace(/\.js/, '.css'));
+			console.log('cssfile: ' + cssfile);
+			let cssplugin = [
+			  postcss({
+				extract: cssfile,
+				minimize: true,
+				sourceMap: true
+			  })
+			];
+			return {
+				input: tmp,
+				plugins: [...useplugins, ...cssplugin],
+				watch: {
+					buildDelay: 500
+				},
+				output: {
+					preserveModules: false,
+					sourcemap: true,
+					format: 'es',
+					file: tmp.replace(/public\//, 'public/dist/'),
+				}
+			}
+		}).filter(Boolean);