v0.3.3

var container = ...; // some DOM node
React.renderComponent(<div />, container);
React.renderComponent(<span />, container);

This should replace the rendered <div> with a <span>, effectively
reconciling at the root level.
(cherry picked from commit 100af48f53)

.circleci/config.yml

@@ -1,579 +0,0 @@
-version: 2.1
-
-aliases:
-  - &docker
-    - image: circleci/openjdk:8-jdk-node-browsers
-
-  - &environment
-    TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-  - &restore_yarn_cache
-    restore_cache:
-      name: Restore yarn cache
-      key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn
-
-  - &restore_node_modules
-    restore_cache:
-      name: Restore node_modules cache
-      keys:
-        - v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
-
-  - &TEST_PARALLELISM 20
-
-  - &attach_workspace
-    at: build
-
-# The CircleCI API doesn't yet support triggering a specific workflow, but it
-# does support triggering a pipeline. So as a workaround you can triggger the
-# entire pipeline and use parameters to disable everything except the workflow
-# you want. CircleCI recommends this workaround here:
-# https://support.circleci.com/hc/en-us/articles/360050351292-How-to-trigger-a-workflow-via-CircleCI-API-v2-
-parameters:
-  # This is only set when triggering the CI pipeline via an API request.
-  prerelease_commit_sha:
-    type: string
-    default: ''
-
-jobs:
-  setup:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - run:
-          name: Nodejs Version
-          command: node --version
-      - *restore_yarn_cache
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - save_cache:
-          # Store the yarn cache globally for all lock files with this same
-          # checksum. This will speed up the setup job for all PRs where the
-          # lockfile is the same.
-          name: Save yarn cache for future installs
-          key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn
-          paths:
-            - ~/.cache/yarn
-      - save_cache:
-          # Store node_modules for all jobs in this workflow so that they don't
-          # need to each run a yarn install for each job. This will speed up
-          # all jobs run on this branch with the same lockfile.
-          name: Save node_modules cache
-          # This cache key is per branch, a yarn install in setup is required.
-          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
-          paths:
-            - node_modules
-
-  yarn_lint:
-    docker: *docker
-    environment: *environment
-
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: node ./scripts/prettier/index
-      - run: node ./scripts/tasks/eslint
-      - run: ./scripts/circleci/check_license.sh
-      - run: ./scripts/circleci/check_modules.sh
-      - run: ./scripts/circleci/test_print_warnings.sh
-
-  yarn_flow:
-    docker: *docker
-    environment: *environment
-    parallelism: 5
-
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: node ./scripts/tasks/flow-ci
-
-  RELEASE_CHANNEL_stable_yarn_build:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          environment:
-            RELEASE_CHANNEL: stable
-          command: |
-            ./scripts/circleci/add_build_info_json.sh
-            ./scripts/circleci/update_package_versions.sh
-            yarn build
-      - run: echo "stable" >> build/RELEASE_CHANNEL
-      - persist_to_workspace:
-          root: build
-          paths:
-            - RELEASE_CHANNEL
-            - facebook-www
-            - facebook-react-native
-            - facebook-relay
-            - node_modules
-            - react-native
-            - dist
-            - sizes/*.json
-
-  yarn_build:
-    docker: *docker
-    environment: *environment
-    parallelism: 20
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          environment:
-            RELEASE_CHANNEL: experimental
-          command: |
-            ./scripts/circleci/add_build_info_json.sh
-            ./scripts/circleci/update_package_versions.sh
-            yarn build
-      - run: echo "experimental" >> build/RELEASE_CHANNEL
-      - persist_to_workspace:
-          root: build
-          paths:
-            - RELEASE_CHANNEL
-            - facebook-www
-            - facebook-react-native
-            - facebook-relay
-            - node_modules
-            - react-native
-            - dist
-            - sizes/*.json
-
-  yarn_build_combined:
-    docker: *docker
-    environment: *environment
-    parallelism: 40
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn build-combined
-      - persist_to_workspace:
-          root: .
-          paths:
-            - build2
-
-  get_base_build:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Download artifacts for base revision
-          command: |
-              git fetch origin main
-              cd ./scripts/release && yarn && cd ../../
-              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
-              mv ./build2 ./base-build
-      - persist_to_workspace:
-          root: .
-          paths:
-            - base-build
-
-  process_artifacts_combined:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: echo "<< pipeline.git.revision >>" >> build2/COMMIT_SHA
-        # Compress build directory into a single tarball for easy download
-      - run: tar -zcvf ./build2.tgz ./build2
-      - store_artifacts:
-          path: ./build2.tgz
-
-  sizebot:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run: echo "<< pipeline.git.revision >>" >> build2/COMMIT_SHA
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          command: node ./scripts/tasks/danger
-
-  build_devtools_and_process_artifacts:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_yarn_cache
-      - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run:
-          environment:
-            RELEASE_CHANNEL: experimental
-          command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh
-      - store_artifacts:
-          path: ./build/devtools.tgz
-
-  build_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_yarn_cache
-      - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run:
-          name: Build and archive
-          command: |
-            mkdir -p build/devtools
-            cd packages/react-devtools-scheduling-profiler
-            yarn build
-            cd dist
-            tar -zcvf ../../../build/devtools-scheduling-profiler.tgz .
-      - store_artifacts:
-          path: ./build/devtools-scheduling-profiler.tgz
-      - persist_to_workspace:
-          root: packages/react-devtools-scheduling-profiler
-          paths:
-            - dist
-
-  deploy_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace:
-          at: packages/react-devtools-scheduling-profiler
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Deploy
-          command: |
-            cd packages/react-devtools-scheduling-profiler
-            yarn vercel deploy dist --prod --confirm --token $SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN
-
-  yarn_lint_build:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn lint-build
-      - run: scripts/circleci/check_minified_errors.sh
-
-  yarn_test:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    parameters:
-      args:
-        type: string
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test <<parameters.args>> --ci
-
-  yarn_test_build:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    parameters:
-      args:
-        type: string
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test --build <<parameters.args>> --ci
-
-  RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Run DOM fixture tests
-          environment:
-            RELEASE_CHANNEL: stable
-          command: |
-            cd fixtures/dom
-            yarn --frozen-lockfile
-            yarn prestart
-            yarn test --maxWorkers=2
-
-  test_fuzz:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Run fuzz tests
-          command: |
-            FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
-            FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
-
-  publish_prerelease:
-    parameters:
-      commit_sha:
-        type: string
-      release_channel:
-        type: string
-      dist_tag:
-        type: string
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Run publish script
-          command: |
-            git fetch origin main
-            cd ./scripts/release && yarn && cd ../../
-            scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >>
-            cp ./scripts/release/ci-npmrc ~/.npmrc
-            scripts/release/publish.js --ci --tags << parameters.dist_tag >>
-
-  # We don't always keep the reconciler forks in sync (otherwise it we wouldn't
-  # have forked it) but during periods when they are meant to be in sync, we
-  # use this job to confirm there are no differences.
-  sync_reconciler_forks:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Confirm reconciler forks are the same
-          command: |
-            yarn replace-fork
-            git diff --quiet || (echo "Reconciler forks are not the same! Run yarn replace-fork. Or, if this was intentional, disable this CI check." && false)
-
-
-workflows:
-  version: 2
-  stable:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - yarn_lint:
-          requires:
-            - setup
-      - RELEASE_CHANNEL_stable_yarn_build:
-          requires:
-            - setup
-      - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
-
-  experimental:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - yarn_build:
-          requires:
-            - setup
-      - build_devtools_and_process_artifacts:
-          requires:
-            - yarn_build
-      - build_devtools_scheduling_profiler:
-          requires:
-            - yarn_build
-      - deploy_devtools_scheduling_profiler:
-          requires:
-            - build_devtools_scheduling_profiler
-          filters:
-            branches:
-              only:
-                - main
-
-  # New workflow that will replace "stable" and "experimental"
-  build_and_test:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - yarn_flow:
-          requires:
-            - setup
-      # NOTE: This job is only enabled when we want the forks to be in sync.
-      # When the forks intentionally diverge, comment out the job to disable it.
-      - sync_reconciler_forks:
-          requires:
-            - setup
-      - yarn_test:
-          requires:
-            - setup
-          matrix:
-            parameters:
-              args:
-                # Intentionally passing these as strings instead of creating a
-                # separate parameter per CLI argument, since it's easier to
-                # control/see which combinations we want to run.
-                - "-r=stable --env=development"
-                - "-r=stable --env=production"
-                - "-r=experimental --env=development"
-                - "-r=experimental --env=production"
-                - "-r=www-classic --env=development --variant=false"
-                - "-r=www-classic --env=production --variant=false"
-                - "-r=www-classic --env=development --variant=true"
-                - "-r=www-classic --env=production --variant=true"
-                - "-r=www-modern --env=development --variant=false"
-                - "-r=www-modern --env=production --variant=false"
-                - "-r=www-modern --env=development --variant=true"
-                - "-r=www-modern --env=production --variant=true"
-
-                # TODO: Test more persistent configurations?
-                - '-r=stable --env=development --persistent'
-      - yarn_build_combined:
-          requires:
-            - setup
-      - process_artifacts_combined:
-          requires:
-            - yarn_build_combined
-      - yarn_test_build:
-          requires:
-            - yarn_build_combined
-          matrix:
-            parameters:
-              args:
-                # Intentionally passing these as strings instead of creating a
-                # separate parameter per CLI argument, since it's easier to
-                # control/see which combinations we want to run.
-                - "-r=stable --env=development"
-                - "-r=stable --env=production"
-                - "-r=experimental --env=development"
-                - "-r=experimental --env=production"
-
-                # Dev Tools
-                - "--project=devtools -r=experimental"
-
-                # TODO: Update test config to support www build tests
-                # - "-r=www-classic --env=development --variant=false"
-                # - "-r=www-classic --env=production --variant=false"
-                # - "-r=www-classic --env=development --variant=true"
-                # - "-r=www-classic --env=production --variant=true"
-                # - "-r=www-modern --env=development --variant=false"
-                # - "-r=www-modern --env=production --variant=false"
-                # - "-r=www-modern --env=development --variant=true"
-                # - "-r=www-modern --env=production --variant=true"
-
-                # TODO: Test more persistent configurations?
-      - get_base_build:
-          filters:
-            branches:
-              ignore:
-                - main
-          requires:
-            - setup
-      - sizebot:
-          filters:
-            branches:
-              ignore:
-                - main
-          requires:
-            - get_base_build
-            - yarn_build_combined
-      - yarn_lint_build:
-          requires:
-            - yarn_build_combined
-  fuzz_tests:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    triggers:
-      - schedule:
-          # Fuzz tests run hourly
-          cron: "0 * * * *"
-          filters:
-            branches:
-              only:
-                - main
-    jobs:
-      - setup
-      - test_fuzz:
-          requires:
-            - setup
-
-  # Used to publish a prerelease manually via the command line
-  publish_preleases:
-    when: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - publish_prerelease:
-          name: Publish to Next channel
-          requires:
-            - setup
-          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
-          release_channel: stable
-          dist_tag: "next,alpha"
-      - publish_prerelease:
-          name: Publish to Experimental channel
-          requires:
-            # NOTE: Intentionally running these jobs sequentially because npm
-            # will sometimes fail if you try to concurrently publish two
-            # different versions of the same package, even if they use different
-            # dist tags.
-            - Publish to Next channel
-          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
-          release_channel: experimental
-          dist_tag: experimental
-
-  # Publishes on a cron schedule
-  publish_preleases_nightly:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    triggers:
-      - schedule:
-          # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
-          cron: "10 16 * * 1,2,3,4,5"
-          filters:
-            branches:
-              only:
-                - main
-    jobs:
-      - setup
-      - publish_prerelease:
-          name: Publish to Next channel
-          requires:
-            - setup
-          commit_sha: << pipeline.git.revision >>
-          release_channel: stable
-          dist_tag: "next,alpha"
-      - publish_prerelease:
-          name: Publish to Experimental channel
-          requires:
-            # NOTE: Intentionally running these jobs sequentially because npm
-            # will sometimes fail if you try to concurrently publish two
-            # different versions of the same package, even if they use different
-            # dist tags.
-            - Publish to Next channel
-          commit_sha: << pipeline.git.revision >>
-          release_channel: experimental
-          dist_tag: experimental
-

.codesandbox/ci.json

@@ -1,12 +0,0 @@
-{
-  "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,react/jsx-runtime,react/jsx-dev-runtime",
-  "node": "12",
-  "publishDirectory": {
-    "react": "build/node_modules/react",
-    "react-dom": "build/node_modules/react-dom",
-    "scheduler": "build/node_modules/scheduler"
-  },
-  "sandboxes": ["new"],
-  "silent": true
-}

.editorconfig

@@ -1,18 +1,12 @@
-# https://editorconfig.org
+# http://editorconfig.org
 root = true
 
 [*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
 indent_style = space
-insert_final_newline = true
-max_line_length = 80
+indent_size = 2
+end_of_line = lf
+charset = utf-8
 trim_trailing_whitespace = true
 
 [*.md]
-max_line_length = 0
 trim_trailing_whitespace = false
-
-[COMMIT_EDITMSG]
-max_line_length = 0

.eslintignore

@@ -1,23 +0,0 @@
-# Third party
-**/node_modules
-
-# Not written by hand
-packages/react-art/npm/lib
-
-# Build products
-build/
-coverage/
-fixtures/
-scripts/bench/benchmarks/**/*.js
-
-# React repository clone
-scripts/bench/remote-repo/
-
-packages/react-devtools-core/dist
-packages/react-devtools-extensions/chrome/build
-packages/react-devtools-extensions/firefox/build
-packages/react-devtools-extensions/shared/build
-packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static

