mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
e77988b195
@ -0,0 +1,7 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
export default class Action extends Node {
|
||||
name: string;
|
||||
value: Node[]
|
||||
expression: Node
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import checkForDupes from '../utils/checkForDupes';
|
||||
import checkForComputedKeys from '../utils/checkForComputedKeys';
|
||||
import { Validator } from '../../';
|
||||
import { Node } from '../../../interfaces';
|
||||
|
||||
export default function actions(validator: Validator, prop: Node) {
|
||||
if (prop.value.type !== 'ObjectExpression') {
|
||||
validator.error(
|
||||
`The 'actions' property must be an object literal`,
|
||||
prop
|
||||
);
|
||||
}
|
||||
|
||||
checkForDupes(validator, prop.value.properties);
|
||||
checkForComputedKeys(validator, prop.value.properties);
|
||||
}
|
||||
@ -0,0 +1,246 @@
|
||||
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 insertNode(node, target, anchor) {
|
||||
target.insertBefore(node, anchor);
|
||||
}
|
||||
|
||||
function detachNode(node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
function createElement(name) {
|
||||
return document.createElement(name);
|
||||
}
|
||||
|
||||
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 _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 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 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 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 proto = {
|
||||
destroy: destroy,
|
||||
get: get,
|
||||
fire: fire,
|
||||
observe: observe,
|
||||
on: on,
|
||||
set: set,
|
||||
teardown: destroy,
|
||||
_recompute: noop,
|
||||
_set: _set,
|
||||
_mount: _mount,
|
||||
_unmount: _unmount,
|
||||
_differs: _differs
|
||||
};
|
||||
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
|
||||
function link(node) {
|
||||
|
||||
function onClick(event) {
|
||||
event.preventDefault();
|
||||
history.pushState(null, null, event.target.href);
|
||||
}
|
||||
|
||||
node.addEventListener('click', onClick);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('click', onClick);
|
||||
}
|
||||
}
|
||||
}
|
||||
function create_main_fragment(component, state) {
|
||||
var a, link_action;
|
||||
|
||||
return {
|
||||
c: function create() {
|
||||
a = createElement("a");
|
||||
a.textContent = "Test";
|
||||
this.h();
|
||||
},
|
||||
|
||||
h: function hydrate() {
|
||||
a.href = "#";
|
||||
link_action = link(a) || {};
|
||||
},
|
||||
|
||||
m: function mount(target, anchor) {
|
||||
insertNode(a, target, anchor);
|
||||
},
|
||||
|
||||
p: noop,
|
||||
|
||||
u: function unmount() {
|
||||
detachNode(a);
|
||||
},
|
||||
|
||||
d: function destroy$$1() {
|
||||
if (typeof link_action.destroy === 'function') link_action.destroy();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function SvelteComponent(options) {
|
||||
init(this, options);
|
||||
this._state = assign({}, options.data);
|
||||
|
||||
this._fragment = create_main_fragment(this, this._state);
|
||||
|
||||
if (options.target) {
|
||||
this._fragment.c();
|
||||
this._mount(options.target, options.anchor);
|
||||
}
|
||||
}
|
||||
|
||||
assign(SvelteComponent.prototype, proto);
|
||||
|
||||
export default SvelteComponent;
|
||||
@ -0,0 +1,64 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
|
||||
|
||||
function link(node) {
|
||||
|
||||
function onClick(event) {
|
||||
event.preventDefault();
|
||||
history.pushState(null, null, event.target.href);
|
||||
}
|
||||
|
||||
node.addEventListener('click', onClick);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('click', onClick);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function create_main_fragment(component, state) {
|
||||
var a, link_action;
|
||||
|
||||
return {
|
||||
c: function create() {
|
||||
a = createElement("a");
|
||||
a.textContent = "Test";
|
||||
this.h();
|
||||
},
|
||||
|
||||
h: function hydrate() {
|
||||
a.href = "#";
|
||||
link_action = link(a) || {};
|
||||
},
|
||||
|
||||
m: function mount(target, anchor) {
|
||||
insertNode(a, target, anchor);
|
||||
},
|
||||
|
||||
p: noop,
|
||||
|
||||
u: function unmount() {
|
||||
detachNode(a);
|
||||
},
|
||||
|
||||
d: function destroy() {
|
||||
if (typeof link_action.destroy === 'function') link_action.destroy();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function SvelteComponent(options) {
|
||||
init(this, options);
|
||||
this._state = assign({}, options.data);
|
||||
|
||||
this._fragment = create_main_fragment(this, this._state);
|
||||
|
||||
if (options.target) {
|
||||
this._fragment.c();
|
||||
this._mount(options.target, options.anchor);
|
||||
}
|
||||
}
|
||||
|
||||
assign(SvelteComponent.prototype, proto);
|
||||
export default SvelteComponent;
|
||||
@ -0,0 +1,23 @@
|
||||
<a href="#" use:link>Test</a>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
actions: {
|
||||
link(node) {
|
||||
|
||||
function onClick(event) {
|
||||
event.preventDefault();
|
||||
history.pushState(null, null, event.target.href);
|
||||
}
|
||||
|
||||
node.addEventListener('click', onClick);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('click', onClick);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<input use:tooltip="t('tooltip msg')">
|
||||
@ -0,0 +1,47 @@
|
||||
{
|
||||
"hash": 1937205193,
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 38,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 38,
|
||||
"type": "Element",
|
||||
"name": "input",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 7,
|
||||
"end": 37,
|
||||
"type": "Action",
|
||||
"name": "tooltip",
|
||||
"expression": {
|
||||
"type": "CallExpression",
|
||||
"start": 20,
|
||||
"end": 36,
|
||||
"callee": {
|
||||
"type": "Identifier",
|
||||
"start": 20,
|
||||
"end": 21,
|
||||
"name": "t"
|
||||
},
|
||||
"arguments": [
|
||||
{
|
||||
"type": "Literal",
|
||||
"start": 22,
|
||||
"end": 35,
|
||||
"value": "tooltip msg",
|
||||
"raw": "'tooltip msg'"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": null,
|
||||
"js": null
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<input use:tooltip="message">
|
||||
@ -0,0 +1,33 @@
|
||||
{
|
||||
"hash": 1937205193,
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 29,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 29,
|
||||
"type": "Element",
|
||||
"name": "input",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 7,
|
||||
"end": 28,
|
||||
"type": "Action",
|
||||
"name": "tooltip",
|
||||
"expression": {
|
||||
"type": "Identifier",
|
||||
"start": 20,
|
||||
"end": 27,
|
||||
"name": "message"
|
||||
}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": null,
|
||||
"js": null
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<input use:tooltip="'tooltip msg'">
|
||||
@ -0,0 +1,34 @@
|
||||
{
|
||||
"hash": 1937205193,
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 35,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 35,
|
||||
"type": "Element",
|
||||
"name": "input",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 7,
|
||||
"end": 34,
|
||||
"type": "Action",
|
||||
"name": "tooltip",
|
||||
"expression": {
|
||||
"type": "Literal",
|
||||
"start": 20,
|
||||
"end": 33,
|
||||
"value": "tooltip msg",
|
||||
"raw": "'tooltip msg'"
|
||||
}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": null,
|
||||
"js": null
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<input use:autofocus>
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"hash": 1937205193,
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 21,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 21,
|
||||
"type": "Element",
|
||||
"name": "input",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 7,
|
||||
"end": 20,
|
||||
"type": "Action",
|
||||
"name": "autofocus",
|
||||
"expression": null
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": null,
|
||||
"js": null
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>action</button>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const button = target.querySelector( 'button' );
|
||||
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||
|
||||
button.dispatchEvent( eventEnter );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
<div class="tooltip">Perform an Action</div>
|
||||
` );
|
||||
|
||||
button.dispatchEvent( eventLeave );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
<button use:tooltip="t(actionTransKey)">action</button>
|
||||
|
||||
<script>
|
||||
const translations = {
|
||||
perform_action: 'Perform an Action'
|
||||
};
|
||||
|
||||
function t(key) {
|
||||
return translations[key] || `{{${key}}}`;
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { t, actionTransKey: 'perform_action' };
|
||||
},
|
||||
|
||||
actions: {
|
||||
tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onMouseEnter() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
node.parentNode.appendChild(tooltip);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (!tooltip) return;
|
||||
tooltip.remove();
|
||||
tooltip = null;
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', onMouseEnter);
|
||||
node.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('mouseenter', onMouseEnter);
|
||||
node.removeEventListener('mouseleave', onMouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,29 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>action</button>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const button = target.querySelector( 'button' );
|
||||
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||
const ctrlPress = new window.KeyboardEvent( 'keydown', { ctrlKey: true } );
|
||||
|
||||
button.dispatchEvent( eventEnter );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
<div class="tooltip">Perform an Action</div>
|
||||
` );
|
||||
|
||||
window.dispatchEvent( ctrlPress );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
<div class="tooltip">Perform an augmented Action</div>
|
||||
` );
|
||||
|
||||
button.dispatchEvent( eventLeave );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
<button use:tooltip="tooltip">action</button>
|
||||
<:Window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return { tooltip: 'Perform an Action' };
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkForCtrl(event) {
|
||||
if (event.ctrlKey) {
|
||||
this.set({ tooltip: 'Perform an augmented Action' });
|
||||
} else {
|
||||
this.set({ tooltip: 'Perform an Action' });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onMouseEnter() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
node.parentNode.appendChild(tooltip);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (!tooltip) return;
|
||||
tooltip.remove();
|
||||
tooltip = null;
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', onMouseEnter);
|
||||
node.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
return {
|
||||
update(text) {
|
||||
if (tooltip) tooltip.textContent = text;
|
||||
},
|
||||
destroy() {
|
||||
node.removeEventListener('mouseenter', onMouseEnter);
|
||||
node.removeEventListener('mouseleave', onMouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>action</button>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const button = target.querySelector( 'button' );
|
||||
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||
|
||||
button.dispatchEvent( eventEnter );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
<div class="tooltip">Perform an Action</div>
|
||||
` );
|
||||
|
||||
button.dispatchEvent( eventLeave );
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>action</button>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
<button use:tooltip="'Perform an Action'">action</button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
actions: {
|
||||
tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onMouseEnter() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
node.parentNode.appendChild(tooltip);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (!tooltip) return;
|
||||
tooltip.remove();
|
||||
tooltip = null;
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', onMouseEnter);
|
||||
node.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('mouseenter', onMouseEnter);
|
||||
node.removeEventListener('mouseleave', onMouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,46 @@
|
||||
<button use:tooltip="t(actionTransKey)">action</button>
|
||||
|
||||
<script>
|
||||
const translations = {
|
||||
perform_action: 'Perform an Action'
|
||||
};
|
||||
|
||||
function t(key) {
|
||||
return translations[key] || `{{${key}}}`;
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { t, actionTransKey: 'perform_action' };
|
||||
},
|
||||
|
||||
actions: {
|
||||
tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onMouseEnter() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
node.parentNode.appendChild(tooltip);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (!tooltip) return;
|
||||
tooltip.remove();
|
||||
tooltip = null;
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', onMouseEnter);
|
||||
node.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('mouseenter', onMouseEnter);
|
||||
node.removeEventListener('mouseleave', onMouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
[{
|
||||
"message": "Missing action 'whatever'",
|
||||
"pos": 5,
|
||||
"loc": {
|
||||
"line": 1,
|
||||
"column": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 17
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1 @@
|
||||
<div use:whatever></div>
|
||||
@ -0,0 +1,12 @@
|
||||
[{
|
||||
"message": "Actions can only be applied to DOM elements, not components",
|
||||
"pos": 8,
|
||||
"loc": {
|
||||
"line": 1,
|
||||
"column": 8
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 15
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,15 @@
|
||||
<Widget use:foo/>
|
||||
|
||||
<script>
|
||||
import Widget from './Widget.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Widget
|
||||
},
|
||||
|
||||
actions: {
|
||||
foo() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue