Initial commit

b533110b · Reiter, Christoph · 6843d2e7 · b533110b · b533110b · b533110b
Commit b533110b authored 4 years ago by Reiter, Christoph
--- a/packages/app-shell/.eslintignore
+++ b/packages/app-shell/.eslintignore
+/vendor/**
+/dist/**
+/*.js
\ No newline at end of file
--- a/packages/app-shell/.eslintrc.json
+++ b/packages/app-shell/.eslintrc.json
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "mocha": true
+    },
+    "extends": ["eslint:recommended", "plugin:jsdoc/recommended"],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-unused-vars": ["error", { "args": "none" }],
+        "semi": [2, "always"],
+        "jsdoc/require-jsdoc": 0,
+        "jsdoc/require-param-description": 0,
+        "jsdoc/require-returns": 0,
+        "jsdoc/require-param-type": 0
+    }
+}
\ No newline at end of file
--- a/packages/app-shell/.gitignore
+++ b/packages/app-shell/.gitignore
+dist
+node_modules
+.idea
+npm-debug.log
+.vscode
+.cert
+package-lock.json
\ No newline at end of file
--- a/packages/app-shell/.gitlab-ci.yml
+++ b/packages/app-shell/.gitlab-ci.yml
+image: registry.gitlab.tugraz.at/vpu/webcomponents/common/main:v5
+before_script:
+  - "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
+  - git submodule sync
+  - git submodule update --init
+stages:
+  - test
+test:
+  stage: test
+  script:
+    - npm install
+    - npm run build
+    - npm test
+linting:
+  stage: test
+  allow_failure: true
+  script:
+    - npm install
+    - npm run lint
\ No newline at end of file
--- a/packages/app-shell/.gitmodules
+++ b/packages/app-shell/.gitmodules
+[submodule "vendor/auth"]
+	path = vendor/auth
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
+[submodule "vendor/common"]
+	path = vendor/common
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Common
+[submodule "vendor/notification"]
+	path = vendor/notification
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Notification
+[submodule "vendor/language-select"]
+	path = vendor/language-select
+	url = git@gitlab.tugraz.at:VPU/WebComponents/LanguageSelect
+[submodule "vendor/person-profile"]
+	path = vendor/person-profile
+	url = git@gitlab.tugraz.at:VPU/WebComponents/PersonProfile
--- a/packages/app-shell/README.md
+++ b/packages/app-shell/README.md
--- a/packages/app-shell/assets/example.metadata.json
+++ b/packages/app-shell/assets/example.metadata.json
+{
+  "element": "vpu-activity-example",
+  "module_src": "vpu-activity-example.js",
+  "routing_name": "activity-example",
+  "name": {
+    "de": "Beispielaktivität",
+    "en": "Example Activity"
+  },
+  "short_name": {
+    "de": "Beispielaktivität",
+    "en": "Example Activity"
+  },
+  "description": {
+    "de": "Eine Beschreibung",
+    "en": "A Description"
+  }
+}
--- a/packages/app-shell/assets/example.topic.metadata.json
+++ b/packages/app-shell/assets/example.topic.metadata.json
+{
+  "name": {
+    "de": "Beispiel",
+    "en": "Example"
+  },
+  "short_name": {
+    "de": "Beispiel",
+    "en": "Example"
+  },
+  "description": {
+    "de": "",
+    "en": ""
+  },
+  "routing_name": "example",
+  "activities": [
+    {"path": "example.metadata.json"}
+  ],
+  "attributes": []
+}
\ No newline at end of file
--- a/packages/app-shell/assets/index.html
+++ b/packages/app-shell/assets/index.html
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        :root {
+            font-family: sans-serif;
+        }
+    </style>
+    <script type="module" src="/demo.js"></script>
+</head>
+<body>
+<vpu-app lang="de" src="/example.topic.metadata.json" base-path="/"></vpu-app>
+</body>
+</html>
\ No newline at end of file
--- a/packages/app-shell/assets/silent-check-sso.html
+++ b/packages/app-shell/assets/silent-check-sso.html
+<html>
+<body>
+    <script>
+        parent.postMessage(location.href, location.origin)
+    </script>
+</body>
+</html>
\ No newline at end of file
--- a/packages/app-shell/karma.conf.js
+++ b/packages/app-shell/karma.conf.js
+// Trick to use the auto-downloaded puppeteer chrome binary
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+module.exports = function(config) {
+  config.set({
+    basePath: 'dist',
+    frameworks: ['mocha'],
+    client: {
+      mocha: {
+        ui: 'tdd',
+      },
+    },
+    files: [
+      {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
+      {pattern: './**/*', included: false, watched: true, served: true},
+    ],
+    autoWatch: true,
+    browsers: ['ChromeHeadlessNoSandbox', 'FirefoxHeadless'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false,
+    logLevel: config.LOG_ERROR
+  });
+}
--- a/packages/app-shell/package.json
+++ b/packages/app-shell/package.json
+{
+  "name": "vpu-app-shell",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "babel-eslint": "^10.1.0",
+    "chai": "^4.2.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-jsdoc": "^22.1.0",
+    "glob": "^7.1.6",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^1.3.0",
+    "karma-mocha": "^1.3.0",
+    "mocha": "^7.1.1",
+    "puppeteer": "^2.1.1",
+    "rollup": "^2.0.0",
+    "rollup-plugin-consts": "^1.0.1",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-delete": "^1.2.0",
+    "rollup-plugin-serve": "^1.0.1"
+  },
+  "dependencies": {
+    "i18next": "^19.1.0",
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.1.2",
+    "universal-router": "^8.3.0",
+    "vpu-auth": "file:./vendor/auth",
+    "vpu-common": "file:./vendor/common",
+    "vpu-language-select": "file:./vendor/language-select",
+    "vpu-notification": "file:./vendor/notification",
+    "vpu-person-profile": "file:./vendor/person-profile"
+  },
+  "scripts": {
+    "build": "npm run build-local",
+    "build-local": "rollup -c",
+    "build-test": "rollup -c --environment BUILD:test",
+    "watch": "npm run watch-local",
+    "watch-local": "rollup -c --watch",
+    "test": "npm run build-test && karma start --singleRun",
+    "lint": "eslint ."
+  }
+}
--- a/packages/app-shell/rollup.config.js
+++ b/packages/app-shell/rollup.config.js
+import path from 'path';
+import glob from 'glob';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import serve from 'rollup-plugin-serve';
+import consts from 'rollup-plugin-consts';
+import del from 'rollup-plugin-delete';
+import json from '@rollup/plugin-json';
+import chai from 'chai';
+const pkg = require('./package.json');
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+function getBuildInfo() {
+    const child_process = require('child_process');
+    const url = require('url');
+    let remote = child_process.execSync('git config --get remote.origin.url').toString().trim();
+    let commit = child_process.execSync('git rev-parse --short HEAD').toString().trim();
+    let parsed = url.parse(remote);
+    let newPath = parsed.path.slice(0, parsed.path.lastIndexOf('.'));
+    let newUrl = parsed.protocol + '//' + parsed.host + newPath + '/commit/' + commit;
+    return {
+        info: commit,
+        url: newUrl,
+        time: new Date().toISOString(),
+        env: build
+    }
+}
+export default {
+    input: (build !='test') ? ['src/demo.js', 'src/vpu-activity-example.js'] : glob.sync('test/**/*.js'),
+    output: {
+        dir: 'dist',
+        entryFileNames: '[name].js',
+        chunkFileNames: 'shared/[name].[hash].[format].js',
+        format: 'esm',
+        sourcemap: true
+      },
+    onwarn: function (warning, warn) {
+        // ignore chai warnings
+        if (warning.code === 'CIRCULAR_DEPENDENCY') {
+          return;
+        }
+        // keycloak bundled code uses eval
+        if (warning.code === 'EVAL') {
+            return;
+        }
+        warn(warning);
+    },
+    plugins: [
+        del({
+            targets: 'dist/*'
+          }),
+        consts({
+            environment: build,
+            buildinfo: getBuildInfo(),
+        }),
+        resolve({
+          customResolveOptions: {
+            // ignore node_modules from vendored packages
+            moduleDirectory: path.join(process.cwd(), 'node_modules')
+          }
+        }),
+        commonjs({
+            include: 'node_modules/**',
+            namedExports: {
+                'chai': Object.keys(chai),
+            }
+        }),
+        json(),
+        copy({
+            targets: [
+                {src: 'assets/silent-check-sso.html', dest:'dist'},
+                {src: 'assets/index.html', dest: 'dist'},
+                {src: 'assets/*.json', dest: 'dist'},
+                {src: 'node_modules/vpu-common/assets/icons/*.svg', dest: 'dist/local/vpu-common/icons'},
+            ],
+        }),
+        (process.env.ROLLUP_WATCH === 'true') ? serve({
+            contentBase: 'dist',
+            historyApiFallback: '/index.html',
+            host: '127.0.0.1', port: 8002}) : false
+    ]
+};
--- a/packages/app-shell/src/build-info.js
+++ b/packages/app-shell/src/build-info.js
+import {html, LitElement, css} from 'lit-element';
+import * as commonUtils from 'vpu-common/utils';
+import * as commonStyles from 'vpu-common/styles';
+import buildinfo from 'consts:buildinfo';
+class VPUBuildInfo extends LitElement {
+    constructor() {
+        super();
+    }
+    static get styles() {
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS()}
+            ${commonStyles.getTagCSS()}
+            :host {
+                display: inline-block;
+            }
+        `;
+    } 
+    render() {
+        const date = new Date(buildinfo.time);
+        return html`
+            <a href="${buildinfo.url}" style="float: right">
+                <div class="tags has-addons" title="Build Time: ${date.toString()}">
+                    <span class="tag is-light">build</span>
+                    <span class="tag is-dark">${buildinfo.info} (${buildinfo.env})</span>
+                </div>
+            </a>
+        `;
+    }
+}
+commonUtils.defineCustomElement('vpu-build-info', VPUBuildInfo);
--- a/packages/app-shell/src/demo.js
+++ b/packages/app-shell/src/demo.js
+import './index.js';
\ No newline at end of file
--- a/packages/app-shell/src/i18n.js
+++ b/packages/app-shell/src/i18n.js
+import {createInstance} from 'vpu-common/i18next.js';
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+const i18n = createInstance({en: en, de: de}, 'de', 'en');
+export function createI18nInstance () {
+    return i18n.cloneInstance();
+}
+/**
+ * Dummy function to mark strings as i18next keys for i18next-scanner
+ *
+ * @param {string} key
+ * @returns {string} The key param as is
+ */
+export function i18nKey(key) {
+    return key;
+}
\ No newline at end of file
--- a/packages/app-shell/src/i18n/de/translation.json
+++ b/packages/app-shell/src/i18n/de/translation.json
+{
+  "logo": {
+    "word1": "Wissen",
+    "word2": "Technik",
+    "word3": "Leidenschaft"
+  },
+  "privacy-policy": "Datenschutz",
+  "page-updated-needs-reload": "Die Applikation wurde aktualisiert. Bitte laden Sie die Seite neu.",
+  "activity-example": {
+    "hello-world": "Hallo Welt"
+  }
+}
--- a/packages/app-shell/src/i18n/en/translation.json
+++ b/packages/app-shell/src/i18n/en/translation.json
+{
+  "logo": {
+    "word1": "Science",
+    "word2": "Passion",
+    "word3": "Technology"
+  },
+  "privacy-policy": "Privacy Policy",
+  "page-updated-needs-reload": "The application has been updated. Please reload the page.",
+  "activity-example": {
+    "hello-world": "Hello World"
+  }
+}
--- a/packages/app-shell/src/index.js
+++ b/packages/app-shell/src/index.js
--- a/packages/app-shell/src/router.js
+++ b/packages/app-shell/src/router.js
+import UniversalRouter from 'universal-router';
+import generateUrls from 'universal-router/generateUrls';
+/**
+ * A wrapper around UniversalRouter which adds history integration
+ */
+export class Router {
+    /**
+     * @param {Array} routes The routes passed to UniversalRouter
+     * @param {object} options Options
+     * @param {string} options.routeName The main route name
+     * @param {Function} options.getState Function which should return the current state
+     * @param {Function} options.setState Function which gets passed the new state based on the route
+     * @param {object} unioptions options passed to UniversalRouter
+     */
+    constructor(routes, options, unioptions) {
+        this.getState = options.getState;
+        this.setState = options.setState;
+        // XXX: We only have one route atm
+        // If we need more we need to pass the route name to each function
+        this.routeName = options.routeName;
+        console.assert(this.getState);
+        console.assert(this.setState);
+        console.assert(this.routeName);
+        // https://github.com/kriasoft/universal-router
+        this.router = new UniversalRouter(routes, unioptions);
+        window.addEventListener('popstate', (event) => {
+            this.setStateFromCurrentLocation();
+            this.dispatchLocationChanged();
+        });
+    }
+    /**
+     * In case something else has changed the location, update the app state accordingly.
+     */
+    setStateFromCurrentLocation() {
+        const oldPathName = location.pathname;
+        this.router.resolve({pathname: oldPathName}).then(page => {
+            const newPathname = this.getPathname(page);
+            // In case of a router redirect, set the new location
+            if (newPathname !== oldPathName) {
+                const referrerUrl = location.href;
+                window.history.replaceState({}, '', newPathname);
+                this.dispatchLocationChanged(referrerUrl);
+            }
+            this.setState(page);
+        }).catch((e) => {
+            // In case we can't resolve the location, just leave things as is.
+            // This happens when a user enters a wrong URL or when testing with karma.
+        });
+    }
+    /**
+     * Update the router after some internal state change.
+     */
+    update() {
+        // Queue updates so we can call this multiple times when changing state
+        // without it resulting in multiple location changes
+        setTimeout(() => {
+            const newPathname = this.getPathname();
+            const oldPathname = location.pathname;
+            if (newPathname === oldPathname)
+                return;
+            const referrerUrl = location.href;
+            window.history.pushState({}, '', newPathname);
+            this.dispatchLocationChanged(referrerUrl);
+        });
+    }
+    /**
+     * Given a new routing path set the location and the app state.
+     *
+     * @param {string} pathname
+     */
+    updateFromPathname(pathname) {
+        this.router.resolve({pathname: pathname}).then(page => {
+            if (location.pathname === pathname)
+                return;
+            const referrerUrl = location.href;
+            window.history.pushState({}, '', pathname);
+            this.setState(page);
+            this.dispatchLocationChanged(referrerUrl);
+        }).catch((err) => {
+            throw new Error(`Route not found: ${pathname}: ${err}`);
+        });
+    }
+    /**
+     * Pass some new router state to get a new router path that can
+     * be passed to updateFromPathname() later on. If nothing is
+     * passed the current state is used.
+     *
+     * @param {object} [partialState] The optional partial new state
+     * @returns {string} The new path
+     */
+    getPathname(partialState) {
+        const currentState = this.getState();
+        if (partialState === undefined)
+            partialState = {};
+        let combined = {...currentState, ...partialState};
+        return generateUrls(this.router)(this.routeName, combined);
+    }
+    dispatchLocationChanged(referrerUrl = "") {
+        // fire a locationchanged event
+        window.dispatchEvent(new CustomEvent('locationchanged', {
+            detail: {
+                referrerUrl: referrerUrl,
+            },
+            bubbles: true
+        }));
+    }
+}