.eslintrc.js

@@ -1,222 +0,0 @@
-'use strict';
-
-const {
-  es5Paths,
-  esNextPaths,
-} = require('./scripts/shared/pathsByLanguageVersion');
-
-const restrictedGlobals = require('confusing-browser-globals');
-
-const OFF = 0;
-const ERROR = 2;
-
-module.exports = {
-  extends: ['fbjs', 'prettier'],
-
-  // Stop ESLint from looking for a configuration file in parent folders
-  root: true,
-
-  plugins: [
-    'jest',
-    'no-for-of-loops',
-    'no-function-declare-after-return',
-    'react',
-    'react-internal',
-  ],
-
-  parser: 'babel-eslint',
-  parserOptions: {
-    ecmaVersion: 8,
-    sourceType: 'script',
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-    },
-  },
-
-  // 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'],
-    'consistent-return': OFF,
-    'dot-location': [ERROR, 'property'],
-    // We use console['error']() as a signal to not transform it:
-    'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
-    'eol-last': ERROR,
-    eqeqeq: [ERROR, 'allow-null'],
-    indent: OFF,
-    'jsx-quotes': [ERROR, 'prefer-double'],
-    'keyword-spacing': [ERROR, {after: true, before: true}],
-    'no-bitwise': OFF,
-    'no-console': OFF,
-    'no-inner-declarations': [ERROR, 'functions'],
-    'no-multi-spaces': ERROR,
-    'no-restricted-globals': [ERROR].concat(restrictedGlobals),
-    'no-restricted-syntax': [ERROR, 'WithStatement'],
-    'no-shadow': ERROR,
-    'no-unused-expressions': ERROR,
-    'no-unused-vars': [ERROR, {args: 'none'}],
-    'no-use-before-define': OFF,
-    'no-useless-concat': OFF,
-    quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
-    'space-before-blocks': ERROR,
-    'space-before-function-paren': OFF,
-    'valid-typeof': [ERROR, {requireStringLiterals: true}],
-    // Flow fails with with non-string literal keys
-    'no-useless-computed-key': OFF,
-
-    // We apply these settings to files that should run on Node.
-    // They can't use JSX or ES6 modules, and must be in strict mode.
-    // They can, however, use other ES6 features.
-    // (Note these rules are overridden later for source files.)
-    'no-var': ERROR,
-    strict: ERROR,
-
-    // Enforced by Prettier
-    // TODO: Prettier doesn't handle long strings or long comments. Not a big
-    // deal. But I turned it off because loading the plugin causes some obscure
-    // syntax error and it didn't seem worth investigating.
-    'max-len': OFF,
-    // Prettier forces semicolons in a few places
-    'flowtype/object-type-delimiter': OFF,
-
-    // React & JSX
-    // Our transforms set this automatically
-    '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-uses-react': ERROR,
-    'react/no-is-mounted': OFF,
-    // This isn't useful in our test code
-    '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,
-
-    // Prevent function declarations after return statements
-    'no-function-declare-after-return/no-function-declare-after-return': ERROR,
-
-    // CUSTOM RULES
-    // the second argument of warning/invariant should be a literal string
-    'react-internal/no-primitive-constructors': ERROR,
-    'react-internal/no-to-warn-dev-within-to-throw': ERROR,
-    'react-internal/invariant-args': ERROR,
-    'react-internal/warning-args': ERROR,
-    'react-internal/no-production-logging': ERROR,
-    'react-internal/no-cross-fork-imports': ERROR,
-    'react-internal/no-cross-fork-types': [
-      ERROR,
-      {
-        old: [],
-        new: [],
-      },
-    ],
-  },
-
-  overrides: [
-    {
-      // We apply these settings to files that we ship through npm.
-      // They must be ES5.
-      files: es5Paths,
-      parser: 'espree',
-      parserOptions: {
-        ecmaVersion: 5,
-        sourceType: 'script',
-      },
-      rules: {
-        'no-var': OFF,
-        strict: ERROR,
-      },
-    },
-    {
-      // We apply these settings to the source files that get compiled.
-      // They can use all features including JSX (but shouldn't use `var`).
-      files: esNextPaths,
-      parser: 'babel-eslint',
-      parserOptions: {
-        ecmaVersion: 8,
-        sourceType: 'module',
-      },
-      rules: {
-        'no-var': ERROR,
-        'prefer-const': ERROR,
-        strict: OFF,
-      },
-    },
-    {
-      files: ['**/__tests__/*.js'],
-      rules: {
-        // https://github.com/jest-community/eslint-plugin-jest
-        'jest/no-focused-tests': ERROR,
-        'jest/valid-expect': ERROR,
-        'jest/valid-expect-in-promise': ERROR,
-      },
-    },
-    {
-      files: [
-        '**/__tests__/**/*.js',
-        'scripts/**/*.js',
-        'packages/*/npm/**/*.js',
-        'packages/dom-event-testing-library/**/*.js',
-        'packages/react-devtools*/**/*.js',
-      ],
-      rules: {
-        'react-internal/no-production-logging': OFF,
-        'react-internal/warning-args': OFF,
-
-        // Disable accessibility checks
-        'jsx-a11y/aria-role': OFF,
-        'jsx-a11y/no-noninteractive-element-interactions': OFF,
-        'jsx-a11y/no-static-element-interactions': OFF,
-        'jsx-a11y/role-has-required-aria-props': OFF,
-        'jsx-a11y/no-noninteractive-tabindex': OFF,
-        'jsx-a11y/tabindex-no-positive': OFF,
-      },
-    },
-    {
-      files: [
-        'packages/react-native-renderer/**/*.js',
-        'packages/react-server-native-relay/**/*.js',
-      ],
-      globals: {
-        nativeFabricUIManager: true,
-      },
-    },
-    {
-      files: ['packages/react-server-dom-webpack/**/*.js'],
-      globals: {
-        __webpack_chunk_load__: true,
-        __webpack_require__: true,
-      },
-    },
-    {
-      files: ['packages/scheduler/**/*.js'],
-      globals: {
-        TaskController: true,
-      },
-    },
-  ],
-
-  globals: {
-    spyOnDev: true,
-    spyOnDevAndProd: true,
-    spyOnProd: true,
-    __EXPERIMENTAL__: true,
-    __EXTENSION__: true,
-    __PROFILE__: true,
-    __TEST__: true,
-    __UMD__: true,
-    __VARIANT__: true,
-    gate: true,
-    trustedTypes: true,
-  },
-};

.gitattributes

@@ -1 +0,0 @@
-* text=auto

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,41 +0,0 @@
----
-name: "🐛 Bug Report"
-about: Report a reproducible bug or regression.
-title: 'Bug: '
-labels: 'Status: Unconfirmed'
-
----
-
-<!--
-  Please provide a clear and concise description of what the bug is. Include
-  screenshots if needed. Please test using the latest version of the relevant
-  React packages to make sure your issue has not already been fixed.
--->
-
-React version:
-
-## Steps To Reproduce
-
-1.
-2.
-
-<!--
-  Your bug will get fixed much faster if we can run your code and it doesn't
-  have dependencies other than React. Issues without reproduction steps or
-  code examples may be immediately closed as not actionable.
--->
-
-Link to code example:
-
-<!--
-  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
-  repository on GitHub, or provide a minimal code example that reproduces the
-  problem. You may provide a screenshot of the application if you think it is
-  relevant to your bug report. Here are some tips for providing a minimal
-  example: https://stackoverflow.com/help/mcve.
--->
-
-## The current behavior
-
-
-## The expected behavior

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +0,0 @@
-contact_links:
-    - name: 📃 Documentation Issue
-      url: https://github.com/reactjs/reactjs.org/issues/new
-      about: This issue tracker is not for documentation issues. Please file documentation issues here.
-    - name: 🤔 Questions and Help
-      url: https://reactjs.org/community/support.html
-      about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.

