Skip to content

Commit 5fa3fb0

Browse files
kuldeepkeshwarkuldeepkeshwar
authored
add as prop (#29)
* add as prop * add changeset
1 parent fbd0671 commit 5fa3fb0

File tree

12 files changed

+658
-53
lines changed

12 files changed

+658
-53
lines changed

‎.changeset/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Changesets
2+
3+
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4+
with multi-package repos, or single-package repos to help you version and publish your code. You can
5+
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6+
7+
We have a quick list of common questions to get you started engaging with this project in
8+
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

‎.changeset/config.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
3+
"changelog": "@changesets/cli/changelog",
4+
"commit": false,
5+
"linked": [],
6+
"access": "restricted",
7+
"baseBranch": "master",
8+
"updateInternalDependencies": "patch",
9+
"ignore": []
10+
}

‎.github/workflows/publish.yml

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
name: Publish Packages
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
8+
jobs:
9+
build:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v1
13+
- uses: actions/setup-node@v1
14+
with:
15+
node-version: 12
16+
- run: yarn
17+
- run: yarn build
18+
19+
release:
20+
name: Release
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Checkout Repo
24+
uses: actions/checkout@v1
25+
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v1
28+
with:
29+
node-version: 12
30+
31+
- name: Install Dependencies
32+
run: yarn
33+
34+
- name: Create Release Pull Request
35+
uses: changesets/action@master
36+
env:
37+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
38+
39+
publish-npm:
40+
needs: build
41+
runs-on: ubuntu-latest
42+
steps:
43+
- uses: actions/checkout@v1
44+
- uses: actions/setup-node@v1
45+
with:
46+
node-version: 12
47+
registry-url: https://registry.npmjs.org/
48+
- run: yarn
49+
- run: yarn publish-ci
50+
env:
51+
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
52+
53+
publish-gpr:
54+
needs: build
55+
runs-on: ubuntu-latest
56+
steps:
57+
- uses: actions/checkout@v1
58+
- uses: actions/setup-node@v1
59+
with:
60+
node-version: 12
61+
registry-url: https://npm.pkg.github.com/
62+
scope: '@filbert-js'
63+
- run: yarn
64+
- run: yarn publish-ci
65+
env:
66+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 kuldeepkeshwar
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎package.json

+8-6
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
"css-in-js"
1010
],
1111
"scripts": {
12-
"develop":"lerna run --stream --parallel --ignore @filbert-js/examples-* --ignore benchmarks-* develop",
12+
"develop": "lerna run --stream --parallel --ignore @filbert-js/examples-* --ignore benchmarks-* develop",
1313
"postinstall": "lerna bootstrap",
1414
"build": "lerna run build",
15-
"build-packages":"lerna run --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* build",
16-
"develop-packages":"lerna run --parallel --stream --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* develop",
17-
"benchmarks":"yarn build-packages && yarn benchmarks-size && yarn benchmarks-performance",
18-
"benchmarks-size":"lerna run capture-stats && lerna run print-delta --stream",
19-
"benchmarks-performance":"lerna run performance --stream"
15+
"build-packages": "lerna run --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* build",
16+
"develop-packages": "lerna run --parallel --stream --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* develop",
17+
"benchmarks": "yarn build-packages && yarn benchmarks-size && yarn benchmarks-performance",
18+
"benchmarks-size": "lerna run capture-stats && lerna run print-delta --stream",
19+
"benchmarks-performance": "lerna run performance --stream",
20+
"publish-ci": "lerna publish from-package -y --no-verify-access"
2021
},
2122
"devDependencies": {
2223
"husky": "^3.0.9",
@@ -51,6 +52,7 @@
5152
}
5253
},
5354
"dependencies": {
55+
"@changesets/cli": "^2.9.2",
5456
"lint-staged": "^10.2.11"
5557
},
5658
"collective": {

‎packages/core/src/Global.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import { useGlobalStylesheet } from './hooks';
33

44
let counter = 0;
5-
export function Global({ styles }) {
5+
export const Global = React.memo(function({ styles }) {
66
const [id] = React.useState(() => {
77
counter++;
88
return 'global-' + counter;
99
});
1010
useGlobalStylesheet(id, styles);
1111
return null;
12-
}
12+
});

‎packages/core/src/hooks.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,19 @@ export function useGlobalStylesheet(id, styles) {
2626
);
2727
}
2828

