frehner

import * as MyLib from 'my-lib';

MyLib.Comp1
MyLib.Comp2

frehner

// we change our library to have multiple entry points. Note that this has a large effect on our package.json, bundler settings, etc. 

// in our library. file: "src/CartLine"
export {CartLine, CartLineQuantityAdjustButton} from 'index.js'

// in a dev's project
import * as CartLine from '@shopify/hydrogen/CartLine'

frehner

import {chromium} from 'playwright';
import '@shopify/hydrogen/web-polyfills';
import {createServer as createViteDevServer} from 'vite';

export async function startHydrogenServer() {
  const app = import.meta.env.WATCH
    ? await createDevServer()
    : await createNodeServer();

  const browser = await chromium.launch();

frehner

Proposal

Add an event called statechange that will fire on any change to the history stack, whether that be through the browser's back button, or window.history.pushState or other methods.

This proposed event would be similar to popstate, except that it would fire on all route changes regardless of the source, much like hashchange fires on all hash changes regardless of the source.

Current Problems

hashchange events allowed javascript router libraries (e.g. React Router, vue-router) to easily respond to any routing event when the application is using hash routing.

frehner

import React from 'react'
import {
  OptimizelyFeature as OriginalOptimizelyFeature,
  useFeature as useFeatureOriginal,
} from '@optimizely/react-sdk'

export function OptimizelyFeature({ feature, children, ...restProps }) {
  return (
    <OriginalOptimizelyFeature feature={feature} {...restProps}>
      {(isEnabled, ...rest) => {

frehner

const childMachine = Machine({
    id: "child",
    initial: "waiting",
    states: {
      waiting: {
        on: {
          OUTER: {
            actions: (ctx, act) => console.log('outer'),
          },
          MAPPED: {

frehner

const timerMachine = Machine({
  id: 'timer',
  context: {
    duration: 1000,
    otherThing: 'hey'
  },
  initial: 'test',
  states: {
    test: {
      entry: context => console.log('context:', context)

frehner

import React, { Component } from 'react';
import { ImageOverlay, Map, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import './App.css';
import '../node_modules/leaflet/dist/leaflet.css';
import customImage from './test-map.png';
import customPortrait from './portrait.jpg';

class CustomMap extends Component {

frehner

Keybase proof

I hereby claim:

• I am frehner on github.
• I am aaf (https://keybase.io/aaf) on keybase.
• I have a public key ASAEk9xaxkf1KZIrhOCU0WiJVRM2B1Rq4C9PfhcRQsRpYwo

To claim this, I am signing this object: