@@ -, +, @@ --- .gitignore | 1 + Makefile.PL | 19 +++++++++++++++++- gulpfile.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++---- package.json | 29 +++++++++++++++++++++++++-- 4 files changed, 98 insertions(+), 7 deletions(-) --- a/.gitignore +++ a/.gitignore @@ -5,3 +5,4 @@ node_modules/ koha-tmpl/opac-tmpl/bootstrap/css/maps/ koha-tmpl/intranet-tmpl/prog/css/maps/ +koha-tmpl/intranet-tmpl/prog/js/built --- a/Makefile.PL +++ a/Makefile.PL @@ -1832,7 +1832,24 @@ sub postamble { $env .= join("\n", map { "export __${_}__ := $config{$_}" } keys %config); } - return "$env\n"; + my $js_build_targets = <<'JS'; +.PHONY: js-build js-deps js-watch +YARN=node_modules/.bin/yarn + +$(YARN): + npm install yarn + +js-deps: $(YARN) + $(YARN) install + +js-build: $(YARN) js-deps + $(YARN) build + +js-watch: $(YARN) js-deps + $(YARN) watch +JS + + return "$env\n$js_build_targets\n"; } --- a/gulpfile.js +++ a/gulpfile.js @@ -10,13 +10,23 @@ const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('gulp-autoprefixer'); const args = require('minimist')(process.argv.slice(2)); const rename = require('gulp-rename'); +const glob = require('glob'); +const path = require('path'); + +const rollupTypescript = require('@rollup/plugin-typescript'); +const rollupVue = require('rollup-plugin-vue'); +const rollup = require('rollup'); +const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const commonjs = require('@rollup/plugin-commonjs'); +const replace = require('@rollup/plugin-replace'); +const rollupCss = require('rollup-plugin-css-only'); const STAFF_JS_BASE = "koha-tmpl/intranet-tmpl/prog/js"; const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css"; const OPAC_JS_BASE = "koha-tmpl/opac-tmpl/bootstrap/js"; const OPAC_CSS_BASE = "koha-tmpl/opac-tmpl/bootstrap/css"; -if (args.view == "opac") { +if( args.view == "opac" ){ var css_base = OPAC_CSS_BASE; var js_base = OPAC_JS_BASE; } else { @@ -62,8 +72,46 @@ function build() { .pipe(dest(css_base)); } -exports.build = build; +async function vue() { + + const files = glob.sync(js_base + '/src/**/main.ts'); + + const inputs = files.reduce((prev, file) => { + prev[path.relative(js_base + '/src', file).slice(0, -3)] = file; + return prev; + }, {}); + + const bundle = await rollup.rollup({ + input: inputs, + plugins: [ + nodeResolve(), + commonjs(), + rollupVue({ + css: true, + compileTemplate: true + }), + rollupTypescript({ + typescript: require('typescript') + }), + replace({ + // alternatively, one could pass process.env.NODE_ENV or 'development` to stringify + 'process.env.NODE_ENV': JSON.stringify('production') + }) + ] + }); + + await bundle.write({ + dir: js_base + '/built', + format: 'umd', + sourcemap: true + }); + +} + +exports.build = series(build, vue); exports.css = css; -exports.default = function () { - watch(css_base + "/src/**/*.scss", series('css')); +exports.vue = vue; +exports.default = exports.watch = function () { + watch(css_base + "/src/**/*.scss", css); + watch([js_base + '/src/**/*.ts', js_base + '/src/**/*.vue'], vue); } --- a/package.json +++ a/package.json @@ -15,12 +15,37 @@ "gulp-rtlcss": "^1.4.1", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.1", - "minimist": "^1.2.5" + "gulp-tap": "^1.0.1", + "lodash": "^4.17.4", + "minimist": "^1.2.5", + "node-sass": "^4.14.1", + "promise-polyfill": "^6.0.2", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "uglifyify": "^4.0.4", + "vinyl-source-stream": "^1.1.0", + "vue": "^3.0.0", + "whatwg-fetch": "^2.0.3" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^15.1.0", + "@rollup/plugin-multi-entry": "^4.0.0", + "@rollup/plugin-node-resolve": "^9.0.0", + "@rollup/plugin-replace": "^2.3.3", + "@rollup/plugin-typescript": "^6.0.0", + "@vue/compiler-sfc": "^3.0.0", + "glob": "^7.1.6", + "rollup": "^2.29.0", + "rollup-plugin-css-only": "^2.1.0", + "rollup-plugin-vue": "^6.0.0-beta.10", + "tslib": "^2.0.3", + "typescript": "^4.0.3" }, "scripts": { "build": "node_modules/.bin/gulp build", "css": "node_modules/.bin/gulp css", - "watch": "node_modules/.bin/gulp watch" + "watch": "node_modules/.bin/gulp watch", + "vue": "node_modules/.bin/gulp vue" }, "repository": { "type": "git", --