Re-enabling SSR tests, fixing SSR issues, removing deprecations

.vscode/launch.json

@@ -22,10 +22,27 @@
       "outDir": null
     },
     {
-      "name": "Attach",
+      "name": "Run ssr tests",
       "type": "node",
-      "request": "attach",
-      "port": 5858
-    }
+      "request": "launch",
+      "program": "${workspaceRoot}/apps/ssr-tests/node_modules/mocha/bin/_mocha",
+      "stopOnEntry": true,
+      "args": [
+        "--debug",
+        "dist/test-bundle.js"
+      ],
+      "cwd": "${workspaceRoot}/apps/ssr-tests",
+      "runtimeExecutable": null,
+      "runtimeArgs": [
+        "--nolazy",
+        "--debug"
+      ],
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "externalConsole": false,
+      "sourceMaps": false,
+      "outDir": null
+    },
   ]
 }

apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx

@@ -128,9 +128,9 @@ export class GetStartedPage extends React.Component<any, any> {
                 {
                   `import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Button } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
-const MyPage = () => (<div><Button>I am a button.</Button></div>);
+const MyPage = () => (<div><DefaultButton>I am a button.</DefaultButton></div>);
 
 ReactDOM.render(<MyPage />, document.body.firstChild);`
                 }

apps/ssr-tests/package.json

@@ -9,8 +9,10 @@
     "url": "https://github.com/OfficeDev/office-ui-fabric-react"
   },
   "scripts": {
-    "build": "node ./node_modules/mocha/bin/mocha && echo Ignored parameters: ",
-    "test": "node ./node_modules/mocha/bin/mocha && echo Ignored parameters: ",
+    "_webpack": "node ./node_modules/webpack/bin/webpack --config webpack.config.js",
+    "_mocha": "node ./node_modules/mocha/bin/_mocha dist/ssr-tests.js",
+    "build": "npm run _webpack",
+    "test": "npm run _webpack && npm run _mocha",
     "clean": "",
     "start": ""
   },
@@ -27,7 +29,11 @@
     "raw-loader": "^0.5.1",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "webpack": "^2.4.1",
+    "webpack-node-externals": "^1.5.4"
   },
-  "dependencies": {}
+  "dependencies": {
+    "es6-promise": "^4.1.0"
+  }
 }

apps/ssr-tests/test/test.js

@@ -17,24 +17,22 @@ responsiveLib.setResponsiveMode(responsiveLib.ResponsiveMode.large);
 
 let React = require('react');
 let ReactDOMServer = require('react-dom/server');
-let AppDefinition = require('fabric-examples/lib/AppDefinition').AppDefinition;
+let AppDefinition = require('office-ui-fabric-react/lib/demo/AppDefinition').AppDefinition;
 
 describe('Fabric components', () => {
   for (let i = 0; i < AppDefinition.examplePages.length; i++) {
     let links = AppDefinition.examplePages[i].links;
-
     for (let j = 0; j < links.length; j++) {
-      let componentName = links[j].key;
+      let { key, component } = links[j];
 
-      testRender(componentName);
+      testRender(key, component);
     }
   }
 });
 
-function testRender(componentName) {
+
+function testRender(componentName, component) {
   it(`${componentName} can render in a server environment`, (done) => {
-    let componentPath = `fabric-examples/lib/pages/${componentName}Page/${componentName}Page`;
-    let component = require(componentPath)[componentName + 'Page'];
     let elem = React.createElement(component);
 
     try {

apps/ssr-tests/webpack.config.js

@@ -0,0 +1,45 @@
+let path = require('path');
+let nodeExternals = require('webpack-node-externals');
+
+module.exports = {
+  entry: './test/test.js',
+
+  output: {
+    filename: 'dist/ssr-tests.js',
+  },
+
+  target: 'node',
+
+  externals: [
+    //  nodeExternals()
+    "vertx"
+  ],
+
+  node: {
+    fs: 'empty'
+  },
+
+  resolve: {
+    alias: {
+      'office-ui-fabric-react/src': path.join(__dirname, '../../packages/office-ui-fabric-react/src'),
+      'office-ui-fabric-react/lib': path.join(__dirname, '../../packages/office-ui-fabric-react/lib'),
+      'Props.ts.js': 'Props'
+    },
+    extensions: ['.js', '.tsx']
+  },
+
+  devtool: 'source-map',
+
+  devServer: {
+    inline: true,
+    port: 4321
+  },
+
+  module: {
+    loaders: [
+    ]
+  },
+
+  plugins: [
+  ]
+}

apps/todo-app/src/components/TodoForm.tsx

@@ -8,11 +8,11 @@ const styles: any = stylesImport;
 import strings from './../strings';
 
 /**
- * The form component used for adding new item to the list.
+ * The form component used for adding new item to the list. It uses fabric-react components
+ * TextField and PrimaryButton.
  *
- * It uses fabric-react component <TextField> <Button>
- * Link of TextField: https://fabricreact.azurewebsites.net/fabric-react/master/#/examples/textfield
- * Link of Button: https://fabricreact.azurewebsites.net/fabric-react/master/#/examples/button
+ * TextField: https://fabricreact.azurewebsites.net/fabric-react/master/#/examples/textfield
+ * Button: https://fabricreact.azurewebsites.net/fabric-react/master/#/examples/button
  */
 export default class TodoForm extends React.Component<ITodoFormProps, ITodoFormState> {
   private _textField: TextField;

common/changes/dzearing-fix-ssr_2017-05-03-22-03.json

@@ -0,0 +1,25 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Toggle: removing an unnecessary React warning when passing in defaultChecked value.",
+      "type": "patch"
+    },
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "getRTL: fixing an issue to ensure it is once again SSR friendly.",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/styling",
+      "type": "none"
+    },
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Removing references to deprecated things.",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}