29-
export function useStylesheet(className, styles, sourceOrder, label) {
30-
const stylesheet = React.useContext(StyleSheetContext);
29+
export function useStylesheet(
30+
keyframes,
31+
className,
32+
styles,
33+
sourceOrder,
34+
label,
35+
) {
36+
const sheet = React.useContext(StyleSheetContext);
3137
const latestRef = React.useRef();
3238

3339
const stylesheetRef = React.useRef();
34-
stylesheetRef.current = stylesheet;
35-
40+
stylesheetRef.current = sheet;
41+
keyframes.forEach((frame) => sheet.createKeyframes(frame));
3642
stylesheetRef.current.createStyles(className, styles, sourceOrder, label);
3743

3844
latestRef.current = className;

‎packages/core/src/styled.js

+11-19
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,49 @@ import {
66
} from '@filbert-js/types';
77

88
import React from 'react';
9-
import { StyleSheetContext } from '@filbert-js/style-sheet-context';
109
import { ThemeContext } from '@filbert-js/theming';
1110
import { factory } from './factory';
1211
import { useStylesheet } from './hooks';
1312

1413
let id = 1;
1514
export function styled(Component, options = {}) {
1615
return (styleTemplates, ...variables) => {
17-
function StyledComponent(props) {
16+
function S(props, ref) {
1817
const theme = React.useContext(ThemeContext);
19-
const sheet = React.useContext(StyleSheetContext);
2018
const obj = factory(null, options.label, {
2119
...props,
2220
theme,
2321
})(styleTemplates, ...variables);
2422

2523
const [styles, keyframes] = obj[RAW];
26-
keyframes.forEach((frame) => sheet.createKeyframes(frame));
24+
2725
const className = obj.toString();
2826

29-
useStylesheet(
30-
className,
31-
styles,
32-
props[SOURCE_ORDER],
33-
StyledComponent.label,
34-
);
27+
useStylesheet(keyframes, className, styles, props[SOURCE_ORDER], S.label);
3528
const {
3629
className: passedClassName = '',
3730
[SOURCE_ORDER]: sourceOrder,
31+
as,
32+
children,
3833
..._props
3934
} = props;
4035

4136
const finalProps = Object.assign(
4237
{
43-
className: [StyledComponent.label, className, passedClassName]
44-
.join(' ')
45-
.trim(),
38+
className: [S.label, className, passedClassName].join(' ').trim(),
4639
[SOURCE_ORDER]: Component[IS_STYLED_COMPONENT]
4740
? className
4841
: undefined,
42+
ref,
4943
},
5044
_props,
5145
);
52-
return <Component {...finalProps} />;
46+
return React.createElement(as || Component, finalProps, children);
5347
}
54-
StyledComponent[IS_STYLED_COMPONENT] = true;
55-
StyledComponent.label = options.label
56-
? options.label
57-
: `${LABEL_PREFIX}${id}`;
48+
S[IS_STYLED_COMPONENT] = true;
49+
S.label = options.label ? options.label : `${LABEL_PREFIX}${id}`;
5850

5951
id++;
60-
return StyledComponent;
52+
return React.forwardRef(S);
6153
};
6254
}

‎website/docs/docs.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
- Labels
1818
- Server Side Rendering
1919
- Auto Prefixing
20+
- Using As Prop
2021
- Todo
2122
# This loads the READMEs instead of files in docs/
2223
- title: Packages

‎website/docs/todo.md

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1-
## Todo
2-
31
- filbert-js
2+
3+
- [ ] Use CSSStyleSheet API
4+
- [ ] Make `gatsby-plugin-filbert` working
5+
- [ ] Add Typescript support
6+
- [ ] Alternate execution path for static styles(using babel plugin)
7+
- [ ] Support `object` syntax for styling
8+
- [ ] Bring size below 1kb
9+
- [ ] Write test cases
10+
- [x] Enable Ref forwarding
11+
- [x] Support `as` prop
12+
- [x] Remove `html-tags` dependency
13+
- [x] Babel plugin for transformation `styled.div` -> `styled('div')`
14+
- [x] Separate packages for Context
15+
- [x] Separate packages for Theming
416
- [x] Add `css` API
517
- [x] Support Media Query
618
- [x] CSS AST
719
- [x] Auto prefixing
820
- [x] Component Selector
9-
- [ ] Enable Ref forwarding
10-
- [ ] Use CSSStyleSheet API
11-
- [x] Separate packages for Context
12-
- [x] Separate packages for Theming
13-
- [ ] Bring size below 1kb
14-
- [x] Remove `html-tags` dependency
15-
- [x] Babel plugin for transformation `styled.div` -> `styled('div')`
16-
- [ ] Make `gatsby-plugin-filbert` working
17-
- [ ] Write test cases
21+
1822
- Website
1923
- [ ] Themes for website
2024
- [ ] Add more description in documentation
@@ -23,7 +27,8 @@
2327
- [x] Add Mobile layout
2428
- [x] List `README.md` from `packages`
2529
- Other
30+
- [ ] Add a official `example` for [next.js](https://github.com/vercel/next.js)
2631
- [ ] Add a example for vanilla(using `express.js`) Server-Side Rendering
32+
- [ ] Show benchmark stats in pull request.
2733
- [x] Add benchmark for bundle-size (filbert vs emotion vs styled-components)
2834
- [x] Add benchmark for runtime performance (filbert vs emotion vs styled-components)
29-
- [ ] Show benchmark stats in pull request.

‎website/docs/using-as-prop.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
```jsx
2+
// @live
3+
4+
import React from 'react';
5+
import { styled } from '@filbert-js/core';
6+
7+
const Button = styled('button')`
8+
display: inline-block;
9+
outline: none;
10+
text-decoration: none;
11+
font-weight: 300;
12+
letter-spacing: 1px;
13+
border: 1px solid;
14+
transition: all 0.2s ease;
15+
box-sizing: border-box;
16+
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
17+
border-radius: 3px;
18+
font-size: 0.8125em;
19+
padding: 0.4125em 1.25em;
20+
color: #4682b4;
21+
border-color: #4682b4;
22+
&:hover {
23+
background: #4682b4;
24+
color: #fff;
25+
border-color: #4682b4;
26+
}
27+
`;
28+
29+
render(
30+
<Button as="a" target="_blank" rel="noreferrer" href="https://google.com">
31+
Visit Google.
32+
</Button>,
33+
);
34+
```

0 commit comments

Comments
 (0)