From ee333e3b0c29bb3a4ff17e53ad4ae98ce7e91a80 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Fri, 15 May 2020 10:39:37 -0700 Subject: [PATCH] chore: add basic example wiring for both web components and react (#3140) --- sites/fast-tooling-examples/CONTRIBUTORS.md | 20 +++++++ .../app/example-react-1.ts | 4 ++ .../app/example-web-component-1.ts | 4 ++ .../app/examples/react-1/example.tsx | 24 +++++++++ .../app/examples/react-1/index.html | 28 ++++++++++ .../app/examples/react-1/index.tsx | 8 +++ .../app/examples/web-component-1/index.html | 28 ++++++++++ .../app/examples/web-component-1/index.ts | 17 ++++++ sites/fast-tooling-examples/app/index.html | 52 ++++++++++++++++++- sites/fast-tooling-examples/app/index.ts | 43 +++++++++++++-- sites/fast-tooling-examples/app/registry.ts | 11 ++++ sites/fast-tooling-examples/app/style.css | 31 +++++++++-- sites/fast-tooling-examples/package.json | 4 +- sites/fast-tooling-examples/webpack.config.js | 24 +++++++++ yarn.lock | 27 ++++++++++ 15 files changed, 316 insertions(+), 9 deletions(-) create mode 100644 sites/fast-tooling-examples/CONTRIBUTORS.md create mode 100644 sites/fast-tooling-examples/app/example-react-1.ts create mode 100644 sites/fast-tooling-examples/app/example-web-component-1.ts create mode 100644 sites/fast-tooling-examples/app/examples/react-1/example.tsx create mode 100644 sites/fast-tooling-examples/app/examples/react-1/index.html create mode 100644 sites/fast-tooling-examples/app/examples/react-1/index.tsx create mode 100644 sites/fast-tooling-examples/app/examples/web-component-1/index.html create mode 100644 sites/fast-tooling-examples/app/examples/web-component-1/index.ts create mode 100644 sites/fast-tooling-examples/app/registry.ts diff --git a/sites/fast-tooling-examples/CONTRIBUTORS.md b/sites/fast-tooling-examples/CONTRIBUTORS.md new file mode 100644 index 00000000000..749bc73a155 --- /dev/null +++ b/sites/fast-tooling-examples/CONTRIBUTORS.md @@ -0,0 +1,20 @@ +# Adding a new example + +When adding a new example the following steps should be taken: +- Add a link in the `app/index.html` to the example in the appropriate category. +- Add a TypeScript file named with the corresponding example numbering and category, `example-{category}-{number}.ts`, for example `example-react-2.ts` the contents of which should include in it an `id`, in this case `react-2`, and a `text` property that will go above the example. + +Example: +```typescript + export default { + id: "react-2", + text: "An example editor using the Viewer, Form and Navigation components.", +}; +``` + +- Add this new example to the `registry.ts` file by following the syntax there. +- Add a folder in the examples file with your new example. +- Add to the `webpack.config.js` file a new `entry` in the above example with camelCase naming corresponding to the name of the example file, taking the example file name `example-react-2` above, it would be `exampleReact2` and point it to your new `index.ts`/`index.tsx` file in your example folder. +- Add to the `webpack.config.js` file a new instance of `HtmlWebpackPlugin` which points to your new template. Be sure to filter out the main js file and all other example js files so that they only include your own, use other template files as reference. + +Note: Naming conventions must be strictly adhered to for templating to strip out irrelevant script files. diff --git a/sites/fast-tooling-examples/app/example-react-1.ts b/sites/fast-tooling-examples/app/example-react-1.ts new file mode 100644 index 00000000000..de2cae2d4e1 --- /dev/null +++ b/sites/fast-tooling-examples/app/example-react-1.ts @@ -0,0 +1,4 @@ +export default { + id: "react-1", + text: "React 1", +}; diff --git a/sites/fast-tooling-examples/app/example-web-component-1.ts b/sites/fast-tooling-examples/app/example-web-component-1.ts new file mode 100644 index 00000000000..f3f546262df --- /dev/null +++ b/sites/fast-tooling-examples/app/example-web-component-1.ts @@ -0,0 +1,4 @@ +export default { + id: "web-component-1", + text: "Web Component 1", +}; diff --git a/sites/fast-tooling-examples/app/examples/react-1/example.tsx b/sites/fast-tooling-examples/app/examples/react-1/example.tsx new file mode 100644 index 00000000000..d987c15ce5a --- /dev/null +++ b/sites/fast-tooling-examples/app/examples/react-1/example.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import FASTMessageSystemWorker from "@microsoft/fast-tooling/dist/message-system.min.js"; +import { MessageSystem } from "@microsoft/fast-tooling"; + +const fastMessageSystemWorker = new FASTMessageSystemWorker(); +let fastMessageSystem: MessageSystem; + +class Example extends React.Component<{}, {}> { + constructor(props) { + super(props); + + if ((window as any).Worker) { + fastMessageSystem = new MessageSystem({ + webWorker: fastMessageSystemWorker, + }); + } + } + + render() { + return React Example 1; + } +} + +export default Example; diff --git a/sites/fast-tooling-examples/app/examples/react-1/index.html b/sites/fast-tooling-examples/app/examples/react-1/index.html new file mode 100644 index 00000000000..bb935557575 --- /dev/null +++ b/sites/fast-tooling-examples/app/examples/react-1/index.html @@ -0,0 +1,28 @@ + + + + + + + <%= htmlWebpackPlugin.tags.headTags %> + <%= htmlWebpackPlugin.options.title %> + + + +
+ <%= htmlWebpackPlugin + .tags + .bodyTags + .filter( + (tag) => + !tag.attributes.src.includes('main') + && ( + !tag.attributes.src.includes('example') + || tag.attributes.src.includes('exampleReact1') + ) + ) + .join('') + %> + + + \ No newline at end of file diff --git a/sites/fast-tooling-examples/app/examples/react-1/index.tsx b/sites/fast-tooling-examples/app/examples/react-1/index.tsx new file mode 100644 index 00000000000..afec0cd1307 --- /dev/null +++ b/sites/fast-tooling-examples/app/examples/react-1/index.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import Example from "./example"; + +/** + * Primary render function for app. Called on store updates + */ +ReactDOM.render(, document.getElementById("root")); diff --git a/sites/fast-tooling-examples/app/examples/web-component-1/index.html b/sites/fast-tooling-examples/app/examples/web-component-1/index.html new file mode 100644 index 00000000000..1e515c114c1 --- /dev/null +++ b/sites/fast-tooling-examples/app/examples/web-component-1/index.html @@ -0,0 +1,28 @@ + + + + + + + <%= htmlWebpackPlugin.tags.headTags %> + <%= htmlWebpackPlugin.options.title %> + + + +
+ <%= htmlWebpackPlugin + .tags + .bodyTags + .filter( + (tag) => + !tag.attributes.src.includes('main') + && ( + !tag.attributes.src.includes('example') + || tag.attributes.src.includes('exampleWebComponent1') + ) + ) + .join('') + %> + + + \ No newline at end of file diff --git a/sites/fast-tooling-examples/app/examples/web-component-1/index.ts b/sites/fast-tooling-examples/app/examples/web-component-1/index.ts new file mode 100644 index 00000000000..fa11b3a3784 --- /dev/null +++ b/sites/fast-tooling-examples/app/examples/web-component-1/index.ts @@ -0,0 +1,17 @@ +import FASTMessageSystemWorker from "@microsoft/fast-tooling/dist/message-system.min.js"; +import { MessageSystem } from "@microsoft/fast-tooling"; + +const fastMessageSystemWorker = new FASTMessageSystemWorker(); +let fastMessageSystem: MessageSystem; + +if ((window as any).Worker) { + fastMessageSystem = new MessageSystem({ + webWorker: fastMessageSystemWorker, + }); +} + +const root = document.getElementById("root"); + +if (root !== null) { + root.innerHTML = "Web Components Example 1"; +} diff --git a/sites/fast-tooling-examples/app/index.html b/sites/fast-tooling-examples/app/index.html index 352ecfc9b1b..0d70a5488e7 100644 --- a/sites/fast-tooling-examples/app/index.html +++ b/sites/fast-tooling-examples/app/index.html @@ -4,6 +4,7 @@ + <%= htmlWebpackPlugin.tags.headTags %> <%= htmlWebpackPlugin.options.title %> @@ -40,19 +41,68 @@

Tooling

+

React Tooling

+
- Placeholder +
+

+ Tooling Examples +

+ +

+ Showcasing common use cases for @microsoft/fast-tooling and @microsoft/fast-tooling-react +

+

+ The examples in this site serve to better illustrate: +

+
    +
  • + How to use the message system +
    • +
  • + How to use the available React components +
    • +
+

+ Additionally each example is encapsulated in its own folder which can be copied as used as a starting point. +

+
+
+ <%= htmlWebpackPlugin + .tags + .bodyTags + .filter((tag) => !tag.attributes.src.includes('example')) + .join('') + %> \ No newline at end of file diff --git a/sites/fast-tooling-examples/app/index.ts b/sites/fast-tooling-examples/app/index.ts index 9790e7f83e7..2594628855f 100644 --- a/sites/fast-tooling-examples/app/index.ts +++ b/sites/fast-tooling-examples/app/index.ts @@ -2,13 +2,48 @@ import { FASTAnchor, FASTBadge, FASTDesignSystemProvider, + FASTDivider, } from "@microsoft/fast-components"; - -/* eslint-disable-next-line @typescript-eslint/no-var-requires */ -const style = require("./style.css"); +import "./style.css"; +import examples from "./registry"; // prevent tree shaking -style; FASTAnchor; FASTBadge; +FASTDivider; FASTDesignSystemProvider; + +/** + * The links to examples + */ +const exampleIds = Object.keys(examples); + +function initializeExample(id: string) { + const textContainer = document.getElementById("text"); + const iframeContainer = document.getElementById("iframe"); + + if (textContainer !== null) { + textContainer.innerHTML = examples[id].text; + } + + if (iframeContainer !== null) { + const iframe = document.createElement("iframe"); + iframe.setAttribute("src", `/examples/${id}`); + iframeContainer.append(iframe); + } +} + +function initialize() { + if ( + exampleIds.find(exampleId => { + return `/${exampleId}` === window.location.pathname; + }) + ) { + initializeExample(window.location.pathname.slice(1)); + } +} + +/** + * Initialize + */ +initialize(); diff --git a/sites/fast-tooling-examples/app/registry.ts b/sites/fast-tooling-examples/app/registry.ts new file mode 100644 index 00000000000..b7f5de1fb15 --- /dev/null +++ b/sites/fast-tooling-examples/app/registry.ts @@ -0,0 +1,11 @@ +import exampleReact1 from "./example-react-1"; +import exampleWebComponent1 from "./example-web-component-1"; + +export default { + [exampleReact1.id]: { + text: exampleReact1.text, + }, + [exampleWebComponent1.id]: { + text: exampleWebComponent1.text, + }, +}; diff --git a/sites/fast-tooling-examples/app/style.css b/sites/fast-tooling-examples/app/style.css index a5c21aaf569..d4be9ebf3a1 100644 --- a/sites/fast-tooling-examples/app/style.css +++ b/sites/fast-tooling-examples/app/style.css @@ -6,12 +6,17 @@ :root { --badge-fill-primary: #FB356D; --badge-color-text: white; + --border: 1px solid #e1e1e1; } body { margin: 0; } +iframe { + border: var(--border); +} + .main { display: grid; grid-template-columns: 240px auto; @@ -26,7 +31,7 @@ body { grid-row-end: 1; display: grid; grid-template-columns: 1fr 1fr; - border-bottom: 1px solid #e1e1e1; + border-bottom: var(--border); } .toolbar-logo { @@ -45,11 +50,11 @@ body { grid-column-end: 1; grid-row-start: 2; grid-row-end: 2; - border-inline-end: 1px solid #e1e1e1; + border-inline-end: var(--border); } -/* This should be replaced at a later date once the typography styles are defined */ .category-title { + /* This should be replaced at a later date once the typography styles are defined */ font-size: var(--type-ramp-plus-2-font-size); } @@ -60,6 +65,26 @@ body { grid-row-end: 2; } +.content-title { + /* This should be replaced at a later date once the typography styles are defined */ + font-size: var(--type-ramp-plus-3-font-size); +} + +.content-subtitle { + /* This should be replaced at a later date once the typography styles are defined */ + font-size: var(--type-ramp-plus-2-font-size); +} + +.content-paragraph { + /* This should be replaced at a later date once the typography styles are defined */ + font-size: var(--type-ramp-plus-1-font-size); +} + +.content-list { + /* This should be replaced at a later date once the typography styles are defined */ + font-size: var(--type-ramp-plus-1-font-size); +} + .toolbar-logo, .toolbar-links, .menu, diff --git a/sites/fast-tooling-examples/package.json b/sites/fast-tooling-examples/package.json index 482658fe1bc..2c471840c18 100644 --- a/sites/fast-tooling-examples/package.json +++ b/sites/fast-tooling-examples/package.json @@ -47,6 +47,8 @@ "dependencies": { "@microsoft/fast-components": "^0.10.1", "@microsoft/fast-tooling": "^0.3.1", - "@microsoft/fast-tooling-react": "^2.0.4" + "@microsoft/fast-tooling-react": "^2.0.4", + "react": "^16.13.1", + "react-dom": "^16.13.1" } } diff --git a/sites/fast-tooling-examples/webpack.config.js b/sites/fast-tooling-examples/webpack.config.js index 2b786f6ca99..91a7aafdc5e 100644 --- a/sites/fast-tooling-examples/webpack.config.js +++ b/sites/fast-tooling-examples/webpack.config.js @@ -14,6 +14,11 @@ module.exports = (env, args) => { devtool: isProduction ? "none" : "inline-source-map", entry: { main: path.resolve(appDir, "index.ts"), + exampleWebComponent1: path.resolve( + appDir, + "examples/web-component-1/index.ts" + ), + exampleReact1: path.resolve(appDir, "examples/react-1/index.tsx"), }, output: { path: outDir, @@ -64,6 +69,12 @@ module.exports = (env, args) => { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, + { + test: /message\-system\.min\.js/, + use: { + loader: "worker-loader", + }, + }, ], }, performance: { @@ -74,9 +85,22 @@ module.exports = (env, args) => { plugins: [ new CleanWebpackPlugin([outDir]), new HtmlWebpackPlugin({ + inject: false, title: "FAST Tooling Examples", template: path.resolve(appDir, "index.html"), }), + new HtmlWebpackPlugin({ + inject: false, + title: "FAST Tooling Examples - Web Components", + filename: "examples/web-component-1/index.html", + template: path.resolve(appDir, "examples/web-component-1/index.html"), + }), + new HtmlWebpackPlugin({ + inject: false, + title: "FAST Tooling Examples - React", + filename: "examples/react-1/index.html", + template: path.resolve(appDir, "examples/react-1/index.html"), + }), new MiniCssExtractPlugin({ chunkFilename: "[name]-[contenthash].css", }), diff --git a/yarn.lock b/yarn.lock index 1419f6dc981..82f5206092a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20048,6 +20048,16 @@ react-dom@^16.12.0, react-dom@^16.3.0, react-dom@^16.6.0, react-dom@^16.6.3, rea prop-types "^15.6.2" scheduler "^0.18.0" +react-dom@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" + integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + scheduler "^0.19.1" + react-draggable@^4.0.3: version "4.1.0" resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.1.0.tgz#e1c5b774001e32f0bff397254e1e9d5448ac92a4" @@ -20340,6 +20350,15 @@ react@^16.12.0, react@^16.3.0, react@^16.6.0, react@^16.6.3, react@^16.8.0, reac object-assign "^4.1.1" prop-types "^15.6.2" +react@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" + integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" @@ -21449,6 +21468,14 @@ scheduler@^0.18.0: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" + integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"