.github/ISSUE_TEMPLATE/devtools_bug_report.yml

@@ -1,81 +0,0 @@
-name: "⚛️ 🛠 DevTools bug report"
-description: "Report a problem with React DevTools. Please provide enough information that we can reproduce the problem."
-title: "[DevTools Bug]: "
-labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
-body:
-- type: input
-  attributes:
-    label: Website or app
-    description: |
-      Which website or app were you using when the bug happened?
-
-      This should be a public URL, GitHub repo, or Code Sandbox app so the React team can reproduce the error being reported. (Please no localhost URLs.)
-    placeholder: |
-      e.g. website URL, public GitHub repo, or Code Sandbox app
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Repro steps
-    description: |
-      What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
-
-      Issues filed without repro steps will be closed.
-    placeholder: |
-      Example bug report:
-      1. Log in with username/password
-      2. Click "Messages" on the left menu
-      3. Open any message in the list
-  validations:
-    required: true
-- type: dropdown
-  attributes:
-    label: How often does this bug happen?
-    description: |
-      Following the repro steps above, how easily are you able to reproduce this bug?
-    options:
-      - Every time
-      - Often
-      - Sometimes
-      - Only once
-  validations:
-    required: true
-- type: input
-  id: automated_package
-  attributes:
-    label: DevTools package (automated)
-    description: |
-      Please do not edit this field.
-- type: input
-  id: automated_version
-  attributes:
-    label: DevTools version (automated)
-    description: |
-      Please do not edit this field.
-- type: input
-  id: automated_error_message
-  attributes:
-    label: Error message (automated)
-    description: |
-      Please do not edit this field.
-- type: textarea
-  id: automated_call_stack
-  attributes:
-    label: Error call stack (automated)
-    description: |
-      Please do not edit this field.
-    render: text
-- type: textarea
-  id: automated_component_stack
-  attributes:
-    label: Error component stack (automated)
-    description: |
-      Please do not edit this field.
-    render: text
-- type: textarea
-  id: automated_github_query_string
-  attributes:
-    label: GitHub query string (automated)
-    description: |
-      Please do not edit this field.
-    render: text

.github/ISSUE_TEMPLATE/react_18.md

@@ -1,11 +0,0 @@
----
-name: "💬 React 18"
-about: Bug reports, questions, and general feedback about React 18
-title: 'React 18 '
-labels: 'Type: Discussion, React 18'
-
----
-
-<!--
-  Ask a question or share feedback about the React 18 release here.
--->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,27 +0,0 @@
-<!--
-  Thanks for submitting a pull request!
-  We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
-
-  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/) type checks (`yarn flow`).
-  10. If you haven't already, complete the CLA.
-
-  Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html
--->
-
-## Summary
-
-<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
-
-## Test Plan
-
-<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

.github/stale.yml

@@ -1,34 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 90
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - "Partner"
-  - "React Core Team"
-  - "Resolution: Backlog"
-  - "Type: Bug"
-  - "Type: Discussion"
-  - "Type: Needs Investigation"
-  - "Type: Regression"
-# Label to use when marking an issue as stale
-staleLabel: "Resolution: Stale"
-issues:
-  # Comment to post when marking an issue as stale.
-  markComment: >
-    This issue has been automatically marked as stale.
-    **If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open.
-    We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
-  # Comment to post when closing a stale issue.
-  closeComment: >
-    Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
-pulls:
-  # Comment to post when marking a pull request as stale.
-  markComment: >
-    This pull request has been automatically marked as stale.
-    **If this pull request is still relevant, please leave any comment** (for example, "bump"), and we'll keep it open.
-    We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
-  # Comment to post when closing a stale pull request.
-  closeComment: >
-    Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!

.github/workflows/devtools_check_repro.yml

@@ -1,205 +0,0 @@
-name: DevTools Check for bug repro
-on:
-  issues:
-    types: [opened, edited]
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  check-repro:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/github-script@v3
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const URL_REGEXP = /### Website or app[\r\n]+([^#]+)###/m;
-            const REPRO_STEPS_REGEXP = /### Repro steps[\r\n]+([^#]+)###/m;
-            const LABEL_NEEDS_MORE_INFORMATION = "Resolution: Needs More Information";
-            const LABEL_UNCONFIRMED = "Status: Unconfirmed";
-
-            function debug(...args) {
-              core.info(args.map(JSON.stringify).join(' '));
-            }
-
-            if (context.payload.comment) {
-              debug('Ignoring comment update.');
-              return;
-            }
-
-            const user = context.payload.sender.login;
-            const issue = context.payload.issue;
-            const body = issue.body;
-
-            const urlMatch = body.match(URL_REGEXP);
-            const reproStepsMatch = body.match(REPRO_STEPS_REGEXP);
-
-            const url = urlMatch !== null ? urlMatch[1].trim() : null;
-            const reproSteps = reproStepsMatch !== null ? reproStepsMatch[1].trim() : null;
-
-            if (!url || !reproSteps) {
-              debug('This issue is not a DevTools bug report.');
-              return;
-            }
-
-            debug(`found URL "${url}"`);
-            debug(`found repro steps "${reproSteps}"`);
-
-            async function createComment(comment) {
-              // Format
-              comment = comment
-                .split("\n")
-                .map((line) => line.trim())
-                .join("\n")
-                .trim();
-
-              await github.issues.createComment({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                body: comment,
-              });
-            }
-
-            async function getGitHubActionComments() {
-              debug(`Loading existing comments...`);
-
-              const comments = await github.issues.listComments({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              });
-
-              return comments.data.filter(comment => {
-                debug(`comment by user: "${comment.user.login}"`);
-                return comment.user.login === 'github-actions[bot]';
-              });
-            }
-
-            async function getIssueLabels() {
-              const issues = await github.issues.listLabelsOnIssue({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              });
-
-              return issues.data;
-            }
-
-            async function updateIssue(state, assignees = []) {
-              await github.issues.update({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                state,
-                assignees,
-              });
-            }
-
-            async function closeWithComment(comment) {
-              if (issue.state !== 'open') {
-                debug(`Issue is not open`);
-                return;
-              }
-
-              const labels = await getIssueLabels();
-              const label = labels.find(label => label.name === LABEL_UNCONFIRMED);
-              if (!label) {
-                debug(`Issue was not opened via DevTools bug report template`);
-                return;
-              }
-
-              const comments = await getGitHubActionComments();
-              if (comments.length > 0) {
-                debug(`Already commented on issue; won't comment again`);
-                return;
-              }
-
-              debug(`Missing required information`);
-
-              await github.issues.addLabels({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                labels: [LABEL_NEEDS_MORE_INFORMATION],
-              });
-
-              await createComment(comment);
-              await updateIssue('closed', [user]);
-            }
-
-            async function openWithComment(comment) {
-              if (issue.state !== 'closed') {
-                debug(`Issue is already open`);
-                return;
-              }
-
-              const labels = await getIssueLabels();
-              const label = labels.find(label => label.name === LABEL_NEEDS_MORE_INFORMATION);
-              if (!label) {
-                debug(`Issue was not tagged as needs information`);
-                return;
-              }
-
-              const comments = await getGitHubActionComments();
-              if (comments.length === 0) {
-                debug(`Issue was closed by someone else; won't reopen`);
-                return;
-              }
-
-              debug(`Re-opening closed issue`);
-
-              await github.issues.removeLabel({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                name: LABEL_NEEDS_MORE_INFORMATION,
-              });
-
-              await createComment(comment);
-              await updateIssue('open');
-            }
-
-            const PROBABLY_NOT_A_URL_REGEX = /(^Chrome$|^Firefox$| Website)/i;
-
-            const COMMENT_HEADER = `
-              @${user}: We're sorry you've seen this error. ❤️
-            `.trim();
-
-            const COMMENT_FOOTER = `
-              Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)
-
-              Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
-
-              Issues without repros are automatically closed but we will re-open if you update with repro info.
-            `.trim();
-
-            if (url.includes("localhost")) {
-              closeWithComment(`
-                ${COMMENT_HEADER}
-
-                Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.)
-
-                ${COMMENT_FOOTER}
-              `);
-            } else if (url.length < 10 || url.match(PROBABLY_NOT_A_URL_REGEX)) {
-              closeWithComment(`
-                ${COMMENT_HEADER}
-
-                It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)
-
-                ${COMMENT_FOOTER}
-              `);
-            } else if (reproSteps.length < 25) {
-              closeWithComment(`
-                ${COMMENT_HEADER}
-
-                Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce and fix it though.
-
-                ${COMMENT_FOOTER}
-              `);
-            } else {
-              openWithComment(`
-                Thank you for providing repro steps! Re-opening issue now for triage.
-              `);
-            }

.gitignore

@@ -1,39 +1,24 @@
 .DS_STORE
 node_modules
