iframe-coordinator-cli 5.0.0-beta.1

package/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

package/README.md

@@ -0,0 +1,34 @@
+# wrapper-app
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/ifc-cli.js

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+
+const commander = require('commander');
+const program = new commander.Command();
+const fs = require('fs');
+const path = require('path');
+const findRoot = require('find-root');
+const express = require('express');
+const cheerio = require('cheerio');
+const https = require('https');
+const devCertAuthority = require('dev-cert-authority');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const appPath = path.join(__dirname, './dist/');
+
+main();
+
+// MAIN
+function main() {
+  const opts = parseProgramOptions();
+  const indexContent = generateIndex(appPath, opts.clientConfigFile);
+
+  app = express();
+  app.use(/^\/$/, serveIndex(indexContent));
+  app.use(
+    '/proxy',
+    createProxyMiddleware({
+      router: extractTargetHost,
+      pathRewrite: rewritePath,
+      onError: (err, req, res) => {
+        console.log('ERROR', err);
+        res.writeHead(500, { 'Content-Type': 'text/plain' });
+        res.end(err.message);
+      },
+      target: `http://localhost:${opts.port}` //Required by middleware, but should be always overriden by the previous options
+    })
+  );
+  app.use(express.static(appPath));
+
+  if (opts.ssl) {
+    const options = getSslOpts(opts.sslCert, opts.sslKey);
+    https.createServer(options, app).listen(opts.port);
+  } else {
+    app.listen(opts.port);
+  }
+
+  const localhostUrl =
+    (opts.ssl ? 'https' : 'http') + '://localhost:' + opts.port + '/';
+  console.log(`Listening on port ${opts.port}...`);
+  console.log(`Visit host app at: ${localhostUrl}`);
+}
+
+// HELPER FUNCTIONS
+
+function parseProgramOptions() {
+  const projRoot = findRoot(process.cwd());
+  const defaultJsConfig = path.join(projRoot, 'ifc-cli.config.js');
+
+  program
+    .option(
+      '-f, --config-file <file>',
+      'iframe client configuration file',
+      defaultJsConfig
+    )
+    .option('-p, --port <port_num>', 'port number to host on', 3000)
+    .option('-s, --ssl', 'serve over https')
+    .option('--ssl-cert <cert_path>', 'certificate file to use for https')
+    .option('--ssl-key <key_path>', 'key file to use for https');
+  program.on('--help', showHelpText);
+
+  program.parse(process.argv);
+
+  return {
+    clientConfigFile: findConfigFile(program.configFile),
+    port: program.port,
+    ssl: program.ssl,
+    sslCert: program.sslCert,
+    sslKey: program.sslKey
+  };
+}
+
+function showHelpText() {
+  const configExample = path.join(__dirname, 'example-ifc.config.js');
+  console.log(`
+  This program will start a server for a basic iframe-coordinator host app. In
+  order to configure the frame-router element and any other custom logic needed
+  in the host app, a config file must be provided which should assign a
+  function to \`module.exports\` that will be passed the frame-router element
+  as an input once it has been mounted. The function should return a config
+  object with the following fields:
+
+  - publishTopics: A list of messaging topics the client publishes on
+  
+  Keep in mind that the config file is not a true commonJS module, and
+  will be evaluated directly inside the browser in an immediately invoked
+  function expression. 
+
+  Here is an example config file:
+  `);
+  console.log(fs.readFileSync(configExample).toString());
+}
+
+function serveIndex(indexContent) {
+  return function(req, res) {
+    res.send(indexContent);
+  };
+}
+
+function generateIndex(appPath, clientConfigFile) {
+  const baseIndex = fs
+    .readFileSync(path.join(appPath, 'index.html'))
+    .toString();
+  const $ = cheerio.load(baseIndex);
+  $('head').append(configScript(clientConfigFile));
+  return $.html();
+}
+
+function configScript(scriptFile) {
+  const scriptContents = fs.readFileSync(scriptFile).toString();
+  // This is a bit of a kludge but it should suffice for now.
+  return `
+<script type="text/javascript">
+  (function () {
+   let module = {};
+   ${scriptContents}
+   window.routerSetup = module.exports;
+  })()
+</script>
+`;
+}
+
+// Find the configuration file
+function findConfigFile(cliPath) {
+  let configPath = relativizePath(cliPath);
+  if (fs.existsSync(configPath)) {
+    return configPath;
+  } else {
+    console.log(`No client configuration file found @ ${cliPath}.`);
+    process.exit(1);
+  }
+}
+
+function getSslOpts(certPath, keyPath) {
+  if (!certPath || !keyPath) {
+    return devCertAuthority('localhost');
+  }
+  if (fs.existsSync(certPath) && fs.existsSync(keyPath)) {
+    return {
+      cert: fs.readFileSync(certPath),
+      key: fs.readFileSync(keyPath)
+    };
+  } else {
+    console.log(`Certificate files not found @ ${certPath}, and ${keyPath}`);
+    process.exit(1);
+  }
+}
+
+// Make sure a path isn't interpreted as a module when required.
+function relativizePath(inPath) {
+  let outPath = path.relative(process.cwd(), inPath);
+  if (!outPath.startsWith('.')) {
+    outPath = './' + outPath;
+  }
+  return outPath;
+}
+
+function extractTargetHost(req) {
+  return extractProxyUrl(req.path).origin;
+}
+
+function rewritePath(path) {
+  return extractProxyUrl(path).pathname;
+}
+
+function extractProxyUrl(path) {
+  const proxyPath = path.replace(/^\/proxy\//, '');
+  let newUrl;
+  try {
+    newUrl = new URL(decodeURIComponent(proxyPath));
+  } catch (e) {
+    // It would be nice to failed more gracefully here and return a 500, but that doesn't
+    // seem to be possible with the way the proxy middleware works.
+    // See: https://github.com/chimurai/http-proxy-middleware/issues/411
+    console.error(`
+    **** INVALID URL IN PROXY PATH ****
+        ${e.message}
+        `);
+    throw e;
+  }
+  return newUrl;
+}

package/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>ifc-wrapper</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but ifc-wrapper doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "iframe-coordinator-cli",
+  "version": "5.0.0-beta.1",
+  "description": "CLI for local iframe-coordinator development",
+  "dependencies": {
+    "cheerio": "^1.0.0-rc.10",
+    "commander": "^2.20.3",
+    "custom-event-polyfill": "^1.0.7",
+    "dev-cert-authority": "^1.1.1",
+    "express": "^4.17.3",
+    "find-root": "^1.1.0",
+    "http-proxy-middleware": "^1.3.1",
+    "iframe-coordinator": "file:../iframe-coordinator",
+    "vue": "^2.7.10",
+    "vue-class-component": "^7.0.2",
+    "vue-notification": "^1.3.16",
+    "vue-property-decorator": "^8.1.0",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.0.0",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.3"
+  },
+  "bin": {
+    "ifc-cli": "ifc-cli.js"
+  },
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build"
+  },
+  "author": "",
+  "license": "MIT"
+}

