-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1246 from sveltejs/omit-missing-prop-warning-for-…
…computed skip missing property warning for computed/global properties
- Loading branch information
Showing
5 changed files
with
398 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export default { | ||
options: { | ||
dev: true | ||
} | ||
}; |
306 changes: 306 additions & 0 deletions
306
test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,306 @@ | ||
function noop() {} | ||
|
||
function assign(target) { | ||
var k, | ||
source, | ||
i = 1, | ||
len = arguments.length; | ||
for (; i < len; i++) { | ||
source = arguments[i]; | ||
for (k in source) target[k] = source[k]; | ||
} | ||
|
||
return target; | ||
} | ||
|
||
function appendNode(node, target) { | ||
target.appendChild(node); | ||
} | ||
|
||
function insertNode(node, target, anchor) { | ||
target.insertBefore(node, anchor); | ||
} | ||
|
||
function detachNode(node) { | ||
node.parentNode.removeChild(node); | ||
} | ||
|
||
function createElement(name) { | ||
return document.createElement(name); | ||
} | ||
|
||
function createText(data) { | ||
return document.createTextNode(data); | ||
} | ||
|
||
function blankObject() { | ||
return Object.create(null); | ||
} | ||
|
||
function destroy(detach) { | ||
this.destroy = noop; | ||
this.fire('destroy'); | ||
this.set = this.get = noop; | ||
|
||
if (detach !== false) this._fragment.u(); | ||
this._fragment.d(); | ||
this._fragment = this._state = null; | ||
} | ||
|
||
function destroyDev(detach) { | ||
destroy.call(this, detach); | ||
this.destroy = function() { | ||
console.warn('Component was already destroyed'); | ||
}; | ||
} | ||
|
||
function _differs(a, b) { | ||
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); | ||
} | ||
|
||
function dispatchObservers(component, group, changed, newState, oldState) { | ||
for (var key in group) { | ||
if (!changed[key]) continue; | ||
|
||
var newValue = newState[key]; | ||
var oldValue = oldState[key]; | ||
|
||
var callbacks = group[key]; | ||
if (!callbacks) continue; | ||
|
||
for (var i = 0; i < callbacks.length; i += 1) { | ||
var callback = callbacks[i]; | ||
if (callback.__calling) continue; | ||
|
||
callback.__calling = true; | ||
callback.call(component, newValue, oldValue); | ||
callback.__calling = false; | ||
} | ||
} | ||
} | ||
|
||
function fire(eventName, data) { | ||
var handlers = | ||
eventName in this._handlers && this._handlers[eventName].slice(); | ||
if (!handlers) return; | ||
|
||
for (var i = 0; i < handlers.length; i += 1) { | ||
handlers[i].call(this, data); | ||
} | ||
} | ||
|
||
function get(key) { | ||
return key ? this._state[key] : this._state; | ||
} | ||
|
||
function init(component, options) { | ||
component._observers = { pre: blankObject(), post: blankObject() }; | ||
component._handlers = blankObject(); | ||
component._bind = options._bind; | ||
|
||
component.options = options; | ||
component.root = options.root || component; | ||
component.store = component.root.store || options.store; | ||
} | ||
|
||
function observe(key, callback, options) { | ||
var group = options && options.defer | ||
? this._observers.post | ||
: this._observers.pre; | ||
|
||
(group[key] || (group[key] = [])).push(callback); | ||
|
||
if (!options || options.init !== false) { | ||
callback.__calling = true; | ||
callback.call(this, this._state[key]); | ||
callback.__calling = false; | ||
} | ||
|
||
return { | ||
cancel: function() { | ||
var index = group[key].indexOf(callback); | ||
if (~index) group[key].splice(index, 1); | ||
} | ||
}; | ||
} | ||
|
||
function observeDev(key, callback, options) { | ||
var c = (key = '' + key).search(/[.[]/); | ||
if (c > -1) { | ||
var message = | ||
'The first argument to component.observe(...) must be the name of a top-level property'; | ||
if (c > 0) | ||
message += ", i.e. '" + key.slice(0, c) + "' rather than '" + key + "'"; | ||
|
||
throw new Error(message); | ||
} | ||
|
||
return observe.call(this, key, callback, options); | ||
} | ||
|
||
function on(eventName, handler) { | ||
if (eventName === 'teardown') return this.on('destroy', handler); | ||
|
||
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); | ||
handlers.push(handler); | ||
|
||
return { | ||
cancel: function() { | ||
var index = handlers.indexOf(handler); | ||
if (~index) handlers.splice(index, 1); | ||
} | ||
}; | ||
} | ||
|
||
function onDev(eventName, handler) { | ||
if (eventName === 'teardown') { | ||
console.warn( | ||
"Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated and will be unsupported in Svelte 2" | ||
); | ||
return this.on('destroy', handler); | ||
} | ||
|
||
return on.call(this, eventName, handler); | ||
} | ||
|
||
function set(newState) { | ||
this._set(assign({}, newState)); | ||
if (this.root._lock) return; | ||
this.root._lock = true; | ||
callAll(this.root._beforecreate); | ||
callAll(this.root._oncreate); | ||
callAll(this.root._aftercreate); | ||
this.root._lock = false; | ||
} | ||
|
||
function _set(newState) { | ||
var oldState = this._state, | ||
changed = {}, | ||
dirty = false; | ||
|
||
for (var key in newState) { | ||
if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; | ||
} | ||
if (!dirty) return; | ||
|
||
this._state = assign({}, oldState, newState); | ||
this._recompute(changed, this._state); | ||
if (this._bind) this._bind(changed, this._state); | ||
|
||
if (this._fragment) { | ||
dispatchObservers(this, this._observers.pre, changed, this._state, oldState); | ||
this._fragment.p(changed, this._state); | ||
dispatchObservers(this, this._observers.post, changed, this._state, oldState); | ||
} | ||
} | ||
|
||
function setDev(newState) { | ||
if (typeof newState !== 'object') { | ||
throw new Error( | ||
this._debugName + '.set was called without an object of data key-values to update.' | ||
); | ||
} | ||
|
||
this._checkReadOnly(newState); | ||
set.call(this, newState); | ||
} | ||
|
||
function callAll(fns) { | ||
while (fns && fns.length) fns.shift()(); | ||
} | ||
|
||
function _mount(target, anchor) { | ||
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); | ||
} | ||
|
||
function _unmount() { | ||
if (this._fragment) this._fragment.u(); | ||
} | ||
|
||
var protoDev = { | ||
destroy: destroyDev, | ||
get: get, | ||
fire: fire, | ||
observe: observeDev, | ||
on: onDev, | ||
set: setDev, | ||
teardown: destroyDev, | ||
_recompute: noop, | ||
_set: _set, | ||
_mount: _mount, | ||
_unmount: _unmount, | ||
_differs: _differs | ||
}; | ||
|
||
/* generated by Svelte vX.Y.Z */ | ||
|
||
function bar(foo) { | ||
return foo * 2; | ||
} | ||
|
||
function create_main_fragment(component, state) { | ||
var p, text_value = state.Math.max(0, state.foo), text, text_1, text_2; | ||
|
||
return { | ||
c: function create() { | ||
p = createElement("p"); | ||
text = createText(text_value); | ||
text_1 = createText("\n\t"); | ||
text_2 = createText(state.bar); | ||
}, | ||
|
||
m: function mount(target, anchor) { | ||
insertNode(p, target, anchor); | ||
appendNode(text, p); | ||
appendNode(text_1, p); | ||
appendNode(text_2, p); | ||
}, | ||
|
||
p: function update(changed, state) { | ||
if ((changed.Math || changed.foo) && text_value !== (text_value = state.Math.max(0, state.foo))) { | ||
text.data = text_value; | ||
} | ||
|
||
if (changed.bar) { | ||
text_2.data = state.bar; | ||
} | ||
}, | ||
|
||
u: function unmount() { | ||
detachNode(p); | ||
}, | ||
|
||
d: noop | ||
}; | ||
} | ||
|
||
function SvelteComponent(options) { | ||
this._debugName = '<SvelteComponent>'; | ||
if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option"); | ||
init(this, options); | ||
this._state = assign({ Math : Math }, options.data); | ||
this._recompute({ foo: 1 }, this._state); | ||
if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'"); | ||
|
||
this._fragment = create_main_fragment(this, this._state); | ||
|
||
if (options.target) { | ||
if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); | ||
this._fragment.c(); | ||
this._mount(options.target, options.anchor); | ||
} | ||
} | ||
|
||
assign(SvelteComponent.prototype, protoDev); | ||
|
||
SvelteComponent.prototype._checkReadOnly = function _checkReadOnly(newState) { | ||
if ('bar' in newState && !this._updatingReadonlyProperty) throw new Error("<SvelteComponent>: Cannot set read-only property 'bar'"); | ||
}; | ||
|
||
SvelteComponent.prototype._recompute = function _recompute(changed, state) { | ||
if (changed.foo) { | ||
if (this._differs(state.bar, (state.bar = bar(state.foo)))) changed.bar = true; | ||
} | ||
}; | ||
|
||
export default SvelteComponent; |
72 changes: 72 additions & 0 deletions
72
test/js/samples/dev-warning-missing-data-computed/expected.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
/* generated by Svelte vX.Y.Z */ | ||
import { appendNode, assign, createElement, createText, detachNode, init, insertNode, noop, protoDev } from "svelte/shared.js"; | ||
|
||
function bar(foo) { | ||
return foo * 2; | ||
} | ||
|
||
function create_main_fragment(component, state) { | ||
var p, text_value = state.Math.max(0, state.foo), text, text_1, text_2; | ||
|
||
return { | ||
c: function create() { | ||
p = createElement("p"); | ||
text = createText(text_value); | ||
text_1 = createText("\n\t"); | ||
text_2 = createText(state.bar); | ||
}, | ||
|
||
m: function mount(target, anchor) { | ||
insertNode(p, target, anchor); | ||
appendNode(text, p); | ||
appendNode(text_1, p); | ||
appendNode(text_2, p); | ||
}, | ||
|
||
p: function update(changed, state) { | ||
if ((changed.Math || changed.foo) && text_value !== (text_value = state.Math.max(0, state.foo))) { | ||
text.data = text_value; | ||
} | ||
|
||
if (changed.bar) { | ||
text_2.data = state.bar; | ||
} | ||
}, | ||
|
||
u: function unmount() { | ||
detachNode(p); | ||
}, | ||
|
||
d: noop | ||
}; | ||
} | ||
|
||
function SvelteComponent(options) { | ||
this._debugName = '<SvelteComponent>'; | ||
if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option"); | ||
init(this, options); | ||
this._state = assign({ Math : Math }, options.data); | ||
this._recompute({ foo: 1 }, this._state); | ||
if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'"); | ||
|
||
this._fragment = create_main_fragment(this, this._state); | ||
|
||
if (options.target) { | ||
if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); | ||
this._fragment.c(); | ||
this._mount(options.target, options.anchor); | ||
} | ||
} | ||
|
||
assign(SvelteComponent.prototype, protoDev); | ||
|
||
SvelteComponent.prototype._checkReadOnly = function _checkReadOnly(newState) { | ||
if ('bar' in newState && !this._updatingReadonlyProperty) throw new Error("<SvelteComponent>: Cannot set read-only property 'bar'"); | ||
}; | ||
|
||
SvelteComponent.prototype._recompute = function _recompute(changed, state) { | ||
if (changed.foo) { | ||
if (this._differs(state.bar, (state.bar = bar(state.foo)))) changed.bar = true; | ||
} | ||
} | ||
export default SvelteComponent; |
Oops, something went wrong.