chore: add basic example wiring for both web components and react (#3140

)
microsoft · May 18, 2020 · ee333e3 · ee333e3
1 parent f6b59f6
commit ee333e3
Show file tree

Hide file tree

Showing 15 changed files with 316 additions and 9 deletions.
diff --git a/sites/fast-tooling-examples/CONTRIBUTORS.md 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
@@ -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
@@ -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
@@ -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 <span>React Example 1</span>;
+    }
+}
+
+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
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= htmlWebpackPlugin.tags.headTags %>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <%= htmlWebpackPlugin
+        .tags
+        .bodyTags
+        .filter(
+            (tag) => 
+                !tag.attributes.src.includes('main')
+                && (
+                    !tag.attributes.src.includes('example')
+                    || tag.attributes.src.includes('exampleReact1')
+                )
+        )
+        .join('')
+    %>
+</body>
+
+</html>
diff --git a/sites/fast-tooling-examples/app/examples/react-1/index.tsx 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(<Example />, 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
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= htmlWebpackPlugin.tags.headTags %>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <%= htmlWebpackPlugin
+        .tags
+        .bodyTags
+        .filter(
+            (tag) => 
+                !tag.attributes.src.includes('main')
+                && (
+                    !tag.attributes.src.includes('example')
+                    || tag.attributes.src.includes('exampleWebComponent1')
+                )
+        )
+        .join('')
+    %>
+</body>
+
+</html>
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
@@ -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
@@ -4,6 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= htmlWebpackPlugin.tags.headTags %>
     <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 
@@ -40,19 +41,68 @@ <h2 class="category-title">
                         Tooling
                     </h2>
                     <!-- examples using @microsoft/fast-tooling -->
+                    <ul>
+                        <li>
+                            <fast-anchor
+                                href="/web-component-1"
+                                appearance="hypertext"
+                            >
+                                Message System 
+                            </fast-anchor>
+                        </li>
+                    </ul>
                 </div>
                 <div>
                     <h2 class="category-title">
                         React Tooling
                     </h2>
                     <!-- examples using @microsoft/fast-tooling-react -->
+                    <ul>
+                        <li>
+                            <fast-anchor
+                                href="/react-1"
+                                appearance="hypertext"
+                            >
+                                Simple Form
+                            </fast-anchor>
+                        </li>
+                    </ul>
                 </div>
             </div>
             <div class="content">
-                Placeholder
+                <div id="text">
+                    <h1 class="content-title">
+                        Tooling Examples
+                    </h1>
+                    <fast-divider role="presentation"></fast-divider>
+                    <h2 class="content-subtitle">
+                        Showcasing common use cases for <code>@microsoft/fast-tooling</code> and <code>@microsoft/fast-tooling-react</code>
+                    </h2>
+                    <p class="content-paragraph">
+                        The examples in this site serve to better illustrate:
+                    </p>
+                    <ul class="content-list">
+                        <li>
+                            How to use the message system
+                        </li>
+                        <li>
+                            How to use the available React components
+                        </li>
+                    </ul>
+                    <p class="content-paragraph">
+                        Additionally each example is encapsulated in its own folder which can be copied as used as a starting point.
+                    </p>
+                </div>
+                <div id="iframe"></div>
             </div>
         </div>
     </fast-design-system-provider>
+    <%= htmlWebpackPlugin
+        .tags
+        .bodyTags
+        .filter((tag) => !tag.attributes.src.includes('example'))
+        .join('')
+    %>
 </body>
 
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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"
   }
 }