-scripts/flow/*/.flowconfig
-.flowconfig
 *~
 *.pyc
+static
 .grunt
 _SpecRunner.html
-__benchmarks__
 build/
-build2/
-remote-repo/
-coverage/
 .module-cache
-fixtures/dom/public/react-dom.js
-fixtures/dom/public/react.js
-test/the-files-to-test.generated.js
-*.log*
-chrome-user-data
-*.sublime-project
-*.sublime-workspace
-.idea
-*.iml
-.vscode
-*.swp
-*.swo
+*.gem
+docs/code
+docs/_site
+docs/.sass-cache
+docs/css/react.css
+docs/js/.module-cache
+docs/js/JSXTransformer.js
+docs/js/react.min.js
+docs/js/docs.js
+docs/js/jsx-compiler.js
+docs/js/live_editor.js
+docs/js/examples
+docs/downloads
+examples/shared/*.js
 
-packages/react-devtools-core/dist
-packages/react-devtools-extensions/chrome/build
-packages/react-devtools-extensions/chrome/*.crx
-packages/react-devtools-extensions/chrome/*.pem
-packages/react-devtools-extensions/firefox/build
-packages/react-devtools-extensions/firefox/*.xpi
-packages/react-devtools-extensions/firefox/*.pem
-packages/react-devtools-extensions/shared/build
-packages/react-devtools-extensions/.tempUserDataDir
-packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist

.jshintrc

@@ -0,0 +1,20 @@
+{
+  "node": true,
+
+  "boss": true,
+  "curly": true,
+  "devel": true,
+  "eqnull": true,
+  "expr": true,
+  "funcscope": true,
+  "globalstrict": true,
+  "loopfunc": true,
+  "newcap": false,
+  "noempty": true,
+  "nonstandard": true,
+  "onecase": true,
+  "regexdash": true,
+  "trailing": true,
+  "undef": true,
+  "unused": "vars"
+}

.mailmap

@@ -1,168 +0,0 @@
-Adam Timberlake <adam.timberlake@gmail.com>
-Alex Mykyta <dancingwithcows@gmail.com>
-Alex Pien <alexpien@gmail.com>
-Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
-Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
-Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
-Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
-Andreas Svensson <andreas@syranide.com>
-Andres Suarez <zertosh@gmail.com>
-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 Halpern <bendhalpern@gmail.com>
-Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
-Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
-Bill Fisher <fisherwebdev@gmail.com>
-Blaine Kasten <blainekasten@gmail.com>
-Brandon Tilley <brandon@brandontilley.com>
-Changsoon Bok <winmain@gmail.com>
-Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
-Christian Oliff <christianoliff@yahoo.com>
-Christoph Pojer <christoph.pojer@gmail.com>
-Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
-Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
-Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
-Dan Schafer <dschafer@fb.com>
-Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
-Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
-Daniel Hejl <daniel.hejl@hotmail.com>
-Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
-Dave Galbraith <dave@jut.io>
-Dennis Johnson <songawee@gmail.com>
-Dmitry Blues <dmitri.blyus@gmail.com>
-Dongsheng Liu <bellanchor@gmail.com>
-Erik Harper <eharper@mixpo.com>
-Evan Coonrod <evan@paloalto.com>
-Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
-Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
-François-Xavier Bois <fxbois@gmail.com>
-Fyodor Ivanishchev <cbrwizard@gmail.com>
-Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
-Geert Pasteels <geert.pasteels@gmail.com>
-George A Sisco III <george.sisco@gmail.com>
-Georgii Dolzhykov <thorn.mailbox@gmail.com>
-Harry Hull <harry.hull1@gmail.com>
-Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
-Hyeock Kwon <doublus@gmail.com>
-Ian Obermiller <ian@obermillers.com> <iano@fb.com>
-Ilia Pavlenkov <dortonway@gmail.com>
-Ilyá Belsky <gelias.gbelsky@gmail.com>
-Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
-Irae Carvalho <irae@irae.pro.br>
-Ivan Vergiliev <ivan.vergiliev@gmail.com>
-JJ Weber <jj.weber@gmail.com>
-Jae Hun Ro <jhr24@duke.edu>
-Jaime Mingo <j.mingov@3boll.com>
-James Brantly <james@jbrantly.com>
-Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
-Jan Kassens <jan@kassens.net> <jkassens@fb.com>
-Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
-Jason Quense <monastic.panic@gmail.com>
-Jason Trill <jason@jasontrill.com>
-Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
-Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
-Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
-Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
-Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
-Jim Sproch <jsproch@fb.com>
-Jim Sproch <jsproch@fb.com> <jsfb@github>
-Jim Sproch <jsproch@fb.com> <none@no-reply.com>
-Jinwoo Oh <arkist@gmail.com>
-Jinxiu Lee <lee.jinxiu@gmail.com>
-Jiyeon Seo <zzzeons@gmail.com>
-Jon Chester <jonchester@fb.com>
-Jon Madison <jon@tfftech.com>
-Jonathan Hsu <jhiswin@gmail.com>
-Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
-Jordan Walke <jordojw@gmail.com>
-Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
-Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
-Josh Duck <josh@fb.com> <github@joshduck.com>
-Juan Serrano <germ13@users.noreply.github.com>
-Jun Wu <quark@lihdd.net>
-Justin Robison <jrobison151@gmail.com>
-Keito Uchiyama <projects@keito.me> <keito@fb.com>
-Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
-Krystian Karczewski <karcz.k@gmail.com>
-Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
-Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
-Lea Rosema <terabaud@gmail.com>
-Marcin K. <katzoo@github.mail>
-Mark Anderson <undernewmanagement@users.noreply.github.com>
-Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
-Martin Andert <mandert@gmail.com>
-Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
-Matsunoki <himkt@klis.tsukuba.ac.jp>
-Matt Brookes <matt@brookes.net>
-Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
-Matt Zabriskie <mzabriskie@gmail.com>
-Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
-Matthew Looi <looi.matthew@gmail.com>
-Mattijs Kneppers <mattijs@arttech.nl>
-Max Heiber <max.heiber@gmail.com>
-Max Stoiber <contact@mstoiber.com>
-Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
-Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
-Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
-Minwe LUO <minwe@yunshipei.com>
-Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
-Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
-Neri Marschik <marschik_neri@cyberagent.co.jp>
-Nick Gavalas <njg57@cornell.edu>
-Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
-Patrick Stapleton <github@gdi2290.com>
-Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
-Paul Shen <paul@mnml0.com> <paulshen@fb.com>
-Pete Hunt <floydophone@gmail.com>
-Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
-Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
-Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
-Petri Lievonen <plievone@cc.hut.fi>
-Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
-Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
-Pouja Nikray <poujanik@gmail.com>
-Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
-Ray <ray@tomo.im>
-Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
-Richard Livesey <Livesey7@hotmail.co.uk>
-Rick Hanlon <rickhanlonii@gmail.com>
-Rick Hanlon <rickhanlonii@gmail.com> <rickhanlonii@fb.com>
-Rob Arnold <robarnold@cs.cmu.edu>
-Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
-Robin Frischmann <robin@rofrischmann.de>
-Sander Spies <sandermail@gmail.com>
-Scott Feeney <scott@oceanbase.org> <smf@fb.com>
-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>
-Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
-Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
-Seth Webster <sethwebster@gmail.com> <sethwebster@fb.com>
-Stoyan Stefanov <ssttoo@ymail.com>
-Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
-Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
-Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
-Tomoya Suzuki <tmysz.dev@gmail.com>
-Vasiliy Loginevskiy <Yeti.or@gmail.com>
-Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
-Vjeux <vjeuxx@gmail.com>
-Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
-Volkan Unsal <spocksplanet@gmail.com>
-Wander Wang <wander.wang@ismole.com>
-Xavier Morel <xmo-odoo@users.noreply.github.com>
-YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
-Yutaka Nakajima <nakazye@gmail.com>
-Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
-iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
-元彦 <yuanyan@users.noreply.github.com>
-张敏 <cookfront@gmail.com>

.nvmrc

@@ -1 +0,0 @@
-v12.17.0

.prettierignore

@@ -1,8 +0,0 @@
-packages/react-devtools-core/dist
-packages/react-devtools-extensions/chrome/build
-packages/react-devtools-extensions/firefox/build
-packages/react-devtools-extensions/shared/build
-packages/react-devtools-inline/dist
-packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static

.prettierrc.js

@@ -1,21 +0,0 @@
-'use strict';
-
-const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
-
-module.exports = {
-  bracketSpacing: false,
-  singleQuote: true,
-  jsxBracketSameLine: true,
-  trailingComma: 'es5',
-  printWidth: 80,
-  parser: 'babel',
-
-  overrides: [
-    {
-      files: esNextPaths,
-      options: {
-        trailingComma: 'all',
-      },
-    },
-  ],
-};

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "0.10"

.watchmanconfig

@@ -1 +0,0 @@
-{}

CODE_OF_CONDUCT.md

@@ -1,80 +0,0 @@
-# Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to make participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies within all project spaces, and it also applies when
-an individual is representing the project or its community in public spaces.
-Examples of representing a project or community include using an official
-project e-mail address, posting via an official social media account, or acting
-as an appointed representative at an online or offline event. Representation of
-a project may be further defined and clarified by project maintainers.
-
-This Code of Conduct also applies outside the project spaces when there is a
-reasonable belief that an individual's behavior may have a negative impact on
-the project or its community.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at <opensource-conduct@fb.com>. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -1,5 +1,63 @@
 # 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. 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 preempts some questions you may have.
 
-We wrote a **[contribution guide](https://reactjs.org/contributing/how-to-contribute.html)** to help you get started.
+## 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.
+
+### Pull Requests
+
+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://developers.facebook.com/opensource/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 and go through the process outlined on that page.
+
+## How to Get in Touch
+
+* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
+* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
+
+## Coding Style
+
+* Use semicolons;
+* Commas last,
+* 2 spaces for indentation (no tabs)
+* Prefer `'` over `"`
+* `"use strict";`
+* 80 character line length
+* "Attractive"
+
+## License
+
+By contributing to React, you agree that your contributions will be licensed under the [Apache License Version 2.0 (APLv2)](LICENSE).

Gruntfile.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var exec = require('child_process').exec;
+var jsxTask = require('./grunt/tasks/jsx');
+var browserifyTask = require('./grunt/tasks/browserify');
+var wrapupTask = require('./grunt/tasks/wrapup');
+var phantomTask = require('./grunt/tasks/phantom');
+var npmTask = require('./grunt/tasks/npm');
+var releaseTasks = require('./grunt/tasks/release');
+
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    copy: require('./grunt/config/copy'),
+    jsx: require('./grunt/config/jsx/jsx'),
+    browserify: require('./grunt/config/browserify'),
+    wrapup: require('./grunt/config/wrapup'),
+    phantom: require('./grunt/config/phantom'),
+    npm: require('./grunt/config/npm'),
+    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js'],
+    jshint: require('./grunt/config/jshint'),
+    compare_size: require('./grunt/config/compare_size')
+  });
+
+  grunt.config.set('compress', require('./grunt/config/compress'));
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-compare-size');
+  grunt.loadNpmTasks('grunt-contrib-compress');
+
+  // Alias 'jshint' to 'lint' to better match the workflow we know
+  grunt.registerTask('lint', ['jshint']);
+
+  // Register jsx:debug and :release tasks.
+  grunt.registerMultiTask('jsx', jsxTask);
+
+  // Our own browserify-based tasks to build a single JS file build
+  grunt.registerMultiTask('browserify', browserifyTask);
+
+  // Similar to Browserify, use WrapUp to generate single JS file that
+  // defines global variables instead of using require.
+  grunt.registerMultiTask('wrapup', wrapupTask);
+
+  grunt.registerMultiTask('phantom', phantomTask);
+
+  grunt.registerMultiTask('npm', npmTask);
+
+  grunt.registerTask('build:basic', ['jsx:debug', 'browserify:basic']);
+  grunt.registerTask('build:transformer', ['jsx:debug', 'browserify:transformer']);
+  grunt.registerTask('build:min', ['jsx:release', 'browserify:min']);
+  grunt.registerTask('build:test', [
+    'jsx:debug',
+    'jsx:jasmine',
+    'jsx:test',
+    'browserify:jasmine',
+    'browserify:test'
+  ]);
+
+  grunt.registerTask('test', ['build:test', 'phantom:run']);
+  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 jsx:debug once.
+  grunt.registerTask('build', [
+    'jsx:debug',
+    'browserify:basic',
+    'browserify:transformer',
+    'jsx:release',
+    'browserify:min',
+    'copy:react_docs',
+    'compare_size'
+  ]);
+
+  // Automate the 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',
+    'gem:only',
+    'release:bower',
+    'release:starter',
+    'compress',
+    'release:docs',
+    'release:msg'
+  ]);
+
+  // `gem` task to build the react-source gem
+  grunt.registerTask('gem', ['build', 'gem:only']);
+
+  grunt.registerTask('gem:only', function() {
+    var done = this.async();
+    exec('gem build react-source.gemspec', done);
+  });
+
+  // The default task - build - to keep setup easy
+  grunt.registerTask('default', ['build']);
+};

LICENSE

@@ -1,21 +1,201 @@
-MIT License
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
 
-Copyright (c) Facebook, Inc. and its affiliates.
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
-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:
+   1. Definitions.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
 
-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.
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,75 +1,96 @@
-# [React](https://reactjs.org/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.png?branch=master)](https://travis-ci.org/facebook/react)
 
 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://reactnative.dev/).
+* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
+* **Efficient:** React computes the minimal set of changes necessary to keep your DOM up-to-date.
+* **Flexible:** React works with the libraries and frameworks that you already know.
 
-[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
-
-## 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/package/react).
-
-## 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.](http://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](http://facebook.github.io/react). Here is the first one to get you started:
 
-```jsx
-function HelloMessage({ name }) {
-  return <div>Hello {name}</div>;
-}
+```js
+/** @jsx React.DOM */
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>{'Hello ' + this.props.name}</div>;
+  }
+});
 
-ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+React.renderComponent(
+  <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. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
+You'll notice that we used an XML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/syntax.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 evolving 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:
 
-### [Code of Conduct](https://code.fb.com/codeofconduct)
+```html
+<!-- The core React library -->
+<script src="http://fb.me/react-0.3.2.min.js"></script>
+<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
+<script src="http://fb.me/JSXTransformer-0.3.2.js"></script>
+```
 
-Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
+We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.3.2.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
+## Contribute
 
-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.
+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.
 
-### License
+### Building Your Copy of React
 
-React is [MIT licensed](./LICENSE).
+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 v0.10.0+ (it might work at lower versions, we just haven't tested).
+* 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
+# Create test build & run tests with PhantomJS
+grunt test
+# Lint the core library code with JSHint
+grunt lint
+# Lint package code
+grunt lint:package
+# Wipe out build directory
+grunt clean
+```
+
+### 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).

ReactVersions.js

@@ -1,57 +0,0 @@
-'use strict';
-
-// This module is the single source of truth for versioning packages that we
-// publish to npm.
-//
-// Packages will not be published unless they are added here.
-//
-// The @latest channel uses the version as-is, e.g.:
-//
-//   18.0.0
-//
-// The @next channel appends additional information, with the scheme
-// <version>-<label>-<commit_sha>, e.g.:
-//
-//   18.0.0-alpha-a1c2d3e4
-//
-// The @experimental channel doesn't include a version, only a date and a sha, e.g.:
-//
-//   0.0.0-experimental-241c4467e-20200129
-
-const ReactVersion = '18.0.0';
-
-// The label used by the @next channel. Represents the upcoming release's
-// stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'alpha';
-
-const stablePackages = {
-  'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1',
-  'jest-react': '0.12.1',
-  react: ReactVersion,
-  'react-art': ReactVersion,
-  'react-dom': ReactVersion,
-  'react-is': ReactVersion,
-  'react-reconciler': '0.27.0',
-  'react-refresh': '0.11.0',
-  'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0',
-  scheduler: '0.21.0',
-};
-
-// These packages do not exist in the @next or @latest channel, only
-// @experimental. We don't use semver, just the commit sha, so this is just a
-// list of package names instead of a map.
-const experimentalPackages = [
-  'react-fetch',
-  'react-fs',
-  'react-pg',
-  'react-server-dom-webpack',
-];
-
-module.exports = {
-  ReactVersion,
-  nextChannelLabel,
-  stablePackages,
-  experimentalPackages,
-};

SECURITY.md

@@ -1,7 +0,0 @@
-# Reporting Security Issues
-
-If you believe you have found a security vulnerability in React, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
-
-Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported:
-
-https://www.facebook.com/whitehat

appveyor.yml

@@ -1,41 +0,0 @@
-image: Visual Studio 2017
-
-# Fix line endings in Windows. (runs before repo cloning)
-init:
-  - git config --global core.autocrlf input
-
-environment:
-  JAVA_HOME: C:\Program Files\Java\jdk1.8.0
-  matrix:
-    - nodejs_version: 10
-
-# 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"

babel.config.js

@@ -1,27 +0,0 @@
-'use strict';
-
-module.exports = {
-  plugins: [
-    '@babel/plugin-syntax-jsx',
-    '@babel/plugin-transform-react-jsx',
-    '@babel/plugin-transform-flow-strip-types',
-    ['@babel/plugin-proposal-class-properties', {loose: true}],
-    'syntax-trailing-function-commas',
-    [
-      '@babel/plugin-proposal-object-rest-spread',
-      {loose: true, useBuiltIns: true},
-    ],
-    ['@babel/plugin-transform-template-literals', {loose: true}],
-    '@babel/plugin-transform-literals',
-    '@babel/plugin-transform-arrow-functions',
-    '@babel/plugin-transform-block-scoped-functions',
-    '@babel/plugin-transform-object-super',
-    '@babel/plugin-transform-shorthand-properties',
-    '@babel/plugin-transform-computed-properties',
-    '@babel/plugin-transform-for-of',
-    ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
-    '@babel/plugin-transform-parameters',
-    ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
-    ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
-  ],
-};

bin/jsx

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+"use strict";
+
+var visitors = require('../vendor/fbtransform/visitors').transformVisitors;
+var transform = require('../vendor/fbtransform/lib/transform').transform;
+var debranch = require("../vendor/woodchipper").debranch;
+
+require("commoner").resolve(function(id) {
+  var context = this;
+
+  // Note that the result of context.getProvidedP() is cached for the
+  // duration of the build, so it is both consistent and cheap to
+  // evaluate multiple times.
+  return context.getProvidedP().then(function(idToPath) {
+    // If a module declares its own identifier using @providesModule
+    // then that identifier will be a key in the idToPath object.
+    if (idToPath.hasOwnProperty(id)) {
+      return context.readFileP(idToPath[id]);
+    }
+
+    // Otherwise assume the identifier maps directly to a path in the
+    // filesystem.
+    return context.readModuleP(id);
+  });
+
+}).process(function(id, source) {
+  var context = this;
+
+  // This is where JSX, ES6, etc. desugaring happens.
+  source = transform(visitors.react, source).code;
+
+  return context.makePromise(function(callback) {
+    var constants = context.config.constants || {};
+
+    // Debranching means removing any obviously dead code after
+    // replacing constant conditional expressions with literal
+    // (boolean) values.
+    debranch(constants, source, function(source) {
+      callback(null, source);
+    });
+  });
+});

dangerfile.js

@@ -1,247 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-/* eslint-disable no-for-of-loops/no-for-of-loops */
-
-// 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:
-//
-//  0a7d5c3cad9a6dbec2d9 9a5222cf49062a4c1ef7
-//
-// (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, warn} = require('danger');
-const {promisify} = require('util');
-const glob = promisify(require('glob'));
-const gzipSize = require('gzip-size');
-
-const {readFileSync, statSync} = require('fs');
-
-const BASE_DIR = 'base-build';
-const HEAD_DIR = 'build2';
-
-const CRITICAL_THRESHOLD = 0.02;
-const SIGNIFICANCE_THRESHOLD = 0.002;
-const CRITICAL_ARTIFACT_PATHS = new Set([
-  // We always report changes to these bundles, even if the change is
-  // insiginificant or non-existent.
-  'oss-stable/react-dom/cjs/react-dom.production.min.js',
-  'oss-experimental/react-dom/cjs/react-dom.production.min.js',
-  'facebook-www/ReactDOM-prod.classic.js',
-  'facebook-www/ReactDOM-prod.modern.js',
-  'facebook-www/ReactDOMForked-prod.classic.js',
-]);
-
-const kilobyteFormatter = new Intl.NumberFormat('en', {
-  style: 'unit',
-  unit: 'kilobyte',
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
-function kbs(bytes) {
-  return kilobyteFormatter.format(bytes / 1000);
-}
-
-const percentFormatter = new Intl.NumberFormat('en', {
-  style: 'percent',
-  signDisplay: 'exceptZero',
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
-function change(decimal) {
-  if (Number === Infinity) {
-    return 'New file';
-  }
-  if (decimal === -1) {
-    return 'Deleted';
-  }
-  if (decimal < 0.0001) {
-    return '=';
-  }
-  return percentFormatter.format(decimal);
-}
-
-const header = `
-  | Name | +/- | Base | Current | +/- gzip | Base gzip | Current gzip |
-  | ---- | --- | ---- | ------- | -------- | --------- | ------------ |`;
-
-function row(result) {
-  // prettier-ignore
-  return `| ${result.path} | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
-}
-
-(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;
-  if (upstreamRepo !== 'facebook/react') {
-    // Exit unless we're running in the main repo
-    return;
-  }
-
-  let headSha;
-  let baseSha;
-  try {
-    headSha = (readFileSync(HEAD_DIR + '/COMMIT_SHA') + '').trim();
-    baseSha = (readFileSync(BASE_DIR + '/COMMIT_SHA') + '').trim();
-  } catch {
-    warn(
-      "Failed to read build artifacts. It's possible a build configuration " +
-        'has changed upstream. Try pulling the latest changes from the ' +
-        'main branch.'
-    );
-    return;
-  }
-
-  const resultsMap = new Map();
-
-  // Find all the head (current) artifacts paths.
-  const headArtifactPaths = await glob('**/*.js', {cwd: 'build2'});
-  for (const artifactPath of headArtifactPaths) {
-    try {
-      // This will throw if there's no matching base artifact
-      const baseSize = statSync(BASE_DIR + '/' + artifactPath).size;
-      const baseSizeGzip = gzipSize.fileSync(BASE_DIR + '/' + artifactPath);
-
-      const headSize = statSync(HEAD_DIR + '/' + artifactPath).size;
-      const headSizeGzip = gzipSize.fileSync(HEAD_DIR + '/' + artifactPath);
-      resultsMap.set(artifactPath, {
-        path: artifactPath,
-        headSize,
-        headSizeGzip,
-        baseSize,
-        baseSizeGzip,
-        change: (headSize - baseSize) / baseSize,
-        changeGzip: (headSizeGzip - baseSizeGzip) / baseSizeGzip,
-      });
-    } catch {
-      // There's no matching base artifact. This is a new file.
-      const baseSize = 0;
-      const baseSizeGzip = 0;
-      const headSize = statSync(HEAD_DIR + '/' + artifactPath).size;
-      const headSizeGzip = gzipSize.fileSync(HEAD_DIR + '/' + artifactPath);
-      resultsMap.set(artifactPath, {
-        path: artifactPath,
-        headSize,
-        headSizeGzip,
-        baseSize,
-        baseSizeGzip,
-        change: Infinity,
-        changeGzip: Infinity,
-      });
-    }
-  }
-
-  // Check for base artifacts that were deleted in the head.
-  const baseArtifactPaths = await glob('**/*.js', {cwd: 'base-build'});
-  for (const artifactPath of baseArtifactPaths) {
-    if (!resultsMap.has(artifactPath)) {
-      const baseSize = statSync(BASE_DIR + '/' + artifactPath).size;
-      const baseSizeGzip = gzipSize.fileSync(BASE_DIR + '/' + artifactPath);
-      const headSize = 0;
-      const headSizeGzip = 0;
-      resultsMap.set(artifactPath, {
-        path: artifactPath,
-        headSize,
-        headSizeGzip,
-        baseSize,
-        baseSizeGzip,
-        change: -1,
-        changeGzip: -1,
-      });
-    }
-  }
-
-  const results = Array.from(resultsMap.values());
-  results.sort((a, b) => b.change - a.change);
-
-  let criticalResults = [];
-  for (const artifactPath of CRITICAL_ARTIFACT_PATHS) {
-    const result = resultsMap.get(artifactPath);
-    if (result === undefined) {
-      throw new Error(
-        'Missing expected bundle. If this was an intentional change to the ' +
-          'build configuration, update Dangerfile.js accordingly: ' +
-          artifactPath
-      );
-    }
-    criticalResults.push(row(result));
-  }
-
-  let significantResults = [];
-  for (const result of results) {
-    // If result exceeds critical threshold, add to top section.
-    if (
-      (result.change > CRITICAL_THRESHOLD ||
-        0 - result.change > CRITICAL_THRESHOLD ||
-        // New file
-        result.change === Infinity ||
-        // Deleted file
-        result.change === -1) &&
-      // Skip critical artifacts. We added those earlier, in a fixed order.
-      !CRITICAL_ARTIFACT_PATHS.has(result.path)
-    ) {
-      criticalResults.push(row(result));
-    }
-
-    // Do the same for results that exceed the significant threshold. These
-    // will go into the bottom, collapsed section. Intentionally including
-    // critical artifacts in this section, too.
-    if (
-      result.change > SIGNIFICANCE_THRESHOLD ||
-      0 - result.change > SIGNIFICANCE_THRESHOLD ||
-      result.change === Infinity ||
-      result.change === -1
-    ) {
-      significantResults.push(row(result));
-    }
-  }
-
-  markdown(`
-Comparing: ${baseSha}...${headSha}
-
-## Critical size changes
-
-Includes critical production bundles, as well as any change greater than ${CRITICAL_THRESHOLD *
-    100}%:
-
-${header}
-${criticalResults.join('\n')}
-
-## Significant size changes
-
-Includes any change greater than ${SIGNIFICANCE_THRESHOLD * 100}%:
-
-${
-  significantResults.length > 0
-    ? `
-<details>
-<summary>Expand to show</summary>
-${header}
-${significantResults.join('\n')}
-</details>
-`
-    : '(No significant changes)'
-}
-`);
-})();

