Skip to content

Commit

Permalink
Add the fast-style web component (#5600)
Browse files Browse the repository at this point in the history
# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This branch adds the following:

- A FAST Style element that will hydrate styles client side
- A webpack config that will build the minimal JS for the logic for this web component so that the file `fast-style.min.js` can be referred to in server side generated HTML

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Closes #5575

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
If you run the test server after building all the necessary files, you can navigate to `localhost:8080/fast-style` and see the component working there. One thing is the fixture uses `shadowroot="open"` to be able to see which styles are applied to nested elements during Playwright testing. This does not need the case for actual implementation, the shadowroot can be closed, this has been manually verified.

## 📑 Test Plan

<!---
Please provide a summary of the tests affected by this work and any unique strategies employed in testing the features/fixes.
-->
The added tests are Playwright tests, I'll let reviewers comment as to whether more tests are needed, this however tests the base case of applying styles to the container of the fast-style web component.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [ ] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Integrate the FASTStyle wc to the HTML renderer #5576
  • Loading branch information
janechu authored and nicholasrice committed Apr 7, 2022
1 parent 68b2ba6 commit ac204d3
Show file tree
Hide file tree
Showing 4 changed files with 624 additions and 0 deletions.
47 changes: 47 additions & 0 deletions packages/web-components/fast-ssr/server/server.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Readable } from "stream";
import express, { Request, Response } from "express";
import fs from "fs";
import path from "path";

const __dirname = path.resolve(path.dirname(""));
const PORT = 8080;
function handleRequest(req: Request, res: Response) {
res.set("Content-Type", "text/html");
Expand All @@ -20,6 +23,50 @@ function handleRequest(req: Request, res: Response) {
});
}

function handleStyleRequest(req: Request, res: Response) {
res.set("Content-Type", "text/html");
fs.readFile(
path.resolve(__dirname, "./src/fast-style/index.fixture.html"),
{ encoding: "utf8" },
(err, data) => {
const stream = (Readable as any).from(data);
stream.on("readable", function (this: any) {
while ((data = this.read())) {
res.write(data);
}
});
stream.on("close", () => res.end());
stream.on("error", (e: Error) => {
console.error(e);
process.exit(1);
});
}
);
}

function handleStyleScriptRequest(req: Request, res: Response) {
res.set("Content-Type", "application/javascript");
fs.readFile(
path.resolve(__dirname, "./dist/fast-style/index.js"),
{ encoding: "utf8" },
(err, data) => {
const stream = (Readable as any).from(data);
stream.on("readable", function (this: any) {
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.get("/fast-style", handleStyleRequest);
app.get("/fast-style.js", handleStyleScriptRequest);
app.listen(PORT);
Loading

0 comments on commit ac204d3

Please sign in to comment.