Compare commits
3 Commits
is-rendera
...
v15.0.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d1c08f11d5 | ||
|
|
40c0867f63 | ||
|
|
7081a85ace |
9
.babelrc
9
.babelrc
@@ -2,9 +2,8 @@
|
||||
"presets": ["react"],
|
||||
"ignore": ["third_party"],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"fbjs-scripts/babel-6/dev-expression",
|
||||
"syntax-trailing-function-commas",
|
||||
["transform-object-rest-spread", { "useBuiltIns": true }],
|
||||
"transform-es2015-template-literals",
|
||||
"transform-es2015-literals",
|
||||
"transform-es2015-arrow-functions",
|
||||
@@ -18,6 +17,10 @@
|
||||
["transform-es2015-spread", { "loose": true }],
|
||||
"transform-es2015-parameters",
|
||||
["transform-es2015-destructuring", { "loose": true }],
|
||||
["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
|
||||
"transform-es2015-block-scoping",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-es3-property-literals",
|
||||
"./scripts/babel/transform-object-assign-require"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
version: 2
|
||||
jobs:
|
||||
build:
|
||||
|
||||
docker:
|
||||
- image: circleci/openjdk:8-jdk-node-browsers
|
||||
|
||||
environment:
|
||||
TZ: /usr/share/zoneinfo/America/Los_Angeles
|
||||
TRAVIS_REPO_SLUG: facebook/react
|
||||
|
||||
parallelism: 4
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
|
||||
- run: echo $CIRCLE_COMPARE_URL | cut -d/ -f7
|
||||
|
||||
- restore_cache:
|
||||
name: Restore node_modules cache
|
||||
keys:
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-
|
||||
- v1-node-{{ arch }}-
|
||||
|
||||
- run:
|
||||
name: Nodejs Version
|
||||
command: node --version
|
||||
|
||||
- run:
|
||||
name: Install Packages
|
||||
command: yarn install --frozen-lockfile
|
||||
|
||||
- run:
|
||||
name: Test Packages
|
||||
command: ./scripts/circleci/test_entry_point.sh
|
||||
|
||||
- save_cache:
|
||||
name: Save node_modules cache
|
||||
key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- node_modules
|
||||
@@ -1,14 +1,16 @@
|
||||
# Third party
|
||||
**/node_modules
|
||||
|
||||
# Not written by hand
|
||||
packages/react-art/npm/lib
|
||||
|
||||
# Build products
|
||||
# We can probably lint these later but not important at this point
|
||||
src/shared/vendor
|
||||
# But not in docs/_js/examples/*
|
||||
docs/_js/*.js
|
||||
docs/js/
|
||||
docs/_site/
|
||||
# gems
|
||||
docs/vendor/bundle/
|
||||
# This should be more like examples/**/thirdparty/** but
|
||||
# we should fix https://github.com/facebook/esprima/pull/85 first
|
||||
examples/
|
||||
# Ignore built files.
|
||||
build/
|
||||
coverage/
|
||||
fixtures/
|
||||
scripts/bench/benchmarks/**/*.js
|
||||
|
||||
# React repository clone
|
||||
scripts/bench/remote-repo/
|
||||
scripts/bench/bench-*.js
|
||||
vendor/*
|
||||
|
||||
67
.eslintrc.js
67
.eslintrc.js
@@ -1,86 +1,73 @@
|
||||
'use strict';
|
||||
|
||||
const OFF = 0;
|
||||
const WARNING = 1;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: 'fbjs',
|
||||
parser: 'babel-eslint',
|
||||
|
||||
// Stop ESLint from looking for a configuration file in parent folders
|
||||
'root': true,
|
||||
extends: './node_modules/fbjs-scripts/eslint/.eslintrc.js',
|
||||
|
||||
plugins: [
|
||||
'jest',
|
||||
'no-for-of-loops',
|
||||
'react',
|
||||
'react-internal',
|
||||
],
|
||||
|
||||
ecmaFeatures: {
|
||||
modules: false
|
||||
},
|
||||
|
||||
// We're stricter than the default config, mostly. We'll override a few rules
|
||||
// and then enable some React specific ones.
|
||||
rules: {
|
||||
'accessor-pairs': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': OFF,
|
||||
'consistent-return': ERROR,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
'eqeqeq': [ERROR, 'allow-null'],
|
||||
'indent': OFF,
|
||||
'indent': [ERROR, 2, {SwitchCase: 1}],
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'keyword-spacing': [ERROR, {after: true, before: true}],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'no-useless-concat': OFF,
|
||||
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
|
||||
'quotes': [ERROR, 'single', 'avoid-escape'],
|
||||
'space-after-keywords': ERROR,
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': OFF,
|
||||
'space-before-function-paren': [ERROR, {anonymous: 'never', named: 'never'}],
|
||||
'space-before-keywords': ERROR,
|
||||
'strict': [ERROR, 'global'],
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/display-name': OFF,
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-no-undef': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-sort-prop-types': OFF,
|
||||
'react/jsx-space-before-closing': ERROR,
|
||||
'react/jsx-sort-props': OFF,
|
||||
'react/jsx-uses-react': ERROR,
|
||||
'react/no-is-mounted': OFF,
|
||||
'react/jsx-uses-vars': ERROR,
|
||||
// It's easier to test some things this way
|
||||
'react/no-did-mount-set-state': OFF,
|
||||
'react/no-did-update-set-state': OFF,
|
||||
// We define multiple components in test files
|
||||
'react/no-multi-comp': OFF,
|
||||
'react/no-unknown-property': OFF,
|
||||
// This isn't useful in our test code
|
||||
'react/prop-types': OFF,
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// Prevent for...of loops because they require a Symbol polyfill.
|
||||
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
|
||||
'no-for-of-loops/no-for-of-loops': ERROR,
|
||||
'react/sort-comp': OFF,
|
||||
'react/wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// CUSTOM RULES
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/no-primitive-constructors': ERROR,
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
},
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/__tests__/*.js'],
|
||||
rules: {
|
||||
// https://github.com/jest-community/eslint-plugin-jest
|
||||
'jest/no-focused-tests': ERROR,
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
globals: {
|
||||
spyOnDev: true,
|
||||
spyOnDevAndProd: true,
|
||||
spyOnProd: true,
|
||||
__PROFILE__: true,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"excludeGlob": [
|
||||
"node_modules/**",
|
||||
"packages/**/__mocks__/*.js",
|
||||
"packages/**/__tests__/*.js"
|
||||
],
|
||||
"includeGlob": [
|
||||
"packages/**/src/**/*.js"
|
||||
],
|
||||
"outputDir": "flow-coverage",
|
||||
"threshold": 90,
|
||||
"type": [
|
||||
"html",
|
||||
"json",
|
||||
"text"
|
||||
]
|
||||
}
|
||||
14
.github/ISSUE_TEMPLATE.md
vendored
14
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
<!--
|
||||
Note: if the issue is about documentation or the website, please file it at:
|
||||
https://github.com/reactjs/reactjs.org/issues/new
|
||||
-->
|
||||
|
||||
**Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
**What is the current behavior?**
|
||||
|
||||
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**
|
||||
|
||||
**What is the expected behavior?**
|
||||
|
||||
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
|
||||
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
**Before submitting a pull request,** please make sure the following is done:
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. Run `yarn` in the repository root.
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
|
||||
5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
|
||||
6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
|
||||
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
|
||||
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
|
||||
9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
|
||||
10. If you haven't already, complete the CLA.
|
||||
|
||||
**Learn more about contributing:** https://reactjs.org/docs/how-to-contribute.html
|
||||
17
.gitignore
vendored
17
.gitignore
vendored
@@ -1,18 +1,23 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
scripts/flow/*/.flowconfig
|
||||
*~
|
||||
*.pyc
|
||||
static
|
||||
.grunt
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
remote-repo/
|
||||
coverage/
|
||||
flow-coverage/
|
||||
.module-cache
|
||||
fixtures/dom/public/react-dom.js
|
||||
fixtures/dom/public/react.js
|
||||
*.gem
|
||||
docs/.bundle
|
||||
docs/code
|
||||
docs/_site
|
||||
docs/.sass-cache
|
||||
docs/js/*
|
||||
docs/downloads
|
||||
docs/vendor/bundle
|
||||
examples/shared/*.js
|
||||
test/the-files-to-test.generated.js
|
||||
*.log*
|
||||
chrome-user-data
|
||||
@@ -21,5 +26,3 @@ chrome-user-data
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
6
.mailmap
6
.mailmap
@@ -11,6 +11,8 @@ Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
|
||||
Ben Alpert <ben@benalpert.com> <balpert@fb.com>
|
||||
Ben Alpert <ben@benalpert.com> <spicyjalapeno@gmail.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
|
||||
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
|
||||
@@ -135,10 +137,6 @@ Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sophie Alpert <git@sophiebits.com> <balpert@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <ben@benalpert.com>
|
||||
Sophie Alpert <git@sophiebits.com> <sophiebits@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <spicyjalapeno@gmail.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
module.exports = {
|
||||
bracketSpacing: false,
|
||||
singleQuote: true,
|
||||
jsxBracketSameLine: true,
|
||||
trailingComma: 'es5',
|
||||
printWidth: 80,
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: esNextPaths,
|
||||
options: {
|
||||
trailingComma: 'all',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
101
.travis.yml
Normal file
101
.travis.yml
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
language: node_js
|
||||
node_js:
|
||||
- 4
|
||||
sudo: false
|
||||
cache:
|
||||
directories:
|
||||
- docs/vendor/bundle
|
||||
- node_modules
|
||||
before_install:
|
||||
- |
|
||||
if [ "$TEST_TYPE" != build_website ] && \
|
||||
! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
|
||||
then
|
||||
echo "Only docs were updated, stopping build process."
|
||||
exit
|
||||
fi
|
||||
npm install -g npm@latest-2
|
||||
npm --version
|
||||
script:
|
||||
- |
|
||||
if [ "$TEST_TYPE" = build_website ]; then
|
||||
if [ "$TRAVIS_BRANCH" = "$REACT_WEBSITE_BRANCH" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then
|
||||
set -e
|
||||
|
||||
GH_PAGES_DIR="$TRAVIS_BUILD_DIR"/../react-gh-pages
|
||||
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
|
||||
git config --global user.name "Travis CI"
|
||||
git config --global user.email "travis@reactjs.org"
|
||||
|
||||
git clone --branch gh-pages --depth=50 \
|
||||
https://reactjs-bot@github.com/facebook/react.git \
|
||||
$GH_PAGES_DIR
|
||||
pushd docs
|
||||
bundle install --jobs=3 --retry=3 --path=vendor/bundle
|
||||
bundle exec rake release
|
||||
cd $GH_PAGES_DIR
|
||||
git status
|
||||
if ! git diff-index --quiet HEAD --; then
|
||||
git add -A .
|
||||
git commit -m "Rebuild website"
|
||||
git push origin gh-pages
|
||||
fi
|
||||
popd
|
||||
fi
|
||||
elif [ "$TEST_TYPE" = build ]; then
|
||||
if [ "$SERVER" ]; then
|
||||
set -e
|
||||
./node_modules/.bin/grunt build
|
||||
curl \
|
||||
-F "react=@build/react.js" \
|
||||
-F "react.min=@build/react.min.js" \
|
||||
-F "react-with-addons=@build/react-with-addons.js" \
|
||||
-F "react-with-addons.min=@build/react-with-addons.min.js" \
|
||||
-F "react-dom=@build/react-dom.js" \
|
||||
-F "react-dom.min=@build/react-dom.min.js" \
|
||||
-F "react-dom-server=@build/react-dom-server.js" \
|
||||
-F "react-dom-server.min=@build/react-dom-server.min.js" \
|
||||
-F "npm-react=@build/packages/react.tgz" \
|
||||
-F "npm-react-dom=@build/packages/react-dom.tgz" \
|
||||
-F "commit=$TRAVIS_COMMIT" \
|
||||
-F "date=`git log --format='%ct' -1`" \
|
||||
-F "pull_request=$TRAVIS_PULL_REQUEST" \
|
||||
-F "token=$SECRET_TOKEN" \
|
||||
-F "branch=$TRAVIS_BRANCH" \
|
||||
$SERVER
|
||||
fi
|
||||
elif [ "$TEST_TYPE" = test ]; then
|
||||
set -e
|
||||
./node_modules/.bin/grunt jest:normal
|
||||
echo 'Testing in server-render (HTML generation) mode...'
|
||||
printf '\nmodule.exports.useCreateElement = false;\n' \
|
||||
>> src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
./node_modules/.bin/grunt jest:normal
|
||||
git checkout -- src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
else
|
||||
./node_modules/.bin/grunt $TEST_TYPE
|
||||
fi
|
||||
env:
|
||||
matrix:
|
||||
- TEST_TYPE=build
|
||||
- TEST_TYPE=test
|
||||
- TEST_TYPE=lint
|
||||
- TEST_TYPE=build_website
|
||||
global:
|
||||
# SERVER
|
||||
- secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
|
||||
# SECRET_TOKEN
|
||||
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
|
||||
# GITHUB_TOKEN
|
||||
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
|
||||
# COVERALLS_TOKEN
|
||||
- secure: h/cUq+TrUMZOQmkFD7CvuwX0uAwmjIfKZ4qSUzY+QzUtDzOzA0L/XF84xTBq1Q5YYsEiaoF6GxxGCdrLQiBA/ZTd+88UHgeZPMRvi0xG9Q+PeePVOsZMTxy4/WWFgOfSQCk49Mj9zizGgO78i6vxq+SDXMtFHnZ+TpPJIEW6/m0=
|
||||
notifications:
|
||||
irc:
|
||||
use_notice: true
|
||||
skip_join: true
|
||||
on_success: change
|
||||
on_failure: change
|
||||
channels:
|
||||
- chat.freenode.net#reactjs
|
||||
834
CHANGELOG.md
834
CHANGELOG.md
@@ -1,795 +1,3 @@
|
||||
## [Unreleased]
|
||||
<details>
|
||||
<summary>
|
||||
Changes that have landed in master but are not yet released.
|
||||
Click to see more.
|
||||
</summary>
|
||||
|
||||
</details>
|
||||
|
||||
## 16.4.1 (June 13, 2018)
|
||||
|
||||
### React
|
||||
|
||||
* You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn](https://github.com/bvaughn) in [#12911](https://github.com/facebook/react/pull/12911))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd](https://github.com/spirosikmd) in [#12135](https://github.com/facebook/react/pull/12135))
|
||||
* Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang](https://github.com/ThaddeusJiang) in [#12996](https://github.com/facebook/react/pull/12996))
|
||||
* Fix a range input not updating in some cases. ([@Illu](https://github.com/Illu) in [#12939](https://github.com/facebook/react/pull/12939))
|
||||
* Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker](https://github.com/nhunzaker) in [#12925](https://github.com/facebook/react/pull/12925))
|
||||
* Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker](https://github.com/nhunzaker) in [#12976](https://github.com/facebook/react/pull/12976))
|
||||
* Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12966](https://github.com/facebook/react/pull/12966))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Fix an incorrect value being provided by new context API. ([@ericsoderberghp](https://github.com/ericsoderberghp) in [#12985](https://github.com/facebook/react/pull/12985), [@gaearon](https://github.com/gaearon) in [#13019](https://github.com/facebook/react/pull/13019))
|
||||
|
||||
### React Test Renderer
|
||||
|
||||
* Allow multiple root children in test renderer traversal API. ([@gaearon](https://github.com/gaearon) in [#13017](https://github.com/facebook/react/pull/13017))
|
||||
* Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz](https://github.com/fatfisz) in [#13030](https://github.com/facebook/react/pull/13030))
|
||||
|
||||
## 16.4.0 (May 23, 2018)
|
||||
|
||||
### React
|
||||
|
||||
* Add a new [experimental](https://github.com/reactjs/rfcs/pull/51) `React.unstable_Profiler` component for measuring performance. ([@bvaughn](https://github.com/bvaughn) in [#12745](https://github.com/facebook/react/pull/12745))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Add support for the Pointer Events specification. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12507](https://github.com/facebook/react/pull/12507))
|
||||
* Properly call `getDerivedStateFromProps()` regardless of the reason for re-rendering. ([@acdlite](https://github.com/acdlite) in [#12600](https://github.com/facebook/react/pull/12600) and [#12802](https://github.com/facebook/react/pull/12802))
|
||||
* Fix a bug that prevented context propagation in some cases. ([@gaearon](https://github.com/gaearon) in [#12708](https://github.com/facebook/react/pull/12708))
|
||||
* Fix re-rendering of components using `forwardRef()` on a deeper `setState()`. ([@gaearon](https://github.com/gaearon) in [#12690](https://github.com/facebook/react/pull/12690))
|
||||
* Fix some attributes incorrectly getting removed from custom element nodes. ([@airamrguez](https://github.com/airamrguez) in [#12702](https://github.com/facebook/react/pull/12702))
|
||||
* Fix context providers to not bail out on children if there's a legacy context provider above. ([@gaearon](https://github.com/gaearon) in [#12586](https://github.com/facebook/react/pull/12586))
|
||||
* Add the ability to specify `propTypes` on a context provider component. ([@nicolevy](https://github.com/nicolevy) in [#12658](https://github.com/facebook/react/pull/12658))
|
||||
* Fix a false positive warning when using `react-lifecycles-compat` in `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
|
||||
* Warn when the `forwardRef()` render function has `propTypes` or `defaultProps`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
|
||||
* Improve how `forwardRef()` and context consumers are displayed in the component stack. ([@sophiebits](https://github.com/sophiebits) in [#12777](https://github.com/facebook/react/pull/12777))
|
||||
* Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12629](https://github.com/facebook/react/pull/12629))
|
||||
|
||||
### React Test Renderer
|
||||
|
||||
* Fix the `getDerivedStateFromProps()` support to match the new React DOM behavior. ([@koba04](https://github.com/koba04) in [#12676](https://github.com/facebook/react/pull/12676))
|
||||
* Fix a `testInstance.parent` crash when the parent is a fragment or another special node. ([@gaearon](https://github.com/gaearon) in [#12813](https://github.com/facebook/react/pull/12813))
|
||||
* `forwardRef()` components are now discoverable by the test renderer traversal methods. ([@gaearon](https://github.com/gaearon) in [#12725](https://github.com/facebook/react/pull/12725))
|
||||
* Shallow renderer now ignores `setState()` updaters that return `null` or `undefined`. ([@koba04](https://github.com/koba04) in [#12756](https://github.com/facebook/react/pull/12756))
|
||||
|
||||
### React ART
|
||||
|
||||
* Fix reading context provided from the tree managed by React DOM. ([@acdlite](https://github.com/acdlite) in [#12779](https://github.com/facebook/react/pull/12779))
|
||||
|
||||
### React Call Return (Experimental)
|
||||
|
||||
* This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. ([@gaearon](https://github.com/gaearon) in [#12820](https://github.com/facebook/react/pull/12820))
|
||||
|
||||
### React Reconciler (Experimental)
|
||||
|
||||
* The [new host config shape](https://github.com/facebook/react/blob/c601f7a64640290af85c9f0e33c78480656b46bc/packages/react-noop-renderer/src/createReactNoop.js#L82-L285) is flat and doesn't use nested objects. ([@gaearon](https://github.com/gaearon) in [#12792](https://github.com/facebook/react/pull/12792))
|
||||
|
||||
## 16.3.2 (April 16, 2018)
|
||||
|
||||
### React
|
||||
|
||||
* Improve the error message when passing `null` or `undefined` to `React.cloneElement`. ([@nicolevy](https://github.com/nicolevy) in [#12534](https://github.com/facebook/react/pull/12534))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix an IE crash in development when using `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12546](https://github.com/facebook/react/pull/12546))
|
||||
* Fix labels in User Timing measurements for new component types. ([@bvaughn](https://github.com/bvaughn) in [#12609](https://github.com/facebook/react/pull/12609))
|
||||
* Improve the warning about wrong component type casing. ([@nicolevy](https://github.com/nicolevy) in [#12533](https://github.com/facebook/react/pull/12533))
|
||||
* Improve general performance in development mode. ([@gaearon](https://github.com/gaearon) in [#12537](https://github.com/facebook/react/pull/12537))
|
||||
* Improve performance of the experimental `unstable_observedBits` API with nesting. ([@gaearon](https://github.com/gaearon) in [#12543](https://github.com/facebook/react/pull/12543))
|
||||
|
||||
### React Test Renderer
|
||||
|
||||
* Add a UMD build. ([@bvaughn](https://github.com/bvaughn) in [#12594](https://github.com/facebook/react/pull/12594))
|
||||
|
||||
## 16.3.1 (April 3, 2018)
|
||||
|
||||
### React
|
||||
|
||||
* Fix a false positive warning in IE11 when using `Fragment`. ([@heikkilamarko](https://github.com/heikkilamarko) in [#12504](https://github.com/facebook/react/pull/12504))
|
||||
* Prefix a private API. ([@Andarist](https://github.com/Andarist) in [#12501](https://github.com/facebook/react/pull/12501))
|
||||
* Improve the warning when calling `setState()` in constructor. ([@gaearon](https://github.com/gaearon) in [#12532](https://github.com/facebook/react/pull/12532))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix `getDerivedStateFromProps()` not getting applied in some cases. ([@acdlite](https://github.com/acdlite) in [#12528](https://github.com/facebook/react/pull/12528))
|
||||
* Fix a performance regression in development mode. ([@gaearon](https://github.com/gaearon) in [#12510](https://github.com/facebook/react/pull/12510))
|
||||
* Fix error handling bugs in development mode. ([@gaearon](https://github.com/gaearon) and [@acdlite](https://github.com/acdlite) in [#12508](https://github.com/facebook/react/pull/12508))
|
||||
* Improve user timing API messages for profiling. ([@flarnie](https://github.com/flarnie) in [#12384](https://github.com/facebook/react/pull/12384))
|
||||
|
||||
### Create Subscription
|
||||
|
||||
* Set the package version to be in sync with React releases. ([@bvaughn](https://github.com/bvaughn) in [#12526](https://github.com/facebook/react/pull/12526))
|
||||
* Add a peer dependency on React 16.3+. ([@NMinhNguyen](https://github.com/NMinhNguyen) in [#12496](https://github.com/facebook/react/pull/12496))
|
||||
|
||||
## 16.3.0 (March 29, 2018)
|
||||
|
||||
### React
|
||||
|
||||
* Add a new officially supported context API. ([@acdlite](https://github.com/acdlite) in [#11818](https://github.com/facebook/react/pull/11818))
|
||||
* Add a new `React.createRef()` API as an ergonomic alternative to callback refs. ([@trueadm](https://github.com/trueadm) in [#12162](https://github.com/facebook/react/pull/12162))
|
||||
* Add a new `React.forwardRef()` API to let components forward their refs to a child. ([@bvaughn](https://github.com/bvaughn) in [#12346](https://github.com/facebook/react/pull/12346))
|
||||
* Fix a false positive warning in IE11 when using `React.Fragment`. ([@XaveScor](https://github.com/XaveScor) in [#11823](https://github.com/facebook/react/pull/11823))
|
||||
* Replace `React.unstable_AsyncComponent` with `React.unstable_AsyncMode`. ([@acdlite](https://github.com/acdlite) in [#12117](https://github.com/facebook/react/pull/12117))
|
||||
* Improve the error message when calling `setState()` on an unmounted component. ([@sophiebits](https://github.com/sophiebits) in [#12347](https://github.com/facebook/react/pull/12347))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Add a new `getDerivedStateFromProps()` lifecycle and `UNSAFE_` aliases for the legacy lifecycles. ([@bvaughn](https://github.com/bvaughn) in [#12028](https://github.com/facebook/react/pull/12028))
|
||||
* Add a new `getSnapshotBeforeUpdate()` lifecycle. ([@bvaughn](https://github.com/bvaughn) in [#12404](https://github.com/facebook/react/pull/12404))
|
||||
* Add a new `<React.StrictMode>` wrapper to help prepare apps for async rendering. ([@bvaughn](https://github.com/bvaughn) in [#12083](https://github.com/facebook/react/pull/12083))
|
||||
* Add support for `onLoad` and `onError` events on the `<link>` tag. ([@roderickhsiao](https://github.com/roderickhsiao) in [#11825](https://github.com/facebook/react/pull/11825))
|
||||
* Add support for `noModule` boolean attribute on the `<script>` tag. ([@aweary](https://github.com/aweary) in [#11900](https://github.com/facebook/react/pull/11900))
|
||||
* Fix minor DOM input bugs in IE and Safari. ([@nhunzaker](https://github.com/nhunzaker) in [#11534](https://github.com/facebook/react/pull/11534))
|
||||
* Correctly detect Ctrl + Enter in `onKeyPress` in more browsers. ([@nstraub](https://github.com/nstraub) in [#10514](https://github.com/facebook/react/pull/10514))
|
||||
* Fix containing elements getting focused on SSR markup mismatch. ([@koba04](https://github.com/koba04) in [#11737](https://github.com/facebook/react/pull/11737))
|
||||
* Fix `value` and `defaultValue` to ignore Symbol values. ([@nhunzaker](https://github.com/nhunzaker) in [#11741](https://github.com/facebook/react/pull/11741))
|
||||
* Fix refs to class components not getting cleaned up when the attribute is removed. ([@bvaughn](https://github.com/bvaughn) in [#12178](https://github.com/facebook/react/pull/12178))
|
||||
* Fix an IE/Edge issue when rendering inputs into a different window. ([@M-ZubairAhmed](https://github.com/M-ZubairAhmed) in [#11870](https://github.com/facebook/react/pull/11870))
|
||||
* Throw with a meaningful message if the component runs after jsdom has been destroyed. ([@gaearon](https://github.com/gaearon) in [#11677](https://github.com/facebook/react/pull/11677))
|
||||
* Don't crash if there is a global variable called `opera` with a `null` value. [@alisherdavronov](https://github.com/alisherdavronov) in [#11854](https://github.com/facebook/react/pull/11854))
|
||||
* Don't check for old versions of Opera. ([@skiritsis](https://github.com/skiritsis) in [#11921](https://github.com/facebook/react/pull/11921))
|
||||
* Deduplicate warning messages about `<option selected>`. ([@watadarkstar](https://github.com/watadarkstar) in [#11821](https://github.com/facebook/react/pull/11821))
|
||||
* Deduplicate warning messages about invalid callback. ([@yenshih](https://github.com/yenshih) in [#11833](https://github.com/facebook/react/pull/11833))
|
||||
* Deprecate `ReactDOM.unstable_createPortal()` in favor of `ReactDOM.createPortal()`. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#11747](https://github.com/facebook/react/pull/11747))
|
||||
* Don't emit User Timing entries for context types. ([@abhaynikam](https://github.com/abhaynikam) in [#12250](https://github.com/facebook/react/pull/12250))
|
||||
* Improve the error message when context consumer child isn't a function. ([@raunofreiberg](https://github.com/raunofreiberg) in [#12267](https://github.com/facebook/react/pull/12267))
|
||||
* Improve the error message when adding a ref to a functional component. ([@skiritsis](https://github.com/skiritsis) in [#11782](https://github.com/facebook/react/pull/11782))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Prevent an infinite loop when attempting to render portals with SSR. ([@gaearon](https://github.com/gaearon) in [#11709](https://github.com/facebook/react/pull/11709))
|
||||
* Warn if a class doesn't extend `React.Component`. ([@wyze](https://github.com/wyze) in [#11993](https://github.com/facebook/react/pull/11993))
|
||||
* Fix an issue with `this.state` of different components getting mixed up. ([@sophiebits](https://github.com/sophiebits) in [#12323](https://github.com/facebook/react/pull/12323))
|
||||
* Provide a better message when component type is undefined. ([@HeroProtagonist](https://github.com/HeroProtagonist) in [#11966](https://github.com/facebook/react/pull/11966))
|
||||
|
||||
## React Test Renderer
|
||||
|
||||
* Fix handling of fragments in `toTree()`. ([@maciej-ka](https://github.com/maciej-ka) in [#12107](https://github.com/facebook/react/pull/12107) and [@gaearon](https://github.com/gaearon) in [#12154](https://github.com/facebook/react/pull/12154))
|
||||
* Shallow renderer should assign state to `null` for components that don't set it. ([@jwbay](https://github.com/jwbay) in [#11965](https://github.com/facebook/react/pull/11965))
|
||||
* Shallow renderer should filter legacy context according to `contextTypes`. ([@koba04](https://github.com/koba04) in [#11922](https://github.com/facebook/react/pull/11922))
|
||||
* Add an unstable API for testing asynchronous rendering. ([@acdlite](https://github.com/acdlite) in [#12478](https://github.com/facebook/react/pull/12478))
|
||||
|
||||
### React Is (New)
|
||||
|
||||
* First release of the [new package](https://github.com/facebook/react/tree/master/packages/react-is) that libraries can use to detect different React node types. ([@bvaughn](https://github.com/bvaughn) in [#12199](https://github.com/facebook/react/pull/12199))
|
||||
* Add `ReactIs.isValidElementType()` to help higher-order components validate their inputs. ([@jamesreggio](https://github.com/jamesreggio) in [#12483](https://github.com/facebook/react/pull/12483))
|
||||
|
||||
### React Lifecycles Compat (New)
|
||||
|
||||
* First release of the [new package](https://github.com/reactjs/react-lifecycles-compat) to help library developers target multiple versions of React. ([@bvaughn](https://github.com/bvaughn) in [#12105](https://github.com/facebook/react/pull/12105))
|
||||
|
||||
### Create Subscription (New)
|
||||
|
||||
* First release of the [new package](https://github.com/facebook/react/tree/master/packages/create-subscription) to subscribe to external data sources safely for async rendering. ([@bvaughn](https://github.com/bvaughn) in [#12325](https://github.com/facebook/react/pull/12325))
|
||||
|
||||
### React Reconciler (Experimental)
|
||||
|
||||
* Expose `react-reconciler/persistent` for building renderers that use persistent data structures. ([@gaearon](https://github.com/gaearon) in [#12156](https://github.com/facebook/react/pull/12156))
|
||||
* Pass host context to `finalizeInitialChildren()`. ([@jquense](https://github.com/jquense) in [#11970](https://github.com/facebook/react/pull/11970))
|
||||
* Remove `useSyncScheduling` from the host config. ([@acdlite](https://github.com/acdlite) in [#11771](https://github.com/facebook/react/pull/11771))
|
||||
|
||||
### React Call Return (Experimental)
|
||||
|
||||
* Fix a crash on updates. ([@rmhartog](https://github.com/rmhartog) in [#11955](https://github.com/facebook/react/pull/11955))
|
||||
|
||||
## 16.2.0 (November 28, 2017)
|
||||
|
||||
### React
|
||||
|
||||
* Add `Fragment` as named export to React. ([@clemmy](https://github.com/clemmy) in [#10783](https://github.com/facebook/react/pull/10783))
|
||||
* Support experimental Call/Return types in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11422](https://github.com/facebook/react/pull/11422))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix radio buttons not getting checked when using multiple lists of radios. ([@landvibe](https://github.com/landvibe) in [#11227](https://github.com/facebook/react/pull/11227))
|
||||
* Fix radio buttons not receiving the `onChange` event in some cases. ([@jquense](https://github.com/jquense) in [#11028](https://github.com/facebook/react/pull/11028))
|
||||
|
||||
### React Test Renderer
|
||||
|
||||
* Fix `setState()` callback firing too early when called from `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) in [#11507](https://github.com/facebook/react/pull/11507))
|
||||
|
||||
### React Reconciler
|
||||
|
||||
* Expose `react-reconciler/reflection` with utilities useful to custom renderers. ([@rivenhk](https://github.com/rivenhk) in [#11683](https://github.com/facebook/react/pull/11683))
|
||||
|
||||
### Internal Changes
|
||||
|
||||
* Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
|
||||
|
||||
## 16.1.1 (November 13, 2017)
|
||||
|
||||
### React
|
||||
|
||||
* Improve the warning about undefined component type. ([@selbekk](https://github.com/selbekk) in [#11505](https://github.com/facebook/react/pull/11505))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Support string values for the `capture` attribute. ([@maxschmeling](https://github.com/maxschmeling) in [#11424](https://github.com/facebook/react/pull/11424))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Don't freeze the `ReactDOMServer` public API. ([@travi](https://github.com/travi) in [#11531](https://github.com/facebook/react/pull/11531))
|
||||
* Don't emit `autoFocus={false}` attribute on the server. ([@gaearon](https://github.com/gaearon) in [#11543](https://github.com/facebook/react/pull/11543))
|
||||
|
||||
### React Reconciler
|
||||
|
||||
* Change the hydration API for better Flow typing. ([@sebmarkbage](https://github.com/sebmarkbage) in [#11493](https://github.com/facebook/react/pull/11493))
|
||||
|
||||
## 16.1.0 (November 9, 2017)
|
||||
|
||||
### Discontinuing Bower Releases
|
||||
|
||||
Starting with 16.1.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your Bower configs to the [React UMD builds hosted on unpkg](https://reactjs.org/docs/installation.html#using-a-cdn) that mirror npm releases and will continue to be updated.
|
||||
|
||||
### All Packages
|
||||
|
||||
* Fix an accidental extra global variable in the UMD builds. ([@gaearon](https://github.com/gaearon) in [#10935](https://github.com/facebook/react/pull/10935))
|
||||
|
||||
### React
|
||||
|
||||
* Add support for portals in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11378](https://github.com/facebook/react/pull/11378))
|
||||
* Warn when a class has a `render` method but doesn't extend a known base class. ([@sw-yx](https://github.com/sw-yx) in [#11168](https://github.com/facebook/react/pull/11168))
|
||||
* Improve the warning when accidentally returning an object from constructor. ([@deanbrophy](https://github.com/deanbrophy) in [#11395](https://github.com/facebook/react/pull/11395))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Allow `on` as a custom attribute for AMP. ([@nuc](https://github.com/nuc) in [#11153](https://github.com/facebook/react/pull/11153))
|
||||
* Fix `onMouseEnter` and `onMouseLeave` firing on wrong elements. ([@gaearon](https://github.com/gaearon) in [#11164](https://github.com/facebook/react/pull/11164))
|
||||
* Fix `null` showing up in a warning instead of the component stack. ([@gaearon](https://github.com/gaearon) in [#10915](https://github.com/facebook/react/pull/10915))
|
||||
* Fix IE11 crash in development mode. ([@leidegre](https://github.com/leidegre) in [#10921](https://github.com/facebook/react/pull/10921))
|
||||
* Fix `tabIndex` not getting applied to SVG elements. ([@gaearon](https://github.com/gaearon) in [#11034](https://github.com/facebook/react/pull/11034))
|
||||
* Fix SVG children not getting cleaned up on `dangerouslySetInnerHTML` in IE. ([@OriR](https://github.com/OriR) in [#11108](https://github.com/facebook/react/pull/11108))
|
||||
* Fix false positive text mismatch warning caused by newline normalization. ([@gaearon](https://github.com/gaearon) in [#11119](https://github.com/facebook/react/pull/11119))
|
||||
* Fix `form.reset()` to respect `defaultValue` on uncontrolled `<select>`. ([@aweary](https://github.com/aweary) in [#11057](https://github.com/facebook/react/pull/11057))
|
||||
* Fix `<textarea>` placeholder not rendering on IE11. ([@gaearon](https://github.com/gaearon) in [#11177](https://github.com/facebook/react/pull/11177))
|
||||
* Fix a crash rendering into shadow root. ([@gaearon](https://github.com/gaearon) in [#11037](https://github.com/facebook/react/pull/11037))
|
||||
* Fix false positive warning about hydrating mixed case SVG tags. ([@gaearon](https://github.com/gaearon) in [#11174](https://github.com/facebook/react/pull/11174))
|
||||
* Suppress the new unknown tag warning for `<dialog>` element. ([@gaearon](https://github.com/gaearon) in [#11035](https://github.com/facebook/react/pull/11035))
|
||||
* Warn when defining a non-existent `componentDidReceiveProps` method. ([@iamtommcc](https://github.com/iamtommcc) in [#11479](https://github.com/facebook/react/pull/11479))
|
||||
* Warn about function child no more than once. ([@andreysaleba](https://github.com/andreysaleba) in [#11120](https://github.com/facebook/react/pull/11120))
|
||||
* Warn about nested updates no more than once. ([@anushreesubramani](https://github.com/anushreesubramani) in [#11113](https://github.com/facebook/react/pull/11113))
|
||||
* Deduplicate other warnings about updates. ([@anushreesubramani](https://github.com/anushreesubramani) in [#11216](https://github.com/facebook/react/pull/11216))
|
||||
* Include component stack into the warning about `contentEditable` and `children`. ([@Ethan-Arrowood](https://github.com/Ethan-Arrowood) in [#11208](https://github.com/facebook/react/pull/11208))
|
||||
* Improve the warning about booleans passed to event handlers. ([@NicBonetto](https://github.com/NicBonetto) in [#11308](https://github.com/facebook/react/pull/11308))
|
||||
* Improve the warning when a multiple `select` gets null `value`. ([@Hendeca](https://github.com/Hendeca) in [#11141](https://github.com/facebook/react/pull/11141))
|
||||
* Move link in the warning message to avoid redirect. ([@marciovicente](https://github.com/marciovicente) in [#11400](https://github.com/facebook/react/pull/11400))
|
||||
* Add a way to suppress the React DevTools installation prompt. ([@gaearon](https://github.com/gaearon) in [#11448](https://github.com/facebook/react/pull/11448))
|
||||
* Remove unused code. ([@gaearon](https://github.com/gaearon) in [#10802](https://github.com/facebook/react/pull/10802), [#10803](https://github.com/facebook/react/pull/10803))
|
||||
|
||||
### React DOM Server
|
||||
|
||||
* Add a new `suppressHydrationWarning` attribute for intentional client/server text mismatches. ([@sebmarkbage](https://github.com/sebmarkbage) in [#11126](https://github.com/facebook/react/pull/11126))
|
||||
* Fix markup generation when components return strings. ([@gaearon](https://github.com/gaearon) in [#11109](https://github.com/facebook/react/pull/11109))
|
||||
* Fix obscure error message when passing an invalid style value. ([@iamdustan](https://github.com/iamdustan) in [#11173](https://github.com/facebook/react/pull/11173))
|
||||
* Include the `autoFocus` attribute into SSR markup. ([@gaearon](https://github.com/gaearon) in [#11192](https://github.com/facebook/react/pull/11192))
|
||||
* Include the component stack into more warnings. ([@gaearon](https://github.com/gaearon) in [#11284](https://github.com/facebook/react/pull/11284))
|
||||
|
||||
### React Test Renderer and Test Utils
|
||||
|
||||
* Fix multiple `setState()` calls in `componentWillMount()` in shallow renderer. ([@Hypnosphi](https://github.com/Hypnosphi) in [#11167](https://github.com/facebook/react/pull/11167))
|
||||
* Fix shallow renderer to ignore `shouldComponentUpdate()` after `forceUpdate()`. ([@d4rky-pl](https://github.com/d4rky-pl) in [#11239](https://github.com/facebook/react/pull/11239) and [#11439](https://github.com/facebook/react/pull/11439))
|
||||
* Handle `forceUpdate()` and `React.PureComponent` correctly. ([@koba04](https://github.com/koba04) in [#11440](https://github.com/facebook/react/pull/11440))
|
||||
* Add back support for running in production mode. ([@gaearon](https://github.com/gaearon) in [#11112](https://github.com/facebook/react/pull/11112))
|
||||
* Add a missing `package.json` dependency. ([@gaearon](https://github.com/gaearon) in [#11340](https://github.com/facebook/react/pull/11340))
|
||||
|
||||
### React ART
|
||||
|
||||
* Add a missing `package.json` dependency. ([@gaearon](https://github.com/gaearon) in [#11341](https://github.com/facebook/react/pull/11341))
|
||||
* Expose `react-art/Circle`, `react-art/Rectangle`, and `react-art/Wedge`. ([@gaearon](https://github.com/gaearon) in [#11343](https://github.com/facebook/react/pull/11343))
|
||||
|
||||
### React Reconciler (Experimental)
|
||||
|
||||
* First release of the [new experimental package](https://github.com/facebook/react/blob/master/packages/react-reconciler/README.md) for creating custom renderers. ([@iamdustan](https://github.com/iamdustan) in [#10758](https://github.com/facebook/react/pull/10758))
|
||||
* Add support for React DevTools. ([@gaearon](https://github.com/gaearon) in [#11463](https://github.com/facebook/react/pull/11463))
|
||||
|
||||
### React Call Return (Experimental)
|
||||
|
||||
* First release of the [new experimental package](https://github.com/facebook/react/tree/master/packages/react-call-return) for parent-child communication. ([@gaearon](https://github.com/gaearon) in [#11364](https://github.com/facebook/react/pull/11364))
|
||||
|
||||
## 16.0.0 (September 26, 2017)
|
||||
|
||||
### New JS Environment Requirements
|
||||
|
||||
* React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), as well as [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). If you support older browsers and devices which may not yet provide these natively (e.g. <IE11), [you may want to include a polyfill](https://gist.github.com/gaearon/9a4d54653ae9c50af6c54b4e0e56b583).
|
||||
|
||||
### New Features
|
||||
* Components can now return arrays and strings from `render`. (Docs coming soon!)
|
||||
* Improved error handling with introduction of "error boundaries". [Error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
|
||||
* First-class support for declaratively rendering a subtree into another DOM node with `ReactDOM.createPortal()`. (Docs coming soon!)
|
||||
* Streaming mode for server side rendering is enabled with `ReactDOMServer.renderToNodeStream()` and `ReactDOMServer.renderToStaticNodeStream()`. ([@aickin](https://github.com/aickin) in [#10425](https://github.com/facebook/react/pull/10425), [#10044](https://github.com/facebook/react/pull/10044), [#10039](https://github.com/facebook/react/pull/10039), [#10024](https://github.com/facebook/react/pull/10024), [#9264](https://github.com/facebook/react/pull/9264), and others.)
|
||||
* [React DOM now allows passing non-standard attributes](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
|
||||
### Breaking Changes
|
||||
- There are several changes to the behavior of scheduling and lifecycle methods:
|
||||
* `ReactDOM.render()` and `ReactDOM.unstable_renderIntoContainer()` now return `null` if called from inside a lifecycle method.
|
||||
* To work around this, you can either use [the new portal API](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635).
|
||||
* Minor changes to `setState` behavior:
|
||||
* Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
|
||||
* Calling `setState` directly in render always causes an update. This was not previously the case. Regardless, you should not be calling `setState` from render.
|
||||
* `setState` callback (second argument) now fires immediately after `componentDidMount` / `componentDidUpdate` instead of after all components have rendered.
|
||||
* When replacing `<A />` with `<B />`, `B.componentWillMount` now always happens before `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
|
||||
* Previously, changing the `ref` to a component would always detach the ref before that component's render is called. Now, we change the `ref` later, when applying the changes to the DOM.
|
||||
* It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
|
||||
* `componentDidUpdate` lifecycle no longer receives `prevContext` param. ([@bvaughn](https://github.com/bvaughn) in [#8631](https://github.com/facebook/react/pull/8631))
|
||||
* Non-unique keys may now cause children to be duplicated and/or omitted. Using non-unique keys is not (and has never been) supported, but previously it was a hard error.
|
||||
* Shallow renderer no longer calls `componentDidUpdate()` because DOM refs are not available. This also makes it consistent with `componentDidMount()` (which does not get called in previous versions either).
|
||||
* Shallow renderer does not implement `unstable_batchedUpdates()` anymore.
|
||||
* `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback.
|
||||
- The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
|
||||
- `react/dist/react.js` → `react/umd/react.development.js`
|
||||
- `react/dist/react.min.js` → `react/umd/react.production.min.js`
|
||||
- `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js`
|
||||
- `react-dom/dist/react-dom.min.js` → `react-dom/umd/react-dom.production.min.js`
|
||||
* The server renderer has been completely rewritten, with some improvements:
|
||||
* Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. It also doesn't use comments for empty components and data-reactid attributes on each node anymore.
|
||||
* Hydrating a server rendered container now has an explicit API. Use `ReactDOM.hydrate` instead of `ReactDOM.render` if you're reviving server rendered HTML. Keep using `ReactDOM.render` if you're just doing client-side rendering.
|
||||
* When "unknown" props are passed to DOM components, for valid values, React will now render them in the DOM. [See this post for more details.](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html) ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
* Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add [error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) to the appropriate places in the UI.
|
||||
|
||||
### Removed Deprecations
|
||||
|
||||
- There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
|
||||
- The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as create-react-class, `React.PropTypes` as prop-types, `React.DOM` as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
|
||||
|
||||
## 15.6.2 (September 25, 2017)
|
||||
|
||||
### All Packages
|
||||
* Switch from BSD + Patents to MIT license
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix a bug where modifying `document.documentMode` would trigger IE detection in other browsers, breaking change events. ([@aweary](https://github.com/aweary) in [#10032](https://github.com/facebook/react/pull/10032))
|
||||
* CSS Columns are treated as unitless numbers. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/10115))
|
||||
* Fix bug in QtWebKit when wrapping synthetic events in proxies. ([@walrusfruitcake](https://github.com/walrusfruitcake) in [#10115](https://github.com/facebook/react/pull/10011))
|
||||
* Prevent event handlers from receiving extra argument in development. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/8363))
|
||||
* Fix cases where `onChange` would not fire with `defaultChecked` on radio inputs. ([@jquense](https://github.com/jquense) in [#10156](https://github.com/facebook/react/pull/10156))
|
||||
* Add support for `controlList` attribute to DOM property whitelist ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
|
||||
* Fix a bug where creating an element with a ref in a constructor did not throw an error in development. ([@iansu](https://github.com/iansu) in [#10025](https://github.com/facebook/react/pull/10025))
|
||||
|
||||
## 15.6.1 (June 14, 2017)
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fix a crash on iOS Safari. ([@jquense](https://github.com/jquense) in [#9960](https://github.com/facebook/react/pull/9960))
|
||||
* Don't add `px` to custom CSS property values. ([@TrySound](https://github.com/TrySound) in [#9966](https://github.com/facebook/react/pull/9966))
|
||||
|
||||
## 15.6.0 (June 13, 2017)
|
||||
|
||||
### React
|
||||
|
||||
* Downgrade deprecation warnings to use `console.warn` instead of `console.error`. ([@flarnie](https://github.com/flarnie) in [#9753](https://github.com/facebook/react/pull/9753))
|
||||
* Add a deprecation warning for `React.createClass`. Points users to `create-react-class` instead. ([@flarnie](https://github.com/flarnie) in [#9771](https://github.com/facebook/react/pull/9771))
|
||||
* Add deprecation warnings and separate module for `React.DOM` factory helpers. ([@nhunzaker](https://github.com/nhunzaker) in [#8356](https://github.com/facebook/react/pull/8356))
|
||||
* Warn for deprecation of `React.createMixin` helper, which was never used. ([@aweary](https://github.com/aweary) in [#8853](https://github.com/facebook/react/pull/8853))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Add support for CSS variables in `style` attribute. ([@aweary](https://github.com/aweary) in [#9302](https://github.com/facebook/react/pull/9302))
|
||||
* Add support for CSS Grid style properties. ([@ericsakmar](https://github.com/ericsakmar) in [#9185](https://github.com/facebook/react/pull/9185))
|
||||
* Fix bug where inputs mutated value on type conversion. ([@nhunzaker](https://github.com/mhunzaker) in [#9806](https://github.com/facebook/react/pull/9806))
|
||||
* Fix issues with `onChange` not firing properly for some inputs. ([@jquense](https://github.com/jquense) in [#8575](https://github.com/facebook/react/pull/8575))
|
||||
* Fix bug where controlled number input mistakenly allowed period. ([@nhunzaker](https://github.com/nhunzaker) in [#9584](https://github.com/facebook/react/pull/9584))
|
||||
* Fix bug where performance entries were being cleared. ([@chrisui](https://github.com/chrisui) in [#9451](https://github.com/facebook/react/pull/9451))
|
||||
|
||||
### React Addons
|
||||
|
||||
* Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919))
|
||||
* Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638))
|
||||
* Fix `react-addons-update` to not depend on native `Object.assign`. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
|
||||
* Remove broken Google Closure Compiler annotation from `create-react-class`. ([@gaearon](https://github.com/gaearon) in [#9933](https://github.com/facebook/react/pull/9933))
|
||||
* Remove unnecessary dependency from `react-linked-input`. ([@gaearon](https://github.com/gaearon) in [#9766](https://github.com/facebook/react/pull/9766))
|
||||
* Point `react-addons-(css-)transition-group` to the new package. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
|
||||
|
||||
## 15.5.4 (April 11, 2017)
|
||||
|
||||
### React Addons
|
||||
* **Critical Bugfix:** Update the version of `prop-types` to fix critical bug. ([@gaearon](https://github.com/gaearon) in [545c87f](https://github.com/facebook/react/commit/545c87fdc348f82eb0c3830bef715ed180785390))
|
||||
* Fix `react-addons-create-fragment` package to include `loose-envify` transform for Browserify users. ([@mridgway](https://github.com/mridgway) in [#9642](https://github.com/facebook/react/pull/9642))
|
||||
|
||||
### React Test Renderer
|
||||
* Fix compatibility with Enzyme by exposing `batchedUpdates` on shallow renderer. ([@gaearon](https://github.com/gaearon) in [9382](https://github.com/facebook/react/commit/69933e25c37cf5453a9ef132177241203ee8d2fd))
|
||||
|
||||
## 15.5.3 (April 7, 2017)
|
||||
|
||||
**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
|
||||
|
||||
### React Addons
|
||||
* Fix `react-addons-create-fragment` package to export correct thing. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
|
||||
* Fix `create-react-class` package to include `loose-envify` transform for Browserify users. ([@mridgway](https://github.com/mridgway) in [#9642](https://github.com/facebook/react/pull/9642))
|
||||
|
||||
## 15.5.2 (April 7, 2017)
|
||||
|
||||
**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
|
||||
|
||||
### React Addons
|
||||
* Fix the production single-file builds to not include the development code. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
|
||||
* Apply better minification to production single-file builds. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
|
||||
* Add missing and remove unnecessary dependencies to packages. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
|
||||
|
||||
## 15.5.1 (April 7, 2017)
|
||||
|
||||
**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
|
||||
|
||||
### React
|
||||
* Fix erroneous PropTypes access warning. ([@acdlite](https://github.com/acdlite) in ([ec97ebb](https://github.com/facebook/react/commit/ec97ebbe7f15b58ae2f1323df39d06f119873344))
|
||||
|
||||
## 15.5.0 (April 7, 2017)
|
||||
|
||||
**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
|
||||
|
||||
### React
|
||||
* <s>Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [#d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e))</s>
|
||||
* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [#043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28))
|
||||
* Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005))
|
||||
* Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895))
|
||||
* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882))
|
||||
* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495))
|
||||
|
||||
### React DOM
|
||||
* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359))
|
||||
* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn))
|
||||
|
||||
### React Test Renderer
|
||||
* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512))
|
||||
* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn))
|
||||
|
||||
### React Addons
|
||||
* Last release for addons; they will no longer be actively maintained.
|
||||
* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a))
|
||||
* Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175))
|
||||
* `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn))
|
||||
|
||||
## 15.4.2 (January 6, 2017)
|
||||
|
||||
### React
|
||||
* Fixed build issues with the Brunch bundler. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
|
||||
* Improved error messages for invalid element types. ([@sophiebits](https://github.com/sophiebits) in [#8612](https://github.com/facebook/react/pull/8612))
|
||||
* Removed a warning about `getInitialState` when `this.state` is set. ([@bvaughn](https://github.com/bvaughn) in [#8594](https://github.com/facebook/react/pull/8594))
|
||||
* Removed some dead code. ([@diegomura](https://github.com/diegomura) in [#8050](https://github.com/facebook/react/pull/8050), [@dfrownfelter](https://github.com/dfrownfelter) in [#8597](https://github.com/facebook/react/pull/8597))
|
||||
|
||||
### React DOM
|
||||
* Fixed a decimal point issue on uncontrolled number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7750](https://github.com/facebook/react/pull/7750))
|
||||
* Fixed rendering of textarea placeholder in IE11. ([@aweary](https://github.com/aweary) in [#8020](https://github.com/facebook/react/pull/8020))
|
||||
* Worked around a script engine bug in IE9. ([@eoin](https://github.com/eoin) in [#8018](https://github.com/facebook/react/pull/8018))
|
||||
|
||||
### React Addons
|
||||
* Fixed build issues in RequireJS and SystemJS environments. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
|
||||
* Added missing package dependencies. ([@kweiberth](https://github.com/kweiberth) in [#8467](https://github.com/facebook/react/pull/8467))
|
||||
|
||||
## 15.4.1 (November 22, 2016)
|
||||
|
||||
### React
|
||||
* Restructure variable assignment to work around a Rollup bug ([@gaearon](https://github.com/gaearon) in [#8384](https://github.com/facebook/react/pull/8384))
|
||||
|
||||
### React DOM
|
||||
* Fixed event handling on disabled button elements ([@sophiebits](https://github.com/sophiebits) in [#8387](https://github.com/facebook/react/pull/8387))
|
||||
* Fixed compatibility of browser build with AMD environments ([@zpao](https://github.com/zpao) in [#8374](https://github.com/facebook/react/pull/8374))
|
||||
|
||||
## 15.4.0 (November 16, 2016)
|
||||
|
||||
### React
|
||||
* React package and browser build no longer "secretly" includes React DOM. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
|
||||
* Required PropTypes now fail with specific messages for null and undefined. ([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291))
|
||||
* Improved development performance by freezing children instead of copying. ([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))
|
||||
|
||||
### React DOM
|
||||
* Fixed occasional test failures when React DOM is used together with shallow renderer. ([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))
|
||||
* Added a warning for invalid `aria-` attributes. ([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744))
|
||||
* Added a warning for using `autofocus` rather than `autoFocus`. ([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694))
|
||||
* Removed an unnecessary warning about polyfilling `String.prototype.split`. ([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629))
|
||||
* Clarified the warning about not calling PropTypes manually. ([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777))
|
||||
* The unstable `batchedUpdates` API now passes the wrapped function's return value through. ([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444))
|
||||
* Fixed a bug with updating text in IE 8. ([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))
|
||||
|
||||
### React Perf
|
||||
* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline. ([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))
|
||||
|
||||
### React Test Utils
|
||||
* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before. ([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))
|
||||
|
||||
### React Test Renderer
|
||||
* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
|
||||
* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing. ([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649), [#8261](https://github.com/facebook/react/pull/8261))
|
||||
|
||||
|
||||
## 15.3.2 (September 19, 2016)
|
||||
|
||||
### React
|
||||
- Remove plain object warning from React.createElement & React.cloneElement. ([@spudly](https://github.com/spudly) in [#7724](https://github.com/facebook/react/pull/7724))
|
||||
|
||||
### React DOM
|
||||
- Add `playsInline` to supported HTML attributes. ([@reaperhulk](https://github.com/reaperhulk) in [#7519](https://github.com/facebook/react/pull/7519))
|
||||
- Add `as` to supported HTML attributes. ([@kevinslin](https://github.com/kevinslin) in [#7582](https://github.com/facebook/react/pull/7582))
|
||||
- Improve DOM nesting validation warning about whitespace. ([@sophiebits](https://github.com/sophiebits) in [#7515](https://github.com/facebook/react/pull/7515))
|
||||
- Avoid "Member not found" exception in IE10 when calling `preventDefault()` in Synthetic Events. ([@g-palmer](https://github.com/g-palmer) in [#7411](https://github.com/facebook/react/pull/7411))
|
||||
- Fix memory leak in `onSelect` implementation. ([@AgtLucas](https://github.com/AgtLucas) in [#7533](https://github.com/facebook/react/pull/7533))
|
||||
- Improve robustness of `document.documentMode` checks to handle Google Tag Manager. ([@SchleyB](https://github.com/SchleyB) in [#7594](https://github.com/facebook/react/pull/7594))
|
||||
- Add more cases to controlled inputs warning. ([@marcin-mazurek](https://github.com/marcin-mazurek) in [#7544](https://github.com/facebook/react/pull/7544))
|
||||
- Handle case of popup blockers overriding `document.createEvent`. ([@Andarist](https://github.com/Andarist) in [#7621](https://github.com/facebook/react/pull/7621))
|
||||
- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@zpao](https://github.com/zpao) in [#7618](https://github.com/facebook/react/pull/7618))
|
||||
- Improve handling of Japanese IME on Internet Explorer. ([@msmania](https://github.com/msmania) in [#7107](https://github.com/facebook/react/pull/7107))
|
||||
|
||||
### React Test Renderer
|
||||
- Support error boundaries. ([@millermedeiros](https://github.com/millermedeiros) in [#7558](https://github.com/facebook/react/pull/7558), [#7569](https://github.com/facebook/react/pull/7569), [#7619](https://github.com/facebook/react/pull/7619))
|
||||
- Skip null ref warning. ([@Aweary](https://github.com/Aweary) in [#7658](https://github.com/facebook/react/pull/7658))
|
||||
|
||||
### React Perf Add-on
|
||||
- Ensure lifecycle timers are stopped on errors. ([@gaearon](https://github.com/gaearon) in [#7548](https://github.com/facebook/react/pull/7548))
|
||||
|
||||
|
||||
## 15.3.1 (August 19, 2016)
|
||||
|
||||
### React
|
||||
|
||||
- Improve performance of development builds in various ways. ([@gaearon](https://github.com/gaearon) in [#7461](https://github.com/facebook/react/pull/7461), [#7463](https://github.com/facebook/react/pull/7463), [#7483](https://github.com/facebook/react/pull/7483), [#7488](https://github.com/facebook/react/pull/7488), [#7491](https://github.com/facebook/react/pull/7491), [#7510](https://github.com/facebook/react/pull/7510))
|
||||
- Cleanup internal hooks to improve performance of development builds. ([@gaearon](https://github.com/gaearon) in [#7464](https://github.com/facebook/react/pull/7464), [#7472](https://github.com/facebook/react/pull/7472), [#7481](https://github.com/facebook/react/pull/7481), [#7496](https://github.com/facebook/react/pull/7496))
|
||||
- Upgrade fbjs to pick up another performance improvement from [@gaearon](https://github.com/gaearon) for development builds. ([@zpao](https://github.com/zpao) in [#7532](https://github.com/facebook/react/pull/7532))
|
||||
- Improve startup time of React in Node. ([@zertosh](https://github.com/zertosh) in [#7493](https://github.com/facebook/react/pull/7493))
|
||||
- Improve error message of `React.Children.only`. ([@sophiebits](https://github.com/sophiebits) in [#7514](https://github.com/facebook/react/pull/7514))
|
||||
|
||||
### React DOM
|
||||
- Avoid `<input>` validation warning from browsers when changing `type`. ([@nhunzaker](https://github.com/nhunzaker) in [#7333](https://github.com/facebook/react/pull/7333))
|
||||
- Avoid "Member not found" exception in IE10 when calling `stopPropagation()` in Synthetic Events. ([@nhunzaker](https://github.com/nhunzaker) in [#7343](https://github.com/facebook/react/pull/7343))
|
||||
- Fix issue resulting in inability to update some `<input>` elements in mobile browsers. ([@keyanzhang](https://github.com/keyanzhang) in [#7397](https://github.com/facebook/react/pull/7397))
|
||||
- Fix memory leak in server rendering. ([@keyanzhang](https://github.com/keyanzhang) in [#7410](https://github.com/facebook/react/pull/7410))
|
||||
- Fix issue resulting in `<input type="range">` values not updating when changing `min` or `max`. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7486](https://github.com/facebook/react/pull/7486))
|
||||
- Add new warning for rare case of attempting to unmount a container owned by a different copy of React. ([@ventuno](https://github.com/ventuno) in [#7456](https://github.com/facebook/react/pull/7456))
|
||||
|
||||
### React Test Renderer
|
||||
- Fix ReactTestInstance::toJSON() with empty top-level components. ([@Morhaus](https://github.com/Morhaus) in [#7523](https://github.com/facebook/react/pull/7523))
|
||||
|
||||
### React Native Renderer
|
||||
- Change `trackedTouchCount` invariant into a console.error for better reliability. ([@yungsters](https://github.com/yungsters) in [#7400](https://github.com/facebook/react/pull/7400))
|
||||
|
||||
|
||||
## 15.3.0 (July 29, 2016)
|
||||
|
||||
### React
|
||||
- Add `React.PureComponent` - a new base class to extend, replacing `react-addons-pure-render-mixin` now that mixins don't work with ES2015 classes. ([@sophiebits](https://github.com/sophiebits) in [#7195](https://github.com/facebook/react/pull/7195))
|
||||
- Add new warning when modifying `this.props.children`. ([@jimfb](https://github.com/jimfb) in [#7001](https://github.com/facebook/react/pull/7001))
|
||||
- Fixed issue with ref resolution order. ([@gaearon](https://github.com/gaearon) in [#7101](https://github.com/facebook/react/pull/7101))
|
||||
- Warn when mixin is undefined. ([@swaroopsm](https://github.com/swaroopsm) in [#6158](https://github.com/facebook/react/pull/6158))
|
||||
- Downgrade "unexpected batch number" invariant to a warning. ([@sophiebits](https://github.com/sophiebits) in [#7133](https://github.com/facebook/react/pull/7133))
|
||||
- Validate arguments to `oneOf` and `oneOfType` PropTypes sooner. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6316](https://github.com/facebook/react/pull/6316))
|
||||
- Warn when calling PropTypes directly. ([@Aweary](https://github.com/Aweary) in [#7132](https://github.com/facebook/react/pull/7132), [#7194](https://github.com/facebook/react/pull/7194))
|
||||
- Improve warning when using Maps as children. ([@keyanzhang](https://github.com/keyanzhang) in [#7260](https://github.com/facebook/react/pull/7260))
|
||||
- Add additional type information to the `PropTypes.element` warning. ([@alexzherdev](https://github.com/alexzherdev) in [#7319](https://github.com/facebook/react/pull/7319))
|
||||
- Improve component identification in no-op `setState` warning. ([@keyanzhang](https://github.com/keyanzhang) in [#7326](https://github.com/facebook/react/pull/7326))
|
||||
|
||||
### React DOM
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
- Add `xmlns`, `xmlnsXlink` to supported SVG attributes. ([@salzhrani](https://github.com/salzhrani) in [#6471](https://github.com/facebook/react/pull/6471))
|
||||
- Add `referrerPolicy` to supported HTML attributes. ([@Aweary](https://github.com/Aweary) in [#7274](https://github.com/facebook/react/pull/7274))
|
||||
- Fix issue resulting in `<input type="range">` initial value being rounded. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7251](https://github.com/facebook/react/pull/7251))
|
||||
|
||||
### React Test Renderer
|
||||
- Initial public release of package allowing more focused testing. Install with `npm install react-test-renderer`. ([@sophiebits](https://github.com/sophiebits) in [#6944](https://github.com/facebook/react/pull/6944), [#7258](https://github.com/facebook/react/pull/7258), [@iamdustan](https://github.com/iamdustan) in [#7362](https://github.com/facebook/react/pull/7362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Fix issue resulting in excessive warnings when encountering an internal measurement error. ([@sassanh](https://github.com/sassanh) in [#7299](https://github.com/facebook/react/pull/7299))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Implement `type` property on for events created via `TestUtils.Simulate.*`. ([@yaycmyk](https://github.com/yaycmyk) in [#6154](https://github.com/facebook/react/pull/6154))
|
||||
- Fix crash when running TestUtils with the production build of React. ([@gaearon](https://github.com/gaearon) in [#7246](https://github.com/facebook/react/pull/7246))
|
||||
|
||||
|
||||
## 15.2.1 (July 8, 2016)
|
||||
|
||||
### React
|
||||
- Fix errant warning about missing React element. ([@gaearon](https://github.com/gaearon) in [#7193](https://github.com/facebook/react/pull/7193))
|
||||
- Better removal of dev-only code, leading to a small reduction in the minified production bundle size. ([@gaearon](https://github.com/gaearon) in [#7188](https://github.com/facebook/react/pull/7188), [#7189](https://github.com/facebook/react/pull/7189))
|
||||
|
||||
### React DOM
|
||||
- Add stack trace to null input value warning. ([@jimfb](https://github.com/jimfb) in [#7040](https://github.com/facebook/react/pull/7040))
|
||||
- Fix webcomponents example. ([@jalexanderfox](https://github.com/jalexanderfox) in [#7057](https://github.com/facebook/react/pull/7057))
|
||||
- Fix `unstable_renderSubtreeIntoContainer` so that context properly updates when linked to state. ([@gaearon](https://github.com/gaearon) in [#7125](https://github.com/facebook/react/pull/7125))
|
||||
- Improve invariant wording for void elements. ([@starkch](https://github.com/starkch) in [#7066](https://github.com/facebook/react/pull/7066))
|
||||
- Ensure no errors are thrown due to event handlers in server rendering. ([@rricard](https://github.com/rricard) in [#7127](https://github.com/facebook/react/pull/7127))
|
||||
- Fix regression resulting in `value`-less submit and reset inputs removing the browser-default text. ([@zpao](https://github.com/zpao) in [#7197](https://github.com/facebook/react/pull/7197))
|
||||
- Fix regression resulting in empty `name` attribute being added to inputs when not provided. ([@okonet](https://github.com/okonet) in [#7199](https://github.com/facebook/react/pull/7199))
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
|
||||
### React Perf Add-on
|
||||
- Make `ReactPerf.start()` work properly during lifecycle methods. ([@gaearon](https://github.com/gaearon) in [#7208](https://github.com/facebook/react/pull/7208)).
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix issue resulting in spurious unknown property warnings. ([@batusai513](https://github.com/batusai513) in [#7165](https://github.com/facebook/react/pull/7165))
|
||||
|
||||
### React Native Renderer
|
||||
- Improve error handling in cross-platform touch event handling. ([@yungsters](https://github.com/yungsters) in [#7143](https://github.com/facebook/react/pull/7143))
|
||||
|
||||
|
||||
## 15.2.0 (July 1, 2016)
|
||||
|
||||
### React
|
||||
- Add error codes to production invariants, with links to the view the full error text. ([@keyanzhang](https://github.com/keyanzhang) in [#6948](https://github.com/facebook/react/pull/6948))
|
||||
- Include component stack information in PropType validation warnings. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6398](https://github.com/facebook/react/pull/6398), [@sophiebits](https://github.com/sophiebits) in [#6771](https://github.com/facebook/react/pull/6771))
|
||||
- Include component stack information in key warnings. ([@keyanzhang](https://github.com/keyanzhang) in [#6799](https://github.com/facebook/react/pull/6799))
|
||||
- Stop validating props at mount time, only validate at element creation. ([@keyanzhang](https://github.com/keyanzhang) in [#6824](https://github.com/facebook/react/pull/6824))
|
||||
- New invariant providing actionable error in missing instance case. ([@yungsters](https://github.com/yungsters) in [#6990](https://github.com/facebook/react/pull/6990))
|
||||
- Add `React.PropTypes.symbol` to support ES2015 Symbols as props. ([@puradox](https://github.com/puradox) in [#6377](https://github.com/facebook/react/pull/6377))
|
||||
- Fix incorrect coercion of ref or key that are undefined in development ([@gaearon](https://github.com/gaearon) in [#6880](https://github.com/facebook/react/pull/6880))
|
||||
- Fix a false positive when passing other element’s props to cloneElement ([@ericmatthys](https://github.com/ericmatthys) in [#6268](https://github.com/facebook/react/pull/6268))
|
||||
- Warn if you attempt to define `childContextTypes` on a functional component ([@Aweary](https://github.com/Aweary) in [#6933](https://github.com/facebook/react/pull/6933))
|
||||
|
||||
### React DOM
|
||||
- Add warning for unknown properties on DOM elements. ([@jimfb](https://github.com/jimfb) in [#6800](https://github.com/facebook/react/pull/6800), [@gm758](https://github.com/gm758) in [#7152](https://github.com/facebook/react/pull/7152))
|
||||
- Properly remove attributes from custom elements. ([@grassator](https://github.com/grassator) in [#6748](https://github.com/facebook/react/pull/6748))
|
||||
- Fix invalid unicode escape in attribute name regular expression. ([@nbjahan](https://github.com/nbjahan) in [#6772](https://github.com/facebook/react/pull/6772))
|
||||
- Add `onLoad` handling to `<link>` element. ([@roderickhsiao](https://github.com/roderickhsiao) in [#6815](https://github.com/facebook/react/pull/6815))
|
||||
- Add `onError` handling to `<source>` element. ([@wadahiro](https://github.com/wadahiro) in [#6941](https://github.com/facebook/react/pull/6941))
|
||||
- Handle `value` and `defaultValue` more accurately in the DOM. ([@jimfb](https://github.com/jimfb) in [#6406](https://github.com/facebook/react/pull/6406))
|
||||
- Fix events issue in environments with mutated `Object.prototype`. ([@Weizenlol](https://github.com/Weizenlol) in [#6886](https://github.com/facebook/react/pull/6886))
|
||||
- Fix issue where `is="null"` ended up in the DOM in Firefox. ([@darobin](https://github.com/darobin) in [#6896](https://github.com/facebook/react/pull/6896))
|
||||
- Improved performance of text escaping by using [escape-html](https://github.com/component/escape-html). ([@aickin](https://github.com/aickin) in [#6862](https://github.com/facebook/react/pull/6862))
|
||||
- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@joshhunt](https://github.com/joshhunt) in [#6982](https://github.com/facebook/react/pull/6982))
|
||||
- Fix issue with `<textarea>` placeholders. ([@jimfb](https://github.com/jimfb) in [#7002](https://github.com/facebook/react/pull/7002))
|
||||
- Fix controlled vs uncontrolled detection of `<input type="radio"/>`. ([@jimfb](https://github.com/jimfb) in [#7003](https://github.com/facebook/react/pull/7003))
|
||||
- Improve performance of updating text content. ([@trueadm](https://github.com/trueadm) in [#7005](https://github.com/facebook/react/pull/7005))
|
||||
- Ensure controlled `<select>` components behave the same on initial render as they do on updates. ([@yiminghe](https://github.com/yiminghe) in [#5362](https://github.com/facebook/react/pull/5362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Add `isRunning()` API. ([@nfcampos](https://github.com/nfcampos) in [#6763](https://github.com/facebook/react/pull/6763))
|
||||
- Improve accuracy of lifecycle hook timing. ([@gaearon](https://github.com/gaearon) in [#6858](https://github.com/facebook/react/pull/6858))
|
||||
- Fix internal errors when using ReactPerf with portal components. ([@gaearon](https://github.com/gaearon) in [#6860](https://github.com/facebook/react/pull/6860))
|
||||
- Fix performance regression. ([@sophiebits](https://github.com/sophiebits) in [#6770](https://github.com/facebook/react/pull/6770))
|
||||
- Add warning that ReactPerf is not enabled in production. ([@sashashakun](https://github.com/sashashakun) in [#6884](https://github.com/facebook/react/pull/6884))
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix timing issue with `null` node. ([@keyanzhang](https://github.com/keyanzhang) in [#6958](https://github.com/facebook/react/pull/6958))
|
||||
|
||||
### React Native Renderer
|
||||
- Dependencies on React Native modules use CommonJS requires instead of providesModule. ([@davidaurelio](https://github.com/davidaurelio) in [#6715](https://github.com/facebook/react/pull/6715))
|
||||
|
||||
|
||||
## 15.1.0 (May 20, 2016)
|
||||
|
||||
### React
|
||||
- Ensure we're using the latest `object-assign`, which has protection against a non-spec-compliant native `Object.assign`. ([@zpao](https://github.com/zpao) in [#6681](https://github.com/facebook/react/pull/6681))
|
||||
- Add a new warning to communicate that `props` objects passed to `createElement` must be plain objects. ([@richardscarrott](https://github.com/richardscarrott) in [#6134](https://github.com/facebook/react/pull/6134))
|
||||
- Fix a batching bug resulting in some lifecycle methods incorrectly being called multiple times. ([@sophiebits](https://github.com/sophiebits) in [#6650](https://github.com/facebook/react/pull/6650))
|
||||
|
||||
### React DOM
|
||||
- Fix regression in custom elements support. ([@jscissr](https://github.com/jscissr) in [#6570](https://github.com/facebook/react/pull/6570))
|
||||
- Stop incorrectly warning about using `onScroll` event handler with server rendering. ([@Aweary](https://github.com/Aweary) in [#6678](https://github.com/facebook/react/pull/6678))
|
||||
- Fix grammar in the controlled input warning. ([@jakeboone02](https://github.com/jakeboone02) in [#6657](https://github.com/facebook/react/pull/6657))
|
||||
- Fix issue preventing `<object>` nodes from being able to read `<param>` nodes in IE. ([@syranide](https://github.com/syranide) in [#6691](https://github.com/facebook/react/pull/6691))
|
||||
- Fix issue resulting in crash when using experimental error boundaries with server rendering. ([@jimfb](https://github.com/jimfb) in [#6694](https://github.com/facebook/react/pull/6694))
|
||||
- Add additional information to the controlled input warning. ([@borisyankov](https://github.com/borisyankov) in [#6341](https://github.com/facebook/react/pull/6341))
|
||||
|
||||
### React Perf Add-on
|
||||
- Completely rewritten to collect data more accurately and to be easier to maintain. ([@gaearon](https://github.com/gaearon) in [#6647](https://github.com/facebook/react/pull/6647), [#6046](https://github.com/facebook/react/pull/6046))
|
||||
|
||||
### React Native Renderer
|
||||
- Remove some special cases for platform specific branching. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6660](https://github.com/facebook/react/pull/6660))
|
||||
- Remove use of `merge` utility. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6634](https://github.com/facebook/react/pull/6634))
|
||||
- Renamed some modules to better indicate usage ([@javache](https://github.com/javache) in [#6643](https://github.com/facebook/react/pull/6643))
|
||||
|
||||
|
||||
## 15.0.2 (April 29, 2016)
|
||||
|
||||
### React
|
||||
- Removed extraneous files from npm package. ([@gaearon](https://github.com/gaearon) in [#6388](https://github.com/facebook/react/pull/6388))
|
||||
- Ensure `componentWillUnmount` is only called once. ([@jimfb](https://github.com/jimfb) in [#6613](https://github.com/facebook/react/pull/6613))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed bug resulting in disabled buttons responding to mouse events in IE. ([@nhunzaker](https://github.com/nhunzaker) in [#6215](https://github.com/facebook/react/pull/6215))
|
||||
- Ensure `<option>`s are correctly selected when inside `<optgroup>`. ([@trevorsmith](https://github.com/trevorsmith) in [#6442](https://github.com/facebook/react/pull/6442))
|
||||
- Restore support for rendering into a shadow root. ([@Wildhoney](https://github.com/Wildhoney) in [#6462](https://github.com/facebook/react/pull/6462))
|
||||
- Ensure nested `<body>` elements are caught when warning for invalid markup. ([@keyanzhang](https://github.com/keyanzhang) in [#6469](https://github.com/facebook/react/pull/6469))
|
||||
- Improve warning when encountering multiple elements with the same key. ([@hkal](https://github.com/hkal) in [#6500](https://github.com/facebook/react/pull/6500))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Ensure that functional components do not have an owner. ([@gaearon](https://github.com/gaearon) in [#6362](https://github.com/facebook/react/pull/6362))
|
||||
- Handle invalid arguments to `scryRenderedDOMComponentsWithClass` better. ([@ipeters90](https://github.com/ipeters90) in [#6529](https://github.com/facebook/react/pull/6529))
|
||||
|
||||
### React Perf Add-on
|
||||
- Ignore DOM operations that occur outside the batch operation. ([@gaearon](https://github.com/gaearon) in [#6516](https://github.com/facebook/react/pull/6516))
|
||||
|
||||
### React Native Renderer
|
||||
- These files are now shipped inside the React npm package. They have no impact on React core or ReactDOM.
|
||||
|
||||
|
||||
## 15.0.1 (April 8, 2016)
|
||||
|
||||
### React
|
||||
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. ([@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed issue resulting in loss of cursor position in controlled inputs. ([@sophiebits](https://github.com/sophiebits) in [#6449](https://github.com/facebook/react/pull/6449))
|
||||
|
||||
|
||||
## 15.0.0 (April 7, 2016)
|
||||
|
||||
### Major changes
|
||||
|
||||
- **Initial render now uses `document.createElement` instead of generating HTML.** Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. ([@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **`data-reactid` is no longer on every node.** As a result of using `document.createElement`, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the `data-reactid` attribute). Root nodes will have a `data-reactroot` attribute and server generated markup will still contain `data-reactid`. ([@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **No more extra `<span>`s.** ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. ([@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753))
|
||||
- **Rendering `null` now uses comment nodes.** Previously `null` would render to `<noscript>` elements. We now use comment nodes. This may cause issues if making use of `:nth-child` CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ([@sophiebits](https://github.com/sophiebits) in [#5451](https://github.com/facebook/react/pull/5451))
|
||||
- **Functional components can now return `null`.** We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. ([@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884))
|
||||
- **Improved SVG support.** All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657). ([@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243))
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- **No more extra `<span>`s.**
|
||||
- **`React.cloneElement()` now resolves `defaultProps`.** We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. We’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. ([@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997))
|
||||
- **`ReactPerf.getLastMeasurements()` is opaque.** This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. ([@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286))
|
||||
|
||||
#### Removed deprecations
|
||||
|
||||
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
|
||||
|
||||
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. ([@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832))
|
||||
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. ([@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016))
|
||||
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. ([@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570))
|
||||
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. ([@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285))
|
||||
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error. ([@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372))
|
||||
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. ([@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495))
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
||||
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
|
||||
|
||||
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input). ([@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127))
|
||||
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. ([@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048))
|
||||
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. ([@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287))
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. ([@sophiebits](https://github.com/sophiebits) in [#5083](https://github.com/facebook/react/pull/5083))
|
||||
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. ([@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140))
|
||||
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. ([@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947))
|
||||
- Elements will now warn when attempting to read `ref` and `key` from the props. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744))
|
||||
- React will now warn if you pass a different `props` object to `super()` in the constructor. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346))
|
||||
- React will now warn if you call `setState()` inside `getChildContext()`. ([@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121))
|
||||
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. ([@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361))
|
||||
- React DOM now warns about `NaN` values in `style`. ([@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811))
|
||||
- React DOM now warns if you specify both `value` and `defaultValue` for an input. ([@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823))
|
||||
- React DOM now warns if an input switches between being controlled and uncontrolled. ([@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864))
|
||||
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. ([@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296))
|
||||
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. ([@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310))
|
||||
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. ([@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358))
|
||||
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390))
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Fixed multiple small memory leaks. ([@sophiebits](https://github.com/sophiebits) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309))
|
||||
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. ([@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051))
|
||||
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. ([@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787))
|
||||
- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`. ([@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892))
|
||||
- React DOM now supports the `cite` and `profile` HTML attributes. ([@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032))
|
||||
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. ([@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779))
|
||||
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. ([@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270))
|
||||
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. ([@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781))
|
||||
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. ([@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510))
|
||||
- React DOM does not mistakenly coerce `children` to strings for Web Components. ([@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093))
|
||||
- React DOM now correctly normalizes SVG `<use>` events. ([@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720))
|
||||
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing. ([@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028))
|
||||
- React DOM does not throw in Windows 8 apps. ([@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063))
|
||||
- React DOM does not throw when asynchronously unmounting a child with a `ref`. ([@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095))
|
||||
- React DOM no longer forces synchronous layout because of scroll position tracking. ([@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271))
|
||||
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
|
||||
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
|
||||
|
||||
### Other improvements
|
||||
|
||||
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
|
||||
- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))
|
||||
- Shallow renderer now returns the rendered output from `render()`. ([@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411))
|
||||
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments. ([@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959))
|
||||
- React DOM now allows `data-` attributes with names that start with numbers. ([@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216))
|
||||
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
|
||||
- React improves the performance for `createClass()` on complex specs. ([@sophiebits](https://github.com/sophiebits) in [#5550](https://github.com/facebook/react/pull/5550))
|
||||
|
||||
|
||||
## 0.14.8 (March 29, 2016)
|
||||
|
||||
### React
|
||||
@@ -880,8 +88,8 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
### Major changes
|
||||
|
||||
- Split the main `react` package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
|
||||
- Addons have been moved to separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
|
||||
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://reactjs.org/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://reactjs.org/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
|
||||
- Addons have been moved to seperate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
|
||||
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
|
||||
- Refs to DOM components as the DOM node itself. Previously the only useful thing you can do with a DOM component is call `getDOMNode()` to get the underlying DOM node. Starting with this release, a ref to a DOM component _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
|
||||
|
||||
|
||||
@@ -889,8 +97,8 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
|
||||
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://reactjs.org/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://facebook.github.io/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
|
||||
- Web components (custom elements) now use native property names. Eg: `class` instead of `className`.
|
||||
|
||||
@@ -898,16 +106,16 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
|
||||
|
||||
### Notable enhancements
|
||||
|
||||
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
|
||||
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
|
||||
- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](https://babeljs.io/docs/usage/polyfill/).
|
||||
- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
|
||||
- When possible, React DOM now generates XHTML-compatible markup.
|
||||
- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
|
||||
- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
|
||||
@@ -941,7 +149,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](https://babeljs.io), which has built-in support for React and JSX.
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
|
||||
#### New Features
|
||||
|
||||
@@ -994,7 +202,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Immutability Helpers: Ensure it supports `hasOwnProperty` as an object key
|
||||
* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
|
||||
|
||||
### React Tools
|
||||
|
||||
@@ -1041,9 +249,9 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### New Features
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://reactjs.org/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
* Support for iterators and immutable-js sequences as children.
|
||||
@@ -1057,7 +265,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### New Features
|
||||
|
||||
* [`React.addons.createFragment` was added](https://reactjs.org/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
|
||||
#### Deprecations
|
||||
|
||||
@@ -1283,7 +491,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### New Features
|
||||
* Added warnings to help migrate towards descriptors
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://reactjs.org/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Added support for more attributes:
|
||||
* `srcSet` for `<img>` to specify images at different pixel ratios
|
||||
* `textAnchor` for SVG
|
||||
@@ -1295,7 +503,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
### Addons
|
||||
|
||||
* `update` function to deal with immutable data. [Read the docs](https://reactjs.org/docs/update.html)
|
||||
* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
|
||||
|
||||
### react-tools
|
||||
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
|
||||
@@ -1457,7 +665,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
### React with Addons (New!)
|
||||
|
||||
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://reactjs.org/docs/addons.html).
|
||||
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://facebook.github.io/react/docs/addons.html).
|
||||
|
||||
### JSX
|
||||
|
||||
@@ -1490,10 +698,10 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
|
||||
* Support for more DOM elements and attributes (e.g., `<canvas>`)
|
||||
* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](https://reactjs.org/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://reactjs.org/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](https://reactjs.org/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://reactjs.org/docs/forms.html)
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://facebook.github.io/react/docs/forms.html)
|
||||
* We've implemented an improved synthetic event system that conforms to the W3C spec.
|
||||
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
|
||||
|
||||
@@ -1525,14 +733,14 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
|
||||
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
|
||||
* Freeze our Esprima dependency.
|
||||
* Freeze our esprima dependency.
|
||||
|
||||
|
||||
## 0.3.2 (May 31, 2013)
|
||||
|
||||
### JSX
|
||||
|
||||
* Improved compatibility with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
|
||||
### react-tools
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
# Code of Conduct
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated.
|
||||
@@ -1,5 +1,100 @@
|
||||
# Contributing to React
|
||||
|
||||
Want to contribute to React? There are a few things you need to know.
|
||||
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
|
||||
|
||||
We wrote a **[contribution guide](https://reactjs.org/contributing/how-to-contribute.html)** to help you get started.
|
||||
## [Code of Conduct](https://code.facebook.com/codeofconduct)
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
|
||||
|
||||
## Our Development Process
|
||||
|
||||
Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
|
||||
|
||||
### `master` is unsafe
|
||||
|
||||
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
|
||||
|
||||
### Test Suite
|
||||
|
||||
Use `grunt test` to run the full test suite with PhantomJS.
|
||||
|
||||
This command is just a facade to [Jest](https://facebook.github.io/jest/). You may optionally run `npm install -g jest-cli` and use Jest commands directly to have more control over how tests are executed.
|
||||
|
||||
For example, `jest --watch` lets you automatically run the test suite on every file change.
|
||||
|
||||
You can also run a subset of tests by passing a prefix to `jest`. For instance, `jest ReactDOMSVG` will only run tests in the files that start with `ReactDOMSVG`, such as `ReactDOMSVG-test.js`.
|
||||
|
||||
When you know which tests you want to run, you can achieve a fast feedback loop by using these two features together. For example, `jest ReactDOMSVG --watch` will re-run only the matching tests on every change.
|
||||
|
||||
Just make sure to run the whole test suite before submitting a pull request!
|
||||
|
||||
### Pull Requests
|
||||
|
||||
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
|
||||
The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
|
||||
|
||||
*Before* submitting a pull request, please make sure the following is done…
|
||||
|
||||
1. Fork the repo and create your branch from `master`.
|
||||
2. If you've added code that should be tested, add tests!
|
||||
3. If you've changed APIs, update the documentation.
|
||||
4. Ensure the test suite passes (`grunt test`).
|
||||
5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
|
||||
6. If you haven't already, complete the CLA.
|
||||
|
||||
### Contributor License Agreement (CLA)
|
||||
|
||||
In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
|
||||
|
||||
[Complete your CLA here.](https://code.facebook.com/cla)
|
||||
|
||||
## Bugs
|
||||
|
||||
### Where to Find Known Issues
|
||||
|
||||
We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
|
||||
|
||||
### Reporting New Issues
|
||||
|
||||
The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.
|
||||
|
||||
### Security Bugs
|
||||
|
||||
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
|
||||
|
||||
## How to Get in Touch
|
||||
|
||||
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
|
||||
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
|
||||
|
||||
## Meeting Notes
|
||||
|
||||
React team meets once a week to discuss the development of React, future plans, and priorities.
|
||||
You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).
|
||||
|
||||
## Style Guide
|
||||
|
||||
Our linter will catch most styling issues that may exist in your code.
|
||||
You can check the status of your code styling by simply running: `grunt lint`
|
||||
|
||||
However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
|
||||
|
||||
### Code Conventions
|
||||
|
||||
* Use semicolons `;`
|
||||
* Commas last `,`
|
||||
* 2 spaces for indentation (no tabs)
|
||||
* Prefer `'` over `"`
|
||||
* `'use strict';`
|
||||
* 80 character line length
|
||||
* Write "attractive" code
|
||||
* Do not use the optional parameters of `setTimeout` and `setInterval`
|
||||
|
||||
### Documentation
|
||||
|
||||
* Do not wrap lines at 80 characters
|
||||
|
||||
## License
|
||||
|
||||
By contributing to React, you agree that your contributions will be licensed under its BSD license.
|
||||
|
||||
160
Gruntfile.js
Normal file
160
Gruntfile.js
Normal file
@@ -0,0 +1,160 @@
|
||||
'use strict';
|
||||
|
||||
var path = require('path');
|
||||
|
||||
var GULP_EXE = 'gulp';
|
||||
if (process.platform === 'win32') {
|
||||
GULP_EXE += '.cmd';
|
||||
}
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
browserify: require('./grunt/config/browserify'),
|
||||
npm: require('./grunt/config/npm'),
|
||||
clean: [
|
||||
'./build',
|
||||
'./*.gem',
|
||||
'./docs/_site',
|
||||
'./examples/shared/*.js',
|
||||
'.module-cache',
|
||||
],
|
||||
'compare_size': require('./grunt/config/compare_size'),
|
||||
});
|
||||
|
||||
grunt.config.set('compress', require('./grunt/config/compress'));
|
||||
|
||||
function spawnGulp(args, opts, done) {
|
||||
|
||||
grunt.util.spawn({
|
||||
// This could be more flexible (require.resolve & lookup bin in package)
|
||||
// but if it breaks we'll fix it then.
|
||||
cmd: path.join('node_modules', '.bin', GULP_EXE),
|
||||
args: args,
|
||||
opts: Object.assign({stdio: 'inherit'}, opts),
|
||||
}, function(err, result, code) {
|
||||
if (err) {
|
||||
grunt.fail.fatal('Something went wrong running gulp: ', result);
|
||||
}
|
||||
done(code === 0);
|
||||
});
|
||||
}
|
||||
|
||||
Object.keys(grunt.file.readJSON('package.json').devDependencies)
|
||||
.filter(function(npmTaskName) {
|
||||
return npmTaskName.indexOf('grunt-') === 0;
|
||||
})
|
||||
.filter(function(npmTaskName) {
|
||||
return npmTaskName !== 'grunt-cli';
|
||||
})
|
||||
.forEach(function(npmTaskName) {
|
||||
grunt.loadNpmTasks(npmTaskName);
|
||||
});
|
||||
|
||||
grunt.registerTask('eslint', require('./grunt/tasks/eslint'));
|
||||
|
||||
grunt.registerTask('lint', ['eslint']);
|
||||
|
||||
grunt.registerTask('delete-build-modules', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['react:clean'], null, this.async());
|
||||
});
|
||||
|
||||
// Our own browserify-based tasks to build a single JS file build.
|
||||
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
|
||||
|
||||
grunt.registerMultiTask('npm', require('./grunt/tasks/npm'));
|
||||
|
||||
var npmReactTasks = require('./grunt/tasks/npm-react');
|
||||
grunt.registerTask('npm-react:release', npmReactTasks.buildRelease);
|
||||
grunt.registerTask('npm-react:pack', npmReactTasks.packRelease);
|
||||
|
||||
var npmReactDOMTasks = require('./grunt/tasks/npm-react-dom');
|
||||
grunt.registerTask('npm-react-dom:release', npmReactDOMTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease);
|
||||
|
||||
var npmReactAddonsTasks = require('./grunt/tasks/npm-react-addons');
|
||||
grunt.registerTask('npm-react-addons:release', npmReactAddonsTasks.buildReleases);
|
||||
grunt.registerTask('npm-react-addons:pack', npmReactAddonsTasks.packReleases);
|
||||
|
||||
grunt.registerTask('version-check', require('./grunt/tasks/version-check'));
|
||||
|
||||
grunt.registerTask('build:basic', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:basic',
|
||||
]);
|
||||
grunt.registerTask('build:addons', [
|
||||
'build-modules',
|
||||
'browserify:addons',
|
||||
]);
|
||||
grunt.registerTask('build:min', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:min',
|
||||
]);
|
||||
grunt.registerTask('build:addons-min', [
|
||||
'build-modules',
|
||||
'browserify:addonsMin',
|
||||
]);
|
||||
grunt.registerTask('build:npm-react', [
|
||||
'version-check',
|
||||
'build-modules',
|
||||
'npm-react:release',
|
||||
]);
|
||||
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
|
||||
|
||||
var jestTasks = require('./grunt/tasks/jest');
|
||||
grunt.registerTask('jest:normal', jestTasks.normal);
|
||||
grunt.registerTask('jest:coverage', jestTasks.coverage);
|
||||
|
||||
grunt.registerTask('test', ['jest:normal']);
|
||||
grunt.registerTask('npm:test', ['build', 'npm:pack']);
|
||||
|
||||
// Optimized build task that does all of our builds. The subtasks will be run
|
||||
// in order so we can take advantage of that and only run build-modules once.
|
||||
grunt.registerTask('build', [
|
||||
'delete-build-modules',
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:basic',
|
||||
'browserify:addons',
|
||||
'browserify:min',
|
||||
'browserify:addonsMin',
|
||||
'build:react-dom',
|
||||
'npm-react:release',
|
||||
'npm-react:pack',
|
||||
'npm-react-dom:release',
|
||||
'npm-react-dom:pack',
|
||||
'npm-react-addons:release',
|
||||
'npm-react-addons:pack',
|
||||
'compare_size',
|
||||
]);
|
||||
|
||||
// Automate the release!
|
||||
var releaseTasks = require('./grunt/tasks/release');
|
||||
grunt.registerTask('release:setup', releaseTasks.setup);
|
||||
grunt.registerTask('release:bower', releaseTasks.bower);
|
||||
grunt.registerTask('release:docs', releaseTasks.docs);
|
||||
grunt.registerTask('release:msg', releaseTasks.msg);
|
||||
grunt.registerTask('release:starter', releaseTasks.starter);
|
||||
|
||||
grunt.registerTask('release', [
|
||||
'release:setup',
|
||||
'clean',
|
||||
'build',
|
||||
'release:bower',
|
||||
'release:starter',
|
||||
'compress',
|
||||
'release:docs',
|
||||
'release:msg',
|
||||
]);
|
||||
|
||||
grunt.registerTask('build-modules', function() {
|
||||
spawnGulp(['react:modules'], null, this.async());
|
||||
});
|
||||
|
||||
// The default task - build - to keep setup easy.
|
||||
grunt.registerTask('default', ['build']);
|
||||
};
|
||||
42
LICENSE
42
LICENSE
@@ -1,21 +1,31 @@
|
||||
MIT License
|
||||
BSD License
|
||||
|
||||
For React software
|
||||
|
||||
Copyright (c) 2013-present, Facebook, Inc.
|
||||
All rights reserved.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
Redistribution and use in source and binary forms, with or without modification,
|
||||
are permitted provided that the following conditions are met:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
* Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
* Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name Facebook nor the names of its contributors may be used to
|
||||
endorse or promote products derived from this software without specific
|
||||
prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
||||
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
393
LICENSE-docs
Normal file
393
LICENSE-docs
Normal file
@@ -0,0 +1,393 @@
|
||||
Attribution 4.0 International
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Corporation ("Creative Commons") is not a law firm and
|
||||
does not provide legal services or legal advice. Distribution of
|
||||
Creative Commons public licenses does not create a lawyer-client or
|
||||
other relationship. Creative Commons makes its licenses and related
|
||||
information available on an "as-is" basis. Creative Commons gives no
|
||||
warranties regarding its licenses, any material licensed under their
|
||||
terms and conditions, or any related information. Creative Commons
|
||||
disclaims all liability for damages resulting from their use to the
|
||||
fullest extent possible.
|
||||
|
||||
Using Creative Commons Public Licenses
|
||||
|
||||
Creative Commons public licenses provide a standard set of terms and
|
||||
conditions that creators and other rights holders may use to share
|
||||
original works of authorship and other material subject to copyright
|
||||
and certain other rights specified in the public license below. The
|
||||
following considerations are for informational purposes only, are not
|
||||
exhaustive, and do not form part of our licenses.
|
||||
|
||||
Considerations for licensors: Our public licenses are
|
||||
intended for use by those authorized to give the public
|
||||
permission to use material in ways otherwise restricted by
|
||||
copyright and certain other rights. Our licenses are
|
||||
irrevocable. Licensors should read and understand the terms
|
||||
and conditions of the license they choose before applying it.
|
||||
Licensors should also secure all rights necessary before
|
||||
applying our licenses so that the public can reuse the
|
||||
material as expected. Licensors should clearly mark any
|
||||
material not subject to the license. This includes other CC-
|
||||
licensed material, or material used under an exception or
|
||||
limitation to copyright. More considerations for licensors:
|
||||
wiki.creativecommons.org/Considerations_for_licensors
|
||||
|
||||
Considerations for the public: By using one of our public
|
||||
licenses, a licensor grants the public permission to use the
|
||||
licensed material under specified terms and conditions. If
|
||||
the licensor's permission is not necessary for any reason--for
|
||||
example, because of any applicable exception or limitation to
|
||||
copyright--then that use is not regulated by the license. Our
|
||||
licenses grant only permissions under copyright and certain
|
||||
other rights that a licensor has authority to grant. Use of
|
||||
the licensed material may still be restricted for other
|
||||
reasons, including because others have copyright or other
|
||||
rights in the material. A licensor may make special requests,
|
||||
such as asking that all changes be marked or described.
|
||||
Although not required by our licenses, you are encouraged to
|
||||
respect those requests where reasonable. More_considerations
|
||||
for the public:
|
||||
wiki.creativecommons.org/Considerations_for_licensees
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Attribution 4.0 International Public License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree
|
||||
to be bound by the terms and conditions of this Creative Commons
|
||||
Attribution 4.0 International Public License ("Public License"). To the
|
||||
extent this Public License may be interpreted as a contract, You are
|
||||
granted the Licensed Rights in consideration of Your acceptance of
|
||||
these terms and conditions, and the Licensor grants You such rights in
|
||||
consideration of benefits the Licensor receives from making the
|
||||
Licensed Material available under these terms and conditions.
|
||||
|
||||
|
||||
Section 1 -- Definitions.
|
||||
|
||||
a. Adapted Material means material subject to Copyright and Similar
|
||||
Rights that is derived from or based upon the Licensed Material
|
||||
and in which the Licensed Material is translated, altered,
|
||||
arranged, transformed, or otherwise modified in a manner requiring
|
||||
permission under the Copyright and Similar Rights held by the
|
||||
Licensor. For purposes of this Public License, where the Licensed
|
||||
Material is a musical work, performance, or sound recording,
|
||||
Adapted Material is always produced where the Licensed Material is
|
||||
synched in timed relation with a moving image.
|
||||
|
||||
b. Adapter's License means the license You apply to Your Copyright
|
||||
and Similar Rights in Your contributions to Adapted Material in
|
||||
accordance with the terms and conditions of this Public License.
|
||||
|
||||
c. Copyright and Similar Rights means copyright and/or similar rights
|
||||
closely related to copyright including, without limitation,
|
||||
performance, broadcast, sound recording, and Sui Generis Database
|
||||
Rights, without regard to how the rights are labeled or
|
||||
categorized. For purposes of this Public License, the rights
|
||||
specified in Section 2(b)(1)-(2) are not Copyright and Similar
|
||||
Rights.
|
||||
|
||||
d. Effective Technological Measures means those measures that, in the
|
||||
absence of proper authority, may not be circumvented under laws
|
||||
fulfilling obligations under Article 11 of the WIPO Copyright
|
||||
Treaty adopted on December 20, 1996, and/or similar international
|
||||
agreements.
|
||||
|
||||
e. Exceptions and Limitations means fair use, fair dealing, and/or
|
||||
any other exception or limitation to Copyright and Similar Rights
|
||||
that applies to Your use of the Licensed Material.
|
||||
|
||||
f. Licensed Material means the artistic or literary work, database,
|
||||
or other material to which the Licensor applied this Public
|
||||
License.
|
||||
|
||||
g. Licensed Rights means the rights granted to You subject to the
|
||||
terms and conditions of this Public License, which are limited to
|
||||
all Copyright and Similar Rights that apply to Your use of the
|
||||
Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
h. Licensor means the individual(s) or entity(ies) granting rights
|
||||
under this Public License.
|
||||
|
||||
i. Share means to provide material to the public by any means or
|
||||
process that requires permission under the Licensed Rights, such
|
||||
as reproduction, public display, public performance, distribution,
|
||||
dissemination, communication, or importation, and to make material
|
||||
available to the public including in ways that members of the
|
||||
public may access the material from a place and at a time
|
||||
individually chosen by them.
|
||||
|
||||
j. Sui Generis Database Rights means rights other than copyright
|
||||
resulting from Directive 96/9/EC of the European Parliament and of
|
||||
the Council of 11 March 1996 on the legal protection of databases,
|
||||
as amended and/or succeeded, as well as other essentially
|
||||
equivalent rights anywhere in the world.
|
||||
|
||||
k. You means the individual or entity exercising the Licensed Rights
|
||||
under this Public License. Your has a corresponding meaning.
|
||||
|
||||
|
||||
Section 2 -- Scope.
|
||||
|
||||
a. License grant.
|
||||
|
||||
1. Subject to the terms and conditions of this Public License,
|
||||
the Licensor hereby grants You a worldwide, royalty-free,
|
||||
non-sublicensable, non-exclusive, irrevocable license to
|
||||
exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
a. reproduce and Share the Licensed Material, in whole or
|
||||
in part; and
|
||||
|
||||
b. produce, reproduce, and Share Adapted Material.
|
||||
|
||||
2. Exceptions and Limitations. For the avoidance of doubt, where
|
||||
Exceptions and Limitations apply to Your use, this Public
|
||||
License does not apply, and You do not need to comply with
|
||||
its terms and conditions.
|
||||
|
||||
3. Term. The term of this Public License is specified in Section
|
||||
6(a).
|
||||
|
||||
4. Media and formats; technical modifications allowed. The
|
||||
Licensor authorizes You to exercise the Licensed Rights in
|
||||
all media and formats whether now known or hereafter created,
|
||||
and to make technical modifications necessary to do so. The
|
||||
Licensor waives and/or agrees not to assert any right or
|
||||
authority to forbid You from making technical modifications
|
||||
necessary to exercise the Licensed Rights, including
|
||||
technical modifications necessary to circumvent Effective
|
||||
Technological Measures. For purposes of this Public License,
|
||||
simply making modifications authorized by this Section 2(a)
|
||||
(4) never produces Adapted Material.
|
||||
|
||||
5. Downstream recipients.
|
||||
|
||||
a. Offer from the Licensor -- Licensed Material. Every
|
||||
recipient of the Licensed Material automatically
|
||||
receives an offer from the Licensor to exercise the
|
||||
Licensed Rights under the terms and conditions of this
|
||||
Public License.
|
||||
|
||||
b. No downstream restrictions. You may not offer or impose
|
||||
any additional or different terms or conditions on, or
|
||||
apply any Effective Technological Measures to, the
|
||||
Licensed Material if doing so restricts exercise of the
|
||||
Licensed Rights by any recipient of the Licensed
|
||||
Material.
|
||||
|
||||
6. No endorsement. Nothing in this Public License constitutes or
|
||||
may be construed as permission to assert or imply that You
|
||||
are, or that Your use of the Licensed Material is, connected
|
||||
with, or sponsored, endorsed, or granted official status by,
|
||||
the Licensor or others designated to receive attribution as
|
||||
provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. Other rights.
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not
|
||||
licensed under this Public License, nor are publicity,
|
||||
privacy, and/or other similar personality rights; however, to
|
||||
the extent possible, the Licensor waives and/or agrees not to
|
||||
assert any such rights held by the Licensor to the limited
|
||||
extent necessary to allow You to exercise the Licensed
|
||||
Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this
|
||||
Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to
|
||||
collect royalties from You for the exercise of the Licensed
|
||||
Rights, whether directly or through a collecting society
|
||||
under any voluntary or waivable statutory or compulsory
|
||||
licensing scheme. In all other cases the Licensor expressly
|
||||
reserves any right to collect such royalties.
|
||||
|
||||
|
||||
Section 3 -- License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the
|
||||
following conditions.
|
||||
|
||||
a. Attribution.
|
||||
|
||||
1. If You Share the Licensed Material (including in modified
|
||||
form), You must:
|
||||
|
||||
a. retain the following if it is supplied by the Licensor
|
||||
with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed
|
||||
Material and any others designated to receive
|
||||
attribution, in any reasonable manner requested by
|
||||
the Licensor (including by pseudonym if
|
||||
designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of
|
||||
warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the
|
||||
extent reasonably practicable;
|
||||
|
||||
b. indicate if You modified the Licensed Material and
|
||||
retain an indication of any previous modifications; and
|
||||
|
||||
c. indicate the Licensed Material is licensed under this
|
||||
Public License, and include the text of, or the URI or
|
||||
hyperlink to, this Public License.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any
|
||||
reasonable manner based on the medium, means, and context in
|
||||
which You Share the Licensed Material. For example, it may be
|
||||
reasonable to satisfy the conditions by providing a URI or
|
||||
hyperlink to a resource that includes the required
|
||||
information.
|
||||
|
||||
3. If requested by the Licensor, You must remove any of the
|
||||
information required by Section 3(a)(1)(A) to the extent
|
||||
reasonably practicable.
|
||||
|
||||
4. If You Share Adapted Material You produce, the Adapter's
|
||||
License You apply must not prevent recipients of the Adapted
|
||||
Material from complying with this Public License.
|
||||
|
||||
|
||||
Section 4 -- Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that
|
||||
apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
|
||||
to extract, reuse, reproduce, and Share all or a substantial
|
||||
portion of the contents of the database;
|
||||
|
||||
b. if You include all or a substantial portion of the database
|
||||
contents in a database in which You have Sui Generis Database
|
||||
Rights, then the database in which You have Sui Generis Database
|
||||
Rights (but not its individual contents) is Adapted Material; and
|
||||
|
||||
c. You must comply with the conditions in Section 3(a) if You Share
|
||||
all or a substantial portion of the contents of the database.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not
|
||||
replace Your obligations under this Public License where the Licensed
|
||||
Rights include other Copyright and Similar Rights.
|
||||
|
||||
|
||||
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
|
||||
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
|
||||
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
|
||||
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
|
||||
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
|
||||
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
|
||||
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
|
||||
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
|
||||
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
|
||||
|
||||
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
|
||||
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
|
||||
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
|
||||
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
|
||||
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
|
||||
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
|
||||
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
|
||||
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
|
||||
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided
|
||||
above shall be interpreted in a manner that, to the extent
|
||||
possible, most closely approximates an absolute disclaimer and
|
||||
waiver of all liability.
|
||||
|
||||
|
||||
Section 6 -- Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and
|
||||
Similar Rights licensed here. However, if You fail to comply with
|
||||
this Public License, then Your rights under this Public License
|
||||
terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under
|
||||
Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided
|
||||
it is cured within 30 days of Your discovery of the
|
||||
violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any
|
||||
right the Licensor may have to seek remedies for Your violations
|
||||
of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the
|
||||
Licensed Material under separate terms or conditions or stop
|
||||
distributing the Licensed Material at any time; however, doing so
|
||||
will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
|
||||
License.
|
||||
|
||||
|
||||
Section 7 -- Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different
|
||||
terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the
|
||||
Licensed Material not stated herein are separate from and
|
||||
independent of the terms and conditions of this Public License.
|
||||
|
||||
|
||||
Section 8 -- Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and
|
||||
shall not be interpreted to, reduce, limit, restrict, or impose
|
||||
conditions on any use of the Licensed Material that could lawfully
|
||||
be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is
|
||||
deemed unenforceable, it shall be automatically reformed to the
|
||||
minimum extent necessary to make it enforceable. If the provision
|
||||
cannot be reformed, it shall be severed from this Public License
|
||||
without affecting the enforceability of the remaining terms and
|
||||
conditions.
|
||||
|
||||
c. No term or condition of this Public License will be waived and no
|
||||
failure to comply consented to unless expressly agreed to by the
|
||||
Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted
|
||||
as a limitation upon, or waiver of, any privileges and immunities
|
||||
that apply to the Licensor or You, including from the legal
|
||||
processes of any jurisdiction or authority.
|
||||
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons is not a party to its public licenses.
|
||||
Notwithstanding, Creative Commons may elect to apply one of its public
|
||||
licenses to material it publishes and in those instances will be
|
||||
considered the "Licensor." Except for the limited purpose of indicating
|
||||
that material is shared under a Creative Commons public license or as
|
||||
otherwise permitted by the Creative Commons policies published at
|
||||
creativecommons.org/policies, Creative Commons does not authorize the
|
||||
use of the trademark "Creative Commons" or any other trademark or logo
|
||||
of Creative Commons without its prior written consent including,
|
||||
without limitation, in connection with any unauthorized modifications
|
||||
to any of its public licenses or any other arrangements,
|
||||
understandings, or agreements concerning use of licensed material. For
|
||||
the avoidance of doubt, this paragraph does not form part of the public
|
||||
licenses.
|
||||
|
||||
Creative Commons may be contacted at creativecommons.org.
|
||||
9
LICENSE-examples
Normal file
9
LICENSE-examples
Normal file
@@ -0,0 +1,9 @@
|
||||
The examples provided by Facebook are for non-commercial testing and evaluation
|
||||
purposes only. Facebook reserves all rights not expressly granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
||||
FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
|
||||
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
33
PATENTS
Normal file
33
PATENTS
Normal file
@@ -0,0 +1,33 @@
|
||||
Additional Grant of Patent Rights Version 2
|
||||
|
||||
"Software" means the React software distributed by Facebook, Inc.
|
||||
|
||||
Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
|
||||
("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
|
||||
(subject to the termination provision below) license under any Necessary
|
||||
Claims, to make, have made, use, sell, offer to sell, import, and otherwise
|
||||
transfer the Software. For avoidance of doubt, no license is granted under
|
||||
Facebook's rights in any patent claims that are infringed by (i) modifications
|
||||
to the Software made by you or any third party or (ii) the Software in
|
||||
combination with any software or other technology.
|
||||
|
||||
The license granted hereunder will terminate, automatically and without notice,
|
||||
if you (or any of your subsidiaries, corporate affiliates or agents) initiate
|
||||
directly or indirectly, or take a direct financial interest in, any Patent
|
||||
Assertion: (i) against Facebook or any of its subsidiaries or corporate
|
||||
affiliates, (ii) against any party if such Patent Assertion arises in whole or
|
||||
in part from any software, technology, product or service of Facebook or any of
|
||||
its subsidiaries or corporate affiliates, or (iii) against any party relating
|
||||
to the Software. Notwithstanding the foregoing, if Facebook or any of its
|
||||
subsidiaries or corporate affiliates files a lawsuit alleging patent
|
||||
infringement against you in the first instance, and you respond by filing a
|
||||
patent infringement counterclaim in that lawsuit against that party that is
|
||||
unrelated to the Software, the license granted hereunder will not terminate
|
||||
under section (i) of this paragraph due to such counterclaim.
|
||||
|
||||
A "Necessary Claim" is a claim of a patent owned by Facebook that is
|
||||
necessarily infringed by the Software standing alone.
|
||||
|
||||
A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
|
||||
or contributory infringement or inducement to infringe any patent, including a
|
||||
cross-claim or counterclaim.
|
||||
135
README.md
135
README.md
@@ -1,77 +1,116 @@
|
||||
# [React](https://reactjs.org/) · [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://circleci.com/gh/facebook/react) [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
|
||||
# [React](https://facebook.github.io/react/) [](https://travis-ci.org/facebook/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://www.npmjs.com/package/react) [](CONTRIBUTING.md#pull-requests)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
|
||||
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
|
||||
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
|
||||
|
||||
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
|
||||
**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
|
||||
|
||||
## Installation
|
||||
|
||||
React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
|
||||
|
||||
* Use [Online Playgrounds](https://reactjs.org/docs/getting-started.html#online-playgrounds) to get a taste of React.
|
||||
* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
|
||||
* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
|
||||
|
||||
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
|
||||
|
||||
## Documentation
|
||||
|
||||
You can find the React documentation [on the website](https://reactjs.org/docs).
|
||||
|
||||
Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
|
||||
|
||||
The documentation is divided into several sections:
|
||||
|
||||
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
|
||||
* [Main Concepts](https://reactjs.org/docs/hello-world.html)
|
||||
* [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
|
||||
* [API Reference](https://reactjs.org/docs/react-api.html)
|
||||
* [Where to Get Support](https://reactjs.org/community/support.html)
|
||||
* [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
|
||||
|
||||
You can improve it by sending pull requests to [this repository](https://github.com/reactjs/reactjs.org).
|
||||
[Learn how to use React in your own project](https://facebook.github.io/react/docs/getting-started.html).
|
||||
|
||||
## Examples
|
||||
|
||||
We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
|
||||
We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
|
||||
|
||||
```jsx
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
```js
|
||||
var HelloMessage = React.createClass({
|
||||
render: function() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<HelloMessage name="Taylor" />,
|
||||
<HelloMessage name="John" />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
This example will render "Hello Taylor" into a container on the page.
|
||||
This example will render "Hello John" into a container on the page.
|
||||
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
|
||||
|
||||
## Contributing
|
||||
## Installation
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
|
||||
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](https://www.jsdelivr.com/projects/react)):
|
||||
|
||||
### [Code of Conduct](https://code.facebook.com/codeofconduct)
|
||||
```html
|
||||
<!-- The core React library -->
|
||||
<script src="https://fb.me/react-0.14.8.js"></script>
|
||||
<!-- The ReactDOM Library -->
|
||||
<script src="https://fb.me/react-dom-0.14.8.js"></script>
|
||||
```
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
|
||||
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.14.8.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
|
||||
|
||||
### [Contributing Guide](https://reactjs.org/contributing/how-to-contribute.html)
|
||||
If you'd like to use [bower](http://bower.io), it's as easy as:
|
||||
|
||||
Read our [contributing guide](https://reactjs.org/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
```sh
|
||||
bower install --save react
|
||||
```
|
||||
|
||||
### Good First Issues
|
||||
And it's just as easy with [npm](http://npmjs.com):
|
||||
|
||||
```sh
|
||||
npm i --save react
|
||||
```
|
||||
|
||||
## Contribute
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
|
||||
|
||||
### Building Your Copy of React
|
||||
|
||||
The process to build `react.js` is built entirely on top of node.js, using many libraries you may already be familiar with.
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
|
||||
* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
|
||||
* You are familiar with `git`.
|
||||
|
||||
#### Build
|
||||
|
||||
Once you have the repository cloned, building a copy of `react.js` is really easy.
|
||||
|
||||
```sh
|
||||
# grunt-cli is needed by grunt; you might have this installed already
|
||||
npm install -g grunt-cli
|
||||
npm install
|
||||
grunt build
|
||||
```
|
||||
|
||||
At this point, you should now have a `build/` directory populated with everything you need to use React. The examples should all work.
|
||||
|
||||
### Grunt
|
||||
|
||||
We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
|
||||
|
||||
```sh
|
||||
# Build and run tests with PhantomJS
|
||||
grunt test
|
||||
# Lint the code with ESLint
|
||||
grunt lint
|
||||
# Wipe out build directory
|
||||
grunt clean
|
||||
```
|
||||
|
||||
### Good First Bug
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first bugs](https://github.com/facebook/react/labels/good%20first%20bug) that contain bugs which are fairly easy to fix. This is a great place to get started.
|
||||
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started.
|
||||
|
||||
### License
|
||||
|
||||
React is [MIT licensed](./LICENSE).
|
||||
React is [BSD licensed](./LICENSE). We also provide an additional [patent grant](./PATENTS).
|
||||
|
||||
React documentation is [Creative Commons licensed](./LICENSE-docs).
|
||||
|
||||
Examples provided in this repository and in the documentation are [separately licensed](./LICENSE-examples).
|
||||
|
||||
### More…
|
||||
|
||||
There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
|
||||
|
||||
## Troubleshooting
|
||||
See the [Troubleshooting Guide](https://github.com/facebook/react/wiki/Troubleshooting)
|
||||
|
||||
40
appveyor.yml
40
appveyor.yml
@@ -1,40 +0,0 @@
|
||||
image: Visual Studio 2017
|
||||
|
||||
# Fix line endings in Windows. (runs before repo cloning)
|
||||
init:
|
||||
- git config --global core.autocrlf input
|
||||
|
||||
environment:
|
||||
nodejs_version: 8
|
||||
JAVA_HOME: C:\Program Files\Java\jdk1.8.0
|
||||
|
||||
# Finish on first failed build
|
||||
matrix:
|
||||
fast_finish: true
|
||||
|
||||
platform:
|
||||
- x64
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
# Disable Visual Studio build and deploy
|
||||
build: off
|
||||
deploy: off
|
||||
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version $env:platform
|
||||
- yarn install --frozen-lockfile
|
||||
|
||||
test_script:
|
||||
- node --version
|
||||
- yarn lint
|
||||
# - yarn flow-ci
|
||||
- yarn build
|
||||
- yarn test
|
||||
- yarn prettier
|
||||
|
||||
cache:
|
||||
- node_modules
|
||||
- "%LOCALAPPDATA%/Yarn"
|
||||
217
dangerfile.js
217
dangerfile.js
@@ -1,217 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Hi, if this is your first time editing/reading a Dangerfile, here's a summary:
|
||||
// It's a JS runtime which helps you provide continuous feedback inside GitHub.
|
||||
//
|
||||
// You can see the docs here: http://danger.systems/js/
|
||||
//
|
||||
// If you want to test changes Danger, I'd recommend checking out an existing PR
|
||||
// and then running the `danger pr` command.
|
||||
//
|
||||
// You'll need a GitHub token, you can re-use this one:
|
||||
//
|
||||
// e622517d9f1136ea8900 07c6373666312cdfaa69
|
||||
//
|
||||
// (Just remove the space)
|
||||
//
|
||||
// So, for example:
|
||||
//
|
||||
// `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
|
||||
|
||||
const {markdown, danger} = require('danger');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const {generateResultsArray} = require('./scripts/rollup/stats');
|
||||
const {readFileSync} = require('fs');
|
||||
const {exec} = require('child_process');
|
||||
|
||||
const currentBuildResults = JSON.parse(
|
||||
readFileSync('./scripts/rollup/results.json')
|
||||
);
|
||||
|
||||
/**
|
||||
* Generates a Markdown table
|
||||
* @param {string[]} headers
|
||||
* @param {string[][]} body
|
||||
*/
|
||||
function generateMDTable(headers, body) {
|
||||
const tableHeaders = [
|
||||
headers.join(' | '),
|
||||
headers.map(() => ' --- ').join(' | '),
|
||||
];
|
||||
|
||||
const tablebody = body.map(r => r.join(' | '));
|
||||
return tableHeaders.join('\n') + '\n' + tablebody.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a user-readable string from a percentage change
|
||||
* @param {number} change
|
||||
* @param {boolean} includeEmoji
|
||||
*/
|
||||
function addPercent(change, includeEmoji) {
|
||||
if (!isFinite(change)) {
|
||||
// When a new package is created
|
||||
return 'n/a';
|
||||
}
|
||||
const formatted = (change * 100).toFixed(1);
|
||||
if (/^-|^0(?:\.0+)$/.test(formatted)) {
|
||||
return `${formatted}%`;
|
||||
} else {
|
||||
if (includeEmoji) {
|
||||
return `:small_red_triangle:+${formatted}%`;
|
||||
} else {
|
||||
return `+${formatted}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setBoldness(row, isBold) {
|
||||
if (isBold) {
|
||||
return row.map(element => `**${element}**`);
|
||||
} else {
|
||||
return row;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the commit that represents the merge between the current branch
|
||||
* and master.
|
||||
*/
|
||||
function git(args) {
|
||||
return new Promise(res => {
|
||||
exec('git ' + args, (err, stdout, stderr) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
} else {
|
||||
res(stdout.trim());
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
(async function() {
|
||||
// Use git locally to grab the commit which represents the place
|
||||
// where the branches differ
|
||||
const upstreamRepo = danger.github.pr.base.repo.full_name;
|
||||
const upstreamRef = danger.github.pr.base.ref;
|
||||
await git(`remote add upstream https://github.com/${upstreamRepo}.git`);
|
||||
await git('fetch upstream');
|
||||
const mergeBaseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
|
||||
|
||||
const commitURL = sha =>
|
||||
`http://react.zpao.com/builds/master/_commits/${sha}/results.json`;
|
||||
const response = await fetch(commitURL(mergeBaseCommit));
|
||||
|
||||
// Take the JSON of the build response and
|
||||
// make an array comparing the results for printing
|
||||
const previousBuildResults = await response.json();
|
||||
const results = generateResultsArray(
|
||||
currentBuildResults,
|
||||
previousBuildResults
|
||||
);
|
||||
|
||||
const packagesToShow = results
|
||||
.filter(
|
||||
r =>
|
||||
Math.abs(r.prevFileSizeAbsoluteChange) >= 300 || // bytes
|
||||
Math.abs(r.prevGzipSizeAbsoluteChange) >= 100 // bytes
|
||||
)
|
||||
.map(r => r.packageName);
|
||||
|
||||
if (packagesToShow.length) {
|
||||
let allTables = [];
|
||||
|
||||
// Highlight React and React DOM changes inline
|
||||
// e.g. react: `react.production.min.js`: -3%, `react.development.js`: +4%
|
||||
|
||||
if (packagesToShow.includes('react')) {
|
||||
const reactProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react'
|
||||
);
|
||||
if (
|
||||
reactProd.prevFileSizeChange !== 0 ||
|
||||
reactProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactProd.prevGzipSizeChange, true);
|
||||
markdown(`React: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (packagesToShow.includes('react-dom')) {
|
||||
const reactDOMProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react-dom'
|
||||
);
|
||||
if (
|
||||
reactDOMProd.prevFileSizeChange !== 0 ||
|
||||
reactDOMProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactDOMProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactDOMProd.prevGzipSizeChange, true);
|
||||
markdown(`ReactDOM: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Show a hidden summary table for all diffs
|
||||
|
||||
// eslint-disable-next-line no-var,no-for-of-loops/no-for-of-loops
|
||||
for (var name of new Set(packagesToShow)) {
|
||||
const thisBundleResults = results.filter(r => r.packageName === name);
|
||||
const changedFiles = thisBundleResults.filter(
|
||||
r => r.prevFileSizeChange !== 0 || r.prevGzipSizeChange !== 0
|
||||
);
|
||||
|
||||
const mdHeaders = [
|
||||
'File',
|
||||
'Filesize Diff',
|
||||
'Gzip Diff',
|
||||
'Prev Size',
|
||||
'Current Size',
|
||||
'Prev Gzip',
|
||||
'Current Gzip',
|
||||
'ENV',
|
||||
];
|
||||
|
||||
const mdRows = changedFiles.map(r => {
|
||||
const isProd = r.bundleType.includes('PROD');
|
||||
return setBoldness(
|
||||
[
|
||||
r.filename,
|
||||
addPercent(r.prevFileSizeChange, isProd),
|
||||
addPercent(r.prevGzipSizeChange, isProd),
|
||||
r.prevSize,
|
||||
r.prevFileSize,
|
||||
r.prevGzip,
|
||||
r.prevGzipSize,
|
||||
r.bundleType,
|
||||
],
|
||||
isProd
|
||||
);
|
||||
});
|
||||
|
||||
allTables.push(`\n## ${name}`);
|
||||
allTables.push(generateMDTable(mdHeaders, mdRows));
|
||||
}
|
||||
|
||||
const summary = `
|
||||
<details>
|
||||
<summary>Details of bundled changes.</summary>
|
||||
|
||||
<p>Comparing: ${mergeBaseCommit}...${danger.github.pr.head.sha}</p>
|
||||
|
||||
|
||||
${allTables.join('\n')}
|
||||
|
||||
</details>
|
||||
`;
|
||||
markdown(summary);
|
||||
}
|
||||
})();
|
||||
8
docs/404.md
Normal file
8
docs/404.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: single
|
||||
title: Page Not Found
|
||||
---
|
||||
|
||||
We couldn't find what you were looking for.
|
||||
|
||||
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
|
||||
19
docs/Gemfile
Normal file
19
docs/Gemfile
Normal file
@@ -0,0 +1,19 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'rake'
|
||||
|
||||
# jekyll, which builds it all
|
||||
# 2.0 includes sass processing
|
||||
gem 'jekyll', '~>2.0'
|
||||
|
||||
# Auto redirect pages
|
||||
gem 'jekyll-redirect-from'
|
||||
|
||||
# JSON
|
||||
gem 'json'
|
||||
|
||||
# For `rake watch`
|
||||
gem 'rb-fsevent'
|
||||
|
||||
# For markdown header cleanup
|
||||
gem 'sanitize', '~>2.0'
|
||||
85
docs/Gemfile.lock
Normal file
85
docs/Gemfile.lock
Normal file
@@ -0,0 +1,85 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
blankslate (2.1.2.4)
|
||||
celluloid (0.15.2)
|
||||
timers (~> 1.1.0)
|
||||
classifier (1.3.4)
|
||||
fast-stemmer (>= 1.0.0)
|
||||
coffee-script (2.3.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.7.1)
|
||||
colorator (0.1)
|
||||
execjs (2.2.1)
|
||||
fast-stemmer (1.0.2)
|
||||
ffi (1.9.3)
|
||||
jekyll (2.2.0)
|
||||
classifier (~> 1.3)
|
||||
colorator (~> 0.1)
|
||||
jekyll-coffeescript (~> 1.0)
|
||||
jekyll-gist (~> 1.0)
|
||||
jekyll-paginate (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.0)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 2.6.1)
|
||||
mercenary (~> 0.3.3)
|
||||
pygments.rb (~> 0.6.0)
|
||||
redcarpet (~> 3.1)
|
||||
safe_yaml (~> 1.0)
|
||||
toml (~> 0.1.0)
|
||||
jekyll-coffeescript (1.0.0)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-gist (1.1.0)
|
||||
jekyll-paginate (1.0.0)
|
||||
jekyll-redirect-from (0.5.0)
|
||||
jekyll (~> 2.0)
|
||||
jekyll-sass-converter (1.2.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-watch (1.1.0)
|
||||
listen (~> 2.7)
|
||||
json (1.8.1)
|
||||
kramdown (1.4.1)
|
||||
liquid (2.6.1)
|
||||
listen (2.7.9)
|
||||
celluloid (>= 0.15.2)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.4)
|
||||
mini_portile (0.6.0)
|
||||
nokogiri (1.6.3.1)
|
||||
mini_portile (= 0.6.0)
|
||||
parslet (1.5.0)
|
||||
blankslate (~> 2.0)
|
||||
posix-spawn (0.3.9)
|
||||
pygments.rb (0.6.0)
|
||||
posix-spawn (~> 0.3.6)
|
||||
yajl-ruby (~> 1.1.0)
|
||||
rake (10.3.2)
|
||||
rb-fsevent (0.9.4)
|
||||
rb-inotify (0.9.5)
|
||||
ffi (>= 0.5.0)
|
||||
redcarpet (3.1.2)
|
||||
safe_yaml (1.0.4)
|
||||
sanitize (2.0.6)
|
||||
nokogiri (>= 1.4.4)
|
||||
sass (3.3.14)
|
||||
timers (1.1.0)
|
||||
toml (0.1.1)
|
||||
parslet (~> 1.5.0)
|
||||
yajl-ruby (1.1.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 2.0)
|
||||
jekyll-redirect-from
|
||||
json
|
||||
rake
|
||||
rb-fsevent
|
||||
sanitize (~> 2.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.10.1
|
||||
67
docs/README.md
Normal file
67
docs/README.md
Normal file
@@ -0,0 +1,67 @@
|
||||
# React Documentation & Website
|
||||
|
||||
We use [Jekyll](http://jekyllrb.com/) to build the site using ([mostly](http://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/)) Markdown, and we host it by pushing HTML to [GitHub Pages](http://pages.github.com/).
|
||||
|
||||
## Installation
|
||||
|
||||
If you are working on the site, you will want to install and run a local copy of it.
|
||||
|
||||
### Dependencies
|
||||
|
||||
In order to use Jekyll, you will need to have Ruby installed.
|
||||
|
||||
- [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7)
|
||||
- [RubyGems](http://rubygems.org/) (version >= 1.3.7)
|
||||
- [Bundler](http://gembundler.com/)
|
||||
|
||||
Mac OS X comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`).
|
||||
Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
|
||||
Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies:
|
||||
|
||||
```sh
|
||||
$ cd react/docs
|
||||
$ bundle install # Might need sudo.
|
||||
$ npm install
|
||||
```
|
||||
|
||||
### Instructions
|
||||
|
||||
The site requires React, so first make sure you've built the project (via `grunt`).
|
||||
|
||||
Use Jekyll to serve the website locally (by default, at `http://localhost:4000`):
|
||||
|
||||
```sh
|
||||
$ cd react/docs
|
||||
$ bundle exec rake
|
||||
$ bundle exec jekyll serve -w
|
||||
$ open http://localhost:4000/react/
|
||||
```
|
||||
|
||||
We use [SASS](http://sass-lang.com/) (with [Bourbon](http://bourbon.io/)) for our CSS, and we use JSX to transform some of our JS.
|
||||
If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS.
|
||||
If you want to modify the CSS or JS, use [Rake](http://rake.rubyforge.org/) to compile them:
|
||||
|
||||
```sh
|
||||
$ cd react/docs
|
||||
$ bundle exec rake watch # Automatically compiles as needed.
|
||||
# bundle exec rake Manually compile CSS and JS.
|
||||
# bundle exec rake js Manually compile JS, only.
|
||||
```
|
||||
|
||||
## Afterthoughts
|
||||
|
||||
### Updating `facebook.github.io/react`
|
||||
|
||||
The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there, you can check it in.
|
||||
|
||||
**Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.
|
||||
|
||||
We also have a rake task that does the same thing (without creating commits). It expects the directory structure mentioned above.
|
||||
|
||||
```sh
|
||||
$ bundle exec rake release
|
||||
```
|
||||
|
||||
### Removing the Jekyll / Ruby Dependency
|
||||
|
||||
In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website.
|
||||
69
docs/Rakefile
Normal file
69
docs/Rakefile
Normal file
@@ -0,0 +1,69 @@
|
||||
require('rubygems')
|
||||
require('json')
|
||||
require('yaml')
|
||||
require('open-uri')
|
||||
|
||||
desc "download babel-browser"
|
||||
task :fetch_remotes do
|
||||
IO.copy_stream(
|
||||
open('https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'),
|
||||
'js/babel-browser.min.js'
|
||||
)
|
||||
end
|
||||
|
||||
desc "generate js from jsx"
|
||||
task :js do
|
||||
system "../node_modules/.bin/babel _js --out-dir=js"
|
||||
end
|
||||
|
||||
desc "watch js"
|
||||
task :watch do
|
||||
Process.spawn "../node_modules/.bin/babel _js --out-dir=js --watch"
|
||||
Process.waitall
|
||||
end
|
||||
|
||||
desc "update version to match ../package.json"
|
||||
task :update_version do
|
||||
react_version = JSON.parse(File.read('../package.json'))['version']
|
||||
site_config = YAML.load_file('_config.yml')
|
||||
if site_config['react_version'] != react_version
|
||||
site_config['react_version'] = react_version
|
||||
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
|
||||
end
|
||||
end
|
||||
|
||||
desc "update SRI hashes"
|
||||
task :update_hashes do
|
||||
map = {
|
||||
'react.js' => 'dev',
|
||||
'react.min.js' => 'prod',
|
||||
'react-with-addons.js' => 'addons_dev',
|
||||
'react-with-addons.min.js' => 'addons_prod',
|
||||
'react-dom.js' => 'dom_dev',
|
||||
'react-dom.min.js' => 'dom_prod',
|
||||
'react-dom-server.js' => 'dom_server_dev',
|
||||
'react-dom-server.min.js' => 'dom_server_prod'
|
||||
}
|
||||
site_config = YAML.load_file('_config.yml')
|
||||
map.each do |file, key|
|
||||
site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
|
||||
end
|
||||
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
|
||||
end
|
||||
|
||||
desc "update acknowledgements list"
|
||||
task :update_acknowledgements do
|
||||
authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}
|
||||
# split into cols here because nobody knows how to use liquid
|
||||
# need to to_f because ruby will keep slice_size as int and round on its own
|
||||
slice_size = (authors.size / 3.to_f).ceil
|
||||
cols = authors.each_slice(slice_size).to_a
|
||||
File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) }
|
||||
end
|
||||
|
||||
desc "build into ../../react-gh-pages"
|
||||
task :release => [:update_version, :js, :fetch_remotes] do
|
||||
system "jekyll build -d ../../react-gh-pages"
|
||||
end
|
||||
|
||||
task :default => [:js]
|
||||
48
docs/_config.yml
Normal file
48
docs/_config.yml
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
name: React
|
||||
description: A JavaScript library for building user interfaces
|
||||
url: https://facebook.github.io
|
||||
baseurl: "/react"
|
||||
permalink: "/blog/:year/:month/:day/:title.html"
|
||||
paginate_path: "/blog/page:num/"
|
||||
relative_permalinks: true
|
||||
paginate: 5
|
||||
timezone: America/Los_Angeles
|
||||
highlighter: pygments
|
||||
defaults:
|
||||
- scope:
|
||||
path: ''
|
||||
type: post
|
||||
values:
|
||||
layout: post
|
||||
- scope:
|
||||
path: docs
|
||||
type: page
|
||||
values:
|
||||
layout: docs
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- README.md
|
||||
- Rakefile
|
||||
- vendor/bundle
|
||||
markdown: redcarpet
|
||||
redcarpet:
|
||||
extensions:
|
||||
- fenced_code_blocks
|
||||
- footnotes
|
||||
sass:
|
||||
style: :compressed
|
||||
sass_dir: _css
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
react_version: 0.14.7
|
||||
react_hashes:
|
||||
dev: xQae1pUPdAKUe0u0KUTNt09zzdwheX4VSUsV8vatqM+t6X7rta01qOzessL808ox
|
||||
prod: zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ
|
||||
addons_dev: I5TF2q2QDmB31aN5lcClArdUo+WJH/Yi3hcH3PBVXFe5DYtYCFh7Jx/dmpba12zn
|
||||
addons_prod: KPHTQfiYMhtsIRbZcY4ri1lBYZQbj4ePsSdzODR2Bu5L5ts3APVyqwKPBThO5Hgc
|
||||
dom_dev: A1t0GCrR06cTHvMjaxeSE8XOiz6j7NvWdmxhN/9z748wEvJTVk13Rr8gMzTUnd8G
|
||||
dom_prod: ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m
|
||||
dom_server_dev: 3I5+eGB/ILYa6pQQX+rM9O0SyDltamM40RiZ5JvIijSYEfVGZU0vY4Iwx9a1eYyD
|
||||
dom_server_prod: Kt9dEqXzv00orFPW2o3H+kxQtSiNO8EqXsXJT3i99rCcp74N/Km98V0kUxAzy44k
|
||||
173
docs/_css/_solarized.scss
Normal file
173
docs/_css/_solarized.scss
Normal file
@@ -0,0 +1,173 @@
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
.cm-s-solarized-light {
|
||||
background-color: #f8f5ec;
|
||||
color: #637c84;
|
||||
}
|
||||
.cm-s-solarized-light .emphasis {
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-light .dotted {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light .CodeMirror-gutter {
|
||||
background-color: #eee8d5;
|
||||
border-right: 3px solid #eee8d5;
|
||||
}
|
||||
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.cm-s-solarized-light .CodeMirror-cursor {
|
||||
border-left-color: #002b36 !important;
|
||||
}
|
||||
.cm-s-solarized-light .CodeMirror-matchingbracket {
|
||||
color: #002b36;
|
||||
background-color: #eee8d5;
|
||||
box-shadow: 0 0 10px #eee8d5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
|
||||
color: #002b36;
|
||||
background-color: #eee8d5;
|
||||
box-shadow: 0 0 10px #eee8d5;
|
||||
font-weight: bold;
|
||||
color: #dc322f;
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-keyword {
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-atom {
|
||||
color: #2aa198;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-number {
|
||||
color: #586e75;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-def {
|
||||
color: #637c84;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-variable {
|
||||
color: #637c84;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-variable-2 {
|
||||
color: #b58900;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-variable-3 {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-comment {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-property {
|
||||
color: #637c84;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-operator {
|
||||
color: #657b83;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-string {
|
||||
color: #36958e;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-error {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-bracket {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-tag {
|
||||
color: #657b83;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-attribute {
|
||||
color: #586e75;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-meta {
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-dark {
|
||||
background-color: #002b36;
|
||||
color: #839496;
|
||||
}
|
||||
.cm-s-solarized-dark .emphasis {
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark .dotted {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark .CodeMirror-gutter {
|
||||
background-color: #073642;
|
||||
border-right: 3px solid #073642;
|
||||
}
|
||||
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
|
||||
color: #586e75;
|
||||
}
|
||||
.cm-s-solarized-dark .CodeMirror-cursor {
|
||||
border-left-color: #fdf6e3 !important;
|
||||
}
|
||||
.cm-s-solarized-dark .CodeMirror-matchingbracket {
|
||||
color: #fdf6e3;
|
||||
background-color: #073642;
|
||||
box-shadow: 0 0 10px #073642;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
|
||||
color: #fdf6e3;
|
||||
background-color: #073642;
|
||||
box-shadow: 0 0 10px #073642;
|
||||
font-weight: bold;
|
||||
color: #dc322f;
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-keyword {
|
||||
color: #839496;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-atom {
|
||||
color: #2aa198;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-number {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-def {
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-variable {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-variable-2 {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-variable-3 {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-comment {
|
||||
color: #586e75;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-property {
|
||||
color: #b58900;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-operator {
|
||||
color: #839496;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-string {
|
||||
color: #6c71c4;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-error {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-bracket {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-tag {
|
||||
color: #839496;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-attribute {
|
||||
color: #93a1a1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-meta {
|
||||
color: #268bd2;
|
||||
}
|
||||
133
docs/_css/_typography.scss
Normal file
133
docs/_css/_typography.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
@import 'variables.scss';
|
||||
|
||||
$textColor: $mediumColor;
|
||||
$textColorLight: lighten($textColor, 20%);
|
||||
|
||||
html {
|
||||
font-family: $helvetica;
|
||||
font-family: proxima-nova, $helvetica;
|
||||
color: $textColor;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
font-weight: normal;
|
||||
color: $textColorLight
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 10px 25px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $linkInteract;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
22
docs/_css/_variables.scss
Normal file
22
docs/_css/_variables.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
$primary: #cc7a6f;
|
||||
$linkColor: darken($primary, 9%);
|
||||
$linkInteract: darken($linkColor, 9%);
|
||||
$pageBg: #f9f9f9;
|
||||
|
||||
$lightColor: #e9e9e9;
|
||||
$mediumestColor: #666;
|
||||
$mediumColor: #484848;
|
||||
$darkColor: #2d2d2d;
|
||||
$darkestColor: #222222;
|
||||
$blueColor: #61dafb;
|
||||
$orangeColor: complement($blueColor);
|
||||
|
||||
$lightTextColor: #fafafa;
|
||||
$mediumTextColor: #aaa;
|
||||
$darkTextColor: $mediumColor;
|
||||
|
||||
$buttonBlueTop: #77a3d2;
|
||||
$buttonBlueBottom: #4783c2;
|
||||
$buttonGreyTop: #9a9a9a;
|
||||
$buttonGreyBottom: #646464;
|
||||
|
||||
8
docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
vendored
Normal file
8
docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
//************************************************************************//
|
||||
// These mixins/functions are deprecated
|
||||
// They will be removed in the next MAJOR version release
|
||||
//************************************************************************//
|
||||
@mixin inline-block {
|
||||
display: inline-block;
|
||||
@warn "inline-block mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
79
docs/_css/bourbon/_bourbon.scss
vendored
Normal file
79
docs/_css/bourbon/_bourbon.scss
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
// Settings
|
||||
@import "settings/prefixer";
|
||||
@import "settings/px-to-em";
|
||||
@import "settings/asset-pipeline";
|
||||
|
||||
// Custom Helpers
|
||||
@import "helpers/convert-units";
|
||||
@import "helpers/gradient-positions-parser";
|
||||
@import "helpers/is-num";
|
||||
@import "helpers/linear-angle-parser";
|
||||
@import "helpers/linear-gradient-parser";
|
||||
@import "helpers/linear-positions-parser";
|
||||
@import "helpers/linear-side-corner-parser";
|
||||
@import "helpers/radial-arg-parser";
|
||||
@import "helpers/radial-positions-parser";
|
||||
@import "helpers/radial-gradient-parser";
|
||||
@import "helpers/render-gradients";
|
||||
@import "helpers/shape-size-stripper";
|
||||
@import "helpers/str-to-num";
|
||||
|
||||
// Custom Functions
|
||||
@import "functions/assign";
|
||||
@import "functions/color-lightness";
|
||||
@import "functions/flex-grid";
|
||||
@import "functions/golden-ratio";
|
||||
@import "functions/grid-width";
|
||||
@import "functions/modular-scale";
|
||||
@import "functions/px-to-em";
|
||||
@import "functions/px-to-rem";
|
||||
@import "functions/strip-units";
|
||||
@import "functions/tint-shade";
|
||||
@import "functions/transition-property-name";
|
||||
@import "functions/unpack";
|
||||
|
||||
// CSS3 Mixins
|
||||
@import "css3/animation";
|
||||
@import "css3/appearance";
|
||||
@import "css3/backface-visibility";
|
||||
@import "css3/background";
|
||||
@import "css3/background-image";
|
||||
@import "css3/border-image";
|
||||
@import "css3/border-radius";
|
||||
@import "css3/box-sizing";
|
||||
@import "css3/calc";
|
||||
@import "css3/columns";
|
||||
@import "css3/filter";
|
||||
@import "css3/flex-box";
|
||||
@import "css3/font-face";
|
||||
@import "css3/font-feature-settings";
|
||||
@import "css3/hyphens";
|
||||
@import "css3/hidpi-media-query";
|
||||
@import "css3/image-rendering";
|
||||
@import "css3/keyframes";
|
||||
@import "css3/linear-gradient";
|
||||
@import "css3/perspective";
|
||||
@import "css3/radial-gradient";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
@import "css3/user-select";
|
||||
@import "css3/placeholder";
|
||||
|
||||
// Addons & other mixins
|
||||
@import "addons/button";
|
||||
@import "addons/clearfix";
|
||||
@import "addons/directional-values";
|
||||
@import "addons/ellipsis";
|
||||
@import "addons/font-family";
|
||||
@import "addons/hide-text";
|
||||
@import "addons/html5-input-types";
|
||||
@import "addons/position";
|
||||
@import "addons/prefixer";
|
||||
@import "addons/retina-image";
|
||||
@import "addons/size";
|
||||
@import "addons/timing-functions";
|
||||
@import "addons/triangle";
|
||||
@import "addons/word-wrap";
|
||||
|
||||
// Soon to be deprecated Mixins
|
||||
@import "bourbon-deprecated-upcoming";
|
||||
374
docs/_css/bourbon/addons/_button.scss
vendored
Normal file
374
docs/_css/bourbon/addons/_button.scss
vendored
Normal file
@@ -0,0 +1,374 @@
|
||||
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == color {
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: #4294f0;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == color {
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == number {
|
||||
$padding: $base-color;
|
||||
$text-size: $style;
|
||||
$base-color: #4294f0;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == #4294f0 {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Selector Style Button
|
||||
//************************************************************************//
|
||||
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
||||
// Grayscale button
|
||||
@if $type == simple and $b-color == grayscale($b-color) {
|
||||
@include simple($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == shiny and $b-color == grayscale($b-color) {
|
||||
@include shiny($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == pill and $b-color == grayscale($b-color) {
|
||||
@include pill($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == flat and $b-color == grayscale($b-color) {
|
||||
@include flat($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
// Colored button
|
||||
@if $type == simple {
|
||||
@include simple($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == shiny {
|
||||
@include shiny($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == pill {
|
||||
@include pill($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == flat {
|
||||
@include flat($b-color, false, $t-size, $pad);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Simple Button
|
||||
//************************************************************************//
|
||||
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
}
|
||||
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-active: grayscale($border-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
border: 1px solid $border-active;
|
||||
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Shiny Button
|
||||
//************************************************************************//
|
||||
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$fourth-stop: grayscale($fourth-stop);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$second-stop: grayscale($second-stop);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
$third-stop: grayscale($third-stop);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-bottom: 1px solid $border-bottom;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||
|
||||
@if $grayscale == true {
|
||||
$first-stop-hover: grayscale($first-stop-hover);
|
||||
$second-stop-hover: grayscale($second-stop-hover);
|
||||
$third-stop-hover: grayscale($third-stop-hover);
|
||||
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
@include linear-gradient(top, $first-stop-hover 0%,
|
||||
$second-stop-hover 50%,
|
||||
$third-stop-hover 50%,
|
||||
$fourth-stop-hover 100%);
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||
|
||||
@if $grayscale == true {
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pill Button
|
||||
//************************************************************************//
|
||||
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$active-color: grayscale($active-color);
|
||||
$border-active: grayscale($border-active);
|
||||
$border-bottom-active: grayscale($border-bottom-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
$text-shadow-active: grayscale($text-shadow-active);
|
||||
}
|
||||
|
||||
background: $active-color;
|
||||
border: 1px solid $border-active;
|
||||
border-bottom: 1px solid $border-bottom-active;
|
||||
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
||||
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Flat Button
|
||||
//************************************************************************//
|
||||
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
}
|
||||
|
||||
background-color: $base-color;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
padding: 7px 18px;
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled){
|
||||
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
}
|
||||
|
||||
background-color: $base-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-active: grayscale($base-color-active);
|
||||
}
|
||||
|
||||
background-color: $base-color-active;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
23
docs/_css/bourbon/addons/_clearfix.scss
vendored
Normal file
23
docs/_css/bourbon/addons/_clearfix.scss
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
|
||||
//
|
||||
// Example usage:
|
||||
//
|
||||
// // Contain all floats within .wrapper
|
||||
// .wrapper {
|
||||
// @include clearfix;
|
||||
// .content,
|
||||
// .sidebar {
|
||||
// float : left;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
|
||||
// Acknowledgements
|
||||
// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
|
||||
111
docs/_css/bourbon/addons/_directional-values.scss
vendored
Normal file
111
docs/_css/bourbon/addons/_directional-values.scss
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
// directional-property mixins are shorthands
|
||||
// for writing properties like the following
|
||||
//
|
||||
// @include margin(null 0 10px);
|
||||
// ------
|
||||
// margin-right: 0;
|
||||
// margin-bottom: 10px;
|
||||
// margin-left: 0;
|
||||
//
|
||||
// - or -
|
||||
//
|
||||
// @include border-style(dotted null);
|
||||
// ------
|
||||
// border-top-style: dotted;
|
||||
// border-bottom-style: dotted;
|
||||
//
|
||||
// ------
|
||||
//
|
||||
// Note: You can also use false instead of null
|
||||
|
||||
@function collapse-directionals($vals) {
|
||||
$output: null;
|
||||
|
||||
$A: nth( $vals, 1 );
|
||||
$B: if( length($vals) < 2, $A, nth($vals, 2));
|
||||
$C: if( length($vals) < 3, $A, nth($vals, 3));
|
||||
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
|
||||
|
||||
@if $A == 0 { $A: 0 }
|
||||
@if $B == 0 { $B: 0 }
|
||||
@if $C == 0 { $C: 0 }
|
||||
@if $D == 0 { $D: 0 }
|
||||
|
||||
@if $A == $B and $A == $C and $A == $D { $output: $A }
|
||||
@else if $A == $C and $B == $D { $output: $A $B }
|
||||
@else if $B == $D { $output: $A $B $C }
|
||||
@else { $output: $A $B $C $D }
|
||||
|
||||
@return $output;
|
||||
}
|
||||
|
||||
@function contains-falsy($list) {
|
||||
@each $item in $list {
|
||||
@if not $item {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
|
||||
@mixin directional-property($pre, $suf, $vals) {
|
||||
// Property Names
|
||||
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
|
||||
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
|
||||
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
|
||||
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
||||
$all: $pre + if($suf, "-#{$suf}", "");
|
||||
|
||||
$vals: collapse-directionals($vals);
|
||||
|
||||
@if contains-falsy($vals) {
|
||||
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
|
||||
|
||||
@if length($vals) == 1 {
|
||||
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
|
||||
} @else {
|
||||
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
|
||||
}
|
||||
|
||||
// prop: top/bottom right/left
|
||||
@if length($vals) == 2 {
|
||||
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
|
||||
// prop: top right/left bottom
|
||||
} @else if length($vals) == 3 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
|
||||
// prop: top right bottom left
|
||||
} @else if length($vals) == 4 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
|
||||
}
|
||||
|
||||
// prop: top/right/bottom/left
|
||||
} @else {
|
||||
#{$all}: $vals;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin($vals...) {
|
||||
@include directional-property(margin, false, $vals...);
|
||||
}
|
||||
|
||||
@mixin padding($vals...) {
|
||||
@include directional-property(padding, false, $vals...);
|
||||
}
|
||||
|
||||
@mixin border-style($vals...) {
|
||||
@include directional-property(border, style, $vals...);
|
||||
}
|
||||
|
||||
@mixin border-color($vals...) {
|
||||
@include directional-property(border, color, $vals...);
|
||||
}
|
||||
|
||||
@mixin border-width($vals...) {
|
||||
@include directional-property(border, width, $vals...);
|
||||
}
|
||||
7
docs/_css/bourbon/addons/_ellipsis.scss
vendored
Normal file
7
docs/_css/bourbon/addons/_ellipsis.scss
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
@mixin ellipsis($width: 100%) {
|
||||
display: inline-block;
|
||||
max-width: $width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
5
docs/_css/bourbon/addons/_font-family.scss
vendored
Normal file
5
docs/_css/bourbon/addons/_font-family.scss
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
|
||||
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
|
||||
$verdana: Verdana, Geneva, sans-serif;
|
||||
10
docs/_css/bourbon/addons/_hide-text.scss
vendored
Normal file
10
docs/_css/bourbon/addons/_hide-text.scss
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
@mixin hide-text {
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
86
docs/_css/bourbon/addons/_html5-input-types.scss
vendored
Normal file
86
docs/_css/bourbon/addons/_html5-input-types.scss
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
//************************************************************************//
|
||||
// Generate a variable ($all-text-inputs) with a list of all html5
|
||||
// input types that have a text-based input, excluding textarea.
|
||||
// http://diveintohtml5.org/forms.html
|
||||
//************************************************************************//
|
||||
$inputs-list: 'input[type="email"]',
|
||||
'input[type="number"]',
|
||||
'input[type="password"]',
|
||||
'input[type="search"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="text"]',
|
||||
'input[type="url"]',
|
||||
|
||||
// Webkit & Gecko may change the display of these in the future
|
||||
'input[type="color"]',
|
||||
'input[type="date"]',
|
||||
'input[type="datetime"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="month"]',
|
||||
'input[type="time"]',
|
||||
'input[type="week"]';
|
||||
|
||||
// Bare inputs
|
||||
//************************************************************************//
|
||||
$all-text-inputs: assign-inputs($inputs-list);
|
||||
|
||||
// Hover Pseudo-class
|
||||
//************************************************************************//
|
||||
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
|
||||
|
||||
// Focus Pseudo-class
|
||||
//************************************************************************//
|
||||
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
|
||||
|
||||
|
||||
|
||||
// You must use interpolation on the variable:
|
||||
// #{$all-text-inputs}
|
||||
// #{$all-text-inputs-hover}
|
||||
// #{$all-text-inputs-focus}
|
||||
|
||||
// Example
|
||||
//************************************************************************//
|
||||
// #{$all-text-inputs}, textarea {
|
||||
// border: 1px solid red;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
//************************************************************************//
|
||||
// Generate a variable ($all-button-inputs) with a list of all html5
|
||||
// input types that have a button-based input, excluding button.
|
||||
//************************************************************************//
|
||||
$inputs-button-list: 'input[type="button"]',
|
||||
'input[type="reset"]',
|
||||
'input[type="submit"]';
|
||||
|
||||
// Bare inputs
|
||||
//************************************************************************//
|
||||
$all-button-inputs: assign-inputs($inputs-button-list);
|
||||
|
||||
// Hover Pseudo-class
|
||||
//************************************************************************//
|
||||
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
|
||||
|
||||
// Focus Pseudo-class
|
||||
//************************************************************************//
|
||||
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
|
||||
|
||||
// Active Pseudo-class
|
||||
//************************************************************************//
|
||||
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
|
||||
|
||||
|
||||
|
||||
// You must use interpolation on the variable:
|
||||
// #{$all-button-inputs}
|
||||
// #{$all-button-inputs-hover}
|
||||
// #{$all-button-inputs-focus}
|
||||
// #{$all-button-inputs-active}
|
||||
|
||||
// Example
|
||||
//************************************************************************//
|
||||
// #{$all-button-inputs}, button {
|
||||
// border: 1px solid red;
|
||||
// }
|
||||
32
docs/_css/bourbon/addons/_position.scss
vendored
Normal file
32
docs/_css/bourbon/addons/_position.scss
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
@mixin position ($position: relative, $coordinates: null null null null) {
|
||||
|
||||
@if type-of($position) == list {
|
||||
$coordinates: $position;
|
||||
$position: relative;
|
||||
}
|
||||
|
||||
$coordinates: unpack($coordinates);
|
||||
|
||||
$top: nth($coordinates, 1);
|
||||
$right: nth($coordinates, 2);
|
||||
$bottom: nth($coordinates, 3);
|
||||
$left: nth($coordinates, 4);
|
||||
|
||||
position: $position;
|
||||
|
||||
@if ($top and $top == auto) or (type-of($top) == number) {
|
||||
top: $top;
|
||||
}
|
||||
|
||||
@if ($right and $right == auto) or (type-of($right) == number) {
|
||||
right: $right;
|
||||
}
|
||||
|
||||
@if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
@if ($left and $left == auto) or (type-of($left) == number) {
|
||||
left: $left;
|
||||
}
|
||||
}
|
||||
45
docs/_css/bourbon/addons/_prefixer.scss
vendored
Normal file
45
docs/_css/bourbon/addons/_prefixer.scss
vendored
Normal file
@@ -0,0 +1,45 @@
|
||||
//************************************************************************//
|
||||
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
|
||||
//************************************************************************//
|
||||
// Variables located in /settings/_prefixer.scss
|
||||
|
||||
@mixin prefixer ($property, $value, $prefixes) {
|
||||
@each $prefix in $prefixes {
|
||||
@if $prefix == webkit {
|
||||
@if $prefix-for-webkit {
|
||||
-webkit-#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else if $prefix == moz {
|
||||
@if $prefix-for-mozilla {
|
||||
-moz-#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else if $prefix == ms {
|
||||
@if $prefix-for-microsoft {
|
||||
-ms-#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else if $prefix == o {
|
||||
@if $prefix-for-opera {
|
||||
-o-#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else if $prefix == spec {
|
||||
@if $prefix-for-spec {
|
||||
#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@warn "Unrecognized prefix: #{$prefix}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disable-prefix-for-all() {
|
||||
$prefix-for-webkit: false !global;
|
||||
$prefix-for-mozilla: false !global;
|
||||
$prefix-for-microsoft: false !global;
|
||||
$prefix-for-opera: false !global;
|
||||
$prefix-for-spec: false !global;
|
||||
}
|
||||
31
docs/_css/bourbon/addons/_retina-image.scss
vendored
Normal file
31
docs/_css/bourbon/addons/_retina-image.scss
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
|
||||
@if $asset-pipeline {
|
||||
background-image: image-url("#{$filename}.#{$extension}");
|
||||
}
|
||||
@else {
|
||||
background-image: url("#{$filename}.#{$extension}");
|
||||
}
|
||||
|
||||
@include hidpi {
|
||||
@if $asset-pipeline {
|
||||
@if $retina-filename {
|
||||
background-image: image-url("#{$retina-filename}.#{$extension}");
|
||||
}
|
||||
@else {
|
||||
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@if $retina-filename {
|
||||
background-image: url("#{$retina-filename}.#{$extension}");
|
||||
}
|
||||
@else {
|
||||
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
}
|
||||
|
||||
background-size: $background-size;
|
||||
|
||||
}
|
||||
}
|
||||
16
docs/_css/bourbon/addons/_size.scss
vendored
Normal file
16
docs/_css/bourbon/addons/_size.scss
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
@mixin size($size) {
|
||||
$height: nth($size, 1);
|
||||
$width: $height;
|
||||
|
||||
@if length($size) > 1 {
|
||||
$height: nth($size, 2);
|
||||
}
|
||||
|
||||
@if $height == auto or (type-of($height) == number and not unitless($height)) {
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@if $width == auto or (type-of($width) == number and not unitless($width)) {
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
32
docs/_css/bourbon/addons/_timing-functions.scss
vendored
Normal file
32
docs/_css/bourbon/addons/_timing-functions.scss
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
||||
// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
|
||||
|
||||
// EASE IN
|
||||
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
|
||||
// EASE OUT
|
||||
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
|
||||
// EASE IN OUT
|
||||
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
83
docs/_css/bourbon/addons/_triangle.scss
vendored
Normal file
83
docs/_css/bourbon/addons/_triangle.scss
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
@mixin triangle ($size, $color, $direction) {
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
$width: nth($size, 1);
|
||||
$height: nth($size, length($size));
|
||||
|
||||
$foreground-color: nth($color, 1);
|
||||
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||
|
||||
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
||||
|
||||
$width: $width / 2;
|
||||
$height: if(length($size) > 1, $height, $height/2);
|
||||
|
||||
@if $direction == up {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
} @else if $direction == right {
|
||||
border-top: $width solid $background-color;
|
||||
border-bottom: $width solid $background-color;
|
||||
border-left: $height solid $foreground-color;
|
||||
|
||||
} @else if $direction == down {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
} @else if $direction == left {
|
||||
border-top: $width solid $background-color;
|
||||
border-bottom: $width solid $background-color;
|
||||
border-right: $height solid $foreground-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == up-right) or ($direction == up-left) {
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
@if $direction == up-right {
|
||||
border-left: $width solid $background-color;
|
||||
|
||||
} @else if $direction == up-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == down-right) or ($direction == down-left) {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
@if $direction == down-right {
|
||||
border-left: $width solid $background-color;
|
||||
|
||||
} @else if $direction == down-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == inset-up) {
|
||||
border-width: $height $width;
|
||||
border-style: solid;
|
||||
border-color: $background-color $background-color $foreground-color;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-down) {
|
||||
border-width: $height $width;
|
||||
border-style: solid;
|
||||
border-color: $foreground-color $background-color $background-color;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-right) {
|
||||
border-width: $width $height;
|
||||
border-style: solid;
|
||||
border-color: $background-color $background-color $background-color $foreground-color;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-left) {
|
||||
border-width: $width $height;
|
||||
border-style: solid;
|
||||
border-color: $background-color $foreground-color $background-color $background-color;
|
||||
}
|
||||
}
|
||||
8
docs/_css/bourbon/addons/_word-wrap.scss
vendored
Normal file
8
docs/_css/bourbon/addons/_word-wrap.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
@mixin word-wrap($wrap: break-word) {
|
||||
word-wrap: $wrap;
|
||||
|
||||
@if $wrap == break-word {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
52
docs/_css/bourbon/css3/_animation.scss
vendored
Normal file
52
docs/_css/bourbon/css3/_animation.scss
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
||||
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
||||
|
||||
// Official animation shorthand property.
|
||||
@mixin animation ($animations...) {
|
||||
@include prefixer(animation, $animations, webkit moz spec);
|
||||
}
|
||||
|
||||
// Individual Animation Properties
|
||||
@mixin animation-name ($names...) {
|
||||
@include prefixer(animation-name, $names, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-duration ($times...) {
|
||||
@include prefixer(animation-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-timing-function ($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out
|
||||
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-iteration-count ($values...) {
|
||||
// infinite | <number>
|
||||
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-direction ($directions...) {
|
||||
// normal | alternate
|
||||
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-play-state ($states...) {
|
||||
// running | paused
|
||||
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-delay ($times...) {
|
||||
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-fill-mode ($modes...) {
|
||||
// none | forwards | backwards | both
|
||||
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||
}
|
||||
3
docs/_css/bourbon/css3/_appearance.scss
vendored
Normal file
3
docs/_css/bourbon/css3/_appearance.scss
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
@mixin appearance ($value) {
|
||||
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||
}
|
||||
6
docs/_css/bourbon/css3/_backface-visibility.scss
vendored
Normal file
6
docs/_css/bourbon/css3/_backface-visibility.scss
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
//************************************************************************//
|
||||
// Backface-visibility mixin
|
||||
//************************************************************************//
|
||||
@mixin backface-visibility($visibility) {
|
||||
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||
}
|
||||
42
docs/_css/bourbon/css3/_background-image.scss
vendored
Normal file
42
docs/_css/bourbon/css3/_background-image.scss
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
//************************************************************************//
|
||||
// Background-image property for adding multiple background images with
|
||||
// gradients, or for stringing multiple gradients together.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background-image($images...) {
|
||||
$webkit-images: ();
|
||||
$spec-images: ();
|
||||
|
||||
@each $image in $images {
|
||||
$webkit-image: ();
|
||||
$spec-image: ();
|
||||
|
||||
@if (type-of($image) == string) {
|
||||
$url-str: str-slice($image, 0, 3);
|
||||
$gradient-type: str-slice($image, 0, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-image: $image;
|
||||
$spec-image: $image;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||||
$spec-images: append($spec-images, $spec-image, comma);
|
||||
}
|
||||
|
||||
background-image: $webkit-images;
|
||||
background-image: $spec-images;
|
||||
}
|
||||
55
docs/_css/bourbon/css3/_background.scss
vendored
Normal file
55
docs/_css/bourbon/css3/_background.scss
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
//************************************************************************//
|
||||
// Background property for adding multiple backgrounds using shorthand
|
||||
// notation.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background($backgrounds...) {
|
||||
$webkit-backgrounds: ();
|
||||
$spec-backgrounds: ();
|
||||
|
||||
@each $background in $backgrounds {
|
||||
$webkit-background: ();
|
||||
$spec-background: ();
|
||||
$background-type: type-of($background);
|
||||
|
||||
@if $background-type == string or list {
|
||||
$background-str: if($background-type == list, nth($background, 1), $background);
|
||||
|
||||
$url-str: str-slice($background-str, 0, 3);
|
||||
$gradient-type: str-slice($background-str, 0, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||||
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||||
}
|
||||
|
||||
background: $webkit-backgrounds;
|
||||
background: $spec-backgrounds;
|
||||
}
|
||||
59
docs/_css/bourbon/css3/_border-image.scss
vendored
Normal file
59
docs/_css/bourbon/css3/_border-image.scss
vendored
Normal file
@@ -0,0 +1,59 @@
|
||||
@mixin border-image($borders...) {
|
||||
$webkit-borders: ();
|
||||
$spec-borders: ();
|
||||
|
||||
@each $border in $borders {
|
||||
$webkit-border: ();
|
||||
$spec-border: ();
|
||||
$border-type: type-of($border);
|
||||
|
||||
@if $border-type == string or list {
|
||||
$border-str: if($border-type == list, nth($border, 1), $border);
|
||||
|
||||
$url-str: str-slice($border-str, 0, 3);
|
||||
$gradient-type: str-slice($border-str, 0, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
$webkit-borders: append($webkit-borders, $webkit-border, comma);
|
||||
$spec-borders: append($spec-borders, $spec-border, comma);
|
||||
}
|
||||
|
||||
-webkit-border-image: $webkit-borders;
|
||||
border-image: $spec-borders;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
// @include border-image(url("image.png"));
|
||||
// @include border-image(url("image.png") 20 stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||
22
docs/_css/bourbon/css3/_border-radius.scss
vendored
Normal file
22
docs/_css/bourbon/css3/_border-radius.scss
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
//************************************************************************//
|
||||
// Shorthand Border-radius mixins
|
||||
//************************************************************************//
|
||||
@mixin border-top-radius($radii) {
|
||||
@include prefixer(border-top-left-radius, $radii, spec);
|
||||
@include prefixer(border-top-right-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
@include prefixer(border-bottom-left-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-right-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
@include prefixer(border-top-left-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-left-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
@include prefixer(border-top-right-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-right-radius, $radii, spec);
|
||||
}
|
||||
4
docs/_css/bourbon/css3/_box-sizing.scss
vendored
Normal file
4
docs/_css/bourbon/css3/_box-sizing.scss
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin box-sizing ($box) {
|
||||
// content-box | border-box | inherit
|
||||
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||
}
|
||||
4
docs/_css/bourbon/css3/_calc.scss
vendored
Normal file
4
docs/_css/bourbon/css3/_calc.scss
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin calc($property, $value) {
|
||||
#{$property}: -webkit-calc(#{$value});
|
||||
#{$property}: calc(#{$value});
|
||||
}
|
||||
47
docs/_css/bourbon/css3/_columns.scss
vendored
Normal file
47
docs/_css/bourbon/css3/_columns.scss
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
@mixin columns($arg: auto) {
|
||||
// <column-count> || <column-width>
|
||||
@include prefixer(columns, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-count($int: auto) {
|
||||
// auto || integer
|
||||
@include prefixer(column-count, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-gap($length: normal) {
|
||||
// normal || length
|
||||
@include prefixer(column-gap, $length, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-fill($arg: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-fill, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule($arg) {
|
||||
// <border-width> || <border-style> || <color>
|
||||
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-style($style: none) {
|
||||
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-width ($width: none) {
|
||||
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-span($arg: none) {
|
||||
// none || all
|
||||
@include prefixer(column-span, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-width($length: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-width, $length, webkit moz spec);
|
||||
}
|
||||
5
docs/_css/bourbon/css3/_filter.scss
vendored
Normal file
5
docs/_css/bourbon/css3/_filter.scss
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
@mixin filter($function: none) {
|
||||
// <filter-function> [<filter-function]* | none
|
||||
@include prefixer(filter, $function, webkit spec);
|
||||
}
|
||||
|
||||
321
docs/_css/bourbon/css3/_flex-box.scss
vendored
Normal file
321
docs/_css/bourbon/css3/_flex-box.scss
vendored
Normal file
@@ -0,0 +1,321 @@
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
|
||||
// Custom shorthand notation for flexbox
|
||||
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||
@include display-box;
|
||||
@include box-orient($orient);
|
||||
@include box-pack($pack);
|
||||
@include box-align($align);
|
||||
}
|
||||
|
||||
@mixin display-box {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox; // IE 10
|
||||
display: box;
|
||||
}
|
||||
|
||||
@mixin box-orient($orient: inline-axis) {
|
||||
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-pack($pack: start) {
|
||||
// start|end|center|justify
|
||||
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||
-ms-flex-pack: $pack; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-align($align: stretch) {
|
||||
// start|end|center|baseline|stretch
|
||||
@include prefixer(box-align, $align, webkit moz spec);
|
||||
-ms-flex-align: $align; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-direction($direction: normal) {
|
||||
// normal|reverse|inherit
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
-ms-flex-direction: $direction; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-lines($lines: single) {
|
||||
// single|multiple
|
||||
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-ordinal-group($int: 1) {
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
-ms-flex-order: $int; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex($value: 0.0) {
|
||||
@include prefixer(box-flex, $value, webkit moz spec);
|
||||
-ms-flex: $value; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex-group($int: 1) {
|
||||
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
// Unified attributes for 2009, 2011, and 2012 flavours.
|
||||
|
||||
// 2009 - display (box | inline-box)
|
||||
// 2011 - display (flexbox | inline-flexbox)
|
||||
// 2012 - display (flex | inline-flex)
|
||||
@mixin display($value) {
|
||||
// flex | inline-flex
|
||||
@if $value == "flex" {
|
||||
// 2009
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
|
||||
// 2012
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox; // 2011 (IE 10)
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@elseif $value == "inline-flex" {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: inline-box;
|
||||
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@else {
|
||||
display: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// 2009 - box-flex (integer)
|
||||
// 2011 - flex (decimal | width decimal)
|
||||
// 2012 - flex (integer integer width)
|
||||
@mixin flex($value) {
|
||||
|
||||
// Grab flex-grow for older browsers.
|
||||
$flex-grow: nth($value, 1);
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10), 2012
|
||||
@include prefixer(flex, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
|
||||
// - box-direction (normal | reverse)
|
||||
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
@mixin flex-direction($value: row) {
|
||||
|
||||
// Alt values.
|
||||
$value-2009: $value;
|
||||
$value-2011: $value;
|
||||
$direction: "normal";
|
||||
|
||||
@if $value == row {
|
||||
$value-2009: horizontal;
|
||||
}
|
||||
|
||||
@elseif $value == "row-reverse" {
|
||||
$value-2009: horizontal;
|
||||
$direction: reverse;
|
||||
}
|
||||
|
||||
@elseif $value == column {
|
||||
$value-2009: vertical;
|
||||
}
|
||||
|
||||
@elseif $value == "column-reverse" {
|
||||
$value-2009: vertical;
|
||||
$direction: reverse;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-orient, $value-2009, webkit moz spec);
|
||||
@if $direction == "reverse" {
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(flex-direction, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-direction: $value;
|
||||
}
|
||||
|
||||
// 2009 - box-lines (single | multiple)
|
||||
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
|
||||
// Alt values.
|
||||
$alt-value: $value;
|
||||
@if $value == nowrap {
|
||||
$alt-value: single;
|
||||
}
|
||||
|
||||
@elseif $value == wrap {
|
||||
$alt-value: multiple;
|
||||
}
|
||||
|
||||
@elseif $value == "wrap-reverse" {
|
||||
$alt-value: multiple;
|
||||
}
|
||||
|
||||
@include prefixer(box-lines, $alt-value, webkit moz spec);
|
||||
@include prefixer(flex-wrap, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2011 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2012 - flex-flow (flex-direction || flex-wrap)
|
||||
@mixin flex-flow($value) {
|
||||
@include prefixer(flex-flow, $value, webkit moz spec);
|
||||
}
|
||||
|
||||
// 2009 - box-ordinal-group (integer)
|
||||
// 2011 - flex-order (integer)
|
||||
// 2012 - order (integer)
|
||||
@mixin order($int: 0) {
|
||||
// 2009
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(order, $int, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-order: $int;
|
||||
}
|
||||
|
||||
// 2012 - flex-grow (number)
|
||||
@mixin flex-grow($number: 0) {
|
||||
@include prefixer(flex-grow, $number, webkit moz spec);
|
||||
-ms-flex-positive: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-shrink (number)
|
||||
@mixin flex-shrink($number: 1) {
|
||||
@include prefixer(flex-shrink, $number, webkit moz spec);
|
||||
-ms-flex-negative: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-basis (number)
|
||||
@mixin flex-basis($width: auto) {
|
||||
@include prefixer(flex-basis, $width, webkit moz spec);
|
||||
-ms-flex-preferred-size: $width;
|
||||
}
|
||||
|
||||
// 2009 - box-pack (start | end | center | justify)
|
||||
// 2011 - flex-pack (start | end | center | justify)
|
||||
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
|
||||
@mixin justify-content ($value: flex-start) {
|
||||
|
||||
// Alt values.
|
||||
$alt-value: $value;
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
}
|
||||
|
||||
@elseif $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
}
|
||||
|
||||
@elseif $value == "space-between" {
|
||||
$alt-value: justify;
|
||||
}
|
||||
|
||||
@elseif $value == "space-around" {
|
||||
$alt-value: center;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-pack, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(justify-content, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-pack: $alt-value;
|
||||
}
|
||||
|
||||
// 2009 - box-align (start | end | center | baseline | stretch)
|
||||
// 2011 - flex-align (start | end | center | baseline | stretch)
|
||||
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-items($value: stretch) {
|
||||
|
||||
$alt-value: $value;
|
||||
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
}
|
||||
|
||||
@elseif $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-align, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-items, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-align: $alt-value;
|
||||
}
|
||||
|
||||
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
|
||||
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-self($value: auto) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
}
|
||||
|
||||
@elseif $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-self, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-item-align: $value-2011;
|
||||
}
|
||||
|
||||
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
|
||||
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
|
||||
@mixin align-content($value: stretch) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
}
|
||||
|
||||
@elseif $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
}
|
||||
|
||||
@elseif $value == "space-between" {
|
||||
$value-2011: justify;
|
||||
}
|
||||
|
||||
@elseif $value == "space-around" {
|
||||
$value-2011: distribute;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-content, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-line-pack: $value-2011;
|
||||
}
|
||||
|
||||
23
docs/_css/bourbon/css3/_font-face.scss
vendored
Normal file
23
docs/_css/bourbon/css3/_font-face.scss
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
|
||||
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
|
||||
@if $asset-pipeline == true {
|
||||
src: font-url('#{$file-path}.eot');
|
||||
src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
|
||||
font-url('#{$file-path}.woff') format('woff'),
|
||||
font-url('#{$file-path}.ttf') format('truetype'),
|
||||
font-url('#{$file-path}.svg##{$font-family}') format('svg');
|
||||
} @else {
|
||||
src: url('#{$file-path}.eot');
|
||||
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
|
||||
url('#{$file-path}.woff') format('woff'),
|
||||
url('#{$file-path}.ttf') format('truetype'),
|
||||
url('#{$file-path}.svg##{$font-family}') format('svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
10
docs/_css/bourbon/css3/_font-feature-settings.scss
vendored
Normal file
10
docs/_css/bourbon/css3/_font-feature-settings.scss
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
// Font feature settings mixin and property default.
|
||||
// Examples: @include font-feature-settings("liga");
|
||||
// @include font-feature-settings("lnum" false);
|
||||
// @include font-feature-settings("pnum" 1, "kern" 0);
|
||||
// @include font-feature-settings("ss01", "ss02");
|
||||
|
||||
@mixin font-feature-settings($settings...) {
|
||||
@if length($settings) == 0 { $settings: none; }
|
||||
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
||||
}
|
||||
10
docs/_css/bourbon/css3/_hidpi-media-query.scss
vendored
Normal file
10
docs/_css/bourbon/css3/_hidpi-media-query.scss
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
||||
@mixin hidpi($ratio: 1.3) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
||||
only screen and (min--moz-device-pixel-ratio: $ratio),
|
||||
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
|
||||
only screen and (min-resolution: #{round($ratio*96)}dpi),
|
||||
only screen and (min-resolution: #{$ratio}dppx) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
4
docs/_css/bourbon/css3/_hyphens.scss
vendored
Normal file
4
docs/_css/bourbon/css3/_hyphens.scss
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin hyphens($hyphenation: none) {
|
||||
// none | manual | auto
|
||||
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
|
||||
}
|
||||
14
docs/_css/bourbon/css3/_image-rendering.scss
vendored
Normal file
14
docs/_css/bourbon/css3/_image-rendering.scss
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
@mixin image-rendering ($mode:auto) {
|
||||
|
||||
@if ($mode == crisp-edges) {
|
||||
-ms-interpolation-mode: nearest-neighbor; // IE8+
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
@else {
|
||||
image-rendering: $mode;
|
||||
}
|
||||
}
|
||||
35
docs/_css/bourbon/css3/_keyframes.scss
vendored
Normal file
35
docs/_css/bourbon/css3/_keyframes.scss
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
|
||||
@mixin keyframes($name) {
|
||||
$original-prefix-for-webkit: $prefix-for-webkit;
|
||||
$original-prefix-for-mozilla: $prefix-for-mozilla;
|
||||
$original-prefix-for-microsoft: $prefix-for-microsoft;
|
||||
$original-prefix-for-opera: $prefix-for-opera;
|
||||
$original-prefix-for-spec: $prefix-for-spec;
|
||||
|
||||
@if $original-prefix-for-webkit {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-webkit: true !global;
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $original-prefix-for-mozilla {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-mozilla: true !global;
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
||||
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
||||
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
||||
$prefix-for-opera: $original-prefix-for-opera !global;
|
||||
$prefix-for-spec: $original-prefix-for-spec !global;
|
||||
|
||||
@if $original-prefix-for-spec {
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
docs/_css/bourbon/css3/_linear-gradient.scss
vendored
Normal file
38
docs/_css/bourbon/css3/_linear-gradient.scss
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
@mixin linear-gradient($pos, $G1, $G2: null,
|
||||
$G3: null, $G4: null,
|
||||
$G5: null, $G6: null,
|
||||
$G7: null, $G8: null,
|
||||
$G9: null, $G10: null,
|
||||
$fallback: null) {
|
||||
// Detect what type of value exists in $pos
|
||||
$pos-type: type-of(nth($pos, 1));
|
||||
$pos-spec: null;
|
||||
$pos-degree: null;
|
||||
|
||||
// If $pos is missing from mixin, reassign vars and add default position
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
||||
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
||||
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
||||
$pos: null;
|
||||
}
|
||||
|
||||
@if $pos {
|
||||
$positions: _linear-positions-parser($pos);
|
||||
$pos-degree: nth($positions, 1);
|
||||
$pos-spec: nth($positions, 2);
|
||||
}
|
||||
|
||||
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
|
||||
|
||||
// Set $G1 as the default fallback color
|
||||
$fallback-color: nth($G1, 1);
|
||||
|
||||
// If $fallback is a color use that color as the fallback color
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||
}
|
||||
8
docs/_css/bourbon/css3/_perspective.scss
vendored
Normal file
8
docs/_css/bourbon/css3/_perspective.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
@mixin perspective($depth: none) {
|
||||
// none | <length>
|
||||
@include prefixer(perspective, $depth, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin perspective-origin($value: 50% 50%) {
|
||||
@include prefixer(perspective-origin, $value, webkit moz spec);
|
||||
}
|
||||
8
docs/_css/bourbon/css3/_placeholder.scss
vendored
Normal file
8
docs/_css/bourbon/css3/_placeholder.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
docs/_css/bourbon/css3/_radial-gradient.scss
vendored
Normal file
39
docs/_css/bourbon/css3/_radial-gradient.scss
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
// Requires Sass 3.1+
|
||||
@mixin radial-gradient($G1, $G2,
|
||||
$G3: null, $G4: null,
|
||||
$G5: null, $G6: null,
|
||||
$G7: null, $G8: null,
|
||||
$G9: null, $G10: null,
|
||||
$pos: null,
|
||||
$shape-size: null,
|
||||
$fallback: null) {
|
||||
|
||||
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
|
||||
$G1: nth($data, 1);
|
||||
$G2: nth($data, 2);
|
||||
$pos: nth($data, 3);
|
||||
$shape-size: nth($data, 4);
|
||||
|
||||
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
|
||||
|
||||
// Strip deprecated cover/contain for spec
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
// Set $G1 as the default fallback color
|
||||
$first-color: nth($full, 1);
|
||||
$fallback-color: nth($first-color, 1);
|
||||
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
// Add Commas and spaces
|
||||
$shape-size: if($shape-size, '#{$shape-size}, ', null);
|
||||
$pos: if($pos, '#{$pos}, ', null);
|
||||
$pos-spec: if($pos, 'at #{$pos}', null);
|
||||
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
|
||||
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
|
||||
}
|
||||
15
docs/_css/bourbon/css3/_transform.scss
vendored
Normal file
15
docs/_css/bourbon/css3/_transform.scss
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin transform($property: none) {
|
||||
// none | <transform-function>
|
||||
@include prefixer(transform, $property, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-origin($axes: 50%) {
|
||||
// x-axis - left | center | right | length | %
|
||||
// y-axis - top | center | bottom | length | %
|
||||
// z-axis - length
|
||||
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-style ($style: flat) {
|
||||
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||
}
|
||||
77
docs/_css/bourbon/css3/_transition.scss
vendored
Normal file
77
docs/_css/bourbon/css3/_transition.scss
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||
// Example: @include transition (all 2s ease-in-out);
|
||||
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
|
||||
// @include transition-property (transform, opacity);
|
||||
|
||||
@mixin transition ($properties...) {
|
||||
// Fix for vendor-prefix transform property
|
||||
$needs-prefixes: false;
|
||||
$webkit: ();
|
||||
$moz: ();
|
||||
$spec: ();
|
||||
|
||||
// Create lists for vendor-prefixed transform
|
||||
@each $list in $properties {
|
||||
@if nth($list, 1) == "transform" {
|
||||
$needs-prefixes: true;
|
||||
$list1: -webkit-transform;
|
||||
$list2: -moz-transform;
|
||||
$list3: ();
|
||||
|
||||
@each $var in $list {
|
||||
$list3: join($list3, $var);
|
||||
|
||||
@if $var != "transform" {
|
||||
$list1: join($list1, $var);
|
||||
$list2: join($list2, $var);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit: append($webkit, $list1);
|
||||
$moz: append($moz, $list2);
|
||||
$spec: append($spec, $list3);
|
||||
}
|
||||
|
||||
// Create lists for non-prefixed transition properties
|
||||
@else {
|
||||
$webkit: append($webkit, $list, comma);
|
||||
$moz: append($moz, $list, comma);
|
||||
$spec: append($spec, $list, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@if $needs-prefixes {
|
||||
-webkit-transition: $webkit;
|
||||
-moz-transition: $moz;
|
||||
transition: $spec;
|
||||
}
|
||||
@else {
|
||||
@if length($properties) >= 1 {
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
|
||||
@else {
|
||||
$properties: all 0.15s ease-out 0s;
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-property ($properties...) {
|
||||
-webkit-transition-property: transition-property-names($properties, 'webkit');
|
||||
-moz-transition-property: transition-property-names($properties, 'moz');
|
||||
transition-property: transition-property-names($properties, false);
|
||||
}
|
||||
|
||||
@mixin transition-duration ($times...) {
|
||||
@include prefixer(transition-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-timing-function ($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
||||
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-delay ($times...) {
|
||||
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||
}
|
||||
3
docs/_css/bourbon/css3/_user-select.scss
vendored
Normal file
3
docs/_css/bourbon/css3/_user-select.scss
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
@mixin user-select($arg: none) {
|
||||
@include prefixer(user-select, $arg, webkit moz ms spec);
|
||||
}
|
||||
11
docs/_css/bourbon/functions/_assign.scss
vendored
Normal file
11
docs/_css/bourbon/functions/_assign.scss
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
@function assign-inputs($inputs, $pseudo: null) {
|
||||
$list : ();
|
||||
|
||||
@each $input in $inputs {
|
||||
$input: unquote($input);
|
||||
$input: if($pseudo, $input + ":" + $pseudo, $input);
|
||||
$list: append($list, $input, comma);
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
13
docs/_css/bourbon/functions/_color-lightness.scss
vendored
Normal file
13
docs/_css/bourbon/functions/_color-lightness.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// Programatically determines whether a color is light or dark
|
||||
// Returns a boolean
|
||||
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
|
||||
|
||||
@function is-light($hex-color) {
|
||||
$-local-red: red(rgba($hex-color, 1.0));
|
||||
$-local-green: green(rgba($hex-color, 1.0));
|
||||
$-local-blue: blue(rgba($hex-color, 1.0));
|
||||
|
||||
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
||||
|
||||
@return $-local-lightness > .6;
|
||||
}
|
||||
39
docs/_css/bourbon/functions/_flex-grid.scss
vendored
Normal file
39
docs/_css/bourbon/functions/_flex-grid.scss
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
// Flexible grid
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($width / $container-width);
|
||||
}
|
||||
|
||||
// Flexible gutter
|
||||
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($gutter / $container-width);
|
||||
}
|
||||
|
||||
// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
|
||||
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
|
||||
//
|
||||
// The calculation presumes that your column structure will be missing the last gutter:
|
||||
//
|
||||
// -- column -- gutter -- column -- gutter -- column
|
||||
//
|
||||
// $fg-column: 60px; // Column Width
|
||||
// $fg-gutter: 25px; // Gutter Width
|
||||
// $fg-max-columns: 12; // Total Columns For Main Container
|
||||
//
|
||||
// div {
|
||||
// width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
|
||||
// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
|
||||
//
|
||||
// p {
|
||||
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
|
||||
// float: left;
|
||||
// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
|
||||
// }
|
||||
//
|
||||
// blockquote {
|
||||
// float: left;
|
||||
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
|
||||
// }
|
||||
// }
|
||||
3
docs/_css/bourbon/functions/_golden-ratio.scss
vendored
Normal file
3
docs/_css/bourbon/functions/_golden-ratio.scss
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
@function golden-ratio($value, $increment) {
|
||||
@return modular-scale($value, $increment, $golden)
|
||||
}
|
||||
13
docs/_css/bourbon/functions/_grid-width.scss
vendored
Normal file
13
docs/_css/bourbon/functions/_grid-width.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
@function grid-width($n) {
|
||||
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||
}
|
||||
|
||||
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
|
||||
//
|
||||
// $gw-column: 100px; // Column Width
|
||||
// $gw-gutter: 40px; // Gutter Width
|
||||
//
|
||||
// div {
|
||||
// width: grid-width(4); // returns 520px;
|
||||
// margin-left: $gw-gutter; // returns 40px;
|
||||
// }
|
||||
66
docs/_css/bourbon/functions/_modular-scale.scss
vendored
Normal file
66
docs/_css/bourbon/functions/_modular-scale.scss
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
// Scaling Variables
|
||||
$golden: 1.618;
|
||||
$minor-second: 1.067;
|
||||
$major-second: 1.125;
|
||||
$minor-third: 1.2;
|
||||
$major-third: 1.25;
|
||||
$perfect-fourth: 1.333;
|
||||
$augmented-fourth: 1.414;
|
||||
$perfect-fifth: 1.5;
|
||||
$minor-sixth: 1.6;
|
||||
$major-sixth: 1.667;
|
||||
$minor-seventh: 1.778;
|
||||
$major-seventh: 1.875;
|
||||
$octave: 2;
|
||||
$major-tenth: 2.5;
|
||||
$major-eleventh: 2.667;
|
||||
$major-twelfth: 3;
|
||||
$double-octave: 4;
|
||||
|
||||
@function modular-scale($value, $increment, $ratio) {
|
||||
$v1: nth($value, 1);
|
||||
$v2: nth($value, length($value));
|
||||
$value: $v1;
|
||||
|
||||
// scale $v2 to just above $v1
|
||||
@while $v2 > $v1 {
|
||||
$v2: ($v2 / $ratio); // will be off-by-1
|
||||
}
|
||||
@while $v2 < $v1 {
|
||||
$v2: ($v2 * $ratio); // will fix off-by-1
|
||||
}
|
||||
|
||||
// check AFTER scaling $v2 to prevent double-counting corner-case
|
||||
$double-stranded: $v2 > $v1;
|
||||
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 * $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 * $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
// adjust $v2 to just below $v1
|
||||
@if $double-stranded {
|
||||
$v2: ($v2 / $ratio);
|
||||
}
|
||||
|
||||
@for $i from $increment through -1 {
|
||||
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 / $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 / $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
13
docs/_css/bourbon/functions/_px-to-em.scss
vendored
Normal file
13
docs/_css/bourbon/functions/_px-to-em.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// Convert pixels to ems
|
||||
// eg. for a relational value of 12px write em(12) when the parent is 16px
|
||||
// if the parent is another value say 24px write em(12, 24)
|
||||
|
||||
@function em($pxval, $base: $em-base) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1em;
|
||||
}
|
||||
15
docs/_css/bourbon/functions/_px-to-rem.scss
vendored
Normal file
15
docs/_css/bourbon/functions/_px-to-rem.scss
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
// Convert pixels to rems
|
||||
// eg. for a relational value of 12px write rem(12)
|
||||
// Assumes $em-base is the font-size of <html>
|
||||
|
||||
@function rem($pxval) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
|
||||
$base: $em-base;
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1rem;
|
||||
}
|
||||
5
docs/_css/bourbon/functions/_strip-units.scss
vendored
Normal file
5
docs/_css/bourbon/functions/_strip-units.scss
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
// Srtips the units from a value. e.g. 12px -> 12
|
||||
|
||||
@function strip-units($val) {
|
||||
@return ($val / ($val * 0 + 1));
|
||||
}
|
||||
9
docs/_css/bourbon/functions/_tint-shade.scss
vendored
Normal file
9
docs/_css/bourbon/functions/_tint-shade.scss
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
// Add percentage of white to a color
|
||||
@function tint($color, $percent){
|
||||
@return mix(white, $color, $percent);
|
||||
}
|
||||
|
||||
// Add percentage of black to a color
|
||||
@function shade($color, $percent){
|
||||
@return mix(black, $color, $percent);
|
||||
}
|
||||
22
docs/_css/bourbon/functions/_transition-property-name.scss
vendored
Normal file
22
docs/_css/bourbon/functions/_transition-property-name.scss
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
// Return vendor-prefixed property names if appropriate
|
||||
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
|
||||
//************************************************************************//
|
||||
@function transition-property-names($props, $vendor: false) {
|
||||
$new-props: ();
|
||||
|
||||
@each $prop in $props {
|
||||
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
|
||||
}
|
||||
|
||||
@return $new-props;
|
||||
}
|
||||
|
||||
@function transition-property-name($prop, $vendor: false) {
|
||||
// put other properties that need to be prefixed here aswell
|
||||
@if $vendor and $prop == transform {
|
||||
@return unquote('-'+$vendor+'-'+$prop);
|
||||
}
|
||||
@else {
|
||||
@return $prop;
|
||||
}
|
||||
}
|
||||
17
docs/_css/bourbon/functions/_unpack.scss
vendored
Normal file
17
docs/_css/bourbon/functions/_unpack.scss
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
// Convert shorthand to the 4-value syntax
|
||||
|
||||
@function unpack($shorthand) {
|
||||
@if length($shorthand) == 1 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
|
||||
}
|
||||
@else if length($shorthand) == 2 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
|
||||
}
|
||||
@else if length($shorthand) == 3 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
|
||||
}
|
||||
@else {
|
||||
@return $shorthand;
|
||||
}
|
||||
}
|
||||
|
||||
15
docs/_css/bourbon/helpers/_convert-units.scss
vendored
Normal file
15
docs/_css/bourbon/helpers/_convert-units.scss
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
//************************************************************************//
|
||||
// Helper function for str-to-num fn.
|
||||
// Source: http://sassmeister.com/gist/9647408
|
||||
//************************************************************************//
|
||||
@function _convert-units($number, $unit) {
|
||||
$strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
|
||||
$units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
|
||||
$index: index($strings, $unit);
|
||||
|
||||
@if not $index {
|
||||
@warn "Unknown unit `#{$unit}`.";
|
||||
@return false;
|
||||
}
|
||||
@return $number * nth($units, $index);
|
||||
}
|
||||
13
docs/_css/bourbon/helpers/_gradient-positions-parser.scss
vendored
Normal file
13
docs/_css/bourbon/helpers/_gradient-positions-parser.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
|
||||
@if $gradient-positions
|
||||
and ($gradient-type == linear)
|
||||
and (type-of($gradient-positions) != color) {
|
||||
$gradient-positions: _linear-positions-parser($gradient-positions);
|
||||
}
|
||||
@else if $gradient-positions
|
||||
and ($gradient-type == radial)
|
||||
and (type-of($gradient-positions) != color) {
|
||||
$gradient-positions: _radial-positions-parser($gradient-positions);
|
||||
}
|
||||
@return $gradient-positions;
|
||||
}
|
||||
8
docs/_css/bourbon/helpers/_is-num.scss
vendored
Normal file
8
docs/_css/bourbon/helpers/_is-num.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
//************************************************************************//
|
||||
// Helper for linear-gradient-parser
|
||||
//************************************************************************//
|
||||
@function _is-num($char) {
|
||||
$values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
|
||||
$index: index($values, $char);
|
||||
@return if($index, true, false);
|
||||
}
|
||||
25
docs/_css/bourbon/helpers/_linear-angle-parser.scss
vendored
Normal file
25
docs/_css/bourbon/helpers/_linear-angle-parser.scss
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
// Private function for linear-gradient-parser
|
||||
@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
|
||||
$offset: null;
|
||||
$unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
|
||||
$unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
|
||||
|
||||
@if ($unit-long == "grad") or
|
||||
($unit-long == "turn") {
|
||||
$offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
|
||||
}
|
||||
|
||||
@else if ($unit-short == "deg") or
|
||||
($unit-short == "rad") {
|
||||
$offset: if($unit-short == "deg", -90 * 3, 1.6rad);
|
||||
}
|
||||
|
||||
@if $offset {
|
||||
$num: _str-to-num($first-val);
|
||||
|
||||
@return (
|
||||
webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
}
|
||||
41
docs/_css/bourbon/helpers/_linear-gradient-parser.scss
vendored
Normal file
41
docs/_css/bourbon/helpers/_linear-gradient-parser.scss
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
@function _linear-gradient-parser($image) {
|
||||
$image: unquote($image);
|
||||
$gradients: ();
|
||||
$start: str-index($image, "(");
|
||||
$end: str-index($image, ",");
|
||||
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||
|
||||
$prefix: str-slice($image, 0, $start);
|
||||
$suffix: str-slice($image, $end, str-length($image));
|
||||
|
||||
$has-multiple-vals: str-index($first-val, " ");
|
||||
$has-single-position: unquote(_position-flipper($first-val) + "");
|
||||
$has-angle: _is-num(str-slice($first-val, 0, 0));
|
||||
|
||||
@if $has-multiple-vals {
|
||||
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
|
||||
}
|
||||
|
||||
@else if $has-single-position != "" {
|
||||
$pos: unquote($has-single-position + "");
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $prefix + "to " + $pos + $suffix
|
||||
);
|
||||
}
|
||||
|
||||
@else if $has-angle {
|
||||
// Rotate degree for webkit
|
||||
$gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
|
||||
}
|
||||
|
||||
@else {
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@return $gradients;
|
||||
}
|
||||
61
docs/_css/bourbon/helpers/_linear-positions-parser.scss
vendored
Normal file
61
docs/_css/bourbon/helpers/_linear-positions-parser.scss
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
@function _linear-positions-parser($pos) {
|
||||
$type: type-of(nth($pos, 1));
|
||||
$spec: null;
|
||||
$degree: null;
|
||||
$side: null;
|
||||
$corner: null;
|
||||
$length: length($pos);
|
||||
// Parse Side and corner positions
|
||||
@if ($length > 1) {
|
||||
@if nth($pos, 1) == "to" { // Newer syntax
|
||||
$side: nth($pos, 2);
|
||||
|
||||
@if $length == 2 { // eg. to top
|
||||
// Swap for backwards compatability
|
||||
$degree: _position-flipper(nth($pos, 2));
|
||||
}
|
||||
@else if $length == 3 { // eg. to top left
|
||||
$corner: nth($pos, 3);
|
||||
}
|
||||
}
|
||||
@else if $length == 2 { // Older syntax ("top left")
|
||||
$side: _position-flipper(nth($pos, 1));
|
||||
$corner: _position-flipper(nth($pos, 2));
|
||||
}
|
||||
|
||||
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
$spec: to $side $corner;
|
||||
}
|
||||
@else if $length == 1 {
|
||||
// Swap for backwards compatability
|
||||
@if $type == string {
|
||||
$degree: $pos;
|
||||
$spec: to _position-flipper($pos);
|
||||
}
|
||||
@else {
|
||||
$degree: -270 - $pos; //rotate the gradient opposite from spec
|
||||
$spec: $pos;
|
||||
}
|
||||
}
|
||||
$degree: unquote($degree + ",");
|
||||
$spec: unquote($spec + ",");
|
||||
@return $degree $spec;
|
||||
}
|
||||
|
||||
@function _position-flipper($pos) {
|
||||
@return if($pos == left, right, null)
|
||||
if($pos == right, left, null)
|
||||
if($pos == top, bottom, null)
|
||||
if($pos == bottom, top, null);
|
||||
}
|
||||
31
docs/_css/bourbon/helpers/_linear-side-corner-parser.scss
vendored
Normal file
31
docs/_css/bourbon/helpers/_linear-side-corner-parser.scss
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
// Private function for linear-gradient-parser
|
||||
@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
|
||||
$val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
|
||||
$val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
|
||||
$val-3: null;
|
||||
$has-val-3: str-index($val-2, " ");
|
||||
|
||||
@if $has-val-3 {
|
||||
$val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
|
||||
$val-2: str-slice($val-2, 0, $has-val-3 - 1);
|
||||
}
|
||||
|
||||
$pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
|
||||
$pos: unquote($pos + "");
|
||||
|
||||
// Use old spec for webkit
|
||||
@if $val-1 == "to" {
|
||||
@return (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
// Bring the code up to spec
|
||||
@else {
|
||||
@return (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $prefix + "to " + $pos + $suffix
|
||||
);
|
||||
}
|
||||
}
|
||||
69
docs/_css/bourbon/helpers/_radial-arg-parser.scss
vendored
Normal file
69
docs/_css/bourbon/helpers/_radial-arg-parser.scss
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
|
||||
@each $value in $G1, $G2 {
|
||||
$first-val: nth($value, 1);
|
||||
$pos-type: type-of($first-val);
|
||||
$spec-at-index: null;
|
||||
|
||||
// Determine if spec was passed to mixin
|
||||
@if type-of($value) == list {
|
||||
$spec-at-index: if(index($value, at), index($value, at), false);
|
||||
}
|
||||
@if $spec-at-index {
|
||||
@if $spec-at-index > 1 {
|
||||
@for $i from 1 through ($spec-at-index - 1) {
|
||||
$shape-size: $shape-size nth($value, $i);
|
||||
}
|
||||
@for $i from ($spec-at-index + 1) through length($value) {
|
||||
$pos: $pos nth($value, $i);
|
||||
}
|
||||
}
|
||||
@else if $spec-at-index == 1 {
|
||||
@for $i from ($spec-at-index + 1) through length($value) {
|
||||
$pos: $pos nth($value, $i);
|
||||
}
|
||||
}
|
||||
$G1: null;
|
||||
}
|
||||
|
||||
// If not spec calculate correct values
|
||||
@else {
|
||||
@if ($pos-type != color) or ($first-val != "transparent") {
|
||||
@if ($pos-type == number)
|
||||
or ($first-val == "center")
|
||||
or ($first-val == "top")
|
||||
or ($first-val == "right")
|
||||
or ($first-val == "bottom")
|
||||
or ($first-val == "left") {
|
||||
|
||||
$pos: $value;
|
||||
|
||||
@if $pos == $G1 {
|
||||
$G1: null;
|
||||
}
|
||||
}
|
||||
|
||||
@else if
|
||||
($first-val == "ellipse")
|
||||
or ($first-val == "circle")
|
||||
or ($first-val == "closest-side")
|
||||
or ($first-val == "closest-corner")
|
||||
or ($first-val == "farthest-side")
|
||||
or ($first-val == "farthest-corner")
|
||||
or ($first-val == "contain")
|
||||
or ($first-val == "cover") {
|
||||
|
||||
$shape-size: $value;
|
||||
|
||||
@if $value == $G1 {
|
||||
$G1: null;
|
||||
}
|
||||
|
||||
@else if $value == $G2 {
|
||||
$G2: null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@return $G1, $G2, $pos, $shape-size;
|
||||
}
|
||||
50
docs/_css/bourbon/helpers/_radial-gradient-parser.scss
vendored
Normal file
50
docs/_css/bourbon/helpers/_radial-gradient-parser.scss
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
@function _radial-gradient-parser($image) {
|
||||
$image: unquote($image);
|
||||
$gradients: ();
|
||||
$start: str-index($image, "(");
|
||||
$end: str-index($image, ",");
|
||||
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||
|
||||
$prefix: str-slice($image, 0, $start);
|
||||
$suffix: str-slice($image, $end, str-length($image));
|
||||
|
||||
$is-spec-syntax: str-index($first-val, "at");
|
||||
|
||||
@if $is-spec-syntax and $is-spec-syntax > 1 {
|
||||
$keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
|
||||
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||
$pos: append($pos, $keyword, comma);
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
)
|
||||
}
|
||||
|
||||
@else if $is-spec-syntax == 1 {
|
||||
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
)
|
||||
}
|
||||
|
||||
@else if str-index($image, "cover") or str-index($image, "contain") {
|
||||
@warn "Radial-gradient needs to be updated to conform to latest spec.";
|
||||
|
||||
$gradients: (
|
||||
webkit-image: null,
|
||||
spec-image: $image
|
||||
)
|
||||
}
|
||||
|
||||
@else {
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $image
|
||||
)
|
||||
}
|
||||
|
||||
@return $gradients;
|
||||
}
|
||||
18
docs/_css/bourbon/helpers/_radial-positions-parser.scss
vendored
Normal file
18
docs/_css/bourbon/helpers/_radial-positions-parser.scss
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
@function _radial-positions-parser($gradient-pos) {
|
||||
$shape-size: nth($gradient-pos, 1);
|
||||
$pos: nth($gradient-pos, 2);
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
|
||||
unquote(if($shape-size, "#{$shape-size},", null));
|
||||
$pos-spec: if($pos, "at #{$pos}", null);
|
||||
|
||||
$spec: "#{$shape-size-spec} #{$pos-spec}";
|
||||
|
||||
// Add comma
|
||||
@if ($spec != ' ') {
|
||||
$spec: "#{$spec},"
|
||||
}
|
||||
|
||||
@return $pre-spec $spec;
|
||||
}
|
||||
26
docs/_css/bourbon/helpers/_render-gradients.scss
vendored
Normal file
26
docs/_css/bourbon/helpers/_render-gradients.scss
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
// User for linear and radial gradients within background-image or border-image properties
|
||||
|
||||
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
|
||||
$pre-spec: null;
|
||||
$spec: null;
|
||||
$vendor-gradients: null;
|
||||
@if $gradient-type == linear {
|
||||
@if $gradient-positions {
|
||||
$pre-spec: nth($gradient-positions, 1);
|
||||
$spec: nth($gradient-positions, 2);
|
||||
}
|
||||
}
|
||||
@else if $gradient-type == radial {
|
||||
$pre-spec: nth($gradient-positions, 1);
|
||||
$spec: nth($gradient-positions, 2);
|
||||
}
|
||||
|
||||
@if $vendor {
|
||||
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
|
||||
}
|
||||
@else if $vendor == false {
|
||||
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
|
||||
$vendor-gradients: unquote($vendor-gradients);
|
||||
}
|
||||
@return $vendor-gradients;
|
||||
}
|
||||
10
docs/_css/bourbon/helpers/_shape-size-stripper.scss
vendored
Normal file
10
docs/_css/bourbon/helpers/_shape-size-stripper.scss
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
@function _shape-size-stripper($shape-size) {
|
||||
$shape-size-spec: null;
|
||||
@each $value in $shape-size {
|
||||
@if ($value == "cover") or ($value == "contain") {
|
||||
$value: null;
|
||||
}
|
||||
$shape-size-spec: "#{$shape-size-spec} #{$value}";
|
||||
}
|
||||
@return $shape-size-spec;
|
||||
}
|
||||
50
docs/_css/bourbon/helpers/_str-to-num.scss
vendored
Normal file
50
docs/_css/bourbon/helpers/_str-to-num.scss
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
//************************************************************************//
|
||||
// Helper function for linear/radial-gradient-parsers.
|
||||
// Source: http://sassmeister.com/gist/9647408
|
||||
//************************************************************************//
|
||||
@function _str-to-num($string) {
|
||||
// Matrices
|
||||
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
|
||||
$numbers: 0 1 2 3 4 5 6 7 8 9;
|
||||
|
||||
// Result
|
||||
$result: 0;
|
||||
$divider: 0;
|
||||
$minus: false;
|
||||
|
||||
// Looping through all characters
|
||||
@for $i from 1 through str-length($string) {
|
||||
$character: str-slice($string, $i, $i);
|
||||
$index: index($strings, $character);
|
||||
|
||||
@if $character == '-' {
|
||||
$minus: true;
|
||||
}
|
||||
|
||||
@else if $character == '.' {
|
||||
$divider: 1;
|
||||
}
|
||||
|
||||
@else {
|
||||
@if not $index {
|
||||
$result: if($minus, $result * -1, $result);
|
||||
@return _convert-units($result, str-slice($string, $i));
|
||||
}
|
||||
|
||||
$number: nth($numbers, $index);
|
||||
|
||||
@if $divider == 0 {
|
||||
$result: $result * 10;
|
||||
}
|
||||
|
||||
@else {
|
||||
// Move the decimal dot to the left
|
||||
$divider: $divider * 10;
|
||||
$number: $number / $divider;
|
||||
}
|
||||
|
||||
$result: $result + $number;
|
||||
}
|
||||
}
|
||||
@return if($minus, $result * -1, $result);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user