Skip to content

Instantly share code, notes, and snippets.

@stephencookdev
stephencookdev / gen-type-expression.js
Created April 24, 2020 16:23
A look at the genTypeExpression function of grandma-visitor-jsx
module.exports = function ({ types: t }) {
const genTypeExpression = (node) => {
return t.callExpression(
t.memberExpression(t.identifier("React"), t.identifier("createElement")),
[
/^[A-Z]/.test(node.type[0])
? t.identifier(node.type)
: t.stringLiteral(node.type),
t.objectExpression(node.args),
...node.children.map(genTypeExpression),
@stephencookdev
stephencookdev / grandma-visitor.js
Last active April 24, 2020 16:03
A look at the main visitor of grandmas-own-jsx
module.exports = function ({ types: t }) {
const GrandmaVisitor = {
StringLiteral(path, state) {
if (path.node.value === "👵") {
const recipeRef = state.grandmasRecipes[path.node.loc.start.line];
const recipeMatches = recipeRef && recipeRef.start > path.node.start;
if (recipeMatches) {
const recipe = recipeRef.value;
const domStruc = cookRecipe(recipe, state.grandmasReference);
@stephencookdev
stephencookdev / grandma-visitor-initiator.js
Created April 24, 2020 15:15
A look at the initiator visitor of grandmas-own-jsx
module.exports = function ({ types: t }) {
const GrandmaVisitorInitiator = {
Program(path) {
const commentLineTokens = path.parent.comments.filter(
(token) => token.type === "CommentLine"
);
const commentBlockTokens = path.parent.comments.filter(
(token) => token.type === "CommentBlock"
);
@stephencookdev
stephencookdev / simple-babel-plugin.js
Last active April 24, 2020 14:46
Example of a simple Babel plugin
module.exports = function () {
const SimpleVisitor = {
StringLiteral(path, state) {
if (path.node.value === "We'll never survive!") {
path.node.value = "Nonsense. You're only saying that because no one ever has.";
}
},
};
return { visitor: SimpleVisitor };
@stephencookdev
stephencookdev / SwitchWithSlide-hoc-usage.js
Created July 16, 2018 15:22
`SwitchWithSlide` example - hoc usage
const SwitchWithSlide = animateSwitch(Switch, SlideOut);
const App = () => (
<SwitchWithSlide>
<Route path="/a" component={PathA} />
<Route path="/b" component={PathB} />
</SwitchWithSlide>
);
@stephencookdev
stephencookdev / SwitchWithSlide-vanilla.js
Last active July 16, 2018 15:23
`SwitchWithSlide` example - vanilla
const App = () => (
<Switch>
<Route path="/a" component={PathA} />
<Route path="/b" component={PathB} />
</Switch>
);
@stephencookdev
stephencookdev / SwitchWithSlide-hoc.js
Created July 16, 2018 15:18
`SwitchWithSlide` example - hoc
const animateSwitch = (CustomSwitch, AnimatorComponent) => ({
children,
}) => (
<Route
render={({ location }) => (
<AnimatorComponent uniqKey={location.pathname}>
<CustomSwitch location={location}>{children}</CustomSwitch>
</AnimatorComponent>
)}
/>
@stephencookdev
stephencookdev / SwitchWithSlide-naive.js
Created July 16, 2018 15:17
`SwitchWithSlide` example - naive usage
render() {
return (
<Route
render={({ location }) => (
<SlideOut uniqKey={location.pathname}>
<Switch location={location}>
<Route path="/a" component={PathA} />
<Route path="/b" component={PathB} />
</Switch>
</SlideOut>
@stephencookdev
stephencookdev / SwitchWithSlide-swap.js
Created July 16, 2018 15:15
`SwitchWithSlide` example - swap
swapChildren = () => {
this.setState({
childPosition: Slider.FROM_RIGHT,
prevChild: null,
prevUniqId: null,
animationCallback: null
});
}
@stephencookdev
stephencookdev / SwitchWithSlide-update.js
Created July 16, 2018 15:14
`SwitchWithSlide` example - update
componentDidUpdate(prevProps, prevState) {
const prevUniqId = prevProps.uniqKey || prevProps.children.type;
const uniqId = this.props.uniqKey || this.props.children.type;
if (prevUniqId !== uniqId) {
this.setState({
childPosition: Slider.TO_LEFT,
curChild: this.props.children,
curUniqId: uniqId,
prevChild: prevProps.children,