andrewiggins · November 4, 2017 03:23
diff --git a/.gitignore b/.gitignore
 index.js
 package-lock.json

 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock

 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

 # Coverage directory used by tools like istanbul
 coverage

 # nyc test coverage
 .nyc_output

 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

 # Bower dependency directory (https://bower.io/)
 bower_components

 # node-waf configuration
 .lock-wscript

 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release

 # Dependency directories
 node_modules/
 jspm_packages/

 # Typescript v1 declaration files
 typings/

 # Optional npm cache directory
 .npm

 # Optional eslint cache
 .eslintcache

 # Optional REPL history
 .node_repl_history

 # Output of 'npm pack'
 *.tgz

 # Yarn Integrity file
 .yarn-integrity

 # dotenv environment variables file
 .env
diff --git a/Readme.md b/Readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Picodom Sandbox</title>
 </head>

 <body>
    <div id="app"></div>
    <script src="node_modules/picodom/dist/picodom.js"></script>
    <script src="index.js"></script>
 </body>

 </html>
diff --git a/index.tsx b/index.tsx
 const { h, patch } = picodom;

 interface View<T> {
  (state: T): JSX.Element;
 }

 interface ViewResult<T> {
  (state: T): Element;
 }

 function bind<T>(element: HTMLElement | null, view: View<T>): ViewResult<T> {
  let old: JSX.Element;

  return (state: T) => patch(old, old = view(state), element || undefined);
 }

 let update = bind(document.getElementById("app"), (state: string) =>
  <div>
    <h1>{state}</h1>
    <input
      autofocus
      type="text"
      value={state}
      oninput={(e: any) => update(e.target.value)}
    />
  </div>
 );

 update("Hello!");
diff --git a/package.json b/package.json
 {
  "name": "picodom-sandbox",
  "version": "1.0.0",
  "description": "Sandbox for playing with picodom",
  "main": "index.js",
  "dependencies": {
    "picodom": "^1.0.1"
  },
  "devDependencies": {
    "http-server": "^0.10.0",
    "typescript": "^2.6.1"
  },
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "prestart": "npm run build",
    "start": "http-server"
  },
  "keywords": [
    "picodom"
  ],
  "author": "Andre Wiggins",
  "license": "MIT",
  "homepage": "https://gist.github.com/andrewiggins/a1ca8f6b344e2b36f127a52c82846d30"
 }
diff --git a/tsconfig.json b/tsconfig.json
 {
    "compilerOptions": {
        "jsx": "react", // Compile the JSX to JavaScript
        "jsxFactory": "h", // Compile the JSX using the "h" function
        "strict": true,
        // "rootDir": "src", // not necessary for this gist
        "outFile": "index.js",
        "target": "es6",
        "types": [
            "picodom" // Specify that the picodom types are available globally
        ]
    },
    "include": [
        "index.tsx"
    ]
 }
	index.js
	package-lock.json

	# Logs
	logs
	*.log
	npm-debug.log*
	yarn-debug.log*
	yarn-error.log*

	# Runtime data
	pids
	*.pid
	*.seed
	*.pid.lock

	# Directory for instrumented libs generated by jscoverage/JSCover
	lib-cov

	# Coverage directory used by tools like istanbul
	coverage

	# nyc test coverage
	.nyc_output

	# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
	.grunt

	# Bower dependency directory (https://bower.io/)
	bower_components

	# node-waf configuration
	.lock-wscript

	# Compiled binary addons (https://nodejs.org/api/addons.html)
	build/Release

	# Dependency directories
	node_modules/
	jspm_packages/

	# Typescript v1 declaration files
	typings/

	# Optional npm cache directory
	.npm

	# Optional eslint cache
	.eslintcache

	# Optional REPL history
	.node_repl_history

	# Output of 'npm pack'
	*.tgz

	# Yarn Integrity file
	.yarn-integrity

	# dotenv environment variables file
	.env
	<!DOCTYPE html>
	<html>

	<head>
	<title>Picodom Sandbox</title>
	</head>

	<body>
	<div id="app"></div>
	<script src="node_modules/picodom/dist/picodom.js"></script>
	<script src="index.js"></script>
	</body>

	</html>
	const { h, patch } = picodom;

	interface View<T> {
	(state: T): JSX.Element;
	}

	interface ViewResult<T> {
	(state: T): Element;
	}

	function bind<T>(element: HTMLElement \| null, view: View<T>): ViewResult<T> {
	let old: JSX.Element;

	return (state: T) => patch(old, old = view(state), element \|\| undefined);
	}

	let update = bind(document.getElementById("app"), (state: string) =>
	<div>
	<h1>{state}</h1>
	<input
	autofocus
	type="text"
	value={state}
	oninput={(e: any) => update(e.target.value)}
	/>
	</div>
	);

	update("Hello!");
	{
	"name": "picodom-sandbox",
	"version": "1.0.0",
	"description": "Sandbox for playing with picodom",
	"main": "index.js",
	"dependencies": {
	"picodom": "^1.0.1"
	},
	"devDependencies": {
	"http-server": "^0.10.0",
	"typescript": "^2.6.1"
	},
	"scripts": {
	"build": "tsc -p tsconfig.json",
	"prestart": "npm run build",
	"start": "http-server"
	},
	"keywords": [
	"picodom"
	],
	"author": "Andre Wiggins",
	"license": "MIT",
	"homepage": "https://gist.github.com/andrewiggins/a1ca8f6b344e2b36f127a52c82846d30"
	}
	{
	"compilerOptions": {
	"jsx": "react", // Compile the JSX to JavaScript
	"jsxFactory": "h", // Compile the JSX using the "h" function
	"strict": true,
	// "rootDir": "src", // not necessary for this gist
	"outFile": "index.js",
	"target": "es6",
	"types": [
	"picodom" // Specify that the picodom types are available globally
	]
	},
	"include": [
	"index.tsx"
	]
	}