Merge 57b845c into 3d2edb6

compat/mangle.json

@@ -6,6 +6,7 @@
   "props": {
     "cname": 6,
     "props": {
+      "$__data": "__z",
       "$_dirty": "__d",
       "$_nextState": "__s",
       "$_renderCallbacks": "__h",

compat/src/suspense.js

@@ -46,8 +46,8 @@ function detachDom(children) {
 // having custom inheritance instead of a class here saves a lot of bytes
 export function Suspense(props) {
 	// we do not call super here to golf some bytes...
-	this._suspensions = [];
-	this._fallback = props.fallback;
+	this.__data._suspensions = [];
+	this.__data._fallback = props.fallback;
 }
 
 // Things we do here to save some bytes but are not proper JS inheritance:
@@ -61,20 +61,21 @@ Suspense.prototype = new Component();
 Suspense.prototype._childDidSuspend = function(promise) {
 	/** @type {import('./internal').SuspenseComponent} */
 	const c = this;
-	c._suspensions.push(promise);
+	const { __data: cData } = c;
+	cData._suspensions.push(promise);
 
 	const onSuspensionComplete = () => {
 		// From https://twitter.com/Rich_Harris/status/1125850391155965952
-		c._suspensions[c._suspensions.indexOf(promise)] =
-			c._suspensions[c._suspensions.length - 1];
-		c._suspensions.pop();
+		cData._suspensions[cData._suspensions.indexOf(promise)] =
+			cData._suspensions[cData._suspensions.length - 1];
+		cData._suspensions.pop();
 
-		if (c._suspensions.length == 0) {
+		if (cData._suspensions.length == 0) {
 			// If fallback is null, don't try to unmount it
 			// `unmount` expects a real VNode, not null values
-			if (c._fallback) {
+			if (cData._fallback) {
 				// Unmount current children (should be fallback)
-				unmount(c._fallback);
+				unmount(cData._fallback);
 			}
 			c._vnode._dom = null;
 
@@ -84,7 +85,7 @@ Suspense.prototype._childDidSuspend = function(promise) {
 	};
 
 	if (c.state._parkedChildren == null) {
-		c._fallback = c._fallback && cloneElement(c._fallback);
+		cData._fallback = cData._fallback && cloneElement(cData._fallback);
 		c.setState({ _parkedChildren: c._vnode._children });
 		detachDom(c._vnode._children);
 		c._vnode._children = [];
@@ -94,7 +95,7 @@ Suspense.prototype._childDidSuspend = function(promise) {
 };
 
 Suspense.prototype.render = function(props, state) {
-	return state._parkedChildren ? this._fallback : props.children;
+	return state._parkedChildren ? this.__data._fallback : props.children;
 };
 
 export function lazy(loader) {

compat/test/browser/suspense.test.js

@@ -913,7 +913,6 @@ describe('suspense', () => {
 			scratch
 		);
 		rerender(); // Rerender with the fallback HTML
-
 		expect(scratch.innerHTML).to.equal(loadingHtml);
 
 		resolve1(() => <b>1</b>)

debug/mangle.json

@@ -19,6 +19,7 @@
   "props": {
     "cname": 6,
     "props": {
+      "$__data": "__z",
       "$_depth": "__b",
       "$_dirty": "__d",
       "$_prevState": "__u",

debug/src/debug.js

@@ -123,10 +123,10 @@ export function initDebug() {
 			);
 		} else if (
 			type === 'tr' &&
-			(parentVNode.type !== 'thead' &&
-				parentVNode.type !== 'tfoot' &&
-				parentVNode.type !== 'tbody' &&
-				parentVNode.type !== 'table')
+			parentVNode.type !== 'thead' &&
+			parentVNode.type !== 'tfoot' &&
+			parentVNode.type !== 'tbody' &&
+			parentVNode.type !== 'table'
 		) {
 			console.error(
 				'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
@@ -269,8 +269,8 @@ export function initDebug() {
 
 		/** @type {import('./internal').Component} */
 		const component = vnode._component;
-		if (component && component.__hooks) {
-			let hooks = component.__hooks;
+		if (component && component.__data.__hooks) {
+			let hooks = component.__data.__hooks;
 			if (Array.isArray(hooks._list)) {
 				hooks._list.forEach(hook => {
 					if (hook._callback && (!hook._args || !Array.isArray(hook._args))) {
@@ -303,7 +303,7 @@ export function initDebug() {
 			}
 
 			// Layout Effects
-			component._renderCallbacks.forEach(possibleEffect => {
+			component.__data._renderCallbacks.forEach(possibleEffect => {
 				if (
 					possibleEffect._value &&
 					!Array.isArray(possibleEffect._args) &&

debug/test/browser/debug-suspense.test.js

@@ -75,7 +75,7 @@ describe('debug with suspense', () => {
 			expect(console.error).to.not.be.called;
 
 			return loader
-				.then(() => Promise.all(suspense._component._suspensions))
+				.then(() => Promise.all(suspense._component.__data._suspensions))
 				.then(() => {
 					rerender();
 					expect(errors.length).to.equal(1);
@@ -101,7 +101,7 @@ describe('debug with suspense', () => {
 				render(suspense, scratch);
 
 				return loader
-					.then(() => Promise.all(suspense._component._suspensions))
+					.then(() => Promise.all(suspense._component.__data._suspensions))
 					.then(() => {
 						expect(console.warn).to.be.calledTwice;
 						expect(warnings[1].includes('MyLazyLoaded')).to.equal(true);
@@ -124,7 +124,7 @@ describe('debug with suspense', () => {
 				render(suspense, scratch);
 
 				return loader
-					.then(() => Promise.all(suspense._component._suspensions))
+					.then(() => Promise.all(suspense._component.__data._suspensions))
 					.then(() => {
 						expect(console.warn).to.be.calledTwice;
 						expect(warnings[1].includes('HelloLazy')).to.equal(true);

hooks/mangle.json

@@ -6,6 +6,7 @@
   "props": {
     "cname": 6,
     "props": {
+      "$__data": "__z",
       "$_afterPaintQueued": "__a",
       "$__hooks": "__H",
       "$_component": "__c",

hooks/src/index.js

@@ -21,12 +21,13 @@ options._render = vnode => {
 	if (oldBeforeRender) oldBeforeRender(vnode);
 
 	currentComponent = vnode._component;
+	let compData = currentComponent.__data;
 	currentIndex = 0;
 
-	if (currentComponent.__hooks) {
-		currentComponent.__hooks._pendingEffects.forEach(invokeCleanup);
-		currentComponent.__hooks._pendingEffects.forEach(invokeEffect);
-		currentComponent.__hooks._pendingEffects = [];
+	if (compData.__hooks) {
+		compData.__hooks._pendingEffects.forEach(invokeCleanup);
+		compData.__hooks._pendingEffects.forEach(invokeEffect);
+		compData.__hooks._pendingEffects = [];
 	}
 };
 
@@ -36,7 +37,7 @@ options.diffed = vnode => {
 	const c = vnode._component;
 	if (!c) return;
 
-	const hooks = c.__hooks;
+	const hooks = c.__data.__hooks;
 	if (hooks) {
 		if (hooks._pendingEffects.length) {
 			afterPaint(afterPaintEffects.push(c));
@@ -46,8 +47,9 @@ options.diffed = vnode => {
 
 options._commit = (vnode, commitQueue) => {
 	commitQueue.some(component => {
-		component._renderCallbacks.forEach(invokeCleanup);
-		component._renderCallbacks = component._renderCallbacks.filter(cb =>
+		const { __data } = component;
+		__data._renderCallbacks.forEach(invokeCleanup);
+		__data._renderCallbacks = __data._renderCallbacks.filter(cb =>
 			cb._value ? invokeEffect(cb) : true
 		);
 	});
@@ -61,7 +63,7 @@ options.unmount = vnode => {
 	const c = vnode._component;
 	if (!c) return;
 
-	const hooks = c.__hooks;
+	const hooks = c.__data.__hooks;
 	if (hooks) {
 		hooks._list.forEach(hook => hook._cleanup && hook._cleanup());
 	}
@@ -80,8 +82,8 @@ function getHookState(index) {
 	// Other implementations to look at:
 	// * https://codesandbox.io/s/mnox05qp8
 	const hooks =
-		currentComponent.__hooks ||
-		(currentComponent.__hooks = { _list: [], _pendingEffects: [] });
+		currentComponent.__data.__hooks ||
+		(currentComponent.__data.__hooks = { _list: [], _pendingEffects: [] });
 
 	if (index >= hooks._list.length) {
 		hooks._list.push({});
@@ -135,7 +137,7 @@ export function useEffect(callback, args) {
 		state._value = callback;
 		state._args = args;
 
-		currentComponent.__hooks._pendingEffects.push(state);
+		currentComponent.__data.__hooks._pendingEffects.push(state);
 	}
 }
 
@@ -150,7 +152,7 @@ export function useLayoutEffect(callback, args) {
 		state._value = callback;
 		state._args = args;
 
-		currentComponent._renderCallbacks.push(state);
+		currentComponent.__data._renderCallbacks.push(state);
 	}
 }
 
@@ -228,9 +230,9 @@ export function useDebugValue(value, formatter) {
 function flushAfterPaintEffects() {
 	afterPaintEffects.some(component => {
 		if (component._parentDom) {
-			component.__hooks._pendingEffects.forEach(invokeCleanup);
-			component.__hooks._pendingEffects.forEach(invokeEffect);
-			component.__hooks._pendingEffects = [];
+			component.__data.__hooks._pendingEffects.forEach(invokeCleanup);
+			component.__data.__hooks._pendingEffects.forEach(invokeEffect);
+			component.__data.__hooks._pendingEffects = [];
 		}
 	});
 	afterPaintEffects = [];

mangle.json

@@ -17,6 +17,7 @@
   "props": {
     "cname": 6,
     "props": {
+      "$__data": "__z",
       "$_depth": "__b",
       "$_lastDomChild": "__d",
       "$_dirty": "__d",

src/component.js

@@ -13,6 +13,7 @@ import { Fragment } from './create-element';
 export function Component(props, context) {
 	this.props = props;
 	this.context = context;
+	this.__data = {};
 }
 
 /**
@@ -26,10 +27,11 @@ export function Component(props, context) {
 Component.prototype.setState = function(update, callback) {
 	// only clone state when copying to nextState the first time.
 	let s;
-	if (this._nextState !== this.state) {
-		s = this._nextState;
+	const { __data } = this;
+	if (__data._nextState !== this.state) {
+		s = __data._nextState;
 	} else {
-		s = this._nextState = assign({}, this.state);
+		s = __data._nextState = assign({}, this.state);
 	}
 
 	if (typeof update == 'function') {
@@ -44,8 +46,8 @@ Component.prototype.setState = function(update, callback) {
 	if (update == null) return;
 
 	if (this._vnode) {
-		this._force = false;
-		if (callback) this._renderCallbacks.push(callback);
+		__data._force = false;
+		if (callback) __data._renderCallbacks.push(callback);
 		enqueueRender(this);
 	}
 };
@@ -56,12 +58,13 @@ Component.prototype.setState = function(update, callback) {
  * re-rendered
  */
 Component.prototype.forceUpdate = function(callback) {
+	const { __data } = this;
 	if (this._vnode) {
 		// Set render mode so that we can differentiate where the render request
 		// is coming from. We need this because forceUpdate should never call
 		// shouldComponentUpdate
-		this._force = true;
-		if (callback) this._renderCallbacks.push(callback);
+		__data._force = true;
+		if (callback) __data._renderCallbacks.push(callback);
 		enqueueRender(this);
 	}
 };
@@ -117,6 +120,7 @@ export function getDomSibling(vnode, childIndex) {
 function renderComponent(component) {
 	let vnode = component._vnode,
 		oldDom = vnode._dom,
+		__data = component.__data,
 		parentDom = component._parentDom;
 
 	if (parentDom) {
@@ -125,7 +129,7 @@ function renderComponent(component) {
 			parentDom,
 			vnode,
 			assign({}, vnode),
-			component._context,
+			__data._context,
 			parentDom.ownerSVGElement !== undefined,
 			null,
 			commitQueue,
@@ -190,8 +194,9 @@ let prevDebounce;
  * @param {import('./internal').Component} c The component to rerender
  */
 export function enqueueRender(c) {
+	const { __data: cData } = c;
 	if (
-		(!c._dirty && (c._dirty = true) && q.push(c) === 1) ||
+		(!cData._dirty && (cData._dirty = true) && q.push(c) === 1) ||
 		prevDebounce !== options.debounceRendering
 	) {
 		prevDebounce = options.debounceRendering;
@@ -205,6 +210,6 @@ function process() {
 	q.sort((a, b) => b._vnode._depth - a._vnode._depth);
 	while ((p = q.pop())) {
 		// forceUpdate's callback argument is reused here to indicate a non-forced update.
-		if (p._dirty) renderComponent(p);
+		if (p.__data._dirty) renderComponent(p);
 	}
 }

src/diff/catch-error.js

@@ -12,7 +12,10 @@ export function _catchError(error, vnode) {
 	let component;
 
 	for (; (vnode = vnode._parent); ) {
-		if ((component = vnode._component) && !component._processingException) {
+		if (
+			(component = vnode._component) &&
+			!component.__data._processingException
+		) {
 			try {
 				if (
 					component.constructor &&
@@ -26,7 +29,7 @@ export function _catchError(error, vnode) {
 				} else {
 					continue;
 				}
-				return enqueueRender((component._pendingError = component));
+				return enqueueRender((component.__data._pendingError = component));
 			} catch (e) {
 				error = e;
 			}