Add custom fast-elements structure

microsoft · May 5, 2020 · 82e3742 · 82e3742
1 parent c3175bf
commit 82e3742
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 0 deletions.
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
@@ -7,6 +7,7 @@
   "license": "MIT",
   "devDependencies": {
     "@microsoft/fast-components": "^0.10.1",
+    "@microsoft/fast-element": "^0.8.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",

diff --git a/sites/fast-website/src/app/components/gradient-picker/index.ts b/sites/fast-website/src/app/components/gradient-picker/index.ts
@@ -0,0 +1,10 @@
+import { attr, customElement, FASTElement } from "@microsoft/fast-element";
+
+@customElement("gradient-picker")
+export class GradientPicker extends FASTElement {
+    @attr greeting: string = "Hello";
+
+    greetingChanged() {
+        this.shadowRoot!.innerHTML = this.greeting;
+    }
+}
diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts
@@ -0,0 +1 @@
+export { GradientPicker } from "./gradient-picker";
diff --git a/sites/fast-website/src/app/index.ts b/sites/fast-website/src/app/index.ts
@@ -1 +1,2 @@
+export * from "./components";
 export * from "@microsoft/fast-components";
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -8,6 +8,7 @@
   <body>
     <fast-design-system-provider use-defaults>
       <fast-button>Hello, World!</fast-button>
+      <gradient-picker>stub</gradient-picker>
     </fast-design-system-provider>
   </body>
 </html>
diff --git a/sites/fast-website/tsconfig.json b/sites/fast-website/tsconfig.json
@@ -7,6 +7,7 @@
         "strictNullChecks": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true,
         "resolveJsonModule": true
     },
     "include": [

diff --git a/sites/fast-website/webpack.config.js b/sites/fast-website/webpack.config.js
@@ -10,6 +10,9 @@ module.exports = {
     entry: {
         main: path.resolve(appDir, "index.ts"),
     },
+    resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+    },
     output: {
         path: path.resolve(__dirname, "/dist"),
         filename: "bundle.js", // Name of generated bundle after build
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { GradientPicker } from "./gradient-picker";
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./components";
		export * from "@microsoft/fast-components";