docs/Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+# jekyll, which builds it all
+gem 'jekyll', '~>1.0'
+
+# JSON
+gem 'json'
+
+# SASS for CSS
+gem 'sass'
+
+# For `rake watch`
+gem 'rb-fsevent'
+
+# Redcarpet for Markdown
+gem 'redcarpet'

docs/Gemfile.lock

@@ -0,0 +1,46 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    classifier (1.3.3)
+      fast-stemmer (>= 1.0.0)
+    colorator (0.1)
+    commander (4.1.3)
+      highline (~> 1.6.11)
+    directory_watcher (1.4.1)
+    fast-stemmer (1.0.2)
+    highline (1.6.19)
+    jekyll (1.0.2)
+      classifier (~> 1.3)
+      colorator (~> 0.1)
+      commander (~> 4.1.3)
+      directory_watcher (~> 1.4.1)
+      kramdown (~> 1.0.2)
+      liquid (~> 2.3)
+      maruku (~> 0.5)
+      pygments.rb (~> 0.5.0)
+      safe_yaml (~> 0.7.0)
+    json (1.8.0)
+    kramdown (1.0.2)
+    liquid (2.5.0)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    posix-spawn (0.3.6)
+    pygments.rb (0.5.0)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
+    rb-fsevent (0.9.3)
+    redcarpet (2.2.2)
+    safe_yaml (0.7.1)
+    sass (3.2.9)
+    syntax (1.0.0)
+    yajl-ruby (1.1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 1.0)
+  json
+  rb-fsevent
+  redcarpet
+  sass

docs/README.md

