Koen Bok koenbok

## framer-pageview.js
// https://stackoverflow.com/a/64927639
function addPushStateListener(listener) {
  if (!Proxy) return;
  window.history.pushState = new Proxy(window.history.pushState, {
    apply: (target, thisArg, argArray) => {
      target.apply(thisArg, argArray);
      listener();
    },
  });
}

## framer_sites_dowload.html
<script>
  function onPathChange(callback) {
    let path;
    // Only reliable way seems polling across browsers :-(
    setInterval(() => {
      if (window.location.pathname !== path) {
        path = window.location.pathname;
        callback(path);
      }
    }, 1000);

## duplicate-css.js
const rules = Array.from(document.getElementsByTagName("style"))
  .map((el) => el.innerText.split("}"))
  .flat()
  .map((rule) => rule.trim())
  .filter((rule) => rule && !rule.startsWith("@"))
  .map((rule) => {
    return {
      selector: rule.split("{")[0].trim(),
      style: rule.split("{")[1].trim(),
    };

## memoize.ts
export function memoize<R, T extends (...args: any[]) => R>(f: T): T {
  const cache = new Map<string, R>();
  return ((...args: any[]) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, f(...args));
    return cache.get(key);
  }) as T;
}

## test-component.js
import React from "react"

export function TestComponent() {
  return React.createElement("div", {}, "Hello World")
}

## Button.jsx
import * as React from "react"
import { Frame, useCycle } from "framer"

export function Button() {
    const [variant, next] = useCycle({ scale: 1 }, { scale: 1.5 })

    return (
        <Frame
            animate={variant}
            onTap={() => next()}

## TabBar.tsx
import * as React from "react"
import { Frame, Stack } from "framer"

function capitalize(name) {
    // Capitalizes a word: feed -> Feed
    return name.charAt(0).toUpperCase() + name.slice(1)
}

function Button({ title, active, onTap }) {
    const opacity = active ? 1 : 0.35

## store.ts
import * as React from "react";

/**
A hook to simply use state between components
Warning: this only works with function components (like any hook)

Usage:

// You can put this in an central file and import it too
const useStore = createStore({ count: 0 })

## keyboard.tsx
import * as React from "react";

export class Keyboard extends React.Component {
  state = { key: null };

  onChange = event => {
    this.setState({ key: event.target.value });
  };

  render() {

## autoplay.html
<html>
 <body>
  <video controls autoplay muted>
    <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
  </video>
  </body>
</html>
	// https://stackoverflow.com/a/64927639
	function addPushStateListener(listener) {
	if (!Proxy) return;
	window.history.pushState = new Proxy(window.history.pushState, {
	apply: (target, thisArg, argArray) => {
	target.apply(thisArg, argArray);
	listener();
	},
	});
	}
	<script>
	function onPathChange(callback) {
	let path;
	// Only reliable way seems polling across browsers :-(
	setInterval(() => {
	if (window.location.pathname !== path) {
	path = window.location.pathname;
	callback(path);
	}
	}, 1000);
	const rules = Array.from(document.getElementsByTagName("style"))
	.map((el) => el.innerText.split("}"))
	.flat()
	.map((rule) => rule.trim())
	.filter((rule) => rule && !rule.startsWith("@"))
	.map((rule) => {
	return {
	selector: rule.split("{")[0].trim(),
	style: rule.split("{")[1].trim(),
	};
	export function memoize<R, T extends (...args: any[]) => R>(f: T): T {
	const cache = new Map<string, R>();
	return ((...args: any[]) => {
	const key = JSON.stringify(args);
	if (!cache.has(key)) cache.set(key, f(...args));
	return cache.get(key);
	}) as T;
	}
	import React from "react"

	export function TestComponent() {
	return React.createElement("div", {}, "Hello World")
	}
	import * as React from "react"
	import { Frame, useCycle } from "framer"

	export function Button() {
	const [variant, next] = useCycle({ scale: 1 }, { scale: 1.5 })

	return (
	<Frame
	animate={variant}
	onTap={() => next()}
	import * as React from "react"
	import { Frame, Stack } from "framer"

	function capitalize(name) {
	// Capitalizes a word: feed -> Feed
	return name.charAt(0).toUpperCase() + name.slice(1)
	}

	function Button({ title, active, onTap }) {
	const opacity = active ? 1 : 0.35
	import * as React from "react";

	/**
	A hook to simply use state between components
	Warning: this only works with function components (like any hook)

	Usage:

	// You can put this in an central file and import it too
	const useStore = createStore({ count: 0 })
	import * as React from "react";

	export class Keyboard extends React.Component {
	state = { key: null };

	onChange = event => {
	this.setState({ key: event.target.value });
	};

	render() {
	<html>
	<body>
	<video controls autoplay muted>
	<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
	</video>
	</body>
	</html>