feat: add initial files for a tooling examples site (#3109)

2020-05-11 22:32:51 -07:00 · 2020-05-11 22:32:51 -07:00 · 8321d8c4e7
--- a/lerna.json
+++ b/lerna.json
@ -3,7 +3,8 @@
    "packages/**/*",
    "sites/fast-color-explorer",
    "sites/fast-component-explorer",
-    "sites/fast-creator"
+    "sites/fast-creator",
+    "sites/fast-tooling-examples"
  ],
  "version": "independent",
  "npmClient": "yarn",
--- a/package.json
+++ b/package.json
@ -9,7 +9,7 @@
  "license": "MIT",
  "private": true,
  "workspaces": {
-    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator", "sites/site-utilities"],
+    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator", "sites/site-utilities", "sites/fast-tooling-examples"],
    "nohoist": ["**/react-syntax-highlighter", "**/@types/chai", "**/@types/jest", "**/@types/karma", "**/@types/mocha"]
  },
  "repository": {
--- a/sites/fast-tooling-examples/.eslintignore
+++ b/sites/fast-tooling-examples/.eslintignore
@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint www
+www
--- a/sites/fast-tooling-examples/.eslintrc.js
+++ b/sites/fast-tooling-examples/.eslintrc.js
@ -0,0 +1,7 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/typedef": "off",
+    },
+};
--- a/sites/fast-tooling-examples/.npmrc
+++ b/sites/fast-tooling-examples/.npmrc
@ -0,0 +1 @@
+package-lock=false
--- a/sites/fast-tooling-examples/.prettierignore
+++ b/sites/fast-tooling-examples/.prettierignore
@ -0,0 +1 @@
+www/*
--- a/sites/fast-tooling-examples/README.md
+++ b/sites/fast-tooling-examples/README.md
@ -0,0 +1,12 @@
+# Introduction 
+A website showing a variety of examples for the `@microsoft/fast-tooling` and `@microsoft/fast-tooling-react` packages.
+
+## Getting Started
+Follow setup instructions in (https://github.com/Microsoft/fast-dna/blob/master/CONTRIBUTING.md)(https://github.com/Microsoft/fast-dna/blob/master/CONTRIBUTING.md)
+
+- Running the site locally: `yarn start`
+- Build production site: `yarn build`
+
+## Testing
+- Run all tests: `yarn test`
+- eslint all files: `yarn eslint`
--- a/sites/fast-tooling-examples/app/index.html
+++ b/sites/fast-tooling-examples/app/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE 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>
+    Placeholder
+  </body>
+</html>
--- a/sites/fast-tooling-examples/app/index.ts
+++ b/sites/fast-tooling-examples/app/index.ts
@ -0,0 +1,4 @@
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const style = require("./style.css");
+// prevent tree shaking
+style;
--- a/sites/fast-tooling-examples/app/style.css
+++ b/sites/fast-tooling-examples/app/style.css
@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
--- a/sites/fast-tooling-examples/logo.png
+++ b/sites/fast-tooling-examples/logo.png
--- a/sites/fast-tooling-examples/package.json
+++ b/sites/fast-tooling-examples/package.json
@ -0,0 +1,51 @@
+{
+  "name": "@microsoft/fast-tooling-examples",
+  "description": "A website of tooling examples from the FAST tooling packages",
+  "sideEffects": false,
+  "private": true,
+  "version": "0.0.0",
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast-dna.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
+  },
+  "scripts": {
+    "build": "webpack --progress --mode=production",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.ts\"",
+    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.ts\" --list-different",
+    "eslint": "eslint . --ext .ts",
+    "eslint:fix": "eslint . --ext .ts --fix",
+    "start": "webpack-dev-server",
+    "test": "yarn eslint && yarn build"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.1.0",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^1.0.0",
+    "css-loader": "^3.5.3",
+    "favicons-webpack-plugin": "^3.0.1",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "prettier": "2.0.2",
+    "ts-loader": "^7.0.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^2.0.0"
+  },
+  "dependencies": {
+    "@microsoft/fast-tooling": "^0.3.1",
+    "@microsoft/fast-tooling-react": "^2.0.4"
+  }
+}
--- a/sites/fast-tooling-examples/tsconfig.json
+++ b/sites/fast-tooling-examples/tsconfig.json
@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "moduleResolution": "node",
+        "module": "ES6",
+        "target": "ES6",
+        "baseUrl": "./",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true
+    },
+    "include": [
+        "app/**/*"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
--- a/sites/fast-tooling-examples/webpack.config.js
+++ b/sites/fast-tooling-examples/webpack.config.js
@ -0,0 +1,100 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const appDir = path.resolve(__dirname, "./app");
+const outDir = path.resolve(__dirname, "./www");
+
+module.exports = (env, args) => {
+    const isProduction = args.mode === "production";
+    return {
+        devtool: isProduction ? "none" : "inline-source-map",
+        entry: {
+            main: path.resolve(appDir, "index.ts"),
+        },
+        output: {
+            path: outDir,
+            publicPath: "/",
+            filename: "[name]-[contenthash].js",
+        },
+        optimization: {
+            runtimeChunk: "single",
+            splitChunks: {
+                chunks: "all",
+                maxInitialRequests: 100,
+                cacheGroups: {
+                    styles: {
+                        name: "styles",
+                        test: /\.css$/,
+                    },
+                    vendor: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: module => {
+                            const packageName = module.context.match(
+                                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+                            )[1];
+                            // npm package names are URL-safe, but some servers don't like @ symbols
+                            return `npm.${packageName.replace("@", "")}`;
+                        },
+                    },
+                },
+            },
+        },
+        mode: args.mode || "development",
+        module: {
+            rules: [
+                {
+                    test: /.tsx?$/,
+                    use: [
+                        {
+                            loader: "ts-loader",
+                        },
+                    ],
+                },
+                {
+                    test: /\.m?js$/,
+                    use: {
+                        loader: "babel-loader",
+                    },
+                },
+                {
+                    test: /\.css$/i,
+                    use: [MiniCssExtractPlugin.loader, "css-loader"],
+                },
+            ],
+        },
+        performance: {
+            // asset file size increased due to the standard limit is 244kib
+            // and the favicons occasionally produce larger files than that
+            maxAssetSize: 290000,
+        },
+        plugins: [
+            new CleanWebpackPlugin([outDir]),
+            new HtmlWebpackPlugin({
+                title: "FAST Tooling Examples",
+                template: path.resolve(appDir, "index.html"),
+            }),
+            new MiniCssExtractPlugin({
+                chunkFilename: "[name]-[contenthash].css",
+            }),
+            new BundleAnalyzerPlugin({
+                // Remove this to inspect bundle sizes.
+                analyzerMode: "disabled",
+            }),
+            new FaviconsWebpackPlugin(),
+        ],
+        resolve: {
+            extensions: [".js", ".tsx", ".ts"],
+        },
+        devServer: {
+            compress: false,
+            historyApiFallback: true,
+            overlay: true,
+            open: true,
+            port: 7779,
+        },
+    };
+};
--- a/yarn.lock
+++ b/yarn.lock