@@ -0,0 +1,61 @@
+# 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.
+```
+
+### 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
+$ rake
+$ 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
+$ rake watch # Automatically compiles as needed.
+# rake         Manually compile CSS and JS.
+# rake css     Manually compile CSS, only.
+# 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 relase tag in the main repository.
+
+### 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.

docs/Rakefile

@@ -0,0 +1,37 @@
+require('rubygems')
+require('json')
+require('yaml')
+
+desc "generate css from sass"
+task :css do
+  system "sass --style=compressed _css/react.scss css/react.css"
+end
+
+desc "generate js from jsx"
+task :js do
+  system "../bin/jsx _js js"
+end
+
+desc "watch css & js"
+task :watch => [:update_version] do
+  Process.spawn "sass --style=compressed --watch _css/react.scss:css/react.css"
+  Process.spawn "../bin/jsx --watch _js js"
+  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 "build into ../../react-gh-pages"
+task :release => [:default] do
+  system "jekyll build -d ../../react-gh-pages"
+end
+
+task :default => [:update_version, :css, :js]

docs/_config.yml

@@ -0,0 +1,17 @@
+---
+markdown: redcarpet
+name: React
+description: A JavaScript library for building user interfaces
+redcarpet:
+  extensions:
+  - fenced_code_blocks
+react_version: 0.3.3
+pygments: true
+exclude:
+- Gemfile
+- Gemfile.lock
+- README.md
+- Rakefile
+url: http://facebook.github.io
+baseurl: /react
+permalink: /blog/:year/:month/:day/:title.html

docs/_css/_solarized.scss

@@ -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;
+  }

docs/_css/_typography.scss

@@ -0,0 +1,136 @@
+@import 'variables.scss';
+
+$textColor: $mediumColor;
+$textColorLight: lighten($textColor, 20%);
+
+html {
+  font-family: $helvetica;
+  font-family: proxima-nova, $helvetica;
+  font-weight: 300;
+  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: 17px;
+}
+
+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;
+}
+
+

docs/_css/_variables.scss

@@ -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;
+

docs/_css/bourbon/_bourbon-deprecated-upcoming.scss

@@ -0,0 +1,13 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, spec);
+  @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, spec);
+  @warn "background-size is deprecated and will be removed in the next major version release";
+}

docs/_css/bourbon/_bourbon.scss

@@ -0,0 +1,59 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
+// Custom Functions
+@import "functions/compact";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/px-to-em";
+@import "functions/radial-gradient";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+
+// 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/columns";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
+@import "css3/inline-block";
+@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/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";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";

docs/_css/bourbon/addons/_button.scss

@@ -0,0 +1,273 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $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 lightness($base-color) > 70% {
+    $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: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 7px 18px;
+  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) {
+    $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, 0 1px 1px 0 #eee;
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $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 lightness($base-color) > 70% {
+    $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: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 8px 20px;
+  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) {
+    $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, 0 1px 0 #fff;
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $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 lightness($base-color) > 70% {
+    $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, 0 1px 2px 0 #b3b3b3;
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 5px 16px;
+  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) {
+    $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, 0 1px 0 0 #fff;
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}

docs/_css/bourbon/addons/_clearfix.scss

@@ -0,0 +1,29 @@
+// 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 {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

docs/_css/bourbon/addons/_font-family.scss

@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, 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;

docs/_css/bourbon/addons/_hide-text.scss

@@ -0,0 +1,5 @@
+@mixin hide-text {
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}

docs/_css/bourbon/addons/_html5-input-types.scss

@@ -0,0 +1,56 @@
+//************************************************************************//
+// 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"]';
+
+$unquoted-inputs-list: ();
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
+// 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;
+//   }

docs/_css/bourbon/addons/_position.scss

@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}

docs/_css/bourbon/addons/_prefixer.scss

@@ -0,0 +1,49 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
+
+@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;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}

docs/_css/bourbon/addons/_retina-image.scss

@@ -0,0 +1,32 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  @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 + "@2x" + "." + $extension);
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url($retina-filename + "." + $extension);
+      }
+      @else {
+        background-image: url($filename + "@2x" + "." + $extension);
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}

docs/_css/bourbon/addons/_size.scss

@@ -0,0 +1,44 @@
+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}

docs/_css/bourbon/addons/_timing-functions.scss

@@ -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/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);

docs/_css/bourbon/addons/_triangle.scss

@@ -0,0 +1,45 @@
+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}

docs/_css/bourbon/css3/_animation.scss

@@ -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);
+}

docs/_css/bourbon/css3/_appearance.scss

@@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}

docs/_css/bourbon/css3/_backface-visibility.scss

@@ -0,0 +1,6 @@
+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}

docs/_css/bourbon/css3/_background-image.scss

@@ -0,0 +1,48 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  background-image: _add-prefix($images, webkit);
+  background-image: _add-prefix($images);
+}
+
+@function _add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+  $gradient-positions: false;
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // linear or radial
+      $gradient-pos: null;
+      $gradient-args: null;
+
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
+        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
+        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+      }
+      @else {
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      }
+
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));

docs/_css/bourbon/css3/_background.scss

@@ -0,0 +1,103 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: _extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: _background-add-prefix($backgrounds, webkit);
+  background: _background-add-prefix($backgrounds);
+}
+
+@function _extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+@function _background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+
+    // If shorthand is a list (gradient)
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+        $gradient-args:      false;
+        $gradient-positions: false;
+        $shorthand-start:    false;
+        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
+          $gradient-positions: nth($first-member, 2);
+          $gradient-args:      nth($first-member, 3);
+          $shorthand-start: 2;
+        }
+        @else { // Linear gradient only - lg(red,orange),...
+          $gradient-positions: nth($shorthand, 2);
+          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
+        }
+
+        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+        // Append any additional shorthand args to gradient
+        @if $shorthand-start {
+          @for $j from $shorthand-start through length($shorthand) {
+            $gradient: join($gradient, nth($shorthand, $j), space);
+          }
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+    }
+    // If shorthand is a simple string (color or image)
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(circle at 40% 40%, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));

docs/_css/bourbon/css3/_border-image.scss

@@ -0,0 +1,55 @@
+@mixin border-image($images) {
+  -webkit-border-image: _border-add-prefix($images, webkit);
+     -moz-border-image: _border-add-prefix($images, moz);
+       -o-border-image: _border-add-prefix($images, o);
+          border-image: _border-add-prefix($images);
+}
+
+@function _border-add-prefix($images, $vendor: false) {
+  $border-image: null;
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($images, 2);           // Get gradient position
+      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+    }
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    $type: type-of(nth($images, 1));           // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient: nth($images, 1);
+      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($gradient, 2);           // Get gradient position
+      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+      @for $i from 2 through length($images) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//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));
+

docs/_css/bourbon/css3/_border-radius.scss

@@ -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);
+}

docs/_css/bourbon/css3/_box-sizing.scss

@@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  @include prefixer(box-sizing, $box, webkit moz spec);
+}

docs/_css/bourbon/css3/_columns.scss

@@ -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(columns-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);
+}

docs/_css/bourbon/css3/_flex-box.scss

@@ -0,0 +1,52 @@
+// 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: 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);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  @include prefixer(box-align, $align, webkit moz spec);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  @include prefixer(box-direction, $direction, webkit moz spec);
+}
+
+@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);
+}
+
+@mixin box-flex($value: 0.0) {
+  @include prefixer(box-flex, $value, webkit moz spec);
+}
+
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
+}

docs/_css/bourbon/css3/_font-face.scss

@@ -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: false ) {
+  @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');
+    }
+  }
+}

docs/_css/bourbon/css3/_hidpi-media-query.scss

@@ -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;
+  }
+}

docs/_css/bourbon/css3/_image-rendering.scss

@@ -0,0 +1,13 @@
+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}

docs/_css/bourbon/css3/_inline-block.scss

@@ -0,0 +1,8 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}

docs/_css/bourbon/css3/_keyframes.scss

@@ -0,0 +1,43 @@
+// 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;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}

docs/_css/bourbon/css3/_linear-gradient.scss

@@ -0,0 +1,41 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
+                       $fallback: false) {
+  // 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: compact($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: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
+}

docs/_css/bourbon/css3/_perspective.scss

@@ -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);
+}

docs/_css/bourbon/css3/_placeholder.scss

@@ -0,0 +1,29 @@
+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else if $placeholder == "-moz-placeholder" {
+      // FF 18-
+      &:#{$placeholder} {
+        @content;
+      }
+
+      // FF 19+
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}

docs/_css/bourbon/css3/_radial-gradient.scss

@@ -0,0 +1,44 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
+                       $fallback: false) {
+
+  $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: compact($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: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
+}

docs/_css/bourbon/css3/_transform.scss

@@ -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);
+}

docs/_css/bourbon/css3/_transition.scss

@@ -0,0 +1,34 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz spec);
+  }
+
+  @else {
+    $properties: all 0.15s ease-out 0;
+    @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);
+}

docs/_css/bourbon/css3/_user-select.scss

@@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+  @include prefixer(user-select, $arg, webkit moz ms spec);
+}

docs/_css/bourbon/functions/_compact.scss

@@ -0,0 +1,11 @@
+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}

docs/_css/bourbon/functions/_flex-grid.scss

@@ -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%;
+//    }
+//  }

docs/_css/bourbon/functions/_grid-width.scss

@@ -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;
+//  }

docs/_css/bourbon/functions/_linear-gradient.scss

@@ -0,0 +1,13 @@
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
+  $pos-type: type-of(nth($pos, 1));
+
+  // if $pos doesn't exist, fix $gradient
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $gradients: zip($pos $gradients);
+    $pos: false;
+  }
+
+  $type-gradient: $type, $pos, $gradients;
+  @return $type-gradient;
+}

docs/_css/bourbon/functions/_modular-scale.scss

@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com

docs/_css/bourbon/functions/_px-to-em.scss

@@ -0,0 +1,8 @@
+// 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: 16) {
+  @return ($pxval / $base) * 1em;
+}
+

docs/_css/bourbon/functions/_radial-gradient.scss

@@ -0,0 +1,23 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: 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);
+
+  $type: radial;
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  $type-gradient: $type, $shape-size $pos, $gradient;
+  @return $type-gradient;
+}
+
+

docs/_css/bourbon/functions/_tint-shade.scss

@@ -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);
+}

docs/_css/bourbon/functions/_transition-property-name.scss

@@ -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;
+	}
+}

docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss

@@ -0,0 +1,39 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+  @return $gradient;
+}

docs/_css/bourbon/helpers/_gradient-positions-parser.scss

@@ -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;
+}

docs/_css/bourbon/helpers/_linear-positions-parser.scss

@@ -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);
+}

docs/_css/bourbon/helpers/_radial-arg-parser.scss

@@ -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: false;
+    }
+
+    // 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: false;
+          }
+        }
+
+        @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: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}

docs/_css/bourbon/helpers/_radial-positions-parser.scss

@@ -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;
+}

docs/_css/bourbon/helpers/_render-gradients.scss

@@ -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;
+}

docs/_css/bourbon/helpers/_shape-size-stripper.scss

@@ -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;
+}

docs/_css/react.scss

@@ -0,0 +1,684 @@
+@import 'bourbon/bourbon';
+@import '_variables';
+@import '_typography';
+@import '_solarized';
+
+@mixin code-typography {
+  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+$skinnyContentWidth: 650px;
+$contentWidth: 920px;
+$contentPadding: 20px;
+$columnWidth: 280px;
+$columnGutter: 40px;
+$twoColumnWidth: 2 * $columnWidth + $columnGutter;
+
+
+
+// basic reset
+* {
+  @include box-sizing(border-box);
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: $pageBg;
+}
+
+
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+
+.container {
+  padding-top: 50px;
+  min-width: $contentWidth + (2 * $contentPadding);
+}
+
+.wrap {
+  width: $contentWidth + (2 * $contentPadding);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.skinnyWrap {
+  width: $skinnyContentWidth + (2 * $contentPadding);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+hr {
+  height: 0;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
+}
+
+ul,
+li {
+  margin-left: 20px;
+}
+
+// Main Nav
+
+.nav-main {
+  @include clearfix;
+  background: $darkestColor;
+  color: $lightTextColor;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
+  width: 100%;
+  z-index: 100;
+
+  a {
+    color: $lightColor;
+    text-decoration: none;
+  }
+
+  .nav-site {
+    float: right;
+    margin: 0;
+
+    li {
+      margin: 0;
+    }
+
+    a {
+      padding: 0 8px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      line-height: 50px;
+      display: inline-block;
+      height: 50px;
+      color: $mediumTextColor;
+
+      &:hover {
+        color: $lightTextColor;
+      }
+
+      &.active {
+        color: $lightTextColor;
+        border-bottom: 3px solid $primary;
+        background: #333;
+      }
+    }
+  }
+
+  .nav-home {
+    color: #00d8ff;
+    font-size: 24px;
+    line-height: 50px;
+  }
+
+  .nav-logo {
+    @include retina-image('../img/logo_small', 38px 38px);
+    vertical-align: middle;
+  }
+
+  ul {
+    display: inline;
+  }
+
+  li {
+    display: inline;
+  }
+}
+
+// Hero!
+
+.hero {
+  height: 300px;
+  // background: $darkColor url(../img/header.png) no-repeat center;
+  background: $darkColor;
+  padding-top: 50px;
+  color: $lightColor;
+  font-weight: 300;
+
+  .text {
+    font-size: 64px;
+    text-align: center;
+  }
+
+  .minitext {
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  strong {
+    color: $blueColor;
+    font-weight: 400;
+  }
+}
+
+.buttons-unit {
+  margin-top: 60px;
+  text-align: center;
+
+  a {
+    color: $blueColor;
+  }
+
+  .button {
+    font-size: 24px;
+    background: $primary;
+    color: $lightTextColor;
+
+    &:active {
+      background: darken($primary, 5%);
+    }
+  }
+}
+
+// Downloads
+
+.buttons-unit.downloads {
+  margin: 30px 0;
+}
+
+// Docs Nav
+
+.nav-docs {
+  color: $darkColor;
+  font-size: 14px;
+  // position: fixed;
+  float: left;
+  top: 100px;
+  width: 180px;
+
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+  li {
+    margin: 0;
+  }
+  h3 {
+    text-transform: uppercase;
+    font-size: 14px;
+  }
+  a {
+    color: $mediumestColor;
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+      color: $primary;
+    }
+
+    &.active {
+      color: $primary;
+    }
+  }
+
+  .nav-docs-section {
+    border-bottom: 1px solid #ccc;
+    border-top: 1px solid #eee;
+    padding: 12px 0;
+
+    &:first-child {
+       padding-top: 0;
+       border-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
+}
+
+// Home Page specifics
+
+.home-section {
+  margin: 50px 0;
+}
+
+.home-divider {
+  border-top-color: #bbb;
+  margin: 0 auto;
+  width: 400px;
+}
+
+.marketing-row {
+  @include clearfix;
+  margin: 50px 0;
+}
+
+.marketing-col {
+  float: left;
+  margin-right: 40px;
+  width: $columnWidth;
+
+  h3 {
+    color: $darkColor;
+    font-size: 24px;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+  p {
+    font-size: 16px;
+  }
+}
+
+.marketing-col:last-child {
+  margin-right: 0;
+}
+
+#examples {
+  h3 {
+    color: $darkColor;
+    font-size: 24px;
+    font-weight: normal;
+    margin-bottom: 5px;
+  }
+
+  p {
+    margin: 0 0 25px 0;
+    max-width: $twoColumnWidth;
+  }
+
+  .example {
+    margin-top: 60px;
+  }
+
+  #todoExample {
+    font-size: 14px;
+    ul {
+      list-style-type: square;
+      margin: 0 0 10px 0;
+    }
+    input {
+      border: 1px solid #ccc;
+      font: 14px proxima-nova, $helvetica;
+      padding: 3px;
+      width: 150px;
+    }
+    button {
+      font: 14px proxima-nova, $helvetica;
+      margin-left: 5px;
+      padding: 4px 10px;
+    }
+  }
+
+  #markdownExample {
+    textarea {
+      border: 1px solid #ccc;
+      font: 14px proxima-nova, $helvetica;
+      margin-bottom: 10px;
+      padding: 5px;
+    }
+  }
+}
+
+.home-bottom-section {
+  margin-bottom: 100px;
+}
+
+.docs-nextprev {
+  @include clearfix;
+}
+
+.docs-prev {
+  float: left;
+}
+
+.docs-next {
+  float: right;
+}
+
+footer {
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 36px;
+  margin-bottom: 18px;
+  overflow: auto;
+}
+
+section.black content {
+  padding-bottom: 18px;
+}
+
+/**
+ * Blog
+ */
+
+.blogContent {
+  padding-top: 20px;
+
+  blockquote {
+    padding: 5px 15px;
+    margin: 20px 0;
+    background-color: #f8f5ec;
+    border-left: 5px solid #f7ebc6;
+  }
+
+}
+
+/**
+ * Docs
+ */
+
+.documentationContent {
+  @include clearfix;
+
+  .subHeader {
+    font-size: 24px;
+  }
+
+  // H2s form documentation topic dividers. Extra space helps.
+  h2 {
+    margin-top: 30px;
+  }
+
+  padding-top: 20px;
+
+  // Make a notice box out of blockquotes in the documetation:
+  blockquote {
+      padding: 15px 30px 15px 15px;
+      margin: 20px 0;
+      background-color: rgba(204, 122, 111, 0.09999999999999998);
+      border-left: 5px solid rgba(191, 87, 73, 0.19999999999999996);
+    h4 {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+    // Treat first child as the title - promote to H4.
+    p:first-child {
+      font-weight: bold;
+      font-size: 17.5px;
+      line-height: 20px;
+      margin-top: 0;
+      text-rendering: optimizelegibility;
+    }
+  }
+}
+
+.docs-prevnext {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+/* JSX Compiler */
+
+.jsxCompiler {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 1220px;
+
+  #jsxCompiler {
+    margin-top: 20px;
+  }
+
+  .playgroundPreview {
+    padding: 14px;
+    width: 600px;
+
+    pre {
+      @include code-typography;
+    }
+  }
+}
+
+/* Button */
+
+.button {
+  @include background(linear-gradient($buttonGreyTop, $buttonGreyBottom));
+  // border: 1px solid $darkestColor;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 18px;
+  font-weight: 400;
+  margin: 0 12px;
+  // word-spacing: -2px;
+  // letter-spacing: 1px;
+  display: inline-block;
+  color: $lightTextColor;
+  text-decoration: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.hero {
+  .button {
+    box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
+  }
+}
+
+.button.blue {
+  @include background(linear-gradient($buttonBlueTop, $buttonBlueBottom));
+}
+
+
+/* Row */
+
+.row {
+  padding-bottom: 4px;
+}
+
+.row .span4 {
+  width: 33.33%;
+  display: table-cell;
+}
+
+.row .span8 {
+  width: 66.66%;
+  display: table-cell;
+}
+
+.row .span6 {
+  width: 50%;
+  display: table-cell;
+}
+
+
+/* Content */
+
+p {
+  margin: 10px 0;
+}
+
+.highlight {
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+figure {
+  text-align: center;
+}
+
+.inner-content {
+  float: right;
+  width: $skinnyContentWidth;
+}
+
+.nosidebar .inner-content {
+  float: none;
+  margin: 0 auto;
+}
+
+/* Blog */
+
+.post-list-item + .post-list-item {
+  margin-top: 60px;
+}
+
+/* Code Mirror */
+
+div.CodeMirror pre, div.CodeMirror-linenumber, code {
+  @include code-typography;
+}
+
+div.CodeMirror-linenumber:after {
+  content: '.';
+}
+
+.CodeMirror, div.CodeMirror-gutters, div.highlight {
+  border: none;
+}
+
+small code,
+li code,
+p code {
+  color: #555;
+  background-color: rgba(0, 0, 0, .04);
+  padding: 1px 3px;
+}
+
+.cm-s-default span.cm-string-2 {
+  color: inherit;
+}
+
+.playground {
+  @include clearfix;
+}
+
+.playground::before {
+  border-bottom: none !important;
+  border-radius: 3px 3px 0 0;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #c2c0bc;
+  background-color: #f1ede4;
+  content: 'Live editor';
+}
+
+.playground::before,
+.playgroundCode,
+.playgroundPreview {
+  border: 1px solid rgba(16,16,16,0.1);
+}
+
+.playgroundCode {
+  border-radius: 0 3px 3px 3px;
+  float: left;
+  overflow: hidden;
+  width: $twoColumnWidth;
+}
+
+.playgroundPreview {
+  background-color: white;
+  border-radius: 3px;
+  float: right;
+  padding: 15px 20px;
+  width: $columnWidth;
+}
+
+.MarkdownEditor textarea {
+  width: 100%;
+  height: 100px
+}
+
+.hll {
+  background-color: #f7ebc6;
+  border-left: 5px solid #f7d87c;
+  display: block;
+  margin-left: -14px;
+  margin-right: -14px;
+  padding-left: 9px;
+}
+
+/* Codemirror doesn't support <jsx> syntax. Instead of highlighting it
+   as error, just ignore it */
+.highlight .javascript .err {
+  background-color: transparent;
+  color: inherit;
+}
+
+.highlight {
+  position: relative;
+  margin-bottom: 14px;
+  padding: 30px 14px 14px;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+}
+
+
+.highlight pre {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+.highlight pre code {
+  font-size: inherit;
+}
+
+.highlight pre .lineno {
+  display: inline-block;
+  width: 22px;
+  padding-right: 5px;
+  margin-right: 10px;
+  color: #bebec5;
+  text-align: right;
+}
+
+/* Echo out a label for the example */
+
+.highlight:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #c2c0bc;
+  background-color: #f1ede4;
+  content: "Code";
+}
+
+.downloadCenter {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 25px;
+}
+
+.downloadSection:hover {
+  text-decoration: none !important;
+}
+
+@media screen and (max-width: 960px) {
+  .nav-main {
+    position: static;
+  }
+  .container {
+    padding-top: 0;
+  }
+}
+
+.post {
+  margin-bottom: 30px;
+}

docs/_includes/blog_post.html

@@ -0,0 +1,10 @@
+<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
+<p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p>
+
+<div id="post">
+{% if content != '' %}
+  {{ page.excerpt }}
+{% else %}
+  {{ page.content }}
+{% endif %}
+</div>

docs/_includes/nav_blog.html

@@ -0,0 +1,10 @@
+<div class="nav-docs">
+  <div class="nav-docs-section">
+    <h3>Recent posts</h3>
+    <ul>
+    {% for post in site.posts %}
+      <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>

docs/_includes/nav_docs.html

@@ -0,0 +1,31 @@
+<div class="nav-docs">
+  <div class="nav-docs-section">
+    <h3>Getting started</h3>
+    <ul>
+      <li><a href="/react/docs/getting-started.html"{% if page.id == 'docs-getting-started' %} class="active"{% endif %}>Getting Started</a></li>
+      <li><a href="/react/docs/tutorial.html"{% if page.id == 'docs-tutorial' %} class="active"{% endif %}>Tutorial</a></li>
+      <li><a href="/react/docs/common-questions.html"{% if page.id == 'docs-common-questions' %} class="active"{% endif %}>Common Questions</a></li>
+    </ul>
+  </div>
+
+  <div class="nav-docs-section">
+    <h3>Reference</h3>
+    <ul>
+      <li><a href="/react/docs/syntax.html"{% if page.id == 'docs-syntax' %} class="active"{% endif %}>JSX Syntax</a></li>
+      <li><a href="/react/docs/component-basics.html"{% if page.id == 'docs-component-basics' %} class="active"{% endif %}>Component Basics</a></li>
+      <li><a href="/react/docs/component-data.html"{% if page.id == 'docs-component-data' %} class="active"{% endif %}>Component Data</a></li>
+      <li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li>
+      <li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li>
+      <li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li>
+      <li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li>
+    </ul>
+  </div>
+
+  <div class="nav-docs-section">
+    <h3>Appendix</h3>
+    <ul>
+      <li><a href="/react/docs/jsx-is-not-html.html"{% if page.id == 'docs-jsx-is-not-html' %} class="active"{% endif %}>JSX is not HTML</a></li>
+    </ul>
+  </div>
+</div>

docs/_js/examples/hello.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+var HELLO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var HelloMessage = React.createClass({\n\
+  render: function() {\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={HELLO_COMPONENT} />,
+  document.getElementById('helloExample')
+);

docs/_js/examples/markdown.js

@@ -0,0 +1,42 @@
+/**
+ * @jsx React.DOM
+ */
+
+var MARKDOWN_COMPONENT = "\
+/** @jsx React.DOM */\n\
+\n\
+var converter = new Showdown.converter();\n\
+\n\
+var MarkdownEditor = React.createClass({\n\
+  getInitialState: function() {\n\
+    return {value: 'Type some *markdown* here!'};\n\
+  },\n\
+  handleKeyUp: React.autoBind(function() {\n\
+    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
+  }),\n\
+  render: function() {\n\
+    return (\n\
+      <div className=\"MarkdownEditor\">\n\
+        <h3>Input</h3>\n\
+        <textarea onKeyUp={this.handleKeyUp} ref=\"textarea\">\n\
+          {this.state.value}\n\
+        </textarea>\n\
+        <h3>Output</h3>\n\
+        <div\n\
+          className=\"content\"\n\
+          dangerouslySetInnerHTML={{\n\
+            __html: converter.makeHtml(this.state.value)\n\
+          }}\n\
+        />\n\
+      </div>\n\
+    );\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<MarkdownEditor />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
+  document.getElementById('markdownExample')
+);

docs/_js/examples/timer.js

@@ -0,0 +1,29 @@
+/**
+ * @jsx React.DOM
+ */
+
+var TIMER_COMPONENT = "\
+var Timer = React.createClass({\n\
+  getInitialState: function() {\n\
+    return {secondsElapsed: 0};\n\
+  },\n\
+  tick: React.autoBind(function() {\n\
+    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
+  }),\n\
+  componentDidMount: function() {\n\
+    setInterval(this.tick, 1000);\n\
+  },\n\
+  render: function() {\n\
+    return React.DOM.div({},\n\
+      'Seconds Elapsed: ' + this.state.secondsElapsed\n\
+    );\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(Timer({}), mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={TIMER_COMPONENT} />,
+  document.getElementById('timerExample')
+);