feat(preact): add native support for preact #321

marzelin · 2017-09-03T15:28:11Z

What: Adds out-of-the-box support for preact

Why: Even though glamorous can be used in preact project, there are a few issues:

there are some component props that are allowed in preact but invalid in react.
React is a peer-dependency of glamorous, which means you get a warning if you don't have it installed.
preact-compat is required to be able to use glamorous

How:
Build process creates preact directory that stores files dedicated for this library. To use them one needs to import glamorous from glamorous/preact.

preact files differ from normal files in a following way:

preact-specific props are added to props list in ./react-props
PropTypes are neutralized (preact doesn't use them) and Children polyfilled in ./react-compat.
All react imports are replaced with preact (at build time).

Other changes:
react is removed from peerDependencies in package.json
A shim of package.json is added to preact dir (at build time) to allow for importing files from there.
typings folder is copied to preact folder to provide type definitions for typescript

closes #85

Checklist:

Documentation
Tests
Ready to be merged
Added myself to contributors table

kentcdodds

This is so good! Thank you so much for this work! I'll want to do a pre-release of this before merging just to make sure we're good to go. I'll let you know when I've done that. Thanks again!

kentcdodds · 2017-09-03T21:23:01Z

.vscode/settings.json

@@ -0,0 +1,3 @@
+{


Could you add this file to the gitignore? I don't like editor-specific settings in my repositories 😀

Sure. I need this file because my prettier rules are different and they're applied on each save. I'll keep it only in my fork.

kentcdodds · 2017-09-03T21:25:27Z

other/preact.package.json

@@ -0,0 +1,19 @@
+{


What's this for?

package.json file needs to be present in preact folder since node.js looks into it to figure out which file to import. This file is used as a blueprint for it. Perhaps I could use main package.json file for this as well 🤔

luke-john · 2017-09-04T01:05:37Z

typings folder is copied to preact folder to provide type definitions for typescript

I'm not familiar with preact or it's typings, but have you tested that this works, seems like there's a reasonable chance you'll get type failures with the react typings conflicting with preact ones.

If this is a problem I think #320 should improve the situation.

I'm unlikely to be able to spend much time looking into how the typings play with preact this week, but love the idea that the typings can be shared ❤️. Is there something like create-react-app for preact I can give this a quick spin?

kentcdodds · 2017-09-04T01:58:13Z

I've published this as the next beta!

~/Desktop/glamorous (master)
👻  $ npm publish --tag preact
+ glamorous@4.8.0-beta.0

Please try it out and let me know whether it works.

marzelin · 2017-09-04T14:14:35Z

@luke-john there's preact-cli but it contains a lot of packages, including preact-compat. I've created minimal typescript+preact+glamorous project and you're right, typescript throws errors since react is also imported in type definitions, unfortunately.

Apart from that everything seems to work. Here's a playground that uses beta umd build.

luke-john · 2017-09-05T00:49:38Z

Thanks for that @marzelin.

I think a nice way to solve this could be to have a file which re exports aliases of the react interfaces used by the typings. And then as part of the copy step for preact replace that file with one that has the preact equivalents.

codecov-io · 2017-09-06T17:18:55Z

Codecov Report

Merging #321 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #321   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          10     10           
  Lines         172    174    +2     
  Branches       47     48    +1     
=====================================
+ Hits          172    174    +2

Impacted Files	Coverage Δ
src/with-theme.js	`100% <ø> (ø)`	⬆️
src/index.js	`100% <ø> (ø)`	⬆️
src/get-glamor-classname.js	`100% <100%> (ø)`	⬆️
src/theme-provider.js	`100% <100%> (ø)`	⬆️
src/react-props.js	`100% <100%> (ø)`
src/create-glamorous.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b41be21...e725ee1. Read the comment docs.

kentcdodds

This is looking pretty good! Just another question :)

kentcdodds · 2017-09-06T17:29:05Z

src/__tests__/preact.js

+beforeEach(() => {
+  process.env.PREACT = true
+  jest.resetModules()
+  jest.mock('react', () => ({}))


Why is this necessary? Should it be: jest.mock('react', () => require('preact')) instead?

Yeah, I've added preact as a dev dependency after all. Good idea 👏

kentcdodds · 2017-09-06T17:47:42Z

package-scripts.js

+          'build.umd.main.preact.tiny',
+          'build.umd.min.preact.tiny'
+        ),
+        copy("'package.json' 'preact'")


Hmmm... What does this do exactly?

I'm a little confused about the build process. When everything's finished, what are we left with?

It creates a directory preact in which the are all builds for preact as well as a copy of package.json from the root directory. No typings at this time since current type definitions are react-dependent.

I see! So, someone using the package would do:

import glamorous from 'glamorous/preact'

Is that right? That makes good sense. For downshift I push everything into the dist/ and have .preact filename, but I think I like this better. Thanks!

kentcdodds

I think that I want 2 more things before I merge this:

A PR on the website to document how to use preact (bonus points if it includes a reference to using babel-plugin-module-alias to alias glamorous to glamorous/preact and/or the webpack method)
One more beta release and some users verifying that it works properly.

This is so awesome. Thank you so much for putting all the work into this!

kentcdodds · 2017-09-06T18:23:13Z

package-scripts.js

+          'build.umd.main.preact.tiny',
+          'build.umd.min.preact.tiny'
+        ),
+        copy("'package.json' 'preact'")


I see! So, someone using the package would do:

import glamorous from 'glamorous/preact'

Is that right? That makes good sense. For downshift I push everything into the dist/ and have .preact filename, but I think I like this better. Thanks!

kentcdodds · 2017-09-12T18:14:04Z

I'm working on this right now. I want to add kcd-utils to this project, so I'm just going to stick that in as part of this PR :)

kentcdodds · 2017-09-12T22:58:10Z

I literally spent all day on this 😂

But I think I've finally got it working a great way.

Thank you for all your work on it @marzelin!

kentcdodds · 2017-09-12T23:01:49Z

Ok! I'll merge this and the docs PR as soon as I get one person to confirm that this works with preact-cli:

~/Desktop/glamorous (master)
🎉  $ npm publish --tag beta
+ glamorous@4.9.0-beta.0

kentcdodds · 2017-09-12T23:10:58Z

Not quite there. I just tested it and something's messed up. Should be a quick fix...

kentcdodds · 2017-09-12T23:29:08Z

Awesome! I've verified that glamorous@4.9.0-beta.1 (this PR) works great with preact-cli. preact-cli will pick up the preact/dist/glamorous.esm.js file when you do:

import glamorous from 'glamorous/preact'

🎉

kentcdodds · 2017-09-12T23:35:42Z

Tweeted. Sorry, I couldn't find your twitter handle :-/

Thanks so much!!

kentcdodds · 2017-09-12T23:36:19Z

Thanks so much for your help! I've added you as a collaborator on the project. Please make sure that you review the CONTRIBUTING.md and other/MAINTAINING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant). You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want). Thanks! And welcome to the team :)

marzelin · 2017-09-13T08:11:02Z

Awesome 🎉. Thanks @kentcdodds

marzelin force-pushed the master branch from 67144c1 to 50fe93a Compare September 3, 2017 15:55

kentcdodds reviewed Sep 3, 2017

View reviewed changes

marzelin force-pushed the master branch from 50fe93a to d41a220 Compare September 6, 2017 17:15

marzelin force-pushed the master branch from d41a220 to 38ac333 Compare September 6, 2017 17:20

kentcdodds reviewed Sep 6, 2017

View reviewed changes

marzelin force-pushed the master branch from 38ac333 to 527e897 Compare September 6, 2017 17:45

kentcdodds reviewed Sep 6, 2017

View reviewed changes

marzelin mentioned this pull request Sep 12, 2017

add preact docs kentcdodds/glamorous-website#278

Merged

feat: add support for preact

359828c

marzelin force-pushed the master branch from 527e897 to 359828c Compare September 12, 2017 10:40

kentcdodds changed the title ~~[WIP] feat(preact): add native support for preact~~ feat(preact): add native support for preact Sep 12, 2017

kentcdodds force-pushed the master branch from f996466 to 4c22c5d Compare September 12, 2017 22:59

chore(build): upgrade to kcd-scripts

e725ee1

kentcdodds force-pushed the master branch from 4c22c5d to e725ee1 Compare September 12, 2017 23:21

kentcdodds merged commit 2a57031 into paypal:master Sep 12, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(preact): add native support for preact #321

feat(preact): add native support for preact #321

marzelin commented Sep 3, 2017 •

edited

Loading

kentcdodds left a comment

kentcdodds Sep 3, 2017

marzelin Sep 4, 2017

kentcdodds Sep 3, 2017

marzelin Sep 4, 2017

luke-john commented Sep 4, 2017

kentcdodds commented Sep 4, 2017

marzelin commented Sep 4, 2017

luke-john commented Sep 5, 2017

codecov-io commented Sep 6, 2017 •

edited

Loading

kentcdodds left a comment

kentcdodds Sep 6, 2017

marzelin Sep 6, 2017

kentcdodds Sep 6, 2017

marzelin Sep 6, 2017

kentcdodds Sep 6, 2017

kentcdodds left a comment

kentcdodds Sep 6, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

marzelin commented Sep 13, 2017

feat(preact): add native support for preact #321

feat(preact): add native support for preact #321

Conversation

marzelin commented Sep 3, 2017 • edited Loading

kentcdodds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luke-john commented Sep 4, 2017

kentcdodds commented Sep 4, 2017

marzelin commented Sep 4, 2017

luke-john commented Sep 5, 2017

codecov-io commented Sep 6, 2017 • edited Loading

Codecov Report

kentcdodds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kentcdodds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

kentcdodds commented Sep 12, 2017

marzelin commented Sep 13, 2017

marzelin commented Sep 3, 2017 •

edited

Loading

codecov-io commented Sep 6, 2017 •

edited

Loading