peerreynders/index.html

## index.html
<!doctype html>
<html lang="eng">
  <!--
       Originally:
       https://elixirforum.com/t/passing-json-between-simple-reactjs-and-phoenix-elixir/19799/6

       See also:
       https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Embedding_data_in_HTML
  -->
  <head>
    <meta charset="utf-8"/>
    <title>Injecting server generated data into client side code</title>
    <style>
     ul {
       list-style: none;
     }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- Server generated JSON data -->
    <script id="appProps" type="application/json">
     {
       "categories": ["1","2","3"]
     }
    </script>
    <script type="module">
     import { createElement as h, render, Component } from 'https://unpkg.com/preact?module';

     function App({ categories }) {
       return (
         h('ul', null,
           ...categories.map(category => h('li', {key: category}, category))
         )
       );
     }

     // load data from script element
     const data = document.getElementById('appProps');
     const props = JSON.parse(data.text);

     render(
       h(App, { ...props }),
       document.getElementById('app')
     );
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="eng">
	<!--
	Originally:
	https://elixirforum.com/t/passing-json-between-simple-reactjs-and-phoenix-elixir/19799/6

	See also:
	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Embedding_data_in_HTML
	-->
	<head>
	<meta charset="utf-8"/>
	<title>Injecting server generated data into client side code</title>
	<style>
	ul {
	list-style: none;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	<!-- Server generated JSON data -->
	<script id="appProps" type="application/json">
	{
	"categories": ["1","2","3"]
	}
	</script>
	<script type="module">
	import { createElement as h, render, Component } from 'https://unpkg.com/preact?module';

	function App({ categories }) {
	return (
	h('ul', null,
	...categories.map(category => h('li', {key: category}, category))
	)
	);
	}

	// load data from script element
	const data = document.getElementById('appProps');
	const props = JSON.parse(data.text);

	render(
	h(App, { ...props }),
	document.getElementById('app')
	);
	</script>
	</body>
	</html>