andrewiggins/.gitignore

## .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

## Readme.md

      
    Raw
  

              Readme.md
            
          
    picodom-sandbox

Sandbox to demonstrate using picodom and TypeScript

  
## 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>

## 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!");

## 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"
}

## 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"
	]
	}