Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: ♻️ add pipeline operator support #318

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor: ♻️ add pipeline operator support #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,3 +178,10 @@ exports.onCreateNode = ({
})
}
}

module.exports.onCreateBabelConfig = ({ actions, stage }) =>
actions.setBabelPlugin({
name: '@babel/plugin-proposal-pipeline-operator',
stage: stage,
options: { proposal: 'minimal' },
})
35 changes: 35 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.52",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0-rc.1",
"babel-jest": "^23.2.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
Expand Down
14 changes: 4 additions & 10 deletions src/components/events-page/events-feed.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import Helmet from 'react-helmet'
import { compose, withProps, withStateHandlers } from 'recompose'
import { chain, difference, either, isEmpty, pipe, uniq } from 'ramda'
import { chain, difference, either, isEmpty, uniq } from 'ramda'

import BlockHeader from '../common/block-header'
import MainContainer from '../common/main-container'
Expand Down Expand Up @@ -55,19 +55,13 @@ export default compose(
let filteredEvents = events.filter(
either(
() => isEmpty(selectedTags),
pipe(
eventTags,
difference(selectedTags),
isEmpty,
),
e => e |> eventTags |> difference(selectedTags) |> isEmpty,
),
)

return {
filteredEvents,
filteredEventsTags: pipe(
chain(eventTags),
uniq,
)(filteredEvents),
filteredEventsTags: filteredEvents |> chain(eventTags) |> uniq,
}
}),
)(EventsFeed)
10 changes: 3 additions & 7 deletions src/utils/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
// @flow
import { flatten, map, pipe, prop, uniq } from 'ramda'
import { flatten, map, prop, uniq } from 'ramda'

interface IEvent {
date: Date;
}

const viewTags = talk => (talk.tags ? talk.tags : [])

export let eventTags = pipe(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting 🔥
But tt still seems to me that pipe(/***/) using is more informative. Maybe because |> operator is very new and rare for me.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should always strive for using native implementation of functions and methods etc.
🚀🚀🚀🚀

prop('talks'),
map(viewTags),
flatten,
uniq,
)
export let eventTags = e =>
e |> prop('talks') |> map(viewTags) |> flatten |> uniq
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion, this repetition e => e |>... looks a bit strange, after pretty descriptive curried .pipe :)

Copy link
Member Author

@kitos kitos Aug 18, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree
here is proposal "composition" pipe
https://github.com/TheNavigateur/proposal-pipeline-operator-for-function-composition

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is because rambda's pipe and native pipeline operator do different things, but use same name. So e.g. in Elm you have two options: composition using << operatior and create pipelines using |> operator. Through my humble experience in elm, I learn that it is better use pipeline operator when we need the value now (e.g. in render function in react), because it doesn't support delayed evaluation. In this case it reads super awesome.
As for composition operator - I think it is clear, that it should be used for creating helper functions as in your example.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also in ReasonML doesn't support composition, and only pipelines. JFYI.

Feels unnatural from the very beginning. But used to it almost instantly


let getEventNode = (event: { node: * }) => event.node

Expand Down