package/src/App.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="app">
+    <notifications group="toast" id="toastNotifications" position="top right"></notifications>
+    <notifications group="pubsub" id="pubsubEvents" position="top left"></notifications>
+    <notifications group="keydown" id="keydownEvents" position="bottom left"></notifications>
+    <router-view/>
+  </div>
+</template>
+
+<style>
+html {
+  height: 100%;
+}
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height: 100%;
+}
+
+.vue-notification.toast {
+  background-color: #2a60c8;
+  color: #fdfdfd;
+  border-color: #75a8ff;
+}
+
+.vue-notification.pubsub {
+  background-color: #444a52;
+  border-color: #ff4f1f;
+}
+</style>

package/src/example-ifc.config.js

@@ -0,0 +1,36 @@
+module.exports = function(frameRouter) {
+  frameRouter.setupFrames(
+    {
+      app1: {
+        url: 'http://localhost:8080/client-app-1/#/',
+        assignedRoute: '/app1'
+      },
+      app2: {
+        url: 'http://localhost:8080/client-app-2/#/',
+        assignedRoute: '/app2',
+        sandbox: 'allow-presentation', // optional
+        allow: 'microphone http://localhost:8080;' // optional 
+      }
+    },
+    {
+      locale: 'en-US',
+      hostRootUrl: window.location.origin,
+      registeredKeys: [
+        { key: 'a', ctrlKey: true },
+        { key: 'b', altKey: true },
+        { key: 'a', ctrlKey: true, shiftKey: true }
+      ],
+      custom: getCustomClientData()
+    }
+  );
+
+  return {
+    // These are the topics that the host app should display payloads for when
+    // the client publishes on them.
+    publishTopics: ['publish.topic']
+  };
+};
+
+function getCustomClientData() {
+  return { test: 'This is only a test' };
+}

package/src/main.ts

@@ -0,0 +1,41 @@
+import { registerCustomElements } from 'iframe-coordinator/dist';
+
+import Vue from 'vue';
+import Notifications from 'vue-notification';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+registerCustomElements();
+
+window.addEventListener('error', evt => {
+  console.error('Uncaught Error:', evt.error);
+});
+
+Vue.config.productionTip = false;
+
+Vue.use(Notifications);
+
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+  created() {
+    // IE11 routing workaround
+    if (
+      '-ms-scroll-limit' in document.documentElement.style &&
+      '-ms-ime-align' in document.documentElement.style
+    ) {
+      window.addEventListener(
+        'hashchange',
+        event => {
+          const currentPath = window.location.hash.slice(1);
+          if (this.$route.path !== currentPath) {
+            this.$router.push(currentPath);
+          }
+        },
+        false
+      );
+    }
+  }
+}).$mount('#app');

package/src/router.ts

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import IframeEmbed from './views/IframeEmbed.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  routes: [
+    {
+      path: '*',
+      component: IframeEmbed,
+      props: router => ({
+        frameRoute: router.fullPath
+      })
+    }
+  ]
+});

package/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package/src/store.ts

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+});

