Anthony Frehner 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.

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:

	// 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'

	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();

	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) => {

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

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

	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 {

	import * as MyLib from 'my-lib';

	MyLib.Comp1
	MyLib.Comp2