-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add basic example wiring for both web components and react (#3140
- Loading branch information
1 parent
7ff340b
commit c9db85d
Showing
15 changed files
with
316 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export default { | ||
id: "react-1", | ||
text: "React 1", | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export default { | ||
id: "web-component-1", | ||
text: "Web Component 1", | ||
}; |
24 changes: 24 additions & 0 deletions
24
sites/fast-tooling-examples/app/examples/react-1/example.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
28 changes: 28 additions & 0 deletions
28
sites/fast-tooling-examples/app/examples/react-1/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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")); |
28 changes: 28 additions & 0 deletions
28
sites/fast-tooling-examples/app/examples/web-component-1/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
17 changes: 17 additions & 0 deletions
17
sites/fast-tooling-examples/app/examples/web-component-1/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.