package/src/views/IframeEmbed.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="routerLayout">
+    <div class="explainer">
+      Showing
+      <span class="app-route">{{ frameRoute }}</span>
+      as
+      <span class="frame-url">{{ frameUrl }}</span>
+    </div>
+    <div v-if="showMenu" id="appMenu">
+      <h2>No app is registered for {{ frameRoute }}</h2>
+
+      <div v-if="Object.keys(clientConfig).length > 0">
+        <p>To see your embedded apps, use one of the links below.</p>
+        <nav>
+          <ul>
+            <li v-for="(client, id) in clientConfig" v-bind:key="id">
+              <a v-bind:href="'#' + client.assignedRoute">{{id}} @ {{client.assignedRoute}}</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div v-else>
+        <p>I couldn't find any registered client applications. Please check your ifc-cli configuration file.</p>
+      </div>
+    </div>
+    <frame-router
+      id="frameRouter"
+      v-bind:route="frameRoute"
+      v-on:notifyRequest="displayToast"
+      v-on:registeredKeyFired="handleKeyEvent"
+      v-on:navRequest="handleNav"
+      v-on:frameTransition="updateFrameUrl"
+    ></frame-router>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'iframeEmbed',
+  props: ['frameRoute'],
+  data() {
+    return {
+      frameUrl: '',
+      showMenu: true,
+      clientConfig: {}
+    };
+  },
+  methods: {
+    displayToast(event) {
+      const customJson = JSON.stringify(event.detail.custom, null, 2);
+      const messageHtml = `<div class="message">${event.detail.message}</div>
+                   <pre class="customData">${customJson}</pre>`;
+      this.$notify({
+        group: 'toast',
+        title: event.detail.title,
+        text: messageHtml,
+        duration: event.detail.custom.duration || -1,
+        type: 'toast'
+      });
+    },
+    handleNav(event) {
+      // TODO: detect and handle external URLs properly
+      const requestedUrl = new URL(event.detail.url);
+      window.location.hash = requestedUrl.hash;
+    },
+    handleKeyEvent(event) {
+      this.$notify({
+        group: 'keydown',
+        title: `registeredKeyFired event from ${event.detail.clientId}`,
+        text: `<pre>${JSON.stringify(event.detail, null, 2)}</pre>`,
+        duration: 3000,
+        type: 'registeredKeyFired'
+      });
+    },
+    notifyPubSub(event) {
+      const jsonStr = JSON.stringify(event, null, 2);
+      this.$notify({
+        group: 'pubsub',
+        title: `${event.clientId} on ${event.topic}`,
+        text: `<pre>${jsonStr}</pre>`,
+        duration: -1,
+        type: 'pubsub'
+      });
+    },
+    updateFrameUrl(event) {
+      this.frameUrl = event.detail;
+      this.showMenu = this.frameUrl === 'about:blank';
+    }
+  },
+  mounted() {
+    // Call the custom config set up on the CLI.
+    const oldSetupFrames = frameRouter.setupFrames;
+    frameRouter.setupFrames = (...args) => {
+      this.clientConfig = args[0];
+      oldSetupFrames.apply(frameRouter, args);
+    };
+
+    if (window.routerSetup && typeof window.routerSetup === 'function') {
+      const clientConfig = window.routerSetup(frameRouter);
+      if (clientConfig.publishTopics) {
+        clientConfig.publishTopics.forEach(topic => {
+          frameRouter.messaging.addListener(topic, publication => {
+            this.notifyPubSub(publication);
+          });
+        });
+      }
+    } else {
+      // tslint:disable-next-line
+      console.log(`====== ERROR ======
+Could not find a function to set up the frame-router element with. Your
+JS configuration file must assign a set-up function to \`module.exports\`.
+Run:
+  ifc-cli --help
+for more details.
+          `);
+    }
+  }
+};
+</script>
+
+<style>
+#routerLayout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#frameRouter {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 100vh;
+}
+#routerLayout .explainer {
+  padding: 20px;
+  background-color: #33383d;
+  color: #fdfdfd;
+  border-bottom: 2px solid #ff4f1f;
+}
+#routerLayout .app-route,
+#routerLayout .frame-url {
+  color: #ff4f1f;
+}
+
+#appMenu {
+  max-width: 80ch;
+  margin: auto;
+}
+#appMenu nav {
+  text-align: left;
+}
+#appMenu ul {
+  margin: 0;
+  padding: 0;
+}
+#appMenu li {
+  list-style: none;
+}
+</style>

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/tslint.json

@@ -0,0 +1,17 @@
+{
+  "defaultSeverity": "warning",
+  "extends": ["tslint:recommended"],
+  "linterOptions": {
+    "exclude": ["node_modules/**"]
+  },
+  "rules": {
+    "quotemark": [true, "single"],
+    "indent": [true, "spaces", 2],
+    "interface-name": false,
+    "ordered-imports": false,
+    "object-literal-sort-keys": false,
+    "no-consecutive-blank-lines": false,
+    "trailing-comma": false,
+    "arrow-parens": false
+  }
+}

package/vite.config.js

@@ -0,0 +1,5 @@
+import vue from '@vitejs/plugin-vue2';
+
+export default {
+  plugins: [vue()]
+};