julianburr

 window.customElements.define('suspense-content', class SuspenseContent extends HTMLElement {
  connectedCallback () {
    // Assume previous sibling is the `<template>` element
    const content = this.previousElementSibling.content;
    
    // Get `target-id` from custom element attributes and find fallback placeholder based on it
    const id = this.getAttribute('target-id');
    const target = document.querySelector('[data-suspense-id="' + id + '"]');

    // Replace fallback content with actual content

julianburr

# Stell sicher dass du NodeJS installiert hast
# Siehe https://nodejs.org/en/learn/getting-started/how-to-install-nodejs

# Installier npm dependencies
npm install

# Beispiel script ausführung
LOGIN_USERNAME=foo LOGIN_PASSWORD=bar node index.mjs

julianburr

# https://stackoverflow.com/questions/6127328/how-can-i-delete-all-git-branches-which-have-been-merged

# Delete local branches that have been merged i.e. into "main"
git branch --merged main | grep -v "(^\*|main)" | xargs git branch -d

# Delete remote branches that have been merged i.e. into "main
git branch -r --merged main | grep -v "(^\*|main)" | sed 's/origin\///' | xargs -n 1 git push --delete origin

julianburr

Model Generator Workshop

Model Generator was created to solve a bunch of core problems we had to deal with in regards to API data flows within our React apps. We wanted to use Redux (because it seemed the best solution to store the data at the time), but needed to address the following:

1. Redux Boilerplate
2. Data Fetching
3. State Normalisation

1. Redux Boilerplate

julianburr

// Yep, we're doing it, just storing the data on a plain old object
let data = {};

export default (fetchFn, getKey = (x) => x) => (args) => {
  // Get unique identifier from arguments
  const key = getKey(args);
  if (data[key]) {
    if (typeof data[key].then === 'function') {
      // Fetch has already been triggered
      // So throw the stored promise instead of triggering another request

julianburr

class App extends Component {
  render () {
    return (
      <Suspense fallback={<p>Loading...</p>}>
        <DeepNesting>
          <ThereMightBeSeveralAsyncComponentsHere />
        </DeepNesting>
      </Suspense>
    );
  }

julianburr

// Instead of this...
ReactDOM.render(<App />, document.getElementById('root'));

// ...we do this
ReactDOM.createRoot(document.getElementById(‘root’)).render(<App />);

julianburr

import createResource from './magical-cache-provider';
const dataResource = createResource((id) => fetchData(id));

class DynamicData extends Component {
  render () {
    const data = dataResource.read(this.props.id);
    return <p>Data loaded 🎉</p>;
  }
}

julianburr

const DataContext = React.createContext();

class DataContextProvider extends Component {
  // We want to be able to store multiple sources in the provider,
  // so we store an object with unique keys for each data set +
  // loading state
  state = {
    data: {},
    fetch: this.fetch.bind(this)
  };

julianburr

class DynamicData extends Component {
  state = {
    loading: true,
    error: null,
    data: null
  };

  componentDidMount () {
    fetchData(this.props.id)
      .then((data) => {