More cleanup.
Jason Gore
Родитель
25adb944d7
Коммит
67c653f715
|
|
@ -5,7 +5,7 @@ Please use the following steps to contribute a new component or a bug fix to the
|
|||
|
||||
* Setup your branch using instructions in [Git branch Setup](Setup).
|
||||
|
||||
* Read [BugFix](Bug-Fixes) guide for preparing a bug fix and the [New Component](New-Component) guide for building a new component.
|
||||
* Read [BugFix](Bug-Fixes) guide for preparing a bug fix and the [New Component](New-Components) guide for building a new component.
|
||||
|
||||
* Run `npm run change` and provide component details. Please read the [Change-Files](Change-Files) document for more details on providing change instructions.
|
||||
|
||||
|
|
|
|||
85
Home.md
85
Home.md
|
|
@ -1,4 +1,4 @@
|
|||
# [Office UI Fabric React](http://dev.office.com/fabric)
|
||||
## [Office UI Fabric React](http://dev.office.com/fabric)
|
||||
|
||||
##### The React-based front-end framework for building experiences for Office and Office 365.
|
||||
|
||||
|
|
@ -11,11 +11,10 @@ Fabric React is a responsive, mobile-first collection of robust components desig
|
|||
|
||||
- [Using Fabric React](#using-fabric-react)
|
||||
- [Browser support](#browser-support)
|
||||
- [Server-side rendering](#server-side-rendering)
|
||||
- [Advanced usage](#advanced-usage)
|
||||
- [Contribute to Fabric React](#contribute-to-fabric-react)
|
||||
- [Building the repo](#building-the-repo)
|
||||
- [Testing](#testing)
|
||||
- [Advanced usage](#advanced-usage)
|
||||
- [Advanced building tips](#advanced-building-tips)
|
||||
- [Licenses](#licenses)
|
||||
- [Changelog](#changelog)
|
||||
|
|
@ -53,83 +52,9 @@ ReactDOM.render(
|
|||
|
||||
Fabric React supports many commonly used browsers. See the [browser support doc](Browser-Support) for more information.
|
||||
|
||||
## Server-side rendering
|
||||
|
||||
If you need to render Fabric components on the server side in a node environment, there is a way to do this. The basic idea is that you need to tell the styles loader to pipe styles into a variable, which you can later use to inject into your page. Example:
|
||||
|
||||
```ts
|
||||
import { configureLoadStyles } from '@microsoft/load-themed-styles';
|
||||
|
||||
// Store registered styles in a variable used later for injection.
|
||||
let _allStyles = '';
|
||||
|
||||
// Push styles into variables for injecting later.
|
||||
configureLoadStyles((styles: string) => {
|
||||
_allStyles += styles;
|
||||
});
|
||||
|
||||
import * as React from 'react';
|
||||
import * as ReactDOMServer from 'react-dom/server';
|
||||
import { Button } from 'office-ui-fabric-react/lib/Button';
|
||||
|
||||
let body = ReactDOMServer.renderToString(<Button>hello</Button>);
|
||||
|
||||
console.log(
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<style>${ _allStyles}</style>
|
||||
</head>
|
||||
<body>
|
||||
${ body}
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
```
|
||||
|
||||
Note: we are evaluating a more robust theming and style loading approach, which will allow a much more flexible server rendering approach, so this syntax may be simplified in the future.
|
||||
|
||||
### Browserless Testing
|
||||
|
||||
In unit or end-to-end tests that run in an SSR-like (non-browser) environment such as Node, you'll need to disable style loading.
|
||||
|
||||
```typescript
|
||||
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
|
||||
initializeIcons('dist/');
|
||||
|
||||
// Configure load-themed-styles to avoid registering styles.
|
||||
let themeLoader = require('@microsoft/load-themed-styles');
|
||||
themeLoader.configureLoadStyles((styles) => {
|
||||
// noop
|
||||
});
|
||||
|
||||
// Set ssr mode to true, and rtl to false.
|
||||
let library = require('office-ui-fabric-react/lib/Utilities');
|
||||
library.setSSR(true);
|
||||
library.setRTL(false);
|
||||
|
||||
// Assume a large screen.
|
||||
let responsiveLib = require('office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode');
|
||||
responsiveLib.setResponsiveMode(responsiveLib.ResponsiveMode.large);
|
||||
```
|
||||
|
||||
You'll also want to mock out requiring `.scss` files.
|
||||
In Jest:
|
||||
|
||||
```js
|
||||
moduleNameMapper: {
|
||||
// jest-style-mock.js should just contain module.exports = {};
|
||||
'\\.(scss)$': path.resolve(__dirname, 'jest-style-mock.js'),
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced usage
|
||||
|
||||
For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our [advanced documentation](Advanced-Usage).
|
||||
|
||||
## Contribute to Fabric React
|
||||
|
||||
Please take a look at our [contribution guidelines](Contributing) for more info. Also read [Contribute Bug fixes](Bug-Fixes) and [Contribute New component](New-Component).
|
||||
Please take a look at our [contribution guidelines](Contributing) for more info. Also read [Contribute Bug fixes](Bug-Fixes) and [Contribute New component](New-Components).
|
||||
|
||||
## Building the repo
|
||||
|
||||
|
|
@ -151,6 +76,10 @@ To build individual packages within the `packages/*/` folders, you can use `npm
|
|||
|
||||
For testing see our [testing documentation](Testing).
|
||||
|
||||
## Advanced usage
|
||||
|
||||
For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our [advanced documentation](Advanced-Usage).
|
||||
|
||||
## Advanced building tips
|
||||
|
||||
The repo contains many packages, each which may have dependencies on each other. You can use the rush tool to build projects in the correct order, if you have it globally installed.
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
### Creating New Components
|
||||
* [Setting Up Local Workspace](Setting-Up-Local-Workspace)
|
||||
* [Creating the Component](New-Component)
|
||||
* [Creating the Component](New-Components)
|
||||
* [Documenting](Using-markdown-for-Fabric-documentation)
|
||||
|
||||
### Best Practices
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче