chore: set up SSR package (#5589)

* project files and starting to set up test infrastructure

* incorporating ts project references and getting tests working

* adding .npmignore to ingore tests and server

* adding readmes

* Update packages/web-components/fast-ssr/package.json

Co-authored-by: Chris Holt <[email protected]>

Co-authored-by: nicholasrice <[email protected]>
Co-authored-by: Chris Holt <[email protected]>

packages/web-components/fast-ssr/.npmignore

@@ -0,0 +1,2 @@
+test
+server

packages/web-components/fast-ssr/README.md

@@ -0,0 +1,7 @@
+# FAST SSR
+This package contains tools to render FAST components outside the browser. More details to follow...
+
+## Testing
+This package uses Playwright and a lightweight web server for running tests. You can run the tests by running `npm run test`.
+
+> Playwright may prompt you to install browsers to run the tests. If so, follow the instructions provided or run `npm run install-playwright-browsers`.

packages/web-components/fast-ssr/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@microsoft/fast-ssr",
+  "version": "0.1.0",
+  "type": "module",
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/fast/issues/new/choose"
+  },
+  "scripts": {
+    "build": "tsc -b --clean src && tsc -b src",
+    "build-server": "tsc -b server",
+    "pretest": "npm run build-server",
+    "test": "playwright test -c test",
+    "test-server": "node server/dist/server.js",
+    "install-playwright-browsers": "npx playwright install"
+  },
+  "description": "A package for rendering FAST components outside the browser.",
+  "main": "index.js",
+  "private": true,
+  "dependencies": {
+    "@lit-labs/ssr": "^1.0.0-rc.2",
+    "@microsoft/fast-element": "^1.5.0",
+    "tslib": "^1.11.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.18.0",
+    "@types/express": "^4.17.13",
+    "@types/node": "^17.0.17",
+    "express": "^4.17.1",
+    "typescript": "^3.8.3"
+  }
+}

packages/web-components/fast-ssr/server/README.md

@@ -0,0 +1,2 @@
+# Server
+This project contains the web server that playwright tests are run against. To build, run `npm run build-server`.

packages/web-components/fast-ssr/server/server.ts

@@ -0,0 +1,25 @@
+import { Readable } from "stream";
+import express, { Request, Response } from "express";
+
+const PORT = 8080;
+function handleRequest(req: Request, res: Response) {
+    res.set("Content-Type", "text/html");
+    const stream = (Readable as any).from("hello world");
+    stream.on("readable", function (this: any) {
+        let data: string;
+
+        while ((data = this.read())) {
+            res.write(data);
+        }
+    });
+
+    stream.on("close", () => res.end());
+    stream.on("error", (e: Error) => {
+        console.error(e);
+        process.exit(1);
+    });
+}
+
+const app = express();
+app.get("/", handleRequest);
+app.listen(PORT);

packages/web-components/fast-ssr/server/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"composite": true,
+		"rootDir": ".",
+		"outDir": "dist"
+	},
+	"references": [{ "path": "../src"}]
+}

packages/web-components/fast-ssr/src/index.ts

@@ -0,0 +1 @@
+export default "fast-ssr";

packages/web-components/fast-ssr/src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": ".",
+    "outDir": "../dist",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+  },
+}

packages/web-components/fast-ssr/test/example.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect, ElementHandle } from '@playwright/test';
+import fastSSR from "../src";
+
+test("example module test", async () => {
+	expect(fastSSR).toBe("fast-ssr");
+})
+test("example server test", async ({ page }) => {
+	await page.goto("/");
+	expect(await page.innerText('body')).toBe("hello world");
+});

packages/web-components/fast-ssr/test/package.json

@@ -0,0 +1,5 @@
+{
+	"type": "commonjs",
+	"comment": "This allows Playwright to handle TS compilation for us",
+	"private": true
+}

packages/web-components/fast-ssr/test/playwright.config.ts

@@ -0,0 +1,11 @@
+// playwright.config.ts
+import { PlaywrightTestConfig } from "@playwright/test";
+const config: PlaywrightTestConfig = {
+    webServer: {
+        command: "npm run test-server",
+        port: 8080,
+        timeout: 120 * 1000,
+        reuseExistingServer: false,
+    },
+};
+export default config;

packages/web-components/fast-ssr/test/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": ".",
+		"outDir": "dist",
+		"declaration": false
+	},
+	"references": [{ "path": "../src"}]
+}

packages/web-components/fast-ssr/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2015",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmitOnError": true,
+    "strict": true,
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+  },
+}