jensb1/components.html

## components.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Components development</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
	<link rel='stylesheet' href='/public/global.css'/>
  <link rel='stylesheet' href='/build/client/bundle.css'/>

  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js'></script>
  <script type="module">
    function base64Encode( stringInput ) {
      var normalizedInput = encodeURIComponent( stringInput ).replace(
          /%([0-9A-F]{2})/g,
          function toSolidBytes( $0, hex ) {
              return( String.fromCharCode( "0x" + hex ) );
          }
      );
      return( btoa( normalizedInput ) );
    }

    var socket = io();
    var app;
    var version = 0;
    socket.on("file-change-event", async function (data) {
      if(app!=undefined) {
          console.log("Destroying: ", app);
          app.$destroy();
      }
      console.log("file change event received: ", data);
      version+=1; // force cache to disable

      var b64moduleData = "data:text/javascript;charset=utf-8;base64," + base64Encode(data.code);
      const Component = await import(b64moduleData);
      app = new Component.default({
          target: document.body
      });

    });
  </script>

</head>

<body>
</body>
</html>

## components.js
const rollup = require("rollup");
const svelte = require('rollup-plugin-svelte');
const resolve = require('@rollup/plugin-node-resolve');
var express = require('express');
const sirv = require('sirv');
var fs = require('fs');
var io = require('socket.io')(http);

const { PerformanceObserver, performance } = require('perf_hooks');


let inputOptions = {
  input: 'src/pages/components/input.svelte',
  plugins: [
    svelte({generate: "dom"}),
    resolve({
      browser: true,
      dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
    })
  ]
};

const outputOptions = {
  sourcemap: true,
  format: 'es',
  dir: "build/components",
};


var app = express();

app.get("/", function (req, res) {
  fs.readFile('src/lib/client/templates/components.html', function (_, data) {
    res.end(data);
  });
});
const sirv_files = sirv('./', {dev: true});
app.use(sirv_files);

var http = require('http').Server(app);
http.listen(8080);
var io = require('socket.io')(http);


// Write new app file:


let comp_file = fs.readFileSync('src/lib/client/templates/components.svelte');
comp_file = comp_file.toString()
    .replace('__page__', '../../src/pages/components/input.svelte')
    .replace('__layout__', '../../src/pages/admin/layout.svelte');
fs.writeFileSync('./build/components/components.svelte', comp_file);

const watchOptions = {
  ...inputOptions,
  input: './build/components/components.svelte',
  output: [outputOptions],
  watch: {
  }
};
const watcher = rollup.watch([watchOptions]);

watcher.on('event', async event => {
  console.log(event);
  switch(event.code) {
    case 'BUNDLE_END':
      let res = await event.result.write(outputOptions);
      console.log(event);
      console.log(res);
      io.emit('file-change-event', {code: res.output[0].code, filename: res.output[0].fileName});
      break;
  }
})

console.log("started watcher");
/*
(async function loop() {
  for (let i = 0; i < 20; i++) {
    let t0 = performance.now();
    await build(files[i%2]);
    let t1 = performance.now();
    console.log("bundling took " + (t1 - t0) + " milliseconds.");
  }
})();

## components.svelte
<script>
import layout from '__layout__';
import page from '__page__';
let params = {};
</script>

<svelte:component this={layout} params={params}>
	<svelte:component this={page} params={params}/>
</svelte:component>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Components development</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
	<link rel='stylesheet' href='/public/global.css'/>
	<link rel='stylesheet' href='/build/client/bundle.css'/>

	<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js'></script>
	<script type="module">
	function base64Encode( stringInput ) {
	var normalizedInput = encodeURIComponent( stringInput ).replace(
	/%([0-9A-F]{2})/g,
	function toSolidBytes( $0, hex ) {
	return( String.fromCharCode( "0x" + hex ) );
	}
	);
	return( btoa( normalizedInput ) );
	}

	var socket = io();
	var app;
	var version = 0;
	socket.on("file-change-event", async function (data) {
	if(app!=undefined) {
	console.log("Destroying: ", app);
	app.$destroy();
	}
	console.log("file change event received: ", data);
	version+=1; // force cache to disable

	var b64moduleData = "data:text/javascript;charset=utf-8;base64," + base64Encode(data.code);
	const Component = await import(b64moduleData);
	app = new Component.default({
	target: document.body
	});

	});
	</script>

	</head>

	<body>
	</body>
	</html>
	const rollup = require("rollup");
	const svelte = require('rollup-plugin-svelte');
	const resolve = require('@rollup/plugin-node-resolve');
	var express = require('express');
	const sirv = require('sirv');
	var fs = require('fs');
	var io = require('socket.io')(http);

	const { PerformanceObserver, performance } = require('perf_hooks');




	let inputOptions = {
	input: 'src/pages/components/input.svelte',
	plugins: [
	svelte({generate: "dom"}),
	resolve({
	browser: true,
	dedupe: importee => importee === 'svelte' \|\| importee.startsWith('svelte/')
	})
	]
	};

	const outputOptions = {
	sourcemap: true,
	format: 'es',
	dir: "build/components",
	};




	var app = express();

	app.get("/", function (req, res) {
	fs.readFile('src/lib/client/templates/components.html', function (_, data) {
	res.end(data);
	});
	});
	const sirv_files = sirv('./', {dev: true});
	app.use(sirv_files);

	var http = require('http').Server(app);
	http.listen(8080);
	var io = require('socket.io')(http);


	// Write new app file:


	let comp_file = fs.readFileSync('src/lib/client/templates/components.svelte');
	comp_file = comp_file.toString()
	.replace('__page__', '../../src/pages/components/input.svelte')
	.replace('__layout__', '../../src/pages/admin/layout.svelte');
	fs.writeFileSync('./build/components/components.svelte', comp_file);

	const watchOptions = {
	...inputOptions,
	input: './build/components/components.svelte',
	output: [outputOptions],
	watch: {
	}
	};
	const watcher = rollup.watch([watchOptions]);

	watcher.on('event', async event => {
	console.log(event);
	switch(event.code) {
	case 'BUNDLE_END':
	let res = await event.result.write(outputOptions);
	console.log(event);
	console.log(res);
	io.emit('file-change-event', {code: res.output[0].code, filename: res.output[0].fileName});
	break;
	}
	})

	console.log("started watcher");
	/*
	(async function loop() {
	for (let i = 0; i < 20; i++) {
	let t0 = performance.now();
	await build(files[i%2]);
	let t1 = performance.now();
	console.log("bundling took " + (t1 - t0) + " milliseconds.");
	}
	})();
	<script>
	import layout from '__layout__';
	import page from '__page__';
	let params = {};
	</script>

	<svelte:component this={layout} params={params}>
	<svelte:component this={page} params={params}/>
	</svelte:component>