```svelte

<script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.y = event.clientY; } </script> <div on:mousemove={handleMousemove}> The mouse position is {m.x} x {m.y} </div> <style> div { width: 100%; height: 100%; } </style>

```

```js / React Hook - sample code to capture mouse coordinates/

import React, { useState, useCallback, useEffect, useRef } from 'react';

function useEventListener(eventName, handler, element = window) { // Create a ref that stores handler const savedHandler = useRef();

// Update ref.current value if handler changes. // This allows our effect below to always get latest handler ... // ... without us needing to pass it in effect deps array ... // ... and potentially cause effect to re-run every render. useEffect(() => { savedHandler.current = handler; }, [handler]);

useEffect(() => { // Make sure element supports addEventListener const isSupported = element && element.addEventListener; if (!isSupported) return;

  // Create event listener that calls handler function stored in ref
  const eventListener = event => savedHandler.current(event);

  // Add event listener
  element.addEventListener(eventName, eventListener);

  // Remove event listener on cleanup
  return () => {
    element.removeEventListener(eventName, eventListener);
  };
},
[eventName, element] // Re-run if eventName or element changes

); }

export default function App() { // State for storing mouse coordinates const [coords, setCoords] = useState({ x: 0, y: 0 });

// Event handler utilizing useCallback ... // ... so that reference never changes. const handler = useCallback( ({ clientX, clientY }) => { // Update coordinates setCoords({ x: clientX, y: clientY }); }, [setCoords] );

// Add event listener using our hook useEventListener('mousemove', handler);

return (

The mouse position is ({coords.x}, {coords.y})

); } ```

It's not a bug, it's a feature - they say.

React DX is so special...

https://relatablecode.com/quickly-publish-and-install-a-library-with-github-packages

