IFrame Socket Storage Fixes and Example IFrame Host (microsoft#1328)

fixes microsoft#1327

Fix typing errors, by marking proxies as remote
Fix a bunch of dangling promises
fix eslint disables
hide the resolved url, and specifically the tokens from the iframe
Add Example IFrame Host that has a safe (no runtime) container outside the iframe

.dockerignore

@@ -5,6 +5,7 @@
 !LICENSE.txt
 !packages/**
 !examples/components/**
+!examples/hosts/iframe-host/**
 !server/routerlicious
 !docs/**
 !tools/build-server-resources/**

examples/hosts/iframe-host/.eslintrc.js

@@ -0,0 +1,12 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+module.exports = {
+    "extends": [
+        "@microsoft/eslint-config-fluid"
+    ],
+    "rules": {
+    }
+}

examples/hosts/iframe-host/.gitignore

@@ -0,0 +1,52 @@
+# Compiled TypeScript and CSS
+dist
+lib
+
+# Babel
+public/scripts/es5
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+.cache-loader
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Typings
+typings
+
+# Debug log from npm
+npm-debug.log
+
+# Code coverage
+nyc
+.nyc_output/
+
+# Chart dependencies
+**/charts/*.tgz
+
+# Generated modeuls
+intel_modules/
+temp_modules/

examples/hosts/iframe-host/api-extractor.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "@microsoft/fluid-build-common/api-extractor-common.json"
+}

examples/hosts/iframe-host/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@fluid-example/iframe-host",
+  "version": "0.15.0",
+  "description": "IFrame Host",
+  "repository": "microsoft/FluidFramework",
+  "license": "MIT",
+  "author": "Microsoft",
+  "sideEffects": "false",
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "concurrently npm:build:compile npm:lint",
+    "build:compile": "concurrently npm:tsc npm:build:esnext npm:build:copy",
+    "build:compile:min": "npm run build:compile",
+    "build:copy": "copyfiles -u 1 \"src/**/*.html\" dist/",
+    "build:docs": "api-extractor run --local && copyfiles -u 1 ./_api-extractor-temp/doc-models/* ../../../_api-extractor-temp/",
+    "build:esnext": "tsc --project ./tsconfig.esnext.json",
+    "build:full": "concurrently npm:build npm:webpack",
+    "build:full:compile": "concurrently npm:build:compile npm:webpack",
+    "clean": "rimraf dist lib *.tsbuildinfo *.build.log",
+    "eslint": "eslint --ext=ts,tsx --format stylish src",
+    "eslint:fix": "eslint --ext=ts,tsx --format stylish src --fix",
+    "lint": "npm run eslint",
+    "lint:fix": "npm run eslint:fix",
+    "start": " npm run build:copy & webpack-dev-server --content-base dist/",
+    "tsc": "tsc",
+    "webpack": "webpack --env build"
+  },
+  "dependencies": {
+    "@microsoft/fluid-base-host": "^0.15.0",
+    "@microsoft/fluid-component-core-interfaces": "^0.15.0",
+    "@microsoft/fluid-container-definitions": "^0.15.0",
+    "@microsoft/fluid-container-loader": "^0.15.0",
+    "@microsoft/fluid-driver-definitions": "^0.15.0",
+    "@microsoft/fluid-iframe-driver": "^0.15.0",
+    "@microsoft/fluid-protocol-definitions": "^0.1002.0",
+    "@microsoft/fluid-routerlicious-driver": "^0.15.0",
+    "@microsoft/fluid-web-code-loader": "^0.15.0",
+    "jsonwebtoken": "^8.4.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.7.2",
+    "@microsoft/eslint-config-fluid": "^0.14.0",
+    "@microsoft/fluid-build-common": "^0.14.0",
+    "@types/node": "^10.14.6",
+    "@typescript-eslint/eslint-plugin": "~2.17.0",
+    "@typescript-eslint/parser": "~2.17.0",
+    "concurrently": "^4.1.0",
+    "copyfiles": "^2.1.0",
+    "eslint": "~6.8.0",
+    "eslint-plugin-eslint-comments": "~3.1.2",
+    "eslint-plugin-import": "2.20.0",
+    "eslint-plugin-no-null": "~1.0.2",
+    "eslint-plugin-optimize-regex": "~1.1.7",
+    "eslint-plugin-prefer-arrow": "~1.1.7",
+    "eslint-plugin-react": "~7.18.0",
+    "eslint-plugin-unicorn": "~15.0.1",
+    "rimraf": "^2.6.2",
+    "source-map-loader": "^0.2.4",
+    "typescript": "~3.7.4",
+    "webpack": "^4.16.5",
+    "webpack-dev-server": "^3.8.0"
+  }
+}

examples/hosts/iframe-host/src/index.html

@@ -0,0 +1,21 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!-- Licensed under the MIT License. -->
+<html>
+    <head>
+        <script src="/main.bundle.js"></script>
+    </head>
+    <body>
+        <table width=100% height=100%>
+            <tr>
+                <td width=50% height=50%><iframe width=100% height=100% src="/inner.html" id="content_frame"></iframe></td>
+                <td width=50% height=50%><div width=100% height=100% id="content"></iframe></td>
+            </tr>
+            <tr>
+                <td colspan="2" width=100% height=300px><div id="logs" width=100% height=300px style="overflow-y: scroll;"></div></td>
+            </tr>
+        </table>
+        <script>
+            Loader.runOuter("content_frame", "content", "logs");
+        </script>
+    </body>
+</html>

examples/hosts/iframe-host/src/index.ts

@@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+export * from "./inframehost";
+export * from "./inner";
+export * from "./outer";

examples/hosts/iframe-host/src/inframehost.ts

@@ -0,0 +1,97 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import {
+    IFrameDocumentServiceProxyFactory,
+} from "@microsoft/fluid-iframe-driver";
+import { Loader, Container } from "@microsoft/fluid-container-loader";
+import {
+    IProxyLoaderFactory,
+    ICodeLoader ,
+    IContainerContext,
+    IRuntime,
+    IRuntimeFactory,
+    IRuntimeState,
+} from "@microsoft/fluid-container-definitions";
+import { IRequest, IResponse } from "@microsoft/fluid-component-core-interfaces";
+
+import { IBaseHostConfig } from "@microsoft/fluid-base-host";
+import { ISequencedDocumentMessage, ITree, ConnectionState } from "@microsoft/fluid-protocol-definitions";
+
+class ProxyRuntime implements IRuntime{
+    async request(request: IRequest): Promise<IResponse> {
+        throw new Error("Method not implemented.");
+    }
+    async snapshot(tagMessage: string, fullTree?: boolean | undefined): Promise<ITree | null> {
+        throw new Error("Method not implemented.");
+    }
+    async changeConnectionState(value: ConnectionState, clientId: string, version?: string | undefined) {
+    }
+    async stop(): Promise<IRuntimeState> {
+        throw new Error("Method not implemented.");
+    }
+    async process(message: ISequencedDocumentMessage, local: boolean, context: any) {
+    }
+    async processSignal(message: any, local: boolean) {
+    }
+}
+
+class ProxyChaincode implements IRuntimeFactory{
+
+    async instantiateRuntime(context: IContainerContext): Promise<IRuntime> {
+        return new ProxyRuntime();
+    }
+
+    get IRuntimeFactory(){
+        return this;
+    }
+}
+
+class ProxyCodeLoader implements ICodeLoader{
+
+    async load(){
+        return Promise.resolve({ fluidExport: new ProxyChaincode() });
+    }
+}
+
+export class IFrameOuterHost {
+    private readonly loader: Loader;
+    constructor(private readonly hostConfig: IBaseHostConfig){
+        // todo
+        // disable summaries
+        // set as non-user client
+        this.loader = new Loader(
+            hostConfig.urlResolver,
+            hostConfig.documentServiceFactory,
+            new ProxyCodeLoader(),
+            hostConfig.config ?? {},
+            hostConfig.scope ?? {},
+            hostConfig.proxyLoaderFactories ?? new Map<string, IProxyLoaderFactory>(),
+        );
+    }
+
+    public async load(request: IRequest, iframe: HTMLIFrameElement): Promise<Container>{
+
+        const proxy = await IFrameDocumentServiceProxyFactory.create(
+            this.hostConfig.documentServiceFactory,
+            iframe,
+            this.hostConfig.config,
+            this.hostConfig.urlResolver);
+
+        await proxy.createDocumentServiceFromRequest(request);
+
+        // don't try to connect until the iframe does, so they get existing false
+
+        await new Promise((resolve)=>setTimeout(() => resolve(), 200));
+
+        const container = await this.loader.resolve(request);
+        if(!container.getQuorum().has("code")){
+            // we'll never propose the code, so wait for them to do it
+            await new Promise((resolve) => container.once("contextChanged", () => resolve()));
+        }
+
+        return container;
+    }
+}

examples/hosts/iframe-host/src/inner.html

@@ -0,0 +1,17 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!-- Licensed under the MIT License. -->
+<html>
+    <head>
+        <script src="/main.bundle.js"></script>
+    </head>
+    <body>
+        <table width=100% height=100%>
+            <tr>
+                <td width=100% height=100%><div width=100% height=100% id="content"></iframe></td>
+            </tr>
+        </table>
+        <script>
+            Loader.runInner("content");
+        </script>
+    </body>
+</html>

examples/hosts/iframe-host/src/inner.ts

@@ -0,0 +1,32 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { InnerDocumentServiceFactory } from "@microsoft/fluid-iframe-driver";
+import { BaseHost } from "@microsoft/fluid-base-host";
+import { IFluidCodeDetails } from "@microsoft/fluid-container-definitions";
+export async function runInner(divId: string){
+    const div = document.getElementById(divId) as HTMLDivElement;
+
+    const pkgResp =
+        await fetch(
+            "https://pragueauspkn-3873244262.azureedge.net/@fluid-example/todo@^0.15.0/package.json");
+    const pkg: IFluidCodeDetails = {
+        package: await pkgResp.json(),
+        config:{
+            "@fluid-example:cdn":"https://pragueauspkn-3873244262.azureedge.net",
+        },
+    };
+
+    const documentServiceFactory = await InnerDocumentServiceFactory.create();
+    const baseHost = new BaseHost(
+        {
+            documentServiceFactory,
+            urlResolver: documentServiceFactory.urlResolver,
+            config: {},
+        },
+        undefined,
+        []);
+
+    await baseHost.loadAndRender(documentServiceFactory.resolvedUrl.url, div, pkg);
+}