import { LibComponent, LibProps } from 'some-lib';

interface Props {
  myNewProp: string;
}

type CombinedProps = Props & LibProps;

const MyComponent: React.FC<CombinedProps> = (props) => {
  const { myNewProp, ...rest } = props;

  return <div />
}

export default MyComponent as React.FC<Props>;

import * as React from 'react'
import { compose } from 'recompose'

import { SomeProps } from 'lib';
import { OtherProps } from 'another-lib'

interface Props {
  myNewProp: string;
}

type CombinedProps = Props & SomeProps & OtherProps;

const MyComponent: React.FC<CombinedProps> = (props) => {
  const { myNewProp, ...rest } = props;

  return <div />
}

/** 
 * first type arg is the props after the component is run through all HOCs 
 * 
 * second type arg is the base props
 */
export default compose<CombinedProps, Props>(
  HOC,
  AnotherHOC
)(MyComponent)

teen phone cutie fucked around with this message at 21:09 on May 13, 2019

• http://taotajima.jp/
  
• https://hinderer-wolff.fr/histoire
  

• "Upgrade" things to Lit-HTML, i.e. 4th generation WebComponents.
  
• Work out a mechanism of using Lit-HTML in the rendered thread but backed by business logic ES6 classes in WebWorkers.
  
• OffscreenCanvas based real time graphing.
  

import React from 'react';
import { compose } from 'recompose';

const Form: React.FC<CombinedProps> = props => {
  return (
    <form className={classes.root}>
      {numberOfIngredients.map(
        (eachIteration, index) => {
         /** 
            * In a nutshell, we have 2 buttons - one to add an ingredient and one to remove an ingredient 
            * When the "add" button is clicked, we need to focus input on the last Searchbar in the list
            */
          return (
            <div className={classes.section} key={index}>
              <Searchbar
                handleChange={handleSearch}
              />
              <Button
                onClick={() => setIngredientsCount(ingredientsCount - 1)}
              >
                Remove Ingredient
              </Button>
            </div>
          );
        }
      )}
      <div className={classes.buttonWrapper}>
        <Button onClick={() => setIngredientsCount(ingredientsCount + 1)}>
          Add Ingredient
        </Button>
        <Button onClick={handleCreateRecipie}>
          Create Recipie
        </Button>
      </div>
    </form>
  );
};

export default compose<CombinedProps, RouteComponentProps>(
  withSnackbar,
  React.memo
)(Form);

import Select from 'react-select';
import { compose } from 'recompose';

const Searchbar: React.SFC<CombinedProps> = props => {
  return (
    <Select
      onChange={props.handleSelect}
      components={{
        /** lets us pass our own custom <input /> element */
        CustomInput: componentProps =>
          Input({ ...componentProps })
      }}
      {...props}
    />
  );
};

const Input = (props: any) => <input {...props} />

export default compose<CombinedProps, Props & SelectProps>(
  styled,
  React.memo
)(Searchbar);

teen phone cutie fucked around with this message at 14:41 on May 22, 2019

teen phone cutie fucked around with this message at 19:09 on May 24, 2019