js /** * This component is just a Box with border. * It serves as an example of how you can incorporate * components together. * * Component also has slots, methods and events. * * @component * @example <caption>Basic usage just with the default slot</caption> * <Box> * I am inside a slot * </Box> * * @example <caption>Using second component inside</caption> * <Box> * <ProgressBar :spent="spent" :remaining="50"></ProgressBar> * </Box> * * @example <caption>Example of passing an entire component in a preview</caption> * { * template: `<Box> * <ProgressBar :spent="spent" :remaining="50"></ProgressBar> * <ProgressBar :spent="50" :remaining="50" style="margin-top: 20px"></ProgressBar> * </Box>`, * data: function() { * return {spent: 223}; * } * } */ export default { name: "Box", props: { /** * This will be in the header */ title: { type: String, default: "My box" } }, methods: { /** * Also, you can describe methods for each component * the same as you would do this in regular @jsdoc * documented file * * @param {string} prop1 some example property * @param {string} prop2 other property */ exampleMethod(prop1, prop2) { // method body // The method could even throw an event /** * This event could be thrown by component in case * of some kind of unexpected behaviour. * * @category API * @event unexpectedEvent */ this.$emit('unexpecteEvent') } } }

```js const Hello = ({ profile }) => { // prop mutation: throws TypeError profile.name = 'Sebastien updated';

return

Hello {profile.name}

; };

function App() { const [profile, setProfile] = React.useState(#{ name: 'Sebastien', });

// state mutation: throws TypeError profile.name = 'Sebastien updated';

return <Hello profile={profile} />; } ```

```html

<div>Hi</div>

<React.SuspenseList revealOrder="forwards"> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource1} /> </React.Suspense> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource2} /> </React.Suspense> <React.Suspense fallback={\<p>loading...\

}> <Child resource={resource3} /> </React.Suspense> </React.SuspenseList> ```

We can see that the revealing order is kept, from top to bottom, even though the 2nd promise if fulfilled sooner.

js const HeavyComponent = lazy(() => import(/* webpackChunkName: "HeavyComponent" */ './HeavyComponent');

js const LazyLoad = lazy(() => import(/* webpackChunkName: 'lazyload' */ './LazyLoad') );

```js const PrefetchLoad = lazy(() => import( / webpackPrefetch: true / './PrefetchLoad' ) );

const App = () => { return ( <Suspense fallback="Loading"> {condition && <PrefetchLoad />} </Suspense> ); }; ```

js const App = () => { return ( <Suspense fallback="Loading"> <LazyLoad /> </Suspense> ); };

```js import React, { lazy } from 'react';

const LazyLoad = lazy(() => import('./LazyLoad'));

const App = () => { return <LazyLoad />; }; ```

```js

const CatAvatar = React.lazy(() => import('./path/to/cat/avatar')); const ThorAvatar = React.lazy(() => import('./path/to/cat/thor-avatar'));

const AppContainer = () => ( <React.Suspense fallback="loading..."> <CatAvatar /> <ThorAvatar /> </React.Suspense> ); ```

```js // FromStream component

import { PureComponent } from 'react';

export default class FromStream extends PureComponent { constructor(props) { super(props); this.state = { value: false }; }

componentDidMount() { this.initStream(); }

componentDidUpdate(prevProps) { if (prevProps.stream !== this.props.stream) { this.initStream(); } }

componentWillUnmount() { if (this.unSubscribe) { this.unSubscribe(); } }

initStream() { if (this.unSubscribe) { this.unSubscribe(); this.unSubscribe = null; }

if (this.props.stream) {
  const onValue = (value) => {
    this.setState(() => ({ value: map(value) }));
  };

  this.props.stream.onValue(onValue);
  this.unSubscribe = () => stream.offValue(onValue);
}

}

render() { return this.props.children(this.state && this.state.value); } } ```

```js // Date/Time import React from 'react'; import Kefir from 'kefir'; import FromStream from './FromStream';

const dateStream = Kefir.interval(1000).map(() => new Date().toString());

export default () => ( <FromStream stream={dateStream}> {(dateString) => dateString} </FromStream> ); ```

```js // Scroll import React from 'react'; import Kefir from 'kefir'; import FromStream from './FromStream';

const scrolledPercentStream = Kefir.fromEvents(document, 'scroll').map((e) => { const scrollY = window.document.pageYOffset; const scrollHeight = e.target.body.scrollHeight; return scrollY / (scrollHeight - windiw.innerHeight) * 100; });

export default () => ( <FromStream stream={scrolledPercentStream}> {(percent) => ( <div className="bar" style={{ top: <code>${percent}% }}></div> )} </FromStream> ); ```

```js import { useState, useEffect } from 'react';

interface StreamState { data: Uint8Array | null; error: Error | null; controller: AbortController; }

const useAbortableStreamFetch = (url: string, options?: RequestInit): { data: Uint8Array | null, error: Error | null, abort: () => void, } => {

const [state, setState] = useState<StreamState>({ data: null, error: null, controller: new AbortController(), });

useEffect(() => { (async () => { try { const resp = await fetch(url, { ...options, signal: state.controller.signal, }); if (!resp.ok || !resp.body) { throw resp.statusText; }

    const reader = resp.body.getReader();
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break;
      }

      setState(prevState => ({ ...prevState, ...{ data: value } }));
    }
  } catch (err) {
    if (err.name !== 'AbortError') {
      setState(prevState => ({ ...prevState, ...{ error: err } }));
    }
  }
})();

return () => state.controller.abort();

}, [url, options]);

return { data: state.data, error: state.error, abort: () => state.controller && state.controller.abort(), }; };

export default useAbortableStreamFetch; ```

```js import React, { Component } from 'react'; import './style.css'; import ndjsonStream from 'can-ndjson-stream';

class App extends Component { constructor(props) { super(props);

this.state = {
  todos: []
};

}

componentDidMount(){ fetch('http://localhost:5000/api/10', { method: 'get' }).then(data => { return ndjsonStream(data.body); }).then((todoStream) => { const streamReader = todoStream.getReader(); const read = result => { if (result.done) return;

    this.setState({ 
      todos: this.state.todos.concat([result.value.user])
    });

    streamReader.read().then(read);
  };

  streamReader.read().then(read); 
}).catch(err => {
  console.error(err)
});

}

render() { return ( <div className="App">

React + NDJSON Stream Demo

{this.state.todos.map((todo, i) =>
• {todo}
)}

</div> ); } }

export default App; ```

```html

<script>window.__STATE__ = ${JSON.stringify({ data })}</script>

```

```html

<div>data:text/html, click me</div>

```

html { username: "pwned", bio: "</script><script>alert('XSS Vulnerability!')</script>" }

json { username: "pwned", bio: "</script><script>alert('XSS Vulnerability!')</script>" }

```html

<script>window.__STATE__ = ${JSON.stringify({ data })}</script>

```