提交 8d647886 编写于 作者: V Viktor Havrylin

Merge branch 'master' into 2127-add-test

# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: styled-components
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
custom: # Replace with a single custom sponsorship URL
node_modules
dist
.DS_Store
bundle-stats.html
.vscode
__diff_output__
lib
sandbox/node_modules
*.log
test-results.json
mount-deep-tree-trace.json
mount-wide-tree-trace.json
update-dynamic-styles-trace.json
package-lock.json
\ No newline at end of file
{
"testRegex": "./integration-test/.*.js$",
"testURL": "http://localhost"
}
{
"rootDir": ".",
"globals": {
"__DEV__": true
},
"testRegex": "./src/native/test/.*.js$",
"preset": "react-native",
"testURL": "http://localhost",
"testEnvironment": "jsdom"
}
{
"rootDir": ".",
"globals": {
"__DEV__": true
},
"testRegex": "./src/primitives/test/.*.js$",
"moduleFileExtensions": ["ios.js", "js"],
"preset": "react-native",
"testURL": "http://localhost",
"testEnvironment": "jsdom"
}
{
"globals": {
"__DEV__": true
},
"testEnvironment": "jsdom"
}
......@@ -17,11 +17,13 @@ env:
node_js:
- '8'
- '10'
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash
- export PATH="$HOME/.yarn/bin:$PATH"
install: yarn --frozen-lockfile
script:
- node --version
- yarn --version
- yarn build
- yarn test
- yarn flow
- yarn lint
......
......@@ -6,6 +6,127 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
## Unreleased
- Fix `theme` prop for styled native components, also fixes `theme` in
`defaultProps` for them.
- Add "forwardedAs" prop to allow deeply passing a different "as" prop value to underlying components
when using `styled()` as a higher-order component
## [v4.2.1] - 2019-05-30
- Remove className usage checker dev utility due to excessive false-positive noise in certain runtime environments like next.js and the related warning suppression prop (see [#2563](https://github.com/styled-components/styled-components/issues/2563)).
- Attach displayName to forwardRef function as described in React docs (see [#2508](https://github.com/styled-components/styled-components/issues/2508)).
- Compatibility with react-native-web 0.11 (see [#2453](https://github.com/styled-components/styled-components/issues/2453)).
- Add stack trace to .attrs warning (see [#2486](https://github.com/styled-components/styled-components/issues/2486)).
- Fix functions as values for object literals. (see [2489](https://github.com/styled-components/styled-components/pull/2489))
- Remove validation in Babel macro, by [@mAAdhaTTah](http://github.com/mAAdhaTTah) (see [#2427](https://github.com/styled-components/styled-components/pull/2427))
## [v4.2.0] - 2019-03-23
- Reduced GC pressure when using component selector styles. (see [#2424](https://github.com/styled-components/styled-components/issues/2424)).
- Add svg tag `marker` to domElements.js (see [#2389](https://github.com/styled-components/styled-components/pull/2389))
- Make the `GlobalStyleComponent` created by `createGlobalStyle` call the base constructor with `props` (see [#2321](https://github.com/styled-components/styled-components/pull/2321)).
- Move to Mono repository structure with lerna [@imbhargav5](https://github.com/imbhargav5) (see [#2326](https://github.com/styled-components/styled-components/pull/2326))
- Expose `StyleSheetContext` and `StyleSheetConsumer` for you fancy babes doing wild stuff
- Filter `suppressClassNameWarning` to not to pass down to the wrapped components [@taneba](https://github.com/taneba) (see [#2365](https://github.com/styled-components/styled-components/pull/2365))
- Fix an edge case where React would break streaming inside `<textarea>` elements, which have special child behavior and aren't a suitable place to inject a style tag (see [#2413](https://github.com/styled-components/styled-components/pull/2413))
## [v4.1.3] - 2018-12-17
- Under the hood code cleanup of the Babel macro, by [@lucleray](https://github.com/lucleray) (see [#2286](https://github.com/styled-components/styled-components/pull/2286))
## [v4.1.2] - 2018-11-28
- Fix function-form attrs to receive the full execution context (including theme) (see [#2210](https://github.com/styled-components/styled-components/pull/2210))
- Adjust `innerRef` deprecation warning to not be fired if wrapping a custom component, since that underlying component may not be on forwardRef yet and actually using the prop (see [#2211](https://github.com/styled-components/styled-components/pull/2211))
- Expose the `ThemeConsumer` and `ThemeContext` exports for the native and primitives entries (see [#2217](https://github.com/styled-components/styled-components/pull/2217))
- Remove `createGlobalStyle` multimount warning; Concurrent and Strict modes intentionally render the same component multiple times, which causes this warning to be triggered always even when usage is correct in the application (see [#2216](https://github.com/styled-components/styled-components/pull/2216))
- Folded components are now targettable via component selector as in v3 if you used the old `.extend` API (see [#2239](https://github.com/styled-components/styled-components/pull/2239))
- Don't treat uppercased strings as tag-like components and don't filter out props from them (see [#2225](https://github.com/styled-components/styled-components/pull/2225))
## [v4.1.1] - 2018-11-12
- Put back the try/catch guard around a part of the flattener that sometimes receives undetectable SFCs (fixes an errand hard error in an edge case)
## [v4.1.0] - 2018-11-12
- Performance optimization for fully static (no function interpolation) styled-components by avoiding using `ThemeConsumer` since it isn't necessary, by [@mxstbr](https://github.com/mxstbr) (see [#2166](https://github.com/styled-components/styled-components/pull/2166))
- Allow disabling "speedy" mode via global `SC_DISABLE_SPEEDY` variable, by [@devrelm](https://github.com/devrelm) (see [#2185](https://github.com/styled-components/styled-components/pull/2185))
To make use of this, you can either set `SC_DISABLE_SPEEDY` in your app's entry file or use something like `webpack.DefinePlugin` to do it at build time:
```js
webpack.DefinePlugin({
SC_DISABLE_SPEEDY: true,
});
```
- Attrs can now be passed a function (see [#2200](https://github.com/styled-components/styled-components/pull/2200)); thanks [@oliverlaz](https://github.com/oliverlaz) for providing an early PoC PR for this!
e.g.:
```js
styled.div.attrs(props => ({ 'aria-title': props.title }))``;
```
- Fix the `warnTooManyClasses` dev helper not being totally dead code eliminated in production (see [#2200](https://github.com/styled-components/styled-components/pull/2200))
- Deprecate functions as object keys for object-form attrs (see [#2200](https://github.com/styled-components/styled-components/pull/2200))
e.g.:
```js
styled.div.attrs({ 'aria-title': props => props.title })``; // bad
styled.div.attrs(props => ({ 'aria-title': props.title }))``; // good
```
Support for this will be removed in styled-components v5. The primary impetus behind this change is to eliminate confusion around basic functions vs styled-components vs React components provided as values in the object-form attrs constructor, each of which has different handling behaviors. The single outer function to receive the props and then return a props object is conceptually simpler.
- The standalone CDN build is now UMD-compliant and can be used with RequireJS, etc.
- Add pixels to unitless numbers when object interpolation is used, by [@Fer0x](https://github.com/Fer0x) (see [#2173](https://github.com/styled-components/styled-components/pull/2173))
- Trying to interpolate a non-styled component into CSS is now a hard error, rather than a warning (see [#2173](https://github.com/styled-components/styled-components/pull/2173))
## [v4.0.3] - 2018-10-30
- Interpolating a styled component into a string now returns the static component selector (emotion cross-compat)
```js
import styled from 'styled-components';
const Comp = styled.div`
color: red;
`;
`${Comp}`; // .sc-hash
```
- Add `suppressClassNameWarning` prop to disable warning when wrapping a React component with `styled()` and the `className` isn't used, by [@Fer0x](https://github.com/Fer0x) (see [#2156](https://github.com/styled-components/styled-components/pull/2156))
- Expose ThemeContext to enable static contextType support for React 16.6, by [@imbhargav5](https://github.com/imbhargav5) (see [#2152](https://github.com/styled-components/styled-components/pull/2152))
- Filter out invalid HTML attributes from `attrs`, by [@Fer0x](https://github.com/Fer0x) (see [#2133](https://github.com/styled-components/styled-components/pull/2133))
- Add warning if an `attrs` prop is a function that returns an element, by [@timswalling](https://github.com/timswalling) (see [#2162](https://github.com/styled-components/styled-components/pull/2162))
## [v4.0.2] - 2018-10-18
- Handle an edge case where an at-rule was being supplied to the self-reference stylis plugin at an incorrect context setting, by [@probablyup](https://github.com/probablyup) (see [#2114](https://github.com/styled-components/styled-components/pull/2114))
......@@ -840,7 +961,14 @@ _v3.3.1 was skipped due to a bad deploy._
- Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
[unreleased]: https://github.com/styled-components/styled-components/compare/v4.0.2...master
[unreleased]: https://github.com/styled-components/styled-components/compare/v4.2.1...master
[v4.2.1]: https://github.com/styled-components/styled-components/compare/v4.2.0...v4.2.1
[v4.2.0]: https://github.com/styled-components/styled-components/compare/v4.1.3...v4.2.0
[v4.1.3]: https://github.com/styled-components/styled-components/compare/v4.1.2...v4.1.3
[v4.1.2]: https://github.com/styled-components/styled-components/compare/v4.1.1...v4.1.2
[v4.1.1]: https://github.com/styled-components/styled-components/compare/v4.1.0...v4.1.1
[v4.1.0]: https://github.com/styled-components/styled-components/compare/v4.0.3...v4.1.0
[v4.0.3]: https://github.com/styled-components/styled-components/compare/v4.0.2...v4.0.3
[v4.0.2]: https://github.com/styled-components/styled-components/compare/v4.0.1...v4.0.2
[v4.0.1]: https://github.com/styled-components/styled-components/compare/v4.0.0...v4.0.1
[v4.0.0]: https://github.com/styled-components/styled-components/compare/v4.0.0-beta.11...v4.0.0
......
......@@ -68,7 +68,7 @@ members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
available at [https://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
[homepage]: https://contributor-covenant.org
[version]: https://contributor-covenant.org/version/1/4/
......@@ -34,9 +34,9 @@ We want contributors to provide ideas, keep the ship shipping and to take some o
The fact that you'll have push access will allow you to:
* Avoid having to fork the project if you want to submit other pull requests as you'll be able to create branches directly on the project.
* Help triage issues, merge pull requests.
* Pick up the project if other maintainers move their focus elsewhere.
- Avoid having to fork the project if you want to submit other pull requests as you'll be able to create branches directly on the project.
- Help triage issues, merge pull requests.
- Pick up the project if other maintainers move their focus elsewhere.
It's up to you to use those superpowers or not though 😉
......@@ -62,47 +62,51 @@ Here is a quick guide to doing code contributions to the library.
3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
4. Make your changes and commit: `git add` and `git commit`
4. Install packages by running `yarn` in the root of the project.
5. Make sure that the tests still pass: `npm test` and `npm run flow` (for the type checks)
5. Make your changes and commit: `git add` and `git commit`
6. Push your branch: `git push -u origin your-branch-name`
6. Make sure that the tests still pass: `yarn test` and `yarn run flow` (for the type checks)
7. Submit a pull request to the upstream styled-components repository.
7. Push your branch: `git push -u origin your-branch-name`
8. Choose a descriptive title and describe your changes briefly.
8. Submit a pull request to the upstream styled-components repository.
9. Wait for a maintainer to review your PR, make changes if it's being recommended, and get it merged.
9. Choose a descriptive title and describe your changes briefly.
10. Perform a celebratory dance! :dancer:
10. Wait for a maintainer to review your PR, make changes if it's being recommended, and get it merged.
11. Perform a celebratory dance! :dancer:
### How do I set up the project?
Run [`yarn install`](https://yarnpkg.com/) and edit code in the `src/` folder. It's luckily very simple! :wink:
Run [`yarn install`](https://yarnpkg.com/) and edit code in the `packages/styled-components/src/` folder. It's luckily very simple! :wink:
> We use yarn workspaces with [lerna](https://github.com/lerna/lerna) to make this work as a monorepo under the hood.
### How do I verify and test my changes?
To make development process easier we provide a Sandbox React application in this repo which automatically uses your local version of the `styled-components` library. That means when you make any changes in the `src/` folder they'll show up automatically there!
To make development process easier we provide a Sandbox React application in this repo which automatically uses your local version of the `styled-components` library. That means when you make any changes in the `packages/styled-components/src/` folder they'll show up automatically there!
To use the sandbox, follow these steps:
1. Go to sandbox folder: `cd sandbox`
1. Go to sandbox folder: `cd packages/sandbox`
2. Install all the dependencies: `yarn install` or `npm install`
2. Install all the dependencies: `yarn install`. Since this repository uses `yarn` workspaces, avoid using `npm` where you can.
3. Run `yarn start` or `npm start` to start sandbox server
3. Run `yarn start` to start sandbox server
Now you should have the sandbox running on `localhost:3000`. The Sandbox supports client-side and server-side rendering.
You can use an interactive editor, powered by [`react-live`](https://react-live.philpl.com/), to test your changes. But if you want more control, you can edit the sandbox itself too:
* Root `<App>` component is located at `styled-components/sandbox/src/App.js` file
- Root `<App>` component is located at `packages/sandbox/src/App.js` file
* Client-side entry point is at `styled-components/sandbox/src/browser.js`
- Client-side entry point is at `packages/sandbox/src/browser.js`
* Server-side entry point is at `styled-components/sandbox/src/server.js`
- Server-side entry point is at `packages/sandbox/src/server.js`
In the sandbox source, `styled-components` is an alias to `styled-components/src` folder, so you can edit the source directly and dev-server will handle rebuilding the source and livereloading your sandbox after the build is done.
In the sandbox source, `styled-components` is an alias to `packages/styled-components/src` folder, so you can edit the source directly and dev-server will handle rebuilding the source and livereloading your sandbox after the build is done.
When you commit our pre-commit hook will run, which executes `lint-staged`. It will run the linter automatically and warn you if the code you've written doesn't comply with our code style guidelines.
......@@ -112,6 +116,10 @@ We have three different benchmarks: mounting a deep tree, mounting a wide tree a
To run the benchmarks run:
```sh
cd packages/styled-components`
```
```sh
yarn run benchmarks
```
......@@ -139,42 +147,37 @@ a git hook is already present.
[Core team members](./CORE_TEAM.md) have the responsibility of pushing new releases to npm. The release process is as follows:
1. Install `np` by Sindre Sorhus with `npm i -g np`. (note: you only have to do this once) `np` makes sure that everything is correct and runs tests and a build before it releases the new version for you.
2. Make sure you have the latest changes and are on the master branch: `git checkout master && git pull origin master`
1. Make sure you have the latest changes and are on the master branch: `git checkout master && git pull origin master`
2. Install all the dependencies by running `yarn` in the root folder. This will also install `lerna`.
3. Create a new branch based on the version number, for example `git checkout -b 3.4.1`
4. Update the [CHANGELOG.md](./CHANGELOG.md) with the new version number, add a new Unreleased section at the top and edit the links at the bottom so everything is linked correctly
5. Commit the Changelog changes with `git commit -m 'Update CHANGELOG'`
6. Push the branch to the repo with `git push -u origin <branchname>`
7. Run `np --any-branch` and follow its instructions
7. Run `yarn run publish`. (Not `yarn publish`) This will run `test` cases, check for `flow` and `lint` errors and then start the `lerna publish` process. You will prompted to choose the next versions for all the packages including `styled-components`. (Note: Packages which are marked as `private` will not be published to `npm`, choose any version for them).
8. Congratulations, you just published a new release of `styled-components`! :tada: Let everybody know on Twitter, in our community and all the other places
## Credits
These contribution guidelines are based on https://github.com/moya/contributors, big thanks to @alloy, @orta et al. for the inspiration and guidance.
## Financial contributions
We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/styled-components).
Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
## Credits
### Contributors
Thank you to all the people who have already contributed to styled-components!
<a href="graphs/contributors"><img src="https://opencollective.com/styled-components/contributors.svg?width=890" /></a>
### Backers
Thank you to all our backers! [[Become a backer](https://opencollective.com/styled-components#backer)]
<a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
### Sponsors
Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/styled-components#sponsor))
......
......@@ -25,6 +25,14 @@ Utilising [tagged template literals](https://www.styled-components.com/docs/adva
_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_
## v5
Principal development of v5 has begun! Follow along on the [canary](https://github.com/styled-components/styled-components/tree/canary) branch and check out the current list of [roadmap items](https://github.com/styled-components/styled-components/issues/1934).
We will be publishing alpha versions to `styled-components@canary` on NPM as we get closer to a beta release.
Please keep in mind that all development of styled-components is driven by volunteer effort, so things will take as long as they take. We appreciate your enthusiasm and interest as new technologies and patterns emerge.
## [Docs](https://www.styled-components.com/docs)
**See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!
......
{
"npmClient": "yarn",
"packages": [
"packages/*"
],
"useWorkspaces": true,
"version": "independent"
}
{
"name": "styled-components",
"version": "4.0.2",
"description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
"main": "dist/styled-components.cjs.js",
"jsnext:main": "dist/styled-components.esm.js",
"module": "dist/styled-components.esm.js",
"react-native": "native/dist/styled-components.native.cjs.js",
"browser": {
"./dist/styled-components.esm.js": "./dist/styled-components.browser.esm.js",
"./dist/styled-components.cjs.js": "./dist/styled-components.browser.cjs.js"
},
"sideEffects": false,
"name": "styled-components-project",
"private": true,
"version": "4.1.3",
"scripts": {
"build": "rollup -c",
"prebuild": "rimraf dist",
"bs": "lerna bootstrap",
"build": "lerna run build --stream --parallel",
"clean": "lerna clean",
"dev": "lerna run dev --stream --parallel",
"flow": "lerna run flow --stream --parallel",
"lint": "lerna run lint --stream --parallel",
"size": "lerna run size --stream --parallel",
"test": "run-s test:*",
"test:web": "jest --outputFile test-results.json --json",
"test:web:watch": "npm run test:web -- --watch",
"test:native": "jest -c .jest.native.json",
"test:native:watch": "npm run test:native -- --watch",
"test:primitives": "jest -c .jest.primitives.json",
"test:primitives:watch": "npm run test:primitives -- --watch",
"test:integration": "jest -c .jest.integration.json --runInBand --forceExit",
"size": "bundlesize",
"flow": "flow check",
"flow:watch": "flow-watch",
"format": "eslint ./**/*.js --fix",
"lint": "eslint src",
"prettier": "prettier */**/*.js --write",
"prepublishOnly": "run-s build",
"lint-staged": "lint-staged",
"dev": "cross-env BABEL_ENV=cjs babel-node example/startServer.js",
"prebenchmarks": "yarn run build:benchmarks",
"benchmarks": "node benchmarks/run-headless.js",
"build:benchmarks": "(cd benchmarks && yarn && yarn run build)",
"postinstall": "node ./scripts/postinstall.js || exit 0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/styled-components/styled-components.git"
"prepare": "yarn bs && yarn build",
"prepublishOnly": "yarn clean && yarn && yarn build && yarn test && cp README.md packages/styled-components",
"publish": "lerna publish",
"test:web": "jest -c scripts/jest/config.main.js",
"test:web:watch": "yarn test:web -- --watch",
"test:native": "jest -c scripts/jest/config.native.js",
"test:native:watch": "yarn test:native -- --watch",
"test:primitives": "jest -c scripts/jest/config.primitives.js",
"test:primitives:watch": "yarn test:primitives -- --watch",
"test:integration": "jest -c scripts/jest/config.integration.js --runInBand --forceExit"
},
"files": [
"CODE_OF_CONDUCT.md",