ryanflorence

import invariant from "tiny-invariant";

class AmalgoBox extends HTMLElement {
  get input() {
    return this.querySelector("input") as HTMLInputElement;
  }

  get button() {
    return this.querySelector("button") as HTMLButtonElement;
  }

jamiebuilds

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

WebReflection

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

tim-field

import { useEffect, useState } from "react"
import { createBrowserHistory } from "history"
const history = createBrowserHistory()

const toLocation = path => new URL(path, window.location.href)

// without this react won't re-render as location is the same object
// @see https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
const cloneLocation = () => Object.assign({}, window.location)

ryanflorence

import React from 'react'
import { findDOMNode } from 'react-dom'

if (typeof window !== 'undefined' && 'scrollRestoration' in window.history) {
  history.scrollRestoration = 'manual'
}

export const useRestoreScroll = () => ({
  renderRootContainer: (props) => (
    <RestoreScrollContainer {...props}/>

HenrikJoreteg

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')

Dr-Nikson

This is an auth example (WIP)

react + redux + RR

It uses https://gist.github.com/iNikNik/3c1b870f63dc0de67c38 for stores and actions.

1) create redux

const redux = createRedux(state);

2) get requireAccess func => bindCheckAuth to redux

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

BinaryMuse

// Component

var AnswerDisplay = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("answer")],

  getStateFromFlux() {
    var flux = this.getFlux(),
        answerStore = flux.store("answer");

    return {

CGaskell

using System;
using System.ComponentModel;
using Sitecore.Web.UI.HtmlControls;

namespace DetangledDigital.Sc.FieldTypes
{
    /*
    * 
    * @CGaskell
    * Custom field type. Renders a dropdown list based on a specified enum.