From ae0a34fff7eba32808f3397c12e06b6e8455034c Mon Sep 17 00:00:00 2001 From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com> Date: Fri, 11 Feb 2022 13:27:33 -0800 Subject: [PATCH] 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 Co-authored-by: nicholasrice Co-authored-by: Chris Holt --- packages/web-components/fast-ssr/.npmignore | 2 + packages/web-components/fast-ssr/README.md | 7 ++++ packages/web-components/fast-ssr/package.json | 40 +++++++++++++++++++ .../web-components/fast-ssr/server/README.md | 2 + .../web-components/fast-ssr/server/server.ts | 25 ++++++++++++ .../fast-ssr/server/tsconfig.json | 9 +++++ packages/web-components/fast-ssr/src/index.ts | 1 + .../web-components/fast-ssr/src/tsconfig.json | 12 ++++++ .../fast-ssr/test/example.spec.ts | 10 +++++ .../web-components/fast-ssr/test/package.json | 5 +++ .../fast-ssr/test/playwright.config.ts | 11 +++++ .../fast-ssr/test/tsconfig.json | 9 +++++ .../web-components/fast-ssr/tsconfig.json | 17 ++++++++ 13 files changed, 150 insertions(+) create mode 100644 packages/web-components/fast-ssr/.npmignore create mode 100644 packages/web-components/fast-ssr/README.md create mode 100644 packages/web-components/fast-ssr/package.json create mode 100644 packages/web-components/fast-ssr/server/README.md create mode 100644 packages/web-components/fast-ssr/server/server.ts create mode 100644 packages/web-components/fast-ssr/server/tsconfig.json create mode 100644 packages/web-components/fast-ssr/src/index.ts create mode 100644 packages/web-components/fast-ssr/src/tsconfig.json create mode 100644 packages/web-components/fast-ssr/test/example.spec.ts create mode 100644 packages/web-components/fast-ssr/test/package.json create mode 100644 packages/web-components/fast-ssr/test/playwright.config.ts create mode 100644 packages/web-components/fast-ssr/test/tsconfig.json create mode 100644 packages/web-components/fast-ssr/tsconfig.json diff --git a/packages/web-components/fast-ssr/.npmignore b/packages/web-components/fast-ssr/.npmignore new file mode 100644 index 00000000000..4037e8e7be9 --- /dev/null +++ b/packages/web-components/fast-ssr/.npmignore @@ -0,0 +1,2 @@ +test +server diff --git a/packages/web-components/fast-ssr/README.md b/packages/web-components/fast-ssr/README.md new file mode 100644 index 00000000000..c9302b92748 --- /dev/null +++ b/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`. \ No newline at end of file diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json new file mode 100644 index 00000000000..cdcb62fa1ec --- /dev/null +++ b/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" + } +} diff --git a/packages/web-components/fast-ssr/server/README.md b/packages/web-components/fast-ssr/server/README.md new file mode 100644 index 00000000000..c41dd618a80 --- /dev/null +++ b/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`. \ No newline at end of file diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts new file mode 100644 index 00000000000..e47e01fad16 --- /dev/null +++ b/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); diff --git a/packages/web-components/fast-ssr/server/tsconfig.json b/packages/web-components/fast-ssr/server/tsconfig.json new file mode 100644 index 00000000000..fc7f3f2b6e1 --- /dev/null +++ b/packages/web-components/fast-ssr/server/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": ".", + "outDir": "dist" + }, + "references": [{ "path": "../src"}] +} diff --git a/packages/web-components/fast-ssr/src/index.ts b/packages/web-components/fast-ssr/src/index.ts new file mode 100644 index 00000000000..62073af2a0f --- /dev/null +++ b/packages/web-components/fast-ssr/src/index.ts @@ -0,0 +1 @@ +export default "fast-ssr"; diff --git a/packages/web-components/fast-ssr/src/tsconfig.json b/packages/web-components/fast-ssr/src/tsconfig.json new file mode 100644 index 00000000000..8b2f5bed380 --- /dev/null +++ b/packages/web-components/fast-ssr/src/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": ".", + "outDir": "../dist", + "lib": [ + "dom", + "esnext" + ], + }, +} diff --git a/packages/web-components/fast-ssr/test/example.spec.ts b/packages/web-components/fast-ssr/test/example.spec.ts new file mode 100644 index 00000000000..73c85108fa9 --- /dev/null +++ b/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"); +}); diff --git a/packages/web-components/fast-ssr/test/package.json b/packages/web-components/fast-ssr/test/package.json new file mode 100644 index 00000000000..890f891f972 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/packages/web-components/fast-ssr/test/playwright.config.ts b/packages/web-components/fast-ssr/test/playwright.config.ts new file mode 100644 index 00000000000..4b048b7ff22 --- /dev/null +++ b/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; diff --git a/packages/web-components/fast-ssr/test/tsconfig.json b/packages/web-components/fast-ssr/test/tsconfig.json new file mode 100644 index 00000000000..2ba585452cf --- /dev/null +++ b/packages/web-components/fast-ssr/test/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "rootDir": ".", + "outDir": "dist", + "declaration": false + }, + "references": [{ "path": "../src"}] +} diff --git a/packages/web-components/fast-ssr/tsconfig.json b/packages/web-components/fast-ssr/tsconfig.json new file mode 100644 index 00000000000..cf4cd344bc2 --- /dev/null +++ b/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" + ], + }, +}