From fccf7784abc60ab1ee64eafa62c933ab12f07ce2 Mon Sep 17 00:00:00 2001 From: BoykoAlex Date: Wed, 3 Jul 2019 18:28:08 -0400 Subject: [PATCH] Minimize Flo - factor out some inlined styles Generate flo.css CM extension to be added on the client side Switch to joint.core Update joint.core switch script Try post-install Proper postinstall stage Remove support for joint.core switch --- build.js | 58 ++++++++++++++++---- package.json | 3 + src/demo/app/app.component.ts | 6 ++ src/demo/styles.css | 6 ++ src/lib/code-editor/code-editor.component.ts | 27 ++++----- src/lib/dsl-editor/dsl-editor.component.ts | 7 +-- src/lib/editor/editor.component.ts | 2 +- src/lib/styles.scss | 5 ++ 8 files changed, 80 insertions(+), 34 deletions(-) create mode 100644 src/lib/styles.scss diff --git a/build.js b/build.js index a644cf0..72ccb44 100644 --- a/build.js +++ b/build.js @@ -4,6 +4,8 @@ const shell = require('shelljs'); const chalk = require('chalk'); const path = require('path'); const fs = require('fs'); +const sass = require('node-sass'); +const ScssBundler = require('scss-bundle'); const PACKAGE = `spring-flo`; const NPM_DIR = `dist`; @@ -60,17 +62,27 @@ gulp.src(INLINE_TEMPLATES.SRC) .pipe(gulp.dest(INLINE_TEMPLATES.DIST)).on('end', compile); -function compile() { - /* Try to process scss files */ - // shell.echo(`Try to process scss files`); - // if (shell.exec(`node-sass -r ${OUT_DIR} -o ${OUT_DIR}`).code === 0) { - // shell.rm(`-Rf`, `${OUT_DIR}/**/*.scss`); - // shell.ls(`${OUT_DIR}/**/*.css`).forEach(function (file) { - // shell.mv(file, file.replace('.css', '.scss')); - // }); - // } +async function compile() { - shell.cp('-Rf', ['*.json'], OUT_DIR); + shell.cp(`-Rf`, [`*.json`], `${OUT_DIR}`); + + shell.cp('-Rf', './src/lib/styles.scss', `${OUT_DIR}`); + + const mainScssFile = path.join(OUT_DIR, 'styles.scss'); + + const scssFiles = shell.ls(`${OUT_DIR}/**/*.scss`).filter(f => f.toString() !== mainScssFile).map(f => f.toString()); + + const singleScssFile = path.join(OUT_DIR, 'flo.scss'); + + await bundleScss(mainScssFile, scssFiles, singleScssFile); + + const cssResult = sass.renderSync({ + file: singleScssFile, + }); + + fs.writeFileSync(path.join(NPM_DIR, 'flo.css'), cssResult.css, (err) => { + if (err) throw err; + }); /* AoT compilation */ shell.echo(`Start AoT compilation`); @@ -143,7 +155,33 @@ function compile() { replacePropertyValue(json, 'fesm5', searchValue, replaceValue); replacePropertyValue(json, 'fesm2015', searchValue, replaceValue); fs.writeFileSync(packagejson, JSON.stringify(json, null, 2)); +} +/** Bundles all SCSS files into a single file */ +async function bundleScss(mainInputFile, inputFiles, outputFile) { + const { found, bundledContent, imports } = await new ScssBundler.Bundler() + .Bundle(mainInputFile, inputFiles); + + if (imports) { + const cwd = process.cwd(); + + const filesNotFound = imports + .filter(x => !x.found) + .map(x => relative(cwd, x.filePath)); + + if (filesNotFound.length) { + console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`); + throw new Error('One or more SCSS imports failed'); + } + } + + if (found) { + fs.writeFileSync(outputFile, bundledContent, (err) => { + if (err) throw err; + }); + } else { + throw new Error('SCSS files not found'); + } } function replacePropertyValue(json, property, searchValue, newValue) { diff --git a/package.json b/package.json index c959162..791763d 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,9 @@ "karma-jasmine": "1.1.0", "karma-jasmine-html-reporter": "0.2.2", "lite-server": "2.4.0", + "ng-packagr": "^5.3.0", + "scss-bundle": "^2.5.1", + "node-sass": "^4.12.0", "ngx-bootstrap": "4.2.0", "rimraf": "2.6.1", "rollup": "1.14.2", diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts index 64b4cfc..dcbfb3b 100644 --- a/src/demo/app/app.component.ts +++ b/src/demo/app/app.component.ts @@ -6,6 +6,12 @@ const { Metamodel } = require('./metamodel'); const { Renderer } = require('./renderer'); const { Editor } = require('./editor'); +// Code editor used from Flo requires the follwoing CM extensions +import 'codemirror-minified/mode/javascript/javascript'; +import 'codemirror-minified/mode/ruby/ruby'; +import 'codemirror-minified/mode/clike/clike'; +import 'codemirror-minified/addon/lint/javascript-lint'; + @Component({ selector: 'demo-app', templateUrl: './app.component.html', diff --git a/src/demo/styles.css b/src/demo/styles.css index 58e1a7d..a75c1b3 100644 --- a/src/demo/styles.css +++ b/src/demo/styles.css @@ -1,3 +1,9 @@ +@import "./../../node_modules/jointjs/dist/joint.core.css"; +@import "./../../node_modules/codemirror-minified/lib/codemirror.css"; +@import "./../../node_modules/codemirror-minified/addon/hint/show-hint.css"; +@import "./../../node_modules/codemirror-minified/addon/lint/lint.css"; +@import "./../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css"; + h1 { color: #369; font-family: Arial, Helvetica, sans-serif; diff --git a/src/lib/code-editor/code-editor.component.ts b/src/lib/code-editor/code-editor.component.ts index 88fc09c..5df0477 100644 --- a/src/lib/code-editor/code-editor.component.ts +++ b/src/lib/code-editor/code-editor.component.ts @@ -18,30 +18,23 @@ import 'codemirror-minified/addon/scroll/simplescrollbars'; // Lint support // Unclear how to import this dynamically... -import 'codemirror-minified/addon/lint/javascript-lint'; -import 'codemirror-minified/addon/lint/coffeescript-lint'; -import 'codemirror-minified/addon/lint/json-lint'; -import 'codemirror-minified/addon/lint/yaml-lint'; +// import 'codemirror-minified/addon/lint/javascript-lint'; +// import 'codemirror-minified/addon/lint/json-lint'; +// import 'codemirror-minified/addon/lint/yaml-lint'; // TODO: use dynamic import with JS7 in the future. CM autoLoad cannot load it properly - thinks its AMD // Supported languages until dynamic loading -import 'codemirror-minified/mode/groovy/groovy'; -import 'codemirror-minified/mode/javascript/javascript'; -import 'codemirror-minified/mode/python/python'; -import 'codemirror-minified/mode/ruby/ruby'; -import 'codemirror-minified/mode/clike/clike'; -import 'codemirror-minified/mode/yaml/yaml'; -import 'codemirror-minified/mode/coffeescript/coffeescript'; +// import 'codemirror-minified/mode/groovy/groovy'; +// import 'codemirror-minified/mode/javascript/javascript'; +// import 'codemirror-minified/mode/python/python'; +// import 'codemirror-minified/mode/ruby/ruby'; +// import 'codemirror-minified/mode/clike/clike'; +// import 'codemirror-minified/mode/yaml/yaml'; @Component({ selector: 'code-editor', templateUrl: './code-editor.component.html', - styleUrls: [ - './../../../node_modules/codemirror-minified/lib/codemirror.css', - './../../../node_modules/codemirror-minified/addon/hint/show-hint.css', - './../../../node_modules/codemirror-minified/addon/lint/lint.css', - './../../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css', - './code-editor.component.scss', ], + styleUrls: ['./code-editor.component.scss', ], encapsulation: ViewEncapsulation.None, providers: [ { diff --git a/src/lib/dsl-editor/dsl-editor.component.ts b/src/lib/dsl-editor/dsl-editor.component.ts index a0ae43e..21c66eb 100644 --- a/src/lib/dsl-editor/dsl-editor.component.ts +++ b/src/lib/dsl-editor/dsl-editor.component.ts @@ -10,15 +10,10 @@ import 'codemirror-minified/addon/display/placeholder'; import 'codemirror-minified/addon/scroll/annotatescrollbar'; import 'codemirror-minified/addon/scroll/simplescrollbars'; - @Component({ selector: 'dsl-editor', templateUrl: './dsl-editor.component.html', - styleUrls: [ - './../../../node_modules/codemirror-minified/lib/codemirror.css', - './../../../node_modules/codemirror-minified/addon/hint/show-hint.css', - './../../../node_modules/codemirror-minified/addon/lint/lint.css', - './dsl-editor.component.scss', ], + styleUrls: ['./dsl-editor.component.scss', ], encapsulation: ViewEncapsulation.None }) export class DslEditorComponent implements OnInit, OnDestroy { diff --git a/src/lib/editor/editor.component.ts b/src/lib/editor/editor.component.ts index 9e43770..629ac41 100644 --- a/src/lib/editor/editor.component.ts +++ b/src/lib/editor/editor.component.ts @@ -21,7 +21,7 @@ const SCROLLBAR_SIZE = 17; @Component({ selector: 'flo-editor', templateUrl: './editor.component.html', - styleUrls: ['./../../../node_modules/jointjs/dist/joint.css', './editor.component.scss'], + styleUrls: ['./editor.component.scss'], encapsulation: ViewEncapsulation.None }) export class EditorComponent implements OnInit, OnDestroy { diff --git a/src/lib/styles.scss b/src/lib/styles.scss new file mode 100644 index 0000000..0636111 --- /dev/null +++ b/src/lib/styles.scss @@ -0,0 +1,5 @@ +@import "./../../node_modules/jointjs/dist/joint.core.css"; +@import "./../../node_modules/codemirror-minified/lib/codemirror.css"; +@import "./../../node_modules/codemirror-minified/addon/hint/show-hint.css"; +@import "./../../node_modules/codemirror-minified/addon/lint/lint.css"; +@import "./../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css";