chore: load all the fast-components (#3062)

* Load all the fast-components * Add custom fast-elements structure * Fix prod folder output and add build command
microsoft · May 18, 2020 · a020ccf · a020ccf
1 parent b788a2d
commit a020ccf
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 8 deletions.
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
@@ -6,6 +6,8 @@
   "private": true,
   "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",
@@ -16,7 +18,8 @@
     "webpack-dev-server": "^3.10.3"
   },
   "scripts": {
-    "start": "webpack-dev-server --history-api-fallback --inline --progress"
+    "start": "webpack-dev-server --history-api-fallback --inline --progress",
+    "build": "webpack"
   },
   "repository": {
     "type": "git",

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(): void {
+        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
@@ -0,0 +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
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-      <!-- App goes here -->
-      <div>
-          Hello World!!!
-      </div>
+    <fast-design-system-provider use-defaults>
+      <fast-button>Hello, World!</fast-button>
+      <gradient-picker>stub</gradient-picker>
+    </fast-design-system-provider>
   </body>
-</html>
+</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
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin"); // Require  html-webpack-plugin plugin
 const appDir = path.resolve(__dirname, "./src/app");
@@ -8,8 +10,11 @@ module.exports = {
     entry: {
         main: path.resolve(appDir, "index.ts"),
     },
+    resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+    },
     output: {
-        path: path.resolve(__dirname, "/dist"),
+        path: path.resolve(__dirname, "dist"),
         filename: "bundle.js", // Name of generated bundle after build
         publicPath: "/", // public URL of the output directory when referenced in a browser
     },

diff --git a/sites/fast-website/yarn.lock b/sites/fast-website/yarn.lock
@@ -2,6 +2,77 @@
 # yarn lockfile v1
 
 
+"@microsoft/fast-colors@^5.0.8":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.0.8.tgz#5430f93b830a914d0447f0af1e7f4a9e53639324"
+  integrity sha512-1iMMEH4xvsYleynnZ0nJoJKs8IVHymgQFRkH+fgK8q0CxgY4U6wuZeT7hl5EeOKTr5gCpMwD5w7knhRwN1hrww==
+
+"@microsoft/fast-components-class-name-contracts-base@^4.6.4":
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components-class-name-contracts-base/-/fast-components-class-name-contracts-base-4.6.4.tgz#13954c50fffb8d8b5a4e6cf3a406923bc47e9749"
+  integrity sha512-Jnf7qzGKJbUexKENrnMEO//m9iDwTMTYoWgPojM6NTsrGCuRKX+nDLU/w/2I6XH9dTPDBO5wP5acgC5cvGljIQ==
+
+"@microsoft/fast-components-class-name-contracts-msft@^4.8.4":
+  version "4.8.4"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components-class-name-contracts-msft/-/fast-components-class-name-contracts-msft-4.8.4.tgz#b11d1521a84033d47cc91ffebcad6c3881a41ba0"
+  integrity sha512-/qpUdvlJa0dlJ2P3L39rCuokLyM9r1WXhtEHuIuWap415RNxLc9ywJgEHwwpTKRI2n0i46OkanV/Wg5hZ5GhOg==
+  dependencies:
+    "@microsoft/fast-components-class-name-contracts-base" "^4.6.4"
+
+"@microsoft/fast-components-styles-msft@^4.28.9":
+  version "4.28.9"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components-styles-msft/-/fast-components-styles-msft-4.28.9.tgz#9f4a5856328d5c8aefab7372c5dcb66b689fea0f"
+  integrity sha512-Rendn4sLVQIwdMuDlKE4fkqFdd6cLWt1x4RTGlTv5PyyY50ZWY1eVXAUrpwmY4O4t0Z4fvQ52QjgoplO2KRjlw==
+  dependencies:
+    "@microsoft/fast-colors" "^5.0.8"
+    "@microsoft/fast-components-class-name-contracts-base" "^4.6.4"
+    "@microsoft/fast-components-class-name-contracts-msft" "^4.8.4"
+    "@microsoft/fast-jss-manager" "^4.1.16"
+    "@microsoft/fast-jss-utilities" "^4.7.12"
+    "@microsoft/fast-web-utilities" "^4.4.5"
+
+"@microsoft/fast-components@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components/-/fast-components-0.10.1.tgz#423f3d6e7b4496407673ab6f2d055419000bcecb"
+  integrity sha512-6QcYawyexP4XglLz+2+ybwGumK4NFHL+8eNdeFi20H5mbdssIHBP8e70jWnKQyKbXH7zdO1tkfF6FyncXPbXJw==
+  dependencies:
+    "@microsoft/fast-colors" "^5.0.8"
+    "@microsoft/fast-components-styles-msft" "^4.28.9"
+    "@microsoft/fast-element" "^0.8.1"
+    "@microsoft/fast-web-utilities" "^4.4.5"
+    tabbable "^4.0.0"
+
+"@microsoft/fast-element@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.8.1.tgz#dbb01a7b26fc90cb350589131309749d7606a147"
+  integrity sha512-A643wLX9KNzp8JbbTBH6Sg9fLBbP2MFlmO2B/J2BCKZE8GjLg39WObYXkPrdMILMtwclsQ1dsWz7/N0h4LXJTg==
+
+"@microsoft/fast-jss-manager@^4.1.16":
+  version "4.1.16"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-manager/-/fast-jss-manager-4.1.16.tgz#591907afe3f463cefed6320ec8a04ab8ba39cff2"
+  integrity sha512-nKsSnA0Oalpislll/ACuiFPBsCfHNFm6amXiwH5/lxWho8cMviw2Nl/9AOHyynAK2tM3qhTj0gs/eNPdUmO90g==
+  dependencies:
+    "@microsoft/fast-components-class-name-contracts-base" "^4.6.4"
+    csstype "^2.3.0"
+
+"@microsoft/fast-jss-utilities@^4.7.12":
+  version "4.7.12"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-utilities/-/fast-jss-utilities-4.7.12.tgz#cc9c751b53d9c77f9bbfaf9c4f02bb153460474d"
+  integrity sha512-bxH5zuek10cwJ0+pPskJHxraWdGW74V9ybdAbs508tbHFn/i5Mmx9rjjKLoRh7GDnwP+GttEk4PSZYI3mC2MMQ==
+  dependencies:
+    "@microsoft/fast-colors" "^5.0.8"
+    "@microsoft/fast-jss-manager" "^4.1.16"
+    "@microsoft/fast-web-utilities" "^4.4.5"
+    csstype "^2.3.0"
+    exenv-es6 "^1.0.0"
+
+"@microsoft/fast-web-utilities@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.4.5.tgz#5b2ad029989af9104c4720db0a20661e81b8c6bd"
+  integrity sha512-P7ahIeQrAR6BzTJy6D4QLHGjwNCQzcknuX0U32YYwGURs9ZhttBawUEoug2+cCwktVnBjcewZ/R9M/btdhq69Q==
+  dependencies:
+    exenv-es6 "^1.0.0"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -1509,6 +1580,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+csstype@^2.3.0:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -1907,6 +1983,11 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv-es6@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/exenv-es6/-/exenv-es6-1.0.0.tgz#bd459136369af17cf33f959b5af58803d4068c80"
+  integrity sha512-fcG/TX8Ruv9Ma6PBaiNsUrHRJzVzuFMP6LtPn/9iqR+nr9mcLeEOGzXQGLC5CVQSXGE98HtzW2mTZkrCA3XrDg==
+
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@@ -4300,6 +4381,11 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+tabbable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
+  integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
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
		@@ -0,0 +1,2 @@
		export * from "./components";
		export * from "@microsoft/fast-components";