brandonbloom · August 29, 2015 14:19 · brandonbloom · Apr 25, 2015 · petehunt · Apr 25, 2015
diff --git a/gistfile1.txt b/gistfile1.txt
 Follow up to https://twitter.com/BrandonBloom/status/591772674193403905

 No idea if this will even work, much less perform well. This is just an idea.


 Let's say you've got this file:


 var color = 'red';
 // ...
 var style = {
  color: color,
  margin: '20px',
 };

 return <div style={style}>blah</div>;


 Just like the "hovered" in the jsxstyle readme, the color might be dynamic,
 so the compiler is conservative and it's treated as dynamic.

 However, what if you just assumed optimstically that everything was static?
 ie you generate something like:

 .foo__1__0 {
  color: red;
  margin: 20px;
 }
 
 <div class="foo__1__0">blah</div>

 And then keep a mapping like:
 {foo__1: {version: 0, style: {color: 'red', margin: '20px'}}}

 The next time you render a foo__1, you check which styles match.
 Let's say this time around, the color doesn't change. Nothing happens.

 However, if you change the color to blue, you'd deoptimize and remember dynamic properties.
 The new mapping would look like:

 {foo__1: {version: 1, style: {color: DYNAMIC, margin: '20px'}}}

 And this would get appended to the code:

 .foo__1__1 {
  margin: 20px;
 }

 And new HTML:

 <div class="foo__1__1" style="color: blue">blah</div>


 Assuming that appending to a stylesheet isn't SUPER SLOW, it will,
 overtime, stop happening as all the dynamic properties are discovered.

 You could also keep a mapping of ref counts for style garbage collection:

 before color change:   {foo__1__0: 1}
 after color change:    {foo__1__0: 0, foo__1__1: 1}
 after collection:      {foo__1__1: 1}


 This approach would eliminate the precompilation and
 enable maximal statics in the stylesheets.

 A more clever approach could keep track of *how dynamic* properties are,
 and switch them back to static if they change rarely.
 But the naive approach would probably be fine.

 The tradeoffs that I'd have to measure to understand is:
 1) How much faster are stylesheets?
 2) How expensive is staticstyle sheet generation?
 3) other things too, i'm sure
	Follow up to https://twitter.com/BrandonBloom/status/591772674193403905

	No idea if this will even work, much less perform well. This is just an idea.


	Let's say you've got this file:


	var color = 'red';
	// ...
	var style = {
	color: color,
	margin: '20px',
	};

	return <div style={style}>blah</div>;


	Just like the "hovered" in the jsxstyle readme, the color might be dynamic,
	so the compiler is conservative and it's treated as dynamic.

	However, what if you just assumed optimstically that everything was static?
	ie you generate something like:

	.foo__1__0 {
	color: red;
	margin: 20px;
	}

	<div class="foo__1__0">blah</div>

	And then keep a mapping like:
	{foo__1: {version: 0, style: {color: 'red', margin: '20px'}}}

	The next time you render a foo__1, you check which styles match.
	Let's say this time around, the color doesn't change. Nothing happens.

	However, if you change the color to blue, you'd deoptimize and remember dynamic properties.
	The new mapping would look like:

	{foo__1: {version: 1, style: {color: DYNAMIC, margin: '20px'}}}

	And this would get appended to the code:

	.foo__1__1 {
	margin: 20px;
	}

	And new HTML:

	<div class="foo__1__1" style="color: blue">blah</div>


	Assuming that appending to a stylesheet isn't SUPER SLOW, it will,
	overtime, stop happening as all the dynamic properties are discovered.

	You could also keep a mapping of ref counts for style garbage collection:

	before color change: {foo__1__0: 1}
	after color change: {foo__1__0: 0, foo__1__1: 1}
	after collection: {foo__1__1: 1}


	This approach would eliminate the precompilation and
	enable maximal statics in the stylesheets.

	A more clever approach could keep track of how dynamic properties are,
	and switch them back to static if they change rarely.
	But the naive approach would probably be fine.

	The tradeoffs that I'd have to measure to understand is:
	1) How much faster are stylesheets?
	2) How expensive is staticstyle sheet generation?
	3) other things too, i'm sure