mikaelbr

type AllowedChildren =
  | React.ReactElement<BasicItemProps>
  | React.ReactElement<HeaderItemProps>
  | AllowedChildren[];

type ListSectionProps = {
  children: AllowedChildren;
};

const childrenTypes = [BasicItem, HeaderItem];

mikaelbr

type ScreenDimensions = {
  height: number;
  width: number;
}

function useScreenDimension(): ScreenDimensions {
  const [dimensions, setDimensions] = useState<ScreenDimensions>(() =>
    Dimensions.get('screen'),
  );

mikaelbr

{"lastUpload":"2020-05-22T11:42:02.254Z","extensionVersion":"v3.4.3"}

mikaelbr

import http from "http";

const db = createDb();
const app = createApp();
const router = app()
  .on("GET", "/api/score", function(req, res) {
    result(res, 200, { scores: db.entries() });
  })
  .on("POST", "/api/score", function(req, res) {
    const { name, score } = req.body;

mikaelbr

// Using an IIFE to hide some implementation details.
// If you use a bundler this should be it's own file.
const createElement = (function() {
  const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
  const eventName = k => k.substr(2).toLowerCase();
  const isString = s => typeof s === "string";
  const isFunction = s => typeof s === "function";

  function attrs(el, props) {
    // Remember, JSX sets props to `null` if nothing is defined, so in that case we just return el

mikaelbr

// ... inside our createElement when adding children:
children.flat().forEach(child => {
  const node = !isString(child) ? child : document.createTextNode(child);
  el.appendChild(node);
});
// ... createElement continues

mikaelbr

const isFunction = s => typeof s === "function";

function createElement(tag, props, ...children) {
  // If first argument is function, we know it is custom component,
  // So call it as a function, passing the props with children as a property.
  // Using spread like this will work when props is `null` also
  if (isFunction(tag)) {
    return tag({ ...props, children });
  }
  

mikaelbr

let myHeader = <Header id="myHeader">My important title</Header>;

// Which outputs
let myHeader = createElement(
  Header,
  {
    id: "myHeader"
  },
  "My important title"
);

mikaelbr

function Header(props) {
  return <h1 id={props.id}>Title: {props.children}</h1>;
}

// Or with destructuring
function Header({ id, children }) {
  return <h1 id={id}>Title: {children}</h1>;
}

mikaelbr

const button = <button onClick={() => console.log("Hello!")}>Click me</button>;
document.body.appendChild(button);
// When clicked:
//> Hello!
//> Hello!