Add setup function for pragma, forwardRef, and theme #76

donysukardi · 2019-12-17T09:21:10Z

Pending tasks

Tests
Documentation
Bundle size

This change increases the bundle size though. Any idea how we could trim it to fit the maxSize?

 FAIL  ./dist/goober.js: 1.03KB > maxSize 1KB (gzip)

 FAIL  ./dist/goober.module.js: 1.03KB > maxSize 1KB (gzip)

Related Issues: Theming (#61), forwardRef (#63)

cristianbote · 2019-12-17T12:14:23Z

src/styled.js

-        return function Styled(props) {
-            const _props = (_ctx.p = Object.assign({}, props));
+        function Styled(props, ref) {
+            const theme = useTheme();


Does it has to be a function? Could it be a plain object? Could become a perf bottleneck on user land.

This is to get feature parity with other CSS-in-JS theming capability, i.e.

const useTheme = () => useContext(ThemeContext)

Here's how it's similarly done in styled-components@5 - https://github.com/styled-components/styled-components/blob/v5/packages/styled-components/src/models/StyledComponent.js#L129

For non context user, it could be just () => theme

src/styled.js

cristianbote

This is so great! 🙏 Thank you for opening this!

cristianbote · 2019-12-18T13:08:41Z

This is really great! Really love it! How do you feel about it? Can you add the tests and everything? What can I help you with?

cristianbote · 2019-12-18T13:09:14Z

src/styled.js

-let h;
-const setPragma = pragma => (h = pragma);
+let h, forwardRef, useTheme;
+const setup = (_h, _forwardRef, _useTheme = () => {}) => {


How about not defining a default _useTheme? Would that break?

cristianbote · 2019-12-18T13:10:07Z

src/styled.js

-            const _props = (_ctx.p = Object.assign({}, props));
+        function Styled(props, ref) {
+            const theme = useTheme();
+            const _props = (_ctx.p = Object.assign(theme ? { theme } : {}, props));


Also what do you think?

Suggested change

const _props = (_ctx.p = Object.assign(theme ? { theme } : {}, props));

const _props = (_ctx.p = Object.assign(useTheme ? useTheme() : {}, props));

Technically it's possible, but usually useTheme just returns theme instead of { theme }, e.g. https://github.com/styled-components/styled-components/blob/v5/packages/styled-components/src/hooks/useTheme.js

It'd have to be like this instead,

const _props = (_ctx.p = Object.assign(useTheme ? { theme: useTheme() } : {}, props));

Let me give it a spin and see how the bundle size looks like, coz with gzip more code != bigger bundle size and vice-versa 😁

cristianbote · 2019-12-18T21:00:55Z

Did I mention how exciting this looks? 😄 Can't wait to have the theme support in. I can see myself using it, for sure!

This is a good one! Really appreciate your time on this! 👍

donysukardi · 2019-12-19T08:35:06Z

Done the changes for both useTheme and ref. Bundle size seems to be lower now.

FAIL  ./dist/goober.js: 1.02KB > maxSize 1KB (gzip)

 FAIL  ./dist/goober.module.js: 1.01KB > maxSize 1KB (gzip)

I'll work on the tests for this.

nksaraf · 2019-12-19T15:24:25Z

Hi,
I've been following the development of goober and absolutely love the simplicity of the code base. I have had to implement similar functionality for a fork. Is there anything I can do to help land this PR, or in other ways with the library.

cristianbote · 2019-12-19T17:22:21Z

Hey @nksaraf thanks for checking goober all along! 🙂 Well anything that comes to mind! There a couple more things inside the issues that can be tackled as well. Give them a try see what you can do.

Thank you for your time!

donysukardi · 2019-12-26T03:47:26Z

@cristianbote I've updated the implementation slightly. I observed that in styled-components, the theme from context is not passed down to the component, i.e. it's just used to generate the className with necessary styles.

I've also added unit and integration tests for the changes.

ryansolid · 2020-02-05T13:03:35Z

This was going strong up to a month or so ago. Is this PR still moving forward? Is something holding it up? Are we still holding out hope it can get 0.02 kb smaller?

cristianbote · 2020-02-05T13:13:16Z

Hey @ryansolid! :) Thanks for stopping by!

Well, it's just really my lack of time to do a perf bench on this and check the sizes. Also, this will definitely be a major version upgrade, since the whole setPragma update.

cristianbote · 2020-02-05T13:17:38Z

Oh and documentation about the changes.

cristianbote · 2020-02-06T06:52:53Z

Had a look into this change sets and it seems that this would add some considerable size. Something like 1035B. Will dig more into it.

src/styled.js

Co-Authored-By: Jovi De Croock <decroockjovi@gmail.com>

cristianbote · 2020-02-18T14:04:09Z

Hey @donysukardi things are happening! 🥳😎 Thanks to @JoviDeCroock for pushing this with his PR for autoprefixer. Overall this will end up under 1024B 🥳👍🥜 wohoo! So excited!

This will definitely be v2

cristianbote · 2020-02-18T14:05:05Z

The tests failures are my doing 😑 sorry. I resolved the conflicts but somehow missed stuff. Will correct then asap

donysukardi · 2020-02-19T01:26:36Z

This is awesome! I am excited!! Let me know if there's anything else I can help with :D

cristianbote · 2020-02-19T07:08:33Z

Awesome! @donysukardi I think @JoviDeCroock opened a PR against yours to fix the test failures. In here https://github.com/donysukardi/goober/pull/1/files I think that would make this to pass.

cristianbote · 2020-02-19T08:00:52Z

Alrighty! 😄 everything is fine. The above failures are expected 👍

Thank you soo much @donysukardi! 🎉 🌟

Add setup function for pragma, forwardRef, and theme

0e2884c

cristianbote reviewed Dec 17, 2019

View reviewed changes

src/styled.js Outdated Show resolved Hide resolved

cristianbote reviewed Dec 17, 2019

View reviewed changes

donysukardi mentioned this pull request Dec 18, 2019

Add support for forwardRef #63

Closed

donysukardi requested a review from cristianbote December 18, 2019 10:28

cristianbote reviewed Dec 18, 2019

View reviewed changes

cristianbote added the feature New feature or request label Dec 18, 2019

Do not default useTheme and eagerly assign ref

1e19140

Add tests

22e7cdc

Merge branch 'master' into setup

c74b638

JoviDeCroock reviewed Feb 18, 2020

View reviewed changes

src/styled.js Outdated Show resolved Hide resolved

src/styled.js Outdated Show resolved Hide resolved

cristianbote and others added 3 commits February 18, 2020 15:39

Update src/styled.js

0d25fdf

Co-Authored-By: Jovi De Croock <decroockjovi@gmail.com>

Update src/styled.js

09c7d07

Co-Authored-By: Jovi De Croock <decroockjovi@gmail.com>

Merge branch 'master' into setup

0e87539

fix tests

e1e0db5

donysukardi and others added 2 commits February 19, 2020 15:28

Merge pull request #1 from JoviDeCroock/test/setup

5e63f38

Merge branch 'master' into setup

95dfdef

cristianbote merged commit cf0148d into cristianbote:master Feb 19, 2020

donysukardi deleted the setup branch February 20, 2020 03:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add setup function for pragma, forwardRef, and theme #76

Add setup function for pragma, forwardRef, and theme #76

donysukardi commented Dec 17, 2019

cristianbote Dec 17, 2019

donysukardi Dec 17, 2019

donysukardi Dec 17, 2019

cristianbote left a comment

cristianbote commented Dec 18, 2019

cristianbote Dec 18, 2019

cristianbote Dec 18, 2019

donysukardi Dec 19, 2019 •

edited

cristianbote commented Dec 18, 2019

donysukardi commented Dec 19, 2019

nksaraf commented Dec 19, 2019

cristianbote commented Dec 19, 2019

donysukardi commented Dec 26, 2019

ryansolid commented Feb 5, 2020

cristianbote commented Feb 5, 2020

cristianbote commented Feb 5, 2020

cristianbote commented Feb 6, 2020

cristianbote commented Feb 18, 2020

cristianbote commented Feb 18, 2020

donysukardi commented Feb 19, 2020

cristianbote commented Feb 19, 2020

cristianbote commented Feb 19, 2020

	const _props = (_ctx.p = Object.assign(theme ? { theme } : {}, props));
	const _props = (_ctx.p = Object.assign(useTheme ? useTheme() : {}, props));

Add setup function for pragma, forwardRef, and theme #76

Add setup function for pragma, forwardRef, and theme #76

Conversation

donysukardi commented Dec 17, 2019

cristianbote Dec 17, 2019

Choose a reason for hiding this comment

donysukardi Dec 17, 2019

Choose a reason for hiding this comment

donysukardi Dec 17, 2019

Choose a reason for hiding this comment

cristianbote left a comment

Choose a reason for hiding this comment

cristianbote commented Dec 18, 2019

cristianbote Dec 18, 2019

Choose a reason for hiding this comment

cristianbote Dec 18, 2019

Choose a reason for hiding this comment

donysukardi Dec 19, 2019 • edited

Choose a reason for hiding this comment

cristianbote commented Dec 18, 2019

donysukardi commented Dec 19, 2019

nksaraf commented Dec 19, 2019

cristianbote commented Dec 19, 2019

donysukardi commented Dec 26, 2019

ryansolid commented Feb 5, 2020

cristianbote commented Feb 5, 2020

cristianbote commented Feb 5, 2020

cristianbote commented Feb 6, 2020

cristianbote commented Feb 18, 2020

cristianbote commented Feb 18, 2020

donysukardi commented Feb 19, 2020

cristianbote commented Feb 19, 2020

cristianbote commented Feb 19, 2020

donysukardi Dec 19, 2019 •

edited