Adrian Miranda adriancmiranda

Note: I'm not involved in Prepack in any way — please correct me if I say anything incorrect below!

A few people have asked me if Prepack and Svelte are similar projects with similar goals. The answer is 'no, they're not', but let's take a moment to explore why.

What is Prepack?

Prepack describes itself as a 'partial evaluator for JavaScript'. What that means is that it will run your code in a specialised interpreter that, rather than having some effect on the world (like printing a message to the console), will track the effects that would have happened and express them more directly.

So for example if you give it this code...

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

d3 Minimap Pan and Zoom

A Pen by Bill White on CodePen.

License.

d3.js drag and drop timeline

A Pen by Bill White on CodePen.

License.

	<script src="https://rawgit.com/adriancmiranda/console.js/master/trace.min.js"></script>
	<script>
	console.enabled = true;
	console.scrollback = 10;
	setInterval(function(){
	var css = 'text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), 5px 3px hsl(16.2, 100%, 50%), 7px 4px hsl(21.6, 100%, 50%), 9px 5px hsl(27, 100%, 50%), 11px 6px hsl(32.4, 100%, 50%), 13px 7px hsl(37.8, 100%, 50%), 14px 8px hsl(43.2, 100%, 50%), 16px 9px hsl(48.6, 100%, 50%), 18px 10px hsl(54, 100%, 50%), 20px 11px hsl(59.4, 100%, 50%), 22px 12px hsl(64.8, 100%, 50%), 23px 13px hsl(70.2, 100%, 50%), 25px 14px hsl(75.6, 100%, 50%), 27px 15px hsl(81, 100%, 50%), 28px 16px hsl(86.4, 100%, 50%), 30px 17px hsl(91.8, 100%, 50%), 32px 18px hsl(97.2, 100%, 50%), 33px 19px hsl(102.6, 100%, 50%), 35px 20px hsl(108, 100%, 50%), 36px 21px hsl(113.4, 100%, 50%), 38px 22px hsl(118.8, 100%, 50%), 39px 23px hsl(124.2, 100%, 50%), 41px 24px hsl(129.6, 100%, 50%), 42px 25px hsl(135, 100%, 50%), 43px 26px hsl(

	<div id="keysleft">
	move: WASD
	<br>Hold/Drop/Fire(hold it): E
	<br>Pause: F
	<br>Gravity: R
	<br>Have fun
	</div>
	<div id="keysright">
	zoom: + -
	<br>fire: click

	<svg viewBox="0 0 500 500">
	<g class="scene1">
	<defs>
	<clipPath id="circle">
	<circle class="mask" cx="250" cy="250" r="100" />
	</clipPath>
	<clipPath id="ground">
	<rect x="50" y="50" width="400" height="260" />
	</clipPath>
	</defs>

	function trimSvgWhitespace() {

	// get all SVG objects in the DOM
	var svgs = document.getElementsByTagName("svg");

	// go through each one and add a viewbox that ensures all children are visible
	for (var i=0, l=svgs.length; i<l; i++) {

	var svg = svgs[i],
	box = svg.getBBox(), // <- get the visual boundary required to view all children

	// original (broken) version is here: http://ivan-ghandhi.livejournal.com/942493.html
	// My fix: don't treat arguments as if it were an array
	// (Use Array.prototype.slice.call() to convert it)

	function stackTrace() {
	var err = new Error();
	console.log(typeof err.stack);
	return err.stack;
	}

	//
	// Regular Expression for URL validation
	//
	// Author: Diego Perini
	// Updated: 2010/12/05
	// License: MIT
	//
	// Copyright (c) 2010-2013 Diego Perini (http://www.iport.it)
	//
	// Permission is hereby granted, free of charge, to any person